|
|
@@ -4,9 +4,13 @@ import type { VbenFormProps } from '@vben/common-ui';
|
|
4
|
4
|
import type { VxeGridProps } from '#/adapter/vxe-table';
|
|
5
|
5
|
import type { Menu } from '#/api/system/menu/model';
|
|
6
|
6
|
|
|
|
7
|
+import { ref } from 'vue';
|
|
|
8
|
+
|
|
7
|
9
|
import { Page, useVbenDrawer } from '@vben/common-ui';
|
|
8
|
10
|
import { $t } from '@vben/locales';
|
|
9
|
11
|
|
|
|
12
|
+import { ElTabPane, ElTabs } from 'element-plus';
|
|
|
13
|
+
|
|
10
|
14
|
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
|
11
|
15
|
import { menuDel, menuList } from '#/api/system/menu';
|
|
12
|
16
|
|
|
|
@@ -17,6 +21,10 @@ import { columns, querySchema } from './table-data';
|
|
17
|
21
|
* 不要问为什么有两个根节点 v-if会控制只会渲染一个
|
|
18
|
22
|
*/
|
|
19
|
23
|
|
|
|
24
|
+// 添加tab切换功能
|
|
|
25
|
+const activeTab = ref('pc'); // 默认PC端
|
|
|
26
|
+const sourceMap = { pc: 0, mobile: 1 };
|
|
|
27
|
+
|
|
20
|
28
|
const formOptions: VbenFormProps = {
|
|
21
|
29
|
commonConfig: {
|
|
22
|
30
|
labelWidth: 80,
|
|
|
@@ -38,6 +46,7 @@ const gridOptions: VxeGridProps = {
|
|
38
|
46
|
query: async (_, formValues = {}) => {
|
|
39
|
47
|
const resp = await menuList({
|
|
40
|
48
|
...formValues,
|
|
|
49
|
+ source: sourceMap[activeTab.value], // 添加source参数
|
|
41
|
50
|
});
|
|
42
|
51
|
return { items: resp };
|
|
43
|
52
|
},
|
|
|
@@ -79,15 +88,23 @@ const collapseAll = () => {
|
|
79
|
88
|
gridApi.grid?.setAllTreeExpand(false);
|
|
80
|
89
|
};
|
|
81
|
90
|
const addMenu = () => {
|
|
82
|
|
- drawerApi.setData({});
|
|
|
91
|
+ drawerApi.setData({ source: sourceMap[activeTab.value] }); // 传递source参数
|
|
83
|
92
|
drawerApi.open();
|
|
84
|
93
|
};
|
|
85
|
94
|
function handleEditMenu(record: Menu) {
|
|
86
|
|
- drawerApi.setData({ id: record.menuId, update: true });
|
|
|
95
|
+ drawerApi.setData({
|
|
|
96
|
+ id: record.menuId,
|
|
|
97
|
+ update: true,
|
|
|
98
|
+ source: sourceMap[activeTab.value],
|
|
|
99
|
+ }); // 传递source参数
|
|
87
|
100
|
drawerApi.open();
|
|
88
|
101
|
}
|
|
89
|
102
|
function handleAddMenu(record: Menu) {
|
|
90
|
|
- drawerApi.setData({ id: record.menuId, update: false });
|
|
|
103
|
+ drawerApi.setData({
|
|
|
104
|
+ id: record.menuId,
|
|
|
105
|
+ update: false,
|
|
|
106
|
+ source: sourceMap[activeTab.value],
|
|
|
107
|
+ }); // 传递source参数
|
|
91
|
108
|
drawerApi.open();
|
|
92
|
109
|
}
|
|
93
|
110
|
async function confirmEvent(row: Menu) {
|
|
|
@@ -95,10 +112,19 @@ async function confirmEvent(row: Menu) {
|
|
95
|
112
|
console.error(result);
|
|
96
|
113
|
await gridApi.reload();
|
|
97
|
114
|
}
|
|
|
115
|
+
|
|
|
116
|
+// 切换tab时重新加载数据
|
|
|
117
|
+const handleTabChange = () => {
|
|
|
118
|
+ gridApi.reload();
|
|
|
119
|
+};
|
|
98
|
120
|
</script>
|
|
99
|
121
|
|
|
100
|
122
|
<template>
|
|
101
|
|
- <Page class="h-full">
|
|
|
123
|
+ <Page class="h-full" style="background-color: #fff">
|
|
|
124
|
+ <ElTabs v-model="activeTab" @tab-change="handleTabChange" class="mb-4">
|
|
|
125
|
+ <ElTabPane label="PC端" name="pc" />
|
|
|
126
|
+ <ElTabPane label="移动端" name="mobile" />
|
|
|
127
|
+ </ElTabs>
|
|
102
|
128
|
<BasicTable :table-title="$t('menus.table-title')">
|
|
103
|
129
|
<template #toolbar-tools>
|
|
104
|
130
|
<ElSpace>
|