From e5a36e452d866e26dbce39a7ec456d24802a003d Mon Sep 17 00:00:00 2001
From: tangxinyuan <tangxinyuan@test.com>
Date: Mon, 11 Nov 2024 11:21:57 +0800
Subject: [PATCH] =?UTF-8?q?20241111=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 code/vue/vue3/src/api/stafflogin.ts          |  20 +++
 code/vue/vue3/src/tangxinyuan/stafflogin.vue | 122 +++++++++++++++++++
 code/vue/vue3/src/util/request.ts            |  36 +++---
 3 files changed, 163 insertions(+), 15 deletions(-)
 create mode 100644 code/vue/vue3/src/api/stafflogin.ts
 create mode 100644 code/vue/vue3/src/tangxinyuan/stafflogin.vue

diff --git a/code/vue/vue3/src/api/stafflogin.ts b/code/vue/vue3/src/api/stafflogin.ts
new file mode 100644
index 000000000..ec010831d
--- /dev/null
+++ b/code/vue/vue3/src/api/stafflogin.ts
@@ -0,0 +1,20 @@
+import request from "../util/request"
+
+// 这个是使用方法封装的axios进行请求，并传递查询参数
+// 登录的接口
+export const login = (staffNo: string)=>{
+    return request({
+        url:'login',
+        method:'post',
+        params: {
+            staffNo: staffNo
+          } // 这里的 params 对象将被 axios 转换为查询字符串
+    })
+}
+// 登出的接口
+export const logout =()=>{
+    return request({
+        url:'logout',
+        method:'get'
+    })
+}
diff --git a/code/vue/vue3/src/tangxinyuan/stafflogin.vue b/code/vue/vue3/src/tangxinyuan/stafflogin.vue
new file mode 100644
index 000000000..1a96c4992
--- /dev/null
+++ b/code/vue/vue3/src/tangxinyuan/stafflogin.vue
@@ -0,0 +1,122 @@
+<template>
+    <div class="page flex-center">
+      <div class="sign-box">
+        <el-form ref="formRef" :model="form" :rules="rules" label-width="86px">
+          <h3 class="title">{{ ('login') }}</h3>
+          <!-- 账号 -->
+          <el-form-item :label="('form.username')" prop="account">
+            <el-input v-model="form.account" :placeholder="('form.usernameHolder')" prefix-icon="user"></el-input>
+          </el-form-item>
+          <!-- 密码 -->
+          <el-form-item :label="('form.password')" prop="password">
+            <el-input v-model="form.password" type="password" :placeholder="('form.passwordHolder')"
+              prefix-icon="lock"></el-input>
+          </el-form-item>
+  
+          <el-form-item label>
+            <el-button type="primary" class="w100p" :loading="loading" @click="doLogin">{{ ('login') }}</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+// 引入登录的方法
+import { login } from '@/api/stafflogin';
+import { ref } from 'vue';
+
+
+// 获取表单实例 定义响应式状态
+const formRef = ref()
+// 登录表单属性
+const form = reactive({
+  account: 'admin',
+  password: 'admin'
+})
+
+
+
+const rules = computed(() => {
+  return {
+    account: [
+      {
+        required: true,
+        message: ('form.usernameHolder'),
+        trigger: ['change', 'blur'] // 输入框内内容的改变以及失去焦点时触发
+      },
+      {
+        pattern: /^[a-zA-Z][a-zA-Z0-9_-]{3,31}$/, // 字母开头，然后组成为 字母数字_- 的内容，长度为 3-31
+        message: ('form.usernameError'),
+        trigger: ['change', 'blur']
+      }
+    ],
+    password: [
+      {
+        required: true,
+        min: 4,
+        message: ('form.passwordError'),
+        trigger: ['change', 'blur'] // 输入框内内容的改变以及失去焦点时触发
+      },
+    ]
+  }
+})
+
+// 登录时的按钮的loading效果
+const loading = ref(false)
+
+// 登录操作
+const doLogin = () => {
+  // 表单验证的方法
+  formRef.value.validate((valid) => {
+    console.log(valid);
+    if (valid) {
+      loading.value = true
+
+      // console.log(login(form));
+      login(form)
+        .then(res => {
+          // 设置登录的token
+          userStore.setToken(res.data.token)
+
+          // 请求用户信息
+          userStore.staffNo()
+
+          // 设置路由/菜单还没有加载
+          menuStore.setRouteLoaded(false)
+
+          // 去往首页
+          router.push('/')
+        }).finally(() => {
+          loading.value = false
+        })
+    }
+  })
+}
+</script>
+
+<style lang="scss">
+.page {
+  height: 100%;
+  // background: url(@/assets/bg.jpg) no-repeat;
+  background-size: cover;
+}
+
+.sign-box {
+  width: 400px;
+  background: #fff;
+  padding: 30px 50px 20px 30px;
+  border-radius: 4px;
+  box-shadow: 0 0 10px #022c44;
+}
+
+.title {
+  text-align: center;
+  font-size: 20px;
+  line-height: 30px;
+  margin-top: 0;
+  margin-bottom: 10px;
+  color: #000;
+}
+</style>
\ No newline at end of file
diff --git a/code/vue/vue3/src/util/request.ts b/code/vue/vue3/src/util/request.ts
index 04e402f6b..97c0891e1 100644
--- a/code/vue/vue3/src/util/request.ts
+++ b/code/vue/vue3/src/util/request.ts
@@ -1,23 +1,29 @@
-import axios from "axios";
-import {config} from "@vue/test-utils";
+import axios from 'axios'
+import { config } from '@vue/test-utils'
 
-const request =axios.create({
-  baseURL:'http://106.55.243.24:12709',
-  timeout:60000,
+const request = axios.create({
+  baseURL: 'http://106.55.243.24:12709',
+  timeout: 60000,
 })
 
 //请求拦截器
-request.interceptors.request.use(config =>{
-  return config
-},err =>{
-  return Promise.reject(err)
-})
+request.interceptors.request.use(
+  config => {
+    return config
+  },
+  err => {
+    return Promise.reject(err)
+  },
+)
 
 //响应拦截器
-request.interceptors.response.use(response =>{
-  return response.data
-},error => {
-  return Promise.reject(error)
-})
+request.interceptors.response.use(
+  response => {
+    return response.data
+  },
+  error => {
+    return Promise.reject(error)
+  },
+)
 
 export default request