完成登录功能

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

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2023-02-28 00:57:21
  * @LastEditors: Kane
- * @FilePath: /deskop_task_schedule/code/web/task_schedule/src/views/Login.vue
+ * @FilePath: /task_schedule/src/views/Login.vue
  * @Description: 
  * 登录页面，路由默认指向这个页面
  * 1、判断url中的参数，取得用户信息，根据用户的部门改变路由
@@ -12,7 +12,7 @@
 <template>
     <div class="page-wrapper">
         <div class="login-wrapper">
-            <h1>登录</h1>
+            <h1>请登录</h1>
             <el-form ref="loginForm">
                 <el-form-item>
                     <label class="form-label">用户名</label>
@@ -20,29 +20,27 @@
                 </el-form-item>
                 <el-form-item>
                     <label class="form-label">密码</label>
-                    <el-input type="text" v-model.trim.lazy="ui.savedP13uid" placeholder="请输入P13密码"></el-input>
+                    <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="savedP13uid">
+                    <el-button type="primary" class="el-button-block" @click="onLogin">
                         登录
                     </el-button>
                 </el-form-item>
             </el-form>
         </div>
         <div>
-            <span>{{ ui.savedP13uid }}</span>
+            <span>{{ ui.tips }}</span>
         </div>
     </div>
 </template>
 
 <script lang="ts">
-import { reactive } from "vue";
-import { service as instance } from "@/utils/api/request";
-import { getParamsFromURL } from "@/utils/api/url";
-import { loadStaffInfo, saveStuffInfo } from "@/utils/api/localStorage";
-
-
-const URL = "http://222.76.244.118:11001/admin-system/account/p13_account_check";
+import { reactive, onBeforeMount } from "vue";
+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",
@@ -50,7 +48,8 @@ export default {
     {
         const ui = reactive({
             account: "",
-            savedP13uid: "",
+            password: "",
+            tips: "",
             showNeedAccountTip: false,
             showAccountErrorTip: false,
         });
@@ -58,20 +57,81 @@ export default {
         const savedP13uid = () =>
         {
             window.localStorage.setItem("stuff_account", ui.account);
-
-            ui.savedP13uid = window.localStorage.getItem("stuff_account") || "";
-
-            alert(ui.savedP13uid);
         };
 
-        ui.savedP13uid = window.localStorage.getItem("stuff_account") || "";
+        const onLogin = () =>
+        {
+            const info = {
+                p13account: ui.account,
+                password: ui.password,
+            };
+
+            login(info)
+                .then((response) =>
+                {
+                    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);
+
+                        //跳转路由
+                    }
+                    else
+                    {
+                        ElMessage({
+                            message: data.message,
+                            type: "error",
+                            center: true,
+                        });
+                    }
+
+                    console.log(data);
+                })
+                .catch((error) =>
+                {
+                    debugger;
+                    console.log(`登录失败，返回信息：${error}`);
+                });
+        };
+
+        onBeforeMount(() =>
+        {
+            const staffInfo = loadStaffInfo();
+
+            if (staffInfo.P13UID)
+            {
+                ElMessage({
+                    message: `已登录账号:${staffInfo.stuffName}`,
+                    type: "success",
+                    center: true,
+                });
+            }
+        });
 
         // setInterval(() =>
         // {
         //     window.location.reload();
         // }, 5000);
 
-        return { ui, savedP13uid, };
+        return { ui, savedP13uid, onLogin, };
     },
 };
 </script>
@@ -81,12 +141,12 @@ export default {
     box-sizing: border-box;
     height: calc(100vh - 10mm);
     width: calc(100vw - 10mm);
-    margin: 5mm;
-    border: 1px solid red;
+    // border: 1px solid red;
     display: flex;
-    justify-content: center;
-    align-items: start;
-    padding-top: calc(100vh * 0.1);
+    flex-direction: column;
+    justify-content: start;
+    align-items: center;
+
 
     span {
         font-size: 30px;
@@ -95,9 +155,11 @@ export default {
 }
 
 .login-wrapper {
+    box-sizing: border-box;
     width: 320px;
     // margin-top: 5cm auto auto auto;
-    padding: 5mm;
+    margin-top: calc(100vh * 0.05);
+    padding: 10mm;
     background-color: #cac2c27f;
     backdrop-filter: blur(10px);
     border-radius: 5px;