feat: 新增表单只读功能 (#3335)

* fix(useFormEvents): 修复setFieldsValue 方法设置完值后，表单属性丢失formActionType 的bug * feat: 新增 sync 的action * feat(FormItem): 新增只读属性 * feat(FormItem): 新增表单只读属性 --------- Co-authored-by: gavin-james <[email protected]>
vbenjs · Nov 26, 2023 · 342328c · 342328c
1 parent 0f13758
commit 342328c
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/src/components/Form/src/components/FormItem.vue b/src/components/Form/src/components/FormItem.vue
@@ -116,6 +116,21 @@
         return disabled;
       });
 
+      const getReadonly = computed(() => {
+        const { readonly: globReadonly } = props.formProps;
+        const { dynamicReadonly } = props.schema;
+        const { readonly: itemReadonly = false } = unref(getComponentsProps);
+
+        let readonly = globReadonly || itemReadonly;
+        if (isBoolean(dynamicReadonly)) {
+          readonly = dynamicReadonly;
+        }
+        if (isFunction(dynamicReadonly)) {
+          readonly = dynamicReadonly(unref(getValues));
+        }
+        return readonly;
+      });
+
       function getShow(): { isShow: boolean; isIfShow: boolean } {
         const { show, ifShow } = props.schema;
         const { showAdvancedButton } = props.formProps;
@@ -280,6 +295,7 @@
           size,
           ...unref(getComponentsProps),
           disabled: unref(getDisable),
+          readonly: unref(getReadonly),
         };
 
         const isCreatePlaceholder = !propsData.disabled && autoSetPlaceHolder;
@@ -305,7 +321,12 @@
           return <Comp {...compAttr} />;
         }
         const compSlot = isFunction(renderComponentContent)
-          ? { ...renderComponentContent(unref(getValues), { disabled: unref(getDisable) }) }
+          ? {
+              ...renderComponentContent(unref(getValues), {
+                disabled: unref(getDisable),
+                readonly: unref(getReadonly),
+              }),
+            }
           : {
               default: () => renderComponentContent,
             };
@@ -339,7 +360,7 @@
         const { itemProps, slot, render, field, suffix, component } = props.schema;
         const { labelCol, wrapperCol } = unref(itemLabelWidthProp);
         const { colon } = props.formProps;
-        const opts = { disabled: unref(getDisable) };
+        const opts = { disabled: unref(getDisable), readonly: unref(getReadonly) };
         if (component === 'Divider') {
           return (
             <Col span={24}>
@@ -397,7 +418,7 @@
         const realColProps = { ...baseColProps, ...colProps };
         const { isIfShow, isShow } = getShow();
         const values = unref(getValues);
-        const opts = { disabled: unref(getDisable) };
+        const opts = { disabled: unref(getDisable), readonly: unref(getReadonly) };
 
         const getContent = () => {
           return colSlot

diff --git a/src/components/Form/src/types/form.ts b/src/components/Form/src/types/form.ts
@@ -85,6 +85,8 @@ export interface FormProps {
   size?: 'default' | 'small' | 'large';
   // Whether to disable
   disabled?: boolean;
+  // Whether to readonly
+  readonly?: boolean;
   // Time interval fields are mapped into multiple
   fieldMapToTime?: FieldMapToTime;
   // Placeholder is set automatically
@@ -218,6 +220,8 @@ interface BaseFormSchema {
 
   dynamicDisabled?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean);
 
+  dynamicReadonly?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean);
+
   dynamicRules?: (renderCallbackParams: RenderCallbackParams) => Rule[];
 }
 export interface ComponentFormSchema extends BaseFormSchema {