@bit-sun/business-component 4.2.0-alpha.1 → 4.2.0-alpha.10

package/dist/plugin/TableColumnSetting/index.d.ts

@@ -38,14 +38,14 @@ declare class TableColumnSetting extends React.Component<TableColumnSettingProps
     } | {
         title: string;
         dataIndex: string;
-        render: (text: any, record: any) => React.JSX.Element;
+        render: (text: any, record: any) => JSX.Element;
         className?: undefined;
         width?: undefined;
     } | {
         title: string;
         dataIndex: string;
         className: string;
-        render: () => React.JSX.Element;
+        render: () => JSX.Element;
         width?: undefined;
     })[];
     showModal: () => void;
@@ -53,13 +53,13 @@ declare class TableColumnSetting extends React.Component<TableColumnSettingProps
     handleCancel: (e: React.MouseEvent<HTMLElement>) => void;
     handleTableHeadHidden: (title: string) => void;
     onSortEnd: ({ oldIndex, newIndex }: any) => void;
-    DraggableContainer: (props: any) => React.JSX.Element;
-    DraggableBodyRow: ({ className, style, ...restProps }: any) => React.JSX.Element;
+    DraggableContainer: (props: any) => JSX.Element;
+    DraggableBodyRow: ({ className, style, ...restProps }: any) => JSX.Element;
     onChange: (e: any, title: any) => void;
     handleReset: () => void;
     handleResetSetting: () => Promise<unknown>;
     onSearch: (e: any) => void;
     onSearchSort: (e: any) => void;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export default TableColumnSetting;

package/dist/utils/TableUtils.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import moment from 'moment';
 type mediaListType = {
     type: number;
@@ -49,24 +48,24 @@ declare const updateGuanDate: (requestParams: any, dateKeyParams?: any) => {
     };
     submit: any;
 };
-declare const textIcon: (type: string | number, text?: string) => React.JSX.Element | undefined;
-declare const handleTextDoubleOrId: (textOne: string | undefined, textTwo: string | undefined) => React.JSX.Element;
-declare const handleTextDouble: (textOne: string | undefined, textTwo: string | undefined) => React.JSX.Element;
-declare const handleTextOverflow: (text: string | undefined, width?: number) => React.JSX.Element;
-declare const handleTextLineFeed: (text: string | undefined, width?: number) => React.JSX.Element;
-declare const handleTextTooltip: (text: any) => React.JSX.Element;
-declare const handleTextBreakSpaces: (text: any) => React.JSX.Element;
-declare const handleStatusBadge: (text: any, color: any) => React.JSX.Element;
-declare const HandleTotalCount: (totalParams: any) => React.JSX.Element;
+declare const textIcon: (type: string | number, text?: string) => JSX.Element | undefined;
+declare const handleTextDoubleOrId: (textOne: string | undefined, textTwo: string | undefined) => JSX.Element;
+declare const handleTextDouble: (textOne: string | undefined, textTwo: string | undefined) => JSX.Element;
+declare const handleTextOverflow: (text: string | undefined, width?: number) => JSX.Element;
+declare const handleTextLineFeed: (text: string | undefined, width?: number) => JSX.Element;
+declare const handleTextTooltip: (text: any) => JSX.Element;
+declare const handleTextBreakSpaces: (text: any) => JSX.Element;
+declare const handleStatusBadge: (text: any, color: any) => JSX.Element;
+declare const HandleTotalCount: (totalParams: any) => JSX.Element;
 declare const handleCommonTimeRender: (text: any, format?: any) => any;
-declare const handleTooltip: (text: any, timeTrue?: boolean) => React.JSX.Element;
-declare const handleTooltipHours: (text: any, timeTrue?: boolean) => React.JSX.Element;
+declare const handleTooltip: (text: any, timeTrue?: boolean) => JSX.Element;
+declare const handleTooltipHours: (text: any, timeTrue?: boolean) => JSX.Element;
 type tableColumnsImageType = {
     width?: number | string;
     height?: number | string;
     [key: string]: any;
 };
-declare const tableColumnsImage: (url?: string, paramsObj?: tableColumnsImageType) => React.JSX.Element;
+declare const tableColumnsImage: (url?: string, paramsObj?: tableColumnsImageType) => JSX.Element;
 interface ColumnsEditInterfave {
     text?: string;
     record?: any;
@@ -82,7 +81,7 @@ interface ColumnsEditInterfave {
     };
     [key: string]: any;
 }
-declare const ColumnsEdit: (props: ColumnsEditInterfave) => React.JSX.Element;
+declare const ColumnsEdit: (props: ColumnsEditInterfave) => JSX.Element;
 type UserColumnsType = {
     name: string;
     department?: string;
@@ -90,13 +89,13 @@ type UserColumnsType = {
     company?: string;
     avatar?: string;
 };
-declare const userColumns: (props: UserColumnsType) => React.JSX.Element;
-declare const userInfoCard: (props: any) => React.JSX.Element;
+declare const userColumns: (props: UserColumnsType) => JSX.Element;
+declare const userInfoCard: (props: any) => JSX.Element;
 declare const getItemDefaultWidth: (item: any) => number;
-declare const sulaTableRenderTooltip: ({ text }: any) => React.JSX.Element;
+declare const sulaTableRenderTooltip: ({ text }: any) => JSX.Element;
 declare const renderNumberText: ({ text }: any) => any;
 declare const renderFixed2: (text: any) => any;
-declare const handleTextWarpCustom: (text: any, style?: {}) => React.JSX.Element;
+declare const handleTextWarpCustom: (text: any, style?: {}) => JSX.Element;
 declare const calculateValidPeriod: (start: any, end: any) => string;
-declare const handleTextWarp: (text: any) => React.JSX.Element;
+declare const handleTextWarp: (text: any) => JSX.Element;
 export { getSkuImg, updateGuanDate, textIcon, handleTextDoubleOrId, handleTextDouble, handleTextOverflow, handleTextLineFeed, handleTextTooltip, handleTextBreakSpaces, handleStatusBadge, HandleTotalCount, handleTooltip, handleCommonTimeRender, handleTooltipHours, tableColumnsImage, ColumnsEdit, userColumns, userInfoCard, getItemDefaultWidth, renderNumberText, sulaTableRenderTooltip, renderFixed2, handleTextWarpCustom, handleTextWarp, calculateValidPeriod };

package/dist/utils/utils.d.ts

@@ -31,3 +31,44 @@ export declare const randomString: (len?: any) => string;
 export declare const createUniqID: (length: any) => string;
 export declare const handleConvertResponse: (items: any, total: number) => object;
 export declare const noEmptyArray: (targetObj: any) => boolean;
+export declare const formContainerAndItemLayout: (type: string, title: any, name: string) => {
+    container: {
+        type: string;
+        props: {
+            title: any;
+            id: number;
+            level: number;
+            name: string;
+            bordered?: undefined;
+            isWhiteCard?: undefined;
+        };
+    };
+    itemLayout: {
+        span: number;
+        labelCol: {
+            span: number;
+        };
+        wrapperCol: {
+            span: number;
+        };
+    };
+} | {
+    container: {
+        type: string;
+        props: {
+            title: any;
+            id: number;
+            level: number;
+            bordered: null;
+            isWhiteCard: boolean;
+            name: string;
+        };
+    };
+    itemLayout: {
+        wrapperCol: {
+            span: number;
+        };
+        span?: undefined;
+        labelCol?: undefined;
+    };
+};

package/docs/flow-control-readme.md

@@ -0,0 +1,283 @@
+# 按钮流程控制架构与使用说明（重构版）
+
+## 背景
+为统一“列表页与详情页按钮显隐”的流程控制，新增了一套基于本地数据源的轻量机制，支持按业务类型、单据状态与资源编码进行控制，同时不改变既有权限与显隐表达式的使用方式。
+
+## 架构概览
+- 核心思想：数据先标注、视图只引用，不侵入既有权限与显隐逻辑
+- 统一数据源：`BUSINESS_FLOW_BUTTONS`（本地存储）
+- 列表页：在 `converter` 增强每条记录，生成 `__flowAllowedMap`；权限列在生成最终 `columns` 时对 `visible` 追加流程布尔条件
+- 详情页：提供 `processDetailButtonsVisible(buttons, params)` 对外方法，融合原 `visible` 与流程允许判定后返回按钮数组
+- 保护策略：未传 `tradeType` 或无匹配配置时不执行任何流程控制；只控制 `controlButtons` 范围内按钮
+
+## 核心数据源
+- 本地存储键：`BUSINESS_FLOW_BUTTONS`
+- 结构：
+```json
+[
+  {
+    "tradeType": 180,
+    "controlButtons": ["DRP_Sale_Sales_submit", "DRP_Sale_Sales_examine"],
+    "config": [
+      { "fromStatus": 1,  "buttons": ["DRP_Sale_Sales_submit"] },
+      { "fromStatus": 25, "buttons": ["DRP_Sale_Sales_examine", "DRP_Sale_Sales_back"] }
+    ]
+  }
+]
+```
+- 说明：
+  - `tradeType`：业务类型
+  - `controlButtons`：参与流程控制的按钮编码集合（控制范围）；不在此集合的按钮不受流程控制影响
+  - `config[].fromStatus`：状态值
+  - `config[].buttons`：该状态下允许显示的按钮编码集合
+
+## 控制原则
+- 未传入 `tradeType` 时，不执行任何流程控制逻辑（列表与详情一致）
+- 仅对 `controlButtons` 范围内的按钮做流程控制；其他按钮不改动
+- 顶部按钮：在控制范围内，保留“所有状态允许集合”中的按钮
+- 列权限按钮：在控制范围内，于既有 `visible` 表达式末尾追加 `&& record.__flowAllowedMap['<code>'] == true`
+- 权限不重复判断：流程控制不改动既有权限过滤（仍使用 `authFn` / `shouldUseAuth`）
+
+## 列表页实现
+- 文件：`src/components/Business/BsSulaQueryTable/index.tsx`
+- 行状态读取：
+  - 属性：`statusFieldPath`（可选，支持嵌套路径，如 `saleInfo.tradeStatus`）
+  - 未配置时自动探测：`status`、`orderStatus`、`flowStatus`、`tradeStatus`、`currentStatus`
+- 数据增强（convert）：
+  - 覆盖 `remoteDataSource.converter` 为管道：原 `converter` → 增强阶段
+  - 增强阶段为每条记录生成 `__flowAllowedMap`：`{ [code]: true | undefined }`
+  - 仅在传入 `tradeType` 且存在非空 `controlButtons` 时启用
+- 列权限按钮 `visible` 合并：
+  - 仅在传入 `tradeType` 且存在非空控制范围时，对 `isPermissionColumn: true` 且 `render` 为数组的列追加流程布尔条件
+  - 合并格式：
+    - 原：`#{record.tradeStatus == 25}`
+    - 新：`#{(record.tradeStatus == 25) && (record.__flowAllowedMap['DRP_Sale_Sales_examine'] == true)}`
+
+## 详情页实现
+- 文件：`src/components/Business/DetailPageWrapper/index.tsx`
+- 入口方法（对外）：
+```ts
+processDetailButtonsVisible(buttons: any[], params: any): any[]
+// params: { tradeType: number; fromStatus: number; 以及按钮 visible 表达式使用到的上下文 }
+```
+- 行为：
+  - 求值原 `visible` 表达式为布尔
+  - 仅在传入 `tradeType` 且按钮 `code ∈ controlButtons` 时，叠加“当前 fromStatus 的允许集合”判定
+  - 返回 `visible` 为最终布尔值的按钮数组，直接用于渲染
+
+## 调试日志（列表）
+- 顶部按钮：`[FlowCtrl:top]`、`[FlowCtrl:top-element]`
+- 数据增强：`__flowAllowedMap` 可在表格数据中查看
+- 列合并：最终 `columns` 中的按钮 `visible` 可直接检视字符串是否追加流程条件
+
+## 快速使用示例
+- 设置数据源：
+```js
+localStorage.setItem('BUSINESS_FLOW_BUTTONS', JSON.stringify([
+  {
+    tradeType: 180,
+    controlButtons: ['DRP_Sale_Order_edit'],
+    config: [
+      { fromStatus: 1, buttons: ['DRP_Sale_Order_edit'] },
+      { fromStatus: 25, buttons: [] }
+    ]
+  }
+]));
+```
+- 列表组件传参：
+```tsx
+<BsSulaQueryTable
+  tradeType={180}
+  statusFieldPath="saleInfo.tradeStatus"
+  {...otherProps}
+/>
+```
+- 列权限列按钮（最终 `columns`）：
+  - 原：`visible: '#{record.tradeStatus == 25}'`
+  - 新：内部自动生成为 `#{(record.tradeStatus == 25) && (record.__flowAllowedMap['DRP_Sale_Sales_examine'] == true)}`（仅控制范围内按钮）
+- 详情页使用：
+```ts
+const processed = processDetailButtonsVisible(buttons, { tradeType, fromStatus, viewMode, tradeStatus, detail, orderNo });
+```
+
+## 列表跳转详情（携带查询参数）
+- 示例（销售单）：
+```tsx
+<Button
+  onClick={() => {
+    history.push({
+      pathname: `/sales-management/sales-slip/view/${record.id}/${record.orderNo}`,
+      search: `?fromStatus=${record.saleInfo.tradeStatus}`,
+    });
+  }}
+  type="link"
+>
+  {text}
+</Button>
+```
+- 说明：
+  - 详情页通过查询参数 `fromStatus` 获取当前单据状态；与 `processDetailButtonsVisible` 的 `fromStatus` 对齐
+  - 列表需设置 `statusFieldPath: 'saleInfo.tradeStatus'` 以生成 `__flowAllowedMap`
+  - 建议所有“查看详情”链接统一携带 `fromStatus`，保持列表与详情流程控制的一致性
+
+### 详情页读取 fromStatus 并使用
+```ts
+import { useLocation } from 'umi';
+
+const { search } = useLocation();
+const qs = new URLSearchParams(search);
+const fromStatus = Number(qs.get('fromStatus') || '');
+
+// 与按钮可见性处理对齐
+const processed = processDetailButtonsVisible(buttons, {
+  tradeType: 180,
+  fromStatus,
+  // 其他上下文
+});
+
+// 传入 DetailPageWrapper（如需）
+<DetailPageWrapper
+  actionList={processed}
+  tradeType={180}
+  fromStatus={fromStatus}
+/>;
+```
+
+## 详情页示例（重构）
+两部分：下部按钮数组 + 顶部 DetailPageWrapper 按钮。
+
+1) 下部按钮数组（以部分按钮为例）：
+```ts
+actionsRender: processDetailButtonsVisible([
+  {
+    type: 'button',
+    props: { type: 'primary', children: '提交' },
+    code: 'DRP_Sale_Sales_submit',
+    visible: viewMode && tradeStatus == 1,
+    confirm: '是否提交该销售单？',
+    action: [ (ctx) => { /* 提交逻辑 */ } ],
+  },
+  {
+    type: 'button',
+    props: { type: 'primary', children: '驳回' },
+    code: 'DRP_Sale_Sales_back',
+    visible: viewMode && tradeStatus == 25,
+    confirm: '确认驳回 ？',
+    action: [ { url: `/drp-ops/new/tradeSubOrder/trigger?code=${orderNo}&event=7`, method: 'POST', converter: () => { message.success('驳回成功'); refreshForm(); } } ],
+  },
+  {
+    type: 'button',
+    props: { type: 'primary', children: '审核' },
+    code: 'DRP_Sale_Sales_examine',
+    visible: viewMode && tradeStatus == 25,
+    action: [ (ctx) => onAuditing(detail) ],
+  },
+  // ... 其他按钮
+], {
+  tradeType: 180,
+  fromStatus: tradeStatus,
+  viewMode,
+  tradeStatus,
+  detail,
+  orderNo,
+  modeType,
+  isProcessing,
+  hasDeletedOnce,
+})
+```
+
+2) 顶部 DetailPageWrapper 按钮：
+```tsx
+<DetailPageWrapper
+  title="详情页演示"
+  actionList={processDetailButtonsVisible(topButtons, { tradeType, fromStatus: tradeStatus, viewMode, tradeStatus })}
+  tradeType={180}
+  fromStatus={tradeStatus}
+/>
+```
+
+## 参数说明
+- 列表组件：
+  - `tradeType: number`（必须）
+  - `statusFieldPath: string`（可选，嵌套路径，如 `saleInfo.tradeStatus`）
+- 详情方法 `processDetailButtonsVisible(buttons, params)`：
+  - `params.tradeType: number`（必须）
+  - `params.fromStatus: number`（必须）
+  - 其他上下文：`viewMode`、`tradeStatus`、`detail`、`orderNo`、`modeType`、`isProcessing`、`hasDeletedOnce` 等按需传入
+- visible 格式：
+  - 字符串表达式：`'#{viewMode && tradeStatus == 25}'`
+  - 布尔或未定义：`true/false/undefined`（未定义视为 `true`）
+
+## tradeType 映射
+- 180：销售单
+- 可按业务扩展其他类型（在 `BUSINESS_FLOW_BUTTONS` 中新增对应项）
+
+## 初始化数据结构示例
+```js
+const flowConfig = [
+  {
+    tradeType: 180,
+    controlButtons: ['DRP_Sale_Order_edit'],
+    config: [
+      { fromStatus: 1, buttons: ['DRP_Sale_Order_edit'] },
+      { fromStatus: 25, buttons: [] },
+    ],
+  },
+];
+localStorage.setItem('BUSINESS_FLOW_BUTTONS', JSON.stringify(flowConfig));
+```
+
+### 详情页示例（重构）
+两部分：下部按钮数组 + 顶部 DetailPageWrapper 按钮。
+
+1) 下部按钮数组（以提交/驳回为例）：
+```ts
+actionsRender: processDetailButtonsVisible([
+  {
+    type: 'button',
+    props: { type: 'primary', children: '提交' },
+    code: 'DRP_Sale_Sales_submit',
+    visible: viewMode && tradeStatus == 1,
+    confirm: '是否提交该销售单？',
+    action: [ (ctx) => { /* 业务处理 */ } ],
+  },
+  {
+    type: 'button',
+    props: { type: 'primary', children: '驳回' },
+    code: 'DRP_Sale_Sales_back',
+    visible: viewMode && tradeStatus == 25,
+    confirm: '确认驳回 ？',
+    action: [ { url: `/drp-ops/new/tradeSubOrder/trigger?code=${orderNo}&event=7`, method: 'POST', converter: () => { message.success('驳回成功'); refreshForm(); } } ],
+  },
+  // ... 其他按钮
+], {
+  tradeType: 180,
+  fromStatus: tradeStatus,
+  viewMode,
+  tradeStatus,
+  detail,
+  orderNo,
+  modeType,
+  isProcessing,
+  hasDeletedOnce,
+})
+```
+
+2) 顶部 DetailPageWrapper 按钮（保持原传参方式）：
+```tsx
+<DetailPageWrapper
+  title="详情页演示"
+  actionList={processDetailButtonsVisible(topButtons, { tradeType, fromStatus: tradeStatus, viewMode, tradeStatus })}
+  tradeType={180}
+  fromStatus={tradeStatus}
+/>
+```
+
+## 常见问题
+- 按钮未展示且不在控制范围：流程控制不会影响非控制按钮，请确认是否是权限或原 `visible` 条件拦截
+- 顶部按钮未展示：仅在控制范围内按“所有状态允许集合”过滤；不在控制范围的顶栏按钮不受影响
+- 未传 `tradeType`：不会执行任何流程控制（顶栏/列表/详情均一致）
+
+## 变更范围
+- 列表：`BsSulaQueryTable/index.tsx`（convert增强、columns合并、顶部过滤与保护）
+- 详情：`DetailPageWrapper/index.tsx`（流程过滤保护）与 `processDetailButtonsVisible` 方法导出

package/package.json

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

package/src/components/Business/BsSulaQueryTable/SearchItemSetting.tsx

@@ -20,7 +20,6 @@ import { arrayMoveImmutable } from 'array-move';
 import close from '../../../assets/close.svg';
 import drag from '../../../assets/drag.svg';
 import shezhi from '../../../assets/icon-shezhi.svg';
-import shezhi from '../../../assets/icon-shezhi.svg';
 import './index.less';
 import ENUM from '@/utils/enumConfig';
 import { handleRequestUrl, judgeIsRequestSuccess } from '@/utils/requestUtils';

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

@@ -16,11 +16,32 @@ order: 1
 ### BsSulaQueryTable
 
 ```tsx
-import React, { useState } from 'react';
-import { Tabs } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { Tabs, Button } from 'antd';
 import { BsSulaQueryTable } from '../../../index.ts';
 
 export default () => {
+  const [rows, setRows] = useState([]);
+  useEffect(() => {
+    // @ts-ignore
+    window.__POWERED_BY_WUJIE__ = true;
+    const flowConfig = [
+      {
+        tradeType: 180,
+        controlButtons: ['DRP_Sale_Order_edit'],
+        config: [
+          { fromStatus: 1, buttons: ['DRP_Sale_Order_edit'] },
+          { fromStatus: 25, buttons: [] },
+        ],
+      },
+    ];
+    localStorage.setItem('BUSINESS_FLOW_BUTTONS', JSON.stringify(flowConfig));
+    const authCodes = [
+      'User_ApplicationList_add',
+      'DRP_Sale_Order_edit',
+    ];
+    localStorage.setItem('menuAuth_mainProject', JSON.stringify(authCodes));
+  }, []);
   const config = {
     needPageHeader: false,
     remoteDataSource: {
@@ -38,7 +59,8 @@ export default () => {
         return {
           ...item,
           id: `${index}`,
-          orderStatus: index === 1 ? '-1' : '',
+          orderStatus: index % 2 === 0 ? 1 : 25,
+          saleInfo: { tradeStatus: index % 2 === 0 ? 1 : 25 },
           name: `${item.name.first} ${item.name.last}`,
         };
       }),
@@ -73,6 +95,14 @@ export default () => {
         },
         action: ['refreshTable'],
       },
+      {
+        type: 'button',
+        code: 'User_ApplicationList_delete',
+        props: {
+          children: '删除',
+        },
+        action: ['refreshTable'],
+      },
     ],
     fields: [
             {
@@ -191,6 +221,28 @@ export default () => {
         key: 'email3',
         title: '邮箱3',
       },
+      {
+        key: 'operate',
+        title: '操作',
+        isPermissionColumn: true,
+        fixed: 'right',
+        render: [
+          {
+            type: 'link',
+            props: {
+              children: '编辑',
+              type: 'primary',
+            },
+            visible: '#{record.saleInfo.tradeStatus == 1}',
+            code: 'DRP_Sale_Order_edit',
+            action: {
+              type: 'route',
+              path: '/sales-management/sales-order/edit/#{record.id}',
+            },
+          },
+          
+        ],
+      },
     ],
     rowSelection: {
         onChange: (rowKey: any, rows: any) => {
@@ -199,6 +251,8 @@ export default () => {
         },
       },
     rowKey: 'id',
+    tradeType: 180,
+    statusFieldPath: 'saleInfo.tradeStatus',
     tableProps: {
       initialPaging: {
         pagination: {
@@ -216,4 +270,3 @@ export default () => {
   );
 };
 ```
-