| | |
| | | <script setup lang="ts"> |
| | | import { getCodeImg, register, getTenantList } from '@/api/login'; |
| | | import { RegisterForm, TenantVO } from '@/api/types'; |
| | | import { FormRules } from 'element-plus'; |
| | | import { to } from 'await-to-js'; |
| | | |
| | | const router = useRouter(); |
| | | |
| | | const registerForm = ref<RegisterForm>({ |
| | | tenantId: "", |
| | | username: "", |
| | | password: "", |
| | | confirmPassword: "", |
| | | code: "", |
| | | uuid: "", |
| | | userType: "sys_user" |
| | | tenantId: "", |
| | | username: "", |
| | | password: "", |
| | | confirmPassword: "", |
| | | code: "", |
| | | uuid: "", |
| | | userType: "sys_user" |
| | | }); |
| | | |
| | | // 租户开关 |
| | |
| | | |
| | | |
| | | const equalToPassword = (rule: any, value: string, callback: any) => { |
| | | if (registerForm.value.password !== value) { |
| | | callback(new Error("两次输入的密码不一致")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | if (registerForm.value.password !== value) { |
| | | callback(new Error("两次输入的密码不一致")); |
| | | } else { |
| | | callback(); |
| | | } |
| | | }; |
| | | |
| | | const registerRules: FormRules = { |
| | | tenantId: [ |
| | | { required: true, trigger: "blur", message: "请输入您的租户编号" } |
| | | ], |
| | | username: [ |
| | | { required: true, trigger: "blur", message: "请输入您的账号" }, |
| | | { min: 2, max: 20, message: "用户账号长度必须介于 2 和 20 之间", trigger: "blur" } |
| | | ], |
| | | password: [ |
| | | { required: true, trigger: "blur", message: "请输入您的密码" }, |
| | | { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" } |
| | | ], |
| | | confirmPassword: [ |
| | | { required: true, trigger: "blur", message: "请再次输入您的密码" }, |
| | | { required: true, validator: equalToPassword, trigger: "blur" } |
| | | ], |
| | | code: [{ required: true, trigger: "change", message: "请输入验证码" }] |
| | | const registerRules: ElFormRules = { |
| | | tenantId: [ |
| | | { required: true, trigger: "blur", message: "请输入您的租户编号" } |
| | | ], |
| | | username: [ |
| | | { required: true, trigger: "blur", message: "请输入您的账号" }, |
| | | { min: 2, max: 20, message: "用户账号长度必须介于 2 和 20 之间", trigger: "blur" } |
| | | ], |
| | | password: [ |
| | | { required: true, trigger: "blur", message: "请输入您的密码" }, |
| | | { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" } |
| | | ], |
| | | confirmPassword: [ |
| | | { required: true, trigger: "blur", message: "请再次输入您的密码" }, |
| | | { required: true, validator: equalToPassword, trigger: "blur" } |
| | | ], |
| | | code: [{ required: true, trigger: "change", message: "请输入验证码" }] |
| | | }; |
| | | const codeUrl = ref(""); |
| | | const loading = ref(false); |
| | |
| | | const tenantList = ref<TenantVO[]>([]); |
| | | |
| | | const handleRegister = () => { |
| | | registerRef.value.validate(async (valid: boolean) => { |
| | | if (valid) { |
| | | loading.value = true; |
| | | const [err] = await to(register(registerForm.value)); |
| | | if (!err) { |
| | | const username = registerForm.value.username; |
| | | await ElMessageBox.alert("<font color='red'>恭喜你,您的账号 " + username + " 注册成功!</font>", "系统提示", { |
| | | dangerouslyUseHTMLString: true, |
| | | type: "success", |
| | | }); |
| | | await router.push("/login"); |
| | | } else { |
| | | loading.value = false; |
| | | if (captchaEnabled) { |
| | | getCode(); |
| | | } |
| | | } |
| | | registerRef.value.validate(async (valid: boolean) => { |
| | | if (valid) { |
| | | loading.value = true; |
| | | const [err] = await to(register(registerForm.value)); |
| | | if (!err) { |
| | | const username = registerForm.value.username; |
| | | await ElMessageBox.alert("<font color='red'>恭喜你,您的账号 " + username + " 注册成功!</font>", "系统提示", { |
| | | dangerouslyUseHTMLString: true, |
| | | type: "success", |
| | | }); |
| | | await router.push("/login"); |
| | | } else { |
| | | loading.value = false; |
| | | if (captchaEnabled) { |
| | | getCode(); |
| | | } |
| | | }); |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | |
| | | const getCode = async () => { |
| | | const { data } = await getCodeImg(); |
| | | captchaEnabled.value = data.captchaEnabled === undefined ? true : data.captchaEnabled; |
| | | if (captchaEnabled.value) { |
| | | codeUrl.value = "data:image/gif;base64," + data.img; |
| | | registerForm.value.uuid = data.uuid; |
| | | } |
| | | const { data } = await getCodeImg(); |
| | | captchaEnabled.value = data.captchaEnabled === undefined ? true : data.captchaEnabled; |
| | | if (captchaEnabled.value) { |
| | | codeUrl.value = "data:image/gif;base64," + data.img; |
| | | registerForm.value.uuid = data.uuid; |
| | | } |
| | | } |
| | | |
| | | const initTenantList = async () => { |
| | | const { data } = await getTenantList(); |
| | | tenantEnabled.value = data.tenantEnabled === undefined ? true : data.tenantEnabled; |
| | | if (tenantEnabled.value) { |
| | | tenantList.value = data.voList; |
| | | if (tenantList.value != null && tenantList.value.length !== 0) { |
| | | registerForm.value.tenantId = tenantList.value[0].tenantId; |
| | | } |
| | | const { data } = await getTenantList(); |
| | | tenantEnabled.value = data.tenantEnabled === undefined ? true : data.tenantEnabled; |
| | | if (tenantEnabled.value) { |
| | | tenantList.value = data.voList; |
| | | if (tenantList.value != null && tenantList.value.length !== 0) { |
| | | registerForm.value.tenantId = tenantList.value[0].tenantId; |
| | | } |
| | | } |
| | | } |
| | | |
| | | onMounted(() => { |
| | | getCode(); |
| | | initTenantList(); |
| | | getCode(); |
| | | initTenantList(); |
| | | }) |
| | | </script> |
| | | |