easydo-chengfa/src/layout/components/userbar.vue

<template>
	<div class="user-bar">
		<el-dropdown class="panel-item" trigger="click" @command="handleUser">
			<div class="user-avatar">
				<label>{{ userName }}</label>
				<el-icon class="el-icon--right"><el-icon-caret-bottom /></el-icon>
			</div>
			<template #dropdown>
				<el-dropdown-menu>
					<el-dropdown-item command="updatePassword" icon="el-icon-lock">修改密码</el-dropdown-item>
					<el-dropdown-item divided command="outLogin" icon="sc-icon-logout">退出登录</el-dropdown-item>
				</el-dropdown-menu>
			</template>
		</el-dropdown>
	</div>
	
	<UpdatePassword v-if="showPassword" @closed="showPassword = false" />
</template>

<script>
	import { defineAsyncComponent } from "vue"

	export default {
		components: {
			UpdatePassword: defineAsyncComponent(() => import("./updatePwd"))
		},

		data() {
			return {
				userName: this.$TOOL.data.get("USER_INFO") && this.$TOOL.data.get("USER_INFO").nickName || "",
				showPassword: false
			}
		},

		methods: {
			// 个人信息
			handleUser(command) {
				if (command == "updatePassword") this.showPassword = true
				if (command == "outLogin"){
					this.$confirm("确认是否退出当前用户？","提示", {
						type: "warning",
						confirmButtonText: "退出"
					}).then(() => {
						this.$TOOL.cookie.remove("TOKEN");
						this.$TOOL.data.remove("USER_INFO");
						this.$TOOL.data.remove("OA_USER_INFO");
			            this.$TOOL.data.remove("APPLY_SQL");
						this.$router.replace({ path: "/login" });
					}).catch(() => {});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.user-bar {
  display: flex;
  align-items: center;
  height: 100%;

  .user-avatar {
    cursor: pointer;
    height: 48px;
    display: flex;
    align-items: center;

    label {
      cursor: pointer;
      display: inline-block;
      line-height: 48px;
      font-size: 14px;
    }

    i {
      font-size: 16px;
    }
  }
}
</style>