From fd6fd9e520fa688ff3b83bcf7e101241c392366a Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 6 Sep 2024 09:20:32 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E3=80=91SYSTEM=EF=BC=9A=E5=BF=AB=E9=80=9F=E5=BC=80=E5=85=B3?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E7=9A=84=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/menu/index.vue | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 49e76b05..b2c93bbe 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -84,9 +84,8 @@
       <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="componentName" />
-      <el-table-column label="状态" prop="status" width="160">
+      <el-table-column label="状态" prop="status">
         <template #default="scope">
-          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
           <el-switch
             class="ml-4px"
             v-model="scope.row.status"
@@ -94,7 +93,7 @@
             :active-value="CommonStatusEnum.ENABLE"
             :inactive-value="CommonStatusEnum.DISABLE"
             :loading="menuStatusUpdating[scope.row.id]"
-            @change="(val) => onMenuStatusChanged(scope.row, val as number)"
+            @change="(val) => handleStatusChanged(scope.row, val as number)"
           />
         </template>
       </el-table-column>
@@ -148,7 +147,6 @@ const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
 const loading = ref(true) // 列表的加载中
-const menuStatusUpdating = ref({}) // 列表的加载中
 const list = ref<any>([]) // 列表的数据
 const queryParams = reactive({
   name: undefined,
@@ -220,11 +218,19 @@ const handleDelete = async (id: number) => {
   } 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
-  menu.status = val
-  await MenuApi.updateMenu(menu)
-  menuStatusUpdating.value[menu.id] = false
+  try {
+    // 2. 发起更新状态
+    menu.status = val
+    await MenuApi.updateMenu(menu)
+  } finally {
+    // 3. 标记 menu.id 更新完成
+    menuStatusUpdating.value[menu.id] = false
+  }
 }
 
 /** 初始化 **/