@bit-sun/business-component 4.2.0-alpha.3 → 4.2.0-alpha.31

package/src/components/Business/ImportExport/ImportWizard/index.tsx

@@ -0,0 +1,679 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  Alert,
+  Button,
+  Descriptions,
+  Form,
+  Modal,
+  Progress,
+  Radio,
+  Select,
+  Space,
+  Steps,
+  Tooltip,
+  Upload,
+  message,
+} from 'antd';
+import {
+  DownloadOutlined,
+  FileExcelOutlined,
+  InboxOutlined,
+  QuestionCircleOutlined,
+  UploadOutlined,
+} from '@ant-design/icons';
+import {
+  getItems,
+  isConcurrentLimit,
+  normalizeTask,
+  unwrapResponse,
+} from '../services/importExport';
+import type {
+  FileTask,
+  ImportExportRequestContext,
+  ImportExportServices,
+  ImportExportTemplate,
+} from '../types';
+import Preview from './Preview';
+import styles from './index.module.less';
+
+const POLL_INTERVAL_MS = 1000;
+const MAX_FILE_SIZE = 10 * 1024 * 1024;
+const PREFERENCE_KEY = 'import-export:last-import-preference';
+const SUPPORTED_ERROR_HANDLING_MODE = 'PARTIAL_SUCCESS';
+const PREVIEW_EXPIRED_MESSAGE = '校验结果已过期，请重新上传并校验';
+const PREVIEW_CONSUMED_MESSAGE = '校验结果已执行或正在执行，请勿重复提交';
+const wait = () =>
+  new Promise((resolve) => setTimeout(resolve, POLL_INTERVAL_MS));
+
+const operationErrorMessages = (error: any) =>
+  [
+    error?.message,
+    error?.msg,
+    error?.data?.message,
+    error?.data?.msg,
+    error?.response?.data?.message,
+    error?.response?.data?.msg,
+  ]
+    .filter(Boolean)
+    .map(String);
+
+const isPreviewExpiredError = (error: any) =>
+  operationErrorMessages(error).some((text) =>
+    text.includes(PREVIEW_EXPIRED_MESSAGE),
+  );
+
+const isPreviewConsumedError = (error: any) =>
+  operationErrorMessages(error).some(
+    (text) =>
+      text.includes('已执行或正在执行') || text.includes('请勿重复提交'),
+  );
+
+export interface ImportWizardProps {
+  visible: boolean;
+  context: ImportExportRequestContext;
+  documentName?: string;
+  services: ImportExportServices;
+  onClose: () => void;
+  onTaskCreated?: (task: FileTask) => void;
+}
+
+/**
+ * 完成模板选择、文件上传、数据校验和正式导入的两步向导。
+ */
+const ImportWizard: React.FC<ImportWizardProps> = ({
+  visible,
+  context,
+  documentName,
+  services,
+  onClose,
+  onTaskCreated,
+}) => {
+  const [form] = Form.useForm();
+  const [step, setStep] = useState(0);
+  const [parsing, setParsing] = useState(false);
+  const [preview, setPreview] = useState<any>();
+  const [executing, setExecuting] = useState(false);
+  const [templates, setTemplates] = useState<ImportExportTemplate[]>([]);
+  const [downloading, setDownloading] = useState(false);
+  const [downloadingErrorFile, setDownloadingErrorFile] = useState(false);
+  const [selectedTemplateCode, setSelectedTemplateCode] = useState<string>();
+  const [selectedFile, setSelectedFile] = useState<any>();
+  const [fileName, setFileName] = useState('');
+
+  useEffect(() => {
+    if (!visible) return;
+    setStep(0);
+    setPreview(undefined);
+    setSelectedTemplateCode(undefined);
+    setSelectedFile(undefined);
+    setFileName('');
+    setExecuting(false);
+    setDownloadingErrorFile(false);
+    let preference: Record<string, string> = {};
+    try {
+      preference = JSON.parse(localStorage.getItem(PREFERENCE_KEY) || '{}');
+    } catch (error) {
+      preference = {};
+    }
+    form.setFieldsValue({
+      strategy: preference.strategy || 'UPSERT',
+      errorHandlingMode: SUPPORTED_ERROR_HANDLING_MODE,
+    });
+    services
+      .queryTemplates({
+        operationType: 'IMPORT',
+        businessFunctionCode: context.businessFunctionCode,
+        enabled: true,
+        currentPage: 1,
+        pageSize: 100,
+      })
+      .then((response) => {
+        const loaded = getItems<ImportExportTemplate>(response);
+        setTemplates(loaded);
+        const defaultTemplate = loaded.find(
+          (template) => template.defaultFlag && template.enabled !== false,
+        );
+        if (!defaultTemplate) {
+          message.error('当前业务功能未配置启用的默认导入模板');
+          return;
+        }
+        setSelectedTemplateCode(defaultTemplate.templateCode);
+        form.setFieldsValue({ templateCode: defaultTemplate.templateCode });
+      })
+      .catch(() => message.error('导入模板加载失败，请稍后重试'));
+  }, [visible, context.businessFunctionCode, form, services]);
+
+  const expirePreview = useCallback(() => {
+    setPreview(undefined);
+    setStep(0);
+    setSelectedFile(undefined);
+    setFileName('');
+    setExecuting(false);
+    setDownloadingErrorFile(false);
+    message.warning(PREVIEW_EXPIRED_MESSAGE);
+  }, []);
+
+  useEffect(() => {
+    if (!visible || step !== 1) return undefined;
+    const expiresAt = Number(preview?.expiresAt);
+    if (!Number.isFinite(expiresAt) || expiresAt <= 0) return undefined;
+    const remaining = expiresAt - Date.now();
+    if (remaining <= 0) {
+      expirePreview();
+      return undefined;
+    }
+    const timer = window.setTimeout(expirePreview, remaining);
+    return () => window.clearTimeout(timer);
+  }, [visible, step, preview?.expiresAt, expirePreview]);
+
+  const waitForPreviewTask = async (taskId: string, previewResult: any) => {
+    while (true) {
+      const task = normalizeTask(
+        unwrapResponse<any>(
+          await services.queryTask(context.serviceContext, taskId),
+        ),
+      );
+      if (!task.taskStatus) {
+        throw new Error(task?.msg || 'preview task status is missing');
+      }
+      const merged = {
+        ...previewResult,
+        ...(task.result || {}),
+        ...task,
+        taskId,
+        serviceContext: context.serviceContext,
+      };
+      setPreview(merged);
+      onTaskCreated?.(task);
+      if (task.stage === 'PREVIEW_COMPLETED') {
+        if (
+          [
+            'PASSED',
+            'COMPLETED_WITH_ERRORS',
+            'SUCCESS',
+            'PARTIAL_SUCCESS',
+          ].includes(task.taskStatus)
+        ) {
+          return merged;
+        }
+      }
+      if (task.taskStatus === 'FAILED' || task.taskStatus === 'CANCELLED') {
+        throw new Error(task.errorMessage || 'preview task failed');
+      }
+      await wait();
+    }
+  };
+
+  const selectFile = (file: any) => {
+    const extension = String(file?.name || '')
+      .split('.')
+      .pop()
+      ?.toLowerCase();
+    if (!['xlsx', 'xls', 'csv'].includes(extension || '')) {
+      message.warning('仅支持 .xlsx、.xls、.csv 文件');
+      setSelectedFile(undefined);
+      return false;
+    }
+    if (Number(file?.size || 0) > MAX_FILE_SIZE) {
+      message.warning('文件不能超过 10MB');
+      setSelectedFile(undefined);
+      return false;
+    }
+    setSelectedFile(file);
+    setFileName(file?.name || '');
+    setPreview(undefined);
+    return false;
+  };
+
+  const parse = async () => {
+    if (!selectedFile) {
+      message.warning('请先选择导入文件');
+      return;
+    }
+    setParsing(true);
+    try {
+      const values = await form.validateFields([
+        'templateCode',
+        'strategy',
+        'errorHandlingMode',
+      ]);
+      localStorage.setItem(
+        PREFERENCE_KEY,
+        JSON.stringify({
+          strategy: values.strategy,
+          errorHandlingMode: SUPPORTED_ERROR_HANDLING_MODE,
+        }),
+      );
+      const uploaded = unwrapResponse<any>(
+        await services.uploadFile(selectedFile),
+      );
+      const objectKey = uploaded?.objectKey || uploaded?.name || uploaded?.url;
+      if (!objectKey) {
+        throw new Error('uploaded objectKey is missing');
+      }
+      const response = await services.previewImport(context.serviceContext, {
+        businessFunctionCode: context.businessFunctionCode,
+        templateCode: values.templateCode,
+        importStrategy: values.strategy,
+        errorHandlingMode: SUPPORTED_ERROR_HANDLING_MODE,
+        objectKey,
+        sourceFileName: selectedFile.name,
+      });
+      if (isConcurrentLimit(response)) {
+        message.warning('当前导入导出任务较多，请稍后重试');
+        return false;
+      }
+      const created = unwrapResponse<any>(response);
+      if (!created?.taskId) {
+        throw new Error(created?.msg || 'preview taskId is missing');
+      }
+      setPreview(created);
+      onTaskCreated?.(
+        normalizeTask({
+          taskType: 'IMPORT_VALIDATION',
+          taskStatus: 'PENDING',
+          ...created,
+          serviceContext: context.serviceContext,
+        }),
+      );
+      const completed = await waitForPreviewTask(created.taskId, created);
+      setPreview(completed);
+      setStep(1);
+    } catch (error) {
+      if (isConcurrentLimit(error)) {
+        message.warning('当前导入导出任务较多，请稍后重试');
+        return false;
+      }
+      message.error('文件解析失败，请稍后重试');
+    } finally {
+      setParsing(false);
+    }
+    return false;
+  };
+
+  const selectedTemplate = templates.find(
+    (item) => item.templateCode === selectedTemplateCode,
+  );
+  const personalTemplates = templates.filter(
+    (item) => item.visibility === 'PERSONAL',
+  );
+  const publicTemplates = templates.filter(
+    (item) => item.visibility !== 'PERSONAL',
+  );
+  const selectedTemplateFieldCount =
+    selectedTemplate?.fieldCount ?? selectedTemplate?.fieldNames?.length;
+
+  const execute = async () => {
+    const expiresAt = Number(preview?.expiresAt);
+    if (Number.isFinite(expiresAt) && expiresAt <= Date.now()) {
+      expirePreview();
+      return;
+    }
+    if (preview?.canExecute !== true) {
+      message.warning('当前校验结果没有可执行的合格业务单据');
+      return;
+    }
+    let submitted = false;
+    setExecuting(true);
+    try {
+      const previewId = preview?.previewId || preview?.result?.previewId;
+      if (!previewId) {
+        throw new Error('previewId is missing');
+      }
+      submitted = true;
+      const res: any = await services.executeImport(context.serviceContext, {
+        previewId,
+      });
+      if (isConcurrentLimit(res)) {
+        message.warning('当前导入导出任务较多，请稍后重试');
+        return;
+      }
+      onTaskCreated?.(
+        normalizeTask({
+          taskType: 'IMPORT_EXECUTION',
+          taskStatus: 'PENDING',
+          ...unwrapResponse<any>(res),
+          serviceContext: context.serviceContext,
+        }),
+      );
+      message.success('已创建导入任务');
+      onClose();
+    } catch (error) {
+      if (isConcurrentLimit(error)) {
+        message.warning('当前导入导出任务较多，请稍后重试');
+        return;
+      }
+      if (isPreviewExpiredError(error)) {
+        expirePreview();
+        return;
+      }
+      if (isPreviewConsumedError(error)) {
+        setPreview((current: any) =>
+          current ? { ...current, canExecute: false } : current,
+        );
+        message.error(PREVIEW_CONSUMED_MESSAGE);
+        return;
+      }
+      if (submitted) {
+        setPreview((current: any) =>
+          current ? { ...current, canExecute: false } : current,
+        );
+        message.error('执行结果待核对，请勿重复提交，请在任务中心核对业务数据');
+        return;
+      }
+      message.error('执行导入失败，请重新上传并校验');
+    } finally {
+      setExecuting(false);
+    }
+  };
+
+  const downloadValidationErrorFile = async () => {
+    const expiresAt = Number(preview?.expiresAt);
+    if (Number.isFinite(expiresAt) && expiresAt <= Date.now()) {
+      expirePreview();
+      return;
+    }
+    if (preview?.errorFileAvailable !== true) {
+      message.warning('当前校验结果没有可下载的错误文件');
+      return;
+    }
+    setDownloadingErrorFile(true);
+    try {
+      const previewId = preview?.previewId || preview?.result?.previewId;
+      if (!previewId) {
+        throw new Error('previewId is missing');
+      }
+      const response = await services.downloadValidationErrorFile(
+        context.serviceContext,
+        { previewId },
+      );
+      const result = unwrapResponse<any>(response);
+      if (!result?.fileUrl) {
+        throw new Error('validation error fileUrl is missing');
+      }
+      const link = document.createElement('a');
+      link.href = result.fileUrl;
+      link.download = `${fileName || '导入文件'}-错误数据.xlsx`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      message.success('错误文件下载已开始');
+    } catch (error) {
+      if (isPreviewExpiredError(error)) {
+        expirePreview();
+        return;
+      }
+      message.error('错误文件下载失败，请稍后重试');
+    } finally {
+      setDownloadingErrorFile(false);
+    }
+  };
+
+  const downloadSelectedTemplate = async () => {
+    const templateCode = form.getFieldValue('templateCode');
+    if (!templateCode) {
+      message.warning('请先选择模板');
+      return;
+    }
+    setDownloading(true);
+    try {
+      const file = await services.downloadTemplate(templateCode, context);
+      const selected = templates.find(
+        (item) => item.templateCode === templateCode,
+      );
+      const url = URL.createObjectURL(
+        file instanceof Blob ? file : new Blob([file]),
+      );
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `${selected?.templateName || templateCode}.xlsx`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+      message.success('模板下载成功');
+    } catch (error) {
+      message.error('模板下载失败，请稍后重试');
+    } finally {
+      setDownloading(false);
+    }
+  };
+
+  return (
+    <Modal
+      width={920}
+      title={
+        <div className={styles.modalTitle}>
+          <span className={styles.modalTitleIcon}>
+            <FileExcelOutlined />
+          </span>
+          <span>
+            <span className={styles.modalTitleText}>
+              {documentName || '业务单据'}导入
+            </span>
+            <span className={styles.modalTitleDescription}>
+              下载模板、填写数据并上传校验
+            </span>
+          </span>
+        </div>
+      }
+      visible={visible}
+      footer={
+        step === 0
+          ? [
+              <Button key="cancel" onClick={onClose}>
+                取消
+              </Button>,
+              <Button
+                key="parse"
+                type="primary"
+                icon={<UploadOutlined />}
+                loading={parsing}
+                disabled={!selectedTemplateCode || !selectedFile}
+                onClick={parse}
+              >
+                上传并解析
+              </Button>,
+            ]
+          : null
+      }
+      onCancel={onClose}
+      wrapClassName={styles.importModal}
+      destroyOnClose
+    >
+      <div className={styles.stepsPanel}>
+        <Steps current={step} size="small">
+          <Steps.Step title="配置并上传" />
+          <Steps.Step title="校验并导入" />
+        </Steps>
+      </div>
+      {step === 0 && (
+        <Form form={form} layout="vertical" className={styles.form}>
+          <section className={styles.section}>
+            <div className={styles.sectionHeader}>
+              <span className={styles.sectionIndex}>1</span>
+              <span>
+                <span className={styles.sectionTitle}>选择导入模板</span>
+                <span className={styles.sectionDescription}>
+                  请先下载并使用当前模板整理数据
+                </span>
+              </span>
+            </div>
+            <div className={styles.templateRow}>
+              <Form.Item
+                label="导入模板"
+                name="templateCode"
+                className={styles.templateField}
+                rules={[{ required: true, message: '请选择导入模板' }]}
+              >
+                <Select
+                  showSearch
+                  optionFilterProp="children"
+                  placeholder="请选择导入模板"
+                  onChange={setSelectedTemplateCode}
+                >
+                  {personalTemplates.length > 0 && (
+                    <Select.OptGroup label="个人模板">
+                      {personalTemplates.map((item) => (
+                        <Select.Option
+                          key={item.templateCode}
+                          value={item.templateCode}
+                        >
+                          {item.templateName}
+                        </Select.Option>
+                      ))}
+                    </Select.OptGroup>
+                  )}
+                  {publicTemplates.length > 0 && (
+                    <Select.OptGroup label="公共模板">
+                      {publicTemplates.map((item) => (
+                        <Select.Option
+                          key={item.templateCode}
+                          value={item.templateCode}
+                        >
+                          {item.templateName}
+                        </Select.Option>
+                      ))}
+                    </Select.OptGroup>
+                  )}
+                </Select>
+              </Form.Item>
+              <Button
+                className={styles.downloadButton}
+                icon={<DownloadOutlined />}
+                loading={downloading}
+                onClick={downloadSelectedTemplate}
+              >
+                下载模板
+              </Button>
+            </div>
+            {selectedTemplate && (
+              <Descriptions
+                bordered
+                size="small"
+                column={{ xs: 1, sm: 3 }}
+                className={styles.templateSummary}
+              >
+                <Descriptions.Item label="模板名称">
+                  {selectedTemplate.templateName}
+                </Descriptions.Item>
+                <Descriptions.Item label="业务单据">
+                  {documentName || selectedTemplate.businessFunctionCode || '-'}
+                </Descriptions.Item>
+                <Descriptions.Item label="字段映射">
+                  {selectedTemplateFieldCount == null
+                    ? '以模板配置为准'
+                    : `${selectedTemplateFieldCount} 个字段`}
+                </Descriptions.Item>
+              </Descriptions>
+            )}
+          </section>
+
+          <section className={styles.section}>
+            <div className={styles.sectionHeader}>
+              <span className={styles.sectionIndex}>2</span>
+              <span>
+                <span className={styles.sectionTitle}>设置导入规则</span>
+                <span className={styles.sectionDescription}>
+                  选择数据写入方式与异常处理方式
+                </span>
+              </span>
+            </div>
+            <div className={styles.settingGrid}>
+              <Form.Item
+                className={styles.settingItem}
+                label={
+                  <Space>
+                    导入策略
+                    <Tooltip title="仅新增：已有数据报错；仅更新：不存在的数据报错；更新并新增：已有数据更新，不存在的数据新增。">
+                      <QuestionCircleOutlined />
+                    </Tooltip>
+                  </Space>
+                }
+                name="strategy"
+              >
+                <Radio.Group className={styles.radioGroup}>
+                  <Radio value="CREATE_ONLY">仅新增</Radio>
+                  <Radio value="UPDATE_ONLY">仅更新</Radio>
+                  <Radio value="UPSERT">更新并新增</Radio>
+                </Radio.Group>
+              </Form.Item>
+              <Form.Item
+                className={styles.settingItem}
+                label="错误处理"
+                name="errorHandlingMode"
+              >
+                <Radio.Group className={styles.radioGroup}>
+                  <Radio value="ALL_ROLLBACK" disabled>
+                    全部回滚
+                  </Radio>
+                  <Radio value="PARTIAL_SUCCESS">
+                    部分成功（允许部分失败）
+                  </Radio>
+                </Radio.Group>
+              </Form.Item>
+            </div>
+          </section>
+
+          <section className={`${styles.section} ${styles.uploadSection}`}>
+            <div className={styles.sectionHeader}>
+              <span className={styles.sectionIndex}>3</span>
+              <span>
+                <span className={styles.sectionTitle}>上传数据文件</span>
+                <span className={styles.sectionDescription}>
+                  上传后系统将先校验数据，不会直接写入业务单据
+                </span>
+              </span>
+            </div>
+            <Upload.Dragger
+              className={styles.uploadDragger}
+              beforeUpload={selectFile}
+              fileList={selectedFile ? [selectedFile] : []}
+              onRemove={() => {
+                setSelectedFile(undefined);
+                setFileName('');
+                setPreview(undefined);
+              }}
+              multiple={false}
+              accept=".xls,.xlsx,.csv"
+            >
+              <p className="ant-upload-drag-icon">
+                <InboxOutlined />
+              </p>
+              <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
+              <p className="ant-upload-hint">
+                支持 XLSX、XLS、CSV，单个文件不超过 10 MB
+              </p>
+            </Upload.Dragger>
+            <Alert
+              className={styles.uploadAlert}
+              type="info"
+              showIcon
+              message="行数上限由系统配置决定，默认最多 100,000 行；系统繁忙时文件不会进入解析。"
+            />
+            {parsing && (
+              <div className={styles.progressPanel}>
+                <div className={styles.progressTitle}>
+                  {fileName} · {preview?.stageName || '文件解析中'}
+                </div>
+                <Progress percent={preview?.progress || 0} size="small" />
+              </div>
+            )}
+          </section>
+        </Form>
+      )}
+      {step === 1 && (
+        <Preview
+          preview={preview}
+          executing={executing}
+          downloadingErrorFile={downloadingErrorFile}
+          onBack={() => setStep(0)}
+          onExecute={execute}
+          onDownloadErrorFile={downloadValidationErrorFile}
+        />
+      )}
+    </Modal>
+  );
+};
+
+export default ImportWizard;