新建、编辑角色

src/views/enterprise/edit-role.vue

@@ -19,14 +19,18 @@
             v-model.trim="roleData.roleName"
           ></el-input>
         </el-form-item>
-        <el-form-item label="权限配置">
-          <el-radio-group v-model="activeTab" class="specter" size="small">
-            <el-radio-button v-for="el in menuList" :key="el.type" :label="el.type">{{ el.label }}</el-radio-button>
+        <el-form-item label="权限配置" prop="menuIds">
+          <el-radio-group v-model="activeType" class="specter" size="small">
+            <el-radio-button v-for="el in tabList" :key="el.appType" :label="el.appType">{{ el.label }}</el-radio-button>
           </el-radio-group>
-          <menu-tree style="margin-top: 12px" :menu-data="menuList[activeTab - 1].data"></menu-tree>
+          <menu-tree
+            style="margin-top: 12px"
+            :menu-list="tabList[activeType - 1].menuList"
+            :checked-id="tabList[activeType - 1].checkedId"
+            @change="onCheckedChange"></menu-tree>
         </el-form-item>
         <el-form-item style="margin-top: 50px">
-          <el-button type="primary" :loading="roleData.loading">{{ roleData.roleId ? '保存' : '确认新建' }}</el-button>
+          <el-button type="primary" :loading="roleData.loading" @click="onSave">{{ roleData.roleId ? '保存' : '确认新建' }}</el-button>
         </el-form-item>
       </el-form>
     </div>
@@ -43,12 +47,18 @@
 import navCrumb from '@/components/nav/nav.vue';
 import MenuTree from './edit-role/menu-tree.vue';
 import api from '@/api/admin-list';
-// eslint-disable-next-line
+
 const { menuList, addRole, editRole, roleDetail } = api;
 export default {
   name: 'edit-role',
   components: { navCrumb, MenuTree },
   data() {
+    const valiMenuIds = (rules, value, callback) => {
+      if (!Array.isArray(value) || value.length == 0 || value.every(el => el.menuIds.length == 0)) {
+        callback(new Error('请至少选择一个权限菜单'));
+      }
+      callback();
+    }
     return {
       bread: [
         { name: '管理员', path: '/admin-list' },
@@ -56,39 +66,43 @@ export default {
       ],
       // 角色详情
       roleData: {
-        loading: true,
+        loading: false,
         roleId: '',
         roleName: '',
         menuIds: []
       },
       roleDataRule: {
         roleName: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
-        menuIds: [{ required: true, message: ''}]
+        menuIds: [{ required: true, validator: valiMenuIds }]
       },
-      activeTab: 1,
+      // 权限配置激活的tab
+      activeType: 1,
       // 权限菜单列表
-      menuList: [
-        { label: '好办后台', type: 1, data: [] },
-        { label: '应用后台', type: 2, data: [] },
-        { label: '好办小程序', type: 3, data: [] },
-        { label: '小程序应用', type: 4, data: [] },
+      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: {} },
       ]
     }
   },
-  created() {
+  async created() {
     const { roleId } = this.$route.query;
+    this.$emit('showAsideMenu', false);
+    await this.getMenuList();
     if (roleId) {
       this.bread[1] = { name: '编辑管理角色' };
       this.getRoleDetail(roleId);
     }
-    this.getMenuList();
-    this.$emit('showAsideMenu', false);
   },
   methods: {
     // 获取权限菜单列表
     getMenuList() {
       const haoBanUser = JSON.parse(localStorage.getItem('haoBanUser') || '{}');
       const params = { wxEnterpriseId: haoBanUser.wxEnterpriseId }
+      const prom = [];
+      // eslint-disable-next-line
       function setMenu(label, parentId, level) {
         let result = [];
         let menu = [];
@@ -106,25 +120,45 @@ export default {
         }
         return menu.concat(result);
       }
-      this.menuList.map((el, index) => {
-        el.data = this.flatDataToTree(setMenu(el.label, 0, 0));
-        console.log(Object.assign({}, params, { appType: el.type }))
-        return el;
+      this.tabList.forEach(el => {
         // appType 1好办后台2应用后台3好办小程序4小程序应用
-        menuList(Object.assign({}, params, { appType: el.type })).then(res => el.data = res.result || []);
+        prom.push(menuList(Object.assign({}, params, { appType: el.appType })).then(res => {
+          el.menuList = res.result || [];
+          el.menuList.forEach(item => {
+            this.$set(el.checkedId, item.menuId, []);
+          });
+        }))
       })
+      return Promise.all(prom);
     },
     // 获取角色详情
     getRoleDetail(roleId) {
       roleDetail({ roleId }).then(res => {
-        res.result = {
-          roleId: '123',
-          roleName: '测试角色',
-          menuIds: '[{appType: "", menuIds: "", menuName: ""}]'
-        }
-        this.roleData = res.result || {};
+        this.roleData = Object.assign({}, res.result, { menuIds: JSON.parse(res.result.menuIds || '[]') });
+        // 将menuIds分配到相应同的tab下的checkedId中
+        this.roleData.menuIds.forEach(el => {
+          this.tabList.some(item => {
+            item.menuList.forEach(menu => {
+              item.checkedId[menu.menuId] = getAllMenuId([ menu ], el.menuIds || []);
+            })
+            return item.appType == el.appType;
+          })
+        })
       })
+      function getAllMenuId(menuList, allMenuIds) {
+        let result = [];
+        menuList.forEach(el => {
+          if (allMenuIds.some(item => item == el.menuId)) {
+            result.push(el.menuId);
+          }
+          if (Array.isArray(el.children)) {
+            result = result.concat(getAllMenuId(el.children, allMenuIds));
+          }
+        })
+        return result;
+      }
     },
+    // 将平铺的数据转为树形结构
     flatDataToTree(data) {
       return data.filter(el => {
         // 返回当前节点下的子节点
@@ -135,6 +169,50 @@ export default {
         return el.parentId == 0;
       })
     },
+    // 保存选中的子节点id
+    // 将选中的子节点的id存在tabList对应元素的checkedId中
+    // 同时更新roleData中menuIds的数据
+    onCheckedChange(checkedId) {
+      let menuIds = [];
+      for(let key in checkedId) {
+        menuIds = menuIds.concat(checkedId[key]);
+      }
+      this.tabList = this.tabList.map(el => {
+        if (el.appType == this.activeType) {
+          el.checkedId = checkedId;
+        }
+        return el;
+      })
+
+      if (this.roleData.menuIds.some(el => el.appType == this.activeType)) {
+        this.roleData.menuIds.forEach(el => {
+          if (el.appType == this.activeType) {
+            el.menuIds = menuIds;
+          }
+        })
+      } else {
+        this.roleData.menuIds.push({ appType: this.activeType, menuIds });
+      }
+    },
+    // 新建、编辑角色的保存
+    onSave() {
+      this.$refs.roleData.validate(vali => {
+        if (!vali) return;
+        const { roleId, roleName, menuIds } = this.roleData;
+        const params = { roleName, menuIds };
+        this.roleData.loading = true;
+        if (roleId) {
+          params.roleId = roleId;
+          editRole(params).then(succ.bind(this, '保存成功！')).finally(() => this.roleData.loading = false);
+        } else {
+          addRole(params).then(succ.bind(this, '新建成功！')).finally(() => this.roleData.loading = false);
+        }
+        function succ(msg) {
+          this.$message.success(msg);
+          this.$router.go(-1);
+        }
+      })
+    }
   }
 }
 </script>

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

 <template>
   <div class="menu-tree">
     <ul class="first-menu">
-      <li :class="['first-menu-item', { active: el.menuId == activeMenuId }]" v-for="el in menuData" :key="el.menuId" @click="onMenuChange(el)">
+      <li :class="['first-menu-item', { active: el.menuId == activeMenuId }]" v-for="el in menuList" :key="el.menuId" @click="onMenuChange(el)">
         {{ el.menuName }}
       </li>
     </ul>
     <div class="all-menu">
-      <el-checkbox @change="onSelectAll">全选</el-checkbox>
+      <el-checkbox v-model="isSelectAll" @change="onSelectAll">全选</el-checkbox>
       <el-tree
         :data="treeData"
         show-checkbox
-        node-key="menuId"
         default-expand-all
         check-strictly
+        node-key="menuId"
+        ref="menuList"
         :expand-on-click-node="false"
         :check-on-click-node="true"
-        :props="{ label: 'menuName' }">
-        <!-- :default-expanded-keys="[2, 3]"
-        :default-checked-keys="[5]" -->
+        :props="{ label: 'menuName' }"
+        :default-checked-keys="checkedId[activeMenuId]"
+        @node-click="onNodeClick">
       </el-tree>
     </div>
   </div>
@@ -27,24 +28,65 @@
 export default {
   name: 'menu-tree',
   props: {
-    menuData: Array,
+    menuList: Array,
+    checkedId: Object
+  },
+  watch: {
+    checkedId(checked) {
+      this.$refs.menuList.setCheckedKeys(checked[this.activeMenuId] || []);
+    },
+    menuList: {
+      immediate: true,
+      handler(menuList) {
+        this.onMenuChange(menuList[0]);
+      }
+    }
   },
   data() {
     return {
       activeMenuId: '',
-      treeData: []
+      treeData: [],
+      isSelectAll: false
     }
   },
-  mounted() {
-    this.onMenuChange(this.menuData[0]);
-  },
   methods: {
+    // 左侧一级节点改变时，切换右侧的树数据
     onMenuChange(menuData) {
       this.activeMenuId = menuData.menuId;
-      this.treeData = [ menuData ]
+      this.treeData = [ 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
+    getAllMenuId(menuList) {
+      let result = [];
+      menuList.forEach(el => {
+        result.push(el.menuId);
+        if (Array.isArray(el.children)) {
+          result = result.concat(this.getAllMenuId(el.children));
+        }
+      })
+      return result;
+    },
+    // emit更新后的菜单id
+    onChange(menuIds) {
+      const activeChecked = {};
+      activeChecked[this.activeMenuId] = menuIds;
+      this.$emit('change', Object.assign({}, this.checkedId, activeChecked));
     }
   }
 }