<template>
|
<div class="login-container">
|
<el-card class="login-box">
|
<h2 class="title">用户登录</h2>
|
<el-form
|
:model="formData"
|
:rules="formRules"
|
ref="loginForm"
|
@submit.prevent="handleSubmit"
|
>
|
<el-form-item prop="username">
|
<el-input
|
v-model="formData.username"
|
placeholder="请输入用户名"
|
prefix-icon="User"
|
/>
|
</el-form-item>
|
|
<el-form-item prop="password">
|
<el-input
|
v-model="formData.password"
|
type="password"
|
placeholder="请输入密码"
|
prefix-icon="Lock"
|
show-password
|
/>
|
</el-form-item>
|
|
<el-form-item>
|
<el-button
|
type="primary"
|
native-type="submit"
|
class="submit-btn"
|
:loading="isSubmitting"
|
>
|
立即登录
|
</el-button>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { inject, reactive, ref } from "vue";
|
import { useRouter } from "vue-router";
|
import { ElMessage } from "element-plus";
|
import type { FormInstance, FormRules } from "element-plus";
|
const MG: any = inject("MG");
|
import { useUserStore } from "@/store/index";
|
|
const userStore = useUserStore();
|
|
interface LoginForm {
|
username: string;
|
password: string;
|
}
|
|
const router = useRouter();
|
const isSubmitting = ref(false);
|
const loginForm = ref<FormInstance>();
|
|
const formData = reactive<LoginForm>({
|
username: "",
|
password: "",
|
});
|
|
const formRules = reactive<FormRules<LoginForm>>({
|
username: [
|
{ required: true, message: "用户名不能为空", trigger: "blur" },
|
{ min: 4, message: "用户名不能少于4个字符", trigger: "blur" },
|
],
|
password: [
|
{ required: true, message: "密码不能为空", trigger: "blur" },
|
{ min: 6, message: "密码不能少于6个字符", trigger: "blur" },
|
],
|
});
|
|
// 获取当前登录用户
|
const fetchUserInfo = async () => {
|
const msg = await MG.dps5.GetCurrentUser();
|
return msg;
|
};
|
const handleSubmit = async () => {
|
if (!loginForm.value) return;
|
|
try {
|
await loginForm.value.validate();
|
|
isSubmitting.value = true;
|
MG.dps5
|
.LoginByLoginNameAndPassword({
|
loginName: formData.username,
|
password: formData.password,
|
platform: "WebPc",
|
appId: "1051",
|
})
|
.then(async (res) => {
|
if (res.status == "Ok" && res.token) {
|
ElMessage.success("登录成功");
|
userStore.setToken(res.token);
|
const currentUser = await fetchUserInfo();
|
console.log(currentUser, "currentUser");
|
userStore.setUserInfo({
|
...currentUser,
|
});
|
router.push("/model");
|
}
|
})
|
.catch(() => {});
|
} catch (error) {
|
ElMessage.error("用户名或密码错误");
|
} finally {
|
isSubmitting.value = false;
|
}
|
};
|
</script>
|
|
<style scoped>
|
.login-container {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
min-height: 100vh;
|
background: #f0f2f5;
|
}
|
|
.login-box {
|
width: 400px;
|
padding: 20px;
|
}
|
|
.title {
|
text-align: center;
|
color: #333;
|
margin-bottom: 30px;
|
}
|
|
.submit-btn {
|
width: 100%;
|
}
|
</style>
|
