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>
            <ul class="menu-tab">
                <li
                    v-for="item in ui.tabMenu"
                    :key="item.type"
                    :class="{ 'current': ui.currentMenu === item.type }"
                    @click="onToggleMenu(item.type)"
                >
                    {{ item.label }}
                </li>
            </ul>
            <el-form ref="loginForm">
                <el-form-item>
                    <label class="form-label">用户名</label>
                    <el-input
                        v-if="ui.currentMenu === ui.tabMenu[0].type"
                        v-model.trim.lazy="ui.account"
                        type="text"
                        placeholder="请输入P13账号或P09工号"
                    />
                    <el-input
                        v-else
                        v-model.trim.lazy="ui.account"
                        type="text"
                        placeholder="请输入坐席工号"
                    />
                </el-form-item>
                <el-form-item v-show="ui.currentMenu === ui.tabMenu[0].type">
                    <label class="form-label">密码</label>
                    <el-input
                        v-model.trim.lazy="ui.password"
                        type="password"
                        placeholder="请输入P13密码"
                    />
                </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,
            tabMenu: [
                { type: "cpicxim_staff", label: "内勤", },
                { type: "tele_saler", label: "坐席", },
            ],
            currentMenu: "",
        });

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

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

            login(info)
                .then((response) =>
                {
                    // debugger;
                    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) =>
                {
                    debugger;
                    console.log(`登录失败，返回信息：${error}`);
                });
        };

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

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

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

        const onToggleMenu = (type: string) =>
        {
            ui.currentMenu = type;
        };

        // 初始化界面
        ui.currentMenu = ui.tabMenu[1].type;

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

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

    background-image: url("@/assets/img/bg/bg_01.jpg");
    background-attachment: fixed;
    background-size: contain;

    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;

    }
}

.menu-tab {
  text-align: center;
  margin-bottom: 15px;
  margin-top: 25px;

  li {
    display: inline-block;
    padding: 10px 24px;
    margin: 0 10px;
    // background-color: #fff;
    color: #1d6ddc;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;

    &.current {
      background-color: #1d6ddc;
      color: #fff;
    }
  }
}

.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>