reactor:首页用户信息调整

src/layout/navBars/breadcrumb/user.vue

@@ -37,28 +37,44 @@
 <!--		<div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick" :title="isScreenfull ? '关全屏' : '开全屏'" >
 			<i class="iconfont" :class="!isScreenfull ? 'icon-quanping1' : 'icon-tuichuquanping'"></i>
 		</div>-->
-		<el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
-			<div class="layout-navbars-breadcrumb-user-link" :title="userInfos.name">
-				<div class="layout-navbars-breadcrumb-user-link-photoBox">
-					<el-avatar :src="userInfos.photo" :size="24" class="layout-navbars-breadcrumb-user-link-photo">
-						<SvgIcon name="ele-UserFilled" color="var(--el-color-primary)" />
-					</el-avatar>
-          <span class="text-no-wrap layout-navbars-breadcrumb-user-link-photoBox-name">{{ userInfos.name ? userInfos.name : '' }}</span>
-          <SvgIcon name="ele-ArrowDown" class="ml3"/>
-				</div>
+    <div class="layout-navbars-breadcrumb-user-link" :title="userInfos.name">
+        <el-popover
+            ref="popover"
+            placement="bottom"
+            :width="250"
+            trigger="click"
+            popper-class="user-info-box"
+        >
+          <template #reference>
+            <div class="layout-navbars-breadcrumb-user-link-photoBox">
+              <el-avatar :src="userInfos.photo" :size="24" class="layout-navbars-breadcrumb-user-link-photo">
+                <SvgIcon name="ele-UserFilled" color="var(--el-color-primary)" />
+              </el-avatar>
+              <span class="text-no-wrap layout-navbars-breadcrumb-user-link-photoBox-name">{{ userInfos.name ? userInfos.name : '' }}</span>
+              <el-button link><SvgIcon name="ele-ArrowDown"/></el-button>
+            </div>
+          </template>
+          <div class="user-info-box-content">
+            <div class="user-info-box-content-item">
+              <span class="user-info-box-content-item-title">登录账号：</span><span class="user-info-box-content-item-content">{{ userInfos.account }}</span>
+            </div>
+            <div class="mt10 user-info-box-content-item">
+              <span class="user-info-box-content-item-title">工号：</span><span class="user-info-box-content-item-content">{{ userInfos.staffNo }}</span>
+            </div>
+            <div class="mt10 user-info-box-content-item">
+              <span class="user-info-box-content-item-title">职务：</span><span class="user-info-box-content-item-content">{{ userInfos.roles }}</span>
+            </div>
+            <div class="mt10 user-info-box-content-item">
+              <span class="user-info-box-content-item-title">组织：</span><span class="user-info-box-content-item-content">{{ userInfos.orgName }}</span>
+            </div>
+            <div class="mt10 flex-between">
+              <el-button link type="primary" @click="onChangePwd">修改密码</el-button>
+              <el-button link type="primary" @click="onLogOut">退出登录</el-button>
+            </div>
+          </div>
+        </el-popover>
 
-			</div>
-			<template #dropdown>
-				<el-dropdown-menu>
-					<el-dropdown-item command="/home"> <SvgIcon name="ele-House" /> 首页 </el-dropdown-item>
-					<el-dropdown-item divided command="setting" v-if="showSetting"> <SvgIcon name="ele-Setting" />系统设置 </el-dropdown-item>
-					<el-dropdown-item divided command="search"> <SvgIcon name="ele-Search" /> 搜索菜单 </el-dropdown-item>
-					<el-dropdown-item divided command="changePwd"> <SvgIcon name="ele-Lock" /> 修改密码 </el-dropdown-item>
-					<el-dropdown-item divided command="logOut"> <SvgIcon name="ele-SwitchButton" />退出 </el-dropdown-item>
-				</el-dropdown-menu>
-			</template>
-		</el-dropdown>
-		<Search ref="searchRef" />
+    </div>
 
 		<!-- 锁频 -->
 		<el-dialog v-model="dialogVisible" width="400px" draggable title="锁屏">
@@ -283,113 +299,101 @@ const onLayoutSetingClick = () => {
 	mittBus.emit('openSetingsDrawer');
 };
 const dutyFormRef = ref<RefType>();
-// 下拉菜单点击时
-const onHandleCommandClick = (path: string) => {
-	switch (path) {
-		case 'changePwd': // 修改密码
-			//  重置表单
-			if (dutyFormRef.value) {
-				dutyFormRef.value.resetFields();
-			}
-			showDutyDialog.value = true;
-			break;
-		case 'setting': // 设置
-			onLayoutSetingClick();
-			break;
-		case 'search': // 搜索
-			onSearchClick();
-			break;
-		case 'logOut': //退出登录
-			if (telStatusInfo.value.isDutyOn) {
-				ElMessageBox({
-					closeOnClickModal: false,
-					closeOnPressEscape: false,
-					title: '提示',
-					message: '检测到您未签出,本次退出系统将自动签出, 是否继续?',
-					showCancelButton: true,
-					confirmButtonText: '确定',
-					cancelButtonText: '取消',
-					buttonSize: 'default',
-					draggable: true,
-					type: 'warning',
-					autofocus: false,
-					cancelButtonClass: 'default-button',
-					beforeClose: (action, instance, done) => {
-						if (action === 'confirm') {
-							instance.confirmButtonLoading = true;
-							instance.confirmButtonText = '退出中';
-							setTimeout(() => {
-								done();
-								setTimeout(() => {
-									instance.confirmButtonLoading = false;
-								}, 300);
-							}, 700);
-						} else {
-							done();
-						}
-					},
-				})
-					.then(async () => {
-						VoiceInterfaceObject.LogOut();
-						// offDuty().then(() => {
-						// 断开链接
-						// signalR.stop();
-						// 重置所有状态
-						usetelStatusStore.resetState();
-						// 清除缓存/token等
-						Local.clear();
-						Session.clear();
-            Cookie.clear();
-						// 使用 reload 时，不需要调用 resetRoute() 重置路由
-						window.location.reload();
-						// });
-					})
-					.catch(() => {});
-				return;
-			}
-			ElMessageBox({
-				closeOnClickModal: false,
-				closeOnPressEscape: false,
-				title: '提示',
-				message: '此操作将退出登录, 是否继续?',
-				showCancelButton: true,
-				confirmButtonText: '确定',
-				cancelButtonText: '取消',
-				buttonSize: 'default',
-				draggable: true,
-				type: 'warning',
-				autofocus: false,
-				cancelButtonClass: 'default-button',
-				beforeClose: (action, instance, done) => {
-					if (action === 'confirm') {
-						instance.confirmButtonLoading = true;
-						instance.confirmButtonText = '退出中';
-						setTimeout(() => {
-							done();
-							setTimeout(() => {
-								instance.confirmButtonLoading = false;
-							}, 300);
-						}, 700);
-					} else {
-						done();
-					}
-				},
-			})
-				.then(async () => {
-					// 清除缓存/token等
-					Local.clear();
-					Session.clear();
+// 点击修改密码
+const onChangePwd = ()=>{
+  //  重置表单
+  if (dutyFormRef.value) {
+    dutyFormRef.value.resetFields();
+  }
+  showDutyDialog.value = true;
+}
+// 退出登录
+const onLogOut = ()=>{
+  if (telStatusInfo.value.isDutyOn) {
+    ElMessageBox({
+      closeOnClickModal: false,
+      closeOnPressEscape: false,
+      title: '提示',
+      message: '检测到您未签出,本次退出系统将自动签出, 是否继续?',
+      showCancelButton: true,
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      buttonSize: 'default',
+      draggable: true,
+      type: 'warning',
+      autofocus: false,
+      cancelButtonClass: 'default-button',
+      beforeClose: (action, instance, done) => {
+        if (action === 'confirm') {
+          instance.confirmButtonLoading = true;
+          instance.confirmButtonText = '退出中';
+          setTimeout(() => {
+            done();
+            setTimeout(() => {
+              instance.confirmButtonLoading = false;
+            }, 300);
+          }, 700);
+        } else {
+          done();
+        }
+      },
+    })
+        .then(async () => {
+          VoiceInterfaceObject.LogOut();
+          // offDuty().then(() => {
+          // 断开链接
+          // signalR.stop();
+          // 重置所有状态
+          usetelStatusStore.resetState();
+          // 清除缓存/token等
+          Local.clear();
+          Session.clear();
           Cookie.clear();
-					// 使用 reload 时，不需要调用 resetRoute() 重置路由
-					window.location.reload();
-				})
-				.catch(() => {});
-			break;
-		default: //返回首页
-			router.push('/');
-			break;
-	}
-};
+          // 使用 reload 时，不需要调用 resetRoute() 重置路由
+          window.location.reload();
+          // });
+        })
+        .catch(() => {});
+    return;
+  }
+  ElMessageBox({
+    closeOnClickModal: false,
+    closeOnPressEscape: false,
+    title: '提示',
+    message: '此操作将退出登录, 是否继续?',
+    showCancelButton: true,
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    buttonSize: 'default',
+    draggable: true,
+    type: 'warning',
+    autofocus: false,
+    cancelButtonClass: 'default-button',
+    beforeClose: (action, instance, done) => {
+      if (action === 'confirm') {
+        instance.confirmButtonLoading = true;
+        instance.confirmButtonText = '退出中';
+        setTimeout(() => {
+          done();
+          setTimeout(() => {
+            instance.confirmButtonLoading = false;
+          }, 300);
+        }, 700);
+      } else {
+        done();
+      }
+    },
+  })
+      .then(async () => {
+        // 清除缓存/token等
+        Local.clear();
+        Session.clear();
+        Cookie.clear();
+        // 使用 reload 时，不需要调用 resetRoute() 重置路由
+        window.location.reload();
+      })
+      .catch(() => {});
+}
 // 菜单搜索点击
 const onSearchClick = () => {
 	searchRef.value.openSearch();
@@ -479,14 +483,12 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .layout-navbars-breadcrumb-user {
-
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: flex-end;
 
 	&-link {
-		height: 100%;
 		white-space: nowrap;
 		text-align: center;
     flex:1;
@@ -499,6 +501,7 @@ onMounted(() => {
 			display: flex;
 			justify-content: center;
       align-items: center;
+      cursor: pointer;
       &-name{
         max-width: 150px;
         overflow: hidden;
@@ -563,3 +566,21 @@ onMounted(() => {
 	}
 }
 </style>
+<style lang="scss">
+.user-info-box{
+  &-content{
+    &-item{
+      display: flex;
+      align-content: center;
+      &-title{
+        display: inline-block;
+        width: 70px;
+        text-align: right;
+      }
+      &-content{
+        flex:1;
+      }
+    }
+  }
+}
+</style>