desktop_task_schedule/code/web/task_schedule/src/views/Login.vue

<!--
 * @Author: Kane
 * @Date: 2023-02-28 00:57:21
 * @LastEditors: Kane
 * @FilePath: /task_schedule/src/views/Login.vue
 * @Description: 
 * 登录页面，路由默认指向这个页面
 * 1、判断url中的参数，取得用户信息，根据用户的部门改变路由
 * 
 * Copyright (c) ${2022} by Kane, All Rights Reserved. 
-->
<template>
    <div class="page-wrapper">
        <div class="login-wrapper">
            <h1>登&nbsp;录</h1>
            <el-form ref="loginForm">
                <el-form-item>
                    <label class="form-label">用户名</label>
                    <el-input type="text" v-model.trim.lazy="ui.account" placeholder="请输入P13账号或P09工号"></el-input>
                </el-form-item>
                <el-form-item>
                    <label class="form-label">密码</label>
                    <el-input type="password" v-model.trim.lazy="ui.password" placeholder="请输入P13密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-button-block" @click="onLogin">
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <span>{{ ui.tips }}</span>
        </div>
    </div>
</template>

<script lang="ts">
import { reactive, onBeforeMount, } from "vue";
import { useRouter } from "vue-router";
import { loadStaffInfo, saveStaffInfo } from "@/utils/api/localStorage";
import { login } from "@/utils/account";
import { ElMessage } from "element-plus";
import { StaffInfo } from "@/data/cpicxim/StaffInfo";

export default {
    name: "LoginPage",
    setup()
    {

        const router = useRouter();

        const ui = reactive({
            account: "",
            password: "",
            tips: "",
            showNeedAccountTip: false,
            showAccountErrorTip: false,
        });

        const savedP13uid = () =>
        {
            window.localStorage.setItem("stuff_account", ui.account);
        };

        const onLogin = () =>
        {
            const info = {
                p13account: ui.account,
                password: ui.password,
            };

            login(info)
                .then((response: any) =>
                {
                    const data = response.data || { success: false, };

                    if (data.success == true)
                    {
                        //提示登录成功，并保存到localStorage，然后路由跳转
                        ElMessage({
                            message: data.message,
                            type: "success",
                            center: true,
                        });

                        const staffInfo = new StaffInfo(
                            data.staff_info.p13uid || "",
                            data.staff_info.code || "",
                            data.staff_info.name || "",
                            data.staff_info.department_code || "",
                            data.staff_info.department_name || "",
                            data.staff_info.section_office_code || "",
                            data.staff_info.p13section_office_nameuid || ""
                        );

                        saveStaffInfo(staffInfo);

                        //跳转路由
                        router.push("/desktop_archievement");
                    }
                    else
                    {
                        ElMessage({
                            message: data.message,
                            type: "error",
                            center: true,
                        });
                    }

                    console.log(data);
                })
                .catch((error: any) =>
                {
                    debugger;
                    console.log(`登录失败，返回信息：${error}`);
                });
        };

        onBeforeMount(() =>
        {
            const staffInfo = loadStaffInfo();

            //判断是否已经记录了P13账号，有则提示已登录，然后跳转路由
            if (staffInfo.P13UID != "")
            {
                ElMessage({
                    message: `已登录账号:${staffInfo.stuffName}`,
                    type: "success",
                    center: true,
                });

                //跳转路由
                router.push("/desktop_archievement");
            }
        });

        // setInterval(() =>
        // {
        //     window.location.reload();
        // }, 5000);

        return { ui, savedP13uid, onLogin, };
    },
};
</script>

<style scoped lang="scss">
.page-wrapper {
    box-sizing: border-box;
    height: calc(100vh - 10mm);
    width: calc(100vw - 10mm);
    // border: 1px solid red;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;

    span {
        font-size: 30px;
        color: red;
    }
}

.login-wrapper {
    box-sizing: border-box;
    width: 320px;
    // margin-top: 5cm auto auto auto;
    margin-top: calc(100vh * 0.075);
    padding: 10mm;
    background-color: #cac2c27f;
    backdrop-filter: blur(10px);
    border-radius: 5px;
    // backdrop-filter: ;


    h1 {
        font-family: "FZ-ZHUOHEI";
        font-size: 70px;
        font-weight: 100;
        color: #fff;
        margin: 5mm 0;
        display: block;
        text-align: center;
        text-shadow: #1d6ddc 2px 10px 2px,
            #1d6ddc 2px 0px 2px,
            #1d6ddc -2px -0px 2px,
            #1d6ddc -0px -2px 2px,
            #1d6ddc -1.4px -1.4px 2px,
            #1d6ddc 1.4px 1.4px 2px,
            #1d6ddc 1.4px -1.4px 2px,
            #1d6ddc -1.4px 1.4px 2px;

    }
}

.form-label {
    display: block;
    /* color: #fff; */
    color: #344a5fef;
    font-size: 14px;
    // border: 1px solid red;
}

.el-input {
    color: #344a5fef;
}

.el-button-block {
    width: 100%;
    margin-top: 20px;
}
</style>