fix : 修改用户切换样式

src/components/DetailComponent/CompanyPicker.vue

@@ -10,8 +10,8 @@
             <el-button @click="getList()">搜索</el-button>
           </template>
         </el-input>
-        <el-button v-if="isChooseAll" @click="chooseAll">全选</el-button>
-        <el-button v-else @click="cancelAll">不全选</el-button>
+<!--        <el-button v-if="isChooseAll" @click="chooseAll">全选</el-button>-->
+<!--        <el-button v-else @click="cancelAll">不全选</el-button>-->
         <!--        <el-checkbox-group v-model="checkBtn" @change="handleChange">-->
         <!--          <el-checkbox label="全选" value="1" />-->
         <!--          <el-checkbox label="Option B" value="Value B" />-->
@@ -161,6 +161,11 @@ const show = () => {
   getList()
 };
 const handleChange = (data, checked) => {
+  if(data.value==-1&&checked){
+    chooseAll()
+  }else if(data.value==-1&&!checked){
+    cancelAll()
+  }
   // 左侧有选择框 + 多选
   if (props.multiple) {
     //不添加重复的数据到右边

src/layout/navbar/index.vue

@@ -7,16 +7,42 @@
       <div class="user-box">
         <div>
           <!--         <img :src="userInfo.avatar" alt="" @click.stop="handleVisitedP">-->
-          <span @click.stop="handleVisitedP">欢迎回来，{{ userInfo.userName }}</span>
+          <span @click.stop="handleVisitedP">欢迎回来，{{ userInfo.nickName }}</span>
         </div>
         <div class="person" v-if="visitedP">
           <ul>
-
-            <el-select v-model="selectUserId" @change="accountChange">
-              <el-option v-for="item in accountList" :label="item.userName" :value="item.userId"/>
-            </el-select>
-            <li @click="handleToAuth">个人中心</li>
-            <li @click="handleLogout">退出登录</li>
+            <li>主次账号切换</li>
+            <li class="avatar-li" v-for="item in accountList" @click="accountChange(item.userId)">
+              <el-avatar>{{ item.nickName }}</el-avatar>
+              <div class="right-li">
+                <div class="name-line">
+                  <span v-if="item.accountType==='0'" class="zhu">主</span>
+                  <span class="nickName">{{ item.nickName }}</span>
+                  <span>{{ item.jobActivityDesc }}</span>
+                </div>
+                <div>
+                  <span>{{ item.companyName }}/{{ item.departmentName }}</span>
+                </div>
+              </div>
+              <div>
+                <el-icon color="#3f89dc" size="20" v-if="item.current">
+                  <SuccessFilled/>
+                </el-icon>
+              </div>
+              <!--              <li v-for="item in accountList" :label="item.userName" :value="item.userId"/>-->
+            </li>
+            <!--            <li @click="handleToAuth">-->
+            <!--              <el-icon color="gray" size="20" style="margin-right: 5px">-->
+            <!--                <UserFilled/>-->
+            <!--              </el-icon>-->
+            <!--              个人中心-->
+            <!--            </li>-->
+            <li @click="handleLogout">
+              <el-icon color="gray" size="20" style="margin-right: 5px">
+                <SwitchButton/>
+              </el-icon>
+              退出登录
+            </li>
           </ul>
         </div>
       </div>
@@ -68,16 +94,15 @@ const handleVisitedP = () => {
 
 }
 
-const accountChange = () => {
-  switchAccount(selectUserId.value).then(res =>{
-    if (res.code == 1000){
+const accountChange = (userId) => {
+  switchAccount(userId).then(res => {
+    if (res.code == 1000) {
       visitedP.value = !visitedP.value
       authStore.userLogout()
-      permisstionStore.removeMenu()
-      permisstionStore.setIsSuccessReq()
-      tagsViewStore.removeAllTagView()
       setToken(res.data)
       router.push('/')
+      location.reload()
+      visitedP.value = false
     }
   })
 }
@@ -137,24 +162,86 @@ const handleLogout = () => {
 
 
       .person {
+        font-size: 14px;
+        color: #666666;
         position: absolute;
-        width: 80px;
+        width: 280px;
         right: 0;
         z-index: 300;
-        bottom: -70px;
-        padding: 10px 5px;
+        top: 46px;
+        padding: 5px 0;
         border-radius: 4px;
         background-color: #fff;
         box-shadow: 2px 2px 2px 1px rgb(171, 167, 167);
 
-        li {
-          text-align: center;
-          font-size: 14px;
-          line-height: 1.5;
-          cursor: pointer;
+        .avatar-li {
+          display: flex;
+          height: 60px;
 
+          .right-li {
+            color: #909090;
+            display: flex;
+            flex-direction: column;
+
+            .name-line {
+              margin-bottom: 5px;
+
+              .zhu {
+                display: inline-block;
+                width: 20px;
+                height: 20px;
+                line-height: 20px;
+                background-color: #fa0;
+                color: #fff;
+                text-align: center;
+              }
+
+              .nickName {
+                color: #4d7ad8;
+              }
+
+              > span {
+                margin-right: 5px;
+              }
+            }
+
+            > div:last-child {
+              width: 194px;
+              -webkit-line-clamp: 1;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
+            }
+          }
+
+          :deep(.el-avatar--circle) {
+            margin-right: 10px;
+            background-color: #8a7243;
+          }
+
+        }
+
+        li {
           &:hover {
-            color: #79bbff;
+            color: #666666 !important;
+            background-color: #eaeaea;
+          }
+
+          &:first-child:hover {
+            background-color: #fff;
+          }
+
+          padding: 0 10px;
+          height: 28px;
+          display: flex;
+          align-items: center;
+          text-align: left;
+          font-size: 14px;
+          cursor: pointer;
+          border-bottom: 1px solid #e6e6e6;
+
+          &:last-child {
+            border-bottom: none;
           }
         }
       }