Header.vue

<template>
  <div class="self-header">
    <div style="display: inline-block;margin: 5px 15px 5px 0;height: 50px;">
      <img src="../../assets/logo.png" alt="" style="height: 100%;" />
    </div>
    <div class="self_header_label">
      <h2>新一代光大银行国际结算系统</h2>
    </div>
    <div class="header-tool">
      <div class="header-subInstName">
        <!-- <marquee
          v-if="subInstName.length > 12"
          behavior="scroll"
          direction="left"
          scrollamount="3"
          >{{ this.subInstName }}</marquee
        > -->
        <span v-if="subInstName.length <= 12">{{ this.subInstName }}</span>
      </div>
      <el-popover
        class="header-tool-popover"
        placement="bottom"
        width="200"
        trigger="hover"
      >
        <div class="header-tool-userdetail">
          <div>{{ user.userName }}</div>
          <div class="long-text" :title="user.userId">
            <i class="el-icon-user" style="padding:0px 5px;"></i>
            <span style="letter-spacing:1px;">{{ user.userId }}</span>
          </div>
          <div class="long-text" :title="user.instName">
            <i class="el-icon-office-building" style="padding:0px 5px;"></i>
            {{ user.instName }}
          </div>
          <div class="long-text" :title="user.roleName">
            <i class="el-icon-collection-tag" style="padding:0px 5px;"></i>
            {{ user.roleName }}
          </div>
          <el-row class="header-tool-userdetail-action">
            <el-button @click="showChgPwdDialog" size="small" style="width:100%"
              >修改密码</el-button
            >
            <el-button
              @click="showLogoutDialog(false)"
              size="small"
              style="width:100%;margin-left:0px;margin-top:5px"
              >用户签退</el-button
            >
            <el-button
              @click="showLogoutDialog(true)"
              size="small"
              style="width:100%;margin-left:0px;margin-top:5px"
              >强制签退</el-button
            >
          </el-row>
        </div>
        <div class="header-tool-item" slot="reference">
          <div>
            <i class="el-icon-user"></i>
            <span class="header-tool-item-text">{{ user.userName }}</span>
            <i class="el-icon-arrow-down" style="font-size: 12px;"></i>
          </div>
        </div>
      </el-popover>
      <el-popover
        class="header-tool-popover"
        placement="bottom"
        width="80"
        trigger="hover"
        v-model="langSelectVisible"
      >
        <ul class="header-tool-item-list">
          <li
            v-for="(item, idx) in languageOptions"
            :key="idx"
            @click="handleLang(item.lang)"
          >
            {{ item.fullName }}
          </li>
        </ul>
        <div class="header-tool-item header-tool-item-text" slot="reference">
          <i class="el-icon-setting" style="font-size:14px;"></i>
          {{ displayLangName }}
          <i class="el-icon-arrow-down" style="font-size:12px;"></i>
        </div>
      </el-popover>
      <el-popover placement="bottom" width="450" trigger="hover">
        <div>
          <el-col :span="24">
            <el-col :span="24">
              <c-page title="公告">
                <c-table :data="noticeboardData">
                  <el-table-column
                    label="公告内容"
                    prop="noticeContent"
                  ></el-table-column>
                  <el-table-column
                    label="发布人"
                    prop="publisher"
                  ></el-table-column>
                  <el-table-column
                    label="发布日期"
                    prop="publishDate"
                  ></el-table-column>
                </c-table>
              </c-page>
            </el-col>
          </el-col>
        </div>
        <div class="header-tool-item" slot="reference">
          <i class="el-icon-bell"></i>
          <span class="header-tool-item-text" style="padding-left:7px;"
            >通知</span
          >
        </div>
      </el-popover>
      <span class="header-tool-item-text">会计日期: {{ accDate }}</span>
    </div>
  </div>
</template>

<script>
import cPage from "../../components/c-page.vue";
export default {
  components: { cPage },
  data() {
    return {
      txName: "",
      user: {
        userName: this.$store.state.UserContext.userName || "Admin",
        roleName: window.sessionStorage.roleName || "超级管理员",
        instName: window.sessionStorage.instName || "北京分行",
        userId: this.$store.state.UserContext.userId || "2124221421214",
      },
      rules: {
        username: [{ type: "string", required: true, message: "请填写用户名" }],
        password: [{ type: "string", required: true, message: "请填写密码" }],
      },
      dialogOpen: false,
      loading: false,
      count: "",
      accDate: window.sessionStorage.accDate || new Date().toLocaleDateString(),
      noticeboardData: [],
      langSelectVisible: false,
      languageOptions: [
        { lang: "zh", shortName: "中文", fullName: "中文" },
        { lang: "en", shortName: "En", fullName: "English" },
      ],
    };
  },
  computed: {
    subInstName() {
      // let subStrList = window.sessionStorage.instName.split("股份有限公司");
      // let length = subStrList.length;
      // return subStrList[length - 1];
      return "北京分行";
    },
    lang() {
      return this.$store.state.I18n.lang;
    },
    displayLangName() {
      for (let i = 0; i < this.languageOptions.length; i++) {
        const op = this.languageOptions[i];
        if (this.lang === op.lang) {
          return op.shortName;
        }
      }
      return "";
    },
  },
  methods: {
    logout() {
      this.$store.commit("UserContext/setLogout");
      this.$router.push("/login");
    },
    handleLang(lang) {
      this.$i18n.locale = lang;
      this.$store.dispatch("I18n/setLang", lang);
      this.langSelectVisible = false;
    },
    showLogoutDialog(flg) {
      // this.$refs.logoutform.show(flg);
      this.$store.dispatch("TagsView/delAllViews").then(() => this.$router.push("/login"))
    },
    showChgPwdDialog() {
      this.$refs["chgPwdForm"].dialogOpen = true;
    },
  },
};
</script>

<style>
.self-header {
  height: 100%;
  /* background-color: #eeeeee; */
  /* margin-bottom: 5px; */
  background-image: url("../../assets/head_bg.png");
}
.self-header h2 {
  margin: 0;
  padding: 0;
}
.header-subInstName {
  display: inline-block;
  margin-right: 12px;
  text-align: right;
  color: #fff;
  font-size: 12px;
  padding: 0px 15px 0px 0px;
  border-right: 1px solid antiquewhite;
}
.self-header {
  height: 100%;
  /* background-color: #eeeeee; */
  /* margin-bottom: 5px; */
  background-image: url("../../assets/head_bg.png");
  position: relative;
  padding: 0px 0px 0px 12px;
  background-size: cover;
}

.self-header h2 {
  margin: 0;
  padding: 0;
  font-size: 22px;
  display: inline;
}

.self_header_label {
  /* color: antiquewhite; */
  color: #fff;
  /* margin-top: 10px !important; */
  position: relative;
  top: 22px;
  /* left: 10px; */
  padding: 0px 15px;
  display: inline-table;
  vertical-align: top;
  font-family: "黑体";
  /* border-left: 1px solid antiquewhite; */
  border-left: 1px solid #fff;
}
.self_header_label p {
  font-family: "Times New Roman", Times, serif;
  text-align: center;
  font-style: italic;
  margin: 0;
  padding: 0;
  font-size: 12px;
  display: inline;
}
.header-tool {
  position: absolute;
  text-align: right;
  right: 35px;
  top: 22px;
  color: #fff;
  font-size: 14px;
}
.header-tool-item {
  display: inline-block;
  margin-right: 12px;
  cursor: pointer;
}
.header-tool-userdetail {
  text-align: center;
}
.header-tool-item-text {
  font-size: 12px;
}
.header-tool-item-list {
  padding: 0;
  margin: 0;
}
.header-tool-userdetail-action {
  margin-top: 10px;
}
.header-tool-item-list li {
  list-style: none;
  padding: 5px;
  text-align: center;
  color: #606266;
  cursor: pointer;
}
.header-tool-item-list li:hover {
  background: rgba(144, 146, 152, 0.3);
}
.logoutdialog .el-dialog .el-dialog__header {
  padding: 10px 20px 0px;
}
.logoutdialog .el-dialog .el-dialog__body {
  padding: 20px 30px 0px 20px;
}
.logoutdialog .el-dialog .el-dialog__footer {
  padding: 0px 20px 15px;
}
/* .header-tool-item-badge {
		margin-top: 10px;
		margin-right: 40px;
	} */
.header-tool-item-badge .el-badge__content {
  background-color: #f56c6c;
  border-radius: 7px;
  /* color: #FFF; */
  display: inline-block;
  font-size: 12px;
  height: 14px;
  line-height: 14px;
  padding: 0 6px;
  text-align: center;
  white-space: nowrap;
  border: 0px;
}
.long-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-align: left;
  font-size: 12px;
}
.long-text:hover {
  background-color: #e8f0fe;
}
</style>