tenant-Platform/src/views/consoleManage/quotationDataManage/quotationOrderData/index.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>
      <div class='flex content-box'>
        <!-- tree -->
        <div class='content-l'>
          <Tree ref='treeRef' @nodeId='nodeId'></Tree>
        </div>

        <div class='flex-1 content-r'>
          <!-- 表格 -->
          <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>

            <template #customSlot="{ bodyCell: { scope, column } }">
              <template v-if="column.prop == 'quoteOrderNum'">
                {{ scope.row.quoteOrderNum }} 笔
              </template>
              <template v-if="column.prop == 'quoteCountNum'">
                {{ scope.row.quoteCountNum }} 次
              </template>
              <template v-if="column.prop == 'dsyOrderNum'">
                {{ scope.row.dsyOrderNum }} 笔
              </template>
              <template v-if="column.prop == 'dszOrderNum'">
                {{ scope.row.dszOrderNum }} 笔
              </template>
              <template v-if="column.prop == 'jszOrderNum'">
                {{ scope.row.jszOrderNum }} 笔
              </template>
              <template v-if="column.prop == 'jsyOrderNum'">
                {{ scope.row.jsyOrderNum }} 笔
              </template>
            </template>
          </ComplexTable>
        </div>
      </div>

      <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 Tree from "../../components/tree.vue";
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: "quotationId",
  //查询
  queryFormFields: [],
  // 表格列
  columns: [
    {
      prop: "licenseNo",
      label: "车牌号",
      width: "100",
    },
    {
      prop: "engineNo",
      label: "发动机号",
      width: "120",
    },
    {
      prop: "vinNo",
      label: "车架号",
      width: "180",
    },
    {
      prop: "brandName",
      label: "品牌型号",
      width: "180",
    },
    {
      prop: "quoteOrderNum",
      label: "报价订单",
      width: "180",
      align: "right",
      sortable: true,
      component: "customSlot",
    },
    {
      prop: "quoteCountNum",
      label: "报价次数",
      width: "180",
      align: "right",
      sortable: true,
      component: "customSlot",
    },
    {
      prop: "minPremium",
      label: "最低保费",
      width: "180",
      align: "right",
      sortable: true,
    },
    {
      prop: "maxPremium",
      label: "最高保费",
      width: "180",
      align: "right",
      sortable: true,
    },
    {
      prop: "dealCompanyName",
      label: "成交保险公司",
      width: "300",
    },
    {
      prop: "dealPremium",
      label: "成交保费",
      width: "180",
      align: "right",
      sortable: true,
    },
  ],
});

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

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

//获取默认选择数据
const queryFormRes = ref();
const routerKey = ref("quotationOrderData");
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.quotationOrderDataPageList({
    pageNo: pageInfo.value.pageNum,
    pageSize: pageInfo.value.pageSize,
    routerKey: routerKey.value,
    userId: phone,
    orderType: globalSortKey.value
      ? globalSortKey.value + " " + globalSortOrder.value
      : "",
    ...query,
    orgIds: query.orgIds.filter(v => v),
    createTimeBegin: query.recordTime[0] ?? '',
    createTimeEnd: query.recordTime[1] ?? '',
  });
  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.quotationOrderDataToTask({
    pageNo: pageInfo.value.pageNum,
    pageSize: pageInfo.value.pageSize,
    routerKey: routerKey.value,
    userId: phone,
    orderType: globalSortKey.value
      ? globalSortKey.value + " " + globalSortOrder.value
      : "",
    ...query,
    orgIds: query.orgIds.filter(v => v),
    createTimeBegin: query.recordTime[0] ?? '',
    createTimeEnd: query.recordTime[1] ?? '',
  });
  ElMessage({
    message: msg,
    type: "success",
  });
  userStore.count++;
};

//tabClick
const treeRef = ref();
const tabIndex = ref(0);
const tabClick = (item, index) => {
  tabIndex.value = index;
  treeRef.value?.getTree(item.api);
};
const nodeId = (id) => {
  queryFormRes.value.orgIds = [id];
  queryList();
};
onMounted(() => {
  initDefaultList();
  treeRef.value?.getTree(api.manageApi.getUserManageListByUserId);
});
</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;
  }

  .content-box {
    justify-content: space-between;

    .content-l {
      width: 298px;
      display: flex;
      margin: 20px 16px 20px 0;

      .item {
        width: 50%;
        height: 36px;
        line-height: 36px;
        background: #f7f7f7;
        font-size: 16px;
        text-align: center;
        border-radius: 2px;
      }

      .active {
        background: #0083ff;
        color: #fff;
      }
    }

    .content-r {
      width: 0;
    }
  }
}

:deep(.caret-wrapper) {
  display: none !important;
}
</style>