|
|
@ -1,12 +1,17 @@ |
|
|
|
<script lang="ts" setup> |
|
|
|
<script lang="ts" setup> |
|
|
|
import { computed, reactive, ref, unref } from 'vue' |
|
|
|
import { computed, reactive, ref, unref } from 'vue' |
|
|
|
import { Col, Form, Input, Row } from 'ant-design-vue' |
|
|
|
import { Col, Form, Input, Row } from 'ant-design-vue' |
|
|
|
|
|
|
|
import { useAsyncState } from '@vueuse/core' |
|
|
|
|
|
|
|
import CryptoJS from 'crypto-js' |
|
|
|
|
|
|
|
import { LoadingOutlined } from '@ant-design/icons-vue' |
|
|
|
import LoginFormTitle from './LoginFormTitle.vue' |
|
|
|
import LoginFormTitle from './LoginFormTitle.vue' |
|
|
|
import { LoginStateEnum, useFormRules, useFormValid, useLoginState } from './useLogin' |
|
|
|
import { LoginStateEnum, useFormRules, useFormValid, useLoginState } from './useLogin' |
|
|
|
import { useI18n } from '@/hooks/web/useI18n' |
|
|
|
import { useI18n } from '@/hooks/web/useI18n' |
|
|
|
import { useMessage } from '@/hooks/web/useMessage' |
|
|
|
import { useMessage } from '@/hooks/web/useMessage' |
|
|
|
import { useUserStore } from '@/store/modules/user' |
|
|
|
import { useUserStore } from '@/store/modules/user' |
|
|
|
import { useDesign } from '@/hooks/web/useDesign' |
|
|
|
import { useDesign } from '@/hooks/web/useDesign' |
|
|
|
|
|
|
|
import { getLoginCaptcha } from '@/api/base/user' |
|
|
|
|
|
|
|
import type { LoginParams } from '@/api/base/user/types' |
|
|
|
|
|
|
|
|
|
|
|
const FormItem = Form.Item |
|
|
|
const FormItem = Form.Item |
|
|
|
const InputPassword = Input.Password |
|
|
|
const InputPassword = Input.Password |
|
|
@ -22,9 +27,12 @@ const { getFormRules } = useFormRules() |
|
|
|
const formRef = ref() |
|
|
|
const formRef = ref() |
|
|
|
const loading = ref(false) |
|
|
|
const loading = ref(false) |
|
|
|
|
|
|
|
|
|
|
|
const formData = reactive({ |
|
|
|
const formData = reactive<LoginParams>({ |
|
|
|
|
|
|
|
tenantId: '345618', |
|
|
|
username: 'admin', |
|
|
|
username: 'admin', |
|
|
|
password: '123456', |
|
|
|
password: '&demo8&!', |
|
|
|
|
|
|
|
captchaKey: '', |
|
|
|
|
|
|
|
captchaCode: '', |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const { validForm } = useFormValid(formRef) |
|
|
|
const { validForm } = useFormValid(formRef) |
|
|
@ -37,19 +45,21 @@ async function handleLogin() { |
|
|
|
try { |
|
|
|
try { |
|
|
|
loading.value = true |
|
|
|
loading.value = true |
|
|
|
const userInfo = await userStore.login({ |
|
|
|
const userInfo = await userStore.login({ |
|
|
|
password: data.password, |
|
|
|
...formData, |
|
|
|
username: data.username, |
|
|
|
captchaKey: captcha.value!.key, |
|
|
|
mode: 'none', // 不要默认的错误提示 |
|
|
|
password: CryptoJS.MD5(formData.password).toString(), |
|
|
|
|
|
|
|
mode: 'none', |
|
|
|
}) |
|
|
|
}) |
|
|
|
if (userInfo) { |
|
|
|
if (userInfo) { |
|
|
|
notification.success({ |
|
|
|
notification.success({ |
|
|
|
message: t('sys.login.loginSuccessTitle'), |
|
|
|
message: t('sys.login.loginSuccessTitle'), |
|
|
|
description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.user.realName}`, |
|
|
|
description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.user.real_name}`, |
|
|
|
duration: 3, |
|
|
|
duration: 3, |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
catch (error) { |
|
|
|
catch (error) { |
|
|
|
|
|
|
|
refreshCaptcha() |
|
|
|
createErrorModal({ |
|
|
|
createErrorModal({ |
|
|
|
title: t('sys.api.errorTip'), |
|
|
|
title: t('sys.api.errorTip'), |
|
|
|
content: (error as unknown as Error).message || t('sys.api.networkExceptionMsg'), |
|
|
|
content: (error as unknown as Error).message || t('sys.api.networkExceptionMsg'), |
|
|
@ -60,6 +70,8 @@ async function handleLogin() { |
|
|
|
loading.value = false |
|
|
|
loading.value = false |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const { state: captcha, execute: refreshCaptcha, isLoading: isLoadingCaptcha } = useAsyncState(getLoginCaptcha, undefined) |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
<template> |
|
|
@ -68,6 +80,9 @@ async function handleLogin() { |
|
|
|
v-show="getShow" ref="formRef" class="enter-x p-4" :model="formData" :rules="getFormRules" |
|
|
|
v-show="getShow" ref="formRef" class="enter-x p-4" :model="formData" :rules="getFormRules" |
|
|
|
@keypress.enter="handleLogin" |
|
|
|
@keypress.enter="handleLogin" |
|
|
|
> |
|
|
|
> |
|
|
|
|
|
|
|
<FormItem name="tenantId" class="enter-x"> |
|
|
|
|
|
|
|
<Input v-model:value="formData.tenantId" size="large" placeholder="租户编码" class="fix-auto-fill" /> |
|
|
|
|
|
|
|
</FormItem> |
|
|
|
<FormItem name="username" class="enter-x"> |
|
|
|
<FormItem name="username" class="enter-x"> |
|
|
|
<Input |
|
|
|
<Input |
|
|
|
v-model:value="formData.username" size="large" :placeholder="t('sys.login.userName')" |
|
|
|
v-model:value="formData.username" size="large" :placeholder="t('sys.login.userName')" |
|
|
@ -83,6 +98,15 @@ async function handleLogin() { |
|
|
|
class="fix-auto-fill" |
|
|
|
class="fix-auto-fill" |
|
|
|
/> |
|
|
|
/> |
|
|
|
</FormItem> |
|
|
|
</FormItem> |
|
|
|
|
|
|
|
<FormItem> |
|
|
|
|
|
|
|
<div flex="~ justify-between items-center gap-12px"> |
|
|
|
|
|
|
|
<Input v-model:value="formData.captchaCode" size="large" placeholder="验证码" class="fix-auto-fill w-0 flex-1 min-w-auto!" /> |
|
|
|
|
|
|
|
<div w="100px" text="center"> |
|
|
|
|
|
|
|
<LoadingOutlined v-if="isLoadingCaptcha" /> |
|
|
|
|
|
|
|
<img v-else w-full :src="captcha?.image" @click="refreshCaptcha()"> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</FormItem> |
|
|
|
|
|
|
|
|
|
|
|
<Row class="enter-x"> |
|
|
|
<Row class="enter-x"> |
|
|
|
<Col :span="12"> |
|
|
|
<Col :span="12"> |
|
|
|