From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/Login/components/RegisterForm.vue | 288 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 288 insertions(+), 0 deletions(-)
diff --git a/src/views/Login/components/RegisterForm.vue b/src/views/Login/components/RegisterForm.vue
new file mode 100644
index 0000000..514dd0d
--- /dev/null
+++ b/src/views/Login/components/RegisterForm.vue
@@ -0,0 +1,288 @@
+<template>
+ <el-form
+ v-show="getShow"
+ ref="formLogin"
+ :model="registerData.registerForm"
+ :rules="registerRules"
+ class="login-form"
+ label-position="top"
+ label-width="120px"
+ size="large"
+ >
+ <el-row class="mx-[-10px]">
+ <el-col :span="24" class="px-10px">
+ <el-form-item>
+ <LoginFormTitle class="w-full" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="24" class="px-10px">
+ <el-form-item v-if="registerData.tenantEnable === 'true'" prop="tenantName">
+ <el-input
+ v-model="registerData.registerForm.tenantName"
+ :placeholder="t('login.tenantname')"
+ :prefix-icon="iconHouse"
+ link
+ type="primary"
+ size="large"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="24" class="px-10px">
+ <el-form-item prop="username">
+ <el-input
+ v-model="registerData.registerForm.username"
+ :placeholder="t('login.username')"
+ size="large"
+ :prefix-icon="iconAvatar"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="24" class="px-10px">
+ <el-form-item prop="nickname">
+ <el-input
+ v-model="registerData.registerForm.nickname"
+ placeholder="鏄电О"
+ size="large"
+ :prefix-icon="iconAvatar"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="24" class="px-10px">
+ <el-form-item prop="password">
+ <el-input
+ v-model="registerData.registerForm.password"
+ type="password"
+ auto-complete="off"
+ :placeholder="t('login.password')"
+ size="large"
+ :prefix-icon="iconLock"
+ show-password
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="24" class="px-10px">
+ <el-form-item prop="confirmPassword">
+ <el-input
+ v-model="registerData.registerForm.confirmPassword"
+ type="password"
+ size="large"
+ auto-complete="off"
+ :placeholder="t('login.checkPassword')"
+ :prefix-icon="iconLock"
+ show-password
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="24" class="px-10px">
+ <el-form-item>
+ <XButton
+ :loading="loginLoading"
+ :title="t('login.register')"
+ class="w-full"
+ type="primary"
+ @click="getCode()"
+ />
+ </el-form-item>
+ </el-col>
+ <Verify
+ v-if="registerData.captchaEnable === 'true'"
+ ref="verify"
+ :captchaType="captchaType"
+ :imgSize="{ width: '400px', height: '200px' }"
+ mode="pop"
+ @success="handleRegister"
+ />
+ </el-row>
+ <XButton :title="t('login.hasUser')" class="w-full" @click="handleBackLogin()" />
+ </el-form>
+</template>
+<script lang="ts" setup>
+import { ElLoading } from 'element-plus'
+import LoginFormTitle from './LoginFormTitle.vue'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+import { useIcon } from '@/hooks/web/useIcon'
+import * as authUtil from '@/utils/auth'
+import { usePermissionStore } from '@/store/modules/permission'
+import * as LoginApi from '@/api/login'
+import { LoginStateEnum, useLoginState, useFormValid } from './useLogin'
+
+defineOptions({ name: 'RegisterForm' })
+
+const { t } = useI18n()
+const iconHouse = useIcon({ icon: 'ep:house' })
+const iconAvatar = useIcon({ icon: 'ep:avatar' })
+const iconLock = useIcon({ icon: 'ep:lock' })
+const formLogin = ref()
+const {validForm} = useFormValid(formLogin)
+const { handleBackLogin, getLoginState } = useLoginState()
+const { currentRoute, push } = useRouter()
+const permissionStore = usePermissionStore()
+const redirect = ref<string>('')
+const loginLoading = ref(false)
+const verify = ref()
+const captchaType = ref('blockPuzzle') // blockPuzzle 婊戝潡 clickWord 鐐瑰嚮鏂囧瓧 pictureWord 鏂囧瓧楠岃瘉鐮�
+
+const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER)
+
+const equalToPassword = (_rule, value, callback) => {
+ if (registerData.registerForm.password !== value) {
+ callback(new Error('涓ゆ杈撳叆鐨勫瘑鐮佷笉涓�鑷�'))
+ } else {
+ callback()
+ }
+}
+
+const registerRules = {
+ tenantName: [
+ { required: true, trigger: 'blur', message: '璇疯緭鍏ユ偍鎵�灞炵殑绉熸埛' },
+ { min: 2, max: 20, message: '绉熸埛璐﹀彿闀垮害蹇呴』浠嬩簬 2 鍜� 20 涔嬮棿', trigger: 'blur' }
+ ],
+ username: [
+ { required: true, trigger: 'blur', message: '璇疯緭鍏ユ偍鐨勮处鍙�' },
+ { min: 4, max: 30, message: '鐢ㄦ埛璐﹀彿闀垮害蹇呴』浠嬩簬 4 鍜� 30 涔嬮棿', trigger: 'blur' }
+ ],
+ nickname: [
+ { required: true, trigger: 'blur', message: '璇疯緭鍏ユ偍鐨勬樀绉�' },
+ { min: 0, max: 30, message: '鏄电О闀垮害蹇呴』浠嬩簬 0 鍜� 30 涔嬮棿', trigger: 'blur' }
+ ],
+ password: [
+ { required: true, trigger: 'blur', message: '璇疯緭鍏ユ偍鐨勫瘑鐮�' },
+ { min: 5, max: 20, message: '鐢ㄦ埛瀵嗙爜闀垮害蹇呴』浠嬩簬 5 鍜� 20 涔嬮棿', trigger: 'blur' },
+ { pattern: /^[^<>"'|\\]+$/, message: '涓嶈兘鍖呭惈闈炴硶瀛楃锛�< > " \' \\\ |', trigger: 'blur' }
+ ],
+ confirmPassword: [
+ { required: true, trigger: 'blur', message: '璇峰啀娆¤緭鍏ユ偍鐨勫瘑鐮�' },
+ { required: true, validator: equalToPassword, trigger: 'blur' }
+ ]
+}
+
+const registerData = reactive({
+ isShowPassword: false,
+ captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
+ tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
+ registerForm: {
+ tenantName: import.meta.env.VITE_APP_DEFAULT_LOGIN_TENANT || '',
+ nickname: '',
+ tenantId: 0,
+ username: '',
+ password: '',
+ confirmPassword: '',
+ captchaVerification: ''
+ }
+})
+
+const loading = ref() // ElLoading.service 杩斿洖鐨勫疄渚�
+// 鎻愪氦娉ㄥ唽
+const handleRegister = async (params: any) => {
+ loading.value = true
+ try {
+ if (registerData.tenantEnable) {
+ await getTenantId()
+ registerData.registerForm.tenantId = authUtil.getTenantId()
+ }
+
+ if (registerData.captchaEnable) {
+ registerData.registerForm.captchaVerification = params.captchaVerification
+ }
+
+ const data = await validForm()
+ if (!data) {
+ return
+ }
+
+ const res = await LoginApi.register(registerData.registerForm)
+ if (!res) {
+ return
+ }
+ loading.value = ElLoading.service({
+ lock: true,
+ text: '姝ｅ湪鍔犺浇绯荤粺涓�...',
+ background: 'rgba(0, 0, 0, 0.7)'
+ })
+
+ authUtil.removeLoginForm()
+
+ authUtil.setToken(res)
+ if (!redirect.value) {
+ redirect.value = '/'
+ }
+ // 鍒ゆ柇鏄惁涓篠SO鐧诲綍
+ if (redirect.value.indexOf('sso') !== -1) {
+ window.location.href = window.location.href.replace('/login?redirect=', '')
+ } else {
+ push({ path: redirect.value || permissionStore.addRouters[0].path })
+ }
+ } finally {
+ loginLoading.value = false
+ loading.value.close()
+ }
+}
+
+// 鑾峰彇楠岃瘉鐮�
+const getCode = async () => {
+ // 鎯呭喌涓�锛屾湭寮�鍚細鍒欑洿鎺ユ敞鍐�
+ if (registerData.captchaEnable === 'false') {
+ await handleRegister({})
+ } else {
+ // 鎯呭喌浜岋紝宸插紑鍚細鍒欏睍绀洪獙璇佺爜锛涘彧鏈夊畬鎴愰獙璇佺爜鐨勬儏鍐碉紝鎵嶈繘琛屾敞鍐�
+ // 寮瑰嚭楠岃瘉鐮�
+ verify.value.show()
+ }
+}
+
+// 鑾峰彇绉熸埛 ID
+const getTenantId = async () => {
+ if (registerData.tenantEnable === 'true') {
+ const res = await LoginApi.getTenantIdByName(registerData.registerForm.tenantName)
+ authUtil.setTenantId(res)
+ }
+}
+
+// 鏍规嵁鍩熷悕锛岃幏寰楃鎴蜂俊鎭�
+const getTenantByWebsite = async () => {
+ if (registerData.tenantEnable === 'true') {
+ const website = location.host
+ const res = await LoginApi.getTenantByWebsite(website)
+ if (res) {
+ registerData.registerForm.tenantName = res.name
+ authUtil.setTenantId(res.id)
+ }
+ }
+}
+
+watch(
+ () => currentRoute.value,
+ (route: RouteLocationNormalizedLoaded) => {
+ redirect.value = route?.query?.redirect as string
+ },
+ {
+ immediate: true
+ }
+)
+onMounted(() => {
+ // getCookie()
+ getTenantByWebsite()
+})
+</script>
+
+<style lang="scss" scoped>
+:deep(.anticon) {
+ &:hover {
+ color: var(--el-color-primary) !important;
+ }
+}
+
+.login-code {
+ float: right;
+ width: 100%;
+ height: 38px;
+
+ img {
+ width: 100%;
+ height: auto;
+ max-width: 100px;
+ vertical-align: middle;
+ cursor: pointer;
+ }
+}
+</style>
--
Gitblit v1.8.0