zsjz-ai/ai-frontend/packages/trans/views/components/ExpressInfoDetailModal.vue

<template>
  <QueryTableModal
    :open="open"
    :title="title"
    :width="width"
    :loading="loading"
    :filters="filters"
    :filter-schema="filterSchema"
    :columns="columns"
    :data-source="tableData"
    :pagination="pagination"
    :total-pages="totalPages"
    :page-size-options="pageSizeOptions"
    :show-table-setting="false"
    :table-setting="{ size: true, setting: true, redo: false, fullScreen: false }"
    :can-fullscreen="true"
    wrap-class-name="express-info-detail-modal"
    @update:open="(value) => emit('update:open', value)"
    @search="handleSearch"
    @reset="handleReset"
    @prev-page="handlePrevPage"
    @next-page="handleNextPage"
    @page-size-change="handlePageSizeChange"
    @page-change="handlePageChange"
    @sort-change="handleSortChange"
  />
</template>

<script lang="ts" setup>
  import { computed, nextTick, reactive, ref, watch } from 'vue';
  import QueryTableModal from '@jeesite/case/views/dm/components/QueryTableModal.vue';
  import componentSetting from '@jeesite/core/settings/componentSetting';
  import { statSecondExpressInfo } from '@jeesite/track/api/trackApi';
  import type { ExpressInfo } from '@jeesite/track/api/types/dto';
  import type { ExpressInfoQuery } from '@jeesite/track/api/types/query';

  const props = withDefaults(
    defineProps<{
      open: boolean;
      title?: string;
      width?: number;
      baseQuery?: Partial<ExpressInfoQuery>;
    }>(),
    {
      title: '快递收发详情',
      width: 1380,
      baseQuery: () => ({}),
    },
  );

  const emit = defineEmits<{
    (e: 'update:open', value: boolean): void;
  }>();

  const loading = ref(false);
  const tableData = ref<any[]>([]);

  const filters = reactive({
    location: '',
    recipientName: '',
    senderName: '',
    departurePlace: '',
    destinationPlace: '',
    startDate: '',
    endDate: '',
    orderKey: '',
    sort: '' as '' | 'ASC' | 'DESC',
  });

  const pagination = reactive({
    page: 1,
    limit: componentSetting.table.defaultPageSize,
    total: 0,
  });

  const totalPages = computed(() => {
    if (!pagination.total) return 1;
    return Math.max(1, Math.ceil(pagination.total / pagination.limit));
  });

  const pageSizeOptions = componentSetting.table.pageSizeOptions.map((value) => ({
    label: value,
    value: Number(value),
  }));

  const filterSchema = [
    { field: 'location', label: '地点', type: 'input', placeholder: '请输入地点', width: 220 },
    { field: 'recipientName', label: '收件人', type: 'input', placeholder: '请输入收件人', width: 180 },
    { field: 'senderName', label: '寄件人', type: 'input', placeholder: '请输入寄件人', width: 180 },
    { field: 'departurePlace', label: '始发地', type: 'input', placeholder: '请输入始发地', width: 180 },
    { field: 'destinationPlace', label: '目的地', type: 'input', placeholder: '请输入目的地', width: 180 },
    { field: 'startDate', label: '开始日期', type: 'date', width: 170 },
    { field: 'endDate', label: '结束日期', type: 'date', width: 170 },
  ] as const;

  const columns = [
    { title: '寄件时间', dataIndex: 'sendDate', key: 'sendDate', width: 180, align: 'center', sorter: true },
    { title: '运单号', dataIndex: 'waybillNumber', key: 'waybillNumber', width: 180, align: 'center' },
    { title: '收件人', dataIndex: 'recipientName', key: 'recipientName', width: 120, align: 'center' },
    { title: '收件人电话', dataIndex: 'recipientPhone', key: 'recipientPhone', width: 150, align: 'center' },
    {
      title: '收件地址',
      dataIndex: 'recipientCurrentAddress',
      key: 'recipientCurrentAddress',
      width: 260,
      align: 'center',
    },
    { title: '寄件人', dataIndex: 'senderName', key: 'senderName', width: 120, align: 'center' },
    { title: '寄件人电话', dataIndex: 'senderPhone', key: 'senderPhone', width: 150, align: 'center' },
    { title: '寄件地址', dataIndex: 'senderCurrentAddress', key: 'senderCurrentAddress', width: 260, align: 'center' },
    { title: '始发地', dataIndex: 'departurePlace', key: 'departurePlace', width: 180, align: 'center' },
    { title: '目的地', dataIndex: 'destinationPlace', key: 'destinationPlace', width: 180, align: 'center' },
    { title: '收件单位', dataIndex: 'recipientCompany', key: 'recipientCompany', width: 180, align: 'center' },
    { title: '快递公司编码', dataIndex: 'expressCompanyCode', key: 'expressCompanyCode', width: 160, align: 'center' },
    { title: '物品名称', dataIndex: 'goodsName', key: 'goodsName', width: 180, align: 'center' },
  ];

  const normalizeList = (resp: any): ExpressInfo[] => {
    if (Array.isArray(resp)) return resp;
    if (Array.isArray(resp?.list)) return resp.list;
    if (Array.isArray(resp?.data)) return resp.data;
    if (Array.isArray(resp?.data?.list)) return resp.data.list;
    if (Array.isArray(resp?.records)) return resp.records;
    if (Array.isArray(resp?.data?.records)) return resp.data.records;
    return [];
  };

  const normalizeTotal = (resp: any, listLen: number) => {
    const total = resp?.total ?? resp?.data?.total ?? resp?.count ?? resp?.data?.count ?? listLen;
    return Number.isFinite(Number(total)) ? Number(total) : listLen;
  };

  const normalizeCurrent = (resp: any, fallback: number) => {
    const current = resp?.current ?? resp?.data?.current ?? fallback;
    return Number.isFinite(Number(current)) && Number(current) > 0 ? Number(current) : fallback;
  };

  const normalizeSize = (resp: any, fallback: number) => {
    const size = resp?.size ?? resp?.data?.size ?? fallback;
    return Number.isFinite(Number(size)) && Number(size) > 0 ? Number(size) : fallback;
  };

  const fallbackValue = (value: string | number | null | undefined) => {
    if (value === 0) return '0';
    if (value === null || value === undefined || value === '') return '-';
    return String(value);
  };

  const buildQuery = (): ExpressInfoQuery => ({
    ...props.baseQuery,
    page: pagination.page,
    limit: pagination.limit,
    location: filters.location || undefined,
    recipientName: filters.recipientName || undefined,
    senderName: filters.senderName || undefined,
    departurePlace: filters.departurePlace || undefined,
    destinationPlace: filters.destinationPlace || undefined,
    startDate: filters.startDate || undefined,
    endDate: filters.endDate || undefined,
    orderKey: filters.orderKey || undefined,
    sort: filters.sort || undefined,
  });

  const mapRow = (item: ExpressInfo, index: number) => ({
    rowKey:
      item.id ||
      item.waybillNumber ||
      `${pagination.page}-${index}-${item.recipientName || ''}-${item.senderName || ''}-${item.sendDate || ''}`,
    sendDate: fallbackValue(item.sendDate),
    waybillNumber: fallbackValue(item.waybillNumber),
    recipientName: fallbackValue(item.recipientName),
    recipientPhone: fallbackValue(item.recipientPhone),
    recipientCurrentAddress: fallbackValue(item.recipientCurrentAddress),
    senderName: fallbackValue(item.senderName),
    senderPhone: fallbackValue(item.senderPhone),
    senderCurrentAddress: fallbackValue(item.senderCurrentAddress),
    departurePlace: fallbackValue(item.departurePlace),
    destinationPlace: fallbackValue(item.destinationPlace),
    recipientCompany: fallbackValue(item.recipientCompany),
    expressCompanyCode: fallbackValue(item.expressCompanyCode),
    goodsName: fallbackValue(item.goodsName),
    raw: item,
  });

  const syncFiltersFromBaseQuery = () => {
    filters.location = props.baseQuery?.location || '';
    filters.recipientName = props.baseQuery?.recipientName || '';
    filters.senderName = props.baseQuery?.senderName || '';
    filters.departurePlace = props.baseQuery?.departurePlace || '';
    filters.destinationPlace = props.baseQuery?.destinationPlace || '';
    filters.startDate = props.baseQuery?.startDate || '';
    filters.endDate = props.baseQuery?.endDate || '';
    filters.orderKey = '';
    filters.sort = '';
  };

  const fetchTable = async () => {
    loading.value = true;
    try {
      const resp = await statSecondExpressInfo(buildQuery());
      const list = normalizeList(resp);
      tableData.value = list.map(mapRow);
      pagination.total = normalizeTotal(resp, list.length);
      pagination.page = normalizeCurrent(resp, pagination.page);
      pagination.limit = normalizeSize(resp, pagination.limit);
    } catch (error) {
      tableData.value = [];
      pagination.total = 0;
    } finally {
      loading.value = false;
    }
  };

  const handleSearch = async () => {
    pagination.page = 1;
    await fetchTable();
  };

  const handleReset = async () => {
    syncFiltersFromBaseQuery();
    pagination.page = 1;
    await fetchTable();
  };

  const handlePrevPage = async () => {
    if (loading.value || pagination.page <= 1) return;
    pagination.page -= 1;
    await fetchTable();
  };

  const handleNextPage = async () => {
    if (loading.value || pagination.page >= totalPages.value) return;
    pagination.page += 1;
    await fetchTable();
  };

  const handlePageChange = async (page: number, pageSize: number) => {
    if (loading.value) return;
    if (pageSize !== pagination.limit) {
      await handlePageSizeChange(pageSize);
      return;
    }
    if (page === pagination.page - 1) {
      await handlePrevPage();
      return;
    }
    if (page === pagination.page + 1) {
      await handleNextPage();
      return;
    }
    if (page === pagination.page) return;
    pagination.page = page;
    await fetchTable();
  };

  const handlePageSizeChange = async (size: number) => {
    pagination.limit = Number(size);
    pagination.page = 1;
    await fetchTable();
  };

  const handleSortChange = async (payload: { orderKey: string; sort: 'ASC' | 'DESC' }) => {
    filters.orderKey = payload.orderKey;
    filters.sort = payload.sort;
    pagination.page = 1;
    await fetchTable();
  };

  const initAndFetch = async () => {
    pagination.page = 1;
    syncFiltersFromBaseQuery();
    await fetchTable();
  };

  let initFetchScheduled = false;
  const scheduleInitAndFetch = () => {
    if (!props.open || initFetchScheduled) return;
    initFetchScheduled = true;
    nextTick(async () => {
      initFetchScheduled = false;
      if (!props.open) return;
      await initAndFetch();
    });
  };

  watch(
    () => props.open,
    (open) => {
      if (!open) {
        initFetchScheduled = false;
        return;
      }
      scheduleInitAndFetch();
    },
  );

  watch(
    () => props.baseQuery,
    () => {
      if (!props.open) return;
      scheduleInitAndFetch();
    },
    { deep: true },
  );

  defineExpose({
    reload: fetchTable,
  });
</script>

<style lang="less">
  .express-info-detail-modal {
    .query-table-search {
      row-gap: 12px;
    }
  }
</style>