refactor: 重构案例代码 (#2589)

src/views/demo/form/UseForm.vue

@@ -1,18 +1,25 @@
 <template>
   <PageWrapper title="UseForm操作示例">
-    <Space class="mb-4">
-      <a-button type="primary" @click="showDrawer"> 更改设置 </a-button>
-      <a-button @click="setProps({ resetButtonOptions: { disabled: true, text: '重置New' } })">
-        修改重置按钮
-      </a-button>
-      <a-button @click="setProps({ submitButtonOptions: { disabled: true, loading: true } })">
-        修改查询按钮
-      </a-button>
-      <a-button @click="handleLoad" class="mr-2"> 联动回显 </a-button>
-    </Space>
+    <a-button class="mb-4" type="primary" @click="showDrawer"> 更改设置 </a-button>
 
     <Drawer v-model:visible="visible" title="更改设置" placement="right">
-      <BasicForm ref="settingFormRef" @register="registerSetting" @submit="handleSubmitSetting" />
+      <BasicForm ref="settingFormRef" @register="registerSetting" @submit="handleSubmitSetting">
+        <template #other>
+          <Space>
+            <a-button
+              @click="() => withClose({ resetButtonOptions: { disabled: true, text: '重置New' } })"
+            >
+              修改重置按钮
+            </a-button>
+            <a-button
+              @click="() => withClose({ submitButtonOptions: { disabled: true, loading: true } })"
+            >
+              修改查询按钮
+            </a-button>
+            <a-button @click="handleLoad" class="mr-2"> 联动回显 </a-button>
+          </Space>
+        </template>
+      </BasicForm>
       <template #extra>
         <Space>
           <a-button @click="resetSettings">重置设置</a-button>
@@ -30,7 +37,7 @@
 <script lang="ts">
   import { defineComponent, ref } from 'vue';
   import { Drawer, Space } from 'ant-design-vue';
-  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
+  import { BasicForm, FormSchema, useForm, type FormProps } from '/@/components/Form';
   import { CollapseContainer } from '/@/components/Container';
   import { PageWrapper } from '/@/components/Page';
   import { areaRecord } from '/@/api/demo/cascader';
@@ -272,6 +279,22 @@
         size: 'small',
       },
     },
+    {
+      field: '',
+      component: 'Divider',
+      label: '其他事件',
+      colProps: { span: 24 },
+      componentProps: {
+        orientation: 'center',
+      },
+    },
+    {
+      field: 'other',
+      component: 'Input',
+      label: '',
+      colProps: { span: 24 },
+      colSlot: 'other',
+    },
   ];
 
   export default defineComponent({
@@ -294,6 +317,9 @@
       });
 
       const resetSettings = async () => {
+        setProps({ resetButtonOptions: { disabled: false, text: '重置' } });
+        setProps({ submitButtonOptions: { disabled: false, loading: false } });
+        await setFieldsValue({ field9: [] });
         await settingFormRef.value?.resetFields();
       };
 
@@ -343,6 +369,11 @@
         settingFormRef.value?.submit();
       };
 
+      const withClose = (formProps: Partial<FormProps>) => {
+        setProps(formProps);
+        visible.value = false;
+      };
+
       return {
         register,
         schemas,
@@ -354,6 +385,7 @@
         visible,
         showDrawer,
         settingFormRef,
+        withClose,
         onSettings,
         resetSettings,
         registerSetting,