refactor(form): enhanced form customization and dynamic capabilities

vben

2020-11-13 1d45617e4a311e339eb008a629cd342cd673ecf1

 src/components/Form/src/FormItem.tsx

@@ -1,7 +1,8 @@
import type { PropType } from 'vue';
import type { FormProps } from './types/form';
import type { FormActionType, FormProps } from './types/form';
import type { FormSchema } from './types/form';
import type { ValidationRule } from 'ant-design-vue/lib/form/Form';
import type { TableActionType } from '/@/components/Table';

import { defineComponent, computed, unref, toRef } from 'vue';
import { Form, Col } from 'ant-design-vue';
@@ -14,6 +15,8 @@
import { upperFirst, cloneDeep } from 'lodash-es';

import { useItemLabelWidth } from './hooks/useLabelWidth';
import { ComponentType } from './types';
import { isNumber } from '/@/utils/is';

export default defineComponent({
  name: 'BasicFormItem',
@@ -35,6 +38,12 @@
      type: Object as PropType<any>,
      default: {},
    },
    tableAction: {
      type: Object as PropType<TableActionType>,
    },
    formActionType: {
      type: Object as PropType<FormActionType>,
    },
  },
  setup(props, { slots }) {
    const itemLabelWidthRef = useItemLabelWidth(toRef(props, 'schema'), toRef(props, 'formProps'));
@@ -54,10 +63,19 @@
      };
    });

    const getComponentsPropsRef = computed(() => {
      const { schema, tableAction, formModel, formActionType } = props;
      const { componentProps = {} } = schema;
      if (!isFunction(componentProps)) {
        return componentProps;
      }
      return componentProps({ schema, tableAction, formModel, formActionType }) || {};
    });

    const getDisableRef = computed(() => {
      const { disabled: globDisabled } = props.formProps;
      const { dynamicDisabled, componentProps = {} } = props.schema;
      const { disabled: itemDisabled = false } = componentProps;
      const { dynamicDisabled } = props.schema;
      const { disabled: itemDisabled = false } = unref(getComponentsPropsRef);
      let disabled = !!globDisabled || itemDisabled;
      if (isBoolean(dynamicDisabled)) {
        disabled = dynamicDisabled;
@@ -100,13 +118,19 @@
        rulesMessageJoinLabel,
        label,
        dynamicRules,
        required,
      } = props.schema;

      if (isFunction(dynamicRules)) {
        return dynamicRules(unref(getValuesRef));
      }

      const rules: ValidationRule[] = cloneDeep(defRules);
      let rules: ValidationRule[] = cloneDeep(defRules);

      if ((!rules || rules.length === 0) && required) {
        rules = [{ required }];
      }

      const requiredRuleIndex: number = rules.findIndex(
        (rule) => Reflect.has(rule, 'required') && !Reflect.has(rule, 'validator')
      );
@@ -145,28 +169,40 @@
      return rules;
    }

    function handleValue(component: ComponentType, field: string) {
      const val = (props.formModel as any)[field];
      if (['Input', 'InputPassword', 'InputSearch', 'InputTextArea'].includes(component)) {
        if (val && isNumber(val)) {
          (props.formModel as any)[field] = `${val}`;
          return `${val}`;
        }
        return val;
      }
      return val;
    }

    function renderComponent() {
      const {
        componentProps,
        renderComponentContent,
        component,
        field,
        changeEvent = 'change',
        valueField,
      } = props.schema;

      const isCheck = component && ['Switch'].includes(component);
      const isCheck = component && ['Switch', 'Checkbox'].includes(component);

      const eventKey = `on${upperFirst(changeEvent)}`;

      const on = {
        [eventKey]: (e: any) => {
          if (propsData[eventKey]) {
            propsData[eventKey](e);
          }
          if (e && e.target) {
            (props.formModel as any)[field] = e.target.value;
          } else {
            (props.formModel as any)[field] = e;
          }

          const target = e ? e.target : null;
          const value = target ? (isCheck ? target.checked : target.value) : e;
          (props.formModel as any)[field] = value;
        },
      };
      const Comp = componentMap.get(component);
@@ -176,7 +212,7 @@
        allowClear: true,
        getPopupContainer: (trigger: Element) => trigger.parentNode,
        size,
        ...componentProps,
        ...unref(getComponentsPropsRef),
        disabled: unref(getDisableRef),
      };

@@ -185,24 +221,27 @@
      // RangePicker place为数组
      if (isCreatePlaceholder && component !== 'RangePicker' && component) {
        placeholder =
          (componentProps && componentProps.placeholder) || createPlaceholderMessage(component);
          (unref(getComponentsPropsRef) && unref(getComponentsPropsRef).placeholder) ||
          createPlaceholderMessage(component);
      }
      propsData.placeholder = placeholder;
      propsData.codeField = field;
      propsData.formValues = unref(getValuesRef);

      const bindValue = {
        [isCheck ? 'checked' : 'value']: (props.formModel as any)[field],
        [valueField || (isCheck ? 'checked' : 'value')]: handleValue(component, field),
      };
      if (!renderComponentContent) {
        return <Comp {...propsData} {...on} {...bindValue} />;
      }
      const compSlot = isFunction(renderComponentContent)
        ? { ...renderComponentContent(unref(getValuesRef)) }
        : {
            default: () => renderComponentContent,
          };

      return (
        <Comp {...propsData} {...on} {...bindValue}>
          {{
            ...renderComponentContent(unref(getValuesRef)),
          }}
          {compSlot}
        </Comp>
      );
    }
@@ -226,7 +265,7 @@
      const { colon } = props.formProps;
      const getContent = () => {
        return slot
          ? getSlot(slots, slot)
          ? getSlot(slots, slot, unref(getValuesRef))
          : render
          ? render(unref(getValuesRef))
          : renderComponent();
@@ -253,7 +292,7 @@
      const { isIfShow, isShow } = getShow();
      const getContent = () => {
        return colSlot
          ? getSlot(slots, colSlot)
          ? getSlot(slots, colSlot, unref(getValuesRef))
          : renderColContent
          ? renderColContent(unref(getValuesRef))
          : renderItem();