spfm-market-front/src/components/p-header.vue

<template>
  <div class="p-header">
    <div class="title" @click="menuClose">
      <i v-if="this.$store.state.collapse" class="el-icon-s-fold"></i
      ><i v-else class="el-icon-s-unfold"></i>
    </div>
    <!-- <div
      class="title"
      v-for="(item, index) in routeChecked"
      :key="index"
      :style="item.rountPath == $store.state.defaultActive ? 'color:white' : ''"
      @click="change(index, item)"
    >
      <span :class="item.icon"></span>{{ item.name }}
    </div> -->
    <div class="bars">
      <div class="bars-item user-info">Hello，{{ username }}</div>

      <div class="bars-item" @click="handleHelp">
        <i class="el-icon-time"></i>
        {{ $formatDate(date, "YYYY-MM-DD") }}
      </div>
      <div class="bars-item" @click="handleCall">
        <i class="el-icon-chat-dot-round"></i>
        知识库
      </div>
      <div class="bars-item" @click="handleLogout">
        <i class="el-icon-guide"></i>
        退出
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    username: {
      required: false,
      type: String,
      default: "admin",
    },
  },
  data() {
    return {
      currentIndex: "5",
      date: new Date(),
      routeChecked: [
        {
          name: "数据视图",
          icon: "iconfont icon-icon_huabanfuben",
          rountPath: "/funcInit",
        },
        {
          name: "网格视图",
          icon: "iconfont icon-wanggeshezhi",
          rountPath: "/loginInit",
        },
        {
          name: "工作台",
          icon: "iconfont icon-gongzuotai",
          rountPath: "/excel",
        },
      ],
    };
  },
  created() {
    this.runInitDate();
    // if (!this.collapse) {
    //   this.$store.commit("setCollapse");
    // }
    //this.menuClose();
  },
  methods: {
    handleCall() {
      this.$switchTab(this, { rountPath: "/knowledgetop", name: "知识库" },'knowledgetop');
    },
    change(index, item) {
      this.currentIndex = index;
      let set = new Set(this.$store.state.tabList);
      set.add(item);
      this.$store.commit("setDefaultActive", item.rountPath);
      this.$store.commit("setTabList", Array.from(set));
    },
    initDate() {
      this.date = new Date();
    },
    runInitDate() {
      let _this = this;
      let rn = setTimeout(() => {
        _this.initDate();
        _this.runInitDate();
        clearTimeout(rn);
      }, 500);
    },
    handleLogout() {
      this.$confirm("正在退出登录,是否继续", "提示", {
        type: "warning",
      })
        .then((res) => {
          if (res === "confirm") {
              this.$store.commit("setUserInfo", undefined);
              this.$store.commit("setToken", undefined);
              this.$store.commit("setMenus", undefined);
              this.$store.commit("setTabList", []);
              this.$cookie.delete("userInfo");
              this.$cookie.delete("menus");
              this.$cookie.delete("token");
              window.sessionStorage.agileauthtoken = undefined;
              window.sessionStorage.menus = undefined;
              window.sessionStorage.userInfo = undefined;
              window.sessionStorage.childrenMenus = undefined;
              window.opener=null;
              window.open('','_self');
              window.close();
              // window.parent.close();
            //返回到登录页面
            // this.$router.push("/login");
            //   this.$http({
            //       url: "http://cas.hl.cmcc/cas/logout",
            //       method: "get",
            //       headers: {
            //           "Access-Control-Allow-Origin": "http://cas.hl.cmcc/cas/logout",
            //       },
            //   }).then((res) => {
            //       //TODO先执行退出登录
            //       this.$store.commit("setUserInfo", undefined);
            //       this.$store.commit("setToken", undefined);
            //       this.$store.commit("setMenus", undefined);
            //       this.$store.commit("setTabList", []);
            //       this.$cookie.delete("userInfo");
            //       this.$cookie.delete("menus");
            //       this.$cookie.delete("token");
            //       window.sessionStorage.agileauthtoken = undefined;
            //       window.sessionStorage.menus = undefined;
            //       window.sessionStorage.userInfo = undefined;
            //       window.sessionStorage.childrenMenus = undefined;
            //
            //       window.location.href = " http://cas.hl.cmcc/cas/login?service=http%3A%2F%2F10.230.26.15%3A8000%2Fspfm%2Fsysmgr%2FssLogin%3FsysFlag%3D0";
            //   });


          }
        })
        .catch((err) => {
          throw err;
        });
    },
    handleSetting() {},
    handleHelp() {},
    menuClose() {
      this.$store.commit("setCollapse");
      this.$emit("collapse");
    },
  },
  computed: {
    collapse() {
      return this.$store.state.collapse;
    },
  },
};
</script>

<style scoped="scoped" lang="scss">
.p-header {
  color: #fff;
  height: 100%;
  background-color: #0b82ff;

  .active {
    color: #0b82ff;
  }

  .iconfont {
    vertical-align: bottom;
    font-size: 21px;
  }

  .title {
    padding-top: 16px;
    padding-left: 15px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    float: left;
    cursor: pointer;

    span {
      font-size: 15px;
    }

    i {
      font-size: 20px;
    }
  }

  .bars {
    float: right;
    padding-top: 16px;
    padding-right: 31px;

    .bars-item {
      display: inline-block;
      margin-left: 30px;
      cursor: pointer;
      font-family: SourceHanSansCN-Normal;
      font-size: 14px;
      color: #ffffff;
      letter-spacing: 0;
    }

    .user-info {
      font-size: 18px;
    }
  }
}
</style>