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 21 </BasicForm>
22 22 </BasicDrawer>
23 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 26 import { BasicForm, useForm } from '/@/components/Form/index';
27 27 import { formSchema } from './role.data';
28 28 import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
... ... @@ -30,59 +30,45 @@
30 30  
31 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 74 </script>
... ...
src/views/demo/system/role/role.data.ts
... ... @@ -76,8 +76,8 @@ export const searchFormSchema: FormSchema[] = [
76 76 component: 'Select',
77 77 componentProps: {
78 78 options: [
79   - { label: '启用', value: '0' },
80   - { label: '停用', value: '1' },
  79 + { label: '启用', value: '1' },
  80 + { label: '停用', value: '0' },
81 81 ],
82 82 },
83 83 colProps: { span: 8 },
... ... @@ -104,8 +104,8 @@ export const formSchema: FormSchema[] = [
104 104 defaultValue: '0',
105 105 componentProps: {
106 106 options: [
107   - { label: '启用', value: '0' },
108   - { label: '停用', value: '1' },
  107 + { label: '启用', value: '1' },
  108 + { label: '停用', value: '0' },
109 109 ],
110 110 },
111 111 },
... ...