tenant-package-drawer.vue
4.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<script setup lang="ts">
import type { MenuOption } from '#/api/system/menu/model';
import { computed, nextTick, ref } from 'vue';
import { useVbenDrawer } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { cloneDeep, eachTree } from '@vben/utils';
import { omit } from 'lodash-es';
import { useVbenForm } from '#/adapter/form';
import { tenantPackageMenuTreeSelect } from '#/api/system/menu';
import {
packageAdd,
packageInfo,
packageUpdate,
} from '#/api/system/tenant-package';
import { MenuSelectTable } from '#/components/tree';
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
import { drawerSchema } from './data';
const emit = defineEmits<{ reload: [] }>();
const isUpdate = ref(false);
const title = computed(() => {
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
});
const [BasicForm, formApi] = useVbenForm({
commonConfig: {
formItemClass: 'col-span-2',
},
layout: 'vertical',
schema: drawerSchema(),
showDefaultActions: false,
wrapperClass: 'grid-cols-2',
});
const menuTree = ref<MenuOption[]>([]);
async function setupMenuTree(id?: number | string) {
// 0为新增使用 获取除了`租户管理`的所有菜单
const resp = await tenantPackageMenuTreeSelect(id ?? 0);
const menus = resp.menus;
// i18n处理
eachTree(menus, (node) => {
node.menuName = $t(node.menuName);
});
// 设置菜单信息
menuTree.value = menus;
// keys依赖于menu 需要先加载menu
await nextTick();
await formApi.setFieldValue('menuIds', resp.checkedKeys);
}
async function customFormValueGetter() {
const v = await defaultFormValueGetter(formApi)();
// 获取勾选信息
const menuIds = menuSelectRef.value?.getCheckedKeys?.() ?? [];
const mixStr = v + menuIds.join(',');
return mixStr;
}
const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
{
initializedGetter: customFormValueGetter,
currentGetter: customFormValueGetter,
},
);
const [BasicDrawer, drawerApi] = useVbenDrawer({
onBeforeClose,
onClosed: handleClosed,
onConfirm: handleConfirm,
destroyOnClose: true,
async onOpenChange(isOpen) {
if (!isOpen) {
return null;
}
drawerApi.drawerLoading(true);
const { id } = drawerApi.getData() as { id?: number | string };
isUpdate.value = !!id;
if (isUpdate.value && id) {
const record = await packageInfo(id);
// 需要排除menuIds menuIds为string
// 通过setupMenuTreeSelect设置
await formApi.setValues(omit(record, ['menuIds']));
}
// init菜单 注意顺序要放在赋值record之后 内部watch会依赖record
await setupMenuTree(id);
await markInitialized();
drawerApi.drawerLoading(false);
},
});
const menuSelectRef = ref<InstanceType<typeof MenuSelectTable>>();
async function handleConfirm() {
try {
drawerApi.drawerLoading(true);
const { valid } = await formApi.validate();
if (!valid) {
return;
}
// 这个用于提交
const menuIds = menuSelectRef.value?.getCheckedKeys?.() ?? [];
// formApi.getValues拿到的是一个readonly对象，不能直接修改，需要cloneDeep
const data = cloneDeep(await formApi.getValues());
data.menuIds = menuIds;
await (isUpdate.value ? packageUpdate(data) : packageAdd(data));
resetInitialized();
emit('reload');
drawerApi.close();
} catch (error) {
console.error(error);
} finally {
drawerApi.drawerLoading(false);
}
}
async function handleClosed() {
await formApi.resetForm();
resetInitialized();
}
/**
* 通过回调更新 无法通过v-model
* @param value 菜单选择是否严格模式
*/
function handleMenuCheckStrictlyChange(value: boolean) {
formApi.setFieldValue('menuCheckStrictly', value);
}
</script>
<template>
<BasicDrawer :title="title" class="w-[800px]">
<BasicForm>
<template #menuIds="slotProps">
<div class="h-[600px] w-full">
<!-- association为readonly 不能通过v-model绑定 -->
<MenuSelectTable
ref="menuSelectRef"
:checked-keys="slotProps.value"
:association="formApi.form.values.menuCheckStrictly"
:menus="menuTree"
@update:association="handleMenuCheckStrictlyChange"
/>
</div>
</template>
</BasicForm>
</BasicDrawer>
</template>