adm-front/src/framework/layout/PageHeader.vue

<template>
  <div class="page-header">
    <div id="page-header-logo" class="page-logo">
      <a @click="toIndex">
        <img src="@/assets/logo.png" alt="logo" class="logo-default" />
      </a>
      <div class="menu-toggler sidebar-toggler" @click.stop="toggleSidebar">
        <span>
          <i class="el-icon-fa-bars"></i>
        </span>
      </div>
    </div>
    <div id="page-header-data-menu" class="data-menu">
      <el-select v-model="selectedProjectId" placeholder="请选择" filterable>
        <el-option-group
          v-for="group in projectGropList"
          :key="group.label"
          :label="group.label"
        >
          <el-option
            v-for="item in group.options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-option-group>
      </el-select>
    </div>
    <div id="page-header-user-menu" class="user-menu">
      <!-- <span class='el-dropdown-link' style="margin-top: 11px;">
              {{userInfo.userName}}
              <i class='el-icon-fa-user el-icon--right'></i>
          </span> -->
      <el-dropdown
        trigger="hover"
        class="user-menu-dropdown"
        @command="userMenuCommand"
      >
        <span class="el-dropdown-link">
          {{ userInfo.userName }}
          <i class="el-icon-fa-user el-icon&#45;&#45;right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-switch-button" command="logout"
            >退出登录</el-dropdown-item
          >
          <!-- <el-dropdown-item icon="el-icon-circle-plus" command="changePass"
            >修改密码</el-dropdown-item
          > -->
        </el-dropdown-menu>
      </el-dropdown>
      <ul class="header-nav">
        <li class="header-nav-set">
          <!-- <router-link to="/ready/collectsetting"><i class="el-icon-s-tools"></i></router-link> -->
          <a @click.ctrl="$router.push({ path: '/ready/collectsetting' })"
            ><i class="el-icon-s-tools"></i
          ></a>
        </li>
        <li class="header-nav-Splitscreen">
          <a href="/adm/splitScreen" target="_blank"
            ><i class="el-icon-s-platform"></i
          ></a>
        </li>
        <li class="header-nav-notification">
          <message-sever></message-sever>
        </li>
      </ul>
    </div>
    <change-pass ref="changePass"></change-pass>
  </div>
</template>
<script>
import frameworkApi from "@/api/framework";
import { mapGetters, mapMutations } from "vuex";
import getFirstLetter from "@/utils/getFirstLetter";
import MessageSever from "../components/messagesever/index";
import changePass from "../components/changepass/index";
import lStorage from "@/utils/localStorage";
import Bus from "@/utils/bus.js";
import store from "@/store";
import storage from "@/framework/utils/storage";

export default {
  name: "PageHeader",
  components: {
    MessageSever,
    changePass,
  },
  props: [],
  data() {
    return {
      selectedProjectId: null,
    };
  },
  computed: {
    ...mapGetters("layout", [
      "sidebarClosed",
      "userInfo",
      "projects",
      "projectId",
    ]),
    projectGropList() {
      const cacheInfo = lStorage.get("historyInfo")
        ? lStorage.get("historyInfo")
        : {};
      let options = [
        {
          label: "最近使用",
          options: [],
        },
      ];
      const projectHistory = cacheInfo[this.userInfo.userName] || [];
      let copyProjects = JSON.parse(JSON.stringify(this.projects));
      options[0].options = projectHistory.map((projectId) => {
        let obj = this.projects.find((project) => {
          return project.id === projectId;
        });
        let index = copyProjects.findIndex((project) => {
          return project.id === projectId;
        });
        if (index != -1) {
          copyProjects.splice(index, 1);
        }
        return obj ? obj : [];
      });

      let helpObj = {};
      copyProjects.forEach((p) => {
        const label = getFirstLetter((p.name || p.id).slice(0, 1));
        if (helpObj[label]) {
          helpObj[label].push(p);
        } else {
          helpObj[label] = [p];
        }
      });
      const arr = Object.keys(helpObj)
        .sort()
        .map((label) => {
          return {
            label: label,
            options: helpObj[label],
          };
        });
      return [...(options[0].options.length > 0 ? options : []), ...arr];
    },
  },
  created() {
    Bus.$on("initProjectId", () => {
      console.log("initProjectId", this.projects);
      this.init();
    });
    this.init();
  },
  methods: {
    ...mapMutations("layout", ["setSidebarClosed", "setprojectId"]),
    init() {
      let cacheInfo = lStorage.get("historyInfo")
        ? lStorage.get("historyInfo")
        : {};
      if (
        cacheInfo[this.userInfo.userName] &&
        cacheInfo[this.userInfo.userName][0] &&
        this.projects.some((item) => {
          return item.id == cacheInfo[this.userInfo.userName][0];
        })
      ) {
        this.selectedProjectId = cacheInfo[this.userInfo.userName][0];
      } else {
        this.selectedProjectId = this.projectId;
      }
    },
    handleSelect() {},
    toggleSidebar() {
      this.setSidebarClosed(!this.sidebarClosed);
    },
    userMenuCommand(cmd) {
      // console.log('userMenuCommand ', cmd)
      if (cmd == "logout") {
        console.log("点击登出l");
        // frameworkApi.toLogout();
        /**
         * 改为本地退出
         */
        store.commit("setSsoToken", null);
        lStorage.remove("ssoToken");

        store.commit("layout/setprojectId", null);
        lStorage.remove("projectId");

        store.commit("layout/setUserInfo", null);
        storage.remove("user_name");

        store.commit("layout/setGroupCode", null);
        lStorage.remove("group_code");

        // store.state.layout.projectId = null;
        // lStorage.remove("projectId");

        // store.state.layout.userInfo = null;
        // storage.remove("user_name");

        // store.state.layout.group_code = null;
        // lStorage.remove("group_code");

        

        store.commit("layout/setUserId", "");
        this.$router.replace({ path: "/login" });
      } else if (cmd == "changePass") {
        this.$refs.changePass.handleOpenDialog();
      }
    },
    toIndex() {
      this.$router.push("/");
    },
  },
  watch: {
    selectedProjectId(n, o) {
      this.setprojectId(n);
    },
  },
};
</script>
<style lang="scss" scoped>
.header-nav-set > a {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  padding: 16px 10px 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #2b3643;
  font-size: 24px;
  text-decoration: none;
  cursor: pointer;

  i {
    transition: all 0ms ease 0ms;
  }
}
.header-nav-Splitscreen > a {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  padding: 16px 10px 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #79869a;
  font-size: 24px;
  text-decoration: none;
  cursor: pointer;

  i {
    transition: all 0ms ease 0ms;
  }
}

.header-nav-Splitscreen > a:hover {
  text-decoration: none;
  color: #d3d8e2;
  background-color: #3f4f62;
}
</style>