From 46c3d28c5633baaddad0da441185310b9360a45b Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期三, 03 七月 2024 14:56:21 +0800
Subject: [PATCH] 高级表单优化
---
src/views/demo/system/menu/MenuDrawer.vue | 95 ++++++++++++++++++++++-------------------------
1 files changed, 45 insertions(+), 50 deletions(-)
diff --git a/src/views/demo/system/menu/MenuDrawer.vue b/src/views/demo/system/menu/MenuDrawer.vue
index 0402510..4e9bf4b 100644
--- a/src/views/demo/system/menu/MenuDrawer.vue
+++ b/src/views/demo/system/menu/MenuDrawer.vue
@@ -10,61 +10,56 @@
<BasicForm @register="registerForm" />
</BasicDrawer>
</template>
-<script lang="ts">
- import { defineComponent, ref, computed, unref } from 'vue';
- import { BasicForm, useForm } from '/@/components/Form/index';
+<script lang="ts" setup>
+ import { ref, computed, unref } from 'vue';
+ import { BasicForm, useForm } from '@/components/Form';
import { formSchema } from './menu.data';
- import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+ import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
- import { getMenuList } from '/@/api/demo/system';
+ import { getMenuList } from '@/api/demo/system';
- export default defineComponent({
- name: 'MenuDrawer',
- components: { BasicDrawer, BasicForm },
- emits: ['success', 'register'],
- setup(_, { emit }) {
- const isUpdate = ref(true);
+ defineOptions({ name: 'MenuDrawer' });
- const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
- labelWidth: 100,
- schemas: formSchema,
- showActionButtonGroup: false,
- baseColProps: { lg: 12, md: 24 },
- });
+ const emit = defineEmits(['success', 'register']);
- const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
- resetFields();
- setDrawerProps({ confirmLoading: false });
- isUpdate.value = !!data?.isUpdate;
+ const isUpdate = ref(true);
- if (unref(isUpdate)) {
- setFieldsValue({
- ...data.record,
- });
- }
- const treeData = await getMenuList();
- updateSchema({
- field: 'parentMenu',
- componentProps: { treeData },
- });
- });
-
- const getTitle = computed(() => (!unref(isUpdate) ? '鏂板鑿滃崟' : '缂栬緫鑿滃崟'));
-
- async function handleSubmit() {
- try {
- const values = await validate();
- setDrawerProps({ confirmLoading: true });
- // TODO custom api
- console.log(values);
- closeDrawer();
- emit('success');
- } finally {
- setDrawerProps({ confirmLoading: false });
- }
- }
-
- return { registerDrawer, registerForm, getTitle, handleSubmit };
- },
+ const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
+ labelWidth: 100,
+ schemas: formSchema,
+ showActionButtonGroup: false,
+ baseColProps: { lg: 12, md: 24 },
});
+
+ const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+ resetFields();
+ setDrawerProps({ confirmLoading: false });
+ isUpdate.value = !!data?.isUpdate;
+
+ if (unref(isUpdate)) {
+ setFieldsValue({
+ ...data.record,
+ });
+ }
+ const treeData = await getMenuList();
+ updateSchema({
+ field: 'parentMenu',
+ componentProps: { treeData },
+ });
+ });
+
+ const getTitle = computed(() => (!unref(isUpdate) ? '鏂板鑿滃崟' : '缂栬緫鑿滃崟'));
+
+ async function handleSubmit() {
+ try {
+ const values = await validate();
+ setDrawerProps({ confirmLoading: true });
+ // TODO custom api
+ console.log(values);
+ closeDrawer();
+ emit('success');
+ } finally {
+ setDrawerProps({ confirmLoading: false });
+ }
+ }
</script>
--
Gitblit v1.9.3