zsjz-ai/ai-frontend/packages/trans/views/cashTrans/index.vue

<template>
  <div :class="prefixCls" class="cash-trans-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>
        <Select v-model:value="filters.countOp" class="filter-op" :options="opOptions" />
        <Input v-model:value="filters.countValue" class="filter-mini" :status="summaryCountValueStatus" />
      </div>
      <div class="filter-item">
        <span class="filter-label">交易日期:</span>
        <RangePicker v-model:value="filters.dateRange" class="filter-date" />
      </div>
      <div class="toolbar-actions">
        <div class="filter-actions">
          <Button type="primary" :loading="summaryLoading" @click="handleSearch">查询</Button>
          <Button @click="handleReset">重置</Button>
        </div>
        <div class="extra-actions">
          <Button @click="openKeywordModal">关键词配置</Button>
        </div>
      </div>
    </div>

    <ConfigManageModal
      :open="keywordModalOpen"
      title="关键词管理"
      :width="960"
      wrapClassName="cash-keyword-modal"
      summary="支持新增、编辑、删除当前页面关键词"
      :refresh-loading="keywordLoading"
      :table-height="420"
      :total="keywordData.length"
      :current="keywordPagination.current"
      :total-pages="keywordTotalPages"
      :page-size="keywordPagination.pageSize"
      :page-size-options="pageSizeOptions"
      :jump-page="keywordJumpPage"
      @update:open="handleKeywordModalChange"
      @update:jumpPage="handleKeywordJumpPageInput"
      @create="openKeywordEditor()"
      @prev-page="handleKeywordPrevPage"
      @next-page="handleKeywordNextPage"
      @page-size-change="handleKeywordPageSizeChange"
      @jump-page="handleKeywordJumpPage"
    >
      <template #default="{ tableMaxHeight }">
        <BasicTable
          :columns="keywordColumns"
          :data-source="keywordPagedData"
          :loading="keywordLoading"
          :pagination="false"
          :showIndexColumn="false"
          :show-table-setting="false"
          :table-setting="{ size: true, setting: true, redo: false, fullScreen: false }"
          :can-resize="true"
          :max-height="tableMaxHeight"
          row-key="rowKey"
        >
          <template #keywordAction="{ record }">
            <TableAction :actions="getKeywordActions(record)" />
          </template>
        </BasicTable>
      </template>
    </ConfigManageModal>

    <ConfigEditorModal
      v-model:open="keywordEditorOpen"
      :title="keywordEditorTitle"
      :confirmLoading="keywordSaving"
      wrapClassName="cash-keyword-editor-modal"
      @ok="handleSaveKeyword"
      @cancel="closeKeywordEditor"
    >
      <Form layout="vertical" class="keyword-form">
        <Form.Item
          label="关键字"
          :validate-status="keywordFormErrors.cashKey ? 'error' : ''"
          :help="keywordFormErrors.cashKey"
        >
          <Input v-model:value="keywordForm.cashKey" :maxlength="100" placeholder="请输入关键字" allow-clear />
        </Form.Item>
      </Form>
    </ConfigEditorModal>

    <div class="content-panel">
      <div class="left-panel">
        <div class="panel-header panel-header--stack">
          <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-wrapper">
          <BasicTable
            :columns="summaryColumns"
            :data-source="summaryData"
            :pagination="false"
            :loading="summaryLoading"
            :showIndexColumn="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"
            :rowClassName="summaryRowClassName"
            row-key="rowKey"
            @row-click="handleSummaryRowClick"
          />
        </div>
      </div>

      <div class="right-panel">
        <div class="panel-header">
          <div>
            <div class="panel-title">交易对方汇总</div>
            <div class="panel-desc">
              {{
                selectedSummary
                  ? `查看 ${selectedSummary.personName} 的对手方现金交易统计和明细`
                  : '请选择左侧现金交易汇总记录查看对手方信息。'
              }}
            </div>
          </div>
          <!-- <Button size="small" type="primary">查看交易前后通话</Button> -->
        </div>

        <div class="inner-filter-bar">
          <div class="filter-item">
            <span class="filter-label">对方卡(账)号:</span>
            <Input v-model:value="innerFilters.otherCard" class="filter-input" placeholder="请输入对方卡号/账号" />
          </div>
          <div class="filter-item">
            <span class="filter-label">交易次数:</span>
            <Select v-model:value="innerFilters.countOp" class="filter-op" :options="opOptions" />
            <Input v-model:value="innerFilters.countValue" class="filter-micro" :status="detailCountValueStatus" />
          </div>
          <div class="filter-item">
            <span class="filter-label">交易总额:</span>
            <Select v-model:value="innerFilters.amountOp" class="filter-op" :options="opOptions" />
            <Input v-model:value="innerFilters.amountValue" class="filter-micro" :status="detailAmountValueStatus" />
          </div>
          <div class="filter-item">
            <span class="filter-label">对方名称:</span>
            <Input v-model:value="innerFilters.otherName" class="filter-input" placeholder="请输入对方名称" />
          </div>
          <div class="filter-actions">
            <Button type="primary" size="small" :loading="detailLoading" @click="handleDetailSearch">查询</Button>
            <Button size="small" @click="handleDetailReset">重置</Button>
          </div>
        </div>

        <div class="table-wrapper table-wrapper--detail">
          <div v-if="detailLoading && !detailData.length" class="panel-empty panel-empty--record">
            交易对方汇总加载中...
          </div>
          <BasicTable
            v-else-if="detailData.length"
            :columns="detailColumns"
            :data-source="detailData"
            :pagination="false"
            :loading="detailLoading"
            :showIndexColumn="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="rowKey"
          >
            <template #detailAction="{ record }">
              <Button type="link" size="small" @click.stop="handleViewDetail(record)">查看详情</Button>
            </template>
          </BasicTable>
          <div v-else class="panel-empty panel-empty--state panel-empty--record">
            <EmptyState
              :title="selectedSummary ? '暂无数据' : '请选择对象'"
              :description="
                selectedSummary
                  ? '当前选中对象暂无对手方现金交易统计'
                  : '左侧选中现金交易汇总记录后，在这里查看对手方信息'
              "
              :min-height="240"
            />
          </div>
        </div>

        <div v-if="showDetailPagination" class="pagination-bar">
          <AnalysisPagination
            :total="detailPagination.total"
            :current="detailPagination.current"
            :page-size="detailPagination.pageSize"
            :page-size-options="pageSizeOptions"
            :loading="detailLoading"
            @change="handleDetailPaginationChange"
          />
        </div>
      </div>
    </div>

    <TransRecordModal v-model:open="transRecordModalOpen" title="交易记录" :base-query="transRecordBaseQuery" />
  </div>
</template>
<script lang="ts" setup name="ViewsCashTransIndex">
  import { computed, onMounted, reactive, ref } from 'vue';
  import { Select, Input, Button, DatePicker, Form } from 'ant-design-vue';
  import dayjs, { type Dayjs } from 'dayjs';
  import AnalysisPagination from '@jeesite/core/components/AnalysisPagination/src/AnalysisPagination.vue';
  import { EmptyState } from '@jeesite/core/components/EmptyState';
  import { BasicTable, TableAction } from '@jeesite/core/components/Table';
  import type { BasicColumn } from '@jeesite/core/components/Table';
  import { useAnalysisRefreshPrompt } from '@jeesite/core/hooks/web/useAnalysisRefreshPrompt';
  import { useDesign } from '@jeesite/core/hooks/web/useDesign';
  import { useMessage } from '@jeesite/core/hooks/web/useMessage';
  import ConfigManageModal from '@jeesite/core/components/AnalysisConfigModal/src/ConfigManageModal.vue';
  import ConfigEditorModal from '@jeesite/core/components/AnalysisConfigModal/src/ConfigEditorModal.vue';
  import {
    COMPARE_OPERATOR_OPTIONS,
    DEFAULT_COMPARE_OPERATOR,
    normalizeCompareOperator,
  } from '@jeesite/core/utils/compareOperator';
  import { pickDetailValue } from '@jeesite/core/utils/detailQuery';
  import componentSetting from '@jeesite/core/settings/componentSetting';
  import { getPersonOptions } from '@jeesite/person/api/personApi';
  import TransRecordModal from '../components/TransRecordModal.vue';
  import {
    createOrUpdateCashKey,
    deleteCashKey,
    getTransRecordSummary,
    listCashKeys,
    statFirstTransCashFlow,
  } from '@jeesite/trans/api/transApi';
  import type { TransCashFlowSummaryDTO, TransCashKey, TransRecordSummaryItemDTO } from '@jeesite/trans/api/types/dto';
  import type { TransCashFlowQuery, TransRecordQuery, TransRecordSummaryQuery } from '@jeesite/trans/api/types/query';

  interface CashSummaryRow {
    rowKey: string;
    id: number;
    personName: string;
    personCardNo: string;
    transTotalAmount: string;
    transCount: number | string;
    incomeTotalAmount: string;
    expenseTotalAmount: string;
    raw: TransCashFlowSummaryDTO;
  }

  interface CashDetailRow {
    rowKey: string;
    id: number;
    personName: string;
    personCardNo: string;
    otherCardNo: string;
    otherName: string;
    transCount: number | string;
    transTotalAmount: string;
    incomeTotalAmount: string;
    expenseTotalAmount: string;
    raw: TransRecordSummaryItemDTO;
  }

  interface KeywordRow extends TransCashKey {
    rowKey: number | string;
    rowNo: number;
  }

  interface KeywordFormState {
    id?: string | number;
    cashKey: string;
  }

  const SUMMARY_PAGE_SIZE = 200;
  const DEFAULT_SUMMARY_SORT_KEY = 'transCount';
  const DEFAULT_SUMMARY_SORT_ORDER = 'DESC' as const;
  const DEFAULT_DETAIL_SORT_KEY = 'transCount';
  const DEFAULT_DETAIL_SORT_ORDER = 'DESC' as const;

  const { prefixCls } = useDesign('cash-trans');
  const { createMessage } = useMessage();
  const RangePicker = DatePicker.RangePicker;
  type RangeValue = [Dayjs, Dayjs] | undefined;

  const filters = ref({
    target: [] as string[],
    countOp: DEFAULT_COMPARE_OPERATOR,
    countValue: '',
    dateRange: undefined as RangeValue,
  });

  const innerFilters = ref({
    otherCard: '',
    countOp: DEFAULT_COMPARE_OPERATOR,
    countValue: '',
    amountOp: DEFAULT_COMPARE_OPERATOR,
    amountValue: '',
    otherName: '',
  });

  const summaryData = ref<CashSummaryRow[]>([]);
  const hasSearched = ref(false);
  const { syncAnalysisDataRefreshState } = useAnalysisRefreshPrompt({
    refresh: () => fetchSummaryTable(),
    hasData: () => hasSearched.value && summaryData.value.length > 0,
  });
  const selectedSummary = ref<CashSummaryRow | null>(null);
  const detailData = ref<CashDetailRow[]>([]);
  const summaryLoading = ref(false);
  const summaryRequestToken = ref(0);
  const detailLoading = ref(false);
  const keywordModalOpen = ref(false);
  const keywordEditorOpen = ref(false);
  const keywordLoading = ref(false);
  const keywordSaving = ref(false);
  const keywordData = ref<KeywordRow[]>([]);
  const keywordJumpPage = ref('1');
  const keywordPagination = ref({
    current: 1,
    pageSize: componentSetting.table.defaultPageSize,
  });
  const detailPagination = ref({
    current: 1,
    pageSize: componentSetting.table.defaultPageSize,
    total: 0,
  });
  const detailJumpPage = ref('1');
  const targetOptions = ref<Array<{ label: string; value: string }>>([]);
  const transRecordModalOpen = ref(false);
  const transRecordBaseQuery = ref<Partial<TransRecordQuery>>({});
  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 opOptions = COMPARE_OPERATOR_OPTIONS.filter((o) => o.value === 'GE' || o.value === 'LE');

  const pageSizeOptions = componentSetting.table.pageSizeOptions.map((value) => ({
    label: value,
    value: Number(value),
  }));
  const keywordForm = reactive<KeywordFormState>({
    id: undefined,
    cashKey: '',
  });
  const keywordFormErrors = reactive({
    cashKey: '',
  });

  const detailTotalPages = computed(() => {
    if (!detailPagination.value.total) return 1;
    return Math.max(1, Math.ceil(detailPagination.value.total / detailPagination.value.pageSize));
  });
  const showDetailPagination = computed(() => detailData.value.length > 0);
  const keywordTotalPages = computed(() => {
    if (!keywordData.value.length) return 1;
    return Math.max(1, Math.ceil(keywordData.value.length / keywordPagination.value.pageSize));
  });
  const keywordPagedData = computed(() => {
    const start = (keywordPagination.value.current - 1) * keywordPagination.value.pageSize;
    const end = start + keywordPagination.value.pageSize;
    return keywordData.value.slice(start, end);
  });
  const keywordEditorTitle = computed(() => (keywordForm.id ? '编辑关键词' : '新建关键词'));
  const normalizedSummaryCountValue = computed(() => String(filters.value.countValue ?? '').trim());
  const normalizedDetailCountValue = computed(() => String(innerFilters.value.countValue ?? '').trim());
  const normalizedDetailAmountValue = computed(() => String(innerFilters.value.amountValue ?? '').trim());

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

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

  const detailAmountValueStatus = computed<'error' | undefined>(() => {
    if (!normalizedDetailAmountValue.value) return undefined;
    const numericValue = parseNumber(normalizedDetailAmountValue.value);
    return numericValue !== undefined && numericValue > 0 ? undefined : 'error';
  });

  const summaryColumns: BasicColumn[] = [
    { title: '姓名', dataIndex: 'personName', key: 'personName', width: 90, align: 'center' as const },
    { title: '交易总额', dataIndex: 'transTotalAmount', key: 'transTotalAmount', width: 100, align: 'center' as const },
    {
      title: '交易总次数',
      dataIndex: 'transCount',
      key: 'transCount',
      width: 90,
      align: 'center' as const,
    },
    { title: '总收入', dataIndex: 'incomeTotalAmount', key: 'incomeTotalAmount', width: 100, align: 'center' as const },
    {
      title: '总支出',
      dataIndex: 'expenseTotalAmount',
      key: 'expenseTotalAmount',
      width: 100,
      align: 'center' as const,
    },
  ];

  const detailColumns: BasicColumn[] = [
    { title: '序号', dataIndex: 'id', key: 'id', width: 70, align: 'center' as const },
    { title: '本方名称', dataIndex: 'personName', key: 'personName', width: 110, align: 'center' as const },
    { title: '本方卡(账)号', dataIndex: 'personCardNo', key: 'personCardNo', width: 160, align: 'center' as const },
    { title: '对方卡(账)号', dataIndex: 'otherCardNo', key: 'otherCardNo', width: 160, align: 'center' as const },
    { title: '对方名称', dataIndex: 'otherName', key: 'otherName', width: 140, align: 'center' as const },
    { title: '交易次数', dataIndex: 'transCount', key: 'transCount', width: 90, align: 'center' as const },
    { title: '交易总额', dataIndex: 'transTotalAmount', key: 'transTotalAmount', width: 110, align: 'center' as const },
    {
      title: '收入总额',
      dataIndex: 'incomeTotalAmount',
      key: 'incomeTotalAmount',
      width: 110,
      align: 'center' as const,
    },
    {
      title: '支出总额',
      dataIndex: 'expenseTotalAmount',
      key: 'expenseTotalAmount',
      width: 110,
      align: 'center' as const,
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      width: 120,
      align: 'center' as const,
      fixed: 'right' as const,
      slot: 'detailAction',
    },
  ];

  const keywordColumns: BasicColumn[] = [
    { title: '序号', dataIndex: 'rowNo', key: 'rowNo', width: 80, align: 'center' as const },
    { title: '关键字', dataIndex: 'cashKey', key: 'cashKey', width: 420, align: 'left' as const },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      width: 160,
      align: 'center' as const,
      slot: 'keywordAction',
    },
  ];

  const parseNumber = (value?: number | string | null) => {
    if (value === null || value === undefined || value === '') return undefined;
    const normalized = typeof value === 'string' ? value.replace(/,/g, '').trim() : value;
    const numericValue = Number(normalized);
    return Number.isFinite(numericValue) ? numericValue : undefined;
  };

  const formatAmount = (value?: number | string | null) => {
    const numericValue = parseNumber(value);
    if (numericValue === undefined) return '-';
    return numericValue.toLocaleString('zh-CN', {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    });
  };

  const formatCount = (value?: number | string | null) => {
    const numericValue = parseNumber(value);
    if (numericValue === undefined) return '-';
    return Number.isInteger(numericValue) ? numericValue : numericValue.toFixed(0);
  };

  const parseFilterInputNumber = (value?: string) => {
    if (!value?.trim()) return undefined;
    return parseNumber(value);
  };

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

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

    return null;
  };

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

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

    return null;
  };

  const resolveDetailTransAmount = (showMessage = false) => {
    if (!normalizedDetailAmountValue.value) return undefined;
    const rawValue = normalizedDetailAmountValue.value;
    const numericValue = parseNumber(rawValue);
    if (numericValue !== undefined && numericValue > 0) {
      return rawValue;
    }

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

    return null;
  };

  const normalizePagedList = <T,>(resp: any): T[] => {
    if (Array.isArray(resp)) return resp as T[];
    if (Array.isArray(resp?.records)) return resp.records as T[];
    if (Array.isArray(resp?.data?.records)) return resp.data.records as T[];
    if (Array.isArray(resp?.list)) return resp.list as T[];
    if (Array.isArray(resp?.data?.list)) return resp.data.list as T[];
    if (Array.isArray(resp?.data)) return resp.data as T[];
    return [];
  };

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

  const mapKeywordRows = (list: TransCashKey[]): KeywordRow[] =>
    list.map((item, index) => ({
      ...item,
      rowKey: item.id ?? `cash-key-${index}`,
      rowNo: index + 1,
    }));

  const resetKeywordForm = () => {
    keywordForm.id = undefined;
    keywordForm.cashKey = '';
    keywordFormErrors.cashKey = '';
  };

  const getKeywordActions = (record: KeywordRow) => [
    {
      label: '编辑',
      onClick: () => openKeywordEditor(record),
    },
    {
      label: '删除',
      color: 'error' as const,
      popConfirm: {
        title: '是否确认删除该关键字？',
        confirm: () => handleDeleteKeyword(record),
      },
    },
  ];

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

  const mapSummaryRow = (item: TransCashFlowSummaryDTO, index: number): CashSummaryRow => ({
    rowKey: `cash-summary-${index}-${item.personCardNo || item.personName || index}`,
    id: index + 1,
    personName: item.personName || '-',
    personCardNo: item.personCardNo || '-',
    transTotalAmount: formatAmount(item.transTotalAmount),
    transCount: formatCount(item.transCount),
    incomeTotalAmount: formatAmount(item.incomeTotalAmount),
    expenseTotalAmount: formatAmount(item.expenseTotalAmount),
    raw: item,
  });

  const sortSummaryList = (list: TransCashFlowSummaryDTO[]) =>
    [...list].sort((left, right) => {
      const leftCount = parseNumber(left.transCount) || 0;
      const rightCount = parseNumber(right.transCount) || 0;
      if (rightCount !== leftCount) return rightCount - leftCount;

      const leftAmount = parseNumber(left.transTotalAmount) || 0;
      const rightAmount = parseNumber(right.transTotalAmount) || 0;
      if (rightAmount !== leftAmount) return rightAmount - leftAmount;

      return String(left.personName || left.personCardNo || '').localeCompare(
        String(right.personName || right.personCardNo || ''),
      );
    });

  const mapDetailRow = (item: TransRecordSummaryItemDTO, index: number): CashDetailRow => ({
    rowKey: `cash-detail-${detailPagination.value.current}-${index}-${item.personCardNo || item.otherCardNo || index}`,
    id: (detailPagination.value.current - 1) * detailPagination.value.pageSize + index + 1,
    personName: item.personName || '-',
    personCardNo: item.personCardNo || '-',
    otherCardNo: item.otherCardNo || '-',
    otherName: item.otherName || '-',
    transCount: formatCount(item.transCount),
    transTotalAmount: formatAmount(item.transTotalAmount),
    incomeTotalAmount: formatAmount(item.incomeTotalAmount),
    expenseTotalAmount: formatAmount(item.expenseTotalAmount),
    raw: item,
  });

  const sortDetailList = (list: TransRecordSummaryItemDTO[]) =>
    [...list].sort((left, right) => {
      const leftCount = parseNumber(left.transCount) || 0;
      const rightCount = parseNumber(right.transCount) || 0;
      if (rightCount !== leftCount) return rightCount - leftCount;

      const leftAmount = parseNumber(left.transTotalAmount) || 0;
      const rightAmount = parseNumber(right.transTotalAmount) || 0;
      if (rightAmount !== leftAmount) return rightAmount - leftAmount;

      return String(left.otherName || left.otherCardNo || '').localeCompare(
        String(right.otherName || right.otherCardNo || ''),
      );
    });

  const buildSummaryQuery = (transCount?: number): TransCashFlowQuery => {
    const range = filters.value.dateRange;
    const selectedTargets = normalizeSelectedTargets(filters.value.target);

    return {
      page: 1,
      limit: SUMMARY_PAGE_SIZE,
      startDate: range?.[0] ? dayjs(range[0]).format('YYYY-MM-DD') : undefined,
      endDate: range?.[1] ? dayjs(range[1]).format('YYYY-MM-DD') : undefined,
      personNames: selectedTargets.length ? selectedTargets : undefined,
      transCount,
      transCountSymbol:
        transCount !== undefined
          ? normalizeCompareOperator(filters.value.countOp, DEFAULT_COMPARE_OPERATOR)
          : undefined,
      orderKey: DEFAULT_SUMMARY_SORT_KEY,
      sort: DEFAULT_SUMMARY_SORT_ORDER,
    };
  };

  const buildDetailQuery = (
    summary: CashSummaryRow | null = selectedSummary.value,
    transCount?: number,
    transAmount?: string | number,
  ): TransRecordSummaryQuery => {
    const range = filters.value.dateRange;

    return {
      page: detailPagination.value.current,
      limit: detailPagination.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: summary?.raw.personName ? [summary.raw.personName] : undefined,
      personCardNo: summary?.raw.personCardNo || undefined,
      otherName: innerFilters.value.otherName.trim() || undefined,
      otherCardNo: innerFilters.value.otherCard.trim() || undefined,
      transCount,
      transAmount,
      transCountSymbol:
        transCount !== undefined
          ? normalizeCompareOperator(innerFilters.value.countOp, DEFAULT_COMPARE_OPERATOR)
          : undefined,
      transAmountSymbol:
        transAmount !== undefined
          ? normalizeCompareOperator(innerFilters.value.amountOp, DEFAULT_COMPARE_OPERATOR)
          : undefined,
      orderKey: DEFAULT_DETAIL_SORT_KEY,
      sort: DEFAULT_DETAIL_SORT_ORDER,
      source: 1,
    };
  };

  const buildTransRecordBaseQuery = (
    record: CashDetailRow,
    currentDetailQuery: TransRecordSummaryQuery,
  ): Partial<TransRecordQuery> => {
    const currentPersonName = currentDetailQuery.personNames?.[0];
    return {
      personName: pickDetailValue(currentPersonName, record.raw.personName),
      personCardNo: pickDetailValue(currentDetailQuery.personCardNo, record.raw.personCardNo),
      otherName: pickDetailValue(currentDetailQuery.otherName, record.raw.otherName),
      otherCardNo: pickDetailValue(currentDetailQuery.otherCardNo, record.raw.otherCardNo),
      startDate: currentDetailQuery.startDate,
      endDate: currentDetailQuery.endDate,
      transAmount: currentDetailQuery.transAmount,
      transAmountSymbol: currentDetailQuery.transAmountSymbol,
      source: 1,
    };
  };

  const resetDetailState = () => {
    detailData.value = [];
    detailPagination.value.total = 0;
    detailPagination.value.current = 1;
    detailJumpPage.value = '1';
  };

  const summaryRowClassName = (record: any) =>
    selectedSummary.value && selectedSummary.value.id === record?.id ? 'summary-row-selected' : '';

  const getValidatedDetailQuery = (summary: CashSummaryRow | null = selectedSummary.value, showMessage = false) => {
    const transCount = resolveDetailTransCount(showMessage);
    if (transCount === null) return null;

    const transAmount = resolveDetailTransAmount(showMessage);
    if (transAmount === null) return null;

    return buildDetailQuery(summary, transCount, transAmount);
  };

  const fetchDetailTable = async (row?: CashSummaryRow) => {
    const targetSummary = row || selectedSummary.value;
    if (!targetSummary?.raw.personName && !targetSummary?.raw.personCardNo) {
      resetDetailState();
      return;
    }

    const detailQuery = getValidatedDetailQuery(targetSummary, true);
    if (!detailQuery) return;

    selectedSummary.value = targetSummary;
    detailLoading.value = true;
    try {
      const resp = await getTransRecordSummary(detailQuery);
      const list = sortDetailList(normalizePagedList<TransRecordSummaryItemDTO>(resp));
      const current = Number((resp as any)?.current ?? (resp as any)?.data?.current ?? detailPagination.value.current);
      const size = Number((resp as any)?.size ?? (resp as any)?.data?.size ?? detailPagination.value.pageSize);

      if (Number.isFinite(current) && current > 0) detailPagination.value.current = current;
      if (Number.isFinite(size) && size > 0) detailPagination.value.pageSize = size;

      detailData.value = list.map(mapDetailRow);
      detailPagination.value.total = normalizeTotal(resp, list.length);
      detailJumpPage.value = String(detailPagination.value.current);
    } catch (error) {
      detailData.value = [];
      detailPagination.value.total = 0;
      detailJumpPage.value = String(detailPagination.value.current);
      createMessage.warning('交易记录汇总接口调用失败');
    } finally {
      detailLoading.value = false;
    }
  };

  const fetchSummaryTable = async () => {
    const summaryTransCount = resolveSummaryTransCount(true);
    if (summaryTransCount === null) return;

    const requestToken = ++summaryRequestToken.value;
    summaryLoading.value = true;

    try {
      const resp = await statFirstTransCashFlow(buildSummaryQuery(summaryTransCount));
      const list = sortSummaryList(normalizePagedList<TransCashFlowSummaryDTO>(resp));
      summaryData.value = list.map(mapSummaryRow);
      hasSearched.value = true;
      syncAnalysisDataRefreshState(list.length > 0);
    } catch (error) {
      summaryData.value = [];
      selectedSummary.value = null;
      createMessage.warning('现金交易汇总接口调用失败');
    } finally {
      if (summaryRequestToken.value === requestToken) {
        summaryLoading.value = false;
      }
    }
  };

  const loadKeywordList = async (showSuccessMessage = false) => {
    keywordLoading.value = true;
    try {
      const resp = await listCashKeys();
      keywordData.value = mapKeywordRows(normalizeKeywordList(resp));
      keywordPagination.value.current = 1;
      keywordJumpPage.value = '1';
      if (showSuccessMessage) {
        createMessage.success('关键词列表已刷新');
      }
    } catch (error) {
      keywordData.value = [];
      keywordPagination.value.current = 1;
      keywordJumpPage.value = '1';
      createMessage.warning('现金关键词列表获取失败');
    } finally {
      keywordLoading.value = false;
    }
  };
  const handleKeywordPrevPage = () => {
    if (keywordPagination.value.current <= 1) return;
    keywordPagination.value.current -= 1;
    keywordJumpPage.value = String(keywordPagination.value.current);
  };
  const handleKeywordNextPage = () => {
    if (keywordPagination.value.current >= keywordTotalPages.value) return;
    keywordPagination.value.current += 1;
    keywordJumpPage.value = String(keywordPagination.value.current);
  };
  const handleKeywordPageSizeChange = (value: string | number) => {
    keywordPagination.value.pageSize = Number(value);
    keywordPagination.value.current = 1;
    keywordJumpPage.value = '1';
  };
  const handleKeywordJumpPage = () => {
    const next = Number(keywordJumpPage.value);
    if (!Number.isInteger(next) || next < 1) {
      createMessage.warning('请输入正确页码');
      keywordJumpPage.value = String(keywordPagination.value.current);
      return;
    }

    keywordPagination.value.current = Math.min(next, keywordTotalPages.value);
    keywordJumpPage.value = String(keywordPagination.value.current);
  };
  const handleKeywordJumpPageInput = (value: string) => {
    keywordJumpPage.value = value;
  };

  const openKeywordModal = async () => {
    keywordModalOpen.value = true;
    await loadKeywordList();
  };

  const handleKeywordModalChange = async (open: boolean) => {
    keywordModalOpen.value = open;
    if (open && !keywordData.value.length) {
      await loadKeywordList();
    }
  };

  const openKeywordEditor = (record?: KeywordRow) => {
    resetKeywordForm();
    if (record) {
      keywordForm.id = record.id !== undefined && record.id !== null ? String(record.id) : undefined;
      keywordForm.cashKey = record.cashKey || '';
    }
    keywordEditorOpen.value = true;
  };

  const closeKeywordEditor = () => {
    keywordEditorOpen.value = false;
    resetKeywordForm();
  };

  const validateKeywordForm = () => {
    const cashKey = keywordForm.cashKey.trim();
    keywordFormErrors.cashKey = cashKey ? '' : '请输入关键字';

    if (!cashKey) return false;

    keywordForm.cashKey = cashKey;
    return true;
  };

  const handleSaveKeyword = async () => {
    if (!validateKeywordForm()) return;

    keywordSaving.value = true;
    try {
      await createOrUpdateCashKey({
        id: keywordForm.id,
        cashKey: keywordForm.cashKey,
      });
      createMessage.success(keywordForm.id ? '关键词更新成功' : '关键词新增成功');
      keywordEditorOpen.value = false;
      resetKeywordForm();
      await loadKeywordList();
    } catch (error) {
      createMessage.warning(keywordForm.id ? '关键词更新失败' : '关键词新增失败');
    } finally {
      keywordSaving.value = false;
    }
  };

  const handleDeleteKeyword = async (record: KeywordRow) => {
    if (!record.id) {
      createMessage.warning('缺少关键词ID，无法删除');
      return;
    }

    try {
      await deleteCashKey(String(record.id));
      createMessage.success('关键词删除成功');
      await loadKeywordList();
    } catch (error) {
      createMessage.warning('关键词删除失败');
    }
  };

  const refreshRightByFirstRow = async () => {
    detailPagination.value.current = 1;
    detailJumpPage.value = '1';

    if (summaryData.value.length) {
      await fetchDetailTable(summaryData.value[0]);
    } else {
      selectedSummary.value = null;
      resetDetailState();
    }
  };

  const handleSummaryRowClick = async (record: CashSummaryRow) => {
    if (!record) return;
    await fetchDetailTable(record);
  };

  const handleSearch = async () => {
    await fetchSummaryTable();
    await refreshRightByFirstRow();
  };

  const handleReset = async () => {
    filters.value = {
      target: [],
      countOp: DEFAULT_COMPARE_OPERATOR,
      countValue: '',
      dateRange: undefined,
    };
    await fetchSummaryTable();
    await refreshRightByFirstRow();
  };

  const handleDetailSearch = async () => {
    detailPagination.value.current = 1;
    detailJumpPage.value = '1';
    await fetchDetailTable();
  };

  const handleDetailReset = async () => {
    innerFilters.value = {
      otherCard: '',
      countOp: DEFAULT_COMPARE_OPERATOR,
      countValue: '',
      amountOp: DEFAULT_COMPARE_OPERATOR,
      amountValue: '',
      otherName: '',
    };
    detailPagination.value.current = 1;
    detailJumpPage.value = '1';
    await fetchDetailTable();
  };

  const handleViewDetail = (record: CashDetailRow) => {
    if (!record) return;
    const detailQuery = getValidatedDetailQuery(selectedSummary.value, true);
    if (!detailQuery) return;
    transRecordBaseQuery.value = buildTransRecordBaseQuery(record, detailQuery);
    transRecordModalOpen.value = true;
  };

  const handleViewSummaryTransRecord = (record: CashSummaryRow) => {
    if (!record) return;
    const transCount = resolveSummaryTransCount(true);
    if (transCount === null) return;

    transRecordBaseQuery.value = {
      personName: record.raw.personName || undefined,
      personCardNo: record.raw.personCardNo || undefined,
      startDate: filters.value.dateRange?.[0] ? dayjs(filters.value.dateRange[0]).format('YYYY-MM-DD') : undefined,
      endDate: filters.value.dateRange?.[1] ? dayjs(filters.value.dateRange[1]).format('YYYY-MM-DD') : undefined,
      transCount,
      transCountSymbol:
        transCount !== undefined
          ? normalizeCompareOperator(filters.value.countOp, DEFAULT_COMPARE_OPERATOR)
          : undefined,
      source: 1,
    };
    transRecordModalOpen.value = true;
  };

  const handlePrevPage = async () => {
    if (detailLoading.value || detailPagination.value.current <= 1) return;
    detailPagination.value.current -= 1;
    await fetchDetailTable();
  };

  const handleNextPage = async () => {
    if (detailLoading.value || detailPagination.value.current >= detailTotalPages.value) return;
    detailPagination.value.current += 1;
    await fetchDetailTable();
  };

  const handleDetailPaginationChange = async (page: number, pageSize: number) => {
    if (detailLoading.value) return;
    if (pageSize !== detailPagination.value.pageSize) {
      detailPagination.value.pageSize = pageSize;
      await handlePageSizeChange();
      return;
    }
    if (page === detailPagination.value.current - 1) {
      await handlePrevPage();
      return;
    }
    if (page === detailPagination.value.current + 1) {
      await handleNextPage();
      return;
    }
    if (page === detailPagination.value.current) return;
    detailJumpPage.value = String(page);
    await handleJumpPage();
  };

  const handlePageSizeChange = async () => {
    detailPagination.value.current = 1;
    detailJumpPage.value = '1';
    await fetchDetailTable();
  };

  const handleJumpPage = async () => {
    const next = Number(detailJumpPage.value);
    if (!Number.isInteger(next) || next < 1) {
      createMessage.warning('请输入正确页码');
      detailJumpPage.value = String(detailPagination.value.current);
      return;
    }

    detailPagination.value.current = Math.min(next, detailTotalPages.value);
    await fetchDetailTable();
  };

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

  onMounted(async () => {
    await fetchTargetOptions();
  });
</script>
<style lang="less">
  @import '../styles/trans-analysis-table-ui.less';
  @prefix-cls: ~'jeesite-cash-trans';

  .@{prefix-cls}.cash-trans-page {
    .analysis-page-frame();

    .filter-input {
      width: 180px;
    }

    .filter-mini {
      width: 80px;
    }

    .filter-micro {
      width: 60px;
    }

    .filter-date {
      width: 360px;
    }

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

    .filter-actions {
      display: flex;
      gap: 6px;
    }

    .extra-actions {
      display: flex;
    }

    .content-panel {
      display: flex;
      gap: 2px;
    }

    .left-panel {
      flex: 0 0 42%;
      .analysis-card-shell();
    }

    .right-panel {
      flex: 1;
      min-width: 0;
      .analysis-card-shell();
    }

    .panel-header--stack {
      align-items: flex-start;
    }

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

    .panel-empty {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #6b7280;
      font-size: 13px;
      text-align: center;
    }

    .panel-empty--record {
      width: 100%;
    }

    .table-wrapper {
      min-width: 0;
    }

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

    .table-wrapper .ant-table-wrapper {
      height: 100%;
      min-height: 0;
    }

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

    .table-wrapper .ant-spin-container,
    .table-wrapper .ant-table,
    .table-wrapper .ant-table-container {
      height: 100%;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .table-wrapper .ant-table-body {
      flex: 1 1 auto;
      min-height: 0;
      max-height: 100% !important;
      overflow: auto !important;
    }

    .table-wrapper .ant-table-body::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    .table-wrapper .ant-table-body::-webkit-scrollbar-thumb {
      background: rgba(148, 163, 184, 0.6);
      border-radius: 999px;
    }

    .table-wrapper .ant-table-body::-webkit-scrollbar-track {
      background: transparent;
    }

    .keyword-form {
      padding-top: 8px;
    }

    .inner-filter-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0;
      background: transparent;
      border-bottom: 0;
      flex-wrap: wrap;
      flex-shrink: 0;
    }

    .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: 900px) {
      .content-panel {
        flex-direction: column;
      }

      .left-panel {
        flex-basis: auto;
      }
    }

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

      .filter-input,
      .filter-date {
        width: 100%;
      }

      .pagination-bar {
        justify-content: flex-start;
      }
    }
  }
</style>