feat: 添加更多配置项 (#2607)

luocong2016

2023-03-17 f2ec2ca2733a0edc5e9d41ae4c3dab47a444dbc2

feat: 添加更多配置项 (#2607)

 src/views/demo/form/UseForm.vue

@@ -49,6 +49,17 @@
    { value: 'default', label: 'defualt' },
  ];

  const layoutList = [
    { value: 'vertical', label: 'vertical' },
    { value: 'inline', label: 'inline' },
    { value: 'horizontal', label: 'horizontal' },
  ];

  const labelAlignList = [
    { value: 'left', label: 'left' },
    { value: 'right', label: 'right' },
  ];

  const schemas: FormSchema[] = [
    {
      field: 'field1',
@@ -157,10 +168,9 @@
      },
    },
  ];

  const formSchemas: FormSchema[] = [
    {
      field: '',
      field: 'd1',
      component: 'Divider',
      label: '基础属性',
      colProps: { span: 24 },
@@ -169,14 +179,38 @@
      },
    },
    {
      field: 'name',
      defaultValue: 'useForm',
      component: 'Input',
      label: 'name',
      colProps: { span: 24 },
    },
    {
      field: 'layout',
      defaultValue: 'horizontal',
      component: 'RadioButtonGroup',
      label: 'layout',
      colProps: { span: 24 },
      componentProps: {
        options: layoutList,
      },
    },
    {
      field: 'labelAlign',
      defaultValue: 'right',
      component: 'RadioButtonGroup',
      label: 'labelAlign',
      colProps: { span: 24 },
      componentProps: {
        options: labelAlignList,
      },
    },
    {
      field: 'labelWidth',
      defaultValue: 120,
      component: 'InputNumber',
      label: 'labelWidth',
      colProps: { span: 24 },
      componentProps: {
        size: 'small',
      },
    },
    {
      field: 'size',
@@ -186,8 +220,14 @@
      colProps: { span: 24 },
      componentProps: {
        options: sizeList,
        size: 'small',
      },
    },
    {
      field: 'colon',
      defaultValue: false,
      component: 'Switch',
      label: 'colon',
      colProps: { span: 24 },
    },
    {
      field: 'disabled',
@@ -195,9 +235,6 @@
      component: 'Switch',
      label: 'disabled',
      colProps: { span: 24 },
      componentProps: {
        size: 'small',
      },
    },
    {
      field: 'compact',
@@ -205,32 +242,99 @@
      component: 'Switch',
      label: 'compact',
      colProps: { span: 24 },
      componentProps: {
        size: 'small',
      },
    },
    {
      field: '',
      field: 'autoSetPlaceHolder',
      defaultValue: true,
      component: 'Switch',
      label: 'autoSetPlaceHolder',
      colProps: { span: 24 },
    },
    {
      field: 'autoSubmitOnEnter',
      defaultValue: false,
      component: 'Switch',
      label: 'autoSubmitOnEnter',
      colProps: { span: 24 },
    },
    {
      field: 'showAdvancedButton',
      defaultValue: false,
      component: 'Switch',
      label: 'showAdvancedButton',
      colProps: { span: 24 },
    },

    {
      field: 'd2',
      component: 'Divider',
      label: '网格布局',
      label: '网格布局(rowProps)',
      colProps: { span: 24 },
      componentProps: {
        orientation: 'center',
      },
    },
    {
      field: 'actionColOptions.span',
      component: 'Slider',
      defaultValue: 24,
      label: 'span',
      field: 'rowProps.gutter.0',
      component: 'InputNumber',
      defaultValue: 0,
      label: 'Horizontal Gutter',
      colProps: { span: 24 },
      componentProps: {
        min: 1,
        max: 24,
        addonAfter: 'px',
      },
    },
    {
      field: '',
      field: 'rowProps.gutter.1',
      component: 'InputNumber',
      defaultValue: 0,
      label: 'Vertical Gutter',
      colProps: { span: 24 },
      componentProps: {
        addonAfter: 'px',
      },
    },
    {
      field: 'rowProps.align',
      defaultValue: 'top',
      component: 'Select',
      label: 'align',
      colProps: { span: 24 },
      componentProps: {
        options: [
          { value: 'stretch', label: 'stretch' },
          { value: 'bottom', label: 'bottom' },
          { value: 'top', label: 'top' },
          { value: 'middle', label: 'middle' },
        ],
      },
    },
    {
      field: 'rowProps.justify',
      defaultValue: 'start',
      component: 'Select',
      label: 'justify',
      colProps: { span: 24 },
      componentProps: {
        options: [
          { value: 'space-around', label: 'space-around' },
          { value: 'space-between', label: 'space-between' },
          { value: 'center', label: 'center' },
          { value: 'end', label: 'end' },
          { value: 'start', label: 'start' },
        ],
      },
    },
    {
      field: 'wrap',
      defaultValue: true,
      component: 'Switch',
      label: 'wrap',
      colProps: { span: 24 },
    },

    {
      field: 'd3',
      component: 'Divider',
      label: '操作按钮',
      colProps: { span: 24 },
@@ -242,16 +346,19 @@
      field: 'showActionButtonGroup',
      defaultValue: true,
      component: 'Switch',
      label: '操作按钮',
      label: 'showActionButtonGroup',
      colProps: { span: 24 },
      componentProps: ({ formActionType }) => {
        return {
          size: 'small',
          onChange: async (val: boolean) => {
            formActionType.updateSchema([
              { field: 'showResetButton', componentProps: { disabled: !val } },
              {
                field: 'showSubmitButton',
                componentProps: { disabled: !val },
              },
              {
                field: 'actionColOptions.span',
                componentProps: { disabled: !val },
              },
            ]);
@@ -263,24 +370,36 @@
      field: 'showResetButton',
      defaultValue: true,
      component: 'Switch',
      label: '重置按钮',
      label: 'showResetButton',
      colProps: { span: 24 },
      componentProps: {
        size: 'small',
      },
    },
    {
      field: 'showSubmitButton',
      defaultValue: true,
      component: 'Switch',
      label: '提交按钮',
      label: 'showSubmitButton',
      colProps: { span: 24 },
    },

    {
      field: 'd4',
      component: 'Divider',
      label: '操作按钮网格布局(actionColOptions)',
      colProps: { span: 24 },
      componentProps: {
        size: 'small',
        orientation: 'center',
      },
    },
    {
      field: '',
      field: 'actionColOptions.span',
      component: 'Slider',
      defaultValue: 24,
      label: 'span',
      colProps: { span: 24 },
      componentProps: { min: 0, max: 24 },
    },
    {
      field: 'd5',
      component: 'Divider',
      label: '其他事件',
      colProps: { span: 24 },
@@ -309,32 +428,29 @@
      const visible = ref<boolean>(false);
      const settingFormRef = ref();
      const [registerSetting] = useForm({
        labelWidth: 80,
        size: 'small',
        schemas: formSchemas,
        compact: true,
        actionColOptions: { span: 24 },
        showActionButtonGroup: false,
      });

      const resetSettings = async () => {
        setProps({ resetButtonOptions: { disabled: false, text: '重置' } });
        setProps({ submitButtonOptions: { disabled: false, loading: false } });
        await setFieldsValue({ field9: [] });
        await settingFormRef.value?.resetFields();
      };

      const handleSubmitSetting = async (values: Recordable) => {
        console.log(values);
        await setProps(values);
        visible.value = false;
      };

      const [register, { setProps, setFieldsValue, updateSchema }] = useForm({
        labelWidth: 120,
        schemas,
        actionColOptions: { span: 24 },
        fieldMapToTime: [['fieldTime', ['startTime', 'endTime'], 'YYYY-MM']],
      });

      async function handleLoad() {
        const promiseFn = function () {
          return new Promise((resolve) => {
@@ -348,9 +464,7 @@
            }, 1000);
          });
        };

        const item = await promiseFn();

        const { field9, province, city, district } = item as any;
        await updateSchema({
          field: 'field9',
@@ -359,16 +473,14 @@
          },
        });
        await setFieldsValue({ field9 });
        visible.value = false;
      }

      const showDrawer = () => {
        visible.value = true;
      };

      const onSettings = () => {
        settingFormRef.value?.submit();
      };

      const withClose = (formProps: Partial<FormProps>) => {
        setProps(formProps);
        visible.value = false;