119 lines
3.0 KiB
Vue
119 lines
3.0 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
|
|||
|
|
const emit = defineEmits<{
|
|||
|
|
(e: 'submit'): void
|
|||
|
|
}>()
|
|||
|
|
const verifyName = verify.test(
|
|||
|
|
new RegExp(/^[a-z]{1}(?=.*[a-z])[a-z\d\-]{4,18}[a-z\d]{1}$/)
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
|
|||
|
|
const { data: auditors, pending } = useAsyncData(authApi.auditors, {
|
|||
|
|
default: () => [],
|
|||
|
|
})
|
|||
|
|
const enumAuditors = computed(() => auditors.value.map(i => String(i.Id)) ?? [''])
|
|||
|
|
|
|||
|
|
const schema = computed(() => z.object({
|
|||
|
|
UserName: z.string({
|
|||
|
|
required_error: '账号不能为空'
|
|||
|
|
})
|
|||
|
|
.refine(verifyName, '名称应该以6-20位的小写字母组成，允许其中包含数字、连接符（-）')
|
|||
|
|
.refine(str => str !== 'root' && str !== 'jwanfs', '不允许起名关键字root、jwanfs'),
|
|||
|
|
Email: z.string({
|
|||
|
|
required_error: '请填写邮箱'
|
|||
|
|
}).email('邮箱格式有误'),
|
|||
|
|
Password: z.string({
|
|||
|
|
required_error: '密码不能为空'
|
|||
|
|
}),
|
|||
|
|
Confirm: z.string({
|
|||
|
|
required_error: '确认密码不能为空'
|
|||
|
|
}),
|
|||
|
|
SysUserId: z.enum(enumAuditors.value as [string],{
|
|||
|
|
required_error: '请选择审核人'
|
|||
|
|
}),
|
|||
|
|
Code: z.string({
|
|||
|
|
required_error: '验证码不能为空'
|
|||
|
|
})
|
|||
|
|
}).refine(({ Confirm, Password }) => Confirm === Password, {
|
|||
|
|
message: '两次密码输入不一致',
|
|||
|
|
path: ['Confirm']
|
|||
|
|
}))
|
|||
|
|
|
|||
|
|
const { data, refresh } = useAsyncData(authApi.captcha)
|
|||
|
|
|
|||
|
|
|
|||
|
|
const toast = useToastHandle()
|
|||
|
|
|
|||
|
|
async function onSubmit(event: ZodInfer<typeof schema.value>) {
|
|||
|
|
try {
|
|||
|
|
await authApi.register({ ...event, Uuid: data.value?.uuid ?? '' })
|
|||
|
|
emit('submit')
|
|||
|
|
} catch (err: any) {
|
|||
|
|
toast.error(err.message)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<AutoForm class="space-y-4" :schema="schema" :field-config="{
|
|||
|
|
UserName: {
|
|||
|
|
hideLabel: true,
|
|||
|
|
inputProps: {
|
|||
|
|
placeholder: '请填写账号',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
Email: {
|
|||
|
|
hideLabel: true,
|
|||
|
|
inputProps: {
|
|||
|
|
type: 'email',
|
|||
|
|
placeholder: '请填写邮箱',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
Password: {
|
|||
|
|
hideLabel: true,
|
|||
|
|
inputProps: {
|
|||
|
|
type: 'password',
|
|||
|
|
placeholder: '请填写密码',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
SysUserId: {
|
|||
|
|
loading: pending,
|
|||
|
|
options: auditors.map(item => ({ label: item.UserName, value: item.Id })),
|
|||
|
|
hideLabel: true,
|
|||
|
|
inputProps: {
|
|||
|
|
placeholder: '请选择审核人',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
Confirm: {
|
|||
|
|
hideLabel: true,
|
|||
|
|
inputProps: {
|
|||
|
|
type: 'password',
|
|||
|
|
placeholder: '请二次确认密码',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
Code: {
|
|||
|
|
hideLabel: true,
|
|||
|
|
inputProps: {
|
|||
|
|
placeholder: '请填写验证码',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}" @submit="onSubmit">
|
|||
|
|
<template #Code="slotProps">
|
|||
|
|
<div class="flex items-start gap-3">
|
|||
|
|
<AutoFormField v-bind="slotProps" />
|
|||
|
|
<Button class="w-[150px] bg-no-repeat" type="button"
|
|||
|
|
:style="{ backgroundSize: '100% 100%', backgroundImage: `url(data:image/png;base64,${data?.imgByte})` }"
|
|||
|
|
@click="refresh" />
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<template #SysUserId="slotProps">
|
|||
|
|
<AutoFormField v-bind="slotProps" />
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<Button type="submit" class="font-bold w-full">
|
|||
|
|
登录
|
|||
|
|
</Button>
|
|||
|
|
</AutoForm>
|
|||
|
|
</template>
|