update: 权限配置应用添加开关配置

src/api/admin-list.js

@@ -19,6 +19,12 @@ const api = {
   delAdmin: '/admin-del',  // 删除管理员
   enterpriseList: '/auth-enterprise-list', // 获取授权的商户列表
   resourceList: '/resource-list', // 获取资源范围列表
+  findAppSetting: '/find-application-setting', // 应用开关-查看
+  saveAppSetting: {
+    url: '/save-application-setting',
+    method: 'post',
+    useFormData: true
+  }, // 应用开关-保存
 };
 
 export default getFetch(api, '/hb-manage-web');

src/views/enterprise/edit-role.vue

@@ -25,7 +25,10 @@
             style="margin-top: 12px"
             :menu-list="getActiveMenuList()"
             :checked-id="getActiveMenuChecked()"
-            @change="onCheckedChange"></menu-tree>
+            :app-ids="getAppIds()"
+            :is-app="activeType == 2 || activeType == 4"
+            @change="onCheckedChange"
+            @app-open-change="onAppOpenChange"></menu-tree>
         </el-form-item>
         <el-form-item style="margin-top: 50px">
           <el-button type="primary" :loading="roleData.loading" @click="onSave">{{ roleData.roleId ? '保存' : '确认新建' }}</el-button>
@@ -40,7 +43,7 @@ import navCrumb from '@/components/nav/nav.vue';
 import MenuTree from './edit-role/menu-tree.vue';
 import api from '@/api/admin-list';
 
-const { menuList, addRole, editRole, roleDetail } = api;
+const { menuList, addRole, editRole, roleDetail, findAppSetting, saveAppSetting } = api;
 export default {
   name: 'EditRole',
   components: { navCrumb, MenuTree },
@@ -56,6 +59,7 @@ export default {
         { name: '管理员', path: '/admin-list' },
         { name: '新建管理角色' }
       ],
+      wxEnterpriseId: '',
       // 角色详情
       roleData: {
         loading: false,
@@ -72,17 +76,20 @@ export default {
       // 权限菜单列表
       tabList: [
         // 1好办后台2应用后台3好办小程序4小程序应用
-        { label: '好办后台', appType: 1, flatMenu: [], menuList: [], checkedId: {} },
-        { label: '应用后台', appType: 2, flatMenu: [], menuList: [], checkedId: {} },
-        { label: '好办小程序', appType: 3, flatMenu: [], menuList: [], checkedId: {} },
-        { label: '小程序应用', appType: 4, flatMenu: [], menuList: [], checkedId: {} },
+        { label: '好办后台', appType: 1, flatMenu: [], menuList: [], checkedId: {}, appIds: [] },
+        { label: '应用后台', appType: 2, flatMenu: [], menuList: [], checkedId: {}, appIds: [] },
+        { label: '好办小程序', appType: 3, flatMenu: [], menuList: [], checkedId: {}, appIds: [] },
+        { label: '小程序应用', appType: 4, flatMenu: [], menuList: [], checkedId: {}, appIds: [] },
       ]
     };
   },
   async created() {
+    const haoBanUser = JSON.parse(localStorage.getItem('haoBanUser') || '{}');
     const { roleId } = this.$route.query;
     this.$emit('showAsideMenu', false);
+    this.wxEnterpriseId = haoBanUser.wxEnterpriseId;
     await this.getMenuList();
+    this.findAppSetting(roleId);
     if (roleId) {
       this.bread[1] = { name: '编辑管理角色' };
       this.getRoleDetail(roleId);
@@ -91,15 +98,14 @@ export default {
   methods: {
     // 获取权限菜单列表
     getMenuList() {
-      const haoBanUser = JSON.parse(localStorage.getItem('haoBanUser') || '{}');
-      const params = { wxEnterpriseId: haoBanUser.wxEnterpriseId };
+      const params = { wxEnterpriseId: this.wxEnterpriseId };
       const prom = [];
       this.tabList.forEach(el => {
         // appType 1好办后台2应用后台3好办小程序4小程序应用
         // 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 = this.flatDataToTree(el.flatMenu);
           el.menuList.forEach(item => {
             this.$set(el.checkedId, item.menuId, []);
           });
@@ -112,7 +118,6 @@ 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 });
@@ -169,6 +174,23 @@ export default {
         return result;
       }
     },
+    // 应用开关-查看
+    findAppSetting(roleId) {
+      const params = {
+        wxEnterpriseId: this.wxEnterpriseId,
+        roleId,
+        appType: '',
+        roleType: 1, // 1管理员，0门店
+      };
+      this.tabList.forEach(el => {
+        if (el.appType == 2 || el.appType == 4) {
+          findAppSetting(Object.assign({}, params, { appType: el.appType })).then(res => {
+            el.appIds = res.result || [];
+            this.setChildrenDisable(el.menuList, el.appIds);
+          });
+        }
+      });
+    },
     // 将平铺的数据转为树形结构
     flatDataToTree(data) {
       return data.filter(el => {
@@ -188,6 +210,10 @@ export default {
       const result = this.tabList.filter(el => el.appType == this.activeType);
       return result[0].checkedId;
     },
+    getAppIds() {
+      const result = this.tabList.filter(el => el.appType == this.activeType);
+      return result[0].appIds;
+    },
     // 保存选中的子节点id
     // 将选中的子节点的id存在tabList对应元素的checkedId中
     // 同时更新roleData中menuIds的数据
@@ -231,6 +257,41 @@ export default {
         return result;
       }
     },
+    // 切换应用的开启关闭状态
+    // 如果应用是关闭状态，需要将应用下的子菜单设置为禁用状态
+    onAppOpenChange(appIds) {
+      this.tabList.some(el => {
+        if (el.appType == this.activeType) {
+          el.appIds = appIds;
+          this.setChildrenDisable(el.menuList, el.appIds);
+        }
+        return el.appType == this.activeType;
+      });
+    },
+    setChildrenDisable(menuList, appIds) {
+      menuList.forEach(el => {
+        let openFlag = false;
+        appIds.some(item => {
+          if (item.appId == el.project) {
+            openFlag = item.openFlag;
+          }
+          return item.appId == el.project;
+        });
+        this.$set(el, 'disabled', openFlag == 0);
+        if (Array.isArray(el.children)) {
+          el.children = setDisable.call(this, el.children, openFlag == 0);
+        }
+      });
+      function setDisable(menuList, openFlag) {
+        return menuList.map(el => {
+          this.$set(el, 'disabled', openFlag);
+          if (Array.isArray(el.children)) {
+            el.children = setDisable.call(this, el.children, openFlag);
+          }
+          return el;
+        });
+      }
+    },
     // 新建、编辑角色的保存
     onSave() {
       this.$refs.roleData.validate(vali => {
@@ -238,15 +299,35 @@ export default {
         const { roleId, roleName, menuIds } = this.roleData;
         const params = { roleName, menuIds: JSON.stringify(menuIds) };
         this.roleData.loading = true;
+
         if (roleId) {
           params.roleId = roleId;
-          editRole(params).then(succ.bind(this, '保存成功！')).finally(() => this.roleData.loading = false);
+          editRole(params).then(succ.bind(this, roleId, '保存成功！'));
         } else {
-          addRole(params).then(succ.bind(this, '新建成功！')).finally(() => this.roleData.loading = false);
+          addRole(params).then(res => {
+            succ.call(this, res.result.roleId, '新建成功！');
+          });
         }
-        function succ(msg) {
-          this.$message.success(msg);
-          this.$router.go(-1);
+
+        function succ(roleId, msg) {
+          const pro = [];
+          this.tabList.forEach(el => {
+            if (el.appType == 2 || el.appType == 4) {
+              pro.push(new Promise(resolve => {
+                const saveApp = {
+                  roleId,
+                  appType: el.appType,
+                  wxEnterpriseId: this.wxEnterpriseId,
+                  json: JSON.stringify(el.appIds), // [{appId:1,openFlag:1},{appId:2,openFlag:0}]
+                };
+                saveAppSetting(saveApp).finally(resolve);
+              }));
+            }
+          });
+          Promise.all(pro).then(() => {
+            this.$message.success(msg);
+            this.$router.go(-1);
+          }).finally(() => this.roleData.loading = false);
         }
       });
     }

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

@@ -3,7 +3,11 @@
     <ul class="first-menu">
       <li class="no-data" v-if="menuList.length == 0">暂无数据</li>
       <li :class="['first-menu-item', { active: el.menuId == activeMenuId }]" v-for="el in menuList" :key="el.menuId" @click="onMenuChange(el)">
-        {{ el.menuName }}
+        <el-checkbox
+          v-if="isApp"
+          :value="appIds.some(item => item.appId == el.project && item.openFlag == 1)"
+          @change="val => onAppOpenChange(el.project, val)"></el-checkbox>
+          {{ el.menuName }}
       </li>
     </ul>
     <div class="all-menu">
@@ -26,11 +30,14 @@
 </template>
 
 <script>
+// 菜单添加开启关闭配置与回显
 export default {
   name: 'MenuTree',
   props: {
     menuList: Array,
-    checkedId: Object
+    checkedId: Object,
+    appIds: Array,
+    isApp: Boolean
   },
   data() {
     return {
@@ -64,6 +71,16 @@ export default {
       const activeChecked = {};
       activeChecked[this.activeMenuId] = menuIds;
       this.$emit('change', Object.assign({}, this.checkedId, activeChecked));
+    },
+    onAppOpenChange(appId, openFlag) {
+      const appIds = this.appIds.map(el => {
+        const item = Object.assign({}, el);
+        if (item.appId == appId) {
+          item.openFlag = Number(openFlag);
+        }
+        return item;
+      });
+      this.$emit('app-open-change', appIds);
     }
   },
   watch: {