zsjz-ai/ai-frontend/packages/case/views/data/match.vue

<template>
  <div :class="prefixCls" class="case-match-page">
    <div class="page-header">
      <div class="page-title-wrap">
        <Button type="link" class="back-btn" @click="handleBack">
          <template #icon><LeftOutlined /></template>
          返回
        </Button>
        <div>
          <div class="page-title">数据匹配结果</div>
          <div class="page-subtitle">按匹配状态查看文件识别结果，确认无误后继续执行清洗导入。</div>
        </div>
      </div>
      <Button type="primary" class="page-action" @click="handleCleanImport">清洗并导入</Button>
    </div>

    <div class="filter-bar">
      <div class="filter-item">
        <span class="filter-label">匹配状态:</span>
        <Select v-model:value="status" class="filter-select" :options="statusOptions" />
      </div>
      <div class="filter-summary"
        >共 {{ totalCount }} 个工作表，成功 {{ successList.length }} 个，失败 {{ failList.length }} 个</div
      >
    </div>

    <div class="stats-grid">
      <div class="stat-card">
        <div class="stat-label">全部文件</div>
        <div class="stat-value">{{ totalCount }}</div>
      </div>
      <div class="stat-card success">
        <div class="stat-label">匹配成功</div>
        <div class="stat-value">{{ successList.length }}</div>
      </div>
      <div class="stat-card error">
        <div class="stat-label">匹配失败</div>
        <div class="stat-value">{{ failList.length }}</div>
      </div>
    </div>

    <div class="sections-scroll">
      <div v-for="section in visibleSections" :key="section.key" class="section-card">
        <div class="panel-header">
          <div>
            <div class="panel-title">{{ section.title }} ({{ section.items.length }})</div>
            <div class="panel-desc">{{ section.desc }}</div>
          </div>
        </div>

        <div v-if="section.items.length" class="match-list">
          <div
            v-for="item in section.items"
            :key="item.key"
            class="match-row"
            :class="{ 'is-active': activeMatchKey === item.key }"
            @click="handleSelectItem(item)"
          >
            <span class="match-name">{{ item.name }}</span>
            <span class="match-status" :class="{ error: !item.success }">{{ item.status }}</span>
            <div class="match-actions">
              <Button type="link" class="action-link" @click.stop="handleManualClean(item)">手动清洗</Button>
              <Button type="link" class="action-link danger" @click.stop="handleDeleteItem(item)">删除</Button>
            </div>
          </div>
        </div>
        <div v-else class="empty-state">当前筛选条件下暂无数据。</div>
      </div>

      <div v-if="!visibleSections.length" class="empty-state">当前筛选条件下暂无匹配结果。</div>
    </div>
  </div>
</template>

<script lang="ts" setup name="ViewsDataMatch">
  import { computed, nextTick, onMounted, ref } from 'vue';
  import { LeftOutlined } from '@ant-design/icons-vue';
  import { Button, Select } from 'ant-design-vue';
  import { useGo, useQuery } from '@jeesite/core/hooks/web/usePage';
  import { PageEnum } from '@jeesite/core/enums/pageEnum';
  import { useDesign } from '@jeesite/core/hooks/web/useDesign';
  import { useMessage } from '@jeesite/core/hooks/web/useMessage';
  import { useEmitter } from '@jeesite/core/store/modules/case';
  import { cancelClean } from '@jeesite/case/api/govern/governApi';
  import { resetImportProgressSession } from './importProgressSession';

  const { prefixCls } = useDesign('case-match');
  const go = useGo();
  const pageQuery = useQuery();
  const emitter = useEmitter();
  const { createMessage } = useMessage();
  const CASE_DATA_REFRESH_EVENT = 'case-data:refresh';

  type MatchStatus = 'all' | 'success' | 'fail';

  const status = ref<MatchStatus>('all');
  const FILE_INFO_STORAGE_KEY = 'case_clean_file_infos';
  const MATCH_KEY_FIELD = '__matchKey';
  const statusOptions = [
    { label: '全部', value: 'all' },
    { label: '匹配成功', value: 'success' },
    { label: '匹配失败', value: 'fail' },
  ];

  type MatchItem = {
    key: string;
    focusKey: string;
    name: string;
    status: string;
    success: boolean;
  };

  const matchFileInfos = ref<Recordable[]>([]);
  const activeMatchKey = ref('');
  const normalizeMatchParentId = (value?: string | number | null) => {
    const normalized = String(value ?? '').trim();
    return !normalized || normalized === '0' ? '' : normalized;
  };
  const isMatchFileRootItem = (item?: Recordable | null) => !!item && !normalizeMatchParentId(item.pid);
  const buildMatchItem = (item: Recordable): MatchItem => {
    const name = item.sheetName || item.fileName || '未命名文件';
    const mapped = mapStatus(item.fileStatus);
    const matchKey = String(item[MATCH_KEY_FIELD]);
    return {
      key: matchKey,
      focusKey: matchKey,
      name,
      status: mapped.label,
      success: mapped.success,
    };
  };
  const matchItems = computed(() =>
    matchFileInfos.value.filter((item) => !isMatchFileRootItem(item)).map(buildMatchItem),
  );
  const totalCount = computed(() => matchItems.value.length);
  const successList = computed(() => matchItems.value.filter((item) => item.success));
  const failList = computed(() => matchItems.value.filter((item) => !item.success));
  const visibleSections = computed(() => {
    const sections = [
      {
        key: 'success',
        title: '匹配成功',
        desc: '已成功识别模板和数据结构，可直接进入清洗导入流程。',
        items: successList.value,
      },
      {
        key: 'fail',
        title: '未匹配成功',
        desc: '建议先检查文件格式或执行手动清洗后再重新导入。',
        items: failList.value,
      },
    ];

    if (status.value === 'success') {
      return sections.filter((item) => item.key === 'success');
    }
    if (status.value === 'fail') {
      return sections.filter((item) => item.key === 'fail');
    }
    return sections;
  });

  const resolveBatchId = () => {
    const matchedItem = matchFileInfos.value.find((item) => item?.batchId);
    const batchId = String(matchedItem?.batchId ?? '').trim();
    return batchId || undefined;
  };

  const handleBack = async () => {
    const batchId = resolveBatchId();

    if (batchId) {
      try {
        await cancelClean({ batchId });
      } catch (error) {
        createMessage.warning('取消清洗失败，已返回案件数据页面');
      }
    }

    await go(PageEnum.BASE_HOME, true);
    await nextTick();
    emitter.emit(CASE_DATA_REFRESH_EVENT);
  };

  const mapStatus = (status?: string) => {
    if (!status) return { success: false, label: '待处理' };
    if (status.includes('SUCCESS') || status.includes('COMPLETE')) return { success: true, label: '匹配成功' };
    if (status.includes('FAIL')) return { success: false, label: '匹配错误' };
    if (status.includes('PASSWORD')) return { success: false, label: '密码未识别' };
    if (status.includes('FORMAT')) return { success: false, label: '格式不正确' };
    if (status.includes('EMPTY')) return { success: false, label: '内容为空' };
    return { success: false, label: status };
  };
  const normalizeMatchNodeId = (value?: string | number | null) => String(value ?? '').trim();
  const getMatchNodeFallbackKey = (item: Recordable) =>
    [
      item.filePath || item.fileName || 'file',
      item.sheetName || 'root',
      item.tableName || '',
      item.lineNo ?? '',
      item.createDateTime || '',
    ].join('__');
  const getMatchNodeKey = (item: Recordable, index: number) =>
    normalizeMatchNodeId(item.id) || normalizeMatchNodeId(getMatchNodeFallbackKey(item)) || String(index);

  const normalizeQueryText = (value?: string | string[] | null) =>
    Array.isArray(value) ? String(value[0] ?? '').trim() : String(value ?? '').trim();
  const restoreMatchStatusFromQuery = () => {
    const nextStatus = normalizeQueryText(pageQuery.value?.status);
    if (['all', 'success', 'fail'].includes(nextStatus)) {
      status.value = nextStatus as MatchStatus;
    }
  };
  const restoreActiveMatchKeyFromQuery = () => {
    const nextFocusKey = normalizeQueryText(pageQuery.value?.focusKey);
    if (!nextFocusKey) return;
    const matchedItem = matchItems.value.find((item) => item.key === nextFocusKey || item.focusKey === nextFocusKey);
    if (matchedItem) {
      activeMatchKey.value = matchedItem.key;
    }
  };

  const loadMatchItems = () => {
    const raw = sessionStorage.getItem(FILE_INFO_STORAGE_KEY);
    if (!raw) {
      matchFileInfos.value = [];
      return;
    }
    try {
      const parsed = JSON.parse(raw) as Recordable[];
      if (!Array.isArray(parsed)) {
        matchFileInfos.value = [];
        return;
      }
      const fileInfos = parsed.map((item, index) => ({
        ...item,
        [MATCH_KEY_FIELD]: item[MATCH_KEY_FIELD] || getMatchNodeKey(item, index),
      }));
      matchFileInfos.value = fileInfos;
    } catch (error) {
      matchFileInfos.value = [];
    }
  };
  const handleSelectItem = (item: MatchItem) => {
    activeMatchKey.value = item.key;
  };

  const handleManualClean = (item: MatchItem) => {
    handleSelectItem(item);
    if (!matchFileInfos.value.length) {
      createMessage.warning('未找到可清洗文件，请先上传并匹配文件');
      return;
    }
    sessionStorage.setItem(FILE_INFO_STORAGE_KEY, JSON.stringify(matchFileInfos.value));
    go({
      path: PageEnum.BASE_CLEANING,
      query: {
        focusKey: item.focusKey,
        from: 'match',
        matchStatus: status.value,
      },
    });
  };

  const handleDeleteItem = (item: MatchItem) => {
    handleSelectItem(item);
    const targetInfo = matchFileInfos.value.find((fileInfo) => String(fileInfo[MATCH_KEY_FIELD]) === item.key);
    const targetParentId = normalizeMatchParentId(targetInfo?.pid);
    const nextFileInfos = matchFileInfos.value.filter((fileInfo) => String(fileInfo[MATCH_KEY_FIELD]) !== item.key);

    if (targetParentId) {
      const hasSiblingSheet = nextFileInfos.some((fileInfo) => normalizeMatchParentId(fileInfo.pid) === targetParentId);
      if (!hasSiblingSheet) {
        matchFileInfos.value = nextFileInfos.filter((fileInfo) => String(fileInfo.id ?? '').trim() !== targetParentId);
      } else {
        matchFileInfos.value = nextFileInfos;
      }
    } else {
      matchFileInfos.value = nextFileInfos;
    }

    sessionStorage.setItem(FILE_INFO_STORAGE_KEY, JSON.stringify(matchFileInfos.value));
    if (activeMatchKey.value === item.key) {
      const nextActiveItem = matchItems.value.find((matchItem) => matchItem.key !== item.key);
      activeMatchKey.value = nextActiveItem?.key || '';
    }
    createMessage.success('删除成功');
  };

  const handleCleanImport = () => {
    if (!matchItems.value.length) {
      createMessage.warning('未找到可清洗文件，请先上传并匹配文件');
      return;
    }
    resetImportProgressSession();
    go(PageEnum.BASE_CLEAN_PROGRESS);
  };

  onMounted(() => {
    restoreMatchStatusFromQuery();
    loadMatchItems();
    restoreActiveMatchKeyFromQuery();
  });
</script>

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

  .@{prefix-cls}.case-match-page {
    min-height: 100%;
    height: 100%;
    padding: 12px 16px 24px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    overflow: auto;

    .page-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .page-title-wrap {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      min-width: 0;
    }

    .back-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 0 6px 0 0;
      height: 36px;
      border-radius: 8px;
      color: #2563eb;
      font-size: 16px;
      font-weight: 600;
      line-height: 1;
      flex-shrink: 0;

      :deep(.ant-btn-icon) {
        font-size: 18px;
      }

      &:hover {
        color: #1d4ed8;
      }
    }

    .page-title {
      font-size: 18px;
      line-height: 1.4;
      font-weight: 600;
      color: #111827;
    }

    .page-subtitle {
      margin-top: 4px;
      font-size: 13px;
      line-height: 1.6;
      color: #6b7280;
    }

    .page-action {
      height: 36px;
      padding: 0 18px;
      border-radius: 8px;
      flex-shrink: 0;
    }

    .filter-bar {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      padding: 12px 16px;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      background: #fafafa;
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    }

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

    .filter-label {
      color: #4b5563;
      font-size: 13px;
      white-space: nowrap;
    }

    .filter-select {
      width: 160px;
    }

    .filter-summary {
      margin-left: auto;
      color: #6b7280;
      font-size: 12px;
      white-space: nowrap;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .stat-card {
      padding: 16px 18px;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    }

    .stat-label {
      color: #6b7280;
      font-size: 13px;
    }

    .stat-value {
      margin-top: 8px;
      font-size: 28px;
      line-height: 1;
      font-weight: 600;
      color: #111827;
    }

    .stat-card.success .stat-value {
      color: #15803d;
    }

    .stat-card.error .stat-value {
      color: #dc2626;
    }

    .section-card {
      flex: 0 0 auto;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
      overflow: hidden;
    }

    .sections-scroll {
      min-height: 0;
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
      overflow-y: auto;
      padding-right: 4px;
      padding-bottom: 2px;
    }

    .panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 18px 12px;
      border-bottom: 1px solid #eef2f7;
    }

    .panel-title {
      font-size: 15px;
      font-weight: 600;
      color: #111827;
    }

    .panel-desc {
      margin-top: 4px;
      font-size: 12px;
      color: #6b7280;
      line-height: 1.6;
    }

    .match-list {
      display: flex;
      flex-direction: column;
      padding: 12px 18px 18px;
    }

    .match-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 140px 180px;
      align-items: center;
      gap: 12px;
      position: relative;
      margin: 0 -10px;
      min-height: 52px;
      padding: 10px 10px;
      border-radius: 10px;
      border-bottom: 1px solid #eef2f7;
      cursor: pointer;
      transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease;

      &:last-child {
        border-bottom: none;
      }

      &:hover {
        background: #f8fbff;
      }

      &.is-active {
        background: #eef4ff;
        box-shadow:
          inset 3px 0 0 #3651d9,
          inset 0 0 0 1px rgba(54, 81, 217, 0.12);

        .match-name {
          color: #1d4ed8;
          font-weight: 600;
        }
      }
    }

    .match-name {
      color: #111827;
      font-size: 13px;
      line-height: 1.6;
    }

    .match-status {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      min-width: 88px;
      padding: 4px 10px;
      border-radius: 999px;
      background: #ecfdf3;
      color: #15803d;
      font-size: 12px;
      font-weight: 600;
    }

    .match-status.error {
      background: #fef2f2;
      color: #dc2626;
    }

    .match-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }

    .action-link {
      padding: 0;
      height: auto;
    }

    .action-link.danger {
      color: #ef4444;
    }

    .empty-state {
      padding: 28px 18px;
      border: 1px dashed #d1d5db;
      border-radius: 12px;
      background: #fafafa;
      color: #9ca3af;
      text-align: center;
      font-size: 13px;
    }

    @media (max-width: 960px) {
      .page-header {
        flex-direction: column;
        align-items: flex-start;
      }

      .filter-summary {
        margin-left: 0;
      }

      .stats-grid {
        grid-template-columns: 1fr;
      }

      .match-row {
        grid-template-columns: 1fr;
      }

      .match-actions {
        justify-content: flex-start;
      }
    }
  }
</style>