新建、编辑角色

src/views/enterprise/edit-role.vue

 <template>
-  <div>新建、编辑角色</div>
+  <div>
+    <nav-crumb :navpath="bread"> </nav-crumb>
+    <div style="padding: 20px;background:#fff">
+      <el-alert
+        type="info"
+        title="管理角色：查看区域或门店日常业务，进行一些经营性的管理工作。不必关联导购账号。"
+        :closable="false"
+        show-icon
+        style="margin-bottom: 30px;width: 572px"
+      ></el-alert>
+      <el-form :model="roleData" :rules="roleDataRule" ref="roleData" label-width="140px">
+        <el-form-item label="角色名称" prop="roleName">
+          <el-input
+            placeholder="请输入角色名称"
+            maxlength="20"
+            show-word-limit
+            style="width: 432px"
+            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-radio-group>
+          <menu-tree style="margin-top: 12px" :menu-data="menuList[activeTab - 1].data"></menu-tree>
+        </el-form-item>
+        <el-form-item style="margin-top: 50px">
+          <el-button type="primary" :loading="roleData.loading">{{ roleData.roleId ? '保存' : '确认新建' }}</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';
+// eslint-disable-next-line
+const { menuList, addRole, editRole, roleDetail } = api;
 export default {
-  name: 'edit-role'
+  name: 'edit-role',
+  components: { navCrumb, MenuTree },
+  data() {
+    return {
+      bread: [
+        { name: '管理员', path: '/admin-list' },
+        { name: '新建管理角色' }
+      ],
+      // 角色详情
+      roleData: {
+        loading: true,
+        roleId: '',
+        roleName: '',
+        menuIds: []
+      },
+      roleDataRule: {
+        roleName: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
+        menuIds: [{ required: true, message: ''}]
+      },
+      activeTab: 1,
+      // 权限菜单列表
+      menuList: [
+        { label: '好办后台', type: 1, data: [] },
+        { label: '应用后台', type: 2, data: [] },
+        { label: '好办小程序', type: 3, data: [] },
+        { label: '小程序应用', type: 4, data: [] },
+      ]
+    }
+  },
+  created() {
+    const { roleId } = this.$route.query;
+    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 }
+      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.menuList.map((el, index) => {
+        el.data = this.flatDataToTree(setMenu(el.label, 0, 0));
+        console.log(Object.assign({}, params, { appType: el.type }))
+        return el;
+        // appType 1好办后台2应用后台3好办小程序4小程序应用
+        menuList(Object.assign({}, params, { appType: el.type })).then(res => el.data = res.result || []);
+      })
+    },
+    // 获取角色详情
+    getRoleDetail(roleId) {
+      roleDetail({ roleId }).then(res => {
+        res.result = {
+          roleId: '123',
+          roleName: '测试角色',
+          menuIds: '[{appType: "", menuIds: "", menuName: ""}]'
+        }
+        this.roleData = res.result || {};
+      })
+    },
+    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;
+      })
+    },
+  }
 }
 </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)">
+        {{ el.menuName }}
+      </li>
+    </ul>
+    <div class="all-menu">
+      <el-checkbox @change="onSelectAll">全选</el-checkbox>
+      <el-tree
+        :data="treeData"
+        show-checkbox
+        node-key="menuId"
+        default-expand-all
+        check-strictly
+        :expand-on-click-node="false"
+        :check-on-click-node="true"
+        :props="{ label: 'menuName' }">
+        <!-- :default-expanded-keys="[2, 3]"
+        :default-checked-keys="[5]" -->
+      </el-tree>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'menu-tree',
+  props: {
+    menuData: Array,
+  },
+  data() {
+    return {
+      activeMenuId: '',
+      treeData: []
+    }
+  },
+  mounted() {
+    this.onMenuChange(this.menuData[0]);
+  },
+  methods: {
+    onMenuChange(menuData) {
+      this.activeMenuId = menuData.menuId;
+      this.treeData = [ menuData ]
+    },
+    onSelectAll(isChecked) {
+      //
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.menu-tree {
+  width: 510px;
+  min-height: 460px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+  border: 1px solid #E4E7ED;
+  .first-menu {
+    flex-shrink: 0;
+    width: 140px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    background-color: #F5F7FA;
+    .first-menu-item {
+      padding-left: 20px;
+      width: 100%;
+      height: 40px;
+      font-size: 14px;
+      font-weight: 400;
+      color: @gray02;
+      line-height: 40px;
+      cursor: pointer;
+      &:hover, &.active {
+        background-color: #fff;
+      }
+    }
+  }
+  .all-menu {
+    padding: 20px 0 0 20px;
+    width: calc(100% - 140px);
+  }
+}
+</style>

src/views/enterprise/index.vue

@@ -15,12 +15,12 @@
           <div class="right-content border-box">
             <div class="right-box" style="min-height: calc(100vh - 86px);">
               <div class="apps-content flex" style="min-height: calc(100vh - 86px);">
-                <div class="apps-content-left w-157" style="min-height: calc(100vh - 86px);">
+                <div class="apps-content-left w-157" style="min-height: calc(100vh - 86px)" v-show="showAsideMenu">
                   <common-detail-left :tabListData="tabListData" :activeSelTab="activeSelTab" @setSelectTab="setSelectTab"></common-detail-left>
                 </div>
-                <div class="apps-content-right border-box">
+                <div class="apps-content-right border-box" :style="{width: showAsideMenu ? 'calc(100% - 157px)' : '100%'}">
                   <transition name="fade" mode="out-in">
-                    <router-view :brandId="activeBrand" :activeGroupId="activeGroup" :tabType="activeTab" @showTab="showTab"></router-view>
+                    <router-view :brandId="activeBrand" :activeGroupId="activeGroup" :tabType="activeTab" @showTab="showTab" @showAsideMenu="show => showAsideMenu = show"></router-view>
                   </transition>
                 </div>
               </div>
@@ -66,7 +66,8 @@ export default {
         }
       ],
       activeBrand: '', // 商户(品牌) id
-      activeGroup: '' // 商户(品牌) groupId
+      activeGroup: '', // 商户(品牌) groupId
+      showAsideMenu: true,
     };
   },
   computed: {},
@@ -151,10 +152,8 @@ export default {
     }
   },
   watch: {
-    $route: {
-      handler: function(val, oldVal) {},
-      // 深度观察监听
-      deep: true
+    '$route.path'() {
+      this.showAsideMenu = true;
     },
     activeBrand: function(newData, oldData) {
       const that = this;
@@ -292,7 +291,6 @@ export default {
         }
       }
       .apps-content-right {
-        width: calc(100% - 157px);
         padding-left: 10px;
         background: #f0f2f5;
         .daily-set-wrap {