zsjz-ai/ai-frontend/packages/trans/views/components/BaseStationDetailModal.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="base-station-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"
  />

  <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 CallRecordModal from '@jeesite/call/views/components/CallRecordModal.vue';
  import type { CallRecordQuery } from '@jeesite/call/api/types/query';
  import QueryTableModal from '@jeesite/case/views/dm/components/QueryTableModal.vue';
  import { useMessage } from '@jeesite/core/hooks/web/useMessage';
  import { mergeDetailDateRange, pickDetailValue } from '@jeesite/core/utils/detailQuery';
  import componentSetting from '@jeesite/core/settings/componentSetting';
  import { statSecondTrackCellTower } from '@jeesite/track/api/trackApi';
  import type { TrackCellTowerDTO } from '@jeesite/track/api/types/dto';
  import type { TrackCellTowerQuery } from '@jeesite/track/api/types/query';

  const props = withDefaults(
    defineProps<{
      open: boolean;
      title?: string;
      width?: number;
      baseQuery?: Partial<TrackCellTowerQuery>;
    }>(),
    {
      title: '基站详情',
      width: 1320,
      baseQuery: () => ({}),
    },
  );

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

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

  const filters = reactive({
    personName: '',
    personStationName: '',
    personRegionId: '',
    personCellId: '',
    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: 'personStationName', label: '基站名称', type: 'input', placeholder: '请输入基站名称', width: 220 },
  ] as const;

  type BaseStationDetailRecord = TrackCellTowerDTO & {
    personPhone?: string;
    otherPhone?: string;
    otherName?: string;
  };

  const normalizeQueryText = (value?: string | number | null) => {
    const text = String(value ?? '').trim();
    if (!text || text === '-') return undefined;
    return text;
  };

  const toSingleValueArray = (value?: string | number | null) => {
    const text = normalizeQueryText(value);
    return text ? [text] : undefined;
  };

  const buildCallRecordBaseQuery = (record: BaseStationDetailRecord): Partial<CallRecordQuery> => {
    const { startDate, endDate } = mergeDetailDateRange(
      {
        startDate: props.baseQuery?.startDate,
        endDate: props.baseQuery?.endDate,
      },
      {
        startDate: normalizeQueryText(record.startDate),
        endDate: normalizeQueryText(record.endDate),
      },
    );

    return {
      personName: pickDetailValue(normalizeQueryText(record.personName), props.baseQuery?.personName),
      personPhones: toSingleValueArray(record.personPhone),
      otherName: normalizeQueryText(record.otherName),
      otherPhones: toSingleValueArray(record.otherPhone),
      personRegionId: pickDetailValue(normalizeQueryText(record.personRegionId), props.baseQuery?.personRegionId),
      personCellId: pickDetailValue(normalizeQueryText(record.personCellId), props.baseQuery?.personCellId),
      startDate,
      endDate,
    };
  };

  const handleCallCountClick = (record: { raw?: BaseStationDetailRecord; callCount?: string | number }) => {
    const raw = record.raw || {};
    callRecordBaseQuery.value = buildCallRecordBaseQuery(raw);
    callRecordModalOpen.value = true;
  };

  const renderCallCount = (record: { raw?: BaseStationDetailRecord; callCount?: string | number }) => {
    const countText = fallbackValue(record.callCount);
    if (countText === '-') return countText;
    return h(
      'button',
      {
        type: 'button',
        class: 'call-count-trigger',
        onClick: () => handleCallCountClick(record),
      },
      String(countText),
    );
  };

  const columns = [
    { title: '序号', dataIndex: 'id', key: 'id', width: 70, align: 'center' as const },
    { title: '被调查对象', dataIndex: 'personName', key: 'personName', width: 140, align: 'center' as const },
    { title: '手机号', dataIndex: 'personPhone', key: 'personPhone', width: 160, align: 'center' as const },
    {
      title: '基站名称',
      dataIndex: 'personStationName',
      key: 'personStationName',
      width: 260,
      align: 'center' as const,
    },
    {
      title: '通信次数',
      dataIndex: 'callCount',
      key: 'callCount',
      width: 120,
      align: 'center' as const,
      sorter: true,
      customRender: ({ record }: { record: { raw?: BaseStationDetailRecord; callCount?: string | number } }) =>
        renderCallCount(record),
    },
  ];

  const normalizeList = (resp: any): BaseStationDetailRecord[] => {
    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 = (): TrackCellTowerQuery => ({
    ...props.baseQuery,
    page: pagination.page,
    limit: pagination.limit,
    personName: filters.personName || props.baseQuery?.personName,
    personStationName: filters.personStationName || props.baseQuery?.personStationName,
    personRegionId: filters.personRegionId || props.baseQuery?.personRegionId,
    personCellId: filters.personCellId || props.baseQuery?.personCellId,
    startDate: filters.startDate || props.baseQuery?.startDate,
    endDate: filters.endDate || props.baseQuery?.endDate,
    orderKey: filters.orderKey || undefined,
    sort: filters.sort || undefined,
  });

  const mapRow = (item: BaseStationDetailRecord, index: number) => ({
    rowKey:
      [
        item.personName,
        item.personStationName,
        item.personRegionId,
        item.personCellId,
        item.startDate,
        item.endDate,
        index,
      ]
        .filter(Boolean)
        .join('||') || `${pagination.page}-${index}`,
    id: (pagination.page - 1) * pagination.limit + index + 1,
    personName: fallbackValue(item.personName),
    personPhone: fallbackValue(item.personPhone),
    personStationName: fallbackValue(item.personStationName),
    callCount: Number.isFinite(Number(item.callCount)) ? Number(item.callCount) : fallbackValue(item.callCount),
    personRegionId: fallbackValue(item.personRegionId),
    personCellId: fallbackValue(item.personCellId),
    startDate: fallbackValue(item.startDate),
    endDate: fallbackValue(item.endDate),
    raw: item,
  });

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

  const fetchTable = async () => {
    loading.value = true;
    try {
      const resp = await statSecondTrackCellTower(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;
      createMessage.warning('基站详情接口调用失败');
    } 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">
  .base-station-detail-modal {
    .query-table-search {
      row-gap: 12px;
    }

    .call-count-trigger {
      padding: 0;
      border: none;
      background: transparent;
      color: #315efb;
      font-size: 12px;
      font-weight: 600;
      line-height: 20px;
      cursor: pointer;
      transition:
        color 0.2s ease,
        opacity 0.2s ease;

      &:hover {
        color: #1d4ed8;
        text-decoration: underline;
      }
    }
  }
</style>