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

package/src/components/Business/ImportExport/ExportButton/TemplatePicker.tsx

@@ -0,0 +1,424 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Alert,
+  Button,
+  Descriptions,
+  Empty,
+  Form,
+  Modal,
+  Radio,
+  Select,
+  Space,
+  Spin,
+  Tag,
+  message,
+} from 'antd';
+import {
+  DownloadOutlined,
+  FileExcelOutlined,
+  FilterOutlined,
+} from '@ant-design/icons';
+import { getItems } from '../services/importExport';
+import type {
+  ImportExportRequestContext,
+  ImportExportServices,
+  ImportExportTemplate,
+  ImportExportTemplateField,
+} from '../types';
+import ModalTitle from './ModalTitle';
+import styles from './index.module.less';
+
+interface TemplatePickerProps {
+  visible: boolean;
+  context: ImportExportRequestContext;
+  services: ImportExportServices;
+  onCancel: () => void;
+  onConfirm: (templateCode: string, fileType: string) => Promise<void>;
+  documentName?: string;
+  resultCount?: number;
+}
+
+const TemplatePicker: React.FC<TemplatePickerProps> = ({
+  visible,
+  context,
+  services,
+  onCancel,
+  onConfirm,
+  documentName,
+  resultCount,
+}) => {
+  const [items, setItems] = useState<ImportExportTemplate[]>([]);
+  const [fields, setFields] = useState<ImportExportTemplateField[]>([]);
+  const [templateCode, setTemplateCode] = useState<string>();
+  const [loading, setLoading] = useState(false);
+  const [fieldLoading, setFieldLoading] = useState(false);
+  const [confirming, setConfirming] = useState(false);
+  const [downloading, setDownloading] = useState(false);
+  const [fileType, setFileType] = useState('XLSX');
+  const searchTimer = useRef<number>();
+
+  const loadTemplates = useCallback(
+    async (keyword?: string) => {
+      setLoading(true);
+      try {
+        const response = await services.queryTemplates({
+          operationType: context.operationType,
+          businessFunctionCode: context.businessFunctionCode,
+          keyword,
+          enabled: true,
+          currentPage: 1,
+          pageSize: 100,
+        });
+        const loaded = getItems<ImportExportTemplate>(response);
+        setItems(loaded);
+        if (!keyword) {
+          const defaultTemplate = loaded.find(
+            (template) => template.defaultFlag && template.enabled !== false,
+          );
+          if (!defaultTemplate) {
+            message.error('当前业务功能未配置启用的默认导出模板');
+          } else {
+            setTemplateCode(defaultTemplate.templateCode);
+          }
+        }
+      } catch (error) {
+        message.error('导出模板加载失败，请稍后重试');
+      } finally {
+        setLoading(false);
+      }
+    },
+    [context.businessFunctionCode, context.operationType, services],
+  );
+
+  useEffect(() => {
+    if (!visible) return;
+    setTemplateCode(undefined);
+    setFields([]);
+    setFileType('XLSX');
+    loadTemplates();
+  }, [visible, loadTemplates]);
+
+  useEffect(
+    () => () => {
+      if (searchTimer.current) {
+        window.clearTimeout(searchTimer.current);
+      }
+    },
+    [],
+  );
+
+  const selectedTemplate = useMemo(
+    () => items.find((item) => item.templateCode === templateCode),
+    [items, templateCode],
+  );
+  const personalTemplates = items.filter(
+    (item) => item.visibility === 'PERSONAL',
+  );
+  const publicTemplates = items.filter(
+    (item) => item.visibility !== 'PERSONAL',
+  );
+  const previewFieldNames =
+    fields.length > 0
+      ? fields.map((field) => field.displayName || field.fieldCode)
+      : selectedTemplate?.fieldNames || [];
+  const previewFieldCount =
+    fields.length || selectedTemplate?.fieldCount || previewFieldNames.length;
+
+  const searchTemplates = (keyword: string) => {
+    if (searchTimer.current) {
+      window.clearTimeout(searchTimer.current);
+    }
+    searchTimer.current = window.setTimeout(
+      () => loadTemplates(keyword.trim() || undefined),
+      300,
+    );
+  };
+
+  useEffect(() => {
+    if (!selectedTemplate) {
+      setFields([]);
+      return;
+    }
+    setFieldLoading(true);
+    services
+      .queryTemplateFields({
+        templateCode: selectedTemplate.templateCode,
+        metadataEntityCode: selectedTemplate.metadataEntityCode,
+        onlyUnmapped: false,
+        currentPage: 1,
+        pageSize: 500,
+      })
+      .then((response) => {
+        setFields(
+          getItems<ImportExportTemplateField>(response).filter(
+            (field) => field.mapped,
+          ),
+        );
+      })
+      .catch(() => {
+        setFields([]);
+        message.error('模板字段预览加载失败，请稍后重试');
+      })
+      .finally(() => setFieldLoading(false));
+  }, [selectedTemplate, services]);
+
+  const confirm = async () => {
+    if (!templateCode) return;
+    if (resultCount === 0) {
+      message.warning('当前查询结果为空，不创建导出任务');
+      return;
+    }
+    setConfirming(true);
+    try {
+      await onConfirm(templateCode, fileType);
+    } finally {
+      setConfirming(false);
+    }
+  };
+
+  const downloadTemplate = async () => {
+    if (!templateCode) {
+      message.warning('请先选择模板');
+      return;
+    }
+    setDownloading(true);
+    try {
+      const file = await services.downloadTemplate(templateCode, context);
+      const url = URL.createObjectURL(
+        file instanceof Blob ? file : new Blob([file]),
+      );
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `${selectedTemplate?.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={760}
+      title={
+        <ModalTitle
+          icon={<FileExcelOutlined />}
+          title={`${documentName || '业务单据'}按模板导出`}
+          description="按已配置的字段模板生成当前筛选结果"
+        />
+      }
+      visible={visible}
+      onCancel={onCancel}
+      onOk={confirm}
+      confirmLoading={confirming}
+      okButtonProps={{ disabled: !templateCode || resultCount === 0 }}
+      okText="创建导出任务"
+      cancelText="取消"
+      wrapClassName={styles.exportModal}
+      destroyOnClose
+    >
+      <div className={styles.dialogBody}>
+        <Form layout="vertical" className={styles.templateForm}>
+          <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>
+            <Form.Item
+              label="导出模板"
+              required
+              className={styles.templateSelectItem}
+            >
+              <Spin spinning={loading}>
+                <Select
+                  size="large"
+                  showSearch
+                  allowClear
+                  filterOption={false}
+                  onSearch={searchTemplates}
+                  onClear={() => loadTemplates()}
+                  placeholder="输入模板名称实时查询"
+                  value={templateCode}
+                  onChange={setTemplateCode}
+                  style={{ width: '100%' }}
+                  notFoundContent={
+                    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+                  }
+                >
+                  {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>
+              </Spin>
+            </Form.Item>
+
+            {selectedTemplate && (
+              <div className={styles.templatePreview}>
+                <div className={styles.templatePreviewHeader}>
+                  <span className={styles.sectionTitle}>
+                    模板信息与字段预览
+                  </span>
+                  <Button
+                    className={styles.downloadTemplateButton}
+                    type="link"
+                    icon={<DownloadOutlined />}
+                    loading={downloading}
+                    onClick={downloadTemplate}
+                  >
+                    下载空白模板
+                  </Button>
+                </div>
+                <Descriptions
+                  bordered
+                  size="small"
+                  column={{ xs: 1, sm: 3 }}
+                  className={styles.templateSummary}
+                >
+                  <Descriptions.Item label="模板名称">
+                    {selectedTemplate.templateName}
+                  </Descriptions.Item>
+                  <Descriptions.Item label="模板类型">
+                    {selectedTemplate.visibility === 'PERSONAL'
+                      ? '个人模板'
+                      : '公共模板'}
+                  </Descriptions.Item>
+                  <Descriptions.Item label="业务功能">
+                    {documentName ||
+                      selectedTemplate.businessFunctionCode ||
+                      '-'}
+                  </Descriptions.Item>
+                </Descriptions>
+                <div className={styles.fieldPreview}>
+                  <div className={styles.fieldPreviewHeader}>
+                    <span className={styles.fieldPreviewLabel}>字段预览</span>
+                    <span className={styles.fieldCount}>
+                      {previewFieldCount} 个字段
+                    </span>
+                  </div>
+                  <div className={styles.fieldTags}>
+                    <Spin spinning={fieldLoading}>
+                      <Space size={[4, 0]} wrap>
+                        {previewFieldNames.map((name) => (
+                          <Tag className={styles.fieldTag} key={name}>
+                            {name}
+                          </Tag>
+                        ))}
+                        {!fieldLoading && previewFieldNames.length === 0 && (
+                          <span className={styles.emptyFields}>
+                            暂无已映射字段
+                          </span>
+                        )}
+                      </Space>
+                    </Spin>
+                  </div>
+                </div>
+              </div>
+            )}
+          </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.scopeCard}>
+              <span className={styles.scopeIcon}>
+                <FilterOutlined />
+              </span>
+              <span className={styles.scopeContent}>
+                <span className={styles.scopeTitle}>当前筛选结果</span>
+                <span className={styles.scopeDescription}>
+                  系统将按列表当前查询条件和所选模板字段导出
+                </span>
+              </span>
+              <span className={styles.resultCount}>
+                {resultCount == null ? '以查询结果为准' : `${resultCount} 条`}
+              </span>
+            </div>
+            <Form.Item
+              label="文件格式"
+              style={{ marginTop: 16, marginBottom: 0 }}
+            >
+              <Radio.Group
+                className={styles.fileTypeGrid}
+                value={fileType}
+                onChange={(event) => setFileType(event.target.value)}
+              >
+                <Radio className={styles.fileTypeOption} value="XLSX">
+                  <span className={styles.fileTypeContent}>
+                    <span className={styles.fileTypeName}>XLSX</span>
+                    <span className={styles.fileTypeDescription}>
+                      保留表格格式，适合查看与编辑
+                    </span>
+                  </span>
+                </Radio>
+                <Radio className={styles.fileTypeOption} value="CSV">
+                  <span className={styles.fileTypeContent}>
+                    <span className={styles.fileTypeName}>CSV</span>
+                    <span className={styles.fileTypeDescription}>
+                      文件更轻量，适合系统间交换
+                    </span>
+                  </span>
+                </Radio>
+              </Radio.Group>
+            </Form.Item>
+            <Alert
+              className={styles.exportAlert}
+              type={resultCount === 0 ? 'warning' : 'info'}
+              showIcon
+              message={
+                resultCount === 0
+                  ? '当前查询结果为空，暂时无法创建导出任务。'
+                  : '创建后可在任务中心查看处理进度并下载导出文件。'
+              }
+            />
+          </section>
+        </Form>
+      </div>
+    </Modal>
+  );
+};
+
+export default TemplatePicker;