128 lines
3.9 KiB
Vue
128 lines
3.9 KiB
Vue
<template>
|
||
<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" size="large">
|
||
<el-form-item prop="account">
|
||
<el-input v-model="loginForm.account" placeholder="用户名：admin / user">
|
||
<template #prefix>
|
||
<el-icon class="el-input__icon"><user /></el-icon>
|
||
</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="showPassword">
|
||
<el-input
|
||
type="password"
|
||
v-model="loginForm.showPassword"
|
||
placeholder="密码：123456"
|
||
show-password
|
||
autocomplete="new-password"
|
||
>
|
||
<template #prefix>
|
||
<el-icon class="el-input__icon"><lock /></el-icon>
|
||
</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div class="login-btn">
|
||
<el-button :icon="CircleClose" round @click="resetForm(loginFormRef)" size="large">重置</el-button>
|
||
<el-button :icon="UserFilled" round @click="login(loginFormRef)" size="large" type="primary" :loading="loading">
|
||
登录
|
||
</el-button>
|
||
</div>
|
||
<div class="logon">
|
||
<el-button type="info" link>企业注册</el-button>
|
||
<el-button style="margin: 0 40px" type="info" link @click="projectLogon">项目注册</el-button>
|
||
<!-- <router-link to="projectLogon">1111111</router-link> -->
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
|
||
import { useRouter } from "vue-router";
|
||
import { Login } from "@/api/interface";
|
||
import { ElNotification } from "element-plus";
|
||
import { loginApi } from "@/api/modules/login";
|
||
import { GlobalStore } from "@/stores";
|
||
import { TabsStore } from "@/stores/modules/tabs";
|
||
import { KeepAliveStore } from "@/stores/modules/keepAlive";
|
||
import { getTimeState } from "@/utils/util";
|
||
import { HOME_URL } from "@/config/config";
|
||
import { initDynamicRouter } from "@/routers/modules/dynamicRouter";
|
||
import { CircleClose, UserFilled } from "@element-plus/icons-vue";
|
||
import type { ElForm } from "element-plus";
|
||
// import md5 from "js-md5";
|
||
|
||
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: "admin", showPassword: "123456" });
|
||
const login = (formEl: FormInstance | undefined) => {
|
||
if (!formEl) return;
|
||
formEl.validate(async valid => {
|
||
if (!valid) return;
|
||
loading.value = true;
|
||
try {
|
||
// 1.执行登录接口
|
||
const { result } = await loginApi({ ...loginForm, showPassword: loginForm.showPassword });
|
||
globalStore.setToken(result.token);
|
||
|
||
// 2.添加动态路由
|
||
await initDynamicRouter();
|
||
|
||
// 3.清空 tabs、keepAlive 保留的数据
|
||
tabsStore.closeMultipleTab();
|
||
keepAlive.setKeepAliveName();
|
||
|
||
// 4.跳转到首页
|
||
router.push(HOME_URL);
|
||
ElNotification({
|
||
title: getTimeState(),
|
||
message: "欢迎登录 Geeker-Admin",
|
||
type: "success",
|
||
duration: 3000
|
||
});
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
});
|
||
};
|
||
|
||
// resetForm
|
||
const resetForm = (formEl: FormInstance | undefined) => {
|
||
if (!formEl) return;
|
||
formEl.resetFields();
|
||
};
|
||
|
||
const projectLogon = () => {
|
||
router.push("/projectlogon");
|
||
};
|
||
|
||
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>
|