管理员列表

src/api/admin-list.js

@@ -6,6 +6,7 @@ const api = {
   editRole: '/role-edit', // 编辑角色
   roleDetail: '/role-detail', // 角色详情
   roleList: '/role-list', // 角色列表
+  menuList: '/menu-list', // 菜单列表
   roleAdminList: '/role-admin-list', // 获取管理员列表
   delAdmin: '/admin-del',  // 删除管理员
 }

src/views/enterprise/admin-list.vue

@@ -2,10 +2,10 @@
   <div class="admin">
     <div class="role-list">
       <div class="add-role">
-        <el-button><i class="iconfont icontianjiajiahaowubiankuang"></i> 新建管理角色</el-button>
+        <el-button @click="onEditRole()"><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">
+        <li :class="['role-item', { active: activeRoleId == el.roleId }]" v-for="el in roleList" :key="el" @click="onChangeRole(el)">
           <span class="role-name">{{ el.roleName }}</span>
           <el-dropdown placement="bottom-start">
             <i class="iconfont icongengduo edit-icon"></i>
@@ -52,23 +52,60 @@
         @current-change="onCurrentChange"
       ></el-pagination>
     </div>
+    <!-- 删除角色 -->
+    <el-dialog :visible.sync="delRole.show" title="删除角色" width="600px" @closed="onDelRoleClose">
+      <div class="del-role">
+        <i class="el-icon-warning"></i>
+        <div class="del-role-content">
+          <p class="del-role-tip">确认删除“{{ delRole.roleName }}”角色吗？</p>
+          <p class="del-role-tip">请在输入框中输入该角色名称，以避免误操作。</p>
+          <el-input style="margin-top: 10px;width: 440px" v-model.trim="delRole.roleNameInput"></el-input>
+        </div>
+      </div>
+      <template slot="footer">
+        <el-button @click="delRole.show = false">取消</el-button>
+        <el-button type="primary" :loading="delRole.loading" @click="onDelRoleSure">确定</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import api from '@/api/admin-list.js';
 
-// 搜索 done
-// 分页查询 done
+// 角色菜单
+//    添加角色跳转 done
+//    编辑角色跳转 done
+//    删除角色 done
+//    切换角色菜单 done
+// 管理员列表
+//    搜索 done
+//    分页查询 done
+//    删除管理员 done
+//    管辖范围跳转 done
+//    添加管理员跳转 done
 
-// eslint-disable-next-line
 const { delRole, roleList, roleAdminList, delAdmin } = api;
 
 export default {
   name: 'admin-list',
   data() {
     return {
-      activeRoleId: '123',
+      // 选中的角色id
+      activeRoleId: '',
+      // 角色菜单
+      roleList: [],
+      // 删除角色弹窗
+      delRole: {
+        show: false,
+        loading: false,
+        // 角色id
+        roleId: '',
+        // 角色名称
+        roleName: '',
+        // 用户输入的角色名称
+        roleNameInput: '',
+      },
       search: '',
       // 管理员列表翻页相关的数据
       pager: {
@@ -79,18 +116,72 @@ export default {
       },
       // 管理员列表数据
       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();
+    this.getRoleList();
   },
   methods: {
+    // 获取角色列表
+    getRoleList() {
+      this.roleList = [
+        { roleId: '123', roleName: '角色1角色1角色1角色1角色1角色1角色1角色1角色1角色1角色1角色1角色1角色1角色1角色1角色1角色1角色1角色1角色1角色1角色1角色1角色1角色1角色1' },
+        { roleId: '456', roleName: '角色2' },
+        { roleId: '789', roleName: '角色3' },
+      ]
+      if (this.roleList.length > 0 && !this.activeRoleId) {
+        this.activeRoleId = this.roleList[0].roleId;
+        this.getAdminList();
+      }
+      return;
+      // roleType 1门店角色2管理员角色
+      roleList({ roleType: 2 }).then(res => {
+        this.roleList = res.result || [];
+        // 如果没有选中的角色id而且角色列表有数据，就默认选中第一个角色
+        if (!this.activeRoleId && this.roleList.length > 0 ) {
+          this.activeRoleId = this.roleList[0].roleId;
+          this.getAdminList();
+        }
+      });
+    },
+    // 新建角色、编辑角色跳转
+    onEditRole(roleData) {
+      const { roleId } = roleData || {};
+      this.$router.push(`/edit-role${roleId ? `?roleId=${roleId}` : ''}`);
+    },
+    // 删除角色
+    onDelRole(roleData) {
+      const { roleId, roleName } = roleData;
+      Object.assign(this.delRole, { show: true, roleId, roleName });
+    },
+    // 确认删除角色
+    onDelRoleSure() {
+      const { roleId, roleName, roleNameInput } = this.delRole;
+      if (roleNameInput.length == 0) {
+        return this.$message.warning('请输入角色名称！');
+      }
+      if (roleName != roleNameInput) {
+        return this.$message.warning('请输入正确的角色名称！');
+      }
+      this.delRole.loading = true;
+      delRole({ roleId }).then(res => {
+        this.$message.success('删除成功！');
+        // 如果被删除的角色是当前选中的角色，需要将选中的角色id置空
+        if (roleId == this.activeRoleId) {
+          this.activeRoleId = '';
+        }
+        this.getRoleList();
+      }).finally(() => this.delRole.loading = false);
+    },
+    onDelRoleClose() {
+      Object.assign(this.delRole, { roleId: '', roleName: '', roleNameInput: '' });
+    },
+    // 切换角色菜单
+    onChangeRole(roleData) {
+      this.activeRoleId = roleData.roleId;
+      this.getAdminList();
+    },
+    // 获取选中的角色下的管理员列表
     getAdminList() {
       const { currentPage, pageSize } = this.pager;
       const params = {
@@ -129,7 +220,8 @@ export default {
     },
     // 添加管理员、管辖范围跳转
     toEditAdmin(adminData) {
-      this.$router.push(`/edit-admin?roleId=${this.activeRoleId}`);
+      const { staffId } = adminData || {};
+      this.$router.push(`/edit-admin?roleId=${this.activeRoleId}${staffId ? `&staffId=${staffId}` : ''}`);
     },
     // 删除管理员
     onDelAdmin(adminData) {
@@ -150,6 +242,24 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.del-role {
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+  .el-icon-warning {
+    color: #E6A23C;
+    font-size: 24px;
+  }
+  .del-role-content {
+    margin-left: 10px;
+    .del-role-tip {
+      font-size: 14px;
+      font-weight: 400;
+      color: @gray02;
+      line-height: 20px;
+    }
+  }
+}
 .admin {
   display: flex;
   justify-content: flex-start;