@dckj-npm/dc-material 0.1.379 → 0.1.381

package/es/components/custom-form/custom-form.d.ts

@@ -42,6 +42,19 @@ export interface CustomFormItemSchema {
     }>;
     /** 动态选项（绑定变量/数据源后优先使用），仅 Select/RadioGroup/CheckboxGroup 生效 */
     optionsBind?: any[];
+    /**
+     * optionsBind 数据源中用作选项显示文字的字段名（当数据源字段名不是 'label' 时填写）。
+     * 例如数据源字段为 package_name，则填 "package_name"。
+     * 不填则默认使用 'label' 字段。
+     */
+    optionsLabelKey?: string;
+    /**
+     * optionsBind 数据源中用作选项存储值的字段名（当数据源字段名不是 'value' 时填写）。
+     * 例如数据源字段为 id，则填 "id"；字段为 package_name，则填 "package_name"。
+     * 不填则默认使用 'value' 字段。
+     * 配置后，字段联动的 matchKey 会自动默认使用此字段名，无需在联动规则中重复配置。
+     */
+    optionsValueKey?: string;
     /** 该表单项占几列（不超过父级 columns），默认 1 */
     columnSpan?: number;
     /** 组件尺寸：small / medium / large，默认继承表单全局 size */

package/es/components/custom-form/custom-form.js

@@ -30,7 +30,7 @@ var _excluded = ["format", "showTime"],
  *   - labelCol / wrapperCol               via otherProps 透传，labelAlign=left 时配合使用
  *   - onReset                             点击重置按钮后触发的回调事件
  */
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import "./index.scss";
 // ─── 调试日志工具（阶段一）────────────────────────────────────────────────────
 var DEBUG_PREFIX = '[CustomForm v0.4]';
@@ -203,22 +203,36 @@ var renderFormItemComponent = function renderFormItemComponent(item) {
   var _item$optionsBind;
   var componentProps = item.componentProps || {};
   // optionsBind（动态绑定）优先级 > componentProps.dataSource > options（静态）
-  var dataSource = (_item$optionsBind = item.optionsBind) !== null && _item$optionsBind !== void 0 && _item$optionsBind.length ? item.optionsBind : componentProps.dataSource || item.options || [];
+  var rawDataSource = (_item$optionsBind = item.optionsBind) !== null && _item$optionsBind !== void 0 && _item$optionsBind.length ? item.optionsBind : componentProps.dataSource || item.options || [];
+
+  // 若配置了 optionsLabelKey / optionsValueKey，将原始数据字段映射到 label / value 字段
+  // 这使得 API 返回的任意格式（如 {package_name, id, package_price}）均可直接用作选项数据源
+  var labelKey = item.optionsLabelKey;
+  var valueKey = item.optionsValueKey;
+  var dataSource = (labelKey || valueKey) && Array.isArray(rawDataSource) ? rawDataSource.map(function (opt) {
+    var _opt$labelKey, _opt$valueKey;
+    return _extends({}, opt, labelKey ? {
+      label: (_opt$labelKey = opt[labelKey]) !== null && _opt$labelKey !== void 0 ? _opt$labelKey : opt.label
+    } : {}, valueKey ? {
+      value: (_opt$valueKey = opt[valueKey]) !== null && _opt$valueKey !== void 0 ? _opt$valueKey : opt.value
+    } : {});
+  }) : rawDataSource;
   switch (item.componentType) {
     case 'TextArea':
       return /*#__PURE__*/React.createElement(TextAreaAny, componentProps);
     case 'Select':
-      return /*#__PURE__*/React.createElement(SelectAny, _extends({
+      // dataSource 放在末尾以确保 optionsBind 优先级高于 componentProps.dataSource
+      return /*#__PURE__*/React.createElement(SelectAny, _extends({}, componentProps, {
         dataSource: dataSource
-      }, componentProps));
+      }));
     case 'RadioGroup':
-      return /*#__PURE__*/React.createElement(RadioGroupAny, _extends({
+      return /*#__PURE__*/React.createElement(RadioGroupAny, _extends({}, componentProps, {
         dataSource: dataSource
-      }, componentProps));
+      }));
     case 'CheckboxGroup':
-      return /*#__PURE__*/React.createElement(CheckboxGroupAny, _extends({
+      return /*#__PURE__*/React.createElement(CheckboxGroupAny, _extends({}, componentProps, {
         dataSource: dataSource
-      }, componentProps));
+      }));
     case 'NumberPicker':
       return /*#__PURE__*/React.createElement(NumberPickerAny, componentProps);
     case 'DatePicker':
@@ -315,6 +329,12 @@ var CustomForm = function CustomForm(_ref) {
   // 初始化时直接合并 resolvedInitialValues，避免 useEffect 延迟问题
   var valuesRef = useRef(resolvedInitialValues ? _extends({}, resolvedInitialValues) : {});
 
+  // ─── 缓存最新的 formItems，避免 handleFieldChange 闭包访问过期值 ─────────
+  var formItemsRef = useRef(formItems);
+  useEffect(function () {
+    formItemsRef.current = formItems;
+  }, [formItems]);
+
   // ─── 联动回填触发器：用 state 驱动组件重渲染以更新受控字段 ───────────────
   // 注意：不预填 resolvedInitialValues，初始值通过 defaultValue（非受控）处理
   // 预填会导致所有有初始值的字段变为受控组件，用户改值后因 linkageValues 未更新而回显旧值
@@ -322,6 +342,19 @@ var CustomForm = function CustomForm(_ref) {
     linkageValues = _useState[0],
     setLinkageValues = _useState[1];
 
+  // ─── Bug Fix: initialValues 变化时同步 valuesRef（编辑模式异步加载场景）──────
+  // 用 JSON.stringify 做深比较，避免父组件每次重渲染都因内联对象引用变化触发重置
+  var lastInitSerialRef = useRef('');
+  useEffect(function () {
+    var serial = JSON.stringify(resolvedInitialValues);
+    if (serial !== lastInitSerialRef.current) {
+      lastInitSerialRef.current = serial;
+      valuesRef.current = resolvedInitialValues ? _extends({}, resolvedInitialValues) : {};
+      setLinkageValues({});
+      cfLog('initialValues', 'initialValues 已变更，重新初始化 valuesRef', resolvedInitialValues);
+    }
+  }, [resolvedInitialValues]);
+
   // ─── 统一 onChange 处理器（阶段一 + 阶段二核心）─────────────────────────────
   var handleFieldChange = useCallback(function (field, value) {
     var _extends2;
@@ -332,9 +365,29 @@ var CustomForm = function CustomForm(_ref) {
       allValues: valuesRef.current
     });
 
-    // 2. 字段联动（阶段二）：检查是否有对应的联动规则
-    var linkagePatched = null;
+    // 2. 字段联动（阶段二）
     if (fieldLinkage && fieldLinkage.length > 0) {
+      // ── 第一步：收集当前 watchField 所有规则"可能影响"到的字段（预清除范围）──────
+      // 目的：当用户把 watchField 改为不匹配任何规则的值时，
+      // 把上一次联动写入的字段清回初始值，而不是永久保留旧的联动值。
+      var clearableFields = new Set();
+      fieldLinkage.forEach(function (rule) {
+        if (rule.watchField !== field) return;
+        if (rule.fillField) clearableFields.add(rule.fillField);
+        if (rule.fillFields) Object.keys(rule.fillFields).forEach(function (f) {
+          return clearableFields.add(f);
+        });
+        if (rule.staticRules) {
+          Object.values(rule.staticRules).forEach(function (ruleMap) {
+            return Object.keys(ruleMap).forEach(function (f) {
+              return clearableFields.add(f);
+            });
+          });
+        }
+      });
+
+      // ── 第二步：按规则计算本次实际要写入的值 ────────────────────────────────────
+      var fills = {};
       fieldLinkage.forEach(function (rule) {
         if (rule.watchField !== field) return;
 
@@ -342,28 +395,54 @@ var CustomForm = function CustomForm(_ref) {
         if (rule.staticRules) {
           var staticFill = rule.staticRules[String(value)];
           if (staticFill) {
-            linkagePatched = _extends({}, linkagePatched || {}, staticFill);
-            Object.assign(valuesRef.current, staticFill);
+            Object.assign(fills, staticFill);
             cfLog('linkage', "\u9759\u6001\u8054\u52A8 \"" + field + "\" = " + value + "\uFF0C\u56DE\u586B", staticFill);
           }
         }
 
         // 2b. 数据源动态联动（高级格式）
         if (rule.dataSource && rule.fillFields) {
-          var matchKey = rule.matchKey || 'value';
-          var matched = rule.dataSource.find(function (item) {
-            return item[matchKey] === value;
-          });
-          if (matched) {
-            var fill = {};
-            Object.entries(rule.fillFields).forEach(function (_ref2) {
-              var formField = _ref2[0],
-                dsKey = _ref2[1];
-              fill[formField] = matched[dsKey];
+          // ─── 防御：dataSource 必须是数组 ───────────────────────────────────────
+          // 若属性面板 dataSource 字段未通过「变量绑定」控件正确绑定，
+          // 而是直接输入了文本（如 "this.state.xxx"），则 rule.dataSource 为字符串而非数组。
+          // 在非数组上调用 .find() 会抛 TypeError，该错误会在 Fusion Field 的 onChange 包装
+          // 器中向上传播，阻断 _reRender（即 instance.forceUpdate()）的调用，导致：
+          //   1. Form 不重新渲染 → 下拉选中值消失（Select 回显空白）
+          //   2. setLinkageValues 未执行 → 联动回填字段不更新
+          // 因此必须先做类型守卫，跳过非数组情况并给出明确提示。
+          if (!Array.isArray(rule.dataSource)) {
+            cfWarn('linkage', "\u52A8\u6001\u8054\u52A8\uFF08watchField=\"" + rule.watchField + "\"\uFF09\u7684 dataSource \u4E0D\u662F\u6570\u7EC4" + ("\uFF08\u5B9E\u9645\u7C7B\u578B\uFF1A" + typeof rule.dataSource + "\uFF0C\u503C\uFF1A" + JSON.stringify(rule.dataSource) + "\uFF09\u3002") + "\u8BF7\u5728\u5C5E\u6027\u9762\u677F\u4E2D\u901A\u8FC7\u300C\u53D8\u91CF\u7ED1\u5B9A\u300D\u63A7\u4EF6\u9009\u62E9\u6570\u636E\u6E90\u53D8\u91CF\uFF0C\u4E0D\u8981\u76F4\u63A5\u8F93\u5165\u6587\u5B57\u8DEF\u5F84\u3002");
+          } else {
+            var _formItemsRef$current;
+            var matchKey = rule.matchKey || ((_formItemsRef$current = formItemsRef.current.find(function (i) {
+              return i.field === rule.watchField;
+            })) === null || _formItemsRef$current === void 0 ? void 0 : _formItemsRef$current.optionsValueKey) || 'value';
+            // 同时支持严格相等和字符串化比较，兼容 id 字段类型不一致（数字 vs 字符串）的场景
+            var matched = rule.dataSource.find(function (item) {
+              return item[matchKey] === value || item[matchKey] !== undefined && value !== undefined && String(item[matchKey]) === String(value);
             });
-            linkagePatched = _extends({}, linkagePatched || {}, fill);
-            Object.assign(valuesRef.current, fill);
-            cfLog('linkage', "\u52A8\u6001\u8054\u52A8 \"" + field + "\" = " + value + "\uFF0C\u56DE\u586B", fill);
+            if (matched) {
+              var fill = {};
+              Object.entries(rule.fillFields).forEach(function (_ref2) {
+                var formField = _ref2[0],
+                  dsKey = _ref2[1];
+                // 防止把 watchField 误填进 fillFields，否则会用 undefined 覆盖用户的选择值
+                if (formField === field) {
+                  cfWarn('linkage', "fillFields \u4E2D\u7684 key \"" + formField + "\" \u4E0E\u76D1\u542C\u5B57\u6BB5 watchField \u76F8\u540C\uFF0C\u5DF2\u8DF3\u8FC7\u3002" + "fillFields \u683C\u5F0F\u4E3A {\"\u76EE\u6807\u8868\u5355\u5B57\u6BB5\":\"\u6570\u636E\u6E90\u5B57\u6BB5\u540D\"}\uFF0C\u8BF7\u68C0\u67E5 key/value \u662F\u5426\u5199\u53CD\u3002");
+                  return;
+                }
+                // 数据源字段名不存在时提示可用字段，避免静默填入 undefined
+                if (!(dsKey in matched)) {
+                  cfWarn('linkage', "fillFields \u4E2D\u6570\u636E\u6E90\u5B57\u6BB5\u540D \"" + dsKey + "\" \u5728\u5339\u914D\u9879\u4E2D\u4E0D\u5B58\u5728\uFF0C\u5DF2\u8DF3\u8FC7\u3002" + ("\u5339\u914D\u9879\u53EF\u7528\u5B57\u6BB5\uFF1A" + Object.keys(matched).join(', ')));
+                  return;
+                }
+                fill[formField] = matched[dsKey];
+              });
+              Object.assign(fills, fill);
+              cfLog('linkage', "\u52A8\u6001\u8054\u52A8 \"" + field + "\" = " + value + "\uFF0C\u56DE\u586B", fill);
+            } else {
+              cfWarn('linkage', "\u52A8\u6001\u8054\u52A8\uFF1A\u5728 dataSource \u4E2D\u672A\u627E\u5230 matchKey=\"" + matchKey + "\" \u7B49\u4E8E \"" + value + "\" \u7684\u8BB0\u5F55\u3002" + "\u8BF7\u786E\u8BA4 matchKey \u4E0E optionsBind \u5B58\u50A8\u503C\u5B57\u6BB5\u540D\u4E00\u81F4\uFF08\u914D\u7F6E\u4E86 optionsValueKey \u65F6\u4F1A\u81EA\u52A8\u4F7F\u7528\u8BE5\u5B57\u6BB5\u540D\uFF09\uFF0C\u4E14 dataSource \u4E0E optionsBind \u540C\u6E90\u3002");
+            }
           }
         }
 
@@ -372,20 +451,42 @@ var CustomForm = function CustomForm(_ref) {
           var noConstraint = rule.matchValue === undefined || rule.matchValue === '';
           var _matched = noConstraint || String(value) === String(rule.matchValue);
           if (_matched) {
-            var _fill2;
-            var _fill = (_fill2 = {}, _fill2[rule.fillField] = rule.fillValue, _fill2);
-            linkagePatched = _extends({}, linkagePatched || {}, _fill);
-            Object.assign(valuesRef.current, _fill);
-            cfLog('linkage', "\u7B80\u5355\u8054\u52A8 \"" + field + "\" = " + value + "\uFF0C\u56DE\u586B", _fill);
+            var _cfLog;
+            fills[rule.fillField] = rule.fillValue;
+            cfLog('linkage', "\u7B80\u5355\u8054\u52A8 \"" + field + "\" = " + value + "\uFF0C\u56DE\u586B", (_cfLog = {}, _cfLog[rule.fillField] = rule.fillValue, _cfLog));
           }
         }
       });
-    }
-    // 有联动回填时，更新 linkageValues 触发重渲染
-    if (linkagePatched) {
-      setLinkageValues(function (prev) {
-        return _extends({}, prev, linkagePatched);
-      });
+
+      // ── 第三步：同步更新 valuesRef 和 linkageValues ──────────────────────────────
+      // ① 先把 clearableFields 回退为初始值（无论本次有无匹配）
+      // ② 再把 fills 叠加进来（覆盖刚刚的回退值）
+      // 结果：本次有匹配 → 字段显示新的联动值；本次无匹配 → 字段回退为初始值或空
+      if (clearableFields.size > 0) {
+        clearableFields.forEach(function (f) {
+          var initVal = resolvedInitialValues === null || resolvedInitialValues === void 0 ? void 0 : resolvedInitialValues[f];
+          if (initVal !== undefined) {
+            valuesRef.current[f] = initVal;
+          } else {
+            delete valuesRef.current[f];
+          }
+        });
+        Object.assign(valuesRef.current, fills);
+        setLinkageValues(function (prev) {
+          var next = _extends({}, prev);
+          // 删除"可被清除"但本次未填入的字段，使其退出受控状态
+          clearableFields.forEach(function (f) {
+            if (!(f in fills)) delete next[f];
+          });
+          return _extends({}, next, fills);
+        });
+      } else if (Object.keys(fills).length > 0) {
+        // 保底路径：clearableFields 为空但仍有 fills（理论上不会出现）
+        Object.assign(valuesRef.current, fills);
+        setLinkageValues(function (prev) {
+          return _extends({}, prev, fills);
+        });
+      }
     }
 
     // 3. 计算 computedFields，得到包含衍生字段的完整值
@@ -395,7 +496,7 @@ var CustomForm = function CustomForm(_ref) {
     if (onChange) {
       onChange(field, value, allValues);
     }
-  }, [resolvedComputedFields, fieldLinkage, onChange]);
+  }, [resolvedComputedFields, resolvedInitialValues, fieldLinkage, onChange]);
 
   // ─── 提交处理 ───────────────────────────────────────────────────────────────
   // ─── 对齐方式映射 ───────────────────────────────────────────────────────────
@@ -425,8 +526,11 @@ var CustomForm = function CustomForm(_ref) {
     return ops;
   }, [operations, showSubmit, submitText, submitValidate, showReset, resetText]);
   var handleSubmit = useCallback(function (values, errors, field, buttonDataSource) {
-    // 将 Form 收集的 values 与 ref 缓存合并（兼容 initialValues 未经 onChange 的字段）
-    var mergedValues = _extends({}, valuesRef.current, values);
+    // 合并原则：valuesRef.current 优先级最高，因为它是所有变化（用户输入 + 联动回填）的唯一可信来源。
+    // Form.Submit 返回的 values 中，联动回填字段没有经过 onChange，Form 内部 store
+    // 可能保留初始 undefined/""，若让 values 覆盖 valuesRef 会丢失联动写入的正确值。
+    // { ...values, ...valuesRef.current }：valuesRef 覆盖 Form stale 值，确保联动回填生效。
+    var mergedValues = _extends({}, values, valuesRef.current);
     // 追加 computedFields 衍生字段
     var finalValues = applyComputedFields(mergedValues, resolvedComputedFields);
 
@@ -491,7 +595,15 @@ var CustomForm = function CustomForm(_ref) {
     // buttonDataSource：单个按钮绑定的数据源（优先）；未绑定时回退到组件级 submitDataSource
     var effectiveDS = buttonDataSource !== null && buttonDataSource !== void 0 ? buttonDataSource : submitDataSource;
     runSubmitDataSource(effectiveDS, finalValues, errors, field);
-  }, [computedFields, submitMapping, onSubmit, onSubmitFailed, submitDataSource]);
+  }, [resolvedComputedFields, submitMapping, onSubmit, onSubmitFailed, submitDataSource]);
+
+  // ─── 重置处理：同时清除 linkageValues 和 valuesRef ────────────────────────────
+  var handleReset = useCallback(function () {
+    setLinkageValues({});
+    valuesRef.current = resolvedInitialValues ? _extends({}, resolvedInitialValues) : {};
+    cfLog('reset', '表单已重置，linkageValues 和 valuesRef 已恢复初始状态');
+    onReset === null || onReset === void 0 ? void 0 : onReset();
+  }, [resolvedInitialValues, onReset]);
 
   // ─── 渲染表单项，绑定统一 onChange ──────────────────────────────────────────
   var formItemNodes = formItems.map(function (item, index) {
@@ -579,10 +691,12 @@ var CustomForm = function CustomForm(_ref) {
   var hasContent = formItemNodes.length > 0 || childrenNodes.length > 0;
 
   // initialValues 通过 defaultValue 传入 Form（非受控初始化），避免覆盖联动回填的受控值
+  // 注意：必须使用 resolvedInitialValues（已标准化为对象格式），而非原始 initialValues
+  // 原始值在设计器中为数组格式 [{field, valueType, value}]，直接传给 NextForm.defaultValue 无效
   var formInitialProps = {};
-  if (initialValues && Object.keys(initialValues).length > 0) {
-    formInitialProps.defaultValue = initialValues;
-    cfLog('render', '表单携带 initialValues 渲染', initialValues);
+  if (resolvedInitialValues && Object.keys(resolvedInitialValues).length > 0) {
+    formInitialProps.defaultValue = resolvedInitialValues;
+    cfLog('render', '表单携带 initialValues 渲染', resolvedInitialValues);
   }
   return /*#__PURE__*/React.createElement(NextFormAny, _extends({
     className: "custom-form"
@@ -610,7 +724,7 @@ var CustomForm = function CustomForm(_ref) {
       return /*#__PURE__*/React.createElement(NextFormAny.Reset, _extends({
         key: opIndex,
         type: op.type || 'normal',
-        onClick: onReset
+        onClick: handleReset
       }, op.buttonProps || {}), op.text);
     }
     // ── 提交按钮 ─────────────────────────────────────────────────────