Commit 08f479f3e17799122d53406d70369198bfaaa555
Committed by
GitHub
1 parent
c054d73f
RoleDrawe.vue 改造为setup,角色编辑时状态不正确 (#2857)
* chore: 改造为setup * fix: 状态不一致
Showing
2 changed files
with
41 additions
and
55 deletions
src/views/demo/system/role/RoleDrawer.vue
@@ -21,8 +21,8 @@ | @@ -21,8 +21,8 @@ | ||
21 | </BasicForm> | 21 | </BasicForm> |
22 | </BasicDrawer> | 22 | </BasicDrawer> |
23 | </template> | 23 | </template> |
24 | -<script lang="ts"> | ||
25 | - import { defineComponent, ref, computed, unref } from 'vue'; | 24 | +<script lang="ts" setup> |
25 | + import { ref, computed, unref } from 'vue'; | ||
26 | import { BasicForm, useForm } from '/@/components/Form/index'; | 26 | import { BasicForm, useForm } from '/@/components/Form/index'; |
27 | import { formSchema } from './role.data'; | 27 | import { formSchema } from './role.data'; |
28 | import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; | 28 | import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; |
@@ -30,59 +30,45 @@ | @@ -30,59 +30,45 @@ | ||
30 | 30 | ||
31 | import { getMenuList } from '/@/api/demo/system'; | 31 | import { getMenuList } from '/@/api/demo/system'; |
32 | 32 | ||
33 | - export default defineComponent({ | ||
34 | - name: 'RoleDrawer', | ||
35 | - components: { BasicDrawer, BasicForm, BasicTree }, | ||
36 | - emits: ['success', 'register'], | ||
37 | - setup(_, { emit }) { | ||
38 | - const isUpdate = ref(true); | ||
39 | - const treeData = ref<TreeItem[]>([]); | 33 | + const emit = defineEmits(['success', 'register']); |
34 | + const isUpdate = ref(true); | ||
35 | + const treeData = ref<TreeItem[]>([]); | ||
40 | 36 | ||
41 | - const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({ | ||
42 | - labelWidth: 90, | ||
43 | - baseColProps: { span: 24 }, | ||
44 | - schemas: formSchema, | ||
45 | - showActionButtonGroup: false, | ||
46 | - }); | 37 | + const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({ |
38 | + labelWidth: 90, | ||
39 | + baseColProps: { span: 24 }, | ||
40 | + schemas: formSchema, | ||
41 | + showActionButtonGroup: false, | ||
42 | + }); | ||
47 | 43 | ||
48 | - const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => { | ||
49 | - resetFields(); | ||
50 | - setDrawerProps({ confirmLoading: false }); | ||
51 | - // 需要在setFieldsValue之前先填充treeData,否则Tree组件可能会报key not exist警告 | ||
52 | - if (unref(treeData).length === 0) { | ||
53 | - treeData.value = (await getMenuList()) as any as TreeItem[]; | ||
54 | - } | ||
55 | - isUpdate.value = !!data?.isUpdate; | 44 | + const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => { |
45 | + resetFields(); | ||
46 | + setDrawerProps({ confirmLoading: false }); | ||
47 | + // 需要在setFieldsValue之前先填充treeData,否则Tree组件可能会报key not exist警告 | ||
48 | + if (unref(treeData).length === 0) { | ||
49 | + treeData.value = (await getMenuList()) as any as TreeItem[]; | ||
50 | + } | ||
51 | + isUpdate.value = !!data?.isUpdate; | ||
56 | 52 | ||
57 | - if (unref(isUpdate)) { | ||
58 | - setFieldsValue({ | ||
59 | - ...data.record, | ||
60 | - }); | ||
61 | - } | 53 | + if (unref(isUpdate)) { |
54 | + setFieldsValue({ | ||
55 | + ...data.record, | ||
62 | }); | 56 | }); |
57 | + } | ||
58 | + }); | ||
63 | 59 | ||
64 | - const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色')); | ||
65 | - | ||
66 | - async function handleSubmit() { | ||
67 | - try { | ||
68 | - const values = await validate(); | ||
69 | - setDrawerProps({ confirmLoading: true }); | ||
70 | - // TODO custom api | ||
71 | - console.log(values); | ||
72 | - closeDrawer(); | ||
73 | - emit('success'); | ||
74 | - } finally { | ||
75 | - setDrawerProps({ confirmLoading: false }); | ||
76 | - } | ||
77 | - } | 60 | + const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色')); |
78 | 61 | ||
79 | - return { | ||
80 | - registerDrawer, | ||
81 | - registerForm, | ||
82 | - getTitle, | ||
83 | - handleSubmit, | ||
84 | - treeData, | ||
85 | - }; | ||
86 | - }, | ||
87 | - }); | 62 | + async function handleSubmit() { |
63 | + try { | ||
64 | + const values = await validate(); | ||
65 | + setDrawerProps({ confirmLoading: true }); | ||
66 | + // TODO custom api | ||
67 | + console.log(values); | ||
68 | + closeDrawer(); | ||
69 | + emit('success'); | ||
70 | + } finally { | ||
71 | + setDrawerProps({ confirmLoading: false }); | ||
72 | + } | ||
73 | + } | ||
88 | </script> | 74 | </script> |
src/views/demo/system/role/role.data.ts
@@ -76,8 +76,8 @@ export const searchFormSchema: FormSchema[] = [ | @@ -76,8 +76,8 @@ export const searchFormSchema: FormSchema[] = [ | ||
76 | component: 'Select', | 76 | component: 'Select', |
77 | componentProps: { | 77 | componentProps: { |
78 | options: [ | 78 | options: [ |
79 | - { label: '启用', value: '0' }, | ||
80 | - { label: '停用', value: '1' }, | 79 | + { label: '启用', value: '1' }, |
80 | + { label: '停用', value: '0' }, | ||
81 | ], | 81 | ], |
82 | }, | 82 | }, |
83 | colProps: { span: 8 }, | 83 | colProps: { span: 8 }, |
@@ -104,8 +104,8 @@ export const formSchema: FormSchema[] = [ | @@ -104,8 +104,8 @@ export const formSchema: FormSchema[] = [ | ||
104 | defaultValue: '0', | 104 | defaultValue: '0', |
105 | componentProps: { | 105 | componentProps: { |
106 | options: [ | 106 | options: [ |
107 | - { label: '启用', value: '0' }, | ||
108 | - { label: '停用', value: '1' }, | 107 | + { label: '启用', value: '1' }, |
108 | + { label: '停用', value: '0' }, | ||
109 | ], | 109 | ], |
110 | }, | 110 | }, |
111 | }, | 111 | }, |