epp/frontend/src/views/login.vue

<template>
    <div class="login-wrap">
        <div class="login-container">
            <div class="ms-login">
                <div class="ms-title">{{ settings.siteFullTitle }}</div>
                <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
                    <el-form-item prop="username">
                        <el-input v-model="param.username" placeholder="用户名">
                            <template #prepend>
                                <el-button :icon="User"></el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" placeholder="密码" v-model="param.password"
                            @keyup.enter="submitForm(login)">
                            <template #prepend>
                                <el-button :icon="Lock"></el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                    <div class="login-btn">
                        <el-button type="primary" @click="submitForm(login)">
                            <!-- <el-icon><UserFilled /></el-icon>-->
                            登 录&nbsp;<el-icon>
                                <Right />
                            </el-icon>
                        </el-button>
                    </div>
                </el-form>
            </div>
        </div>
        <div class="company-info" v-if="settings.companyName">
            {{ settings.companyName }}
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useTagsStore } from '../store/tags';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import { Lock, User } from '@element-plus/icons-vue';
import settings from '../utils/settings';
import * as userApi from '../api/user';

interface LoginInfo {
    username: string;
    password: string;
}

interface PrivilegeInfo {
    "id": Number,
    "roleId": Number,
    "privilegeName": string,
    "module": string
}

interface RoleInfo {
    id: Number,
    roleName: string,
    comment: any,
    privileges: Array<PrivilegeInfo>;
}

const router = useRouter();
const param = reactive<LoginInfo>({
    username: 'root',
    password: 'root'
});

const rules: FormRules = {
    username: [
        {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
        }
    ],
    password: [
        {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
        }
    ]
};

const login = ref<FormInstance>();
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate(async (valid: boolean, invalidFields: any) => {
        if (!valid) {
            // ElMessage.error('请填写用户名或密码');

            console.log("invalidFields", invalidFields);
            // 对表单中的每一个不合法输入框进行遍历
            Object.values(invalidFields).forEach((input: any) => {
                // console.log("input", input)
                // 对该不合法输入框的提示信息进行遍历
                input.forEach((element: any) => {
                    // console.log("element", element)
                    ElMessage.error({ message: element.message, grouping: true });
                });
            });
            return;
        }

        userApi.userLogin({
            username: param.username,
            password: param.password
        }).then(async (data: any) => {
            // 判断用户是否登录成功
            if (!data) return;

            console.log("login data", data, data.userInfo);

            ElMessage.success('登录成功');
            localStorage.setItem('ms_username', data.userInfo?.username);
            localStorage.setItem('ms_realname', data.userInfo?.realname);
            localStorage.setItem('ms_user_id', data.userInfo?.id);
            localStorage.setItem('ms_role_id', data.userInfo?.roleId);

            let targetRoute: any = router.currentRoute?.value?.query?.redirectTo
            if (targetRoute && !targetRoute.includes('/login')) {
                router.push(targetRoute);
            } else {
                router.push('/');
            }
        })
    });
};

const tags = useTagsStore();
tags.clearTags();
</script>

<style scoped>
.login-wrap {
    width: 100%;
    height: 100%;
}

.login-container {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

.ms-title {
    width: 100%;
    padding: 18px 24px;
    box-sizing: border-box;
    text-align: center;
    font-size: 20px;
    color: #fff;
    border-bottom: 1px solid #ddd;
}

.ms-login {
    width: min(380px, 95vw);
    padding: 5px 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

.ms-content {
    padding: 30px 30px;
}

.login-btn {
    text-align: center;
}

.login-btn button {
    width: 100%;
    height: 36px;
    margin-bottom: 10px;
}

.company-info {
    color: #7589b6;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    font-size: 13px;
    letter-spacing: 1px;
}
</style>