huimv.cloud.client/src/views/Login/Login.vue

<template>
    <div class="login">
        <div class="shade">
            <header class="header">
                <img class="logo" src="../../assets/logo.png" alt="慧牧科技LOGO" />
                慧牧科技
            </header>
            <article class="article">
                <h1>登录界面</h1>
                <el-form label-position="right" label-width="80px" :model="form">
                    <el-form-item label="账号：">
                        <el-input v-model="form.userName" placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item label="密码：">
                        <el-input v-model="form.userPwd" placeholder="请输入密码" show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSignIn">登录</el-button>
                    </el-form-item>
                </el-form>
            </article>
            <el-dialog title="请选择一个组织" :visible.sync="isShowDialog" append-to-body>
                <el-select v-model="orgSelected">
                    <el-option
                        v-for="item in orgList"
                        :key="item.id"
                        :value="item.id"
                        :label="item.orgName"
                    ></el-option>
                </el-select>
                <div slot="footer">
                    <el-button @click="isShowDialog=false">取 消</el-button>
                    <el-button type="primary" @click="handleSet">设置</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import { mapActions,mapMutations } from "vuex";
import sdk from "../../sdk/index";

export default {
    name: "login",
    data() {
        return {
            form: {
                userName: "yjj",
                userPwd: "147414"
            },
            isShowDialog: false,
            orgList: null,
            orgSelected: null
        };
    },
    created() {
        //注册一个登录失败的事件
        sdk.regErrHanlder({
            errCode: "login_failed",
            action: e => {
                if (e.errMsg) {
                    this.$message.error(e.errMsg);
                }
            }
        });
    },
    methods: {
        ...mapActions(["login", "fetch"]),
        ...mapMutations(["setLoginIp"]),
        handleSet: function() {
            if (!this.orgSelected) {
                this.$message.info("请先选择组织");
            } else this.setOrganizationId(this.orgSelected);
        },
        /* 登录按钮 */
        onSignIn() {
            this.fetch({
                api: "/core/auth/login",
                method: "POST",
                data: this.form,
                success: res => {
                    console.log("登录结果", res);
                    localStorage.setItem("token", res.token)
                    this.login(res.token)
                    this.setLoginIp(res.loginIp)
                    localStorage.setItem("loginIp", res.loginIp)
                    // 显示一个dialog 让用户选择组
                    this.doOrganizationChoose()
                },
                fail: err => {
                    console.log("登录失败", err);
                }
            });
        },
        doOrganizationChoose() {
            this.loading = true;
            this.fetch({
                api: "/core/employ-relation/under-list",
                method: "GET",
                success: res => {
                    if (res == null || res.length == 0) {
                        this.$message.info("您没有加入任何组织!");
                    } else if (res.length > 1) {
                        this.isShowDialog = true;
                        this.orgList = res;
                    } else {
                        this.setOrganizationId(res[0].id);
                    }
                },
                fail: err => {},
                complete: res => {
                    this.loading = false;
                }
            });
        },
        setOrganizationId(id) {
            if (!id) {
                this.$message.error("发生了一点不愉快的错误！");
                return;
            }
            this.loading = true;
            this.fetch({
                api: "/core/auth/choose-org",
                method: "POST",
                data: { orgId: id },
                success: res => {
                    this.isShowDialog = false;
                    //导航到 正式页面
                    this.$router.replace("/deviceType");
                },
                fail: err => {
                    if (err.errMsg) this.$message.error(err.errMsg);
                    else this.$message.error("服务器发生异常");
                },
                complete: res => {
                    this.loading = false;
                }
            });
        }
    },
    mounted() {}
};
</script>

<style lang="scss" scoped>
.login {
    width: 100%;
    height: 100%;
    background: url(../../assets/login_bg.jpg) 0 0 no-repeat;
    background-size: 100%;
    .shade {
        height: 100%;
        width: 100%;
        background-color: #8899aa44;
        display: flex;
        flex-direction: column;
        align-items: center;
        .header {
            font-size: 60px;
            color: #eee;
            margin: 180px 0 50px 0;
            display: flex;
            justify-content: center;
            align-items: center;
            .logo {
                height: 70px;
                width: 70px;
                margin-right: 20px;
            }
        }
        .article {
            width: 400px;
            background-color: #ffffff44;
            padding: 20px 60px 40px 20px;
            border-radius: 20px;
            h1 {
                font-size: 20px;
                color: #eee;
                margin-left: 25px;
            }
            /deep/ .el-form-item .el-form-item__label {
                color: #eee;
            }
        }
    }
}
</style>