Commit 08f479f3e17799122d53406d70369198bfaaa555

Authored by zty
Committed by GitHub
1 parent c054d73f

RoleDrawe.vue 改造为setup,角色编辑时状态不正确 (#2857)

* chore: 改造为setup

* fix: 状态不一致
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 },