角色管理

src/api/admin-list.js

+import getFetch from './getFetch';
+
+const api = {
+  addRole: '/add-role', // 新增角色
+  delRole: '/role-del', // 删除角色
+  editRole: '/role-edit', // 编辑角色
+  roleDetail: '/role-detail', // 角色详情
+  roleList: '/role-list', // 角色列表
+  roleAdminList: '/role-admin-list', // 获取管理员列表
+  delAdmin: '/admin-del',  // 删除管理员
+}
+
+export default getFetch(api, '/hb-manage-we');

src/router/routes.js

@@ -101,11 +101,26 @@ export const routes = [
         component: _import('enterprise', 'admin-list')
       },
       {
+        path: '/edit-role',
+        name: '新建、编辑角色',
+        component: _import('enterprise', 'edit-role')
+      },
+      {
+        path: '/edit-admin',
+        name: '新建编辑管理员',
+        component: _import('enterprise', 'edit-admin')
+      },
+      {
         path: '/store-admin-list',
         name: '门店角色',
         component: _import('enterprise', 'store-admin-list')
       },
       {
+        path: '/edit-store-role',
+        name: '编辑门店角色',
+        component: _import('enterprise', 'edit-store-role')
+      },
+      {
         path: '/superAdmin',
         name: '超级管理员',
         component: _import('enterprise', 'super-admin')

src/views/enterprise/admin-list.vue

 <template>
-  <div>管理员</div>
+  <div class="admin">
+    <div class="role-list">
+      <div class="add-role">
+        <el-button><i class="iconfont icontianjiajiahaowubiankuang"></i> 新建管理角色</el-button>
+      </div>
+      <ul class="role-menu">
+        <li :class="['role-item', { active: activeRoleId == el.roleId }]" v-for="el in roleList" :key="el">
+          <span class="role-name">{{ el.roleName }}</span>
+          <el-dropdown placement="bottom-start">
+            <i class="iconfont icongengduo edit-icon"></i>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item @click.native="onEditRole(el)">编辑</el-dropdown-item>
+              <el-dropdown-item @click.native="onDelRole(el)">删除</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </li>
+      </ul>
+    </div>
+    <div class="admin-list">
+      <h3 class="admin-list-title">管理员列表</h3>
+      <el-input
+        placeholder="请输入姓名/员工编号/手机号码"
+        prefix-icon="el-icon-search"
+        style="width: 277px"
+        clearable
+        v-model.trim="search"
+        @change="onSearch"
+      ></el-input>
+      <el-button style="float: right" type="primary" @click="toEditAdmin">添加管理员</el-button>
+      <el-table style="margin-top: 20px" :data="adminList">
+        <el-table-column label="姓名" prop="staffName" :formatter="(row, col, val) => val || '--'"></el-table-column>
+        <el-table-column label="员工账号" prop="nationCode" :formatter="(row, col, val) => val || '--'"></el-table-column>
+        <el-table-column label="手机号码" prop="phoneNumber" :formatter="(row, col, val) => val || '--'"></el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="{ row }">
+            <el-button type="text" @click="toEditAdmin(row)">管辖范围</el-button>
+            <el-button type="text" @click="onDelAdmin(row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        v-if="pager.total > 0"
+        style="text-align: right"
+        background
+        layout="total,sizes,prev,pager,next"
+        :total="pager.total"
+        :page-sizes="pager.pageSizes"
+        :page-size="pager.pageSize"
+        :current-page="pager.currentPage"
+        @size-change="onSizeChange"
+        @current-change="onCurrentChange"
+      ></el-pagination>
+    </div>
+  </div>
 </template>
 
 <script>
+import api from '@/api/admin-list.js';
+
+// 搜索 done
+// 分页查询 done
+
+// eslint-disable-next-line
+const { delRole, roleList, roleAdminList, delAdmin } = api;
+
 export default {
-  name: 'admin-list'
+  name: 'admin-list',
+  data() {
+    return {
+      activeRoleId: '123',
+      search: '',
+      // 管理员列表翻页相关的数据
+      pager: {
+        total: 0,
+        pageSizes: [20, 40, 60, 80],
+        pageSize: 20,
+        currentPage: 1
+      },
+      // 管理员列表数据
+      adminList: [],
+      // 角色菜单
+      roleList: [
+        { roleId: '123', roleName: '角色1角色1角色1角色1角色1角色1角色1角色1角色1' },
+        { roleId: '456', roleName: '角色2' },
+        { roleId: '789', roleName: '角色3' },
+      ]
+    }
+  },
+  created() {
+    this.getAdminList();
+  },
+  methods: {
+    getAdminList() {
+      const { currentPage, pageSize } = this.pager;
+      const params = {
+        roleId: this.activeRoleId,
+        search: this.search,
+        pageNum: currentPage,
+        pageSize
+      }
+      this.adminList = [
+        {
+          staffId: '123',
+          staffName: '测试管理员',
+          phoneNumber: '18912341234',
+          nationCode: '1234',
+          wxUserId: '1234'
+        }
+      ]
+      return console.log(params)
+      roleAdminList(params).then(res => {
+        const { totalCount, list } = res.result || {};
+        this.pager.total = totalCount;
+        this.adminList = list || [];
+      })
+    },
+    onSearch() {
+      this.pager.currentPage = 1;
+      this.getAdminList();
+    },
+    onSizeChange(pageSize) {
+      this.pager.pageSize = pageSize;
+      this.onSearch();
+    },
+    onCurrentChange(currentPage) {
+      this.pager.currentPage = currentPage;
+      this.getAdminList();
+    },
+    // 添加管理员、管辖范围跳转
+    toEditAdmin(adminData) {
+      this.$router.push(`/edit-admin?roleId=${this.activeRoleId}`);
+    },
+    // 删除管理员
+    onDelAdmin(adminData) {
+      const { staffName, staffId } = adminData;
+      this.$confirm(`确定删除【 ${staffName} 】吗？`, '提示', { type: 'warning' }).then(() => {
+        const params = { staffId, roleId: this.activeRoleId }
+        delAdmin(params).then(res => {
+          this.$message.success('删除成功！');
+          if (this.pager.currentPage > 1 && this.adminList.length == 1) {
+            this.pager.currentPage--;
+          }
+          this.getAdminList();
+        })
+      })
+    }
+  },
 }
 </script>
+
+<style lang="less" scoped>
+.admin {
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+  background-color: #fff;
+  min-height: 100%;
+  .role-list {
+    flex-shrink: 0;
+    width: 194px;
+    border-right: 1px solid #E4E7ED;
+    .add-role {
+      padding: 20px;
+      .el-button {
+        width: 100%;
+        border-style: dashed;
+      }
+    }
+    .role-menu {
+      .role-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 5px 10px 5px 20px;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        color: @gray02;
+        cursor: pointer;
+        &.active {
+          color: @blue;
+          background-color: rgba(47,84,235,0.05);;
+        }
+        &:hover {
+          color: @blue;
+          background-color: rgba(47,84,235,0.05);;
+          .edit-icon {
+            opacity: 1;
+            color: @blue;
+            background-color: rgba(47,84,235,0.09);
+          }
+        }
+        .edit-icon {
+          padding: 4px;
+          opacity: 0;
+          font-size: 12px;
+        }
+        .role-name {
+          display: block;
+          width: 90%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+  .admin-list {
+    padding: 20px;
+    width: calc(100% - 194px);
+    .admin-list-title {
+      margin-bottom: 20px;
+      font-size: 14px;
+      font-weight: 700;
+      color: @gray01;
+      line-height: 20px;
+    }
+  }
+}
+</style>

src/views/enterprise/edit-admin.vue

+<template>
+  <div>新建、编辑管理员</div>
+</template>
+
+<script>
+export default {
+  name: 'edit-admin'
+}
+</script>

src/views/enterprise/edit-role.vue

+<template>
+  <div>新建、编辑角色</div>
+</template>
+
+<script>
+export default {
+  name: 'edit-role'
+}
+</script>

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

+<template>
+  <div>编辑门店角色</div>
+</template>
+
+<script>
+export default {
+  name: 'edit-store-role'
+}
+</script>