127 lines
4.0 KiB
Vue
127 lines
4.0 KiB
Vue
<template>
|
||
<div class="login-container">
|
||
<img src="@/assets/images/login/login-bg-earth.png" alt="" srcset="" />
|
||
<div class="login-title">Mars3D综合态势展示系统</div>
|
||
<div class="login-pannel">
|
||
<p class="login-pannel_text">欢迎登录！</p>
|
||
<el-form ref="loginFormRef" class="form" :model="loginForm" :rules="loginRules" size="large">
|
||
<el-form-item prop="account">
|
||
<el-input v-model="loginForm.account" placeholder="请输入账号">
|
||
<template #prefix>
|
||
<img src="@/assets/images/login/accountIcon.png" alt="" />
|
||
</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="showPassword">
|
||
<el-input
|
||
type="password"
|
||
v-model="loginForm.showPassword"
|
||
placeholder="请输入密码"
|
||
show-password
|
||
autocomplete="new-password"
|
||
>
|
||
<template #prefix>
|
||
<!-- <el-icon class="el-input__icon"><lock /></el-icon> -->
|
||
<img src="@/assets/images/login/lockIcon.png" alt="" />
|
||
</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div class="login-btn">
|
||
<el-button @click="login(loginFormRef)" type="primary" size="large"> 登录 </el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts" name="login">
|
||
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
|
||
import { useRouter } from "vue-router";
|
||
import { Login } from "@/api/interface";
|
||
import { loginApi } from "@/api/modules/login";
|
||
import { GlobalStore } from "@/stores";
|
||
import { TabsStore } from "@/stores/modules/tabs";
|
||
import { KeepAliveStore } from "@/stores/modules/keepAlive";
|
||
import { initDynamicRouter } from "@/routers/modules/dynamicRouter";
|
||
import type { ElForm } from "element-plus";
|
||
|
||
const router = useRouter();
|
||
const tabsStore = TabsStore();
|
||
const keepAlive = KeepAliveStore();
|
||
const globalStore = GlobalStore();
|
||
|
||
// 定义 formRef（校验规则）
|
||
type FormInstance = InstanceType<typeof ElForm>;
|
||
const loginFormRef = ref<FormInstance>();
|
||
const loginRules = reactive({
|
||
account: [{ required: true, message: "请输入用户名", trigger: "blur" }],
|
||
showPassword: [{ required: true, message: "请输入密码", trigger: "blur" }]
|
||
});
|
||
|
||
const loading = ref(false);
|
||
const loginForm = reactive<Login.ReqLoginForm>({ account: "", showPassword: "" });
|
||
const login = (formEl: FormInstance | undefined) => {
|
||
if (!formEl) return;
|
||
formEl.validate(async (valid, params) => {
|
||
if (!valid) return;
|
||
loading.value = true;
|
||
try {
|
||
const arr = ref(["/largeScreen", "/home", "/home", "/home"]);
|
||
// 1.执行登录接口
|
||
const { result } = await loginApi({ ...loginForm, showPassword: loginForm.showPassword });
|
||
console.log(result);
|
||
globalStore.setUserInfo(result);
|
||
globalStore.setToken(result.token);
|
||
globalStore.setAccount(result.account);
|
||
globalStore.setAccountType(result.accountType);
|
||
globalStore.setProjectDateAuth(result.projectDateAuth);
|
||
globalStore.setIsManager(result.isManager); //我已知晓
|
||
|
||
// 2.添加动态路由
|
||
// await initDynamicRouter();
|
||
// router.push(arr[result.accountType - 1]);
|
||
// 3.清空 tabs、keepAlive 保留的数据
|
||
tabsStore.closeMultipleTab();
|
||
keepAlive.setKeepAliveName();
|
||
|
||
if (result.accountType === 1) {
|
||
await initDynamicRouter();
|
||
router.push(arr.value[result.accountType - 1]);
|
||
} else {
|
||
router.push(arr.value[result.accountType - 1]);
|
||
}
|
||
// router.go(0);
|
||
// router.push(arr.value[result.accountType - 1]);
|
||
// 4.跳转到首页
|
||
|
||
// ElNotification({
|
||
// title: getTimeState(),
|
||
// message: "欢迎登录",
|
||
// type: "success",
|
||
// duration: 3000
|
||
// });
|
||
// return router.go(0);
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
});
|
||
};
|
||
onMounted(() => {
|
||
// 监听enter事件（调用登录）
|
||
document.onkeydown = (e: any) => {
|
||
e = window.event || e;
|
||
if (e.code === "Enter" || e.code === "enter" || e.code === "NumpadEnter") {
|
||
if (loading.value) return;
|
||
login(loginFormRef.value);
|
||
}
|
||
};
|
||
});
|
||
// login页面销毁时，需要去掉enter监听
|
||
onBeforeUnmount(() => {
|
||
document.onkeydown = null;
|
||
});
|
||
</script>
|
||
<style scoped lang="scss">
|
||
@import "./index.scss";
|
||
</style>
|