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

<template>
  <div :class="prefixCls" class="case-import-list">
    <BasicTable class="import-list-table" @register="registerTable" @fetch-success="handleFetchSuccess">
      <template #toolbar>
        <div class="table-toolbar">
          <div class="table-title-meta">
            <span class="table-meta-chip">当前页 {{ currentPageFileCount }} 条</span>
            <span class="table-meta-chip is-selected">已选 {{ selectedRowKeysRef.length }} 条</span>
          </div>
          <Popconfirm title="是否确认删除选中的导入记录？" @confirm="handleDeleteSelected()">
            <a-button v-if="selectedRowKeysRef.length > 0" danger class="batch-delete-btn" type="default">
              <Icon icon="i-ant-design:delete-outlined" color="error" /> 删除 ({{ selectedRowKeysRef.length }})
            </a-button>
          </Popconfirm>
        </div>
      </template>
    </BasicTable>

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

    <CleanLogModal v-model:open="logModalOpen" title="导入失败日志" :file-infos="currentLogFileInfos" />
  </div>
</template>
<script lang="ts" setup name="ViewsSysEmpUserList">
  import { h, onBeforeUnmount, onMounted, ref, watch } from 'vue';
  import type { PropType } from 'vue';
  import { Popconfirm } from 'ant-design-vue';
  import AnalysisPagination from '@jeesite/core/components/AnalysisPagination/src/AnalysisPagination.vue';
  import { Icon } from '@jeesite/core/components/Icon';
  import { BasicTable, BasicColumn, useTable } from '@jeesite/core/components/Table';
  import { useDesign } from '@jeesite/core/hooks/web/useDesign';
  import { useGo } from '@jeesite/core/hooks/web/usePage';
  import { useMessage } from '@jeesite/core/hooks/web/useMessage';
  import { useEmitter } from '@jeesite/core/store/modules/case';
  import { PageEnum } from '@jeesite/core/enums/pageEnum';
  import type { FormProps } from '@jeesite/core/components/Form';
  import type { FileInfo } from '@jeesite/types';
  import { importFileList, deletedFileList, preFile } from '@jeesite/case/api/govern/governApi';
  import { openLocalFileApi } from '@jeesite/core/api/sys/login';
  import { FileStatusEnum } from '@jeesite/case/types/enum';
  import componentSetting from '@jeesite/core/settings/componentSetting';
  import CleanLogModal from './components/CleanLogModal.vue';
  import { resetImportProgressSession } from './importProgressSession';

  const props = defineProps({
    treeCodes: Array as PropType<string[]>,
    treeName: String,
    active: {
      type: Boolean,
      default: false,
    },
  });

  const { prefixCls } = useDesign('case-import-list');
  const go = useGo();
  const emitter = useEmitter();
  const { createMessage } = useMessage();
  const CASE_DATA_REFRESH_EVENT = 'case-data:refresh';
  const CASE_IMPORT_FILE_REFRESH_EVENT = 'case-import-file:refresh';
  const FILE_INFO_STORAGE_KEY = 'case_clean_file_infos';
  const IMPORT_FILE_INFO_STORAGE_KEY = 'case_clean_import_file_infos';
  const RECLEAN_CONTEXT_STORAGE_KEY = 'case_clean_reclean_context';
  const PRE_FILE_EMPTY_MESSAGE = '未识别到可处理文件，可能是文件重复、所有文件不存在，或文件格式不正确';
  const ctrlPermi = ref('');
  const currentPageFileCount = ref(0);
  const logModalOpen = ref(false);
  const currentLogFileInfos = ref<FileInfo[]>([]);
  const hasLoadedOnActivate = ref(false);
  const recleaningFileIds = ref<string[]>([]);
  const paginationLoading = ref(false);
  const pagination = ref({
    current: 1,
    pageSize: Number(componentSetting.table.defaultPageSize),
    total: 0,
  });
  const pageSizeOptions = componentSetting.table.pageSizeOptions.map((value) => ({
    label: value,
    value: Number(value),
  }));

  const normalizeSearchParams = (params: Recordable = {}) => {
    const nextParams: Recordable = { ...params };
    Object.keys(nextParams).forEach((key) => {
      const value = nextParams[key];
      if (value === '' || value === undefined || value === null || (Array.isArray(value) && value.length === 0)) {
        delete nextParams[key];
      }
    });
    return nextParams;
  };

  const handleSearchSubmit = async () => {
    const formValues = tableAction.getForm()?.getFieldsValue?.() || {};
    await tableAction.reload({
      searchInfo: normalizeSearchParams(formValues),
      page: 1,
    });
  };

  const searchForm: FormProps<FileInfo> = {
    baseColProps: { md: 12, lg: 8, xl: 6 },
    labelWidth: 90,
    showAdvancedButton: false,
    submitFunc: handleSearchSubmit,
    schemas: [
      {
        label: '文件名称:',
        field: 'fileName',
        component: 'Input',
        componentProps: {
          placeholder: '请输入文件名称',
        },
      },
      {
        label: '上传时间:',
        field: 'createDateTime',
        component: 'DatePicker',
        componentProps: {
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
          placeholder: '请选择上传时间',
        },
      },
    ],
  };

  const getText = (value: unknown, fallback = '-') => {
    const text = String(value ?? '').trim();
    return text ? text : fallback;
  };

  const getNumberText = (value: unknown) => {
    const num = Number(value ?? 0);
    return Number.isFinite(num) ? String(num) : '0';
  };

  const fileStatusLabelMap = Object.entries(FileStatusEnum).reduce(
    (acc, [key, label]) => {
      acc[key] = label;
      return acc;
    },
    {} as Record<string, string>,
  );

  const getGovernStatusLabel = (status?: string | null) => {
    const normalized = String(status || '').trim();
    if (!normalized) return '未治理';
    return fileStatusLabelMap[normalized] || normalized;
  };

  const getErrorMessage = (error: any, fallback = '操作失败') =>
    error?.response?.data?.message || error?.message || fallback;

  const tableColumns: BasicColumn<FileInfo>[] = [
    {
      title: '序号',
      key: 'sort',
      width: 76,
      align: 'center',
      customRender: ({ index }: { index: number }) => h('span', { class: 'table-cell-center' }, String(index + 1)),
    },
    {
      title: '文件名称',
      dataIndex: 'fileName',
      key: 'fileName',
      width: 240,
      align: 'center',
      ellipsis: true,
      customRender: ({ record }: { record: FileInfo }) =>
        h(
          'span',
          {
            class: 'file-name-text',
            title: getText(record.fileName || record.sheetName, '未命名文件'),
          },
          getText(record.fileName || record.sheetName, '未命名文件'),
        ),
    },
    {
      title: '导入成功',
      dataIndex: 'successNum',
      key: 'successNum',
      width: 120,
      align: 'center',
      customRender: ({ value }: { value?: string | number }) =>
        h('span', { class: 'table-cell-center' }, getNumberText(value)),
    },
    {
      title: '导入失败',
      dataIndex: 'failNum',
      key: 'failNum',
      width: 120,
      align: 'center',
      customRender: ({ record }: { record: FileInfo }) =>
        h(
          'a',
          {
            class: 'fail-link',
            onClick: (event: MouseEvent) => handleViewFailLog(event, record),
          },
          getNumberText(record.failNum),
        ),
    },
    {
      title: '治理状态',
      dataIndex: 'fileStatus',
      key: 'fileStatus',
      width: 120,
      align: 'center',
      customRender: ({ value }: { value?: string | null }) =>
        h('span', { class: 'govern-status-text' }, getGovernStatusLabel(value)),
    },
    {
      title: '上传时间',
      dataIndex: 'createDateTime',
      key: 'createDateTime',
      width: 180,
      align: 'center',
      customRender: ({ value }: { value?: string }) => h('span', { class: 'table-cell-center' }, getText(value)),
    },
  ];

  const actionColumn: BasicColumn<FileInfo> = {
    title: '操作',
    width: 196,
    actions: (record: FileInfo) => [
      {
        label: '重新清洗',
        title: '重新清洗',
        disabled: recleaningFileIds.value.includes(String(record.id ?? '').trim()),
        onClick: handleRecognizeImport.bind(this, record),
      },
      {
        label: '删除',
        title: '删除',
        color: 'error',
        popConfirm: {
          title: '是否确认删除文件',
          confirm: handleDelete.bind(this, record),
        },
      },
      {
        label: '打开',
        title: '打开',
        onClick: handleOpenFile.bind(this, record),
      },
    ],
  };

  const selectedRowKeysRef = ref<string[]>([]);
  const rowSelection = {
    type: 'checkbox',
    columnWidth: 48,
    onChange: (selectedRowKeys: string[]) => {
      selectedRowKeysRef.value = selectedRowKeys;
    },
  };
  const [registerTable, tableAction] = useTable<FileInfo>({
    api: importFileList,
    beforeFetch: (params) => {
      const nextParams = normalizeSearchParams(params);
      nextParams.ctrlPermi = ctrlPermi.value;
      return nextParams;
    },
    afterFetch: (items: FileInfo[]) => {
      currentPageFileCount.value = Array.isArray(items) ? items.length : 0;
      return items;
    },
    immediate: false,
    columns: tableColumns,
    actionColumn,
    formConfig: searchForm,
    showTableSetting: true,
    useSearchForm: true,
    showSearchForm: true,
    canResize: true,
    isCanResizeParent: true,
    resizeHeightOffset: 32,
    clickToRowSelect: false,
    rowKey: 'id',
    rowSelection,
    defaultRowSelection: rowSelection,
    pagination: { position: ['none'] },
  });
  const { clearSelectedRowKeys, reload, redoHeight } = tableAction;

  const handleFetchSuccess = ({ total }: { total?: number }) => {
    const tablePagination = tableAction.getPagination();
    if (typeof tablePagination === 'boolean') return;

    pagination.value.current = Number(tablePagination.current) || 1;
    pagination.value.pageSize = Number(tablePagination.pageSize || tablePagination.defaultPageSize) || 1;
    pagination.value.total = Number(total ?? tablePagination.total) || 0;
  };

  const handlePaginationChange = async (page: number, pageSize: number) => {
    if (paginationLoading.value || (page === pagination.value.current && pageSize === pagination.value.pageSize))
      return;

    const nextPage = pageSize === pagination.value.pageSize ? page : 1;
    paginationLoading.value = true;
    try {
      tableAction.setPagination({ current: nextPage, pageSize });
      await reload({ page: nextPage });
    } finally {
      paginationLoading.value = false;
    }
  };

  const syncTableLayout = () => {
    if (!props.active) return;
    requestAnimationFrame(() => {
      redoHeight();
    });
  };

  const handleImportListRefresh = () => {
    hasLoadedOnActivate.value = true;
    syncTableLayout();
    void reload();
  };

  watch(
    () => props.active,
    (active) => {
      if (!active) return;
      if (!hasLoadedOnActivate.value) {
        handleImportListRefresh();
        return;
      }
      syncTableLayout();
    },
    { flush: 'post' },
  );

  onMounted(() => {
    emitter.on(CASE_DATA_REFRESH_EVENT, handleImportListRefresh);
    emitter.on(CASE_IMPORT_FILE_REFRESH_EVENT, handleImportListRefresh);
  });

  onBeforeUnmount(() => {
    emitter.off(CASE_DATA_REFRESH_EVENT, handleImportListRefresh, true);
    emitter.off(CASE_IMPORT_FILE_REFRESH_EVENT, handleImportListRefresh, true);
  });

  async function handleDelete(record: Partial<FileInfo>) {
    const id = String(record.id ?? '').trim();
    if (!id) {
      createMessage.warning('未获取到文件ID，暂时无法删除');
      return;
    }
    try {
      await deletedFileList({ ids: [id] });
      await handleSuccess('文件删除成功');
    } catch (error: any) {
      createMessage.error(getErrorMessage(error, '文件删除失败'));
    }
  }

  async function handleRecognizeImport(record: Partial<FileInfo>) {
    const filePath = String(record.filePath ?? '').trim();
    const fileId = String(record.id ?? '').trim();
    if (!filePath) {
      createMessage.warning('未获取到文件路径，暂时无法重新清洗');
      return;
    }
    if (!fileId) {
      createMessage.warning('未获取到文件ID，暂时无法重新清洗');
      return;
    }
    if (recleaningFileIds.value.includes(fileId)) {
      return;
    }

    try {
      recleaningFileIds.value = [...recleaningFileIds.value, fileId];
      const response = await preFile({
        filePath: [filePath],
        isDir: false,
        reClean: 1,
      });
      const fileInfos = Array.isArray(response) ? response : ((response as any)?.data ?? []);
      if (!Array.isArray(fileInfos) || !fileInfos.length) {
        createMessage.warning(PRE_FILE_EMPTY_MESSAGE);
        return;
      }

      sessionStorage.setItem(FILE_INFO_STORAGE_KEY, JSON.stringify(fileInfos));
      sessionStorage.removeItem(IMPORT_FILE_INFO_STORAGE_KEY);
      sessionStorage.setItem(
        RECLEAN_CONTEXT_STORAGE_KEY,
        JSON.stringify({
          reClean: 1,
          fileId,
        }),
      );
      resetImportProgressSession();
      await go({
        path: PageEnum.BASE_CLEANING,
        query: {
          focusKey: fileId,
        },
      });
    } catch (error: any) {
      createMessage.error(getErrorMessage(error, '进入重新清洗失败'));
    } finally {
      recleaningFileIds.value = recleaningFileIds.value.filter((id) => id !== fileId);
    }
  }

  async function handleOpenFile(record: Partial<FileInfo>) {
    const filePath = String(record.filePath ?? '').trim();
    if (!filePath) {
      createMessage.warning('未获取到文件路径，暂时无法打开文件');
      return;
    }

    try {
      const response = await openLocalFileApi(filePath);
      const result = String((response as any)?.result ?? '').toLowerCase();
      const code = String((response as any)?.code ?? '').toLowerCase();
      const success = result === 'true' || result === 'success' || code === '200' || code === '0';

      if (!success) {
        createMessage.warning((response as any)?.message || '打开文件失败');
      }
    } catch (error: any) {
      createMessage.error(getErrorMessage(error, '打开文件失败'));
    }
  }

  function handleViewFailLog(event: MouseEvent, record: Partial<FileInfo>) {
    event.preventDefault();
    event.stopPropagation();
    const failCount = Number(record.failNum ?? 0);
    if (!Number.isFinite(failCount) || failCount <= 0) {
      createMessage.info('当前文件暂无失败记录');
      return;
    }
    const logFileInfo = { ...(record as FileInfo), pid: '0', children: [] as FileInfo[] };
    delete (logFileInfo as Recordable).batchId;
    currentLogFileInfos.value = [logFileInfo];
    logModalOpen.value = true;
  }

  async function handleDeleteSelected() {
    if (!selectedRowKeysRef.value.length) {
      createMessage.warning('请先选择需要删除的文件');
      return;
    }
    try {
      const ids = selectedRowKeysRef.value.map((item) => String(item)).filter(Boolean);
      await deletedFileList({ ids });
      await handleSuccess(`已删除 ${ids.length} 条导入记录`);
    } catch (error: any) {
      createMessage.error(getErrorMessage(error, '批量删除失败'));
    }
  }

  async function handleSuccess(message?: string) {
    selectedRowKeysRef.value = [];
    clearSelectedRowKeys();
    if (message) {
      createMessage.success(message);
    }
    await reload();
  }
</script>

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

  .@{prefix-cls}.case-import-list {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;

    .import-list-table .jeesite-basic-table-header__title {
      display: none;
    }

    .import-list-table .jeesite-basic-table-header__toolbar {
      width: 100%;
      justify-content: space-between;
      margin-top: -2px;
      margin-bottom: 8px;

      > * {
        margin-right: 0;
      }
    }

    .import-list-table .jeesite-basic-table-header__toolbar > .ant-btn {
      display: none;
    }

    .table-toolbar {
      display: flex;
      align-items: center;
      flex: 1 1 auto;
      gap: 10px;
      min-width: 0;
      flex-wrap: wrap;
    }

    .table-title-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .table-meta-chip {
      display: inline-flex;
      align-items: center;
      height: 24px;
      padding: 0 10px;
      border-radius: 999px;
      background: #f3f6fb;
      color: #475569;
      font-size: 12px;
      line-height: 24px;

      &.is-selected {
        background: #eef4ff;
        color: #315efb;
      }
    }

    .batch-delete-btn {
      height: 34px;
      padding: 0 14px;
      border-radius: 8px;
    }

    .import-list-table,
    .import-list-table.jeesite-basic-table {
      flex: 1 1 auto;
      min-height: 0;
      height: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;

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

    .import-list-table .ant-table-wrapper {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      padding: 0 6px 14px !important;
      box-sizing: border-box;
    }

    .import-list-table .ant-spin-nested-loading,
    .import-list-table .ant-spin-container,
    .import-list-table .ant-table,
    .import-list-table .ant-table-container {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .import-list-table .ant-table-body,
    .import-list-table .ant-table-content {
      flex: 1 1 auto;
      min-height: 0;
    }

    .table-cell-center,
    .file-name-text,
    .govern-status-text {
      display: inline-block;
      max-width: 100%;
      color: #374151;
      font-size: 12px;
      line-height: 1.5;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: middle;
    }

    .fail-link {
      color: #315efb;
      font-size: 12px;
      line-height: 1.5;
      text-decoration: underline;

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

    .ant-form {
      padding: 12px 16px 0;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      background: #fafafa;
      margin-bottom: 12px;

      .ant-form-item {
        margin-bottom: 12px;
      }

      .ant-input,
      .ant-picker,
      .ant-input-affix-wrapper {
        border-radius: 8px;
      }
    }

    .ant-table-wrapper {
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    }

    .ant-table-container {
      border-radius: 12px;
      overflow: hidden;
    }

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

    .ant-table-tbody > tr > td {
      padding-top: 10px;
      padding-bottom: 10px;
      color: #4b5563;
      border-bottom-color: #eef2f7;
      text-align: center;
    }

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

    .jeesite-basic-table-action {
      justify-content: center;
      gap: 10px;
      flex-wrap: nowrap;

      .ant-btn-link,
      .ant-btn-link.ant-btn-sm {
        height: auto;
        padding: 0;
        color: #374151;
        font-size: 12px;
        line-height: 1.5;

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

      .ant-btn-link.ant-btn-error,
      .ant-btn-link.ant-btn-error.ant-btn-sm {
        color: @error-color;

        &:hover,
        &:focus {
          color: lighten(@error-color, 10%);
        }

        &:active {
          color: darken(@error-color, 10%);
        }
      }
    }

    .pagination-bar {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex: 0 0 auto;
      min-height: 40px;
      padding: 0 6px 6px;
      overflow: hidden;
      box-sizing: border-box;
    }
  }
</style>