@bit-sun/business-component 4.2.0-alpha.28 → 4.2.0-alpha.29

package/dist/utils/auth.d.ts

@@ -1,3 +1,7 @@
+/**
+ * 根据上游权限编码获取关联的导入导出业务功能编码。
+ */
+export declare const getRelationTemplateCode: (authCode: string) => string;
 export declare const authFunc: (code: string) => any;
 export declare const handleJudgeAuthButtons: (buttonCodeArray: any[]) => true | boolean[];
 export declare const shouldUseAuth: () => boolean;

package/docs/error-record.md

@@ -0,0 +1,52 @@
+# 错误记录
+
+## 2026-07-31 导入导出组件抽取
+
+### 复制后直接按应用项目类型环境判断
+
+- 现象：组件库严格构建发现可空 `serviceContext` 和对象展开重复字段错误。
+- 原因：原业务项目的类型检查强度低于组件库，复制完成不等于迁移完成。
+- 修正：把服务上下文改为显式必填参数；把任务默认字段放到服务响应展开之后。
+- 后续规则：跨仓库迁移必须执行目标仓库完整构建，不能只依赖源仓库结果。
+
+### 文档整站构建不可用
+
+- 现象：Dumi 无法解析旧组件中的 `@/` 别名、`umi` 和 `react-dom`。
+- 原因：现有文档工程依赖与别名配置不完整，与本次新增模块无直接关系。
+- 处理：保留失败证据并停止扩大修改范围；组件本体使用 Father 构建验证。
+
+### 业务项目独立类型校验不可用
+
+- 现象：临时消费端文件在业务项目中执行独立 `tsc` 时，大量第三方声明文件出现语法错误。
+- 原因：业务项目内置 TypeScript 版本无法解析当前安装的新版 `@types/node`、`@types/lodash` 等声明语法，错误未进入本次适配代码。
+- 处理：删除临时验证文件，不以该命令作为完成证据；业务项目正式切换应在组件包发布并升级依赖后使用项目原构建链验证。
+
+## 2026-08-01 导入导出入口解析测试
+
+### Jest 未解析源码路径别名
+
+- 现象：入口解析单元测试加载 `@/utils` 和 `@/utils/enumConfig` 失败，业务断言尚未执行。
+- 原因：现有 `umi-test` 配置没有为 Jest 注册 `@/` 路径映射。
+- 修正：本次被测工具链内部改用等价的相对路径引用，不扩大范围修改全局测试配置。
+- 后续规则：新增可独立测试的底层工具时，优先使用相对路径引用同目录或固定层级依赖，避免测试结果依赖构建器专属别名。
+
+### 默认服务测试路径预期不完整
+
+- 现象：默认快速导出服务测试预期缺少 `/import-export` 路径段，实际请求路径与路由工具输出不一致。
+- 原因：测试断言凭接口后缀手写，没有先对照 `buildSdkUrl` 的统一前缀规则。
+- 修正：按路由工具的实际输出更新断言。
+- 后续规则：服务路径测试必须以现有路由构造规则为依据，禁止省略中间路径段。
+
+### Umi peer dependency 缺少本地类型声明
+
+- 现象：导入宿主 `umi.request` 后，Father 构建提示找不到 `umi` 模块及类型声明。
+- 原因：`umi` 仅声明为 peer dependency，本仓库安装环境没有对应运行模块和类型。
+- 修正：保持 `umi` 为宿主依赖，补充最小请求类型声明，并在 Father 中显式标记为 external。
+- 后续规则：组件库直接使用 peer dependency 时，必须同时验证本地类型可解析且构建产物不会打包重复运行时。
+
+### Distribution-front 测试命令不可用
+
+- 现象：执行销售单导入导出目标测试时提示 `umi-test: command not found`。
+- 原因：当前 `distribution-front` 本地依赖环境没有生成 `umi-test` 可执行文件。
+- 处理：不下载或改动依赖，改为执行与目标测试一致的源码静态断言，并确认旧服务适配引用已清零。
+- 后续规则：消费端依赖未完整安装时，不宣称测试套件通过；应明确区分正式测试结果和等价静态验证结果。

package/docs/task-records/2026-07-31-import-export-extraction.md

@@ -0,0 +1,73 @@
+# 导入导出组件抽取记录
+
+日期：2026-07-31
+
+## 完成标准
+
+- 完整导入、快速导出、按模板导出、任务进度和最近任务进入 `business-component`。
+- 组件库不依赖业务项目的 `@/utils`、Umi 请求实例或微前端路由实现。
+- 业务项目可以注入自己的请求函数、查询条件、权限开关和任务中心跳转。
+- 组件库 CJS、ESM 构建通过。
+
+## 抽取结果
+
+- 新增业务组件：`src/components/Business/ImportExport`。
+- 新增公开入口：`ImportExportActions`。
+- 新增请求适配工厂：`createImportExportServices(request, overrides)`。
+- 新增高级组件导出：`ImportWizard`、`ExportButton`、`TaskProgress`、`TaskDrawer`。
+- 新增类型、路由安全校验、任务归一化和场景能力工具。
+- 新增 Dumi 使用文档和业务项目接入示例。
+- 样式改为 CSS Modules，避免业务页面样式污染。
+
+## 依赖边界
+
+- 组件库负责：界面、弹窗、上传与校验流程、导出流程、任务轮询、最近任务。
+- 业务项目负责：按钮权限、业务功能编码、当前列表条件、结果数量、请求拦截器、微前端跳转。
+- 接口差异通过服务覆盖处理，不在组件内部增加项目名称判断。
+
+## 验证结果
+
+- `npm run build`：CJS 和 ESM 构建通过。
+- 生成的声明文件包含 `ImportExportActions` 和 `createImportExportServices`。
+- 组件源码和声明文件未残留业务项目路径、`@/utils` 或 `jumpRoutePath` 依赖。
+
+## 发布与业务项目切换
+
+当前组件库版本为 `4.2.0-alpha.25`，本次未修改版本号、未发布包，也未写入不可复现的本地绝对路径依赖。销售单源码已按发布包模式切换为从 `@bit-sun/business-component` 引用，并通过 `src/services/importExport.ts` 注入业务请求实例；业务项目当前安装的 `4.2.0-alpha.26` 尚不包含新导出，需要先手动替换本地产物或升级正式发布版本。
+
+发布新版本后，业务项目只需：
+
+1. 升级 `@bit-sun/business-component`。
+2. 用业务项目已有的 `request` 创建请求适配器并传给 `createImportExportServices`。
+3. 从组件库导入 `ImportExportActions`，传入权限开关、查询条件和跳转回调。
+4. 验证完成后删除业务项目原有的 `src/components/ImportExport` 副本。
+
+## 受限项
+
+`npm run docs:build` 被仓库原有文档工程问题阻断：旧组件存在 `@/` 别名、`umi`、`react-dom` 等解析失败。本次组件库产物构建不受影响；未扩大范围修改旧文档工程。
+
+## 2026-08-01 任务中心路由修正
+
+- 完成标准：上游未传 `taskCenterPath` 时，任务进度和最近任务入口都使用组件默认路由；上游显式传入时，两处同时使用传入值。
+- 根因：`ImportExportActions` 已声明顶层默认值，但子组件仍读取 `config.taskCenterPath`，导致默认值被绕过。
+- 修正：以 `ImportExportActionsProps.taskCenterPath` 为唯一来源，统一传给 `TaskProgress` 和 `TaskDrawer`，并移除 `ImportExportConfig` 中的重复字段。
+- 验证：`npm run build` 执行成功，CJS 和 ESM 构建均通过。
+
+## 2026-08-01 导入导出业务入口拆分
+
+- 完成标准：导入通过 `importCode` 获取独立业务功能编码；快速导出和模板导出通过两个权限编码关联结果的“或”值共用一个导出业务功能编码。
+- 数据来源：从权限菜单按钮的 `relationExcelTemplateCode` 读取业务功能编码，不再要求上游通过 `config.businessFunctionCode` 重复传入。
+- 调用链：入口解析后同时用于业务功能服务解析、模板查询、导入导出任务创建和最近任务查询。
+- 单元测试：入口解析测试 3 项通过，覆盖导入独立入口、快速导出入口存在、仅模板导出入口存在。
+- 构建验证：`npm run build` 执行成功，CJS 和 ESM 构建均通过。
+
+## 2026-08-01 默认请求服务内置
+
+- 完成标准：Umi 消费项目不传 `services` 也能使用完整导入导出服务，同时允许通过可选属性覆盖个别差异接口。
+- 修正：组件库使用宿主 `umi.request` 创建默认服务；`services` 改为可选的 `Partial<ImportExportServices>`，并保留请求工厂作为扩展入口。
+- 构建边界：`umi` 保持 peer dependency 并显式 external，组件包不打包重复 Umi 运行时。
+- 消费端：销售单移除 `importExportServices` import、`services` 属性和无业务逻辑的服务适配文件。
+- 单元测试：默认服务与局部覆盖测试 2 项、业务入口解析测试 3 项，共 5 项通过。
+- 构建验证：`npm run build` 执行成功，CJS 和 ESM 构建均通过；声明文件中 `services` 为可选属性。
+- 消费端验证：销售单等价源码静态断言通过；正式目标测试因本地缺少 `umi-test` 命令未执行。
+- 后续处理：按用户要求删除本次新增的两个组件库测试文件，保留上述已执行结果作为历史验证记录。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bit-sun/business-component",
-  "version": "4.2.0-alpha.28",
+  "version": "4.2.0-alpha.29",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",

package/src/components/Business/AddSelectBusiness/index.tsx

@@ -654,7 +654,7 @@ export const AddSkcSelect = (parProps: any) => {
   ]
   const mTpTableColumn = handleTableColumn(initialTableColumn, parProps);
   const initialTableSearchForm = [
-    { name: 'qp-code-in', label: 'SKC编码', type: 'multipleQueryInput' },
+    { name: 'qp-code-like', label: 'SKC编码' },
     { name: 'qp-skcName-like', label: 'SKC名称' },
     { name: 'qp-itemName-like', label: '商品名称' },
     { name: 'qp-colorName-in', type: 'select', label: '颜色', field: {

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import styles from './index.module.less';
+
+interface ModalTitleProps {
+  icon: React.ReactNode;
+  title: React.ReactNode;
+  description: React.ReactNode;
+}
+
+/**
+ * 统一导出弹窗标题区的图标、主标题和辅助说明。
+ */
+const ModalTitle: React.FC<ModalTitleProps> = ({
+  icon,
+  title,
+  description,
+}) => (
+  <div className={styles.modalTitle}>
+    <span className={styles.modalTitleIcon}>{icon}</span>
+    <span>
+      <span className={styles.modalTitleText}>{title}</span>
+      <span className={styles.modalTitleDescription}>{description}</span>
+    </span>
+  </div>
+);
+
+export default ModalTitle;

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;