fix：调整菜单配置交互

src/views/enterprise/edit-role.vue

@@ -74,10 +74,10 @@ export default {
       // 权限菜单列表
       tabList: [
         // 1好办后台2应用后台3好办小程序4小程序应用
-        { label: '好办后台', appType: 1, menuList: [], checkedId: {} },
-        { label: '应用后台', appType: 2, menuList: [], checkedId: {} },
-        { label: '好办小程序', appType: 3, menuList: [], checkedId: {} },
-        { label: '小程序应用', appType: 4, menuList: [], checkedId: {} },
+        { label: '好办后台', appType: 1, flatMenu: [], menuList: [], checkedId: {} },
+        { label: '应用后台', appType: 2, flatMenu: [], menuList: [], checkedId: {} },
+        { label: '好办小程序', appType: 3, flatMenu: [], menuList: [], checkedId: {} },
+        { label: '小程序应用', appType: 4, flatMenu: [], menuList: [], checkedId: {} },
       ]
     }
   },
@@ -101,6 +101,7 @@ export default {
         // roleType 1管理员角色 2门店角色
         prom.push(menuList(Object.assign({}, params, { appType: el.appType, roleType: 1 })).then(res => {
           el.menuList = this.flatDataToTree(res.result || []);
+          el.flatMenu = res.result || [];
           el.menuList.forEach(item => {
             this.$set(el.checkedId, item.menuId, []);
           });
@@ -113,13 +114,16 @@ export default {
       roleDetail({ roleId }).then(res => {
         let { roleId, roleName, menuIds } = res.result;
         menuIds = typeof menuIds == 'string' ? menuIds.split(',') : [];
+        // TODO 过滤掉子节点没有被全选的父级节点
+        // roleData中存一份包含父节点的menuId
+        // tabList中存一份不包含父节点的menuId
         Object.assign(this.roleData, { roleId, roleName });
         // 将menuIds分配到相应同的tab下的checkedId中
         this.tabList.forEach(el => {
           let checkedId = [];
           el.menuList.forEach(item => {
-            el.checkedId[item.menuId] = getAllMenuId([ item ], menuIds);
-            checkedId = checkedId.concat(el.checkedId[item.menuId]);
+            el.checkedId[item.menuId] = getLeafMenuId([ item ], menuIds);
+            checkedId = checkedId.concat(getAllMenuId([ item ], menuIds));
           })
           this.roleData.menuIds.push({ appType: el.appType, menuIds: checkedId });
         })
@@ -136,6 +140,26 @@ export default {
         })
         return result;
       }
+      function getLeafMenuId(menuList, allMenuIds) {
+        let result = [];
+        // 所有子节点被选中，才算父节点被选中
+        menuList.map(el => {
+          if (allMenuIds.some(item => item == el.menuId)) {
+            let allSubId = [];
+            if (Array.isArray(el.children)) {
+              allSubId = el.children.map(item => item.menuId);
+            }
+            // 如果el的allSubId都在allMenuIds中，则认为el需要被勾选，需要把el.menuId放入result中
+            if (allSubId.length == 0 || allSubId.every(el => allMenuIds.some(item => item == el))) {
+              result.push(el.menuId);
+            }
+            if (Array.isArray(el.children)) {
+              result = result.concat(getLeafMenuId(el.children, allMenuIds));
+            }
+          }
+        })
+        return result;
+      }
     },
     // 将平铺的数据转为树形结构
     flatDataToTree(data) {
@@ -161,24 +185,42 @@ export default {
     // 同时更新roleData中menuIds的数据
     onCheckedChange(checkedId) {
       let menuIds = [];
+      let flatMenu = [];
+      let allMenuIds = [];
       for(let key in checkedId) {
         menuIds = menuIds.concat(checkedId[key]);
       }
       this.tabList = this.tabList.map(el => {
         if (el.appType == this.activeType) {
           el.checkedId = checkedId;
+          flatMenu = el.flatMenu;
         }
         return el;
       })
+      // 根据任意层级的子节点向上查找全部的父节点，存入allMenuIds中，然后过滤掉重复的menuId
+      menuIds.map(el => {
+        allMenuIds = allMenuIds.concat(getParentIds(el, flatMenu));
+      })
+      allMenuIds = allMenuIds.filter((el, index) => index == allMenuIds.findIndex(item => item == el));
 
       if (this.roleData.menuIds.some(el => el.appType == this.activeType)) {
         this.roleData.menuIds.forEach(el => {
           if (el.appType == this.activeType) {
-            el.menuIds = menuIds;
+            el.menuIds = allMenuIds;
           }
         })
       } else {
-        this.roleData.menuIds.push({ appType: this.activeType, menuIds });
+        this.roleData.menuIds.push({ appType: this.activeType, menuIds: allMenuIds });
+      }
+      function getParentIds(menuId, menuList) {
+        let result = [ menuId ];
+        menuList.some(el => {
+          if (el.menuId == menuId && el.parentId > 0) {
+            result = result.concat(getParentIds(el.parentId, menuList));
+          }
+          return el.menuId == menuId;
+        })
+        return result;
       }
     },
     // 新建、编辑角色的保存

src/views/enterprise/edit-role/menu-tree.vue

@@ -7,12 +7,11 @@
       </li>
     </ul>
     <div class="all-menu">
-      <el-checkbox v-if="treeData.length > 0" v-model="isSelectAll" @change="onSelectAll">全选</el-checkbox>
+        <!-- check-strictly -->
       <el-tree
         :data="treeData"
         show-checkbox
         default-expand-all
-        check-strictly
         node-key="menuId"
         ref="menuList"
         :expand-on-click-node="false"
@@ -38,7 +37,6 @@ export default {
       deep: true,
       handler(checked) {
         this.$refs.menuList.setCheckedKeys(checked[this.activeMenuId] || []);
-        this.$nextTick(this.checkSelectAll);
       },
     },
     menuList: {
@@ -51,8 +49,7 @@ export default {
   data() {
     return {
       activeMenuId: '',
-      treeData: [],
-      isSelectAll: false
+      treeData: []
     }
   },
   methods: {
@@ -60,21 +57,9 @@ export default {
     onMenuChange(menuData) {
       this.activeMenuId = menuData ? menuData.menuId : '';
       this.treeData = menuData ? [ menuData ] : [];
-      this.$nextTick(this.checkSelectAll);
-    },
-    // 判断当前tree是否全选，并更新全选按钮的状态
-    checkSelectAll() {
-      const allMenuId = this.getAllMenuId(this.treeData);
-      const checkedId = this.$refs.menuList.getCheckedKeys();
-      this.isSelectAll = allMenuId.every(el => checkedId.some(item => item == el));
-    },
-    // 点击全选、点击树节点都向外emit change事件，将当前选中的菜单数据传递出去
-    onSelectAll(isChecked) {
-      this.onChange(isChecked ? this.getAllMenuId(this.treeData) : []);
     },
     // 点击树节点
     onNodeClick() {
-      this.checkSelectAll();
       this.onChange(this.$refs.menuList.getCheckedKeys());
     },
     // 获取指定菜单及其所有子菜单的id