Cold_online_web/src/views/layout/Topmenu.vue

<template>
    <div class="Topmenu">
        <div class="TopmenuPir">
            <div class="TopmenuPir-logo">
                <div class="TopmenuPir-logo1">
                    <img src="@/assets/img/logo2-1.png" alt="logo">
                </div>
                <div class="TopmenuPir-logo2">
                    <img src="@/assets/img/logo2-2.png" alt="logo">
                </div>
            </div>
            <div class="TopmenuPir-mai">
                <div class="TopmenuPir-mai-ul">
                    <el-popover placement="top-start" title="系统消息" trigger="hover" content="接收系统下发的新消息">
                        <div slot="reference" class="TopmenuPir-mai-ul-li" @click="SetMenu(1)">
                            <i class="el-icon-bell" style="font-size: 26px;"></i>
                        </div>
                    </el-popover>
                    <el-popover placement="top-start" title="更换主题" trigger="hover" content="更改系统整体风格,字体颜色,背景色等等">
                        <div slot="reference" class="TopmenuPir-mai-ul-li" @click="SetMenu(2)">
                            <i class="el-icon-magic-stick" style="font-size: 26px;"></i>
                        </div>
                    </el-popover>
                    <el-popover placement="top-start" title="全屏/正常模式" trigger="hover" content="切换全屏或者正常展示模式">
                        <div slot="reference" class="TopmenuPir-mai-ul-li" @click="quan"><i class="el-icon-monitor"
                                style="font-size: 26px;"></i></div>
                    </el-popover>
                    <div class="TopmenuPir-mai-ul-li">
                        <el-dropdown @command="commands">
                            <div class="el-dropdown-link dropdown-links" style="">
                                <i class="el-icon-user" style="font-size: 26px;"></i>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="a">设置</el-dropdown-item>
                                <el-dropdown-item command="b">个人信息</el-dropdown-item>
                                <el-dropdown-item command="c">修改密码</el-dropdown-item>
                                <el-dropdown-item command="d">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog title="修改密码" :visible.sync="dialogVisible" width="400px" :close-on-click-modal="false">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
                <el-form-item label="旧密码" prop="T_oldpass">
                    <el-input type="password" v-model="ruleForm.T_oldpass" show-password></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="T_pass">
                    <el-input type="password" v-model="ruleForm.T_pass" show-password></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')"">提 交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { UserUpPass,AdminUpPass } from "@/api/home.js";
export default {
    data() {
        return {
            dialogVisible:false,
            ruleForm: {
                T_pass:'',//新密码
                T_passstr: '',//明文  用户端要传，管理员端可不传
                T_oldpass: ''//旧密码
            },
            rules: {
                T_pass: [
                    { required: true, message: '请输入新密码', trigger: ['change','blur']},
                    { min: 6, max: 18, message: '新密码长度在 6到 18 位', trigger: ['change','blur'] }
                ],
                T_oldpass: [
                    { required: true, message: '请输入旧密码', trigger: ['change','blur'] },
                    { min: 6, max: 18, message: '旧密码长度在 6 到 18 位', trigger: ['change','blur'] }
                ],
            }
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                let rules = this.$store.state.userInfo.value
                if (rules==1) {//管理员
                    let initParam = {
                        T_pass:this.$md5(this.ruleForm.T_pass),
                        T_oldpass:this.$md5(this.ruleForm.T_oldpass),
                    }
                    this.resetRequest(rules,initParam)
                }else{//用户
                    let initParam = {
                        T_pass:this.$md5(this.ruleForm.T_pass),
                        T_passstr:this.ruleForm.T_pass,
                        T_oldpass:this.$md5(this.ruleForm.T_oldpass),
                    }
                    this.resetRequest(rules,initParam)
                }
            } else {
                return false;
            }
            });
        },
        async resetRequest(rules,initParam){
            const {data:result} = rules==1?await AdminUpPass(initParam): await UserUpPass(initParam)
            if(result.Code==200){
                this.$store.commit('setuserInfo', {
                    username: '',
                    password: '',
                    value:'2',
                    token:''
                })
                this.$message.success('重置密码成功')
                setTimeout(()=>this.$router.replace('/'), 1000)
            }
        },
        resetForm(formName) {
            if(this.$refs[formName])this.$refs[formName].resetFields();
        },
        SetMenu(e) {
            this.$notify.info({
                title: '错误提示',
                message: '功能正在更新中，敬请留意',
                offset: 100
            });
        },
        commands(e) {
            switch (e) {
                case 'a':
                    this.$notify.info({
                        title: '错误提示',
                        message: '功能正在更新中，敬请留意',
                        offset: 100
                    });
                    break
                case 'b':
                    this.$notify.info({
                        title: '错误提示',
                        message: '功能正在更新中，敬请留意',
                        offset: 100
                    });
                    break
                case 'c':
                    this.dialogVisible = true
                    this.resetForm('ruleForm')
                    break
                default:
                    this.$router.replace('/')
            }
        },
        quan() {//全屏
            if (window.innerHeight === window.screen.height) { // 利用屏幕分辨率和window对象的内高度来判断兼容IE
                document.exitFullscreen()
            } else {
                document.documentElement.requestFullscreen()
            }
        },
    }
}
</script>

<style lang="scss">
.Topmenu {
    background-color: #3a394e;
    height: 60px;
    color: #fff;

    .TopmenuPir {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        padding-right: 0 15px;

        .TopmenuPir-mai {
            color: #fff !important;

            .TopmenuPir-mai-ul {
                display: flex;
                align-items: center;

                .TopmenuPir-mai-ul-li {
                    margin-right: 30px;
                    cursor: pointer;

                    .dropdown-links {
                        width: 30px;
                        height: 30px;
                        background: #fff;
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        outline: none;
                    }
                }
            }
        }

        .TopmenuPir-logo {
            height: 60px;
            display: flex;
            align-items: center;

            .TopmenuPir-logo1 {
                width: 80px;
                height: 80px;
                display: flex;
                justify-content: center;
                align-items: center;

                // background: #fff;
                img {
                    width: 60%;
                    height: 60%;
                    object-fit: contain;
                }
            }

            .TopmenuPir-logo2 {
                height: 60px;
                display: flex;
                margin-left: 10px;
                align-items: center;

                img {
                    width: auto;
                    height: 100%;
                }
            }
        }
    }
}
</style>