tenant-Platform/src/views/consoleManage/financeDataManage/receivableData/receivableDataDetail.vue

<template>
  <div class="log">
    <div class='btn-box'>
      <el-button type="primary" plain class='query-btn'
        @click='dialogShow'>{{selectedKeys.length?`已选${selectedKeys.length}项`:'筛选条件'}}</el-button>
      <div class='query-btn'>
        <DowButton @endAnim='downloadFile'></DowButton>
      </div>
    </div>
    <QueryForm :option="listOption" @query='query' @delSelect='delSelect' ref='queryFormRef'></QueryForm>

    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%" :header-cell-style="tableHeaderColor">
      <el-table-column prop="companyName" label="保险公司" align='center' width='200' fixed />
      <el-table-column prop="partnerCompanyName" label="地区" align='center' width='200' fixed>
        <template #default="props">
          <div >{{props.row.partnerCompanyName}}</div>
        </template>
      </el-table-column>
      <el-table-column label="应收" align='center'>
        <el-table-column prop="accountsReceivableSumMoney" label="总计" align='center' width='200' />
        <el-table-column prop="accountsReceivableCommissionMoney" label="手续费" align='center' width='200' />
        <el-table-column prop="accountsReceivableFollowUpFeeMoney" label="跟单费" align='center' width='200' />
      </el-table-column>
      <el-table-column label="未开票" align='center'>
        <el-table-column prop="uninvoicedSumMoney" label="总计" align='center' width='200' />
        <el-table-column prop="uninvoicedCommissionMoney" label="手续费" align='center' width='200' />
        <el-table-column prop="uninvoicedFollowUpFeeMoney" label="跟单费" align='center' width='200' />
      </el-table-column>
      <el-table-column label="已开票" align='center'>
        <el-table-column prop="invoicedSumMoney" label="总计" align='center' width='200' />
        <el-table-column prop="invoicedCommissionMoney" label="手续费" align='center' width='200' />
        <el-table-column prop="invoicedFollowUpFeeMoney" label="跟单费" align='center' width='200' />
      </el-table-column>
      <el-table-column label="未结算" align='center'>
        <el-table-column prop="unsettledSumMoney" label="总计" align='center' width='200' />
        <el-table-column prop="unsettledCommissionMoney" label="手续费" align='center' width='200' />
        <el-table-column prop="unsettledFollowUpFeeMoney" label="跟单费" align='center' width='200' />
      </el-table-column>
      <el-table-column label="已结算" align='center'>
        <el-table-column prop="settledSumMoney" label="总计" align='center' width='200' />
        <el-table-column prop="settledCommissionMoney" label="手续费" align='center' width='200' />
        <el-table-column prop="settledFollowUpFeeMoney" label="跟单费" align='center' width='200' />
      </el-table-column>
    </el-table>

    <FilterDialog :show='isShow' @close='isShow=false' @sure='filterSure' ref='filterDialogRef' @selectedKeys='selected'
      routerKey='routerKey'>
    </FilterDialog>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import api from "@/api";
import QueryForm from "../../components/queryForm.vue";
import FilterDialog from "../../components/filterDialog.vue";
import DowButton from "../../components/button.vue";
import Sort from "../../components/sort.vue";
import useUserStore from "@/store/modules/message";
import PageInfo from "@/api/types/agreementTypes";
import { ElMessage } from "element-plus";

const router = useRouter();
const userStore = useUserStore();
const isShow = ref(false);

const isSort = ref();
const pageInfo = ref({
  pageNum: 1,
  pageSize: 10,
  sizes: [10, 20, 30, 40, 50],
  total: 0,
});
const listOption = reactive({
  rowKey: "receivableDelId",
  //查询
  queryFormFields: [],
});

const selectedKeys = ref([]);
const selected = function (val) {
  selectedKeys.value = val;
};

let label = ["保险公司", "应收", "已开票", "已结算"];
const tableHeaderColor = ({ row, column, rowIndex, columnIndex }) => {
  if (!label.includes(column.label)) {
    return {
      backgroundColor: "#FFF",
    };
  }
};

//查询数据
const phone = JSON.parse(localStorage.getItem("userInfo")).username;

//获取默认选择数据
const queryFormRes = ref();
const routerKey = ref("receivableDataDetail");
const defaultList = ref();
const pageHiddenList = ref([]); //页面不显示的数据
const initDefaultList = async () => {
  const { data } = await api.manageApi.getSearchDefaultList({
    routerKey: routerKey.value,
    userId: phone,
  });
  listOption.queryFormFields = data.filter((e) => e.showFlag);

  pageHiddenList.value = data.filter((e) => !e.showFlag);
  defaultList.value = data.map((e) => e.id);
  selectedKeys.value = defaultList.value;
  queryFormRes.value = queryFormRef.value?.initDefaultSaveForm();
  queryList();
};

//删除
const filterDialogRef = ref();
const delSelect = (id) => {
  listOption.queryFormFields = listOption.queryFormFields.filter(
    (item) => item.id != id
  );
  filterDialogRef.value.initList(
    [...listOption.queryFormFields, ...pageHiddenList.value],
    defaultList.value
  );
};

//打开dialogShow
const dialogShow = function () {
  isShow.value = true;
  filterDialogRef.value.initList(
    [...listOption.queryFormFields, ...pageHiddenList.value],
    defaultList.value
  );
};

//确定
const queryFormRef = ref();
const filterSure = (item, index) => {
  isShow.value = false;
  const secondGroupIds = item.list.map((item) => item.id);
  const oldList = listOption.queryFormFields.filter((item) =>
    secondGroupIds.includes(item.id)
  );
  const firstGroupIds = listOption.queryFormFields.map((item) => item.id);
  let newList = item.list.filter((item) => !firstGroupIds.includes(item.id));

  //过滤掉默认不显示的数据
  const hiddenList = new Set(pageHiddenList.value.map((item) => item.id));
  const filterList = newList.filter((item) => !hiddenList.has(item.id));

  listOption.queryFormFields = [...oldList, ...filterList];
  queryFormRef.value?.initDefaultSaveForm();
  selectedKeys.value = item.list.filter((item) => item.id);
};

const globalSortKey = ref("");
const globalSortOrder = ref<"asc" | "desc">("asc");
//  处理子组件传递的排序更新
const handleSortUpdate = (sortInfo: {
  key: string;
  order: string;
  name: string;
}) => {
  globalSortKey.value = sortInfo.key;
  globalSortOrder.value = sortInfo.order;
  queryList();
};

//查询
const query = (item) => {
  queryFormRes.value = item;
  queryList();
};

//数据查询
const tableData = ref([]);
const queryList = async () => {
  let query = { ...queryFormRes.value };
  const { data } = await api.manageApi.receivableDataDetailPageList({
    pageNo: pageInfo.value.pageNum,
    pageSize: pageInfo.value.pageSize,
    routerKey: routerKey.value,
    userId: phone,
    orderType: globalSortKey.value
      ? globalSortKey.value + " " + globalSortOrder.value
      : "",
    ...query,
  });
  tableData.value = data;
};

//分页事件
function getList(item: PageInfo) {
  pageInfo.value.pageNum = item.pageNum;
  pageInfo.value.pageSize = item.pageSize;
  queryList();
}

//导出
const downloadFile = async () => {
  let query = { ...queryFormRes.value };
  const { data, msg } = await api.manageApi.receivableDataDetailToTask({
    pageNo: pageInfo.value.pageNum,
    pageSize: pageInfo.value.pageSize,
    routerKey: routerKey.value,
    userId: phone,
    orderType: globalSortKey.value
      ? globalSortKey.value + " " + globalSortOrder.value
      : "",
    ...query,
  });
  ElMessage({
    message: msg,
    type: "success",
  });
  userStore.count++;
};

onMounted(() => {
  initDefaultList();
});
</script>

<style scoped lang="scss">
.log {
  width: 100%;
  height: calc(100vh - 120px);
  background: #ffffff;
  padding: 24px;
  overflow-y: auto;
  .query-btn {
    margin-left: 20px;
  }
  .btn-box {
    padding-bottom: 15px;
    margin-bottom: 24px;
    border-bottom: 1px solid #eeeeee;
    display: flex;
    justify-content: flex-end;
  }
}
:deep(.caret-wrapper) {
  display: none !important;
}
</style>