@bit-sun/business-component 4.2.1-alpha.8-aiwei → 4.2.1-alpha.8

package/src/components/Solution/RuleComponent/README.md

@@ -0,0 +1,187 @@
+# RuleObjectComponent 规则组件
+
+## 简介
+`RuleObjectComponent` 是一个功能强大的规则构建器组件，支持可视化的条件组合（并且/或者逻辑嵌套）、动态参数插入、执行动作配置以及返回值配置。它广泛应用于需要灵活定义业务规则的场景。
+
+## 组件路径
+`src/components/Solution/RuleComponent/index.js`
+
+## Props 属性说明
+
+| 属性名 | 类型 | 必填 | 说明 |
+|Ref | --- | --- | --- |
+| regularDataList | `Array` | 是 | 规则左侧“对象”选择树的数据源。 |
+| operationList | `Array` | 是 | 规则中间“操作符”下拉列表的数据源。 |
+| ruleClassData | `Array` | 是 | 规则组件的核心数据模型，用于回显和存储规则配置。 |
+| callBack | `Function` | 是 | 数据变更时的回调函数，返回最新的 `ruleClassData`。 |
+| systemVariableList | `Array` | 否 | “插入参数”功能的数据源，允许用户选择系统变量而非固定值。 |
+| initialThresholdQuery | `Object` | 否 | 用于获取规则值域（右侧输入框/选择框）的初始查询参数。 |
+| ruleGroupInfo | `Object` | 否 | 规则组信息，用于规则组实例场景。 |
+| ruleTypeData | `Array` | 否 | “动作”配置的数据源。 |
+| ruleReturnConfig | `Array` | 否 | “返回值”配置的数据源。 |
+| disabled | `Boolean` | 否 | 是否禁用（只读模式）。 |
+| canDelete | `Boolean` | 否 | 是否显示删除规则按钮。 |
+| onlyOneRule | `Boolean` | 否 | 是否限制为单条规则（不显示新增规则按钮）。 |
+| onlyCondition | `Boolean` | 否 | 是否仅展示条件部分（隐藏动作和返回值）。 |
+| onlyAction | `Boolean` | 否 | 是否仅展示动作部分。 |
+| needShowInsertSQL | `Boolean` | 否 | 是否显示“插入SQL”功能按钮。 |
+| headerButtonComponentFun | `Function` | 否 | 自定义头部按钮渲染函数。 |
+
+## 数据结构示例
+
+### ruleClassData 结构
+```json
+[
+  {
+    "ruleName": "规则1",
+    "subExpression": [
+      {
+        "operationType": "logic", // logic 或 relation
+        "operationCode": "and",   // logic时为 and/or
+        "subExpression": [ ... ]  // 嵌套子条件
+      },
+      {
+        "operationType": "relation",
+        "elementId": "...",       // 左侧对象ID
+        "operationCode": "...",   // 操作符
+        "params": ["..."],        // 右侧值
+        // 新增参数条件控制
+        "isReqCondition": true,
+        "reqConditionData": {
+           "reqParamName": "param1",
+           "dataTypeCode": "21",
+           "operationCode": "eq",
+           "params": ["value"]
+        }
+      }
+    ],
+    "extraInfo": {
+      "execute": [], // 动作
+      "response": [] // 返回值
+    }
+  }
+]
+```
+
+## 功能特性
+1.  **多层级逻辑嵌套**：支持无限层级的“并且/或者”逻辑组合。
+2.  **动态表单渲染**：根据选择的对象属性类型（`dataTypeCode`），自动渲染对应的输入组件（文本框、日期选择、业务选择器等）。
+3.  **参数插入**：支持将系统变量作为条件值。
+4.  **参数条件控制**：支持为特定条件配置请求参数名称、类型及校验规则。
+5.  **动作与返回值**：支持配置规则命中后的执行动作及返回值。
+
+## 代码演示
+
+```tsx
+import React, { useState } from 'react';
+import { RuleComponent } from '../../../index';
+
+export default () => {
+  const [ruleClassData, setRuleClassData] = useState([]);
+  const [disabled, setDisabled] = useState(false);
+
+  // 模拟规则对象数据源
+  const regularDataList = [
+    {
+      id: 'user_info',
+      name: '用户信息',
+      code: 'user',
+      valueType: 'object',
+      propertyList: [
+        { id: 'age', name: '年龄', code: 'age', valueType: '22', inputType: 11, choiceType: 10,  },
+        { id: 'name', name: '姓名', code: 'name', valueType: '21', inputType: 11, choiceType: 10,  },
+      ]
+    },
+    {
+      id: 'order_info',
+      name: '订单信息',
+      code: 'order',
+      valueType: 'object',
+      propertyList: [
+        { id: 'amount', name: '金额', code: 'amount', valueType: '22', inputType: 11, choiceType: 10,  },
+      ]
+    }
+  ];
+
+  // 模拟操作符数据源
+  const operationList = [
+    {
+      code: '21', // 字符串
+      operationList: [
+        { code: 'eq', name: '等于' },
+        { code: 'cn', name: '包含' },
+      ]
+    },
+    {
+      code: '22', // 数值
+      operationList: [
+        { code: 'eq', name: '等于' },
+        { code: 'gt', name: '大于' },
+        { code: 'lt', name: '小于' },
+      ]
+    }
+  ];
+
+  // 模拟系统变量
+  const systemVariableList = [
+    { code: 'sys_uid', name: '当前用户ID' },
+    { code: 'sys_time', name: '当前时间' },
+  ];
+
+  const handleSave = () => {
+    console.log('保存规则数据:', JSON.stringify(ruleClassData, null, 2));
+    alert('规则数据已输出到控制台，请查看！');
+  };
+
+  return (
+    <div style={{ background: '#f0f2f5', padding: 20, width: '1200px' }}>
+      <div style={{ marginBottom: 16, textAlign: 'right' }}>
+        <button
+          onClick={() => setDisabled(!disabled)}
+          style={{
+            backgroundColor: '#faad14',
+            color: '#fff',
+            border: 'none',
+            padding: '6px 15px',
+            borderRadius: '2px',
+            cursor: 'pointer',
+            marginRight: '10px'
+          }}
+        >
+          {disabled ? '启用编辑' : '禁用编辑'}
+        </button>
+        <button
+          onClick={handleSave}
+          style={{
+            backgroundColor: '#1890ff',
+            color: '#fff',
+            border: 'none',
+            padding: '6px 15px',
+            borderRadius: '2px',
+            cursor: 'pointer'
+          }}
+        >
+          保存规则
+        </button>
+      </div>
+      <RuleComponent
+        regularDataList={regularDataList}
+        operationList={operationList}
+        ruleClassData={ruleClassData}
+        needShowInsertSQL={true}
+        needShowReqCondition={true}
+        systemVariableList={systemVariableList}
+        disabled={disabled}
+        callBack={(newData) => {
+          console.log('Rule Changed:', newData);
+          setRuleClassData([...newData]);
+        }}
+      />
+      <div style={{ marginTop: 20 }}>
+        <h4>当前规则数据：</h4>
+        <pre>{JSON.stringify(ruleClassData, null, 2)}</pre>
+      </div>
+    </div>
+  );
+};
+```

package/src/components/Solution/RuleComponent/RenderCompItem_README.md

@@ -0,0 +1,189 @@
+# RenderCompItem 组件说明文档
+
+`RenderCompItem` 是一个通用的表单控件渲染组件，它根据传入的配置对象 (`ites`) 动态渲染不同类型的 Ant Design 表单组件或业务封装组件。
+
+## 1. 组件引入
+
+```typescript
+import RenderCompItem from '@/components/Solution/RuleComponent/RenderCompItem';
+```
+
+## 2. Props 参数说明
+
+| 参数名 | 类型 | 必填 | 说明 |
+| --- | --- | --- | --- |
+| `ites` | `object` | 是 | 核心配置对象，决定渲染什么组件（见下文详解） |
+| `showValue` | `(code: string, type?: string) => any` | 是 | 获取组件当前值的回调函数 |
+| `handleEdit` | `(code: string, value: any) => void` | 是 | 组件值发生变化时的回调函数 |
+| `disabled` | `boolean` | 否 | 是否禁用组件 |
+| `regularDataList` | `array` | 否 | 用于表达式 (`Formula`) 组件的数据源列表 |
+| `others` | `object` | 否 | 扩展属性（目前主要用于 `CustomSelector` 的配置，**注意：源码中可能未正确解构此参数，使用自定义选择器时需检查**） |
+
+## 3. `ites` 配置详解
+
+`ites` 对象通过 `inputType`、`valueType` 和 `choiceType` 的组合来决定渲染的具体组件。
+
+### 3.1 基础输入类 (`inputType: 10`)
+
+当 `inputType` 为 `10` 时，根据 `valueType` 区分：
+
+| valueType | 组件类型 | 说明 | 对应 Antd 组件 |
+| --- | --- | --- | --- |
+| `21` | 文本输入 | 默认字符串输入 | `Input` |
+| `22` | 小数输入 | 保留2位小数 | `InputNumber` |
+| `23` | 整数输入 | 整数，无小数 | `InputNumber` |
+| `24` | 布尔开关 | Switch 开关 | `Switch` |
+| `32` | 日期时间 | 选择日期和时间 | `DatePicker` (showTime) |
+| `40` | 时间范围 | 选择时间范围 | `RangePicker` (showTime) |
+| `41` | 日期 | 仅选择日期 | `DatePicker` |
+
+### 3.2 选择类 (`inputType: 20 | 30`)
+
+*   `inputType: 20`: 单选
+*   `inputType: 30`: 多选
+
+根据 `choiceType` 区分具体业务组件：
+
+| choiceType | 组件类型 | 说明 | 数据源/依赖 |
+| --- | --- | --- | --- |
+| `10` | 枚举选择 | 静态选项 | 需提供 `ites.enumeration` 对象 (key-value) |
+| `20` | 数据字典 | 字典选择 | 需提供 `ites.dictionaryCode` |
+| `110` | 物理仓 | 业务选择器 | `BusinessSearchSelect` (physicalWarehouse) |
+| `120` | 逻辑仓 | 业务选择器 | `BusinessSearchSelect` (realWarehouse) |
+| `130` | 虚拟仓 | 业务选择器 | `BusinessSearchSelect` (virtualWarehouse) |
+| `140` | 渠道仓 | 业务选择器 | `BusinessSearchSelect` (channelWarehouse) |
+| `150` | SPU | 业务选择器 | `BusinessSearchSelect` (spuCommodity) |
+| `160` | SKU | 业务选择器 | `BusinessSearchSelect` (skuCommodity) |
+| `190` | 省市区 | 级联选择 | `BsCascader` |
+| `210` | 行政组织 | 树形选择 | `BusinessTreeSearchSelect` (department) |
+| `220` | 采购组织 | 树形选择 | `BusinessTreeSearchSelect` (purchase-organization) |
+| `230` | 销售组织 | 树形选择 | `BusinessTreeSearchSelect` (sales-organization) |
+| `240` | 供应商 | 业务选择器 | `BusinessSearchSelect` (supplier2) |
+| `250` | 客户 | 业务选择器 | `BusinessSearchSelect` (customer2) |
+| `260` | 店铺 | 业务选择器 | `BusinessSearchSelect` (shopFile2) |
+| `270` | 员工 | 业务选择器 | `BusinessSearchSelect` (employee2) |
+| `280` | 库存组织 | 树形选择 | `BusinessTreeSearchSelect` (stock-organization) |
+| `290` | 结算组织 | 树形选择 | `BusinessTreeSearchSelect` (settle-organization) |
+| `310` / `311`| 配送方式 | 业务选择器 | `BusinessSearchSelect` (deliveryMode) |
+| `360` | 角色 | 业务选择器 | `BusinessSearchSelect` (role) |
+| `410` | 品牌 | 业务选择器 | `BusinessSearchSelect` (brand) |
+| `420` | 类目 | 树形选择 | `BusinessTreeSearchSelect` (background-category) |
+| `40` | 自定义 | 自定义组件 | `CustomSelector` (依赖 `others.customSelectorConfig`) |
+
+### 3.3 表达式 (`inputType: 40`)
+
+渲染 `Formula` 组件，用于配置计算公式。依赖 `regularDataList` 作为变量源。
+
+## 4. 使用示例
+
+```tsx
+import React, { useState } from 'react';
+import RenderCompItem from './RenderCompItem';
+
+const Demo = () => {
+  const [formData, setFormData] = useState<any>({});
+
+  // 模拟数据回显
+  const showValue = (code: string) => {
+    return formData[code];
+  };
+
+  // 模拟数据更新
+  const handleEdit = (code: string, value: any) => {
+    console.log('Update:', code, value);
+    setFormData((prev: any) => ({ ...prev, [code]: value }));
+  };
+
+  // 配置项示例：文本输入
+  const inputConfig = {
+    code: 'userName',
+    inputType: 10,
+    valueType: 21,
+    defaultValue: '张三'
+  };
+
+  // 配置项示例：静态下拉选择
+  const selectConfig = {
+    code: 'status',
+    inputType: 20, // 单选
+    choiceType: 10, // 枚举
+    enumeration: {
+      '1': '启用',
+      '0': '禁用'
+    }
+  };
+
+  // 配置项示例：SKU 选择器 (多选)
+  const skuSelectConfig = {
+    code: 'skuCodes',
+    inputType: 30, // 多选
+    choiceType: 160, // SKU 选择器
+  };
+
+  // 配置项示例：数据字典选择 (单选)
+  const dictSelectConfig = {
+    code: 'warehouseType',
+    inputType: 20, // 单选
+    choiceType: 20, // 数据字典
+    dictionaryCode: 'SC0001' // 传入字典编码，组件会自动请求接口获取字典数据
+  };
+
+  return (
+    <div>
+      <div style={{ marginBottom: 20 }}>
+        <label>用户名：</label>
+        <RenderCompItem
+          ites={inputConfig}
+          showValue={showValue}
+          handleEdit={handleEdit}
+          regularDataList={[]}
+        />
+      </div>
+
+      <div style={{ marginBottom: 20 }}>
+        <label>状态：</label>
+        <RenderCompItem
+          ites={selectConfig}
+          showValue={showValue}
+          handleEdit={handleEdit}
+          regularDataList={[]}
+        />
+      </div>
+
+      <div style={{ marginBottom: 20 }}>
+        <label>商品SKU：</label>
+        <RenderCompItem
+          ites={skuSelectConfig}
+          showValue={showValue}
+          handleEdit={handleEdit}
+          regularDataList={[]}
+        />
+      </div>
+
+      <div>
+        <label>仓库类型(数据字典)：</label>
+        <RenderCompItem
+          ites={dictSelectConfig}
+          showValue={showValue}
+          handleEdit={handleEdit}
+          regularDataList={[]}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Demo;
+```
+
+## 5. 依赖说明
+
+该组件依赖以下项目内部组件和库：
+*   `antd`
+*   `bssula` (request)
+*   `@/components/Functional/BsAntdSula` (BsCascader)
+*   `@/index` (BusinessSearchSelect, BusinessTreeSearchSelect)
+*   内部组件: `./Formula`, `./InnerSelect`, `./CustomPlugin/CustomSelector`
+*   工具函数: `../../../utils/utils`
+
+使用前请确保相关依赖已安装且路径正确。

package/src/components/Solution/RuleComponent/RuleField.md

@@ -0,0 +1,63 @@
+# RuleField 规则字段组件
+
+## 简介
+`RuleField` 是 `RuleObjectComponent` 内部使用的核心子组件，主要负责根据规则配置的**数据类型**和**操作符**，动态渲染出合适的输入控件（如输入框、下拉框、日期选择器、业务选择器等）。
+
+## 组件路径
+`src/components/Solution/RuleComponent/ruleFiled.js`
+
+## Props 属性说明
+
+| 属性名 | 类型 | 说明 |
+| --- | --- | --- |
+| selectOperation | `String` | 当前选中的操作符编码（如 `eq`, `in`, `be` 等）。 |
+| dataTypeCode | `String` | 数据类型编码（21:字符串, 22:数值, 41:日期, 32:日期时间等）。 |
+| dataChoiceBusinessType | `String`/`Number` | 业务数据选择类型（如 110:物理仓, 120:逻辑仓, 250:客户 等），用于决定渲染哪种业务选择器。 |
+| dataInputBusinessType | `Number` | 输入交互类型（11:单选, 12:多选）。 |
+| values | `Array` | 当前输入的值数组。 |
+| valueNames | `Array` | 当前输入值的名称数组（用于回显）。 |
+| callback | `Function` | 值发生变化时的回调，签名：`(newValues, newValueNames) => void`。 |
+| disabled | `Boolean` | 是否禁用。 |
+| customerWidth | `String` | 自定义控件宽度。 |
+| queryIdentify | `String` | 字典或枚举的标识符，用于获取下拉选项数据。 |
+| queryIdentifyType | `String` | 标识符类型（`dictCodeIdentify`, `dynamicDictCodeIdentify` 等）。 |
+| initialThresholdQuery | `Object` | 初始查询参数。 |
+| propertyCode | `String` | 属性编码。 |
+| others | `Object` | 其他扩展配置，如 `customSelectorConfig`。 |
+
+## 支持的控件类型
+
+组件根据 `dataTypeCode` 和 `dataChoiceBusinessType` 自动匹配以下控件：
+
+1.  **基础控件**：
+    *   Input (文本/数值)
+    *   DatePicker / RangePicker (日期/时间)
+    *   Select (枚举/字典下拉)
+
+2.  **区间控件**：
+    *   当操作符为区间类型（如 `be`, `bed`）时，自动渲染两个输入控件及中间的 `~` 符号。
+
+3.  **业务选择器**：
+    *   物理仓 (`physicalWarehouse`)
+    *   逻辑仓 (`realWarehouse`)
+    *   虚拟仓 (`virtualWarehouse`)
+    *   渠道仓 (`channelWarehouse`)
+    *   商品SPU/SKU
+    *   省市区级联 (`BsCascader`)
+    *   行政/采购/销售/库存/结算组织 (`BusinessTreeSearchSelect`)
+    *   供应商/客户/店铺/员工 (`BusinessSearchSelect`)
+    *   品牌/类目
+    *   自定义选择器 (`CustomSelector`)
+
+## 使用示例
+
+```javascript
+<RuleField
+  selectOperation="eq"
+  dataTypeCode="21"
+  values={['some value']}
+  valueNames={['some value']}
+  callback={(vals, names) => console.log(vals, names)}
+  disabled={false}
+/>
+```