cnhis-design-vue 3.1.16-beta.1 → 3.1.16-beta.12

package/es/packages/form-config/src/constants/index.js

@@ -1,28 +1,57 @@
-const WidgetTextMap = {
-  INPUT: "\u8F93\u5165\u6846",
-  SELECT: "\u4E0B\u62C9\u6846",
-  TEXTAREA: "\u6587\u672C\u57DF",
-  CASCADER: "\u7EA7\u8054\u4E0B\u62C9\u6846",
-  SWITCH: "\u5F00\u5173",
-  RADIO: "\u5355\u9009",
-  TEXT: "\u6587\u672C",
-  BUTTON: "\u6309\u94AE",
-  CHECKBOX: "\u591A\u9009",
-  LINEBAR: "\u5206\u884C\u7B26",
-  LINE_BREAKS: "\u5206\u7EBF\u680F"
-};
+const WidgetTextMap = /* @__PURE__ */ new Map([
+  ["LINE_BAR", "\u5206\u7EBF\u680F"],
+  ["NEWLINE", "\u5206\u884C\u7B26"]
+]);
 var EditAbleField = /* @__PURE__ */ ((EditAbleField2) => {
-  EditAbleField2["ALIAS"] = "alias";
-  EditAbleField2["TIP"] = "tip";
-  EditAbleField2["DEFAULT_VAL"] = "default_val";
-  EditAbleField2["ELEM_WIDTH"] = "elem_width";
-  EditAbleField2["PLACEHOLDER"] = "placeholder";
-  EditAbleField2["IS_SHOW"] = "is_show";
-  EditAbleField2["IS_NOT_FOLD"] = "is_not_fold";
-  EditAbleField2["IS_NULL"] = "is_null";
-  EditAbleField2["IS_EDIT"] = "is_edit";
+  EditAbleField2["NAME"] = "name";
+  EditAbleField2["NOTES"] = "notes";
+  EditAbleField2["DEFAULT_VALUE"] = "defaultValue";
+  EditAbleField2["LAYOUT_WIDTH_ENUM"] = "layoutWidthEnum";
+  EditAbleField2["DESC"] = "desc";
+  EditAbleField2["DEFAULT_EXPAND"] = "defaultExpand";
+  EditAbleField2["FOLD"] = "fold";
+  EditAbleField2["REQUIRED"] = "required";
+  EditAbleField2["EDITABLE"] = "editable";
   return EditAbleField2;
 })(EditAbleField || {});
+function widgetWidthOptionConfig() {
+  return {
+    option: [
+      { text: "\u6574\u884C", value: "ALL_LINE" },
+      { text: "\u534A\u884C", value: "HALF_LINE" },
+      { text: "5/6", value: "FIVE_SIX" },
+      { text: "2/3", value: "TWO_THREE" },
+      { text: "1/3", value: "ONE_THREE" },
+      { text: "3/4", value: "THREE_FOUR" },
+      { text: "1/4", value: "ONE_FOUR" },
+      { text: "1/6", value: "ONE_SIX" }
+    ]
+  };
+}
+function isShowOptionConfig() {
+  return {
+    open: { describe: "\u9ED8\u8BA4\u5C55\u5F00", value: true },
+    close: { describe: "\u9ED8\u8BA4\u6536\u8D77", value: false }
+  };
+}
+function isNotFoldOptionConfig() {
+  return {
+    open: { describe: "\u53EF\u6298\u53E0", value: true },
+    close: { describe: "\u4E0D\u53EF\u6298\u53E0", value: false }
+  };
+}
+function isEditOptionConfig() {
+  return {
+    open: { describe: "\u53EF\u7F16\u8F91", value: true },
+    close: { describe: "\u4E0D\u53EF\u7F16\u8F91", value: false }
+  };
+}
+function isNullOptionConfig() {
+  return {
+    open: { describe: "\u5FC5\u586B", value: true },
+    close: { describe: "\u4E0D\u5FC5\u586B", value: false }
+  };
+}
 const InjectionActiveFieldItem = Symbol("InjectionActiveFieldItem");
 
-export { EditAbleField, InjectionActiveFieldItem, WidgetTextMap };
+export { EditAbleField, InjectionActiveFieldItem, WidgetTextMap, isEditOptionConfig, isNotFoldOptionConfig, isNullOptionConfig, isShowOptionConfig, widgetWidthOptionConfig };

package/es/packages/form-config/src/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export * from './usePresetRenderer';
 export * from './useSortable';
+export * from './useConfigurationField';

package/es/packages/form-config/src/hooks/index.js

@@ -1,2 +1,3 @@
 export { usePresetRenderer } from './usePresetRenderer.js';
 export { useSortable } from './useSortable.js';
+export { useConfigurationField } from './useConfigurationField.js';

package/es/packages/form-config/src/hooks/useConfigurationField.d.ts

@@ -1,6 +1,7 @@
+import { FormConfigItem } from '../../../../../es/packages/form-config';
 import { EditAbleField } from '../../../../../es/packages/form-config/src/constants';
 import { FieldItem } from '../../../../../es/packages/form-render';
 export declare function useConfigurationField(): {
     generateFieldListByKeys: (keyList: EditAbleField[]) => FieldItem[];
-    generateFieldListByFieldItem: (fieldItem: FieldItem) => FieldItem[];
+    generateFieldListByFieldItem: (fieldItem: FormConfigItem) => FieldItem[];
 };

package/es/packages/form-config/src/hooks/useConfigurationField.js

@@ -1,100 +1,49 @@
-import { EditAbleField } from '../../../../packages/form-config/src/constants';
+import { EditAbleField, widgetWidthOptionConfig, isShowOptionConfig, isNotFoldOptionConfig, isEditOptionConfig, isNullOptionConfig } from '../../../../packages/form-config/src/constants';
 
 function useConfigurationField() {
   const fieldMap = /* @__PURE__ */ new Map([
-    [EditAbleField.ALIAS, { alias: "\u540D\u79F0", elem_width: 12, is_null: "0", val_key: "alias", html_type: "INPUT" }],
-    [EditAbleField.TIP, { alias: "\u95EE\u53F7\u63D0\u793A", elem_width: 12, val_key: "tip", html_type: "INPUT" }],
+    [EditAbleField.NAME, { alias: "\u540D\u79F0", elem_width: 12, is_null: "0", html_type: "INPUT" }],
+    [EditAbleField.NOTES, { alias: "\u95EE\u53F7\u63D0\u793A", elem_width: 12, html_type: "INPUT" }],
     [
-      EditAbleField.DEFAULT_VAL,
-      { alias: "\u9ED8\u8BA4\u503C", val_key: "default_val", elem_width: 12, html_type: "INPUT", validate: { max_length: 20 } }
+      EditAbleField.DEFAULT_VALUE,
+      { alias: "\u9ED8\u8BA4\u503C", elem_width: 12, html_type: "INPUT", validate: { max_length: 20 } }
     ],
     [
-      EditAbleField.ELEM_WIDTH,
-      {
-        alias: "\u5BBD\u5EA6",
-        fieldType: "number",
-        val_key: "elem_width",
-        html_type: "SELECT",
-        elem_width: 12,
-        option: [
-          { text: "\u6574\u884C", value: 12 },
-          { text: "\u534A\u884C", value: 6 },
-          { text: "5/6", value: 10 },
-          { text: "2/3", value: 8 },
-          { text: "1/3", value: 4 },
-          { text: "3/4", value: 9 },
-          { text: "1/4", value: 3 },
-          { text: "1/6", value: 2 }
-        ]
-      }
+      EditAbleField.LAYOUT_WIDTH_ENUM,
+      { alias: "\u5BBD\u5EA6", fieldType: "number", html_type: "SELECT", elem_width: 12, ...widgetWidthOptionConfig() }
     ],
+    [EditAbleField.DESC, { alias: "\u8BF4\u660E\u6587\u672C", elem_width: 12, html_type: "INPUT", validate: { max_length: 30 } }],
     [
-      EditAbleField.PLACEHOLDER,
-      { alias: "\u8BF4\u660E\u6587\u672C", elem_width: 12, val_key: "placeholder", html_type: "INPUT", validate: { max_length: 30 } }
+      EditAbleField.DEFAULT_EXPAND,
+      { alias: "\u662F\u5426\u9ED8\u8BA4\u5C55\u5F00", html_type: "SWITCH", elem_width: 12, ...isShowOptionConfig() }
     ],
-    [
-      EditAbleField.IS_SHOW,
-      {
-        val_key: "is_show",
-        alias: "\u662F\u5426\u9ED8\u8BA4\u5C55\u5F00",
-        html_type: "SWITCH",
-        elem_width: 12,
-        open: { describe: "\u9ED8\u8BA4\u5C55\u5F00", value: "1" },
-        close: { describe: "\u9ED8\u8BA4\u6536\u8D77", value: "0" }
-      }
-    ],
-    [
-      EditAbleField.IS_NOT_FOLD,
-      {
-        val_key: "is_not_fold",
-        alias: "\u662F\u5426\u53EF\u6298\u53E0",
-        html_type: "SWITCH",
-        elem_width: 12,
-        open: { describe: "\u53EF\u6298\u53E0", value: "0" },
-        close: { describe: "\u4E0D\u53EF\u6298\u53E0", value: "1" }
-      }
-    ],
-    [
-      EditAbleField.IS_EDIT,
-      {
-        val_key: "is_edit",
-        alias: "\u662F\u5426\u53EF\u7F16\u8F91",
-        html_type: "SWITCH",
-        elem_width: 12,
-        open: { describe: "\u53EF\u7F16\u8F91", value: "1" },
-        close: { describe: "\u4E0D\u53EF\u7F16\u8F91", value: "0" }
-      }
-    ],
-    [
-      EditAbleField.IS_NULL,
-      {
-        val_key: "is_null",
-        alias: "\u662F\u5426\u5FC5\u586B",
-        html_type: "SWITCH",
-        elem_width: 12,
-        open: { describe: "\u5FC5\u586B", value: "0" },
-        close: { describe: "\u4E0D\u5FC5\u586B", value: "1" }
-      }
-    ]
+    [EditAbleField.FOLD, { alias: "\u662F\u5426\u53EF\u6298\u53E0", html_type: "SWITCH", elem_width: 12, ...isNotFoldOptionConfig() }],
+    [EditAbleField.EDITABLE, { alias: "\u662F\u5426\u53EF\u7F16\u8F91", html_type: "SWITCH", elem_width: 12, ...isEditOptionConfig() }],
+    [EditAbleField.REQUIRED, { alias: "\u662F\u5426\u5FC5\u586B", html_type: "SWITCH", elem_width: 12, ...isNullOptionConfig() }]
   ]);
   function generateFieldListByKeys(keyList) {
-    return keyList.map((key) => fieldMap.get(key));
+    return keyList.map((key) => {
+      return { ...fieldMap.get(key), val_key: key };
+    });
   }
   function generateFieldListByFieldItem(fieldItem) {
     const htmlMap = new Map([
-      ["LINEBAR", [EditAbleField.ALIAS, EditAbleField.ELEM_WIDTH, EditAbleField.IS_SHOW, EditAbleField.IS_NOT_FOLD]],
-      ...["LINE_BREAKS", "COMPLEX", "COMBINATION"].map((key) => [key, [EditAbleField.ALIAS, EditAbleField.ELEM_WIDTH]])
+      [
+        "LINE_BAR",
+        [EditAbleField.NAME, EditAbleField.LAYOUT_WIDTH_ENUM, EditAbleField.DEFAULT_EXPAND, EditAbleField.FOLD]
+      ],
+      ...["NEWLINE", "COMPLEX", "COMBINATION"].map((key) => [key, [EditAbleField.NAME, EditAbleField.LAYOUT_WIDTH_ENUM]])
     ]);
     const defaultItems = [
-      EditAbleField.ALIAS,
-      EditAbleField.DEFAULT_VAL,
-      EditAbleField.ELEM_WIDTH,
-      EditAbleField.PLACEHOLDER,
-      EditAbleField.TIP,
-      EditAbleField.IS_EDIT,
-      EditAbleField.IS_NULL
+      EditAbleField.NAME,
+      EditAbleField.DEFAULT_VALUE,
+      EditAbleField.LAYOUT_WIDTH_ENUM,
+      EditAbleField.DESC,
+      EditAbleField.NOTES,
+      EditAbleField.EDITABLE,
+      EditAbleField.REQUIRED
     ];
-    const keys = htmlMap.get(fieldItem.html_type) || defaultItems;
+    const keys = htmlMap.get(fieldItem.type) || defaultItems;
     return generateFieldListByKeys(keys);
   }
   return { generateFieldListByKeys, generateFieldListByFieldItem };

package/es/packages/form-config/src/hooks/usePresetRenderer.d.ts

@@ -1,5 +1,4 @@
-import { FieldItem } from '../../../../../es/packages/form-render';
-import { FormConfigTextFormatter } from '../types';
+import { FormConfigItem, FormConfigTextFormatter } from '../types';
 export declare function usePresetRenderer(textFormatter: FormConfigTextFormatter): {
-    getRenderer: (fieldItem: FieldItem) => import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | import("vue").FunctionalComponent<{}, {}>;
+    getRenderer: (fieldItem: FormConfigItem) => import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | import("vue").FunctionalComponent<{}, {}>;
 };

package/es/packages/form-config/src/hooks/usePresetRenderer.js

@@ -2,7 +2,8 @@ import { defineComponent, computed, createVNode, mergeProps, inject } from 'vue'
 import { isString, isArray, isFunction } from 'lodash-es';
 import Draggable from 'vuedraggable';
 import { InjectionActiveFieldItem, WidgetTextMap } from '../../../../packages/form-config/src/constants';
-import { useSortable } from '../../../../packages/form-config/src/hooks';
+import { useSortable } from '../../../../packages/form-config/src/hooks/useSortable';
+import { layoutWidthEnum2Column } from '../../../../packages/form-config/src/utils';
 import { NEllipsis } from 'naive-ui';
 
 function usePresetRenderer(textFormatter) {
@@ -19,14 +20,15 @@ function usePresetRenderer(textFormatter) {
         }
       }, [createVNode(NEllipsis, {
         "class": ["form-config__renderer--default", {
-          "is-required": fieldItem.is_null === "0",
-          "is-disabled": fieldItem.is_edit === "0"
+          "is-required": fieldItem.required,
+          "is-disabled": fieldItem.editable === false
         }]
       }, {
         default: () => getDisplayText()
       })]);
       function getDisplayText() {
-        return textFormatter(fieldItem, `${fieldItem.alias}(${WidgetTextMap[fieldItem.html_type] || "\u63A7\u4EF6"})`);
+        const type = WidgetTextMap.get(fieldItem.type);
+        return textFormatter(fieldItem, `${fieldItem.name}${type ? `(${type})` : ""}`);
       }
     }
   };
@@ -44,12 +46,11 @@ function usePresetRenderer(textFormatter) {
           return props.fieldItem[key];
         }
         const classList = computed(() => {
-          return `form-config__renderer--complex form-config__renderer--complex--${fieldFor("display") || "grid"}`;
+          return "form-config__renderer--complex form-config__renderer--complex--grid";
         });
         const style = computed(() => {
           return {
-            "--item-column": fieldFor("elem_width"),
-            ...fieldFor("wrapperStyle")
+            "--item-column": layoutWidthEnum2Column(fieldFor("layoutWidthEnum"))
           };
         });
         function renderField(fieldItem) {
@@ -57,7 +58,7 @@ function usePresetRenderer(textFormatter) {
           return createVNode("div", {
             "class": "form-config__displayContentItem",
             "style": {
-              "--item-column": fieldItem.elem_width
+              "--item-column": layoutWidthEnum2Column(fieldItem.layoutWidthEnum)
             }
           }, [createVNode(Renderer, {
             "fieldItem": fieldItem
@@ -65,14 +66,10 @@ function usePresetRenderer(textFormatter) {
         }
         const childrenList = computed({
           get() {
-            return fieldFor("html_type") === "COMBINATION" ? fieldFor("children") : fieldFor("properties");
+            return fieldFor("children");
           },
           set(v) {
-            if (fieldFor("html_type") === "COMBINATION") {
-              props.fieldItem.children = v;
-            } else {
-              props.fieldItem.properties = v;
-            }
+            props.fieldItem.children = v;
           }
         });
         const {
@@ -82,7 +79,7 @@ function usePresetRenderer(textFormatter) {
         return () => createVNode(DraggableComponent, mergeProps(commonConfig, {
           "class": classList.value,
           "style": style.value,
-          "group": fieldFor("val_key"),
+          "group": fieldFor("key"),
           "modelValue": childrenList.value,
           "onUpdate:modelValue": ($event) => childrenList.value = $event
         }), {
@@ -101,12 +98,12 @@ function usePresetRenderer(textFormatter) {
       matcher
     }) => {
       if (isString(matcher))
-        return matcher === fieldItem.html_type;
+        return matcher === fieldItem.type;
       if (isArray(matcher))
-        return matcher.includes(fieldItem.html_type);
+        return matcher.includes(fieldItem.type);
       if (isFunction(matcher))
-        return matcher(fieldItem.html_type);
-      return matcher.test(fieldItem.html_type);
+        return matcher(fieldItem.type);
+      return matcher.test(fieldItem.type);
     }).renderer;
   }
   return {

package/es/packages/form-config/src/hooks/useSortable.js

@@ -24,7 +24,7 @@ function useSortable() {
     }
     to.classList.add("is-choosing-area");
   }
-  const commonConfig = { onMove, onChoose, onUnchoose, tag: "section", animation: "150", "item-key": "val_key" };
+  const commonConfig = { onMove, onChoose, onUnchoose, tag: "section", animation: "150", "item-key": "key" };
   return { commonConfig };
 }
 

package/es/packages/form-config/src/types/index.d.ts

@@ -1,6 +1,5 @@
 import { Component, FunctionalComponent } from 'vue';
 import { ArrayAble } from '../../../../../es/src/types';
-import { FieldItem } from '../../../../../es/packages/form-render';
 interface Matcher {
     (type: string): boolean;
 }
@@ -8,11 +7,30 @@ export declare type FormConfigRenderer = {
     matcher: ArrayAble<string> | RegExp | Matcher;
     renderer: Component | FunctionalComponent;
 };
+export declare type FormConfigType = 'NEWLINE' | 'LINE_BAR' | 'OTHER' | string;
+export declare type FormConfigWidth = 'ALL_LINE' | 'HALF_LINE' | 'FIVE_SIX' | 'TWO_THREE' | 'ONE_THREE' | 'THREE_FOUR' | 'ONE_FOUR' | 'ONE_SIX';
+export declare type FormConfigItem = {
+    key: string;
+    layoutWidthEnum: FormConfigWidth;
+    type: FormConfigType;
+    name: string;
+} & Partial<{
+    show: boolean;
+    defaultValue: any;
+    defaultExpand: boolean;
+    fold: boolean;
+    required: boolean;
+    editable: boolean;
+    notes: string;
+    desc: string;
+    children: FormConfigItem[];
+}>;
 export interface FormConfigTextFormatter {
-    (fieldItem: FieldItem, parsedText: string): string;
+    (fieldItem: FormConfigItem, parsedText: string): string;
 }
 export interface FormConfigExpose {
-    loadData(payload: Record<'fieldList' | 'materialList', FieldItem[]>): void;
-    getData(): Record<'fieldList' | 'materialList', FieldItem[]>;
+    loadData(payload: Record<'fieldList', FormConfigItem[]>): void;
+    validate(): Promise<unknown>;
+    getData(): Record<'fieldList' | 'materialList', FormConfigItem[]>;
 }
 export {};

package/es/packages/form-config/src/utils/index.d.ts

@@ -0,0 +1,2 @@
+import { FormConfigWidth } from '../../../../../es/packages/form-config';
+export declare function layoutWidthEnum2Column(layoutWidthEnum: FormConfigWidth): number;

package/es/packages/form-config/src/utils/index.js

@@ -0,0 +1,15 @@
+function layoutWidthEnum2Column(layoutWidthEnum) {
+  const transferMap = {
+    ALL_LINE: 12,
+    HALF_LINE: 6,
+    FIVE_SIX: 10,
+    TWO_THREE: 8,
+    ONE_THREE: 4,
+    THREE_FOUR: 9,
+    ONE_FOUR: 3,
+    ONE_SIX: 2
+  };
+  return transferMap[layoutWidthEnum] || 12;
+}
+
+export { layoutWidthEnum2Column };

package/es/packages/form-config/style/index.css

@@ -5,6 +5,7 @@
 .form-config__material {
   padding: 16px;
   box-sizing: border-box;
+  flex-shrink: 0;
   width: 200px;
   background: white;
 }
@@ -15,8 +16,12 @@
   height: 40px;
 }
 .form-config__materialContent {
-  padding: 8px;
-  min-height: 400px;
+  padding: 16px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  overflow-y: auto;
+  max-height: var(--max-height);
+  min-height: 200px;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -33,6 +38,8 @@
 .form-config__displayWrapper {
   padding: 16px;
   box-sizing: border-box;
+  flex-shrink: 0;
+  min-width: 400px;
   flex: 1;
   padding: 16px 0;
 }
@@ -45,6 +52,9 @@
 .form-config__displayContent {
   padding: 16px;
   box-sizing: border-box;
+  flex-shrink: 0;
+  overflow-y: auto;
+  max-height: var(--max-height);
   height: fit-content;
   background: #eeeeee;
   display: grid !important;
@@ -58,9 +68,23 @@
 .form-config__config {
   padding: 16px;
   box-sizing: border-box;
-  width: 220px;
+  flex-shrink: 0;
+  width: 240px;
   background: white;
 }
+.form-config__configHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+}
+.form-config__configContent {
+  padding: 16px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  overflow-y: auto;
+  max-height: var(--max-height);
+}
 .form-config__renderer--default {
   display: flex;
   align-items: center;

package/es/packages/form-render/index.d.ts

@@ -29,6 +29,9 @@ declare const FormRender: SFCWithInstall<import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    businessFormatter: {
+        type: import("vue").PropType<import("./src/types").FormBusinessFormatter>;
+    };
     schema: {
         type: import("vue").PropType<import("@formily/json-schema").Stringify<{
             [key: symbol]: any;
@@ -92,9 +95,6 @@ declare const FormRender: SFCWithInstall<import("vue").DefineComponent<{
         type: import("vue").PropType<Record<string, import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | import("vue").FunctionalComponent<{}, {}>>>;
         default: () => {};
     };
-    businessFilter: {
-        type: import("vue").PropType<import("./src/types").FormBusinessFilter>;
-    };
     scope: {
         type: import("vue").PropType<import("../../../es/src/types").AnyObject>;
         default: () => {};
@@ -144,6 +144,9 @@ declare const FormRender: SFCWithInstall<import("vue").DefineComponent<{
             type: NumberConstructor;
             default: number;
         };
+        businessFormatter: {
+            type: import("vue").PropType<import("./src/types").FormBusinessFormatter>;
+        };
         schema: {
             type: import("vue").PropType<import("@formily/json-schema").Stringify<{
                 [key: symbol]: any;
@@ -207,9 +210,6 @@ declare const FormRender: SFCWithInstall<import("vue").DefineComponent<{
             type: import("vue").PropType<Record<string, import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | import("vue").FunctionalComponent<{}, {}>>>;
             default: () => {};
         };
-        businessFilter: {
-            type: import("vue").PropType<import("./src/types").FormBusinessFilter>;
-        };
         scope: {
             type: import("vue").PropType<import("../../../es/src/types").AnyObject>;
             default: () => {};
@@ -236,14 +236,12 @@ declare const FormRender: SFCWithInstall<import("vue").DefineComponent<{
     }>>;
     emit: (event: "formChange", ...args: any[]) => void;
     nuiThemeOverrides: import("naive-ui").GlobalThemeOverrides;
+    formModel: import("@formily/core").Form<any>;
     SchemaField: import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     businessCollector: import("./src/hooks").BusinessCollector;
     formItemDepsCollector: import("./src/hooks").FormItemDepsCollector;
     changeContextCollector: import("./src/hooks").ContextCollector;
     formUUID: string;
-    formModel: import("@formily/core").Form<{
-        [x: string]: any;
-    }>;
     scrollbarRef: import("vue").Ref<HTMLElement | undefined>;
     schemaAdaptor: (fieldList: import("./src/types").FieldItem[]) => Record<string, import("@formily/json-schema").Stringify<{
         [key: symbol]: any;
@@ -759,7 +757,7 @@ declare const FormRender: SFCWithInstall<import("vue").DefineComponent<{
             readonly default: "bar";
         };
         readonly closable: BooleanConstructor;
-        readonly justifyContent: import("vue").PropType<"center" | "start" | "end" | "space-around" | "space-between" | "space-evenly">;
+        readonly justifyContent: import("vue").PropType<"start" | "end" | "space-around" | "space-between" | "space-evenly" | "center">;
         readonly size: {
             readonly type: import("vue").PropType<"small" | "medium" | "large">;
             readonly default: "medium";
@@ -1035,7 +1033,7 @@ declare const FormRender: SFCWithInstall<import("vue").DefineComponent<{
         addTabFixed: import("vue").Ref<boolean>;
         tabWrapperStyle: import("vue").ComputedRef<{
             display: string;
-            justifyContent: "center" | "start" | "end" | "space-around" | "space-between" | "space-evenly";
+            justifyContent: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
         } | undefined>;
         handleNavResize: import("lodash").DebouncedFunc<(entry: ResizeObserverEntry) => void>;
         mergedSize: import("vue").ComputedRef<"small" | "medium" | "large">;
@@ -1091,7 +1089,7 @@ declare const FormRender: SFCWithInstall<import("vue").DefineComponent<{
             readonly default: "bar";
         };
         readonly closable: BooleanConstructor;
-        readonly justifyContent: import("vue").PropType<"center" | "start" | "end" | "space-around" | "space-between" | "space-evenly">;
+        readonly justifyContent: import("vue").PropType<"start" | "end" | "space-around" | "space-between" | "space-evenly" | "center">;
         readonly size: {
             readonly type: import("vue").PropType<"small" | "medium" | "large">;
             readonly default: "medium";
@@ -1646,6 +1644,9 @@ declare const FormRender: SFCWithInstall<import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    businessFormatter: {
+        type: import("vue").PropType<import("./src/types").FormBusinessFormatter>;
+    };
     schema: {
         type: import("vue").PropType<import("@formily/json-schema").Stringify<{
             [key: symbol]: any;
@@ -1709,9 +1710,6 @@ declare const FormRender: SFCWithInstall<import("vue").DefineComponent<{
         type: import("vue").PropType<Record<string, import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | import("vue").FunctionalComponent<{}, {}>>>;
         default: () => {};
     };
-    businessFilter: {
-        type: import("vue").PropType<import("./src/types").FormBusinessFilter>;
-    };
     scope: {
         type: import("vue").PropType<import("../../../es/src/types").AnyObject>;
         default: () => {};

package/es/packages/form-render/src/FormRender.js

@@ -1,15 +1,16 @@
 import { defineComponent, ref, computed, watch, openBlock, createBlock, unref, withCtx, createElementBlock, createVNode, isRef, Fragment, renderList, createCommentVNode, createElementVNode, normalizeStyle, renderSlot, toDisplayString, nextTick } from 'vue';
 import { createForm, onFieldValueChange, isField } from '@formily/core';
 import { FormProvider, FormConsumer } from '@formily/vue';
-import { cloneDeep, isArray, isObject } from 'lodash-es';
+import { isObject } from '@vue/shared';
+import { cloneDeep, isArray } from 'lodash-es';
 import { NForm, NTabs, NTabPane, NConfigProvider } from 'naive-ui';
 import { FormItemLineBarDepKeyPrepend } from '../../../packages/form-render/src/constants';
 import { useFormRenderLifeCycle } from '../../../packages/form-render/src/hooks/useFormRenderLifeCycle';
 import { arrayed, queryDecorator, queryInput, getParentLinebar } from '../../../packages/form-render/src/utils';
 import { useNuiThemeOverrides } from '../../../packages/form-table/src/hooks/useNuiThemeOverrides';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
-import { useFormContext } from './hooks/useFormContext.js';
 import { useInitialData } from './hooks/useInitialData.js';
+import { useFormContext } from './hooks/useFormContext.js';
 import { useFieldListAdaptor } from './hooks/useFieldListAdaptor.js';
 import { useFieldVisitor } from './hooks/useFieldVisitor.js';
 import { useAnchor } from './hooks/useAnchor.js';
@@ -29,12 +30,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     maxHeight: { type: [Number, String], default: "" },
     anchor: { type: Boolean, default: false },
     parallelism: { type: Number, default: 3 },
+    businessFormatter: { type: Function },
     schema: { type: Object },
     components: {
       type: Object,
       default: () => ({})
     },
-    businessFilter: { type: Function },
     scope: { type: Object, default: () => ({}) },
     annotation: { type: Object },
     consumer: { type: Boolean, default: false },
@@ -48,24 +49,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const { nuiThemeOverrides } = useNuiThemeOverrides();
     useFormRenderLifeCycle(props).callLifeCycle("onSetup");
-    const { SchemaField, businessCollector, formItemDepsCollector, changeContextCollector, formUUID } = useFormContext(props);
     const formModel = createForm({
       initialValues: useInitialData().assignInitialData(props.initialData, props.fieldList),
       effects() {
-        onFieldValueChange("*", (field) => {
+        onFieldValueChange("*", async (field) => {
           const fieldKey = field.props.name.toString();
+          businessCollector.trigger(fieldKey);
+          formItemDepsCollector.trigger(fieldKey);
           emit("formChange", {
             fieldInstance: field,
             fieldKey,
             fieldName: field.title,
             value: field.value,
-            context: changeContextCollector.getContext(fieldKey)
+            context: await changeContextCollector.getContext(fieldKey)
           });
-          businessCollector.trigger(formModel, fieldKey, field.value);
-          formItemDepsCollector.trigger(fieldKey);
         });
       }
     });
+    const { SchemaField, businessCollector, formItemDepsCollector, changeContextCollector, formUUID } = useFormContext(props, formModel);
     const scrollbarRef = ref();
     const { schemaAdaptor } = useFieldListAdaptor(businessCollector, formUUID);
     const parsedSchema = computed(() => {
@@ -102,6 +103,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           return Promise.reject(Array.isArray(err) ? err.reduce(errInfoNormalize, []) : err);
         });
         function errInfoNormalize(result, error) {
+          if (!isObject(error))
+            return result;
           let hasChildMessage = false;
           if (isArray(error.messages)) {
             error.messages.forEach((message) => {