|
5 | 5 | <!-- 搜索工作栏 -->
|
6 | 6 | <ContentWrap>
|
7 | 7 | <el-form
|
8 |
| - class="-mb-15px" |
9 |
| - :model="queryParams" |
10 | 8 | ref="queryFormRef"
|
11 | 9 | :inline="true"
|
| 10 | + :model="queryParams" |
| 11 | + class="-mb-15px" |
12 | 12 | label-width="68px"
|
13 | 13 | >
|
14 | 14 | <el-form-item label="菜单名称" prop="name">
|
15 | 15 | <el-input
|
16 | 16 | v-model="queryParams.name"
|
17 |
| - placeholder="请输入菜单名称" |
| 17 | + class="!w-240px" |
18 | 18 | clearable
|
| 19 | + placeholder="请输入菜单名称" |
19 | 20 | @keyup.enter="handleQuery"
|
20 |
| - class="!w-240px" |
21 | 21 | />
|
22 | 22 | </el-form-item>
|
23 | 23 | <el-form-item label="状态" prop="status">
|
24 | 24 | <el-select
|
25 | 25 | v-model="queryParams.status"
|
26 |
| - placeholder="请选择菜单状态" |
27 |
| - clearable |
28 | 26 | class="!w-240px"
|
| 27 | + clearable |
| 28 | + placeholder="请选择菜单状态" |
29 | 29 | >
|
30 | 30 | <el-option
|
31 | 31 | v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
|
36 | 36 | </el-select>
|
37 | 37 | </el-form-item>
|
38 | 38 | <el-form-item>
|
39 |
| - <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> |
40 |
| - <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button> |
| 39 | + <el-button @click="handleQuery"> |
| 40 | + <Icon class="mr-5px" icon="ep:search" /> |
| 41 | + 搜索 |
| 42 | + </el-button> |
| 43 | + <el-button @click="resetQuery"> |
| 44 | + <Icon class="mr-5px" icon="ep:refresh" /> |
| 45 | + 重置 |
| 46 | + </el-button> |
41 | 47 | <el-button
|
42 |
| - type="primary" |
| 48 | + v-hasPermi="['system:menu:create']" |
43 | 49 | plain
|
| 50 | + type="primary" |
44 | 51 | @click="openForm('create')"
|
45 |
| - v-hasPermi="['system:menu:create']" |
46 | 52 | >
|
47 |
| - <Icon icon="ep:plus" class="mr-5px" /> 新增 |
| 53 | + <Icon class="mr-5px" icon="ep:plus" /> |
| 54 | + 新增 |
| 55 | + </el-button> |
| 56 | + <el-button plain type="danger" @click="toggleExpandAll"> |
| 57 | + <Icon class="mr-5px" icon="ep:sort" /> |
| 58 | + 展开/折叠 |
48 | 59 | </el-button>
|
49 |
| - <el-button type="danger" plain @click="toggleExpandAll"> |
50 |
| - <Icon icon="ep:sort" class="mr-5px" /> 展开/折叠 |
| 60 | + <el-button plain @click="refreshMenu"> |
| 61 | + <Icon class="mr-5px" icon="ep:refresh" /> |
| 62 | + 刷新菜单缓存 |
51 | 63 | </el-button>
|
52 | 64 | </el-form-item>
|
53 | 65 | </el-form>
|
|
56 | 68 | <!-- 列表 -->
|
57 | 69 | <ContentWrap>
|
58 | 70 | <el-table
|
| 71 | + v-if="refreshTable" |
59 | 72 | v-loading="loading"
|
60 | 73 | :data="list"
|
61 |
| - row-key="id" |
62 |
| - v-if="refreshTable" |
63 | 74 | :default-expand-all="isExpandAll"
|
| 75 | + row-key="id" |
64 | 76 | >
|
65 |
| - <el-table-column prop="name" label="菜单名称" :show-overflow-tooltip="true" width="250" /> |
66 |
| - <el-table-column prop="icon" label="图标" align="center" width="100"> |
| 77 | + <el-table-column :show-overflow-tooltip="true" label="菜单名称" prop="name" width="250" /> |
| 78 | + <el-table-column align="center" label="图标" prop="icon" width="100"> |
67 | 79 | <template #default="scope">
|
68 | 80 | <Icon :icon="scope.row.icon" />
|
69 | 81 | </template>
|
70 | 82 | </el-table-column>
|
71 |
| - <el-table-column prop="sort" label="排序" width="60" /> |
72 |
| - <el-table-column prop="permission" label="权限标识" :show-overflow-tooltip="true" /> |
73 |
| - <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true" /> |
74 |
| - <el-table-column prop="componentName" label="组件名称" :show-overflow-tooltip="true" /> |
75 |
| - <el-table-column prop="status" label="状态" width="80"> |
| 83 | + <el-table-column label="排序" prop="sort" width="60" /> |
| 84 | + <el-table-column :show-overflow-tooltip="true" label="权限标识" prop="permission" /> |
| 85 | + <el-table-column :show-overflow-tooltip="true" label="组件路径" prop="component" /> |
| 86 | + <el-table-column :show-overflow-tooltip="true" label="组件名称" prop="componentName" /> |
| 87 | + <el-table-column label="状态" prop="status" width="80"> |
76 | 88 | <template #default="scope">
|
77 | 89 | <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
|
78 | 90 | </template>
|
79 | 91 | </el-table-column>
|
80 |
| - <el-table-column label="操作" align="center"> |
| 92 | + <el-table-column align="center" label="操作"> |
81 | 93 | <template #default="scope">
|
82 | 94 | <el-button
|
| 95 | + v-hasPermi="['system:menu:update']" |
83 | 96 | link
|
84 | 97 | type="primary"
|
85 | 98 | @click="openForm('update', scope.row.id)"
|
86 |
| - v-hasPermi="['system:menu:update']" |
87 | 99 | >
|
88 | 100 | 修改
|
89 | 101 | </el-button>
|
90 | 102 | <el-button
|
| 103 | + v-hasPermi="['system:menu:create']" |
91 | 104 | link
|
92 | 105 | type="primary"
|
93 | 106 | @click="openForm('create', undefined, scope.row.id)"
|
94 |
| - v-hasPermi="['system:menu:create']" |
95 | 107 | >
|
96 | 108 | 新增
|
97 | 109 | </el-button>
|
98 | 110 | <el-button
|
| 111 | + v-hasPermi="['system:menu:delete']" |
99 | 112 | link
|
100 | 113 | type="danger"
|
101 | 114 | @click="handleDelete(scope.row.id)"
|
102 |
| - v-hasPermi="['system:menu:delete']" |
103 | 115 | >
|
104 | 116 | 删除
|
105 | 117 | </el-button>
|
|
111 | 123 | <!-- 表单弹窗:添加/修改 -->
|
112 | 124 | <MenuForm ref="formRef" @success="getList" />
|
113 | 125 | </template>
|
114 |
| -<script setup lang="ts" name="SystemMenu"> |
| 126 | +<script lang="ts" name="SystemMenu" setup> |
115 | 127 | import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
116 | 128 | import { handleTree } from '@/utils/tree'
|
117 | 129 | import * as MenuApi from '@/api/system/menu'
|
118 | 130 | import MenuForm from './MenuForm.vue'
|
| 131 | +import { CACHE_KEY, useCache } from '@/hooks/web/useCache' |
| 132 | +const { wsCache } = useCache() |
119 | 133 | const { t } = useI18n() // 国际化
|
120 | 134 | const message = useMessage() // 消息弹窗
|
121 | 135 |
|
@@ -166,6 +180,17 @@ const toggleExpandAll = () => {
|
166 | 180 | })
|
167 | 181 | }
|
168 | 182 |
|
| 183 | +/** 刷新菜单缓存按钮操作 */ |
| 184 | +const refreshMenu = async () => { |
| 185 | + try { |
| 186 | + await message.confirm('即将更新缓存刷新浏览器!', '刷新菜单缓存') |
| 187 | + // 清空,从而触发刷新 |
| 188 | + wsCache.delete(CACHE_KEY.ROLE_ROUTERS) |
| 189 | + // 刷新浏览器 |
| 190 | + location.reload() |
| 191 | + } catch {} |
| 192 | +} |
| 193 | +
|
169 | 194 | /** 删除按钮操作 */
|
170 | 195 | const handleDelete = async (id: number) => {
|
171 | 196 | try {
|
|
0 commit comments