FE_occupationlab_server/src/layouts/header/index.vue

<template>
    <div class="header">
        <div style="line-height: 60px">
            <img class="logo" :src="logoUrl" />
            <span class="title">{{ title }}</span>
        </div>
        <div class="action">
            <el-dropdown class="user-wrap" @command="userCommand">
                <div class="user">
                    <el-avatar :size="40" :src="avatar"></el-avatar>
                    <span class="m-l-10">{{ customerName || userName }}</span>
                </div>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-if="!customerName" command="person">个人中心</el-dropdown-item>
                    <el-dropdown-item v-else command="resetPw">修改密码</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" class="ml20" @click="logout">退出</el-button>
        </div>
        <el-dialog title="修改密码" :visible.sync="passwordVisible" :close-on-click-modal="false" :append-to-body="true" @close="resetPassword" width="30%">
            <el-form ref="passwordForm" label-width="82px">
                <el-form-item label="原密码">
                    <el-input type="password" v-model="passwordForm.password" placeholder="请输入原密码"></el-input>
                </el-form-item>
                <el-form-item label="新密码">
                    <el-input type="password" v-model="passwordForm.newPassword" placeholder="请输入新密码"></el-input>
                </el-form-item>
                <el-form-item label="确认新密码">
                    <el-input type="password" v-model="passwordForm.reNewPassword" placeholder="请确认新密码" @keyup.enter.native="submitPassword"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="passwordVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitPassword">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import util from "@/libs/util";

export default {
    data() {
        return {
            passwordVisible: false,
            passwordForm: {
                password: "",
                newPassword: "",
                reNewPassword: ""
            }
        };
    },
    computed: {
        ...mapState("user", [
            "avatar", "userName", "title", "logoUrl", "customer", "customerName", 'fromClient'
        ])
    },
    mounted() {
        this.getSystemDetail();
        this.getUserDetail();
    },
    methods: {
        ...mapActions("user", [
            "setTitle", "setLogoUrl", "setAvatar", "setUserName", 'logout'
        ]),
        getSystemDetail() { // 获取系统logo
            this.$get(this.api.logoDetail).then(res => {
                if (res.data) {
                    this.setTitle(res.data.title);
                    this.setLogoUrl(res.data.logoUrl);
                }
            }).catch(res => {
            });
        },
        getUserDetail() { // 获取用户详情
          this.$get(this.api.queryUserInfoDetails).then(res => {
            let { hrUserInfo } = res.result
            if (hrUserInfo) {
              const { userAvatars, userName } = hrUserInfo
              userAvatars && this.setAvatar(userAvatars)
              this.setUserName(userName)
            } else {
              this.$get(this.api.isClient).then(res => {
                res.customerName && this.setUserName(res.customerName)
              }).catch(res => {})
            }
          }).catch(res => {})
        },
        userCommand(command) { // 切换下拉菜单
            if (command == "person") {
                this.$router.push("/setting/person");
            } else {
                this.passwordVisible = true;
            }
        },
        resetPassword() { // 关闭修改密码
            this.passwordForm = {
                password: "",
                newPassword: "",
                reNewPassword: ""
            };
        },
        submitPassword() { // 提交修改密码
            if (!this.passwordForm.password) return util.warningMsg("请输入原密码");
            if (!this.passwordForm.newPassword) return util.warningMsg("请输入新密码");
            if (!this.passwordForm.reNewPassword) return util.warningMsg("请确认新密码");
            if (this.passwordForm.newPassword.length < 6 || this.passwordForm.reNewPassword.length < 6) return util.warningMsg("请输入6位数以上的密码");
            if (this.passwordForm.newPassword !== this.passwordForm.reNewPassword) return util.warningMsg("输入的新密码不一致，请重新确认");
            if (this.passwordForm.password === this.passwordForm.newPassword) return util.warningMsg("原密码跟新密码不能一致");
            this.$post(this.api.examinePassword, this.passwordForm).then(res => {
                util.successMsg("修改成功");
                this.passwordVisible = false;
            }).catch(err => {
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.header {
    position: relative;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #333;
    background-color: #fff;

    .logo {
        height: 50px;
        margin: 0 20px;
    }

    .title {
        font-size: 18px;
        font-weight: bold;
    }

    .action {
        display: flex;
        padding-right: 50px;
        align-items: center;

        .user {
            display: inline-flex;
            align-items: center;
            cursor: pointer;
            span {
                font-size: 12px;
            }
        }

        .el-button--text {
            margin-left: 20px;
            color: #333;
        }

        .el-divider {
            width: 2px;
            height: 15px;
            margin-left: 20px;
            background-color: #333;
        }
    }
}
</style>