SZYGM1.0/src/layout/components/NavBarTop/index.vue

<template>
  <div class="appNav">
    <div class="rowBC">
      <div class="appNav-left">
        <el-avatar
          class="appNav-avatar"
          :size="25"
          :src="imgUrl"
          @error="errorHandler"
        >
          <img src="../../../assets/home/pc_err.png" />
        </el-avatar>
        <span class="appNav-name">深圳机场货运一个码系统-管理端</span>
      </div>
      <div class="appNav-right">
        <div class="help" style="float: left" @click="downFile">帮助</div>
        <el-avatar
          class="appNav-avatar"
          :size="25"
          :src="imgUrl"
          @error="errorHandler"
        >
          <img src="../../../assets/home/pc_err.png" />
        </el-avatar>
        <el-dropdown trigger="click" size="default">
          <div class="avatar-wrapper">
            <span class="name">{{ name }}</span>
            <ArrowDownBold style="width: 1.2em; height: 1.3em" />
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <router-link to="/">
                <el-dropdown-item>首页</el-dropdown-item>
              </router-link>
              <el-dropdown-item divided @click="changePassword"
                >修改密码</el-dropdown-item
              >
              <el-dropdown-item divided @click="loginOut"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <ChangePassword @logout="loginOut" />
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { ArrowDownBold } from "@element-plus/icons-vue";
import { useUserStore } from "@/store/user";
import imgUrl from "../../../assets/home/pic_logo.png";
import ChangePassword from "@/layout/components/ChangePassword/index.vue";
const userStore = useUserStore();
const { username: name } = storeToRefs(userStore);
const errorHandler = () => true;
/*
 * 退出登录
 * */
const router = useRouter();
const loginOut = async () => {
  const result: any = await userStore.logout();
  if (result.code == 0) {
    ElMessage({
      message: "退出成功",
      type: "success",
      duration: 2 * 1000,
      onClose: () => {
        userStore.resetState();
        router.push(`/login`);
        location.reload();
      },
    });
  } else {
    ElMessage.error(result.message);
  }
};
//下载
const downFile = () => {
  const a = document.createElement("a");
  // 给a标签的href属性值加上地址,注意:这里是绝对路径,不用加 点.
  a.href = "./管理端 深圳机场航空货运一个码项目-操作手册v4.0.pdf";
  // 设置下载文件文件名,这里加上.xlsx指定文件类型,pdf文件就指定.fpd即可
  a.download = "管理端 深圳机场航空货运一个码项目-操作手册v4.0.pdf";
  // 障眼法藏起来a标签
  a.style.display = "none";
  // 将a标签追加到文档对象中
  document.body.appendChild(a);
  // 模拟点击了<a>标签,会触发<a>标签的href的读取,浏览器就会自动下载了
  a.click();
  // 一次性的,用完就删除a标签
  a.remove();
};
const changePassword = () => {
  userStore.togglePasswordDialog(true);
};
</script>

<style lang="scss" scoped>
.appNav {
  height: 48px;
  line-height: 48px;
  background: #ac014d;
  padding: 0 42px 0 16px;
  &-avatar {
    margin-top: 11.5px;
  }
  &-name {
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    margin-left: 13px;
    top: -5px;
    position: relative;
  }
  .avatar-wrapper {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
    margin-top: 15px;
    .name {
      margin: 0px 10px;
      position: relative;
      top: -3px;
    }
  }
  .help {
    padding: 2px 2px;
    display: flex;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
    margin-right: 10px;
  }
}
</style>