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

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

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

@@ -35,12 +35,10 @@ import {
 } from './util';
 import { getDictionarySource, judgeIsEmpty, uuid } from '../../../utils/utils';
 import { coverToParallel } from '../../../utils/TreeUtils';
-import {
-  BusinessSearchSelect,
-  BusinessTreeSearchSelect,
-  EllipsisTooltip,
-  BsCascader,
-} from '../../../index';
+import BusinessSearchSelect from '../../Business/SearchSelect';
+import BusinessTreeSearchSelect from '../../Business/TreeSearchSelect';
+import EllipsisTooltip from '../../Functional/EllipsisTooltip';
+import { BsCascader } from '../../Functional/BsAntdSula/index';
 import { request } from 'bssula';
 import Formula from './Formula';
 import RenderSpecificAction from './renderSpecificAction';
@@ -48,6 +46,19 @@ import RenderCompItem from './RenderCompItem';
 
 const { RangePicker } = DatePicker;
 
+const FIXED_DATA_TYPES = {
+  10: '字符串',
+  20: '短整数',
+  21: '长整数',
+  22: '小数',
+  40: '数组',
+  41: '布尔值',
+  12: '富文本',
+  30: '日期',
+  31: '时间',
+  32: '日期时间',
+};
+
 class RuleObjectComponent extends Component {
   constructor(props) {
     super(props);
@@ -151,6 +162,8 @@ class RuleObjectComponent extends Component {
                   value: element.id,
                   id: element.id,
                   dataTypeCode: element.valueType,
+                  entityValueType: element.entityValueType,
+                  entityInputType: element.entityInputType,
                   dataChoiceBusinessType: element.choiceType,
                   dataInputBusinessType: element.inputType,
                   info: element.info,
@@ -178,6 +191,8 @@ class RuleObjectComponent extends Component {
             metaObjectCode: this.props.metaObjectCode || item.code,
             ...item,
             dataTypeCode: item.valueType,
+            entityValueType: item.entityValueType,
+            entityInputType: item.entityInputType,
             dataChoiceBusinessType: item.choiceType,
             dataInputBusinessType: item.inputType,
           }),
@@ -225,6 +240,8 @@ class RuleObjectComponent extends Component {
         value: element.id,
         id: element.id,
         dataTypeCode: element.valueType,
+        entityValueType: element.entityValueType,
+        entityInputType: element.entityInputType,
         dataChoiceBusinessType: element.choiceType,
         dataInputBusinessType: element.inputType,
         info: element.info,
@@ -689,6 +706,7 @@ class RuleObjectComponent extends Component {
       disabled,
       systemVariableList,
       needShowInsertSQL,
+      needShowReqCondition,
     } = this.props;
     let thresholdQuery = {
       ...initialThresholdQuery,
@@ -748,6 +766,7 @@ class RuleObjectComponent extends Component {
       <div
         className={'rule_line_content'}
         style={{ display: 'flex', marginBottom: '0px', padding: '10px 0px' }}
+        key={itemDetail.elementId}
       >
         <div
           className={'logical_operate_content'}
@@ -823,6 +842,8 @@ class RuleObjectComponent extends Component {
                   itemDetail.elementName = nodeInfo.triggerNode.props.title;
                   itemDetail.dataTypeCode =
                     nodeInfo.triggerNode.props.dataTypeCode;
+                  itemDetail.entityValueType = nodeInfo.triggerNode.props.entityValueType;
+                  itemDetail.entityInputType = nodeInfo.triggerNode.props.entityInputType;
                   itemDetail.metaObjectCode =
                     nodeInfo.triggerNode.props.metaObjectCode;
                   itemDetail.isInsertParam = false;
@@ -996,6 +1017,7 @@ class RuleObjectComponent extends Component {
                       itemDetail.params = [];
                     } else {
                       itemDetail.systemCode = null;
+                      delete itemDetail.type;
                     }
 
                     this.setState(
@@ -1029,6 +1051,8 @@ class RuleObjectComponent extends Component {
                     itemDetail.type = 30;
                     itemDetail.paramNames = [];
                     itemDetail.params = [];
+                  } else {
+                    delete itemDetail.type;
                   }
 
                   this.setState(
@@ -1048,13 +1072,21 @@ class RuleObjectComponent extends Component {
           <div
             style={{
               display:
-                itemDetail.operationType == 'logic' && !disabled
+                itemDetail.operationType == 'logic' &&
+                (!disabled ||
+                  (itemDetail.reqConditionData &&
+                    itemDetail.reqConditionData.reqParamName &&
+                    itemDetail.reqConditionData.params?.length))
                   ? 'block'
                   : 'none',
             }}
           >
             <span
-              style={{ color: '#008fe0', cursor: 'pointer' }}
+              style={{
+                color: '#008fe0',
+                cursor: 'pointer',
+                display: disabled ? 'none' : 'inline',
+              }}
               type="link"
               onClick={() => {
                 this.addPeerRule(itemDetail);
@@ -1069,6 +1101,138 @@ class RuleObjectComponent extends Component {
               />
               添加条件
             </span>
+            {needShowReqCondition && (
+              <span
+                style={{
+                  marginLeft: 10,
+                  display: disabled ? 'none' : 'inline',
+                }}
+              >
+                <Button
+                  type="link"
+                  disabled={
+                    disabled &&
+                    (!itemDetail.reqConditionData ||
+                      !itemDetail.reqConditionData.reqParamName ||
+                      !itemDetail.reqConditionData.params?.length)
+                  }
+                  style={{ padding: 0, height: 'auto' }}
+                  onClick={() => this.handleReqConditionToggle(itemDetail)}
+                >
+                  {itemDetail.isReqCondition
+                    ? '取消参数条件控制'
+                    : '参数条件控制'}
+                </Button>
+              </span>
+            )}
+            {(itemDetail.isReqCondition ||
+              (disabled &&
+                itemDetail.reqConditionData &&
+                itemDetail.reqConditionData.reqParamName &&
+                itemDetail.reqConditionData.params?.length)) &&
+              itemDetail.reqConditionData && (
+                <div
+                  style={{
+                    marginTop: 10,
+                    display:
+                      disabled &&
+                      (!itemDetail.reqConditionData.reqParamName ||
+                        !itemDetail.reqConditionData.params?.length)
+                        ? 'none'
+                        : 'flex',
+                    alignItems: 'center',
+                    background: '#f5f5f5',
+                    padding: '10px',
+                    borderRadius: '4px',
+                  }}
+                >
+                <Select
+                  disabled={disabled}
+                  style={{ width: 150, marginRight: 10 }}
+                  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
+                  disabled={disabled}
+                  style={{ width: 120, marginRight: 10 }}
+                  value={itemDetail.reqConditionData.dataTypeCode}
+                  onChange={(val) =>
+                    this.handleReqDataChange(itemDetail, 'dataTypeCode', val)
+                  }
+                >
+                  {Object.keys(FIXED_DATA_TYPES).map((code) => (
+                    <Select.Option key={code} value={code}>
+                      {FIXED_DATA_TYPES[code]}
+                    </Select.Option>
+                  ))}
+                </Select>
+
+                <Select
+                  disabled={disabled}
+                  style={{ width: 120, marginRight: 10 }}
+                  value={itemDetail.reqConditionData.operationCode}
+                  onChange={(val) =>
+                    this.handleReqDataChange(itemDetail, 'operationCode', val)
+                  }
+                >
+                  {[
+        { 'code': '1', 'name': '在集合' },
+        { 'code': '2', 'name': '不等于' },
+        { code: '3', name: '小于' },
+        { code: '4', name: '大于' },
+        { code: '5', name: '等于' },
+      ].map((op) => (
+                    <Select.Option key={op.code} value={op.code}>
+                      {op.name}
+                    </Select.Option>
+                  ))}
+                </Select>
+
+                <RuleField
+                  customerWidth={'180px'}
+                  isQueryParams={true}
+                  selectOperation={itemDetail.reqConditionData.operationCode}
+                  dataTypeCode={itemDetail.reqConditionData.dataTypeCode}
+                  values={itemDetail.reqConditionData.params || []}
+                  valueNames={itemDetail.reqConditionData.paramNames || []}
+                  callback={(newValues, newValueNames) =>
+                    this.handleReqDataChange(
+                      itemDetail,
+                      'params',
+                      newValues,
+                      newValueNames,
+                    )
+                  }
+                  disabled={disabled}
+                />
+              </div>
+            )}
           </div>
         </div>
       </div>
@@ -1496,6 +1660,8 @@ class RuleObjectComponent extends Component {
     delete itemDetail.params;
     delete itemDetail.paramNames;
     delete itemDetail.dataTypeCode;
+    delete itemDetail.entityValueType;
+    delete itemDetail.entityInputType;
     delete itemDetail.elementId;
     delete itemDetail.elementName;
     delete itemDetail.metaObjectCode;
@@ -1561,6 +1727,8 @@ class RuleObjectComponent extends Component {
           parentDetail.elementName = parentDetail.subExpression[0].elementName;
           parentDetail.dataTypeCode =
             parentDetail.subExpression[0].dataTypeCode;
+          parentDetail.entityValueType = parentDetail.subExpression[0].entityValueType;
+          parentDetail.entityInputType = parentDetail.subExpression[0].entityInputType;
           delete parentDetail.subExpression;
         }
       }
@@ -1646,6 +1814,67 @@ class RuleObjectComponent extends Component {
     );
   };
 
+  handleReqConditionToggle = (itemDetail) => {
+    const { ruleClassData } = this.state;
+    const { callBack } = this.props;
+    itemDetail.isReqCondition = !itemDetail.isReqCondition;
+    if (itemDetail.isReqCondition && !itemDetail.reqConditionData) {
+      itemDetail.reqConditionData = {
+        operationType: 'relation',
+        dataTypeCode: '10',
+        entityInputType: '10',
+        entityValueType: '10',
+        operationCode: '',
+        reqParamName: '',
+        params: [],
+        paramNames: [],
+      };
+    }
+    this.setState(
+      {
+        ruleClassData,
+      },
+      () => {
+        callBack(ruleClassData);
+      },
+    );
+  };
+
+  handleReqDataChange = (itemDetail, field, value, valueNames) => {
+    const { ruleClassData } = this.state;
+    const { callBack } = this.props;
+    if (!itemDetail.reqConditionData) return;
+
+    if (field === 'dataTypeCode') {
+      itemDetail.reqConditionData.dataTypeCode = value;
+      itemDetail.reqConditionData.entityInputType = value;
+      itemDetail.reqConditionData.entityValueType = value;
+      itemDetail.reqConditionData.operationCode = '';
+      itemDetail.reqConditionData.params = [];
+      itemDetail.reqConditionData.paramNames = [];
+    } else if (field === 'operationCode') {
+      itemDetail.reqConditionData.operationCode = value;
+    } else if (field === 'reqParamName') {
+      itemDetail.reqConditionData.reqParamName = value;
+    } else if (field === 'params') {
+      itemDetail.reqConditionData.params = value;
+      if (valueNames) {
+        itemDetail.reqConditionData.paramNames = valueNames;
+      }
+    } else if (field === 'reqParamType') {
+      itemDetail.reqConditionData.reqParamType = value;
+    }
+
+    this.setState(
+      {
+        ruleClassData,
+      },
+      () => {
+        callBack(ruleClassData);
+      },
+    );
+  };
+
   render() {
     const { onlyOneRule, callBack, disabled, headerButtonComponentFun } = this.props;
     const { ruleClassData, modalParams } = this.state;