<template>
|
<div class="login-form-wrapper">
|
<div class="login-form-title">{{ $t('login.form.title') }}</div>
|
<!-- <div class="login-form-sub-title">{{ $t('login.form.title') }}</div>-->
|
<div class="login-form-error-msg">{{ errorMessage }}</div>
|
<a-form
|
ref="loginForm"
|
:model="userInfo"
|
class="login-form"
|
layout="vertical"
|
@submit="handleSubmit"
|
>
|
<a-form-item
|
field="email"
|
:rules="[{ required: true, message: '请输入用户名' }]"
|
:validate-trigger="['change', 'blur']"
|
hide-label
|
>
|
<a-input v-model="userInfo.email" placeholder="请输入用户名">
|
<template #prefix>
|
<icon-user />
|
</template>
|
</a-input>
|
</a-form-item>
|
<a-form-item
|
field="password"
|
:rules="[{ required: true, message: '请输入密码' }]"
|
:validate-trigger="['change', 'blur']"
|
hide-label
|
>
|
<a-input-password
|
v-model="userInfo.password"
|
placeholder="请输入密码"
|
allow-clear
|
>
|
<template #prefix>
|
<icon-lock />
|
</template>
|
</a-input-password>
|
</a-form-item>
|
<a-space :size="16" direction="vertical">
|
<div class="login-form-password-actions">
|
<!-- <a-checkbox
|
checked="rememberPassword"
|
:model-value="loginConfig.rememberPassword"
|
@change="setRememberPassword as any"
|
>
|
{{ $t('login.form.rememberPassword') }}
|
</a-checkbox> -->
|
<!-- <a-link>{{ $t("login.form.forgetPassword") }}</a-link> -->
|
</div>
|
<a-button type="primary" html-type="submit" long :loading="loading">
|
{{ $t('login.form.login') }}
|
</a-button>
|
<div class="container">
|
没有账户？
|
<button class="register-button" @click="showRegisterModal = true">
|
<span>
|
注册
|
</span>
|
</button>
|
</div>
|
<!-- <a-button type="text" long class="login-form-register-btn">
|
{{ $t('login.form.register') }}
|
</a-button> -->
|
</a-space>
|
</a-form>
|
</div>
|
<a-modal
|
v-model:visible="showRegisterModal"
|
title="注册账户"
|
@ok="handleRegister()"
|
@cancel="showRegisterModal = false"
|
>
|
<a-form
|
ref="registerForm"
|
:model="registerInfo"
|
class="register-form"
|
layout="vertical"
|
>
|
<a-form-item field="loginName" :rules="[{ required: true, message: '请输入用户名!' }]" hide-label>
|
<a-input v-model="registerInfo.loginName" placeholder="请输入用户名">
|
</a-input>
|
</a-form-item>
|
|
<a-form-item field="email" :rules="[{ required: true, message: '请输入邮箱!' }]" hide-label>
|
<a-input v-model="registerInfo.email" placeholder="请输入邮箱">
|
</a-input>
|
</a-form-item>
|
|
<a-form-item field="userName" :rules="[{ required: true, message: '请输入姓名!' }]" hide-label>
|
<a-input v-model="registerInfo.userName" placeholder="请输入姓名">
|
</a-input>
|
</a-form-item>
|
|
<a-form-item field="phoneNumber" :rules="[{ required: true, message: '请输入电话号码!' }]" hide-label>
|
<a-input v-model="registerInfo.phoneNumber" placeholder="请输入电话号码">
|
</a-input>
|
</a-form-item>
|
|
<a-form-item field="psw" :rules="[{ required: true, message: '请输入密码!' }]" hide-label>
|
<a-input-password v-model="registerInfo.psw" placeholder="请输入密码">
|
</a-input-password>
|
</a-form-item>
|
|
<a-space direction="vertical" size="large">
|
<a-select :style="{width:'320px'}" placeholder="选择Tenant" v-model="registerInfo.selectedTenant" allow-create>
|
<a-option :value="registerInfo.loginName">{{ registerInfo.loginName }}</a-option>
|
<a-option>1</a-option>
|
<a-option>2</a-option>
|
</a-select>
|
</a-space>
|
</a-form>
|
</a-modal>
|
</template>
|
|
<script lang="ts" setup>
|
import { reactive, ref } from 'vue';
|
import { useRouter } from 'vue-router';
|
import { Message } from '@arco-design/web-vue';
|
import { ValidatedError } from '@arco-design/web-vue/es/form/interface';
|
import { useI18n } from 'vue-i18n';
|
import { useStorage } from '@vueuse/core';
|
import { useUserStore, userModelState } from '@/store';
|
import useLoading from '@/hooks/loading';
|
import type { LoginData } from '@/api/user';
|
import { rsaPsw } from '@/utils/ras';
|
import axios from 'axios';
|
|
const router = useRouter();
|
const { t } = useI18n();
|
const errorMessage = ref('');
|
const { loading, setLoading } = useLoading();
|
const userStore = useUserStore();
|
const modelStore = userModelState();
|
|
const loginConfig = useStorage('login-config', {
|
rememberPassword: true,
|
email: '', // 演示默认值
|
password: '', // demo default value
|
});
|
const userInfo = reactive({
|
email: '', // 演示默认值
|
password: '', // demo default value
|
});
|
|
const handleSubmit = async ({
|
errors,
|
values,
|
}: {
|
errors: Record<string, ValidatedError> | undefined;
|
values: Record<string, any>;
|
}) => {
|
if (loading.value) return;
|
if (!errors) {
|
setLoading(true);
|
try {
|
const rsaPassWord = rsaPsw(values.password) as string;
|
console.log(values, '登录信息');
|
let goto = await userStore.login({
|
email: values.email,
|
password: rsaPassWord,
|
} as LoginData);
|
const { redirect, ...othersQuery } = router.currentRoute.value.query;
|
router.push({
|
name: goto,
|
query: {
|
...othersQuery,
|
},
|
});
|
|
const url = window.location.origin;
|
localStorage.setItem('httpUrl', url);
|
modelStore.getHrefUrl(url);
|
Message.success(t('登录成功'));
|
const { rememberPassword } = loginConfig.value;
|
const { email, password } = values;
|
// 实际生产环境需要进行加密存储。
|
// The actual production environment requires encrypted storage.
|
loginConfig.value.email = rememberPassword ? email : '';
|
loginConfig.value.password = rememberPassword ? password : '';
|
} catch (err) {
|
errorMessage.value = (err as Error).message;
|
} finally {
|
setLoading(false);
|
}
|
}
|
};
|
const setRememberPassword = (value: boolean) => {
|
loginConfig.value.rememberPassword = value;
|
};
|
|
const showRegisterModal = ref(false);
|
const registerInfo = reactive({
|
createTime: '',
|
deptName: '',
|
email: '',
|
loginName: '',
|
nickName: '',
|
phoneNumber: '',
|
psw: '',
|
role: '',
|
status: '',
|
userId: '',
|
userName: '',
|
});
|
|
const handleRegister = async () => {
|
const user = {
|
createTime: registerInfo.createTime,
|
deptName: registerInfo.deptName,
|
email: registerInfo.email,
|
loginName: registerInfo.loginName,
|
nickName: registerInfo.nickName,
|
phoneNumber: registerInfo.phoneNumber,
|
psw: registerInfo.psw,
|
role: registerInfo.role,
|
status: registerInfo.status,
|
userId: registerInfo.userId,
|
userName: registerInfo.userName,
|
};
|
try {
|
const response = await axios.post('base/system/sign_in', { user });
|
console.log('注册成功：', response.data);
|
showRegisterModal.value = false;
|
} catch (error) {
|
console.error('注册失败：', error);
|
}
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
.login-form {
|
&-wrapper {
|
width: 320px;
|
}
|
|
&-title {
|
color: var(--color-text-1);
|
font-weight: 500;
|
font-size: 24px;
|
line-height: 32px;
|
}
|
|
&-sub-title {
|
color: var(--color-text-3);
|
font-size: 16px;
|
line-height: 24px;
|
}
|
|
&-error-msg {
|
height: 32px;
|
color: rgb(var(--red-6));
|
line-height: 32px;
|
}
|
|
&-password-actions {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
&-register-btn {
|
color: var(--color-text-3) !important;
|
}
|
}
|
.container {
|
text-align: right;
|
padding: 1px;
|
}
|
.register-button {
|
display: inline-block;
|
padding: 5px 10px;
|
font-size: 13px;
|
color: #ffffff;
|
background-color: #3573f8;
|
border: none;
|
border-radius: 3px;
|
cursor: pointer;
|
transition: background-color 0.3s;
|
}
|
.register-button:hover {
|
background-color: #63a1ef;
|
}
|
.register-form {
|
width: 100%;
|
}
|
</style>
|
