pref: 编辑菜单上级禁止选择自己及其子菜单

src/views/permission/menu/index.vue

@@ -58,8 +58,8 @@
             <el-dialog v-model="menuState.formVisible" class="form" title="菜单表单">
                 <el-form
                     ref="refsMenuForm"
-                    label-width="100px"
                     v-loading="menuState.submitting"
+                    label-width="100px"
                     :model="menuState.form"
                     :rules="menuState.rules"
                 >
@@ -106,8 +106,8 @@
                     <el-form-item label="菜单排序" prop="sort">
                         <el-input-number v-model="menuState.form.sort" :min="0" />
                     </el-form-item>
-                    <el-scrollbar maxHeight="180px">
-                        <el-form-item label="接口权限" v-if="!menuState.form.permissionListVO.length">
+                    <el-scrollbar max-height="180px">
+                        <el-form-item v-if="!menuState.form.permissionListVO.length" label="接口权限">
                             <el-button @click="handelAddPermission(0)">添加关联接口</el-button>
                         </el-form-item>
                         <template v-else>
@@ -118,7 +118,7 @@
                                     </el-form-item>
                                 </el-col>
                                 <el-col :span="13">
-                                    <el-form-item :labelWidth="5">
+                                    <el-form-item :label-width="5">
                                         <el-input v-model="item.uri" placeholder="请输入请求URL">
                                             <template #prepend>
                                                 <el-select v-model="item.method" style="width: 80px">
@@ -160,7 +160,37 @@
 
     /* 查询菜单 */
     const loading = ref(false);
-    const list = computed(() => _.cloneDeep(store.state.menu.list));
+    const list = computed(() => {
+        let list = _.cloneDeep(store.state.menu.list);
+        /**
+         * 如果是编辑，上级菜单选项需要把自身以及其子级禁用
+         */
+        const deep = (data, disabled) => {
+            if (disabled) {
+                for (let item of data) {
+                    item.disabled = true;
+                    if (item.menuChild) {
+                        item.menuChild = deep(item.menuChild, true);
+                    }
+                }
+            } else {
+                for (let item of data) {
+                    if (item.id === menuState.form.id) {
+                        item.disabled = true;
+                        item.menuChild = deep(item.menuChild, true);
+                        break;
+                    }
+                    if (item.menuChild) {
+                        item.menuChild = deep(item.menuChild);
+                    }
+                }
+            }
+
+            return data;
+        };
+        console.log(deep(list));
+        return menuState.form.id ? deep(list) : list;
+    });
     const state = reactive({
         condition: { systemId: null },
         condition2: { menuId: null },
@@ -188,9 +218,6 @@
         { immediate: true, deep: true }
     );
 
-    /* 查询功能 */
-    const loading2 = ref(false);
-
     /* 菜单表单 */
     const refsMenuForm = ref(null);
     const menuState = reactive({