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

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

@@ -0,0 +1,285 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  Badge,
+  Button,
+  Descriptions,
+  Drawer,
+  Empty,
+  Input,
+  List,
+  Modal,
+  Progress,
+  Space,
+  Spin,
+  Tag,
+  message,
+} from 'antd';
+import {
+  getItems,
+  normalizeTask,
+  taskTypeName,
+} from '../services/importExport';
+import type { FileTask, ImportExportServices } from '../types';
+
+export interface TaskDrawerProps {
+  /** 最近任务对应的业务功能编码集合。 */
+  businessFunctionCodes: string[];
+  services: ImportExportServices;
+  /** 任务中心路由。 */
+  taskCenterPath?: string;
+  onNavigateTaskCenter?: (path: string) => void;
+}
+
+const statusNames: Record<string, string> = {
+  CREATED: '等待执行',
+  RUNNING: '执行中',
+  WAITING_EXECUTE: '等待确认',
+  VERIFYING: '结果核对中',
+  SUCCESS: '成功',
+  PARTIAL_SUCCESS: '部分成功',
+  PASSED: '校验通过',
+  COMPLETED_WITH_ERRORS: '校验完成（含异常）',
+  FAILED: '失败',
+  CANCELLED: '已取消',
+};
+
+/**
+ * 展示当前业务功能最近的文件任务。
+ */
+const TaskDrawer: React.FC<TaskDrawerProps> = ({
+  businessFunctionCodes,
+  services,
+  taskCenterPath,
+  onNavigateTaskCenter,
+}) => {
+  const [visible, setVisible] = useState(false);
+  const [keyword, setKeyword] = useState('');
+  const [tasks, setTasks] = useState<FileTask[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [detail, setDetail] = useState<FileTask>();
+  const [unreadFailure, setUnreadFailure] = useState(false);
+  const businessFunctionCodeKey = businessFunctionCodes.join('|');
+
+  useEffect(() => {
+    if (!visible) return;
+    setLoading(true);
+    const currentBusinessFunctionCodes = businessFunctionCodeKey
+      .split('|')
+      .filter(Boolean);
+    Promise.all(
+      currentBusinessFunctionCodes.map((businessFunctionCode) =>
+        services.queryRecentTasks({
+          businessFunctionCode,
+          days: 3,
+        }),
+      ),
+    )
+      .then((responses) => {
+        const taskIds = new Set<string>();
+        const recent = responses
+          .reduce<FileTask[]>((items, response) => {
+            return [...items, ...getItems<FileTask>(response)];
+          }, [])
+          .map(normalizeTask)
+          .filter((task) => {
+            if (!task.taskId || taskIds.has(task.taskId)) return false;
+            taskIds.add(task.taskId);
+            return true;
+          });
+        setTasks(recent);
+        setUnreadFailure(false);
+      })
+      .catch(() => message.error('最近文件任务加载失败，请稍后重试'))
+      .finally(() => setLoading(false));
+  }, [visible, businessFunctionCodeKey, services]);
+
+  useEffect(() => {
+    if (
+      !visible &&
+      tasks.some(
+        (item) =>
+          item.taskStatus === 'FAILED' ||
+          item.taskStatus === 'PARTIAL_SUCCESS' ||
+          item.taskStatus === 'COMPLETED_WITH_ERRORS',
+      )
+    ) {
+      setUnreadFailure(true);
+    }
+  }, [visible, tasks]);
+
+  const items = useMemo(
+    () =>
+      tasks.filter(
+        (item) =>
+          !keyword ||
+          item.templateName?.includes(keyword) ||
+          item.taskId?.includes(keyword),
+      ),
+    [tasks, keyword],
+  );
+
+  const openFile = (url: string, fileName: string) => {
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = fileName;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    message.success('文件下载已开始');
+  };
+
+  return (
+    <>
+      <Badge dot={unreadFailure}>
+        <Button
+          onClick={() => {
+            setUnreadFailure(false);
+            setVisible(true);
+          }}
+        >
+          文件任务
+        </Button>
+      </Badge>
+      <Drawer
+        width={400}
+        title="最近文件任务"
+        visible={visible}
+        onClose={() => setVisible(false)}
+      >
+        <Input.Search
+          allowClear
+          placeholder="搜索模板名称或任务编号"
+          value={keyword}
+          onChange={(event) => setKeyword(event.target.value)}
+        />
+        <Spin spinning={loading}>
+          <List
+            dataSource={items}
+            locale={{
+              emptyText: (
+                <Empty
+                  image={Empty.PRESENTED_IMAGE_SIMPLE}
+                  description="最近3天暂无导入导出任务"
+                />
+              ),
+            }}
+            renderItem={(item) => (
+              <List.Item
+                style={{ cursor: 'pointer' }}
+                onClick={() => setDetail(item)}
+                actions={[
+                  item.resultDownloadUrl ? (
+                    <Button
+                      type="link"
+                      size="small"
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        openFile(
+                          item.resultDownloadUrl!,
+                          `${item.taskId}-结果文件`,
+                        );
+                      }}
+                    >
+                      下载
+                    </Button>
+                  ) : null,
+                  item.errorDownloadUrl ? (
+                    <Button
+                      type="link"
+                      size="small"
+                      danger
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        openFile(
+                          item.errorDownloadUrl!,
+                          `${item.taskId}-错误文件`,
+                        );
+                      }}
+                    >
+                      导出错误
+                    </Button>
+                  ) : null,
+                ].filter(Boolean)}
+              >
+                <List.Item.Meta
+                  title={
+                    <Space>
+                      {taskTypeName(item.taskType)}
+                      <Tag>
+                        {statusNames[item.taskStatus] || item.taskStatus}
+                      </Tag>
+                    </Space>
+                  }
+                  description={
+                    <>
+                      <div>{item.taskId}</div>
+                      <Progress percent={item.progress || 0} size="small" />
+                    </>
+                  }
+                />
+              </List.Item>
+            )}
+          />
+        </Spin>
+        {taskCenterPath && onNavigateTaskCenter && (
+          <Button
+            type="link"
+            onClick={() => {
+              setVisible(false);
+              onNavigateTaskCenter(taskCenterPath);
+            }}
+          >
+            查看全部
+          </Button>
+        )}
+      </Drawer>
+      <Modal
+        width={720}
+        title={`任务详情 · ${detail?.taskId || ''}`}
+        visible={!!detail}
+        footer={null}
+        onCancel={() => setDetail(undefined)}
+        destroyOnClose
+      >
+        {detail && (
+          <Descriptions bordered size="small" column={2}>
+            <Descriptions.Item label="类型">
+              {taskTypeName(detail.taskType)}
+            </Descriptions.Item>
+            <Descriptions.Item label="状态">
+              {statusNames[detail.taskStatus] || detail.taskStatus}
+            </Descriptions.Item>
+            <Descriptions.Item label="模板">
+              {detail.templateName || '-'}
+            </Descriptions.Item>
+            <Descriptions.Item label="操作人">
+              {detail.operatorName || '-'}
+            </Descriptions.Item>
+            <Descriptions.Item label="文件名">
+              {detail.fileName || '-'}
+            </Descriptions.Item>
+            <Descriptions.Item label="创建时间">
+              {detail.createdTime || '-'}
+            </Descriptions.Item>
+            <Descriptions.Item label="成功行数">
+              {detail.successCount ?? '-'}
+            </Descriptions.Item>
+            <Descriptions.Item label="失败行数">
+              {detail.failedCount ?? '-'}
+            </Descriptions.Item>
+            <Descriptions.Item label="跳过行数">
+              {detail.skippedCount ?? '-'}
+            </Descriptions.Item>
+            <Descriptions.Item label="耗时">
+              {detail.elapsedSeconds == null
+                ? '-'
+                : `${detail.elapsedSeconds}s`}
+            </Descriptions.Item>
+          </Descriptions>
+        )}
+      </Modal>
+    </>
+  );
+};
+
+export default TaskDrawer;

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

@@ -0,0 +1,267 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  Badge,
+  Button,
+  Card,
+  Progress,
+  Space,
+  Tag,
+  Tooltip,
+  message,
+} from 'antd';
+import { DownOutlined, UpOutlined } from '@ant-design/icons';
+import {
+  normalizeTask,
+  taskTypeName,
+  unwrapResponse,
+} from '../services/importExport';
+import type { FileTask, ImportExportServices } from '../types';
+
+const POLL_INTERVAL_MS = 2000;
+const terminalStatuses = [
+  'SUCCESS',
+  'PARTIAL_SUCCESS',
+  'PASSED',
+  'COMPLETED_WITH_ERRORS',
+  'FAILED',
+  'CANCELLED',
+];
+
+const statusView: Record<string, { color: string; text: string }> = {
+  PENDING: { color: 'default', text: '等待执行' },
+  CREATED: { color: 'default', text: '等待执行' },
+  RUNNING: { color: 'processing', text: '执行中' },
+  WAITING_EXECUTE: { color: 'warning', text: '等待确认' },
+  VERIFYING: { color: 'processing', text: '结果核对中' },
+  SUCCESS: { color: 'success', text: '成功' },
+  PARTIAL_SUCCESS: { color: 'warning', text: '部分成功' },
+  PASSED: { color: 'success', text: '校验通过' },
+  COMPLETED_WITH_ERRORS: { color: 'warning', text: '校验完成（含异常）' },
+  FAILED: { color: 'error', text: '失败' },
+  CANCELLED: { color: 'default', text: '已取消' },
+};
+
+const taskTypeColors: Record<string, string> = {
+  IMPORT_VALIDATION: 'blue',
+  IMPORT_EXECUTION: 'geekblue',
+  IMPORT: 'geekblue',
+  EXPORT: 'purple',
+  TEMPLATE_DOWNLOAD: 'cyan',
+};
+
+export interface TaskProgressProps {
+  tasks: FileTask[];
+  services: ImportExportServices;
+  taskCenterPath?: string;
+  onNavigateTaskCenter?: (path: string) => void;
+  onTaskUpdated: (task: FileTask) => void;
+  onClose: () => void;
+}
+
+const triggerDownload = (url: string, fileName: string) => {
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = fileName;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  message.success('文件下载已开始');
+};
+
+/**
+ * 轮询并展示当前页面创建的文件任务进度。
+ */
+const TaskProgress: React.FC<TaskProgressProps> = ({
+  tasks,
+  services,
+  taskCenterPath,
+  onNavigateTaskCenter,
+  onTaskUpdated,
+  onClose,
+}) => {
+  const [collapsed, setCollapsed] = useState(false);
+  const runningTasks = useMemo(
+    () =>
+      tasks.filter(
+        (task) =>
+          Boolean(task.taskId) && !terminalStatuses.includes(task.taskStatus),
+      ),
+    [tasks],
+  );
+  const pollingKey = runningTasks
+    .map((task) => `${task.taskId}:${task.serviceContext || ''}`)
+    .join('|');
+
+  useEffect(() => {
+    if (runningTasks.length === 0) return undefined;
+    let stopped = false;
+    let timer: number | undefined;
+    const poll = async () => {
+      await Promise.all(
+        runningTasks.map(async (task) => {
+          if (!task.serviceContext) return;
+          try {
+            const response = await services.queryTask(
+              task.serviceContext,
+              task.taskId,
+            );
+            if (!stopped) {
+              onTaskUpdated({
+                ...task,
+                ...normalizeTask(unwrapResponse<FileTask>(response)),
+                serviceContext: task.serviceContext,
+              });
+            }
+          } catch (error) {
+            // A transient progress failure is retried on the next polling cycle.
+          }
+        }),
+      );
+      if (!stopped) {
+        timer = window.setTimeout(poll, POLL_INTERVAL_MS);
+      }
+    };
+    poll();
+    return () => {
+      stopped = true;
+      if (timer != null) window.clearTimeout(timer);
+    };
+  }, [pollingKey, services, onTaskUpdated]);
+
+  if (tasks.length === 0) return null;
+
+  const primaryTask = runningTasks[0] || tasks[0];
+
+  return (
+    <Card
+      size="small"
+      title={
+        <Space>
+          文件任务
+          <Badge count={tasks.length} />
+        </Space>
+      }
+      extra={
+        <Space>
+          {taskCenterPath && onNavigateTaskCenter && (
+            <Button
+              type="link"
+              size="small"
+              onClick={() => onNavigateTaskCenter(taskCenterPath)}
+            >
+              全部
+            </Button>
+          )}
+          <Button type="link" size="small" onClick={onClose}>
+            关闭
+          </Button>
+          <Button
+            type="text"
+            size="small"
+            aria-label={collapsed ? '展开文件任务' : '收起文件任务'}
+            icon={collapsed ? <UpOutlined /> : <DownOutlined />}
+            onClick={() => setCollapsed((value) => !value)}
+          />
+        </Space>
+      }
+      style={{
+        position: 'fixed',
+        right: 24,
+        bottom: 24,
+        width: 360,
+        zIndex: 40,
+      }}
+      bodyStyle={{
+        maxHeight: 'min(520px, calc(100vh - 180px))',
+        overflowY: 'auto',
+      }}
+    >
+      {collapsed ? (
+        <Space direction="vertical" style={{ width: '100%' }}>
+          <Tag color={taskTypeColors[primaryTask.taskType] || 'default'}>
+            {taskTypeName(primaryTask.taskType)}
+          </Tag>
+          <Progress percent={primaryTask.progress || 0} size="small" />
+        </Space>
+      ) : (
+        tasks.map((task) => {
+          const status = statusView[task.taskStatus] || {
+            color: 'default',
+            text: task.taskStatus,
+          };
+          const operationLabel = taskTypeName(task.taskType);
+          return (
+            <div
+              key={task.taskId}
+              style={{ padding: '10px 0', borderBottom: '1px solid #f0f0f0' }}
+            >
+              <Tag color={taskTypeColors[task.taskType] || 'default'}>
+                {operationLabel}
+              </Tag>
+              <Space style={{ marginTop: 6 }}>
+                <Tag color={status.color}>{status.text}</Tag>
+                <span>
+                  已处理 {task.processedCount || 0}
+                  {task.totalCount == null ? ' 行' : ` / ${task.totalCount} 行`}
+                </span>
+                {task.elapsedSeconds != null && (
+                  <span>耗时 {task.elapsedSeconds}s</span>
+                )}
+              </Space>
+              <Progress percent={task.progress || 0} size="small" />
+              {task.taskStatus === 'FAILED' && task.errorMessage && (
+                <Tooltip title={task.errorMessage}>
+                  <div
+                    aria-label={task.errorMessage}
+                    style={{
+                      color: '#e82d1e',
+                      marginBottom: 4,
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                    }}
+                  >
+                    {task.errorMessage}
+                  </div>
+                </Tooltip>
+              )}
+              <Space>
+                {task.resultDownloadUrl && (
+                  <Button
+                    type="link"
+                    size="small"
+                    onClick={() =>
+                      triggerDownload(
+                        task.resultDownloadUrl!,
+                        `${task.templateName || task.taskId}-结果文件`,
+                      )
+                    }
+                  >
+                    下载结果文件
+                  </Button>
+                )}
+                {task.errorDownloadUrl && (
+                  <Button
+                    type="link"
+                    size="small"
+                    danger
+                    onClick={() =>
+                      triggerDownload(
+                        task.errorDownloadUrl!,
+                        `${task.templateName || task.taskId}-错误文件`,
+                      )
+                    }
+                  >
+                    下载错误文件
+                  </Button>
+                )}
+              </Space>
+            </div>
+          );
+        })
+      )}
+    </Card>
+  );
+};
+
+export default TaskProgress;

package/src/components/Business/ImportExport/businessFunction.ts

@@ -0,0 +1,29 @@
+import { getRelationTemplateCode } from '../../../utils/auth';
+import type { ImportExportOperationType } from './types';
+
+/**
+ * 导入导出按钮权限编码集合。
+ */
+export interface ImportExportAuthCodes {
+  importCode: string;
+  quickExportCode: string;
+  templateExportCode: string;
+}
+
+/**
+ * 根据操作类型和按钮权限编码解析关联的业务功能编码。
+ *
+ * 导入使用独立入口；快速导出和模板导出共用任一已配置的导出入口。
+ */
+export const resolveBusinessFunctionCode = (
+  operationType: ImportExportOperationType,
+  authCodes: ImportExportAuthCodes,
+): string => {
+  if (operationType === 'IMPORT') {
+    return getRelationTemplateCode(authCodes.importCode);
+  }
+  return (
+    getRelationTemplateCode(authCodes.quickExportCode) ||
+    getRelationTemplateCode(authCodes.templateExportCode)
+  );
+};

package/src/components/Business/ImportExport/index.md

@@ -0,0 +1,104 @@
+---
+nav:
+  title: 组件
+  order: 1
+group:
+  title: 业务
+  order: 2
+title: 导入导出
+order: 20
+---
+
+# 导入导出
+
+统一提供导入、快速导出、按模板导出、任务进度和最近任务入口。组件只负责界面与流程，鉴权、租户、业务查询条件和跨应用路由由业务项目注入。
+
+## 基本使用
+
+```tsx
+import React from 'react';
+import { ImportExportActions } from '@bit-sun/business-component';
+
+export default () => (
+  <ImportExportActions
+    config={{
+      documentName: '销售单',
+      getQueryParams: () => ({ status: 'CREATED' }),
+      getResultCount: () => 128,
+    }}
+    importCode="SALES_ORDER_IMPORT"
+    quickExportCode="SALES_ORDER_QUICK_EXPORT"
+    templateExportCode="SALES_ORDER_TEMPLATE_EXPORT"
+    showTaskDrawer={false}
+  />
+);
+```
+
+## 业务项目接入
+
+组件默认复用宿主 Umi 项目的 `request`，并根据运行环境跳转任务中心，业务项目不需要重复创建服务或路由适配器：
+
+```tsx | pure
+import { ImportExportActions } from '@bit-sun/business-component';
+
+export default () => (
+  <ImportExportActions
+    config={{
+      documentName: '销售单',
+      getQueryParams: () => ({ status: 'CREATED' }),
+      getResultCount: () => 128,
+    }}
+    importCode="SALES_ORDER_IMPORT"
+    quickExportCode="SALES_ORDER_QUICK_EXPORT"
+    templateExportCode="SALES_ORDER_TEMPLATE_EXPORT"
+    taskCenterPath="/file-task"
+  />
+);
+```
+
+默认跳转在无界子应用中调用主应用注入的 `jump`，独立运行时打开主应用页面。如果宿主有其他路由机制，可通过 `onNavigateTaskCenter` 覆盖默认行为。
+
+如果个别项目的接口不同，可以只覆盖差异服务，其余接口继续使用组件默认实现：
+
+```tsx | pure
+const serviceOverrides = {
+  queryTemplates: (data) =>
+    request('/custom/import-export/templates', {
+      method: 'POST',
+      data,
+    }),
+};
+
+<ImportExportActions {...props} services={serviceOverrides} />;
+```
+
+组件会从权限菜单数据中读取按钮的 `relationExcelTemplateCode` 作为业务功能编码：导入使用 `importCode`；快速导出和模板导出使用 `quickExportCode`、`templateExportCode` 查询结果的“或”值，共用同一个导出入口。
+
+## API
+
+### ImportExportActions
+
+| 参数                 | 说明                         | 类型                            | 默认值                               |
+| -------------------- | ---------------------------- | ------------------------------- | ------------------------------------ |
+| config               | 单据名称、查询条件等业务配置 | `ImportExportConfig`            | -                                    |
+| services             | 仅覆盖存在差异的服务         | `Partial<ImportExportServices>` | 内置 Umi 请求服务                    |
+| importCode           | 导入按钮权限编码             | `string`                        | -                                    |
+| quickExportCode      | 快速导出按钮权限编码         | `string`                        | -                                    |
+| templateExportCode   | 模板导出按钮权限编码         | `string`                        | -                                    |
+| showTaskDrawer       | 是否显示最近任务入口         | `boolean`                       | `true`                               |
+| taskCenterPath       | 任务中心路由                 | `string`                        | `/configure/importExport/taskCenter` |
+| onNavigateTaskCenter | 覆盖默认任务中心跳转行为     | `(path: string) => void`        | 内置跨应用跳转                       |
+
+### ImportExportConfig
+
+| 参数           | 说明                 | 类型                        | 默认值 |
+| -------------- | -------------------- | --------------------------- | ------ |
+| documentName   | 单据名称             | `string`                    | -      |
+| getQueryParams | 获取当前列表查询条件 | `() => Record<string, any>` | -      |
+| getResultCount | 获取当前查询结果数量 | `() => number \| undefined` | -      |
+
+## 抽取边界
+
+- 组件库：交互流程、弹窗、字段预览、任务进度、任务抽屉、公共类型和接口适配工厂。
+- 业务项目：按钮权限及其关联业务功能编码、当前查询条件、请求拦截器，以及特殊场景下对默认路由跳转的覆盖。
+- 后端差异：通过可选 `services` 属性按服务覆盖，不在组件内部判断项目名称。