update: 权限设置

src/views/enterprise/edit-role.vue

@@ -88,8 +88,7 @@ export default {
     const { roleId } = this.$route.query;
     this.$emit('showAsideMenu', false);
     this.wxEnterpriseId = haoBanUser.wxEnterpriseId;
-    await this.getMenuList();
-    this.findAppSetting(roleId);
+    await this.getMenuList(roleId);
     if (roleId) {
       this.bread[1] = { name: '编辑管理角色' };
       this.getRoleDetail(roleId);
@@ -97,18 +96,26 @@ export default {
   },
   methods: {
     // 获取权限菜单列表
-    getMenuList() {
-      const params = { wxEnterpriseId: this.wxEnterpriseId };
+    getMenuList(roleId) {
+      // roleType 1管理员，0门店
+      const params = { wxEnterpriseId: this.wxEnterpriseId, roleType: 1 };
       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 => {
+        prom.push(menuList(Object.assign({}, params, { appType: el.appType })).then(res => {
           el.flatMenu = res.result || [];
           el.menuList = this.flatDataToTree(el.flatMenu);
           el.menuList.forEach(item => {
             this.$set(el.checkedId, item.menuId, []);
           });
+          if (el.appType == 2 || el.appType == 4) {
+            // 应用开关-查看
+            findAppSetting(Object.assign({}, params, { roleId, appType: el.appType })).then(res => {
+              el.appIds = res.result || [];
+              this.setChildrenDisable(el.menuList, el.appIds);
+            });
+          }
         }));
       });
       return Promise.all(prom);
@@ -174,23 +181,6 @@ 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 => {
@@ -302,25 +292,20 @@ export default {
 
         if (roleId) {
           params.roleId = roleId;
-          editRole(params).then(succ.bind(this, roleId, '保存成功！'));
+          editRole(params).then(succ.bind(this, roleId, '保存成功！')).catch(() => this.roleData.loading = false);
         } else {
           addRole(params).then(res => {
             succ.call(this, res.result.roleId, '新建成功！');
-          });
+          }).catch(() => this.roleData.loading = false);
         }
 
         function succ(roleId, msg) {
           const pro = [];
+          const params = { roleId, wxEnterpriseId: this.wxEnterpriseId };
           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);
+                saveAppSetting(Object.assign({}, params, { appType: el.appType, json: JSON.stringify(el.appIds) })).finally(resolve);
               }));
             }
           });

src/views/enterprise/edit-store-role.vue

@@ -20,7 +20,10 @@
             style="margin-top: 12px"
             :menu-list="getActiveMenuList()"
             :checked-id="getActiveCheckId()"
-            @change="onCheckedChange"></menu-tree>
+            :app-ids="getAppIds()"
+            :is-app="activeType == 4"
+            @change="onCheckedChange"
+            @app-open-change="onAppOpenChange"></menu-tree>
         </el-form-item>
         <el-form-item label="资源范围" prop="resourceCode">
           <div class="resource-list">
@@ -45,7 +48,7 @@ import navCrumb from '@/components/nav/nav.vue';
 import MenuTree from './edit-role/menu-tree.vue';
 import api from '@/api/admin-list';
 
-const { resourceList, menuList, editRole, roleDetail } = api;
+const { resourceList, menuList, editRole, roleDetail, findAppSetting, saveAppSetting } = api;
 
 export default {
   name: 'EditStoreRole',
@@ -79,8 +82,8 @@ export default {
       // 权限菜单列表
       tabList: [
         // 1好办后台2应用后台3好办小程序4小程序应用
-        { label: '好办小程序', appType: 3, menuList: [], checkedId: {} },
-        { label: '小程序应用', appType: 4, menuList: [], checkedId: {} },
+        { label: '好办小程序', appType: 3, menuList: [], checkedId: {}, appIds: [] },
+        { label: '小程序应用', appType: 4, menuList: [], checkedId: {}, appIds: [] },
       ],
       // 资源范围
       resourceList: [],
@@ -94,21 +97,27 @@ export default {
     const haoBanUser = JSON.parse(localStorage.getItem('haoBanUser') || '{}');
     this.wxEnterpriseId = haoBanUser.wxEnterpriseId;
     this.$emit('showAsideMenu', false);
-    await this.initData();
+    await this.initData(roleId);
     this.getRoleDetail(roleId);
   },
   methods: {
-    initData() {
-      const params = { wxEnterpriseId: this.wxEnterpriseId };
+    initData(roleId) {
+      const params = { wxEnterpriseId: this.wxEnterpriseId, roleType: 2 };
       const prom = [];
       this.tabList.forEach(el => {
         // appType 1好办后台2应用后台3好办小程序4小程序应用
         // roleType 1管理员角色 2门店角色
-        prom.push(menuList(Object.assign({}, params, { appType: el.appType, roleType: 2 })).then(res => {
+        prom.push(menuList(Object.assign({}, params, { appType: el.appType })).then(res => {
           el.menuList = this.flatDataToTree(res.result || []);
           el.menuList.forEach(item => {
             this.$set(el.checkedId, item.menuId, []);
           });
+          if (el.appType == 4) {
+            findAppSetting(Object.assign({}, params, { roleId, appType: el.appType })).then(res => {
+              el.appIds = res.result || [];
+              this.setChildrenDisable(el.menuList, el.appIds);
+            });
+          }
         }));
       });
       prom.push(resourceList().then(res => {
@@ -168,6 +177,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;
+    },
     // 将平铺的数据转为树形结构
     flatDataToTree(data) {
       return data.filter(el => {
@@ -204,6 +217,39 @@ export default {
         this.roleData.menuIds.push({ appType: this.activeType, menuIds });
       }
     },
+    onAppOpenChange(appIds) {
+      this.tabList.some(el => {
+        if (el.appType == this.activeType) {
+          el.appIds = appIds;
+          this.setChildrenDisable(el.menuList, 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 => {
         if (!vali) return;
@@ -220,12 +266,22 @@ export default {
         }
         params.resourceCode = params.resourceCode.join(',');
         this.loading = true;
-        editRole(params).then(res => {
-          if (res.code == '0000') {
-            this.$message.success('保存成功！');
+        editRole(params).then(succ.bind(this, roleId, '保存成功')).catch(() => this.loading = false);
+        function succ(roleId, msg) {
+          const prom = [];
+          const params = { roleId, wxEnterpriseId: this.wxEnterpriseId };
+          this.tabList.forEach(el => {
+            if (el.appType == 4) {
+              prom.push(new Promise(resolve => {
+                saveAppSetting(Object.assign({}, params, { appType: el.appType, json: JSON.stringify(el.appIds) })).finally(resolve);
+              }));
+            }
+          });
+          Promise.all(prom).then(() => {
+            this.$message.success(msg);
             this.$router.go(-1);
-          }
-        }).finally(() => this.loading = false);
+          }).finally(() => this.loading = false);
+        }
       });
     }
   }