HY.yield.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 { reqLogin, reqOrgChoose, reqOrganizationId } from "@/api/login";

export default {
    name: "login",
    data() {
        return {
            form: {
                userName: "huyang",
                userPwd: "123456"
            },
            isShowDialog: false,
            orgList: null,
            orgSelected: null
        };
    },
    created() {},
    methods: {
        /* 登录按钮 */
        onSignIn() {
            const loading = this.$loading({
                lock: true,
                text: "登录中...",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)"
            });
            reqLogin(this.form)
                .then(res => {
                    loading.close();
                    localStorage.setItem("token", res.token);
                    this.doOrganizationChoose();
                })
                .catch(err => {
                    console.log("登录失败", err);
                    this.$message.error("登录失败:" + err);
                });
            // this.$axios.post(`http://121.37.169.186:8081/my/login?accountName=${this.form.userName}&password=${this.form.userPwd}`)
            // .then(res => {
            //     loading.close();
            //     if(res.data.code === 10000) {
            //         // localStorage.setItem("token", res.data.token);
            //         // localStorage.setItem("token", res.token);
            //         localStorage.setItem('accountName', res.data.accountName);
            //         // this.$router.replace ("/home/dashboard");
            //     } else {
            //         this.$message.error(res.data.message);
            //     }
            // })
        },
        handleSet: function() {
            if (!this.orgSelected) {
                this.$message.info("请先选择组织");
            } else this.setOrganizationId(this.orgSelected);
        },
        doOrganizationChoose() {
            this.loading = true;
            reqOrgChoose()
                .then(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);
                    }
                })
                .catch(err => {
                    console.log(err);
                    this.loading = false;
                    this.$message.error("登录失败:" + err);
                });
        },
        setOrganizationId(id, accountName) {
            if (!id) {
                this.$message.error("发生了一点不愉快的错误！");
                return;
            }
            this.loading = true;
            reqOrganizationId({ orgId: id })
                .then(res => {
                    this.isShowDialog = false;
                    //导航到 正式页面
                    // this.$router.replace({path: "/home", query: {name: accountName}});
                    this.$router.replace ("/home/dashboard");
                })
                .catch(err => {
                    if (err.errMsg) this.$message.error(err.errMsg);
                    else this.$message.error("服务器发生异常");
                })
                .finally(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% 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>