fix: 修改公共头部用户信息

src/api/contact.js

@@ -4,7 +4,7 @@
  * @Author: 无尘
  * @Date: 2020-07-24 12:19:48
  * @LastEditors: 无尘
- * @LastEditTime: 2020-07-27 13:56:39
+ * @LastEditTime: 2020-07-27 14:39:16
  */
 import getFetch from './getFetch.js';
 
@@ -12,16 +12,16 @@ let api = {
   getSyncCheck: '/department-sync-check', // 获取同步状态
   refreshWx: '/sync-qywx', // 刷新企业微信
   getDepartmentList: '/department-list-level', // 获取搜索部门
-  getCompanyDepartList: '/department-list-cache', // 获取企业部门列表树形
-  getStaffList: '/staff-list', // 获取成员列表
-  getStaffDetail: '/staff-sel', // 获取成员详情
+  getCompanyDepartList: '/get-department-list', // 获取企业部门列表树形数据
+  getStaffList: '/get-staff-list', // 获取成员列表
+  getStaffDetail: '/staff-detail', // 获取成员详情
   getStaffRelation: '/staff-clerk-relation', // 获取关联详情
   delStaffRelation: {
-    url: '/del-clerk-relation', // 解绑关联
+    url: '/staff-unbind', // 解绑关联
     method: 'post'
   },
   addStaffRelation: {
-    url: '/add-clerk-relation', // 添加绑定关联
+    url: '/staff-bind', // 添加绑定关联
     method: 'post'
   },
   getClerkRelation: '/search-clerk-relation',  // 获取关联导购

src/components/vue-office-header.vue

@@ -4,27 +4,32 @@
  * @Author: 无尘
  * @Date: 2018-10-10 17:21:32
  * @LastEditors: 无尘
- * @LastEditTime: 2020-07-27 10:42:09
+ * @LastEditTime: 2020-07-27 15:19:35
  -->
 <template>
-  <div class="navheader">
+  <div class="nav-header">
     <!-- logo -->
-    <div class="navheader-logo fl cursor-pointer" :class="{ moveleft: isCollapse, moveright: !isCollapse }" @click="toIndex"><span class="pro-name">好办管理平台</span></div>
-    <div class="navheader-item fl">
+    <div class="nav-header-logo fl cursor-pointer" :class="{ moveleft: isCollapse, moveright: !isCollapse }" @click="toIndex"><span class="pro-name">好办管理平台</span></div>
+    <div class="nav-header-item fl">
       <template v-for="(menuitem, index) in menuHead">
         <a :key="index" :class="['itemlink menu-mall menu-font-16']" @click="changeRouter(menuitem.url)">
           <span :class="['inline-block bottom', menuitem.url.indexOf(pathName) != -1 ? 'current-module' : '']">{{ menuitem.rightName }}</span>
         </a>
       </template>
       <!-- 最右侧用户信息 -->
-      <div class="navuserinfo fr">
-        <span class="span-log color-909399 iconfont iconrizhifuwu"></span>
+      <div class="navuser-info fr">
+        <!-- <span class="span-log color-909399 iconfont iconrizhifuwu"></span> -->
+        <img class="user-img" :src="userInfo.headImg" alt="">
         <el-popover placement="bottom" title="" width="95" trigger="hover" popper-class="user-header-pop" style="min-width: 95px;">
-          <ul class="navsuerwrap">
-            <li class="user-item loginout" style="text-align: center" @click.stop="toLoginOut"><a class="usertext">退出登录</a></li>
+          <ul class="navsuer-wrap">
+            <li>
+              <p class="font-14 color-606266 hide-item">{{ userInfo.staffName || '--' }}</p>
+              <p class="font-12 color-909399 hide-item">{{ userInfo.roleName || '--' }}</p>
+            </li>
+            <li class="user-item loginout text-align"  @click.stop="toLoginOut"><a class="user-text">退出登录</a></li>
           </ul>
           <a class="nav-user-name" slot="reference">
-            <span class="font-12 color-606266">{{ userInfo.staffDTO.staffName || '--' }}</span> <i class="iconfont iconxiala arrowico color-c0c4cc"></i>
+            <span class="font-12 color-606266">{{ userInfo.staffName || '--' }}</span> <i class="iconfont iconxiala arrowico color-c0c4cc"></i>
           </a>
         </el-popover>
       </div>
@@ -55,13 +60,13 @@ export default {
       isCollapse: false, // 是否收起左侧
       // 菜单数据
       menuHead: [
-        {
+        /* {
           menuCode: null,
           rightName: '工作台',
           url: '/index',
           parentCode: null,
           project: 'office'
-        },
+        }, */
         {
           menuCode: null,
           rightName: '通讯录',
@@ -86,12 +91,11 @@ export default {
       ],
       routePathName: '', // 当前路由值
       userInfo: {
-        name: '',
+        staffName: '',
+        nationCode: '',
         phoneNumber: '',
-        headPic: '',
-        staffDTO: {
-          staffName: ''
-        }
+        headImg: '',
+        wxEnterpriseId: '',
       }
     };
   },
@@ -162,12 +166,16 @@ export default {
       const that = this;
       getUserInfo({})
         .then(res => {
-          if (!res.result.staffDTO) {
-            res.result.staffDTO = {
-              staffName: ''
+          if (!res.result) {
+            res.result = {
+              staffName: '',
+              nationCode: '',
+              phoneNumber: '',
+              headImg: '',
+              wxEnterpriseId: '',
             };
           }
-          localStorage.setItem('userInfos', JSON.stringify(res.result));
+          localStorage.setItem('hanBanUser', JSON.stringify(res.result));
           that.userInfo = res.result;
         })
         .catch(function(error) {
@@ -209,7 +217,6 @@ export default {
 </script>
 <style lang="less" scoped>
 @main-color: #2f54eb;
-@userinfobgcolor: #ecf5ff;
 
 /* flex */
 
@@ -299,30 +306,48 @@ export default {
 }
 
 .user-item {
-  padding: 10px 0;
+  position: relative;
+  margin-top: 10px;
+  padding: 10px 0 0 0;
   &:hover {
     color: @main-color;
-    background-color: @userinfobgcolor;
+    // background-color: @userinfobgcolor;
     cursor: pointer;
   }
+  &::after {
+    content: '';
+    position: absolute;
+    left: -15px;
+    right: -15px;
+    top: 0px;
+    height: 1px;
+    background: #e4e7ed;
+  }
 }
 
-.navsuerwrap /deep/ {
+.navsuer-wrap /deep/ {
+  .hide-item {
+    width: 118px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
   .user-item {
+    text-align: center;
     color: #606266;
     a {
       color: #606266;
     }
-    &:hover .usertext {
+    &:hover .user-text {
       display: block;
       color: @main-color;
-      background-color: @userinfobgcolor;
+      // background-color: @userinfobgcolor;
       cursor: pointer;
     }
   }
 }
 
-.navheader /deep/ {
+.nav-header /deep/ {
   position: fixed;
   display: flex;
   top: 0;
@@ -420,7 +445,7 @@ li {
 }
 /*用户信息*/
 
-.navuserinfo {
+.navuser-info {
   /*width: 140px;*/
   /*font-size: 0;*/
   text-align: center;
@@ -440,6 +465,11 @@ li {
       border-right: 1px solid #e4e7ed;
     }
   }
+  .user-img {
+    width: 24px;
+    height: 24px;
+    border-radius: 12px;
+  }
   .el-button--text {
     padding-right: 24px;
     font-size: 14px;
@@ -481,25 +511,25 @@ li {
 /* 当浏览器的可视区域小于1280px */
 
 @media screen and (max-width: 1280px) {
-  .navheader {
+  .nav-header {
     min-width: 1280px;
   }
 }
 
 @media screen and (min-width: 1280px) and (max-width: 1366px) {
-  .navheader {
+  .nav-header {
     min-width: 1280px;
   }
 }
 
 @media screen and (min-width: 1366px) and (max-width: 1440px) {
-  .navheader {
+  .nav-header {
     min-width: 1366px;
   }
 }
 
 @media screen and (min-width: 1440px) and (max-width: 1920px) {
-  .navheader {
+  .nav-header {
     min-width: 1440px;
   }
 }