接口联调

src/api/admin-list.js

 import getFetch from './getFetch';
 
 const api = {
-  addRole: '/add-role', // 新增角色
+  addRole: {
+    url: '/add-role',
+    method: 'post',
+    useFormData: true
+  }, // 新增角色
   delRole: '/role-del', // 删除角色
-  editRole: '/role-edit', // 编辑角色
+  editRole: {
+    url: '/role-edit',
+    method: 'post',
+    useFormData: true
+  }, // 编辑角色
   roleDetail: '/role-detail', // 角色详情
   roleList: '/role-list', // 角色列表
   menuList: '/menu-list', // 菜单列表

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

 <template>
   <div class="menu-tree">
     <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 }}
       </li>
     </ul>
     <div class="all-menu">
-      <el-checkbox v-model="isSelectAll" @change="onSelectAll">全选</el-checkbox>
+      <el-checkbox v-if="treeData.length > 0" v-model="isSelectAll" @change="onSelectAll">全选</el-checkbox>
       <el-tree
         :data="treeData"
         show-checkbox
@@ -52,8 +53,8 @@ export default {
   methods: {
     // 左侧一级节点改变时，切换右侧的树数据
     onMenuChange(menuData) {
-      this.activeMenuId = menuData.menuId;
-      this.treeData = [ menuData ];
+      this.activeMenuId = menuData ? menuData.menuId : '';
+      this.treeData = menuData ? [ menuData ] : [];
       this.$nextTick(this.checkSelectAll);
     },
     // 判断当前tree是否全选，并更新全选按钮的状态
@@ -120,6 +121,13 @@ export default {
         background-color: #fff;
       }
     }
+    .no-data {
+      padding-top: 20px;
+      text-align: center;
+      font-size: 14px;
+      color: @gray03;
+      line-height: 60px;
+    }
   }
   .all-menu {
     padding: 20px 0 0 20px;