chore: 默认选中第一项租户 & 样式
This commit is contained in:
parent
81722fef69
commit
f6406d6321
@ -1,7 +1,7 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { VbenFormSchema } from '@vben/common-ui';
|
import type { VbenFormSchema } from '@vben/common-ui';
|
||||||
|
|
||||||
import { computed, onMounted, ref } from 'vue';
|
import { computed, onMounted, ref, useTemplateRef } from 'vue';
|
||||||
|
|
||||||
import { AuthenticationLogin, z } from '@vben/common-ui';
|
import { AuthenticationLogin, z } from '@vben/common-ui';
|
||||||
import { $t } from '@vben/locales';
|
import { $t } from '@vben/locales';
|
||||||
@ -16,6 +16,9 @@ defineOptions({ name: 'Login' });
|
|||||||
|
|
||||||
const authStore = useAuthStore();
|
const authStore = useAuthStore();
|
||||||
|
|
||||||
|
const loginFormRef =
|
||||||
|
useTemplateRef<InstanceType<typeof AuthenticationLogin>>('loginFormRef');
|
||||||
|
|
||||||
const captchaInfo = ref<CaptchaResponse>({
|
const captchaInfo = ref<CaptchaResponse>({
|
||||||
captchaEnabled: false,
|
captchaEnabled: false,
|
||||||
img: '',
|
img: '',
|
||||||
@ -38,6 +41,11 @@ const tenantInfo = ref<TenantResp>({
|
|||||||
async function loadTenant() {
|
async function loadTenant() {
|
||||||
const resp = await tenantList();
|
const resp = await tenantList();
|
||||||
tenantInfo.value = resp;
|
tenantInfo.value = resp;
|
||||||
|
// 选中第一个租户
|
||||||
|
if (resp.tenantEnabled && resp.voList.length > 0) {
|
||||||
|
const firstTenantId = resp.voList[0]!.tenantId;
|
||||||
|
loginFormRef.value?.setFieldValue('tenantId', firstTenantId);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
@ -50,34 +58,29 @@ const formSchema = computed((): VbenFormSchema[] => {
|
|||||||
{
|
{
|
||||||
component: 'VbenSelect',
|
component: 'VbenSelect',
|
||||||
componentProps: {
|
componentProps: {
|
||||||
class: 'tenant-picker',
|
class: 'bg-background h-[40px] focus:border-primary',
|
||||||
options: tenantInfo.value.voList.map((item) => ({
|
options: tenantInfo.value.voList.map((item) => ({
|
||||||
label: item.companyName,
|
label: item.companyName,
|
||||||
value: item.tenantId,
|
value: item.tenantId,
|
||||||
})),
|
})),
|
||||||
placeholder: $t('authentication.selectAccount'),
|
placeholder: $t('authentication.selectAccount'),
|
||||||
valueprop: 'tenantId',
|
|
||||||
},
|
},
|
||||||
|
defaultValue: '000000',
|
||||||
dependencies: {
|
dependencies: {
|
||||||
trigger(values, _form) {
|
if: () => tenantInfo.value.tenantEnabled,
|
||||||
console.log(values);
|
triggerFields: [],
|
||||||
},
|
|
||||||
triggerFields: [''],
|
|
||||||
},
|
},
|
||||||
fieldName: 'tenantId',
|
fieldName: 'tenantId',
|
||||||
label: $t('authentication.selectAccount'),
|
label: $t('authentication.selectAccount'),
|
||||||
rules: z
|
rules: z.string().min(1, { message: $t('authentication.selectAccount') }),
|
||||||
.string()
|
|
||||||
.min(1, { message: $t('authentication.selectAccount') })
|
|
||||||
.optional()
|
|
||||||
.default('000000'),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
component: 'VbenInput',
|
component: 'VbenInput',
|
||||||
componentProps: {
|
componentProps: {
|
||||||
class: 'login-input',
|
class: 'focus:border-primary',
|
||||||
placeholder: $t('authentication.usernameTip'),
|
placeholder: $t('authentication.usernameTip'),
|
||||||
},
|
},
|
||||||
|
defaultValue: 'admin',
|
||||||
fieldName: 'username',
|
fieldName: 'username',
|
||||||
label: $t('authentication.username'),
|
label: $t('authentication.username'),
|
||||||
rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
|
rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
|
||||||
@ -85,9 +88,10 @@ const formSchema = computed((): VbenFormSchema[] => {
|
|||||||
{
|
{
|
||||||
component: 'VbenInputPassword',
|
component: 'VbenInputPassword',
|
||||||
componentProps: {
|
componentProps: {
|
||||||
class: 'login-input',
|
class: 'focus:border-primary',
|
||||||
placeholder: $t('authentication.password'),
|
placeholder: $t('authentication.password'),
|
||||||
},
|
},
|
||||||
|
defaultValue: 'admin123',
|
||||||
fieldName: 'password',
|
fieldName: 'password',
|
||||||
label: $t('authentication.password'),
|
label: $t('authentication.password'),
|
||||||
rules: z.string().min(6, { message: $t('authentication.passwordTip') }),
|
rules: z.string().min(6, { message: $t('authentication.passwordTip') }),
|
||||||
@ -96,7 +100,7 @@ const formSchema = computed((): VbenFormSchema[] => {
|
|||||||
component: 'VbenInputCaptcha',
|
component: 'VbenInputCaptcha',
|
||||||
componentProps: {
|
componentProps: {
|
||||||
captcha: captchaInfo.value.img,
|
captcha: captchaInfo.value.img,
|
||||||
class: 'login-input',
|
class: 'focus:border-primary',
|
||||||
onCaptchaClick: loadCaptcha,
|
onCaptchaClick: loadCaptcha,
|
||||||
placeholder: $t('authentication.code'),
|
placeholder: $t('authentication.code'),
|
||||||
},
|
},
|
||||||
@ -134,7 +138,8 @@ async function handleAccountLogin(values: LoginForm) {
|
|||||||
// 处理验证码错误
|
// 处理验证码错误
|
||||||
if (error instanceof Error) {
|
if (error instanceof Error) {
|
||||||
// 刷新验证码
|
// 刷新验证码
|
||||||
// todo
|
loginFormRef.value?.setFieldValue('code', '');
|
||||||
|
await loadCaptcha();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -142,28 +147,9 @@ async function handleAccountLogin(values: LoginForm) {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<AuthenticationLogin
|
<AuthenticationLogin
|
||||||
|
ref="loginFormRef"
|
||||||
:form-schema="formSchema"
|
:form-schema="formSchema"
|
||||||
:loading="authStore.loginLoading"
|
:loading="authStore.loginLoading"
|
||||||
@submit="handleAccountLogin"
|
@submit="handleAccountLogin"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
/**
|
|
||||||
tenant-picker 跟下面的输入框样式保持一致
|
|
||||||
*/
|
|
||||||
.tenant-picker {
|
|
||||||
height: 40px;
|
|
||||||
background-color: hsl(var(--input-background));
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
@apply border-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-input {
|
|
||||||
&:focus {
|
|
||||||
@apply border-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
@ -86,6 +86,8 @@ onMounted(() => {
|
|||||||
setFieldValue('username', localUsername);
|
setFieldValue('username', localUsername);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
defineExpose({ setFieldValue });
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
Loading…
Reference in New Issue
Block a user