zsjz-ai/ai-frontend/packages/call/views/components/ContinuousDetailModal.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="continuous-detail-modal"
    @update:open="(v) => emit('update:open', v)"
    @search="handleSearch"
    @reset="handleReset"
    @prev-page="handlePrevPage"
    @next-page="handleNextPage"
    @page-size-change="handlePageSizeChange"
    @page-change="handlePageChange"
    @sort-change="handleSortChange"
  />

  <CallRecordModal
    v-model:open="callRecordModalOpen"
    title="通信记录"
    :base-query="callRecordBaseQuery"
    @jump="emit('update:open', false)"
  />
</template>

<script lang="ts" setup>
  import { computed, h, nextTick, reactive, ref, watch } from 'vue';
  import { Button } from 'ant-design-vue';
  import QueryTableModal from '@jeesite/case/views/dm/components/QueryTableModal.vue';
  import componentSetting from '@jeesite/core/settings/componentSetting';
  import { mergeDetailDateRange, pickDetailValue } from '@jeesite/core/utils/detailQuery';
  import { statSecondCallContinuous } from '@jeesite/call/api/callApi';
  import type { CallContinuousDTO } from '@jeesite/call/api/types/dto';
  import type { CallContinuousQuery, CallRecordQuery } from '@jeesite/call/api/types/query';
  import CallRecordModal from './CallRecordModal.vue';

  const props = withDefaults(
    defineProps<{
      open: boolean;
      title?: string;
      width?: number;
      baseQuery?: Partial<CallContinuousQuery>;
    }>(),
    {
      title: '持续联系明细',
      width: 1320,
      baseQuery: () => ({}),
    },
  );

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

  const loading = ref(false);
  const tableData = ref<any[]>([]);
  const callRecordModalOpen = ref(false);
  const callRecordBaseQuery = reactive<Partial<CallRecordQuery>>({});

  const filters = reactive({
    personName: '',
    otherName: '',
    otherPhone: '',
    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,
  }));

  const filterSchema = [
    { field: 'personName', label: '本方姓名', type: 'input' as const, placeholder: '请输入本方姓名', width: 180 },
    { field: 'otherName', label: '对方姓名', type: 'input' as const, placeholder: '请输入对方姓名', width: 180 },
    { field: 'otherPhone', label: '对方号码', type: 'input' as const, placeholder: '请输入对方号码', width: 180 },
  ];

  const normalizePhoneList = (value?: string | string[] | null) => {
    if (Array.isArray(value)) return value.filter(Boolean);
    if (!value) return undefined;
    const list = String(value)
      .split(',')
      .map((item) => item.trim())
      .filter(Boolean);
    return list.length ? list : undefined;
  };

  const normalizeMonthDate = (monthLike?: string, isEnd = false) => {
    if (!monthLike) return undefined;
    const normalized = String(monthLike).slice(0, 7);
    if (!/^\d{4}-\d{2}$/.test(normalized)) return undefined;
    const [year, month] = normalized.split('-').map((item) => Number(item));
    if (!year || !month) return undefined;
    const date = new Date(year, month - 1, isEnd ? 0 : 1);
    if (isEnd) {
      date.setMonth(month, 0);
    }
    const yyyy = date.getFullYear();
    const mm = String(date.getMonth() + 1).padStart(2, '0');
    const dd = String(date.getDate()).padStart(2, '0');
    return `${yyyy}-${mm}-${dd}`;
  };

  const handleViewRecord = (record: any) => {
    const raw = record?.raw || {};
    const { startDate, endDate } = mergeDetailDateRange(
      {
        startDate: pickDetailValue(filters.startDate, props.baseQuery?.startDate),
        endDate: pickDetailValue(filters.endDate, props.baseQuery?.endDate),
      },
      {
        startDate: normalizeMonthDate(raw.continuousStartMonth, false),
        endDate: normalizeMonthDate(raw.continuousEndMonth, true),
      },
    );

    callRecordBaseQuery.personName = pickDetailValue(raw.personName, filters.personName, props.baseQuery?.personName);
    callRecordBaseQuery.personPhones = raw.personPhone ? [raw.personPhone] : undefined;
    callRecordBaseQuery.otherName = pickDetailValue(raw.otherName, filters.otherName, props.baseQuery?.otherName);
    callRecordBaseQuery.otherPhones = raw.otherPhone ? [raw.otherPhone] : undefined;
    callRecordBaseQuery.startDate = startDate;
    callRecordBaseQuery.endDate = endDate;
    callRecordModalOpen.value = true;
  };

  const columns = [
    { title: '本方姓名', dataIndex: 'personName', key: 'personName', width: 140, sorter: true },
    { title: '本方号码', dataIndex: 'personPhone', key: 'personPhone', width: 160, sorter: true },
    { title: '对方姓名', dataIndex: 'otherName', key: 'otherName', width: 140, sorter: true },
    { title: '对方号码', dataIndex: 'otherPhone', key: 'otherPhone', width: 220, sorter: true },
    { title: '持续联系月数', dataIndex: 'pairContMonthCount', key: 'pairContMonthCount', width: 120, sorter: true },
    { title: '共持续联系次数', dataIndex: 'pairTotalCalls', key: 'pairTotalCalls', width: 130, sorter: true },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      width: 120,
      fixed: 'right' as const,
      align: 'center' as const,
      customRender: ({ record }: { record: any }) =>
        h(
          Button,
          {
            type: 'link',
            size: 'small',
            onClick: () => handleViewRecord(record),
          },
          { default: () => '查看详情' },
        ),
    },
  ];

  const normalizeList = (resp: any): CallContinuousDTO[] => {
    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 buildQuery = (): CallContinuousQuery => {
    const personName = filters.personName || props.baseQuery?.personName || '';
    const otherName = filters.otherName || props.baseQuery?.otherName || '';
    return {
      ...props.baseQuery,
      page: pagination.page,
      limit: pagination.limit,
      monthVal: Number(props.baseQuery?.monthVal || 1),
      personName: personName || undefined,
      personNames: personName ? [personName] : props.baseQuery?.personNames,
      otherName: otherName || undefined,
      otherPhone: filters.otherPhone || props.baseQuery?.otherPhone || undefined,
      startDate: filters.startDate || props.baseQuery?.startDate || undefined,
      endDate: filters.endDate || props.baseQuery?.endDate || undefined,
      orderKey: filters.orderKey || undefined,
      sort: filters.sort || undefined,
    };
  };

  const mapRow = (item: CallContinuousDTO, index: number) => ({
    rowKey: `${item.personName || '-'}-${item.otherName || '-'}-${item.continuousStartMonth || index}`,
    id: (pagination.page - 1) * pagination.limit + index + 1,
    personName: item.personName || '-',
    personPhone: item.personPhone || '-',
    otherName: item.otherName || '-',
    otherPhone: item.otherPhone || '-',
    pairContMonthCount: item.pairContMonthCount ?? 0,
    pairTotalCalls: item.pairTotalCalls ?? 0,
    continuousStartMonth: item.continuousStartMonth || '-',
    continuousEndMonth: item.continuousEndMonth || '-',
    raw: item,
  });

  const syncFiltersFromBaseQuery = () => {
    filters.personName = props.baseQuery?.personName || '';
    filters.otherName = props.baseQuery?.otherName || '';
    filters.otherPhone = props.baseQuery?.otherPhone || '';
    filters.startDate = props.baseQuery?.startDate || '';
    filters.endDate = props.baseQuery?.endDate || '';
    filters.orderKey = '';
    filters.sort = '';
  };

  const fetchTable = async () => {
    loading.value = true;
    try {
      const resp = await statSecondCallContinuous(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">
  .continuous-detail-modal {
    .ant-table-cell-fix-right,
    .ant-table-cell-fix-right-first {
      background: #fff;
    }
  }
</style>