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

林飞

2023-11-26 342328ce5f06b33dabdbd4a3bdd2c846f011eb03

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

* fix(useFormEvents): 修复setFieldsValue 方法设置完值后，表单属性丢失formActionType 的bug

* feat: 新增 sync 的action

* feat(FormItem): 新增只读属性

* feat(FormItem): 新增表单只读属性

---------

Co-authored-by: gavin-james <meaganlindesy1258@gmail.com>

 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

 src/components/Form/src/types/form.ts

@@ -85,6 +85,8 @@
  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 @@

  dynamicDisabled?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean);

  dynamicReadonly?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean);

  dynamicRules?: (renderCallbackParams: RenderCallbackParams) => Rule[];
}
export interface ComponentFormSchema extends BaseFormSchema {