yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

【代码优化】SYSTEM：快速开关菜单的按钮

pull/537/MERGE
YunaiV 2024-09-06 09:20:32 +08:00
parent 15ed1cf5c2
commit fd6fd9e520
1 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/views/system/menu/index.vue
View File

@ -84,9 +84,8 @@
<el-table-column :show-overflow-tooltip="true" label="权限标识" prop="permission" /> <el-table-column :show-overflow-tooltip="true" label="权限标识" prop="permission" />
<el-table-column :show-overflow-tooltip="true" label="组件路径" prop="component" /> <el-table-column :show-overflow-tooltip="true" label="组件路径" prop="component" />
<el-table-column :show-overflow-tooltip="true" label="组件名称" prop="componentName" /> <el-table-column :show-overflow-tooltip="true" label="组件名称" prop="componentName" />
<el-table-column label="状态" prop="status" width="160"> <el-table-column label="状态" prop="status">
<template #default="scope"> <template #default="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
<el-switch <el-switch
class="ml-4px" class="ml-4px"
v-model="scope.row.status" v-model="scope.row.status"
@ -94,7 +93,7 @@
:active-value="CommonStatusEnum.ENABLE" :active-value="CommonStatusEnum.ENABLE"
:inactive-value="CommonStatusEnum.DISABLE" :inactive-value="CommonStatusEnum.DISABLE"
:loading="menuStatusUpdating[scope.row.id]" :loading="menuStatusUpdating[scope.row.id]"
@change="(val) => onMenuStatusChanged(scope.row, val as number)" @change="(val) => handleStatusChanged(scope.row, val as number)"
/> />
</template> </template>
</el-table-column> </el-table-column>
@ -148,7 +147,6 @@ const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
const loading = ref(true) // 列表的加载中 const loading = ref(true) // 列表的加载中
const menuStatusUpdating = ref({}) // 列表的加载中
const list = ref<any>([]) // 列表的数据 const list = ref<any>([]) // 列表的数据
const queryParams = reactive({ const queryParams = reactive({
name: undefined, name: undefined,
@ -220,11 +218,19 @@ const handleDelete = async (id: number) => {
} catch {} } catch {}
} }
const onMenuStatusChanged = async (menu: MenuVO, val: number) => { /** 开启/关闭菜单的状态 */
const menuStatusUpdating = ref({}) // 菜单状态更新中的 menu 映射。key：菜单编号，value：是否更新中
const handleStatusChanged = async (menu: MenuVO, val: number) => {
// 1. 标记 menu.id 更新中
menuStatusUpdating.value[menu.id] = true menuStatusUpdating.value[menu.id] = true
menu.status = val try {
await MenuApi.updateMenu(menu) // 2. 发起更新状态
menuStatusUpdating.value[menu.id] = false menu.status = val
await MenuApi.updateMenu(menu)
} finally {
// 3. 标记 menu.id 更新完成
menuStatusUpdating.value[menu.id] = false
}
} }
/** 初始化 **/ /** 初始化 **/