github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-01-26 12:48:48 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
luocong2016 2023-03-02 15:13:30 +08:00 committed by GitHub
parent 256e0275fe
commit dce3aba20d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 44 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/views/demo/form/UseForm.vue
View File

@ -1,18 +1,25 @@
<template> <template>
<PageWrapper title="UseForm操作示例"> <PageWrapper title="UseForm操作示例">
<Space class="mb-4"> <a-button class="mb-4" type="primary" @click="showDrawer"> 更改设置 </a-button>
<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>
<Drawer v-model:visible="visible" title="更改设置" placement="right"> <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> <template #extra>
<Space> <Space>
<a-button @click="resetSettings">重置设置</a-button> <a-button @click="resetSettings">重置设置</a-button>
@ -30,7 +37,7 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, ref } from 'vue'; import { defineComponent, ref } from 'vue';
import { Drawer, Space } from 'ant-design-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 { CollapseContainer } from '/@/components/Container';
import { PageWrapper } from '/@/components/Page'; import { PageWrapper } from '/@/components/Page';
import { areaRecord } from '/@/api/demo/cascader'; import { areaRecord } from '/@/api/demo/cascader';
@ -272,6 +279,22 @@
size: 'small', 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({ export default defineComponent({
@ -294,6 +317,9 @@
}); });
const resetSettings = async () => { const resetSettings = async () => {
setProps({ resetButtonOptions: { disabled: false, text: '重置' } });
setProps({ submitButtonOptions: { disabled: false, loading: false } });
await setFieldsValue({ field9: [] });
await settingFormRef.value?.resetFields(); await settingFormRef.value?.resetFields();
}; };
@ -343,6 +369,11 @@
settingFormRef.value?.submit(); settingFormRef.value?.submit();
}; };
const withClose = (formProps: Partial<FormProps>) => {
setProps(formProps);
visible.value = false;
};
return { return {
register, register,
schemas, schemas,
@ -354,6 +385,7 @@
visible, visible,
showDrawer, showDrawer,
settingFormRef, settingFormRef,
withClose,
onSettings, onSettings,
resetSettings, resetSettings,
registerSetting, registerSetting,