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

package/src/components/Business/ImportExport/ExportButton/index.module.less

@@ -0,0 +1,382 @@
+.exportModal {
+  :global {
+    .ant-modal {
+      top: 56px;
+      max-width: calc(100vw - 32px);
+      padding-bottom: 24px;
+    }
+
+    .ant-modal-content {
+      overflow: hidden;
+      border-radius: 8px;
+      box-shadow: 0 12px 40px rgba(31, 35, 41, 0.18);
+    }
+
+    .ant-modal-header {
+      padding: 18px 24px;
+      border-bottom-color: #eef0f3;
+    }
+
+    .ant-modal-body {
+      max-height: calc(100vh - 220px);
+      padding: 0;
+      overflow-y: auto;
+      background: #f7f8fa;
+    }
+
+    .ant-modal-footer {
+      padding: 14px 24px;
+      border-top-color: #eef0f3;
+    }
+
+    .ant-modal-close-x {
+      height: 76px;
+      line-height: 76px;
+    }
+  }
+}
+
+.modalTitle {
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+}
+
+.modalTitleIcon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin-right: 12px;
+  color: #1677ff;
+  font-size: 20px;
+  background: #eaf3ff;
+  border-radius: 8px;
+}
+
+.modalTitleText,
+.modalTitleDescription,
+.sectionTitle,
+.sectionDescription,
+.scopeTitle,
+.scopeDescription,
+.fileTypeName,
+.fileTypeDescription {
+  display: block;
+}
+
+.modalTitleText {
+  color: #1f2329;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.modalTitleDescription {
+  margin-top: 2px;
+  color: #8f959e;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.dialogBody {
+  padding: 16px 24px 24px;
+}
+
+.section {
+  margin-bottom: 16px;
+  padding: 18px 20px;
+  background: #fff;
+  border: 1px solid #e8eaed;
+  border-radius: 8px;
+}
+
+.section:last-child {
+  margin-bottom: 0;
+}
+
+.sectionHeader {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 16px;
+}
+
+.sectionIndex {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+  color: #1677ff;
+  font-weight: 600;
+  font-size: 13px;
+  background: #eaf3ff;
+  border-radius: 50%;
+}
+
+.sectionTitle {
+  color: #1f2329;
+  font-weight: 600;
+  font-size: 15px;
+  line-height: 22px;
+}
+
+.sectionDescription {
+  margin-top: 2px;
+  color: #8f959e;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.scopeCard {
+  display: flex;
+  align-items: center;
+  min-height: 72px;
+  padding: 14px 16px;
+  background: #f7f8fa;
+  border: 1px solid #eef0f3;
+  border-radius: 6px;
+}
+
+.scopeIcon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  margin-right: 12px;
+  color: #1677ff;
+  font-size: 18px;
+  background: #fff;
+  border-radius: 6px;
+  box-shadow: 0 1px 3px rgba(31, 35, 41, 0.08);
+}
+
+.scopeContent {
+  min-width: 0;
+}
+
+.scopeTitle {
+  color: #1f2329;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.scopeDescription {
+  margin-top: 2px;
+  color: #8f959e;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.resultCount {
+  flex: 0 0 auto;
+  margin-left: auto;
+  padding: 3px 10px;
+  color: #1677ff;
+  font-weight: 600;
+  font-size: 13px;
+  white-space: nowrap;
+  background: #eaf3ff;
+  border-radius: 12px;
+}
+
+.fileTypeGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  width: 100%;
+}
+
+.fileTypeOption {
+  display: flex;
+  align-items: flex-start;
+  min-height: 68px;
+  margin-right: 0;
+  padding: 12px 14px;
+  background: #fff;
+  border: 1px solid #d9dce1;
+  border-radius: 6px;
+  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
+
+  &:hover {
+    border-color: #69a5ff;
+  }
+
+  &:global(.ant-radio-wrapper-checked) {
+    background: #f5f9ff;
+    border-color: #1677ff;
+    box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.08);
+  }
+
+  :global {
+    .ant-radio {
+      margin-top: 3px;
+    }
+  }
+}
+
+.fileTypeContent {
+  margin-left: 4px;
+}
+
+.fileTypeName {
+  color: #1f2329;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.fileTypeDescription {
+  margin-top: 2px;
+  color: #8f959e;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.exportAlert {
+  margin-top: 14px;
+  border-color: #d9e8ff;
+  border-radius: 6px;
+}
+
+.templateForm {
+  :global {
+    .ant-form-item-label {
+      padding-bottom: 8px;
+      font-weight: 500;
+    }
+  }
+}
+
+.templateSelectItem {
+  margin-bottom: 0;
+}
+
+.templatePreview {
+  margin-top: 16px;
+  overflow: hidden;
+  border: 1px solid #e8eaed;
+  border-radius: 6px;
+}
+
+.templatePreviewHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 48px;
+  padding: 8px 14px;
+  background: #f7f8fa;
+  border-bottom: 1px solid #e8eaed;
+}
+
+.downloadTemplateButton {
+  padding-right: 0;
+}
+
+.templateSummary {
+  :global {
+    .ant-descriptions-view {
+      border-right: 0;
+      border-left: 0;
+      border-radius: 0;
+    }
+
+    .ant-descriptions-row > th,
+    .ant-descriptions-row > td {
+      padding: 10px 12px;
+    }
+
+    .ant-descriptions-item-label {
+      color: #646a73;
+      background: #fbfcfd;
+    }
+
+    .ant-descriptions-item-content {
+      color: #1f2329;
+      font-weight: 500;
+    }
+  }
+}
+
+.fieldPreview {
+  padding: 12px 14px 14px;
+  background: #fff;
+}
+
+.fieldPreviewHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.fieldPreviewLabel {
+  color: #646a73;
+  font-weight: 500;
+  font-size: 13px;
+}
+
+.fieldCount {
+  color: #8f959e;
+  font-size: 12px;
+}
+
+.fieldTags {
+  min-height: 42px;
+  max-height: 156px;
+  padding: 10px;
+  overflow-y: auto;
+  background: #f7f8fa;
+  border-radius: 6px;
+}
+
+.fieldTag {
+  margin-bottom: 6px;
+  color: #434a54;
+  background: #fff;
+  border-color: #dfe2e6;
+  border-radius: 4px;
+}
+
+.emptyFields {
+  display: flex;
+  align-items: center;
+  min-height: 22px;
+  color: #8f959e;
+  font-size: 12px;
+}
+
+@media (max-width: 576px) {
+  .modalTitleDescription {
+    display: none;
+  }
+
+  .dialogBody {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+
+  .section {
+    padding: 16px;
+  }
+
+  .scopeCard {
+    align-items: flex-start;
+  }
+
+  .resultCount {
+    margin-top: 7px;
+  }
+
+  .fileTypeGrid {
+    grid-template-columns: 1fr;
+  }
+}

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

@@ -0,0 +1,273 @@
+import React, { useState } from 'react';
+import { Alert, Button, Dropdown, Menu, Modal, Radio, message } from 'antd';
+import {
+  DownOutlined,
+  ExportOutlined,
+  FilterOutlined,
+} from '@ant-design/icons';
+import {
+  isConcurrentLimit,
+  normalizeTask,
+  unwrapResponse,
+} from '../services/importExport';
+import type {
+  FileTask,
+  ImportExportConfig,
+  ImportExportRequestContext,
+  ImportExportServices,
+} from '../types';
+import ModalTitle from './ModalTitle';
+import TemplatePicker from './TemplatePicker';
+import styles from './index.module.less';
+
+export interface ExportButtonProps {
+  config: ImportExportConfig;
+  services: ImportExportServices;
+  resolveRequestContext: () => Promise<ImportExportRequestContext | undefined>;
+  showQuickExport: boolean;
+  showTemplateExport: boolean;
+  onTaskCreated: (task: FileTask) => void;
+}
+
+/**
+ * 提供快速导出和按模板导出入口。
+ */
+const ExportButton: React.FC<ExportButtonProps> = ({
+  config,
+  services,
+  resolveRequestContext,
+  showQuickExport,
+  showTemplateExport,
+  onTaskCreated,
+}) => {
+  const [pickerVisible, setPickerVisible] = useState(false);
+  const [quickVisible, setQuickVisible] = useState(false);
+  const [exporting, setExporting] = useState(false);
+  const [routeLoading, setRouteLoading] = useState<'QUICK' | 'TEMPLATE'>();
+  const [context, setContext] = useState<ImportExportRequestContext>();
+  const [quickFileType, setQuickFileType] = useState('XLSX');
+
+  const createTask = async (
+    currentContext: ImportExportRequestContext,
+    execute: (
+      serviceContext: string,
+      data: Record<string, any>,
+    ) => Promise<any>,
+    data: Record<string, any> = {},
+    fileType = 'XLSX',
+  ) => {
+    setExporting(true);
+    try {
+      const response = await execute(currentContext.serviceContext, {
+        businessFunctionCode: currentContext.businessFunctionCode,
+        conditions: currentContext.conditions,
+        ...data,
+        fileType,
+      });
+      if (isConcurrentLimit(response)) {
+        message.warning('当前导入导出任务较多，请稍后重试');
+        return;
+      }
+      const task = normalizeTask({
+        ...unwrapResponse<FileTask>(response),
+        taskType: 'EXPORT',
+        taskStatus: 'PENDING',
+        serviceContext: currentContext.serviceContext,
+      });
+      if (!task?.taskId) {
+        throw new Error((task as any)?.msg || 'export taskId is missing');
+      }
+      onTaskCreated(task);
+      message.success('已创建导出任务');
+    } catch (error) {
+      if (isConcurrentLimit(error)) {
+        message.warning('当前导入导出任务较多，请稍后重试');
+        return;
+      }
+      message.error('创建导出任务失败，请稍后重试');
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  const resultCount = config.getResultCount?.();
+
+  const submitQuickExport = async () => {
+    if (!context) return;
+    if (resultCount === 0) {
+      message.warning('当前查询结果为空，不创建导出任务');
+      return;
+    }
+    await createTask(context, services.quickExport, {}, quickFileType);
+    setQuickVisible(false);
+  };
+
+  const openExport = async (type: 'QUICK' | 'TEMPLATE') => {
+    setRouteLoading(type);
+    try {
+      const resolvedContext = await resolveRequestContext();
+      if (!resolvedContext) return;
+      setContext(resolvedContext);
+      if (type === 'QUICK') {
+        setQuickVisible(true);
+      } else {
+        setPickerVisible(true);
+      }
+    } finally {
+      setRouteLoading(undefined);
+    }
+  };
+
+  const quickExportModal = (
+    <Modal
+      width={560}
+      title={
+        <ModalTitle
+          icon={<ExportOutlined />}
+          title={`${config.documentName}快速导出`}
+          description="使用系统默认字段导出当前筛选结果"
+        />
+      }
+      visible={quickVisible}
+      onCancel={() => setQuickVisible(false)}
+      onOk={submitQuickExport}
+      confirmLoading={exporting}
+      okText="创建导出任务"
+      cancelText="取消"
+      okButtonProps={{
+        disabled: resultCount === 0,
+        icon: <ExportOutlined />,
+      }}
+      wrapClassName={styles.exportModal}
+      destroyOnClose
+    >
+      <div className={styles.dialogBody}>
+        <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.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>
+        </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>
+          <Radio.Group
+            className={styles.fileTypeGrid}
+            value={quickFileType}
+            onChange={(event) => setQuickFileType(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>
+          <Alert
+            className={styles.exportAlert}
+            type={resultCount === 0 ? 'warning' : 'info'}
+            showIcon
+            message={
+              resultCount === 0
+                ? '当前查询结果为空，暂时无法创建导出任务。'
+                : '快速导出使用系统默认字段；创建后可在任务中心查看进度并下载文件。'
+            }
+          />
+        </section>
+      </div>
+    </Modal>
+  );
+
+  return (
+    <>
+      {(showQuickExport || showTemplateExport) && (
+        <Dropdown
+          trigger={['hover', 'click']}
+          overlay={
+            <Menu>
+              {showQuickExport && (
+                <Menu.Item key="quick" onClick={() => openExport('QUICK')}>
+                  快速导出
+                </Menu.Item>
+              )}
+              {showTemplateExport && (
+                <Menu.Item
+                  key="template"
+                  onClick={() => openExport('TEMPLATE')}
+                >
+                  按模板导出
+                </Menu.Item>
+              )}
+            </Menu>
+          }
+        >
+          <Button loading={exporting || Boolean(routeLoading)}>
+            导出 <DownOutlined />
+          </Button>
+        </Dropdown>
+      )}
+      {context && (
+        <TemplatePicker
+          visible={pickerVisible}
+          context={context}
+          services={services}
+          onCancel={() => setPickerVisible(false)}
+          onConfirm={async (templateCode, fileType) => {
+            if (!context) return;
+            setPickerVisible(false);
+            await createTask(
+              context,
+              services.templateExport,
+              {
+                templateCode,
+              },
+              fileType,
+            );
+          }}
+          documentName={config.documentName}
+          resultCount={resultCount}
+        />
+      )}
+      {quickExportModal}
+    </>
+  );
+};
+
+export default ExportButton;