编辑角色

src/api/admin-list.js

@@ -10,6 +10,7 @@ const api = {
   roleAdminList: '/role-admin-list', // 获取管理员列表
   delAdmin: '/admin-del',  // 删除管理员
   enterpriseList: '/auth-enterprise-list', // 获取授权的商户列表
+  resourceList: '/resource-list', // 获取资源范围列表
 }
 
 export default getFetch(api, '/hb-manage-we');

src/views/enterprise/edit-role.vue

@@ -138,7 +138,8 @@ export default {
     // 获取角色详情
     getRoleDetail(roleId) {
       roleDetail({ roleId }).then(res => {
-        this.roleData = Object.assign({}, res.result, { menuIds: JSON.parse(res.result.menuIds || '[]') });
+        const { roleId, roleName, menuIds } = res.result;
+        Object.assign(this.roleData, { roleId, roleName, menuIds: JSON.parse(menuIds || '[]') });
         // 将menuIds分配到相应同的tab下的checkedId中
         this.roleData.menuIds.forEach(el => {
           this.tabList.some(item => {
@@ -211,7 +212,7 @@ export default {
       this.$refs.roleData.validate(vali => {
         if (!vali) return;
         const { roleId, roleName, menuIds } = this.roleData;
-        const params = { roleName, menuIds };
+        const params = { roleName, menuIds: JSON.stringify(menuIds) };
         this.roleData.loading = true;
         if (roleId) {
           params.roleId = roleId;

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

 <template>
-  <div>编辑门店角色</div>
+  <div style="height: 100%">
+    <nav-crumb :navpath="bread"> </nav-crumb>
+    <div class="edit-role">
+      <el-alert
+        type="info"
+        title="拥有门店的权限，能进行一些门店日常业务，如打标签，完成话务等。必须是导购账号"
+        :closable="false"
+        show-icon
+        style="width:572px"
+      ></el-alert>
+      <el-form :model="roleData" :rules="roleDataRule" ref="roleData" style="margin-top: 30px" label-width="135px">
+        <el-form-item label="角色名称" prop="roleName">
+          <el-input :value="roleData.roleName" disabled style="width: 510px"></el-input>
+        </el-form-item>
+        <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-list="getActiveMenuList()"
+            :checked-id="getActiveCheckId()"
+            @change="onCheckedChange"></menu-tree>
+        </el-form-item>
+        <el-form-item label="资源范围" prop="resourceCode">
+          <div class="resource-list">
+            <div v-for="el in resourceList" :key="el.appId" class="resource-item">
+              <p class="app-name">{{ el.appName }}</p>
+              <el-radio-group v-model="roleData.resourceCode[el.appId]">
+                <el-radio v-for="item in el.resourceList" :key="item.resourceCode" :label="item.resourceCode">{{ item.resourceName }}</el-radio>
+              </el-radio-group>
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item style="margin-top: 50px">
+          <el-button type="primary" :loading="loading" @click="onSave">保存</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
 </template>
 
 <script>
+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;
+
 export default {
-  name: 'edit-store-role'
+  name: 'edit-store-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: [
+        { path: '/store-admin-list', name: '门店角色' },
+        { name: '编辑门店角色' }
+      ],
+      loading: false,
+      wxEnterpriseId: '',
+      roleData: {
+        roleId: '',
+        roleName: '',
+        menuIds: [], // {appType:"",menuIds:,menuName:}选中的菜单id
+        resourceCode: {}
+      },
+      roleDataRule: {
+        roleName: [{ required: true }],
+        menuIds: [{ required: true, validator: valiMenuIds, trigger: 'change' }],
+        resourceCode: [{ required: true, message: '', trigger: 'change' }],
+      },
+      activeType: 3,
+      // 权限菜单列表
+      tabList: [
+        // 1好办后台2应用后台3好办小程序4小程序应用
+        { label: '好办小程序', appType: 3, menuList: [], checkedId: {} },
+        { label: '小程序应用', appType: 4, menuList: [], checkedId: {} },
+      ],
+      // 资源范围
+      resourceList: [],
+    }
+  },
+  async created() {
+    const { roleId } = this.$route.query;
+    if (!roleId) {
+      return this.$router.go(-1);
+    }
+    const haoBanUser = JSON.parse(localStorage.getItem('haoBanUser') || '{}');
+    this.wxEnterpriseId = haoBanUser.wxEnterpriseId;
+    this.$emit('showAsideMenu', false);
+    // await this.initData();
+    // this.getRoleDetail(roleId);
+  },
+  methods: {
+    initData() {
+      const params = { wxEnterpriseId: this.wxEnterpriseId }
+      const prom = [];
+      // eslint-disable-next-line
+      function setMenu(label, parentId, level) {
+        let result = [];
+        let menu = [];
+        while(menu.length < 3) {
+          const item = {
+            menuId: `${parentId}-${menu.length}`,	// 菜单id
+            menuName: `${label}${parentId}-${menu.length}`, // 菜单名称
+            level, // 层级
+            parentId,
+          }
+          menu.push(item);
+          if (level < 2) {
+            result = result.concat(setMenu(label, item.menuId, level + 1));
+          }
+        }
+        return menu.concat(result);
+      }
+      this.tabList.forEach(el => {
+        // el.menuList = this.flatDataToTree(setMenu(el.label, 0, 0));
+        // el.menuList.forEach(item => {
+        //   this.$set(el.checkedId, item.menuId, []);
+        // });
+        // appType 1好办后台2应用后台3好办小程序4小程序应用
+        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, []);
+          });
+        }))
+      })
+      prom.push(resourceList().then(res => {
+        this.resourceList = res.result || [];
+        this.resourceList.forEach(el => {
+          this.$set(this.roleData.resourceCode, el.appId, '');
+        })
+      }))
+
+      return Promise.all(prom);
+    },
+    getRoleDetail(roleId) {
+      roleDetail({ roleId }).then(res => {
+        const { roleId, roleName, menuIds, resourceCode } = res.result || {};
+        Object.assign(this.roleData, { roleId, roleName, menuIds: JSON.parse(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;
+          })
+        })
+        if (typeof resourceCode == 'string' && resourceCode.length > 0) {
+          resourceCode.split(',').forEach(el => {
+            this.resourceList.some(item => {
+              const flag = item.resourceList.some(resource => resource.resourceCode == el);
+              if (flag) {
+                this.roleData.resourceCode[item.appId] = el;
+              }
+              return flag
+            })
+          })
+        }
+      })
+
+      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;
+      }
+    },
+    getActiveMenuList() {
+      const result = this.tabList.filter(el => el.appType == this.activeType);
+      return result[0].menuList;
+    },
+    getActiveCheckId() {
+      const result = this.tabList.filter(el => el.appType == this.activeType);
+      return result[0].checkedId;
+    },
+    // 将平铺的数据转为树形结构
+    flatDataToTree(data) {
+      return data.filter(el => {
+        // 返回当前节点下的子节点
+        const children = data.filter(item => item.parentId == el.menuId);
+        if (children.length > 0) {
+          el.children = children; // 如果存在子级，则给父级添加一个children属性，并赋值
+        }
+        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, resourceCode } = this.roleData
+        const params = {
+          roleId,
+          roleName,
+          menuIds: JSON.stringify(menuIds),
+          wxEnterpriseId: this.wxEnterpriseId,
+          resourceCode: []
+        }
+        for(let key in resourceCode) {
+          params.resourceCode.push(resourceCode[key]);
+        }
+        params.resourceCode = params.resourceCode.join(',');
+        this.loading = true;
+        editRole(params).then(res => {
+          this.$message.success('保存成功！');
+          this.$router.go(-1);
+        }).finally(() => this.loading = false)
+      })
+    }
+  }
 }
 </script>
+
+<style lang="less" scoped>
+.edit-role {
+  padding: 20px;
+  background-color: #fff;
+  height: 100%;
+}
+.resource-list {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  .resource-item {
+    padding: 10px 20px;
+    width: 236px;
+    height: 72px;
+    background: rgba(245,247,250,1);
+    .app-name {
+      font-size: 14px;
+      font-weight: 700;
+      color: @gray01;
+      line-height: 20px;
+    }
+  }
+}
+</style>