header.vue

<template>
	<div class="index-header">
		<el-header class="poins-el-header">
			<div style="display:flex">
				<div style="display:flex">
          <!-- <div class="logo" style="padding-left: 30px;">
            <img style="width: 42px;height: 24px" :src="require('~/assets/icons/logo/cmn_logo-circle.svg')" alt="国际结算系统">
          </div> -->
          <div class="topic">
            <div class="self_header_label" style="margin-top: 2px;"><h2>{{$t('home.新晨国际结算系统')}}</h2> <p>&nbsp;&nbsp;&nbsp;version 3.1</p></div>
          </div>

        </div>
				<!-- <div>
					<span class="line">|</span>
				</div> -->
			</div>
			<div class="header_right">
				<!-- <span class="el-dropdown">登录时间：{{header.date}}</span> -->
				<!-- 消息提示 -->
				<Notification ref="notification" />
				<el-dropdown @command="changeOrgs">
					<span class="el-dropdown-link">
						{{header.curOrg.name}}
						<i class="el-icon-caret-bottom el-icon--right">
						</i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<!--dropItem,2-->
						<el-dropdown-item v-for="item in header.orgList" :key="item.id" :command="item.id">
							{{item.name}}
						</el-dropdown-item>
						<!--dropItem,2-->
					</el-dropdown-menu>
				</el-dropdown>
				<el-dropdown @command="changeRoles">
								<span class="el-dropdown-link">
									{{header.curRole.name}}
									<i class="el-icon-caret-bottom el-icon--right">
									</i>
								</span>
								<el-dropdown-menu slot="dropdown">
									<!--dropItem,1-->
									<el-dropdown-item v-for="item in header.roleList" :key="item.id" :command="item.id">
										{{item.name}}
									</el-dropdown-item>
									<!--dropItem,1-->
								</el-dropdown-menu>
							</el-dropdown>
				<el-dropdown ref="personDropdown" @command="logoutTo">
					<span class="el-dropdown-link">
						<i class="el-icon-user" style="font-size: 16px;"></i>
						{{header.username}}
						<i class="el-icon-caret-bottom el-icon--right">
						</i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item  divided command="setPassWord" v-if="showModifyPass">
							修改密码
						</el-dropdown-item>
						<!--dropItem,9-->
						<!--dropItem,3-->
						<el-dropdown-item divided class="skin-dropitem" command="changeskin">
							切换皮肤
							<div class="skin-btns">
								<div>
									<!--按钮,1-->
									<el-button size="mini" circle @click.native="changeSkin('purple')">
									</el-button>
									<!--按钮,1-->
									<!--按钮,2-->
									<el-button size="mini" circle @click.native="changeSkin('purple')">
									</el-button>
									<!--按钮,2-->
								</div>
							</div>
						</el-dropdown-item>
						<!--dropItem,3-->
						<!--dropItem,4-->
						<el-dropdown-item divided command="logout">
							退出登录
						</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<!--下拉菜单,1-->
				<!-- <el-dropdown @command="changeRoles">
					<span class="el-dropdown-link">
						{{header.curRole.name}}
						<i class="el-icon-caret-bottom el-icon--right">
						</i>
					</span>
					<el-dropdown-menu slot="dropdown">
					
						<el-dropdown-item v-for="item in header.roleList" :key="item.id" :command="item.id">
							{{item.name}}
						</el-dropdown-item>
						
					</el-dropdown-menu>
				</el-dropdown> -->
				<!--下拉菜单,1-->

				<!--下拉菜单,2-->
				<!-- <el-dropdown @command="changeOrgs">
					<span class="el-dropdown-link">
						{{header.curOrg.name}}
						<i class="el-icon-caret-bottom el-icon--right">
						</i>
					</span>
					<el-dropdown-menu slot="dropdown">
						
						<el-dropdown-item v-for="item in header.orgList" :key="item.id" :command="item.id">
							{{item.name}}
						</el-dropdown-item>
						
					</el-dropdown-menu>
				</el-dropdown> -->
				<!--下拉菜单,2-->
				<!--<div class="user_pic">
										<img src="../assets/img/pic_user.jpg">
								</div>-->

			</div>
		</el-header>
		<!--对话框,1-->
		<el-dialog :visible.sync="openPassWord" title="密码修改" v-dialogDrag :modal-append-to-body="true" :lock-scroll="true" :show-close="true" :close-on-click-modal="true" :close-on-press-escape="true" width="40%" @closed="closeForm">
			<el-form ref="userForm" :model="user" :rules="userRules" label-width="6em">
				<el-form-item label="新密码" prop="logPass">
					<el-input type="password" autocomplete="off" v-model="user.logPass"></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="confirmPass">
					<el-input type="password" autocomplete="off" v-model="user.confirmPass"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeForm">关闭</el-button>
				<el-button type="primary" @click="doSubmit">提交</el-button>
			</span>
		</el-dialog>
		<!--对话框,1-->
		<el-dialog :visible.sync="openSignInOut" title="签到/签退" v-dialogDrag :modal-append-to-body="true" :lock-scroll="true" :show-close="true" :close-on-click-modal="true" :close-on-press-escape="true" width="40%" @closed="closeFormSign">
			<c-col :span="24">
				<el-button @click="SignIn">签到</el-button>
				<el-button @click="SignOut">签退</el-button>
			</c-col>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeFormSign">关闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script >
// 消息提示
import Api from "~/service/Api";
import Notification from "./Notification";
import * as poinMessage from "@/util/isc-common/messageManage.js";
import {
  Header,
  DropdownMenu,
  DropdownItem,
  Dropdown,
  Button
} from "element-ui";
import { mapMutations, mapActions } from "vuex";
import { setTimeout } from "timers";
import trancode from "~/page/tranCode.js";
const publicPath = require("@/config/isc-publicPath.js");

export default {
  props: {
    header: {
      type: Object
    },
    user: {
      type: Object
    }
    //  isUsrCfg:'',
  },
  mixins: [trancode],
  data() {
    return {
      isUsrCfg: false,
      publicPath: publicPath,
      openPassWord: false,
      showModifyPass: true,
      openSignInOut: false,
      logout: {
        fileName: "loginverify.json",
        basePath: "{{basePath}}",
        method: "get",
        scheme: "{{schemes}}",
        host: "{{host}}",
        consume: "0",
        produce: "0",
        uri: "/login/logout"
      },
      saveUserDetail: {
        fileName: "users.json",
        basePath: "{{basePath}}",
        method: "post",
        scheme: "{{schemes}}",
        host: "{{host}}",
        consume: "0",
        produce: "0",
        uri: "/users/userrest"
      },
      changeOrg: {
        fileName: "loginverify.json",
        basePath: "{{basePath}}",
        method: "get",
        scheme: "{{schemes}}",
        host: "{{host}}",
        consume: "0",
        produce: "0",
        uri: "/login/changeOrg/{orgId}"
      },
      changeRole: {
        fileName: "loginverify.json",
        basePath: "{{basePath}}",
        method: "get",
        scheme: "{{schemes}}",
        host: "{{host}}",
        consume: "0",
        produce: "0",
        uri: "/login/changeRole/{roleId}"
      },
      userRules: {
        logPass: [{ required: true, message: "请输入密码", trigger: "blur" }],
        confirmPass: [
          { required: true, validator: this.validatePass2, trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    // 初始化获取未读消息数
    this.$refs.notification.getData();
    // //获取柜员任务分配器配置
    // this.getTskUsr();
  },
  components: {
    "el-header": Header,
    "el-dropdown-menu": DropdownMenu,
    "el-dropdown-item": DropdownItem,
    "el-dropdown": Dropdown,
    "el-button": Button,
    Notification
  },
  methods: {
    poin_initManage(messageKey, callback, execBefore) {
      messageKey.vue = this;
      poinMessage.messageManage(messageKey, callback, execBefore);
    },
    validatePass2(rule, value, callback) {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.user.logPass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    },
    doSubmit() {
      //提交密码修改
      var $this = this;
      this.$refs.userForm.validate(valid => {
        if (valid) {
          this.poin_initManage(
            { id: "saveUserDetail" },
            function aftersave(response, responseData) {
              if (response && response.ok) {
                $this.$message({
                  message: "密码修改成功！",
                  center: true,
                  type: "success"
                });
                //刷新列表
                $this.openPassWord = false;
              } else {
                $this.$message({
                  message: "修改密码失败！",
                  center: true,
                  type: "error"
                });
              }
            },
            messageObj => {
              messageObj.setLoading(true);
              //后台要接收数字类型
              messageObj.setData({ details: this.user });
            }
          );
        } else {
          return false;
        }
      });
    },
    closeForm() {
      //关闭弹出框
      this.$refs.userForm.resetFields();
      this.user.logPass = "";
      this.user.confirmPass = "";
      this.openPassWord = false;
    },
    closeFormSign() {
      this.openSignInOut = false;
    },
    changeOrgs(param) {
      this.$emit("changeOrgs", param);
    },
    changeRoles(param) {
      this.$emit("changeRoles", param);
    },
    SignIn() {
      let param = {
        extkey: this.user.logName,
        isLogin: "N",
        branch: this.user.workorg
      };
      this.$emit("SignIn", param);
    },
    SignOut() {
      let param = {
        extkey: this.user.logName,
        branch: this.user.workorg
      };
      this.$emit("SignOut", param);
    },
    //获取任务分配器中柜员配置
    getTskUsr() {
      setTimeout(() => {
        let usr = this.user;
        console.log("user1:", usr);
        console.log("user2:", usr.logName);
        let param = {
          extkey: usr.logName
        };
        Api.post("/public/taskdist/user/queryTaskUser", param).then(ress => {
          if (ress.respCode == SUCCESS) {
            // console.log("extkey:",res.data.extkey)
            if (ress.data) {
              this.isUsrCfg = true;
            }
            console.log("isUsrCfg:", this.isUsrCfg);
          }
        });
      }, 800);
    },
    logoutTo(param) {
      //退出登录
      if ("logout" == param) {
				let isColseTags = this.$store.state.rulebpmn.tagsArry.some((item) => {
					return this.getTransactionCode().includes(item.name)
				})
				// let isHaveTags = this.$store.state.rulebpmn.tagsArry.some((item)=>{
				// return this.getExCode().indexOf(item.name.toUpperCase()) < 0
				// })
				//判断是否有未关闭的页签
				if(this.$store.state.rulebpmn.tagsArry.length>1 && isColseTags){
					this.$alert('当前账户有未关闭的业务，请先关闭页签', '提示', {
          confirmButtonText: '确定'
					})
					return
				}
        // this.poin_initManage(
        //   { id: "logout" },
        //   (response, responseData, messageObj) => {
        //     if (response && response.ok) {
        //       // 删除session
        //       sessionStorage.clear();
        //       if (JSON.parse(responseData).responseText != "iam") {
        //         // 非IAM登陆
        //         // 跳转到登陆页
        //         this.$router.replace("/login");
        //       } else {
        //         window.opener = "";
        //         window.open("", "_self");
        //         window.close();
        //       }
        //     }
        //   },
        //   messageObj => {
        //     messageObj.responseType = "text/html";
        //   }
        // );
        sessionStorage.clear();
        this.$router.replace("/login");
      } else if ("setPassWord" == param) {
        //修改密码
        this.openPassWord = true;
      }
      // else if("signInOut" == param){
      //   //签到/签退
      //   this.openSignInOut = true;
      // }
    },
    ...mapActions([
      "changeSkin",
      "goRefreshRoute",
      "setMenuCollapse",
      "setUserName"
    ])
  }
};
</script>
 <style  scoped lang="less">
@header-height: 60px;
.header {
  display: flex;
}
.poins-el-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 0px;

  .topic {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    margin-left: 10px;
    border-left: 1px solid hsla(0, 0%, 100%, 0.27);
    padding-left: 20px;

    .top {
      font-size: 16px;
      height: 22px;
      width: 160px;
      color: #ffffff;
      line-height: 22px;
      font-weight: 500px;
      letter-spacing: 1.5px;
    }
    .meduim {
      width: 1px;
      height: 26px;
      border: 1px solid #ffffff;
    }

    .down {
      font-size: 7px;
      height: 9px;
      width: 160px;
      color: #ffffff;
      line-height: 9px;
    }
  }

  .header_right {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-dropdown {
      margin-right: 30px;
      font-size: 14px;
			color: #ffffff;

      &:last-child {
        margin-right: 0;
      }

      &::hover {
        cursor: pointer;
      }
    }
    .user_pic {
      display: inline-block;
      overflow: hidden;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      vertical-align: middle;
      margin-right: 20px;

      img {
        width: 100%;
      }
    }
  }

  .el-dropdown-selfdefine {
    cursor: pointer;
  }
  .logo img {
    height: @header-height - 1;
    vertical-align: bottom;
  }

  .self_header_label{
    /* color: antiquewhite; */
    color: #fff;
    position: relative;
    display: inline-table;
    vertical-align: top;
    font-family: "KaiTi";
    //border-left: 1px solid antiquewhite;
    h2 {
      margin: 0;
      padding: 0;
      font-size: 18px;
      display: inline;
    }
    p {
      font-family: "Times New Roman", Times, serif;
      text-align: center;
      font-style: italic;
      margin: 0;
      padding: 0;
      font-size: 14px;
      display: inline;
    }
  }
}
</style>