@hzab/form-render 1.3.0 → 1.3.1

package/CHANGELOG.md

@@ -1,9 +1,14 @@
+# @hzab/form-render@1.3.1
+
+feat: 表单 onChange 事件（目前仅做触发，值计算后续优化）
+
 # @hzab/form-render@1.3.0
 
 break: 去除 lib，默认 src
 
 # @hzab/form-render@1.2.5
-- fix: LocationListPicker组件高度调整与删除点位修复
+
+- fix: LocationListPicker 组件高度调整与删除点位修复
 
 # @hzab/form-render@1.2.4
 
@@ -12,7 +17,7 @@ fix: UserSelect InfoRender
 
 # @hzab/form-render@1.2.3
 
-- fix: 富文本添加loading样式
+- fix: 富文本添加 loading 样式
 
 # @hzab/form-render@1.2.2
 

package/README.md

@@ -116,16 +116,17 @@ import FormRender from "@hzab/form-render";
 
 ### InfoPanel Attributes
 
-| 参数          | 类型    | 必填 | 默认值     | 说明                                   |
-| ------------- | ------- | ---- | ---------- | -------------------------------------- |
-| schema        | Object  | 是   | -          | 数据信息的 schema                      |
-| schemaScope   | Object  | 否   | -          | 全局作用域，用于实现协议表达式变量注入 |
-| layout        | Object  | 否   | horizontal | 表单布局，horizontal vertical \ inline |
-| initialValues | Object  | 否   | -          | form 初始值                            |
-| components    | Object  | 否   | -          | 自定义组件                             |
-| formOptions   | Object  | 否   | -          | createForm 的参数                      |
-| disabled      | boolean | 否   | -          | 禁用状态                               |
-| readOnly      | boolean | 否   | -          | 只读状态                               |
+| 参数          | 类型     | 必填 | 默认值     | 说明                                               |
+| ------------- | -------- | ---- | ---------- | -------------------------------------------------- |
+| schema        | Object   | 是   | -          | 数据信息的 schema                                  |
+| schemaScope   | Object   | 否   | -          | 全局作用域，用于实现协议表达式变量注入             |
+| layout        | Object   | 否   | horizontal | 表单布局，horizontal vertical \ inline             |
+| initialValues | Object   | 否   | -          | form 初始值                                        |
+| components    | Object   | 否   | -          | 自定义组件                                         |
+| formOptions   | Object   | 否   | -          | createForm 的参数                                  |
+| disabled      | boolean  | 否   | -          | 禁用状态                                           |
+| readOnly      | boolean  | 否   | -          | 只读状态                                           |
+| onChange      | Function | 否   | -          | 表单 onChange 事件（目前仅做触发，值计算后续优化） |
 
 ### 方法 Methods
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/form-render",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "",
   "main": "src",
   "scripts": {

package/src/common/schema-handler.ts

@@ -0,0 +1,132 @@
+import _ from "lodash";
+
+/** 自增容器 */
+export const arrayList = ["ArrayTable", "ArrayCards"];
+/** 不需要绑定事件的目标 */
+export const skipBindList = ["FormCollapse", "FormCollapse.CollapsePanel"];
+/** change 回调返回 parent 数据的组件 */
+export const returnParentValue = ["ArrayTable", "ArrayCards"];
+
+/**
+ * schema 每项添加 onChange，解决无全局 onChange 问题
+ * @param schema
+ * @param onChange
+ * @returns
+ */
+export const bindOnChange = (schema, opt) => {
+  const { schemaScope, onChange, formRender, parent, isCloneDeep = true } = opt || {};
+  let _schema = isCloneDeep ? _.cloneDeep(schema) : schema;
+  _schema = _schema.schema || _schema;
+  Object.keys(_schema.properties || {})?.forEach((key) => {
+    let item = _schema.properties[key];
+    const componentName = item["x-component"];
+    // 解决 name 丢失的问题
+    item.name = key;
+
+    if (item && !item["x-component-props"]) {
+      item["x-component-props"] = {};
+    }
+
+    const bindParams = {
+      componentName,
+      target: item["x-component-props"],
+      targetKey: key,
+      targetId: key,
+      formOnChange: onChange,
+      schemaScope,
+      formRender,
+      parent,
+    };
+
+    // 不需要绑定事件的目标：折叠面板不需要设置 onChange 事件，否则会导致触发多次
+    if (!skipBindList.includes(componentName)) {
+      // 绑定新的 change 事件
+      bindCallback({
+        ...bindParams,
+        actionName: "onChange",
+      });
+    }
+
+    // 处理自增表格、卡片等情况
+    if (arrayList.includes(componentName)) {
+      bindOnChange(item.items, {
+        ...opt,
+        parent: item,
+        isCloneDeep: false,
+      });
+      // 处理点击新增、删除、排序操作
+      const actions = ["onAdd", "onCopy", "onRemove", "onMoveDown", "onMoveUp"];
+      actions.forEach((actionName) => {
+        bindCallback({
+          ...bindParams,
+          actionName,
+        });
+      });
+    }
+
+    // 处理嵌套的情况
+    if (item.properties) {
+      bindOnChange(item, {
+        ...opt,
+        isCloneDeep: false,
+      });
+    }
+  });
+  return _schema;
+};
+
+/**
+ * 添加回调函数
+ * @param target
+ * @param name
+ * @param formOnChange
+ */
+export const bindCallback = (opt) => {
+  const { target, actionName, schemaScope, formOnChange } = opt || {};
+  const tempFn = target[actionName];
+  target[actionName] = function (...sourceArgs) {
+    // 处理结果数据，各组件返回数据格式不一致
+    const res = handleChangeValue({
+      ...opt,
+      sourceArgs,
+    });
+    // 触发组件 onChange 事件
+    if (typeof tempFn === "string" && tempFn.startsWith("{{") && tempFn.endsWith("}}")) {
+      // schemaScope 传入方式
+      const fn = schemaScope && schemaScope[tempFn.replace(/^\{\{/, "").replace(/\}\}$/, "")];
+      typeof fn === "function" && fn(...sourceArgs, res);
+    } else if (typeof tempFn === "function") {
+      // 直接传入函数的方式
+      tempFn(...sourceArgs, res);
+    }
+    formOnChange && formOnChange(res);
+  };
+};
+
+/**
+ * 从 onChange 事件中获取数据
+ * @param args
+ */
+export const handleChangeValue = (opt) => {
+  const { componentName, formRender, parent, targetKey, actionName, sourceArgs } = opt || {};
+  console.log("parent", parent);
+  // 自增表格、卡片无法获知当前编辑内容所在的索引，导致无法知道当前值
+  const res = {
+    key: targetKey,
+    actionName: actionName,
+    formRender,
+    formValues: formRender.values,
+    sourceArgs: sourceArgs,
+    // value: formRender.getValuesIn(targetKey),
+    // parent,
+    // TODO: 自增情况下无法获知索引
+    // parentValue: formRender.getValuesIn(parent?.name),
+  };
+
+  // TODO: 自增返回父级值？
+  // if (returnParentValue.includes(parent?.["x-component"])) {
+  //   res.value = res.parentValue;
+  // }
+
+  return res;
+};

package/src/index.tsx

@@ -30,9 +30,11 @@ import {
   ArrayCards,
 } from "c-formily-antd";
 import { Card, Slider, Rate } from "antd";
+
 // 自定义组件
 import * as customComponents from "./components/index";
 import { GlobalPropsContext } from "./common/global-props-context";
+import { bindOnChange } from "./common/schema-handler";
 
 import "./index.less";
 
@@ -146,6 +148,14 @@ const FormRender = forwardRef((props: any, parentRef) => {
     ...props.schema?.form,
   };
 
+  const schema = useMemo(() => {
+    return bindOnChange(props.schema, {
+      schemaScope: props.schemaScope,
+      onChange: props.onChange,
+      formRender,
+    });
+  }, []);
+
   return (
     <GlobalPropsContext.Provider value={props}>
       <Form
@@ -158,7 +168,7 @@ const FormRender = forwardRef((props: any, parentRef) => {
         onAutoSubmitFailed={autoSubmitFailed}
       >
         <FormLayout {...formLayoutProps}>
-          <SchemaField schema={props.schema.schema}></SchemaField>
+          <SchemaField schema={schema}></SchemaField>
           <div className="form-render-footer xxm">{footer}</div>
         </FormLayout>
       </Form>