zsjz-ai/ai-frontend/packages/call/views/continuous/index.vue

<template>
  <div :class="prefixCls" class="continuous-page">
    <div class="page-header">
      <div class="page-title">持续联系</div>
      <div class="page-subtitle">识别与被调查对象持续保持联系的人员，并支持下钻查看通信明细。</div>
    </div>

    <div class="filter-bar">
      <div class="filter-item">
        <span class="filter-label">选择对象:</span>
        <Select
          v-model:value="filters.target"
          mode="multiple"
          allow-clear
          max-tag-count="responsive"
          class="filter-input"
          :options="targetOptions"
          placeholder="全部"
        />
      </div>
      <div class="filter-item">
        <span class="filter-label">持续联系月数:</span>
        <Input v-model:value="filters.monthValue" class="filter-input" :status="monthValueStatus" />
      </div>
      <div class="filter-item">
        <span class="filter-label">联系日期:</span>
        <RangePicker
          v-model:value="filters.dateRange"
          class="filter-input filter-date"
          :format="DATE_FORMAT"
          :value-format="DATE_FORMAT"
          :placeholder="['开始日期', '结束日期']"
        />
      </div>
      <div class="filter-item">
        <span class="filter-label">对方姓名:</span>
        <Input v-model:value="filters.otherName" class="filter-input" placeholder="请输入对方姓名" />
      </div>
      <div class="filter-item">
        <span class="filter-label">对方号码:</span>
        <Input v-model:value="filters.otherPhone" class="filter-input" placeholder="请输入对方号码" />
      </div>
      <div class="filter-actions">
        <Button type="primary" :loading="queryLoading" @click="handleSearch">查询</Button>
        <Button @click="handleReset">重置</Button>
      </div>
    </div>

    <div class="content-panel">
      <div class="table-card">
        <div class="panel-header">
          <div class="panel-title-wrap">
            <div class="panel-title">持续联系对象汇总</div>
            <div class="panel-desc">找出与被调查对象持续保持联系的人员。</div>
          </div>
        </div>

        <div v-if="!hasSearched" class="query-state-panel">
          <EmptyState
            variant="query"
            title="请点击查询"
            description="设置条件精细查询，也可点击查询展示所有信息"
            min-height="100%"
            description-width="min(100%, 420px)"
          />
        </div>

        <div v-else class="table-panel">
          <div class="table-wrapper">
            <BasicTable
              :columns="columns"
              :data-source="tableData"
              :loading="false"
              :pagination="false"
              :show-table-setting="false"
              :table-setting="{ setting: true, size: true, redo: false, fullScreen: false }"
              :can-resize="true"
              :is-can-resize-parent="true"
              :resize-height-offset="32"
              row-key="id"
            />
          </div>
        </div>

        <div v-if="hasSearched" class="pagination-bar">
          <AnalysisPagination
            :total="total"
            :current="pagination.page"
            :page-size="pagination.limit"
            :page-size-options="pageSizeOptions"
            :loading="queryLoading"
            @change="handlePaginationChange"
          />
        </div>
      </div>
    </div>

    <CallRecordModal v-model:open="callRecordModalOpen" title="通信记录" :base-query="callRecordBaseQuery" />
  </div>
</template>

<script lang="ts" setup name="ViewsContinuousIndex">
  import { computed, onMounted, reactive, ref, watch } from 'vue';
  import { useRoute } from 'vue-router';
  import { Select, Input, DatePicker, Button } from 'ant-design-vue';
  import AnalysisPagination from '@jeesite/core/components/AnalysisPagination/src/AnalysisPagination.vue';
  import { EmptyState } from '@jeesite/core/components/EmptyState';
  import { BasicTable } from '@jeesite/core/components/Table';
  import CallRecordModal from '@jeesite/call/views/components/CallRecordModal.vue';
  import { useAnalysisRefreshPrompt } from '@jeesite/core/hooks/web/useAnalysisRefreshPrompt';
  import { useDesign } from '@jeesite/core/hooks/web/useDesign';
  import { useTableSkill, buildTableActionColumn } from '@jeesite/core/hooks/web/useTableSkill';
  import componentSetting from '@jeesite/core/settings/componentSetting';
  import { useMessage } from '@jeesite/core/hooks/web/useMessage';
  import { statFirstCallContinuous } from '@jeesite/call/api/callApi';
  import { getPersonOptions } from '@jeesite/person/api/personApi';
  import type { CallContinuousDTO } from '@jeesite/call/api/types/dto';
  import type { CallContinuousQuery, CallRecordQuery } from '@jeesite/call/api/types/query';

  const { prefixCls } = useDesign('continuous');
  const { createMessage } = useMessage();
  const { queryLoading, runWithQueryLoading } = useTableSkill();
  const route = useRoute();
  const RangePicker = DatePicker.RangePicker;
  const DATE_FORMAT = 'YYYY-MM-DD';
  const DEFAULT_MONTH_VALUE = '2';
  const PAGE_PATH = '/continuous/index';
  const DEFAULT_SORT_KEY = 'pairContMonthCount';
  const DEFAULT_SORT_ORDER = 'DESC' as const;
  type RangeValue = [string, string] | undefined;

  const createDefaultFilters = () => ({
    target: [] as string[],
    monthValue: DEFAULT_MONTH_VALUE,
    dateRange: undefined as RangeValue,
    otherName: '',
    otherPhone: '',
  });

  const filters = ref(createDefaultFilters());

  const targetOptions = ref<Array<{ label: string; value: string }>>([]);
  const monthValuePattern = /^[1-9]\d*$/;

  const callRecordModalOpen = ref(false);
  const callRecordBaseQuery = reactive<Partial<CallRecordQuery>>({});

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

  const resolveFilterMonthVal = () => {
    if (!monthValuePattern.test(normalizedMonthValue.value)) return undefined;
    const monthVal = Number(normalizedMonthValue.value);
    return Number.isFinite(monthVal) ? monthVal : undefined;
  };

  const validateMonthValue = () => {
    if (resolveFilterMonthVal() !== undefined) return true;
    createMessage.warning('持续联系月数必须是大于 0 的整数');
    return false;
  };

  const normalizeDetailDate = (value?: string) => {
    const raw = String(value || '').trim();
    if (!raw) return undefined;
    const matchedDate = raw.match(/\d{4}-\d{2}-\d{2}/)?.[0];
    if (matchedDate) return matchedDate;
    const matchedMonth = raw.match(/\d{4}-\d{2}/)?.[0];
    return matchedMonth ? `${matchedMonth}-01` : undefined;
  };

  const openDetailModal = (record: any) => {
    const raw = record?.raw || {};
    callRecordBaseQuery.personName = raw.personName || undefined;
    callRecordBaseQuery.otherName = raw.otherName || undefined;
    callRecordBaseQuery.otherPhones = raw.otherPhone ? [raw.otherPhone] : undefined;
    callRecordBaseQuery.startDate = normalizeDetailDate(raw.continuousStartMonth);
    callRecordBaseQuery.endDate = normalizeDetailDate(raw.continuousEndMonth);

    callRecordModalOpen.value = true;
  };

  const columns = [
    { title: '本方姓名', dataIndex: 'selfName', key: 'selfName', width: 140 },
    { title: '对方姓名', dataIndex: 'otherName', key: 'otherName', width: 140 },
    { title: '对方号码', dataIndex: 'otherNumber', key: 'otherNumber', width: 220 },
    { title: '共持续联系次数', dataIndex: 'count', key: 'count', width: 160 },
    {
      title: '持续联系月数',
      dataIndex: 'duration',
      key: 'duration',
      width: 140,
    },
    buildTableActionColumn(openDetailModal, { buttonText: '查看详情', width: 120 }),
  ];

  const tableData = ref<any[]>([]);
  const total = ref(0);
  const jumpPage = ref('1');
  const hasSearched = ref(false);
  const { syncAnalysisDataRefreshState } = useAnalysisRefreshPrompt({
    refresh: () => fetchFirstLevelTable(),
    hasData: () => hasSearched.value && tableData.value.length > 0,
  });
  const pagination = ref({
    page: 1,
    limit: componentSetting.table.defaultPageSize,
  });

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

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

  const normalizedMonthValue = computed(() => String(filters.value.monthValue ?? '').trim());

  const monthValueStatus = computed<'error' | undefined>(() => {
    return monthValuePattern.test(normalizedMonthValue.value) ? undefined : 'error';
  });

  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 t = resp?.total ?? resp?.data?.total ?? resp?.count ?? resp?.data?.count ?? resp?.data?.records?.length;
    return Number.isFinite(Number(t)) ? Number(t) : listLen;
  };

  const mapRow = (item: CallContinuousDTO, index: number) => ({
    id: (pagination.value.page - 1) * pagination.value.limit + index + 1,
    selfName: item.personName || '-',
    otherName: item.otherName || '-',
    otherNumber: item.otherPhone || '-',
    count: String(item.pairTotalCalls ?? (item as any).pairTotalCall ?? (item as any).totalCalls ?? 0),
    duration: `${item.pairContMonthCount ?? (item as any).contMonthCount ?? 0}个月`,
    durationValue: Number(item.pairContMonthCount ?? (item as any).contMonthCount ?? 0) || 0,
    raw: item,
  });

  const sortByDurationDesc = (list: CallContinuousDTO[]) =>
    [...list].sort((left, right) => {
      const leftValue = Number(left.pairContMonthCount ?? (left as any).contMonthCount ?? 0) || 0;
      const rightValue = Number(right.pairContMonthCount ?? (right as any).contMonthCount ?? 0) || 0;
      if (rightValue !== leftValue) return rightValue - leftValue;

      const leftCount =
        Number(left.pairTotalCalls ?? (left as any).pairTotalCall ?? (left as any).totalCalls ?? 0) || 0;
      const rightCount =
        Number(right.pairTotalCalls ?? (right as any).pairTotalCall ?? (right as any).totalCalls ?? 0) || 0;
      return rightCount - leftCount;
    });

  const buildQuery = (): CallContinuousQuery | null => {
    const monthVal = resolveFilterMonthVal();
    if (monthVal === undefined) return null;

    const range = filters.value.dateRange as RangeValue;
    const personNames = normalizeSelectedTargets(filters.value.target);
    const otherName = String(filters.value.otherName || '').trim();
    const otherPhone = String(filters.value.otherPhone || '').trim();

    return {
      page: pagination.value.page,
      limit: pagination.value.limit,
      monthVal,
      startDate: range?.[0] || undefined,
      endDate: range?.[1] || undefined,
      personNames: personNames.length ? personNames : undefined,
      otherName: otherName || undefined,
      otherPhone: otherPhone || undefined,
      orderKey: DEFAULT_SORT_KEY,
      sort: DEFAULT_SORT_ORDER,
    };
  };

  const fetchFirstLevelTable = async () => {
    const query = buildQuery();
    if (!query) {
      validateMonthValue();
      return;
    }

    await runWithQueryLoading(async () => {
      const resp = await statFirstCallContinuous(query);
      const list = sortByDurationDesc(normalizeList(resp));
      tableData.value = list.map(mapRow);
      total.value = normalizeTotal(resp, list.length);
      hasSearched.value = true;
      syncAnalysisDataRefreshState(list.length > 0);

      const current = Number((resp as any)?.data?.current || pagination.value.page);
      const size = Number((resp as any)?.data?.size || pagination.value.limit);
      if (Number.isFinite(current) && current > 0) pagination.value.page = current;
      if (Number.isFinite(size) && size > 0) pagination.value.limit = size;

      jumpPage.value = String(pagination.value.page);
    });
  };

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

  const handleReset = async () => {
    filters.value = createDefaultFilters();
    pagination.value.page = 1;
    await fetchFirstLevelTable();
  };

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

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

  const handlePaginationChange = async (page: number, pageSize: number) => {
    if (queryLoading.value) return;
    if (pageSize !== pagination.value.limit) {
      pagination.value.limit = pageSize;
      await handlePageSizeChange();
      return;
    }
    if (page === pagination.value.page - 1) {
      await handlePrevPage();
      return;
    }
    if (page === pagination.value.page + 1) {
      await handleNextPage();
      return;
    }
    if (page === pagination.value.page) return;
    jumpPage.value = String(page);
    await handleJumpPage();
  };

  const handlePageSizeChange = async () => {
    pagination.value.page = 1;
    await fetchFirstLevelTable();
  };

  const handleJumpPage = async () => {
    const next = Number(jumpPage.value);
    if (!Number.isInteger(next) || next < 1) {
      createMessage.warning('请输入正确页码');
      jumpPage.value = String(pagination.value.page);
      return;
    }
    pagination.value.page = Math.min(next, totalPages.value);
    await fetchFirstLevelTable();
  };

  const fetchTargetOptions = async () => {
    try {
      targetOptions.value = await getPersonOptions(false);
    } catch (error) {
      targetOptions.value = [];
    }
  };

  const applyRouteQuery = (targetOptions: Array<{ label: string; value: string }>) => {
    filters.value = createDefaultFilters();

    const personNames = normalizeSelectedTargets(
      (route.query.personNames as string | string[] | null | undefined) ??
        (route.query.personName as string | string[] | null | undefined),
    );
    const otherName = String(route.query.otherName || '').trim();
    const otherPhone = String(route.query.otherPhone || '').trim();
    const routeMonthValue = String(route.query.monthValue ?? route.query.monthVal ?? '').trim();
    const hasRouteMonthValue = monthValuePattern.test(routeMonthValue);

    filters.value.target = personNames.map((personName) => {
      const matched = targetOptions.find((item) => String(item.label).trim() === personName);
      return matched ? matched.value : personName;
    });

    if (hasRouteMonthValue) {
      filters.value.monthValue = routeMonthValue;
    }
    if (otherName) {
      filters.value.otherName = otherName;
    }
    if (otherPhone) {
      filters.value.otherPhone = otherPhone;
    }

    return !!(filters.value.target.length || otherName || otherPhone || hasRouteMonthValue);
  };

  const syncFromRoute = async () => {
    if (route.path !== PAGE_PATH) return;
    if (applyRouteQuery(targetOptions.value)) {
      pagination.value.page = 1;
      await fetchFirstLevelTable();
    }
  };

  onMounted(async () => {
    await fetchTargetOptions();
    await syncFromRoute();
  });

  watch(
    () => route.fullPath,
    async (next, prev) => {
      if (next === prev) return;
      await syncFromRoute();
    },
  );
</script>

<style lang="less">
  @prefix-cls: ~'jeesite-continuous';

  @import '../../../trans/views/styles/trans-analysis-table-ui.less';

  .@{prefix-cls}.continuous-page {
    .trans-analysis-table-ui();

    background: #fff;
    padding: 0 8px 2px;
    min-height: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    width: calc(100% + 24px);
    margin: 0 -12px;
    padding-left: 0;
    padding-right: 0;

    .filter-input {
      width: 160px;
    }

    .filter-date {
      width: 360px;
    }

    .filter-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px;
      min-height: 40px;
      border: 0;
      background: transparent;
      flex-wrap: wrap;
      flex-shrink: 0;
      box-sizing: border-box;
    }

    .filter-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .filter-label {
      color: #6b7280;
      font-size: 12px;
      white-space: nowrap;
    }

    .filter-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
    }

    .filter-input,
    .filter-date,
    .filter-actions :deep(.ant-btn) {
      align-self: center;
    }

    .panel-title-wrap {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    .panel-title {
      font-size: 14px;
      font-weight: 600;
      color: #111827;
      line-height: 22px;
    }

    .panel-desc {
      color: #6b7280;
      font-size: 12px;
      line-height: 20px;
    }

    .content-panel {
      display: flex;
      flex: 1 1 auto;
      min-height: 0;
      padding: 2px;
      background: #edf2f7;
      box-sizing: border-box;
      overflow: hidden;
    }

    .table-card {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 8px;
      border: 0;
      border-radius: 12px;
      background: #fff;
      box-shadow: inset 0 0 0 1px #e2e8f0;
      box-sizing: border-box;
    }

    .panel-header {
      flex: 0 0 auto;
      padding: 0 0 8px;
      width: 100%;
      box-sizing: border-box;
      border-bottom: 1px solid #f1f5f9;
    }

    .table-panel {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 0;
    }

    .query-state-panel {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px 0 0;
    }

    .table-wrapper {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .table-wrapper .jeesite-basic-table {
      height: 100%;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .table-wrapper > .ant-table-wrapper,
    .table-wrapper .ant-spin-nested-loading,
    .table-wrapper .ant-spin-container,
    .table-wrapper .ant-table,
    .table-wrapper .ant-table-container {
      flex: 1 1 auto;
      min-height: 0;
      height: 100%;
    }

    .table-wrapper .ant-spin-container,
    .table-wrapper .ant-table,
    .table-wrapper .ant-table-container {
      display: flex;
      flex-direction: column;
    }

    .table-wrapper .ant-table-body {
      max-height: 100% !important;
    }

    .pagination-bar {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex: 0 0 auto;
      flex-wrap: wrap;
      padding: 8px 0 0;
      width: 100%;
      box-sizing: border-box;
      border-top: 1px solid #f1f5f9;
    }

    .pagination-total {
      margin-right: 0;
      color: #4b5563;
    }

    .pagination-size {
      :deep(.ant-select) {
        width: 88px;
      }
    }

    .pagination-input {
      width: 56px;
    }

    @media screen and (max-width: 992px) {
      .filter-actions {
        width: 100%;
        margin-left: 0;
      }

      .filter-input,
      .filter-date {
        width: 100%;
      }
    }
  }
</style>