refactor<useForm>: 重构案例 (#2577)

src/views/demo/form/UseForm.vue

@@ -1,80 +1,53 @@
 <template>
   <PageWrapper title="UseForm操作示例">
-    <div class="mb-4">
+    <Space class="mb-4">
-      <a-button @click="setProps({ labelWidth: 150 })" class="mr-2"> 更改labelWidth </a-button>
+      <a-button type="primary" @click="showDrawer"> 更改设置 </a-button>
-      <a-button @click="setProps({ labelWidth: 120 })" class="mr-2"> 还原labelWidth </a-button>
+      <a-button @click="setProps({ resetButtonOptions: { disabled: true, text: '重置New' } })">
-      <a-button @click="setProps({ size: 'large' })" class="mr-2"> 更改Size </a-button>
-      <a-button @click="setProps({ size: 'default' })" class="mr-2"> 还原Size </a-button>
-      <a-button @click="setProps({ disabled: true })" class="mr-2"> 禁用表单 </a-button>
-      <a-button @click="setProps({ disabled: false })" class="mr-2"> 解除禁用 </a-button>
-      <a-button @click="setProps({ compact: true })" class="mr-2"> 紧凑表单 </a-button>
-      <a-button @click="setProps({ compact: false })" class="mr-2"> 还原正常间距 </a-button>
-      <a-button @click="setProps({ actionColOptions: { span: 8 } })" class="mr-2">
-        操作按钮位置
-      </a-button>
-    </div>
-    <div class="mb-4">
-      <a-button @click="setProps({ showActionButtonGroup: false })" class="mr-2">
-        隐藏操作按钮
-      </a-button>
-      <a-button @click="setProps({ showActionButtonGroup: true })" class="mr-2">
-        显示操作按钮
-      </a-button>
-      <a-button @click="setProps({ showResetButton: false })" class="mr-2"> 隐藏重置按钮 </a-button>
-      <a-button @click="setProps({ showResetButton: true })" class="mr-2"> 显示重置按钮 </a-button>
-      <a-button @click="setProps({ showSubmitButton: false })" class="mr-2">
-        隐藏查询按钮
-      </a-button>
-      <a-button @click="setProps({ showSubmitButton: true })" class="mr-2"> 显示查询按钮 </a-button>
-      <a-button
-        @click="
-          setProps({
-            resetButtonOptions: {
-              disabled: true,
-              text: '重置New',
-            },
-          })
-        "
-        class="mr-2"
-      >
         修改重置按钮
       </a-button>
-      <a-button
+      <a-button @click="setProps({ submitButtonOptions: { disabled: true, loading: true } })">
-        @click="
-          setProps({
-            submitButtonOptions: {
-              disabled: true,
-              loading: true,
-            },
-          })
-        "
-        class="mr-2"
-      >
         修改查询按钮
       </a-button>
       <a-button @click="handleLoad" class="mr-2"> 联动回显 </a-button>
-    </div>
+    </Space>
+
+    <Drawer v-model:visible="visible" title="更改设置" placement="right">
+      <BasicForm ref="settingFormRef" @register="registerSetting" @submit="handleSubmitSetting" />
+      <template #extra>
+        <Space>
+          <a-button @click="resetSettings">重置设置</a-button>
+          <a-button type="primary" @click="onSettings">应用</a-button>
+        </Space>
+      </template>
+    </Drawer>
+
     <CollapseContainer title="useForm示例">
       <BasicForm @register="register" @submit="handleSubmit" />
     </CollapseContainer>
   </PageWrapper>
 </template>
+
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  import { defineComponent, ref } from 'vue';
-  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
+  import { Drawer, Space } from 'ant-design-vue';
-  import { CollapseContainer } from '/@/components/Container/index';
+  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
-  import { useMessage } from '/@/hooks/web/useMessage';
+  import { CollapseContainer } from '/@/components/Container';
   import { PageWrapper } from '/@/components/Page';
   import { areaRecord } from '/@/api/demo/cascader';
 
+  const sizeList = [
+    { value: 'large', label: 'large' },
+    { value: 'middle', label: 'middle' },
+    { value: 'small', label: 'small' },
+    { value: 'default', label: 'defualt' },
+  ];
+
   const schemas: FormSchema[] = [
     {
       field: 'field1',
       component: 'Input',
       label: '字段1',
-      colProps: {
+      colProps: { span: 8 },
-        span: 8,
-      },
       componentProps: {
         placeholder: '自定义placeholder',
         onChange: (e: any) => {
@@ -86,45 +59,29 @@
       field: 'field2',
       component: 'Input',
       label: '字段2',
-      colProps: {
+      colProps: { span: 8 },
-        span: 8,
-      },
     },
     {
       field: 'field3',
       component: 'DatePicker',
       label: '字段3',
-      colProps: {
+      colProps: { span: 8 },
-        span: 8,
-      },
     },
     {
       field: 'fieldTime',
       component: 'RangePicker',
       label: '时间字段',
-      colProps: {
+      colProps: { span: 8 },
-        span: 8,
-      },
     },
     {
       field: 'field4',
       component: 'Select',
       label: '字段4',
-      colProps: {
+      colProps: { span: 8 },
-        span: 8,
-      },
       componentProps: {
         options: [
-          {
+          { label: '选项1', value: '1', key: '1' },
-            label: '选项1',
+          { label: '选项2', value: '2', key: '2' },
-            value: '1',
-            key: '1',
-          },
-          {
-            label: '选项2',
-            value: '2',
-            key: '2',
-          },
         ],
       },
     },
@@ -137,14 +94,8 @@
       },
       componentProps: {
         options: [
-          {
+          { label: '选项1', value: '1' },
-            label: '选项1',
+          { label: '选项2', value: '2' },
-            value: '1',
-          },
-          {
-            label: '选项2',
-            value: '2',
-          },
         ],
       },
     },
@@ -152,19 +103,11 @@
       field: 'field7',
       component: 'RadioGroup',
       label: '字段7',
-      colProps: {
+      colProps: { span: 8 },
-        span: 8,
-      },
       componentProps: {
         options: [
-          {
+          { label: '选项1', value: '1' },
-            label: '选项1',
+          { label: '选项2', value: '2' },
-            value: '1',
-          },
-          {
-            label: '选项2',
-            value: '2',
-          },
         ],
       },
     },
@@ -172,9 +115,7 @@
       field: 'field8',
       component: 'ApiCascader',
       label: '联动',
-      colProps: {
+      colProps: { span: 8 },
-        span: 8,
-      },
       componentProps: {
         api: areaRecord,
         apiParamKey: 'parentCode',
@@ -193,9 +134,7 @@
       field: 'field9',
       component: 'ApiCascader',
       label: '联动回显',
-      colProps: {
+      colProps: { span: 8 },
-        span: 8,
-      },
       componentProps: {
         api: areaRecord,
         apiParamKey: 'parentCode',
@@ -212,17 +151,161 @@
     },
   ];
 
+  const formSchemas: FormSchema[] = [
+    {
+      field: '',
+      component: 'Divider',
+      label: '基础属性',
+      colProps: { span: 24 },
+      componentProps: {
+        orientation: 'center',
+      },
+    },
+    {
+      field: 'labelWidth',
+      defaultValue: 120,
+      component: 'InputNumber',
+      label: 'labelWidth',
+      colProps: { span: 24 },
+      componentProps: {
+        size: 'small',
+      },
+    },
+    {
+      field: 'size',
+      defaultValue: 'default',
+      component: 'Select',
+      label: 'size',
+      colProps: { span: 24 },
+      componentProps: {
+        options: sizeList,
+        size: 'small',
+      },
+    },
+    {
+      field: 'disabled',
+      defaultValue: false,
+      component: 'Switch',
+      label: 'disabled',
+      colProps: { span: 24 },
+      componentProps: {
+        size: 'small',
+      },
+    },
+    {
+      field: 'compact',
+      defaultValue: false,
+      component: 'Switch',
+      label: 'compact',
+      colProps: { span: 24 },
+      componentProps: {
+        size: 'small',
+      },
+    },
+    {
+      field: '',
+      component: 'Divider',
+      label: '网格布局',
+      colProps: { span: 24 },
+      componentProps: {
+        orientation: 'center',
+      },
+    },
+    {
+      field: 'actionColOptions.span',
+      component: 'Slider',
+      defaultValue: 24,
+      label: 'span',
+      colProps: { span: 24 },
+      componentProps: {
+        min: 1,
+        max: 24,
+      },
+    },
+    {
+      field: '',
+      component: 'Divider',
+      label: '操作按钮',
+      colProps: { span: 24 },
+      componentProps: {
+        orientation: 'center',
+      },
+    },
+    {
+      field: 'showActionButtonGroup',
+      defaultValue: true,
+      component: 'Switch',
+      label: '操作按钮',
+      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: 'showResetButton',
+      defaultValue: true,
+      component: 'Switch',
+      label: '重置按钮',
+      colProps: { span: 24 },
+      componentProps: {
+        size: 'small',
+      },
+    },
+    {
+      field: 'showSubmitButton',
+      defaultValue: true,
+      component: 'Switch',
+      label: '提交按钮',
+      colProps: { span: 24 },
+      componentProps: {
+        size: 'small',
+      },
+    },
+  ];
+
   export default defineComponent({
-    components: { BasicForm, CollapseContainer, PageWrapper },
+    components: {
+      BasicForm,
+      CollapseContainer,
+      PageWrapper,
+      Drawer,
+      Space,
+    },
     setup() {
-      const { createMessage } = useMessage();
+      const visible = ref<boolean>(false);
+      const settingFormRef = ref();
+      const [registerSetting] = useForm({
+        labelWidth: 80,
+        schemas: formSchemas,
+        compact: true,
+        actionColOptions: { span: 24 },
+        showActionButtonGroup: false,
+      });
+
+      const resetSettings = async () => {
+        await settingFormRef.value?.resetFields();
+      };
+
+      const handleSubmitSetting = async (values: Recordable) => {
+        await setProps(values);
+        visible.value = false;
+      };
 
       const [register, { setProps, setFieldsValue, updateSchema }] = useForm({
         labelWidth: 120,
         schemas,
-        actionColOptions: {
+        actionColOptions: { span: 24 },
-          span: 24,
-        },
         fieldMapToTime: [['fieldTime', ['startTime', 'endTime'], 'YYYY-MM']],
       });
 
@@ -249,19 +332,32 @@
             displayRenderArray: [province, city, district],
           },
         });
-        await setFieldsValue({
+        await setFieldsValue({ field9 });
-          field9,
-        });
       }
 
+      const showDrawer = () => {
+        visible.value = true;
+      };
+
+      const onSettings = () => {
+        settingFormRef.value?.submit();
+      };
+
       return {
         register,
         schemas,
         handleSubmit: (values: Recordable) => {
-          createMessage.success('click search,values:' + JSON.stringify(values));
+          console.log(values);
         },
         setProps,
         handleLoad,
+        visible,
+        showDrawer,
+        settingFormRef,
+        onSettings,
+        resetSettings,
+        registerSetting,
+        handleSubmitSetting,
       };
     },
   });