HY.butcher.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);
                });
        },
        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;
            })
        },
        setOrganizationId(id){
            if (!id) {
                this.$message.error("发生了一点不愉快的错误！");
                return;
            }
            this.loading = true;
            reqOrganizationId({orgId: id}).then(res => {
                this.isShowDialog = false;
                    //导航到 正式页面
                    console.log(999999)
                    this.$router.push({
                        path: "/home",
                        query: {
                            // target: "定点屠宰智能管控"
                            target: "产品制作智能监控"
                            // target: "鲜肉储运智能管控"
                        }
                    });
            }).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%;
    .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>