zsjz-ai/ai-electron/frontend/src/trans/views/tradeFrequency/index.vue

<template>
  <div :class="prefixCls" class="trade-frequency-page">
    <div class="page-header">
      <div class="page-title">交易频次</div>
      <div class="page-subtitle">按交易时间段汇总对象与对手方的往来频次，并支持下钻查看交易记录明细。</div>
    </div>

    <div class="filter-bar">
      <div class="qj-filter-head">
        <div class="qj-card-title">查询条件</div>
        <div class="filter-actions">
          <Button type="primary" :loading="queryLoading" @click="handleSearch">查询</Button>
          <Button @click="handleReset">重置</Button>
          <!-- <Button @click="handlePreviewModal">预览弹窗</Button> -->
        </div>
      </div>
      <div class="qj-filter-grid">
        <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>
          <Select v-model:value="filters.countOp" class="filter-op" :options="countOpOptions" />
          <Input v-model:value="filters.countValue" class="filter-mini" :status="countValueStatus" />
        </div>
        <div class="filter-item">
          <span class="filter-label">交易日期:</span>
          <RangePicker v-model:value="filters.dateRange" class="filter-date" />
        </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.otherCardNo" class="filter-input" placeholder="请输入对方卡号" />
        </div>
      </div>
    </div>

    <div class="content-panel">
      <div class="table-card">
        <div class="panel-header">
          <div>
            <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"
              :action-column="actionColumn"
              :data-source="tableData"
              :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"
              @change="handleTableChange"
            >
              <template #action="{ record }">
                <Button type="link" size="small" @click="handleViewDetail(record)">查看详情</Button>
              </template>
            </BasicTable>
          </div>
        </div>

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

    <TransRecordModal v-model:open="transRecordModalOpen" :base-query="transRecordBaseQuery" />
  </div>
</template>
<script lang="ts" setup name="ViewsTradeFrequencyIndex">
  import { computed, onMounted, ref, watch } from 'vue';
  import { useRoute } from 'vue-router';
  import { Select, Input, Button, DatePicker } from 'ant-design-vue';
  import dayjs, { Dayjs } from 'dayjs';
  import AnalysisPagination from '@/core/components/AnalysisPagination/src/AnalysisPagination.vue';
  import { EmptyState } from '@/core/components/EmptyState';
  import { BasicTable } from '@/core/components/Table';
  import { useAnalysisRefreshPrompt } from '@/core/hooks/web/useAnalysisRefreshPrompt';
  import { useDesign } from '@/core/hooks/web/useDesign';
  import { useTableSkill } from '@/core/hooks/web/useTableSkill';
  import { useMessage } from '@/core/hooks/web/useMessage';
  import {
    COMPARE_OPERATOR_OPTIONS,
    DEFAULT_COMPARE_OPERATOR,
    normalizeCompareOperator,
  } from '@/core/utils/compareOperator';
  import { mergeDetailDateRange, pickDetailValue } from '@/core/utils/detailQuery';
  import componentSetting from '@/core/settings/componentSetting';
  import { statFirstTransFrequency } from '@/trans/api/transApi';
  import TransRecordModal from '../components/TransRecordModal.vue';
  import { getPersonOptions } from '@/person/api/personApi';
  import type { TransFrequencyDTO } from '@/trans/api/types/dto';
  import type { TransFrequencyQuery, TransRecordQuery } from '@/trans/api/types/query';

  const RangePicker = DatePicker.RangePicker;
  const { prefixCls } = useDesign('trade-frequency');
  const { queryLoading, runWithQueryLoading } = useTableSkill();
  const { createMessage } = useMessage();
  const route = useRoute();
  const PAGE_PATH = '/tradeFrequency/index';
  type RangeValue = [Dayjs, Dayjs] | null;

  const createDefaultFilters = () => ({
    target: [] as string[],
    countOp: DEFAULT_COMPARE_OPERATOR,
    countValue: '',
    dateRange: null as RangeValue,
    otherName: '',
    otherCardNo: '',
    orderKey: 'transCount',
    sort: 'DESC' as '' | 'ASC' | 'DESC',
  });

  const filters = ref(createDefaultFilters());

  const pagination = ref({
    current: 1,
    pageSize: componentSetting.table.defaultPageSize,
    total: 0,
  });
  const jumpPage = ref('1');
  const tableData = ref<any[]>([]);
  const hasSearched = ref(false);
  const { syncAnalysisDataRefreshState } = useAnalysisRefreshPrompt({
    refresh: () => fetchTable(),
    hasData: () => hasSearched.value && tableData.value.length > 0,
  });
  const transRecordModalOpen = ref(false);
  const transRecordBaseQuery = ref<Record<string, any>>({});
  const lastExecutedQuery = ref<Partial<TransFrequencyQuery>>({});

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

  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 countOpOptions = COMPARE_OPERATOR_OPTIONS.filter((o) => o.value === 'GE' || o.value === 'LE');

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

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

  const normalizedCountValue = computed(() => String(filters.value.countValue ?? '').trim());

  const countValueStatus = computed<'error' | undefined>(() => {
    if (!normalizedCountValue.value) return undefined;
    return countValuePattern.test(normalizedCountValue.value) ? undefined : 'error';
  });

  const columns = [
    { title: '交易时间段', dataIndex: 'timeRange', key: 'timeRange', width: 220, align: 'center' },
    { title: '本方姓名', dataIndex: 'selfName', key: 'selfName', width: 120, align: 'center' },
    { title: '对方姓名', dataIndex: 'otherName', key: 'otherName', width: 180, align: 'center' },
    { title: '对方卡号', dataIndex: 'otherCard', key: 'otherCard', width: 200, align: 'center' },
    {
      title: '交易次数',
      dataIndex: 'transCount',
      key: 'transCount',
      width: 120,
      align: 'center',
      sorter: true,
      defaultSortOrder: 'descend',
    },
    {
      title: '交易金额',
      dataIndex: 'transTotalAmount',
      key: 'transTotalAmount',
      width: 140,
      align: 'center',
      sorter: true,
    },
  ];

  const actionColumn = {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 120,
    align: 'center',
    fixed: 'right' as const,
    slot: 'action',
  };

  const normalizeList = (resp: any): TransFrequencyDTO[] => {
    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 ?? listLen;
    return Number.isFinite(Number(t)) ? Number(t) : listLen;
  };

  const mapRow = (item: TransFrequencyDTO, index: number) => ({
    id: (pagination.value.current - 1) * pagination.value.pageSize + index + 1,
    timeRange: `${item.startTransDate || '-'} 至 ${item.endTransDate || '-'}`,
    selfName: item.personName || '-',
    otherName: item.otherName || '-',
    otherCard: item.otherCardNo || '-',
    transCount: item.transCount ?? 0,
    transTotalAmount: item.transTotalAmount ?? 0,
    raw: item,
  });

  const resolveFilterTransCount = (showMessage = false) => {
    if (!normalizedCountValue.value) return undefined;
    if (countValuePattern.test(normalizedCountValue.value)) {
      return Number(normalizedCountValue.value);
    }

    if (showMessage) {
      createMessage.warning('交易次数请输入大于 0 的整数');
    }

    return null;
  };

  const buildQuery = (transCount?: number): TransFrequencyQuery => {
    const range = filters.value.dateRange as [Dayjs, Dayjs] | null;
    const otherName = String(filters.value.otherName || '').trim();
    const otherCardNo = String(filters.value.otherCardNo || '').trim();
    return {
      page: pagination.value.current,
      limit: pagination.value.pageSize,
      startDate: range?.[0] ? dayjs(range[0]).format('YYYY-MM-DD') : undefined,
      endDate: range?.[1] ? dayjs(range[1]).format('YYYY-MM-DD') : undefined,
      personNames: (() => {
        const personNames = normalizeSelectedTargets(filters.value.target);
        return personNames.length ? personNames : undefined;
      })(),
      transCount,
      transCountSymbol:
        transCount !== undefined
          ? normalizeCompareOperator(filters.value.countOp, DEFAULT_COMPARE_OPERATOR)
          : undefined,
      otherName: otherName || undefined,
      otherCardNo: otherCardNo || undefined,
      orderKey: filters.value.orderKey || 'transCount',
      sort: filters.value.sort || 'DESC',
    };
  };

  const buildTransRecordBaseQuery = (record: any): Partial<TransRecordQuery> => {
    const currentQuery = lastExecutedQuery.value;
    const { startDate, endDate } = mergeDetailDateRange(
      {
        startDate: currentQuery.startDate,
        endDate: currentQuery.endDate,
      },
      {
        startDate: record?.raw?.startTransDate || undefined,
        endDate: record?.raw?.endTransDate || undefined,
      },
    );

    return {
      personName: pickDetailValue(record?.raw?.personName, currentQuery.personNames?.[0]),
      otherName: pickDetailValue(record?.raw?.otherName, currentQuery.otherName),
      otherCardNo: pickDetailValue(record?.raw?.otherCardNo, currentQuery.otherCardNo),
      startDate,
      endDate,
    };
  };

  const fetchTable = async () => {
    const transCount = resolveFilterTransCount(true);
    if (transCount === null) return;

    await runWithQueryLoading(async () => {
      const query = buildQuery(transCount);
      const resp = await statFirstTransFrequency(query);
      const list = normalizeList(resp);
      tableData.value = list.map(mapRow);
      pagination.value.total = normalizeTotal(resp, list.length);
      hasSearched.value = true;
      syncAnalysisDataRefreshState(list.length > 0);
      lastExecutedQuery.value = { ...query };

      const current = Number((resp as any)?.data?.current || pagination.value.current);
      const size = Number((resp as any)?.data?.size || pagination.value.pageSize);
      if (Number.isFinite(current) && current > 0) pagination.value.current = current;
      if (Number.isFinite(size) && size > 0) pagination.value.pageSize = size;
      jumpPage.value = String(pagination.value.current);
    });
  };

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

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

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

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

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

  const handlePageSizeChange = async () => {
    pagination.value.current = 1;
    await fetchTable();
  };

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

  const resolveSorterValue = (sorter: any) => {
    if (Array.isArray(sorter)) {
      return sorter[0];
    }
    return sorter;
  };

  const handleTableChange = async (_pagination: any, _filters: any, sorter: any) => {
    const currentSorter = resolveSorterValue(sorter);
    const order = currentSorter?.order;
    const columnKey = String(currentSorter?.columnKey || '');

    filters.value.orderKey = order && columnKey ? columnKey : 'transCount';
    filters.value.sort = order === 'ascend' ? 'ASC' : order === 'descend' ? 'DESC' : 'DESC';
    pagination.value.current = 1;
    await fetchTable();
  };

  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 otherCardNo = String(route.query.otherCardNo || '').trim();

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

    return !!(personNames.length || otherName || otherCardNo);
  };

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

  const handleViewDetail = (record: any) => {
    transRecordBaseQuery.value = buildTransRecordBaseQuery(record);
    transRecordModalOpen.value = true;
  };

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

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

  watch(
    () => route.fullPath,
    async (next, prev) => {
      if (next === prev) return;
      await syncFromRoute();
    },
  );
</script>
<style lang="less">
  @import '../styles/trans-analysis-table-ui.less';
  @import (reference) '../styles/analysis-card-ui.less';

  @prefix-cls: ~'jeesite-trade-frequency';

  .@{prefix-cls}.trade-frequency-page {
    .analysis-single-panel-frame();

    .filter-input {
      width: 180px;
    }

    .filter-mini {
      width: 88px;
    }

    .filter-date {
      width: 360px;
    }

    .panel-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

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

    .table-wrapper .ant-table-thead > tr > th {
      background: #f8fafc;
      font-weight: 600;
      color: #374151;
    }

    .table-wrapper .ant-table-tbody > tr > td {
      color: #374151;
    }

    .table-wrapper .ant-table-tbody > tr:hover > td {
      background: #f5f7ff;
    }

    .pagination-input {
      width: 48px;
    }

    :deep(.ant-select-selector),
    :deep(.ant-input),
    :deep(.ant-picker),
    :deep(.ant-btn) {
      border-radius: 8px;
    }

    @media screen and (max-width: 992px) {
      .filter-input,
      .filter-date {
        width: 100%;
      }
    }
  }

  /* 统一卡片视觉：对齐「持续联系 / 夜间联系 / 敏感日期联系」 */
  .@{prefix-cls}.trade-frequency-page {
    .analysis-card-ui();
  }
</style>