Header.vue

<template>
  <div class="self-header">
    <div style="display: inline-block; height: 40px">
      <img src="../../assets/logo.png" alt="" style="height: 100%" />
    </div>
    <div class="self_header_label">
      <h2>国际结算系统</h2>
      <!--h2 style="margin-left: 15px;">International Settlement</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="showHomeCellSettingDialog"
              size="small"
              style="width: 100%; margin-left: 0px; margin-top: 5px"
              >首页组件</el-button
            > -->
            <el-button
              @click="showChgPwdDialog"
              size="small"
              style="width: 100%; margin-left: 0px; margin-top: 5px"
              >修改密码</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>

    <el-dialog
      custom-class="homeSetting"
      :visible="homeSettingDialog"
      title="首页小组件设置"
      width="60%"
      :before-close="handleCloseHomeSettingDialog"
    >
      <div style="padding: 0 20px">
        <div class="clear">
          <c-col :span="24" style="margin-bottom: 10px">
            选择行数：
            <c-select
              v-model="homeSetting.rows"
              :clearable="false"
              @change="updateDisplayArr"
            >
              <el-option label="1" :value="1"></el-option>
              <el-option label="2" :value="2"></el-option>
              <el-option label="3" :value="3"></el-option>
            </c-select>
          </c-col>
          <c-col :span="24" style="margin-bottom: 10px">
            选择列数：
            <c-select
              v-model="homeSetting.cols"
              :clearable="false"
              @change="updateDisplayArr"
            >
              <el-option label="1" :value="1"></el-option>
              <el-option label="2" :value="2"></el-option>
              <el-option label="3" :value="3"></el-option>
              <el-option label="4" :value="4"></el-option>
            </c-select>
          </c-col>
        </div>
        <div>
          <div class="setting-grid-row" v-for="row in getCellRows()" :key="row">
            <div
              class="setting-grid-col"
              v-for="col in getCellCols()"
              :key="col"
              :style="{ width: 100 / getCellCols() + '%', height: '50px' }"
            >
              <div class="cell-item">
                <div>
                  {{
                    homeSetting.displayArray[row - 1][col - 1].title
                      ? "标题：" +
                        homeSetting.displayArray[row - 1][col - 1].title
                      : ""
                  }}
                </div>
                <div>
                  {{
                    homeSetting.displayArray[row - 1][col - 1].description
                      ? "描述：" +
                        homeSetting.displayArray[row - 1][col - 1].description
                      : ""
                  }}
                </div>
              </div>
              <div class="cell-operate">
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link">
                    设置&nbsp;&nbsp;<i class="el-icon-edit"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="(item, idx) in $store.state.UserContext
                        .homeCellsSetting.defaultCells"
                      :key="idx"
                      @click.native="setCell(row, col, item)"
                    >
                      {{ item.title }}
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <c-button @click="cancelHomeSetting">取消</c-button>
        <c-button type="primary" @click="saveHomeSetting">保存</c-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import cPage from "../../components/c-page.vue";
import Api from "~/service/Api";
import EventService, {LOGOUT} from "~/service/EventService";
import { changeLang } from "~/service/business/lang";

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" },
        { lang: "th", shortName: "ไทย", fullName: "ภาษาไทย" },
        { lang: "vi", shortName: "Tiếng Việt", fullName: "Tiếng Việt" },
      ],
      homeSettingDialog: false,
      homeSetting: {
        rows: null,
        cols: null,
        displayArray: [],
      },
    };
  },
  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() {
      EventService.emit(LOGOUT);
      this.$store.commit("UserContext/setLogout");
      this.$router.push("/login");
      // window.location.href = "/#/login"
    },
    async handleLang(lang) {
      const data = {
        lang: lang,
      };
      let rtnmsg = await changeLang(data);
      if (rtnmsg.respCode == SUCCESS) {
        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;
    },
    showHomeCellSettingDialog() {
      this.homeSettingDialog = true;
      this.homeSetting.rows =
        this.$store.state.UserContext.homeCellsSetting.cellRows;
      this.homeSetting.cols =
        this.$store.state.UserContext.homeCellsSetting.cellCols;
      this.homeSetting.displayArray =
        this.$store.state.UserContext.homeCellsSetting.cellNames.map(
          (cellNameRows) => {
            return cellNameRows.map((cellName) => {
              return Object.assign(
                {},
                this.$store.state.UserContext.homeCellsSetting.defaultCells.find(
                  (cell) => cell.name === cellName
                )
              );
            });
          }
        );
    },
    saveHomeSetting() {
      if (!this.homeSetting.rows || !this.homeSetting.cols) {
        this.$message.warning("请选择正确的行列数！");
        return;
      }
      const cellNames = this.homeSetting.displayArray.map((row) => {
        return row.map((col) => col.name);
      });
      if (cellNames.some((row) => row.some((cellName) => !cellName))) {
        this.$message.warning("请配置全部的格子组件！");
        return;
      }
      this.$store.commit("UserContext/setHomeCellsSetting", {
        cellRows: this.homeSetting.rows,
        cellCols: this.homeSetting.cols,
        cellNames: cellNames,
      });
      this.homeSettingDialog = false;
    },
    cancelHomeSetting() {
      this.homeSettingDialog = false;
    },
    handleCloseHomeSettingDialog(done) {
      this.homeSettingDialog = false;
      done();
    },
    getCellRows() {
      return this.homeSetting.rows
        ? this.homeSetting.rows
        : this.homeSetting.cols
        ? 1
        : 0;
    },
    getCellCols() {
      return this.homeSetting.cols
        ? this.homeSetting.cols
        : this.homeSetting.rows
        ? 1
        : 0;
    },
    updateDisplayArr() {
      const rArr = [];
      for (let i = 0; i < this.getCellRows(); i++) {
        const cArr = [];
        for (let j = 0; j < this.getCellCols(); j++) {
          cArr.push({
            title: null,
            name: null,
            description: null,
          });
        }
        rArr.push(cArr);
      }
      this.homeSetting.displayArray = rArr;
    },
    setCell(row, col, item) {
      this.homeSetting.displayArray[row - 1][col - 1].title = item.title;
      this.homeSetting.displayArray[row - 1][col - 1].name = item.name;
      this.homeSetting.displayArray[row - 1][col - 1].description =
        item.description;
    },
  },
};
</script>

<style>
.header-subInstName {
  display: inline-block;
  margin-right: 12px;
  text-align: right;
  font-size: 12px;
  padding: 0px 15px 0px 0px;
  border-right: 1px solid #707070;
}
.self-header {
  height: 100%;
  /* background-color: #eeeeee; */
  /* margin-bottom: 5px; */
  /* background-image: url("../../assets/head_bg.png"); */
  /* position: relative; */
  padding: 0px 0px 0px 30px;
  /* background-size: cover; */
  background-image: linear-gradient(#ededed, #dbebfc);
  border-bottom: solid 5px #2346dd;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

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

.self_header_label {
  /* color: antiquewhite; */
  color: #1b54b8;
  /* margin-top: 10px !important; */
  /* position: relative; */
  /* top: 12.778px; */
  /* left: 10px; */
  padding: 0px 15px;
  margin-left: 15px;
  display: inline-table;
  vertical-align: top;
  font-family: "黑体";
  /* border-left: 1px solid antiquewhite; */
  border-left: 1px solid #fff;
  /* ui美化 */
  font-size: 30px;
  border-image: radial-gradient(#2244d4,transparent) 1 20;
}
.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: #707070;
  font-size: 14px;
  margin-right: 35px;
  flex: 1;
}
.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;
}
/* 首页设置框 */
.homeSetting .setting-grid-row {
  width: 100%;
  display: flex;
  border-bottom: 1px solid #ebebeb;
}
.homeSetting .setting-grid-row:nth-of-type(1) {
  border-top: 1px solid #ebebeb;
}
.homeSetting .setting-grid-col {
  display: flex;
  border-right: 1px solid #ebebeb;
}
.homeSetting .setting-grid-row .setting-grid-col:nth-of-type(1) {
  border-left: 1px solid #ebebeb;
}
.homeSetting .setting-grid-col .cell-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 15px;
}
.homeSetting .setting-grid-col .cell-operate {
  font-size: 24px;
  margin: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.homeSetting .setting-grid-col .cell-operate .el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
</style>