merchant/src/pages/index.vue

<template>
<el-container>
    <el-header>
        <el-row type="flex" style="height:100%;" justify="space-between" align="middle">
            <div>航空工业集团快递智能柜管理程序</div>
            <div>
                <el-dropdown @command="onUserEdit">
                    <span class="el-dropdown-link">
                        <i class="el-icon-user" style="margin-right: 10px"></i>管理员
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="logout" icon="el-icon-caret-left">退出登录</el-dropdown-item>
                        <el-dropdown-item command="editPwd" icon="el-icon-edit">修改密码</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-row>
    </el-header>
    <el-container style="height: 100%; border: 1px solid #eee">
        <el-aside width="250px">
            <el-menu router class="el-menu" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :default-active="curPath">
                <el-menu-item index="express" route="express">
                    <i class="el-icon-menu"></i>
                    <span slot="title">柜体控制</span>
                </el-menu-item>
                <el-menu-item index="order" route="order">
                    <i class="el-icon-s-order"></i>
                    <span slot="title">订单管理</span>
                </el-menu-item>
                <el-menu-item index="log" route="log">
                    <i class="el-icon-document"></i>
                    <span slot="title">日志管理</span>
                </el-menu-item>
                <el-menu-item index="message" route="message">
                    <i class="el-icon-message"></i>
                    <span slot="title">消息通知</span>
                </el-menu-item>
                <el-menu-item index="view" route="view">
                    <i class="el-icon-s-platform"></i>
                    <span slot="title">操作记录</span>
                </el-menu-item>
                <el-menu-item index="status" route="status">
                    <i class="el-icon-user"></i>
                    <span slot="title">运营人员管理</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-main class="el-menu">
            <router-view />
        </el-main>
        <el-dialog title="修改密码" :visible.sync="editVisible" width="50%" @closed="onCloseEditDialog">
            <el-form :model="editForm" :rules="editRules" ref="editForm" label-width="120px" class="demo-ruleForm">
                <el-form-item label="密码" prop="pwd">
                    <el-input v-model="editForm.pwd" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="rePwd">
                    <el-input v-model="editForm.rePwd" type="password"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="onCloseEditDialog">取 消</el-button>
                <el-button type="primary" @click="onEditSubmit('editForm')">确认修改</el-button>
            </span>
        </el-dialog>
    </el-container>
</el-container>
</template>

<script>
import {
    loginOut,
    editPwd
} from "@/api";
export default {
    created() {
        this.curPath = this.$route.name;
    },
    data() {
        return {
            curPath: "",
            editVisible: false,
            editForm: {
                pwd: "",
                rePwd: "",
            },
            editRules: {
                pwd: [{
                    required: true,
                    message: "请输入登录密码",
                    trigger: "blur",
                }, ],
                rePwd: [{
                    required: true,
                    validator: this.validateRePwd2,
                    trigger: "blur",
                }, ],
            },
        };
    },
    methods: {
        onCloseEditDialog() {
            this.editForm = {};
            this.editVisible = false;
            this.editPwdId = "";
            this.$refs.editForm.resetFields();
        },
        validateRePwd2(rule, value, callback) {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.editForm.pwd) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        },
        onUserEdit(command) {
            if (command == "logout") {
                this.$confirm("确认退出该账号?", "退出", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                    .then(() => {
                        this.onLoginOut();
                    })
                    .catch(() => {
                        return false;
                    });
            } else if (command == "editPwd") {
                this.editVisible = true;
            }
        },
        onLoginOut() {
            loginOut().then((res) => {
                if (res && res.msg == "ok") {
                    this.$router.replace({
                        path: "/login",
                    });
                }
            });
        },
        onEditSubmit(formName) {
            const _self = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    editPwd({
                        password: _self.editForm.pwd,
                        repassword: _self.editForm.rePwd,
                    }).then((res) => {
                        console.log(res);
                        if (res && res.msg == "ok") {
                            this.$message({
                                message: "修改成功",
                                type: "success",
                                center: true,
                                duration: 1000,
                                onClose: () => {
                                    _self.onCloseEditDialog();
                                },
                            });
                        }
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
    },
};
</script>

<style scoped>
.el-menu {
    height: calc(100vh - 62px);
}

.el-dropdown-link {
    color: #409eff;
}
</style>