@bit-sun/business-component 4.2.0-alpha.23 → 4.2.0-alpha.25

package/dist/index.esm.js

@@ -39134,6 +39134,7 @@ var RuleObjectComponent = /*#__PURE__*/function (_Component) {
               itemDetail.params = [];
             } else {
               itemDetail.systemCode = null;
+              delete itemDetail.type;
             }
             _this.setState({
               ruleClassData: ruleClassData
@@ -39157,6 +39158,8 @@ var RuleObjectComponent = /*#__PURE__*/function (_Component) {
             itemDetail.type = 30;
             itemDetail.paramNames = [];
             itemDetail.params = [];
+          } else {
+            delete itemDetail.type;
           }
           _this.setState({
             ruleClassData: ruleClassData
@@ -39208,12 +39211,24 @@ var RuleObjectComponent = /*#__PURE__*/function (_Component) {
           padding: '10px',
           borderRadius: '4px'
         }
-      }, /*#__PURE__*/React$1.createElement("span", {
+      }, /*#__PURE__*/React$1.createElement(Select, {
+        disabled: disabled,
         style: {
-          marginRight: 8,
-          flexShrink: 0
-        }
-      }, "\u8BF7\u6C42\u53C2\u6570\u540D\u79F0:"), /*#__PURE__*/React$1.createElement(Input, {
+          width: 150,
+          marginRight: 10
+        },
+        placeholder: "\u8BF7\u9009\u62E9",
+        value: String(itemDetail.reqConditionData.reqParamType || '10'),
+        onChange: function onChange(val) {
+          return _this.handleReqDataChange(itemDetail, 'reqParamType', val);
+        }
+      }, /*#__PURE__*/React$1.createElement(Select.Option, {
+        value: "10"
+      }, "\u8BF7\u6C42\u53C2\u6570\u540D\u79F0"), /*#__PURE__*/React$1.createElement(Select.Option, {
+        value: "20"
+      }, "\u8BF7\u6C42\u5934\u53C2\u6570\u540D\u79F0"), /*#__PURE__*/React$1.createElement(Select.Option, {
+        value: "40"
+      }, "\u6E90\u8BF7\u6C42\u5730\u5740")), String(itemDetail.reqConditionData.reqParamType || '10') !== '40' && /*#__PURE__*/React$1.createElement(Input, {
         disabled: disabled,
         style: {
           width: 150,
@@ -39769,6 +39784,8 @@ var RuleObjectComponent = /*#__PURE__*/function (_Component) {
         if (valueNames) {
           itemDetail.reqConditionData.paramNames = valueNames;
         }
+      } else if (field === 'reqParamType') {
+        itemDetail.reqConditionData.reqParamType = value;
       }
       _this.setState({
         ruleClassData: ruleClassData

package/dist/index.js

@@ -39157,6 +39157,7 @@ var RuleObjectComponent = /*#__PURE__*/function (_Component) {
               itemDetail.params = [];
             } else {
               itemDetail.systemCode = null;
+              delete itemDetail.type;
             }
             _this.setState({
               ruleClassData: ruleClassData
@@ -39180,6 +39181,8 @@ var RuleObjectComponent = /*#__PURE__*/function (_Component) {
             itemDetail.type = 30;
             itemDetail.paramNames = [];
             itemDetail.params = [];
+          } else {
+            delete itemDetail.type;
           }
           _this.setState({
             ruleClassData: ruleClassData
@@ -39231,12 +39234,24 @@ var RuleObjectComponent = /*#__PURE__*/function (_Component) {
           padding: '10px',
           borderRadius: '4px'
         }
-      }, /*#__PURE__*/React__default['default'].createElement("span", {
+      }, /*#__PURE__*/React__default['default'].createElement(antd.Select, {
+        disabled: disabled,
         style: {
-          marginRight: 8,
-          flexShrink: 0
-        }
-      }, "\u8BF7\u6C42\u53C2\u6570\u540D\u79F0:"), /*#__PURE__*/React__default['default'].createElement(antd.Input, {
+          width: 150,
+          marginRight: 10
+        },
+        placeholder: "\u8BF7\u9009\u62E9",
+        value: String(itemDetail.reqConditionData.reqParamType || '10'),
+        onChange: function onChange(val) {
+          return _this.handleReqDataChange(itemDetail, 'reqParamType', val);
+        }
+      }, /*#__PURE__*/React__default['default'].createElement(antd.Select.Option, {
+        value: "10"
+      }, "\u8BF7\u6C42\u53C2\u6570\u540D\u79F0"), /*#__PURE__*/React__default['default'].createElement(antd.Select.Option, {
+        value: "20"
+      }, "\u8BF7\u6C42\u5934\u53C2\u6570\u540D\u79F0"), /*#__PURE__*/React__default['default'].createElement(antd.Select.Option, {
+        value: "40"
+      }, "\u6E90\u8BF7\u6C42\u5730\u5740")), String(itemDetail.reqConditionData.reqParamType || '10') !== '40' && /*#__PURE__*/React__default['default'].createElement(antd.Input, {
         disabled: disabled,
         style: {
           width: 150,
@@ -39792,6 +39807,8 @@ var RuleObjectComponent = /*#__PURE__*/function (_Component) {
         if (valueNames) {
           itemDetail.reqConditionData.paramNames = valueNames;
         }
+      } else if (field === 'reqParamType') {
+        itemDetail.reqConditionData.reqParamType = value;
       }
       _this.setState({
         ruleClassData: ruleClassData

package/package.json

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

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/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}
+/>
+```

package/src/components/Solution/RuleComponent/index.js

@@ -1017,6 +1017,7 @@ class RuleObjectComponent extends Component {
                       itemDetail.params = [];
                     } else {
                       itemDetail.systemCode = null;
+                      delete itemDetail.type;
                     }
 
                     this.setState(
@@ -1050,6 +1051,8 @@ class RuleObjectComponent extends Component {
                     itemDetail.type = 30;
                     itemDetail.paramNames = [];
                     itemDetail.params = [];
+                  } else {
+                    delete itemDetail.type;
                   }
 
                   this.setState(
@@ -1143,21 +1146,36 @@ class RuleObjectComponent extends Component {
                     borderRadius: '4px',
                   }}
                 >
-                <span style={{ marginRight: 8, flexShrink: 0 }}>
-                  请求参数名称:
-                </span>
-                <Input
+                <Select
                   disabled={disabled}
                   style={{ width: 150, marginRight: 10 }}
-                  value={itemDetail.reqConditionData.reqParamName}
-                  onChange={(e) =>
-                    this.handleReqDataChange(
-                      itemDetail,
-                      'reqParamName',
-                      e.target.value,
-                    )
+                  placeholder="请选择"
+                  value={String(
+                    itemDetail.reqConditionData.reqParamType || '10',
+                  )}
+                  onChange={(val) =>
+                    this.handleReqDataChange(itemDetail, 'reqParamType', val)
                   }
-                />
+                >
+                  <Select.Option value="10">请求参数名称</Select.Option>
+                  <Select.Option value="20">请求头参数名称</Select.Option>
+                  <Select.Option value="40">源请求地址</Select.Option>
+                </Select>
+                {String(itemDetail.reqConditionData.reqParamType || '10') !==
+                  '40' && (
+                  <Input
+                    disabled={disabled}
+                    style={{ width: 150, marginRight: 10 }}
+                    value={itemDetail.reqConditionData.reqParamName}
+                    onChange={(e) =>
+                      this.handleReqDataChange(
+                        itemDetail,
+                        'reqParamName',
+                        e.target.value,
+                      )
+                    }
+                  />
+                )}
 
                 <span style={{ marginRight: 8, flexShrink: 0 }}>类型:</span>
                 <Select
@@ -1843,6 +1861,8 @@ class RuleObjectComponent extends Component {
       if (valueNames) {
         itemDetail.reqConditionData.paramNames = valueNames;
       }
+    } else if (field === 'reqParamType') {
+      itemDetail.reqConditionData.reqParamType = value;
     }
 
     this.setState(

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

@@ -0,0 +1,97 @@
+# RuleSetter 规则设置器组件
+
+## 简介
+`RuleSetter` 是一个封装了完整规则编辑逻辑的高级业务组件。它内部集成了 `RuleObjectComponent`，并内置了规则模板详情查询、规则对象树加载、操作符获取、规则实例数据回显以及规则保存等全套数据交互逻辑。
+
+开发者只需提供规则模板 ID (`id`) 和业务标识 (`extStrField01`)，即可快速在页面中引入一个功能完备的规则编辑器。
+
+## 组件路径
+`src/components/Solution/RuleSetter/index.tsx`
+
+## Props 属性说明
+
+| 属性名 | 类型 | 必填 | 说明 |
+|Ref | --- | --- | --- |
+| id / sceneId | `String` | 是 | 规则模板 ID，用于加载规则元数据（对象树、操作符等）。 |
+| extStrField01 | `String` | 否 | 业务关键字段（如业务单据ID、租户ID等），用于区分同一模板下的不同业务实例。 |
+| name | `String` | 否 | 规则实例名称。 |
+| type | `String` | 否 | 组件模式。`instance` 表示规则实例模式（加载并保存具体的业务规则）；为空则通常用于模板设计模式。 |
+| saveUrl | `String` | 否 | 自定义保存接口地址。默认为 `/basic/ruleDetail/addAndUpdate`。 |
+| customerValidator | `Function` | 否 | 自定义校验函数。`(ruleResultList, ruleTypeData) => boolean`。 |
+| parseCustomParams | `Function` | 否 | 自定义保存参数处理函数。`(params) => newParams`。 |
+| RuleObjectComponentProps | `Object` | 否 | 透传给底层 `RuleObjectComponent` 的属性对象。可用于开启特定功能（如插入SQL）。 |
+
+## 开启“插入 SQL”功能
+
+通过 `RuleObjectComponentProps` 属性，可以将 `needShowInsertSQL` 参数传递给底层的规则组件，从而开启“插入 SQL”功能。
+
+开启后，在每条规则条件的右侧会新增一个“插入 SQL”按钮，允许用户直接输入 SQL 片段作为条件值。
+
+```javascript
+<RuleSetter
+  id="template_123"
+  type="instance"
+  RuleObjectComponentProps={{
+    needShowInsertSQL: true
+  }}
+/>
+```
+
+## 代码演示
+
+```tsx
+import React, { useRef } from 'react';
+import { Button, message } from 'antd';
+import { RuleSetter } from '../../../index';
+
+export default () => {
+  const ruleSetterRef = useRef();
+
+  const handleSave = () => {
+    if (ruleSetterRef.current) {
+      // 调用组件内部的保存方法
+      ruleSetterRef.current.handleSave()
+        .then(() => {
+          message.success('规则保存成功');
+        })
+        .catch((err) => {
+          console.error('保存失败', err);
+        });
+    }
+  };
+
+  return (
+    <div style={{ background: '#f5f5f5', padding: 20 }}>
+      <div style={{ marginBottom: 16, textAlign: 'right' }}>
+        <Button type="primary" onClick={handleSave}>
+          保存规则
+        </Button>
+      </div>
+      
+      <RuleSetter
+        ref={ruleSetterRef}
+        id="100000132" // 示例模板ID，请替换为实际存在的ID
+        type="instance"
+        extStrField01="business_order_001" // 示例业务ID
+        name="订单审核规则"
+        // 开启插入SQL功能
+        RuleObjectComponentProps={{
+          needShowInsertSQL: true,
+          needShowReqCondition: true,
+          // 也可以传递其他 RuleObjectComponent 支持的属性
+          onlyCondition: false
+        }}
+        saveUrl="/api/custom/save/rule" // 可选：自定义保存接口
+      />
+    </div>
+  );
+};
+```
+
+## 注意事项
+
+1.  **数据依赖**：该组件强依赖后端接口（如 `/basic/ruleTemplate/`等），请确保后端服务正常且接口地址匹配。
+2.  **Ref 引用**：组件暴露了 `handleSave` 方法，父组件需要通过 `ref` 来触发保存操作。
+3.  **模式区别**：
+    *   `type="instance"`：会根据 `id` 和 `extStrField01` 加载已保存的规则实例数据。
+    *   `type` 为空：主要用于设计规则模板本身，加载的是模板定义数据。