easydo-mes-web/src/views/login/index.vue

<template>
	<div :style="{ backgroundImage: `url(${backgroundImage})` }" class="login-bg">
        <div class="login-top">
            <div class="login-top__header">
                <div class="logo"><img :alt="$CONFIG.APP_NAME" :src="require('/public/img/logo.png')"></div>
                <label>{{ $CONFIG.APP_NAME }}</label>
            </div>
            
            <div class="login-config">
                <el-button type="info" :icon="config.dark ? 'el-icon-sunny' : 'el-icon-moon'" circle @click="config.dark = !config.dark"></el-button>
            </div>
        </div>

        <div class="login-form">
            <el-form ref="loginForm" :model="form" :rules="rules" label-width="0" @keyup.enter="login">
				<div class="login-form__title">{{ $t("login.formTitle") }}</div>
                <el-form-item prop="user">
                    <el-input v-model="form.user" prefix-icon="el-icon-user" :placeholder="$t('login.userPlaceholder')"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="form.password" prefix-icon="el-icon-lock" show-password :placeholder="$t('login.PWPlaceholder')"></el-input>
                </el-form-item>
                <el-form-item class="login-form__code-item" prop="code">
					<el-input v-model="form.code" prefix-icon="sc-icon-valid-code" :placeholder="$t('login.codePlaceholder')"></el-input>
					<div class="code-image" @click="getCode">
						<el-image :src="codeUrl">
							<template #placeholder>
								<div class="sc-upload__img-slot">Loading...</div>
							</template>
						</el-image>
					</div>
				</el-form-item>
                <el-form-item>
        			<el-checkbox v-model="form.rememberMe" :label="$t('login.rememberMe')"></el-checkbox>
				</el-form-item>

                <el-form-item>
                    <el-button style="width: 100%;" :loading="islogin" type="primary" size="large" round auto-insert-space @click="login">{{ $t('login.signIn') }}</el-button>
                </el-form-item>
            </el-form>
        </div>
	</div>
</template>

<script>
import XEUtils from "xe-utils";
import { VxeUI } from "vxe-table";

export default {
    data() {
        return {
            backgroundImage: require("/public/img/background.png"),
            config: {
                dark: this.$TOOL.data.get("APP_DARK") || false
            },

            islogin: false,
            codeUrl: "",
            form: {
                user: "easydoadm",
                password: "_adm202404Easy$",
                rememberMe: false,
                code: null,
                uuid: null
            },
            rules: {
                user: [{ required: true, message: this.$t("login.userError") }],
                password: [{ required: true, message: this.$t("login.PWError") }],
                code: [{ required: true, message: this.$t("login.codeError") }]
            }
        }
    },

    watch: {
        "config.dark"(val) {
            if (val) {
                document.documentElement.classList.add("dark");
                this.$TOOL.data.set("APP_DARK", val);
                VxeUI.setTheme("dark");
            } else {
                document.documentElement.classList.remove("dark");
                this.$TOOL.data.remove("APP_DARK");
                VxeUI.setTheme("light");
            }
        }
    },

    created() {
        this.$TOOL.cookie.remove("MES_TOKEN");
        this.$TOOL.data.remove("USER_INFO");
        this.$TOOL.data.remove("MENU");
        
        this.$store.commit("clearViewTags");
        this.$store.commit("clearKeepLive");
        this.$store.commit("clearIframeList");
        this.getCode();
    },

    methods: {
        getCode() {
            this.$API.auth.codeImg().then(res => {
                this.codeUrl = res.img;
                this.form.uuid = res.uuid;
            }).catch(() => {
                this.codeUrl = "";
                this.form.code = null;
                this.form.uuid = null;
            });
        },

        login() {
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    this.islogin = true;
                    this.$API.auth.token(this.form).then(res => {
                        this.islogin = false;
                        this.$TOOL.cookie.set("MES_TOKEN", res.token, { expires: this.form.rememberMe ? 24 * 60 * 60 : 2 * 60 * 60 });
                        this.$TOOL.data.set("USER_INFO", res.user.user);
                        this.$router.replace({ path: XEUtils.get(this.$route, "redirectedFrom.fullPath", "/") });
                    }).catch(() => {
                        this.islogin = false;
                        this.getCode();
                    });
                } else {
                    return false;
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.login-bg {width: 100%;height: 100%;background-size: 100% 100%;}
.login-top {height: 60px;padding: 10px 5px 0;background: var(--el-bg-color);}
.login-top__header {display: flex;align-items: center;width: 1200px;margin: auto;}
.login-top__header .logo {display: flex;justify-content: center;align-items: center;width: 64px;height: 50px;margin-left: 90px;}
.login-top__header .logo img {width: 35px;margin-right: 2px;}
.login-top__header label {line-height: 50px;font-size: 24px;font-weight: bold;}
.login-config {position: absolute;top: 15px;right: 20px;}

.login-form {position: relative;height: calc(100% - 60px);}
.login-form .el-form {position: absolute;left: calc(56% - 220px);top: calc(25% - 45px);width: 400px;background: var(--el-bg-color);padding: 25px 25px 5px;border-radius: 6px;}
.login-form__title {position: relative;margin-bottom: 3px;padding-left: 14px;line-height: 30px;font-size: 16px;font-weight: bold;color: #636db7;}
.login-form__title::before {content: "";position: absolute;left: 0;top: 6px;width: 4px;height: 18px;background: #636db7;}
.login-form .el-form .el-input {height: 38px;}
.login-form .el-form .el-input :deep(.el-input__wrapper) {font-size: 13px;}
.login-form__code-item :deep(.el-form-item__content) {justify-content: space-between;}
.login-form__code-item .el-input {width: 63%;}
.login-form__code-item .code-image {width: 33%;height: 42px;}
.login-form__code-item .el-image {cursor: pointer;width: 100%;height: 100%;}
.sc-upload__img-slot {background: #e8f0fe;border-radius: var(--el-border-radius-base);text-align: center;line-height: 38px;font-size: 12px;color: var(--el-text-color-placeholder);}
</style>