docking-vue/src/layout/header/index.vue

<template>
  <div class="header">
    <div class="logo">
      <!--      <img-->
      <!--        src="/src/assets/images/public/logo1.png"-->
      <!--        alt=""-->
      <!--        width="134"-->
      <!--        height="28"-->
      <!--      />-->
      {{ logoValue.title }}
    </div>
    <div class="breadcrumb">
      <layout-breadcrumb v-if="route.meta.isBreadcrumb !== false" />
    </div>
    <div class="right">
      <div class="user">
<!--        <span class="pl-20">姓名：{{ userInfo.name }}</span>-->
      </div>
      <div class="menu ml-20 mr-20">
        <el-dropdown
          trigger="click"
          placement="bottom-end"
          @command="fnMenuDropdownCommand"
        >
          <div class="more">
            更多导航栏
            <icon-down
              theme="filled"
              size="16"
              fill="#a2c2d3"
              :stroke-width="3"
            />
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                v-for="(item, index) in menuList"
                :key="index"
                :command="item.model"
                :style="{
                  color:
                    item.model !== model
                      ? 'var(--el-text-color-regular)'
                      : '#79bbff',
                }"
                @click="fnMenuDropdownMenu(item)"
              >
                {{ item.title }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div class="user_dropdown">
        <el-dropdown
          trigger="click"
          placement="bottom-end"
          @command="fnUserDropdownCommand"
        >
          <div class="user_info">
            <el-avatar shape="circle" :size="30" fit="fill" :src="tx" />
            <span>{{ userInfo.name }}</span>
            <icon-down
              theme="filled"
              size="16"
              fill="#a2c2d3"
              :stroke-width="3"
            />
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="modifyPassword">
                修改密码
              </el-dropdown-item>
              <el-dropdown-item command="signOut">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <change-password
      v-model:visible="passwordDialogVisible"
      @submit="fnSignOut"
    />
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useMenuStore } from "@/pinia/menu.js";
import { useUserStore } from "@/pinia/user.js";
import { useNavStore } from "@/pinia/nav.js";
import { logout } from "@/request/api.js";
import LayoutBreadcrumb from "@/layout/breadcrumb/index.vue";
import tx from "@/assets/images/public/tx.png";
import ChangePassword from "./components/change_password.vue";

defineOptions({
  name: "LayoutHeader",
});
const route = useRoute();
const router = useRouter();
const menuStore = useMenuStore();
const userStore = useUserStore();
const navStore = useNavStore();
const menuList = navStore.getNavList;
const model = computed(() => menuStore.getModel);
const userInfo = userStore.getUserInfo;
const logoValue = ref({
  title: "",
});
const passwordDialogVisible = ref(false);
const fnUserDropdownCommand = async (command) => {
  if (command === "signOut") {
    await fnSignOut();
  }
  if (command === "modifyPassword") {
    passwordDialogVisible.value = true;
  }
};
const fnMenuDropdownCommand = (command) => {
  if (command === "jg_visualization") {
    router.push({ path: "/bigScreen" });
    return;
  }
  if (command === "jg_map") {
    // window.open(
    //   `${import.meta.env.VITE_FORMAL_JUMP_MAP_URL}?userId=${userInfo.userId}`
    // );
    router.push({ path: "/map" });
    return;
  }
  if (command === "jg_double_prevention")
    router.push({ path: "/double_prevention_page" });
  else if (command === "jg_related_parties")
    router.push({ path: "/stakeholder_page" });
  else router.push({ path: "/index" });
  menuStore.setModel(command);
};
const fnSignOut = async () => {
  await logout();
  userStore.$reset();
  await router.replace("/login");
};
const fnMenuDropdownMenu = (command) => {
  logoValue.value.title = command.title;
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
  padding-right: 20px;
  background-color: #fff;

  .logo {
    width: 210px;
    height: 50px;
    background-color: #2b2f3a;
    color: #ffffff;
    text-align: center;
    line-height: 60px;
    margin-right: 20px;
  }

  .right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .menu {
      cursor: pointer;

      .more {
        display: flex;
        align-items: center;
      }
    }

    .user_dropdown {
      margin-top: 5px;
      cursor: pointer;

      .el-avatar {
        margin-right: 5px;
      }

      .user_info {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>