管理员角色列表和门店角色列表

src/api/admin-list.js

@@ -9,6 +9,7 @@ const api = {
   menuList: '/menu-list', // 菜单列表
   roleAdminList: '/role-admin-list', // 获取管理员列表
   delAdmin: '/admin-del',  // 删除管理员
+  enterpriseList: '/auth-enterprise-list', // 获取授权的商户列表
 }
 
 export default getFetch(api, '/hb-manage-we');

src/views/enterprise/admin-list.vue

@@ -4,18 +4,13 @@
       <div class="add-role">
         <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" @click="onChangeRole(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>
+      <role-list
+        :role-list="roleList"
+        :active-role-id="activeRoleId"
+        show-del-role-button
+        @del-role-succ="onDelRoleSucc"
+        @edit-role="onEditRole"
+        @change-role="onChangeRole"></role-list>
     </div>
     <div class="admin-list">
       <h3 class="admin-list-title">管理员列表</h3>
@@ -52,25 +47,11 @@
         @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 RoleList from './admin-list/role-list.vue';
 import api from '@/api/admin-list.js';
 
 // 角色菜单
@@ -85,27 +66,17 @@ import api from '@/api/admin-list.js';
 //    管辖范围跳转 done
 //    添加管理员跳转 done
 
-const { delRole, roleList, roleAdminList, delAdmin } = api;
+const { roleList, roleAdminList, delAdmin } = api;
 
 export default {
   name: 'admin-list',
+  components: { RoleList },
   data() {
     return {
       // 选中的角色id
       activeRoleId: '',
       // 角色菜单
       roleList: [],
-      // 删除角色弹窗
-      delRole: {
-        show: false,
-        loading: false,
-        // 角色id
-        roleId: '',
-        // 角色名称
-        roleName: '',
-        // 用户输入的角色名称
-        roleNameInput: '',
-      },
       search: '',
       // 管理员列表翻页相关的数据
       pager: {
@@ -119,7 +90,7 @@ export default {
     }
   },
   created() {
-    // this.getRoleList();
+    this.getRoleList();
   },
   methods: {
     // 获取角色列表
@@ -139,38 +110,17 @@ export default {
       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();
     },
+    onDelRoleSucc(resetActiveRoleId) {
+      if (resetActiveRoleId) {
+        this.activeRoleId = '';
+      }
+      this.getRoleList();
+    },
     // 获取选中的角色下的管理员列表
     getAdminList() {
       const { currentPage, pageSize } = this.pager;
@@ -222,24 +172,6 @@ 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;
@@ -257,44 +189,6 @@ export default {
         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;

src/views/enterprise/admin-list/role-list.vue

+<template>
+  <div>
+    <ul class="role-menu">
+      <li class="no-data" v-if="!Array.isArray(roleList) || roleList.length == 0">暂无数据</li>
+      <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>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item @click.native="onEditRole(el)">编辑</el-dropdown-item>
+            <el-dropdown-item v-if="showDelRoleButton" @click.native="onDelRole(el)">删除</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </li>
+    </ul>
+    <!-- 删除角色 -->
+    <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';
+
+const { delRole } = api;
+
+export default {
+  name: 'role-list',
+  props: {
+    roleList: {
+      type: Array,
+      default: () => []
+    },
+    activeRoleId: [String, Number],
+    showDelRoleButton: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      // 删除角色弹窗
+      delRole: {
+        show: false,
+        loading: false,
+        // 角色id
+        roleId: '',
+        // 角色名称
+        roleName: '',
+        // 用户输入的角色名称
+        roleNameInput: '',
+      },
+    }
+  },
+  methods: {
+    onChangeRole(roleData) {
+      this.$emit('change-role', roleData);
+    },
+    // 新建角色、编辑角色跳转
+    onEditRole(roleData) {
+      this.$emit('edit-role', roleData);
+    },
+    // 删除角色
+    onDelRole(roleData) {
+      const { roleId, roleName } = roleData;
+      Object.assign(this.delRole, { show: true, roleId, roleName });
+    },
+    onDelRoleClose() {
+      Object.assign(this.delRole, { roleId: '', roleName: '', roleNameInput: '' });
+    },
+    // 确认删除角色
+    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置空
+        this.$emit('del-role-succ', roleId == this.activeRoleId);
+      }).finally(() => this.delRole.loading = false);
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.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;
+    }
+  }
+  .no-data {
+    text-align: center;
+    color: @gray03;
+  }
+}
+.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;
+    }
+  }
+}
+</style>

src/views/enterprise/store-admin-list.vue

 <template>
-  <div>门店角色</div>
+  <div class="store-admin-list">
+    <div class="store-role-list">
+      <p class="no-data" v-if="roleList.length == 0">暂无数据</p>
+      <div v-for="el in roleList" :key="el.enterpriseId">
+        <h3 class="role-title">
+          <i class="iconfont iconshanghu role-title-icon"></i>
+          <p class="role-title-text">{{ el.enterpriseName }}</p>
+        </h3>
+        <role-list
+          :role-list="el.roleList"
+          :active-role-id="activeRoleId"
+          @edit-role="onEditRole"
+          @change-role="onChangeRole"></role-list>
+      </div>
+    </div>
+    <div class="admin-list">
+      <h3 class="admin-list-title">门店成员列表</h3>
+      <el-input
+        style="width: 238px"
+        placeholder="请输入姓名/员工编号/手机号码"
+        prefix-icon="el-icon-search"
+        clearable
+        v-model.trim="search"
+        @change="onSearch"
+      ></el-input>
+      <el-alert
+        type="info"
+        title="拥有门店的权限，能进行一些门店日常业务，如打标签，完成话务等。必须是导购账号 ，不可添加删除门店成员。"
+        :closable="false"
+        show-icon
+        style="float:right;width:720px;"
+      ></el-alert>
+      <el-table style="margin-top:20px">
+        <el-table-column label="姓名" prop="staffName"></el-table-column>
+        <el-table-column label="员工代码" prop="nationCode"></el-table-column>
+        <el-table-column label="手机号码" prop="phoneNumber"></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"
+        @current-change="onCurrentChange"
+        @size-change="onSizeChange"
+      ></el-pagination>
+    </div>
+  </div>
 </template>
 
 <script>
+import RoleList from './admin-list/role-list.vue';
+import api from '@/api/admin-list.js';
+
+const { enterpriseList, roleList, roleAdminList } = api;
+
 export default {
-  name: 'store-admin-list'
+  name: 'store-admin-list',
+  components: { RoleList },
+  data() {
+    return {
+      // 角色列表
+      roleList: [],
+      activeRoleId: '',
+      adminList: [],
+      search: '',
+      pager: {
+        total: 0,
+        pageSizes: [20, 40, 60, 80],
+        pageSize: 20,
+        currentPage: 1
+      }
+    }
+  },
+  created() {
+    // this.getRoleList();
+  },
+  methods: {
+    getRoleList() {
+      const haoBanUser = JSON.parse(localStorage.getItem('haoBanUser') || '{}');
+      const wxEnterpriseId = haoBanUser.wxEnterpriseId;
+      const prom = [];
+      if (!wxEnterpriseId) return;
+      enterpriseList({ wxEnterpriseId }).then(res => {
+        const result = res.result || [];
+        this.roleList = result.map(el => {
+          const { enterpriseId, enterpriseName } = el;
+          return { enterpriseId, enterpriseName, roleList: [] }
+        });
+        if (this.roleList.length == 0) return;
+        this.roleList.forEach(el => {
+          prom.push(roleList({ enterpriseId: el.enterpriseId, roleType: 1}).then(res => {
+            el.roleList = res.result || [];
+          }))
+        })
+        Promise.all(prom).then(() => {
+          if (!this.activeRoleId) {
+            this.roleList.some(el => {
+              if (el.roleList.length > 0) {
+                this.activeRoleId= el.roleList[0].roleId;
+              }
+              return el.roleList.length > 0;
+            })
+          }
+          if (this.activeRoleId) {
+            this.getAdminList();
+          }
+        })
+      })
+    },
+    getAdminList() {
+      const params = {
+        roleId: this.activeRoleId,
+        search: this.search,
+        pageNum: this.pager.currentPage,
+        pageSize: this.pager.pageSize
+      }
+      roleAdminList(params).then(res => {
+        const { totalCount, result } = res.result || {};
+        this.pager.total = totalCount || 0;
+        this.adminList = result || [];
+      })
+    },
+    // 切换角色菜单
+    onChangeRole(roleData) {
+      const { roleId } = roleData;
+      this.activeRoleId = roleId;
+    },
+    // 编辑角色菜单
+    onEditRole(roleData) {
+      this.$router.push(`/edit-store-role?roleId=${roleData.roleId}`);
+    },
+    onSearch() {
+      this.pager.currentPage = 1;
+      this.getAdminList();
+    },
+    onSizeChange(pageSize) {
+      this.pager.pageSize = pageSize;
+      this.onSearch();
+    },
+    onCurrentChange(currentPage) {
+      this.pager.currentPage = currentPage;
+      this.getAdminList();
+    }
+  }
 }
 </script>
+
+<style lang="less" scoped>
+.store-admin-list {
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+  min-height: 100%;
+  background-color: #fff;
+  .store-role-list {
+    padding: 17px 0;
+    flex-shrink: 0;
+    width: 194px;
+    border-right: 1px solid #E4E7ED;
+    .role-title {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      padding: 0 20px;
+      margin-bottom: 13px;
+      font-size: 14px;
+      font-weight: 700;
+      color: @gray01;
+      line-height: 20px;
+      .role-title-icon {
+        margin-right: 10px;
+        font-size: 14px;
+        color: @gray01;
+      }
+      .role-title-text {
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+    .no-data {
+      padding-top: 50px;
+      text-align: center;
+      color: @gray03;
+    }
+  }
+  .admin-list {
+    padding: 20px;
+    width: calc(100% - 194px);
+    .admin-list-title {
+      margin-bottom: 18px;
+      font-size: 14px;
+      font-weight: 700;
+      color: @gray01;
+      line-height: 20px;
+    }
+  }
+}
+</style>