tenant-Platform/src/views/consoleManage/financeDataManage/meetData/meetDataDetail.vue

<template>
  <div class="log">
    <PageMain class="vh100">
    <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>

    <!-- 表格 -->
    <ComplexTable :tableData="tableData" :showSelect='false' :columns="listOption.columns" :showIndex="false"
      :columnwidth="120" :pageInfo="pageInfo" @getList="getList" :showOperation='false'>
      <template v-slot:search="scope">
        <Sort :scope="scope.slotData" :globalSortKey="globalSortKey" :globalSortOrder="globalSortOrder"
          @update:sort="handleSortUpdate"></Sort>
      </template>
    </ComplexTable>

    <FilterDialog :show='isShow' @close='isShow=false' @sure='filterSure' ref='filterDialogRef' @selectedKeys='selected'
      routerKey='routerKey'>
    </FilterDialog>
    </PageMain>
  </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: "telemarketingDelId",
  //查询
  queryFormFields: [],
  // 表格列
  columns: [
    {
      prop: "salesmanName",
      label: "业务员",
      width: "180",
    },
    {
      prop: "salesmanPhone",
      label: "手机号",
      width: "180",
    },
    {
      prop: "bankCardNumber",
      label: "银行卡号",
      width: "",
    },
    {
      prop: "bankName",
      label: "银行",
      width: "180",
    },
    {
      prop: "statusName",
      label: "状态",
      width: "180",
    },
    {
      prop: "withdrawalMoney",
      label: "提现金额",
      width: "180",
      align: "right",
      sortable: true,
    },
    {
      prop: "paidPersonName",
      label: "付款人",
      width: "180",
    },
    {
      prop: "paidTime",
      label: "付款时间",
      width: "180",
    },
  ],
});

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

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

//获取默认选择数据
const queryFormRes = ref();
const routerKey = ref("meetDataDetail");
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.meetDataDetailPageList({
    pageNo: pageInfo.value.pageNum,
    pageSize: pageInfo.value.pageSize,
    routerKey: routerKey.value,
    userId: phone,
    orderType: globalSortKey.value
      ? globalSortKey.value + " " + globalSortOrder.value
      : "",
    ...query,
  });
  tableData.value = data.records;
  pageInfo.value.pageNum = data.current;
  pageInfo.value.pageSize = data.size;
  pageInfo.value.total = data.total;
};

//分页事件
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.meetDataDetailToTask({
    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 {
  .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>