RegisterForm.vue 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
  1. <template>
  2. <el-form
  3. v-show="getShow"
  4. ref="formLogin"
  5. :model="registerData.registerForm"
  6. :rules="registerRules"
  7. class="login-form"
  8. label-position="top"
  9. label-width="120px"
  10. size="large"
  11. >
  12. <el-row style="margin-right: -10px; margin-left: -10px">
  13. <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
  14. <el-form-item>
  15. <LoginFormTitle style="width: 100%" />
  16. </el-form-item>
  17. </el-col>
  18. <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
  19. <el-form-item v-if="registerData.tenantEnable === 'true'" prop="tenantName">
  20. <el-input
  21. v-model="registerData.registerForm.tenantName"
  22. :placeholder="t('login.tenantname')"
  23. :prefix-icon="iconHouse"
  24. link
  25. type="primary"
  26. size="large"
  27. />
  28. </el-form-item>
  29. </el-col>
  30. <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
  31. <el-form-item prop="username">
  32. <el-input
  33. v-model="registerData.registerForm.username"
  34. :placeholder="t('login.username')"
  35. size="large"
  36. :prefix-icon="iconAvatar"
  37. />
  38. </el-form-item>
  39. </el-col>
  40. <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
  41. <el-form-item prop="username">
  42. <el-input
  43. v-model="registerData.registerForm.nickname"
  44. placeholder="昵称"
  45. size="large"
  46. :prefix-icon="iconAvatar"
  47. />
  48. </el-form-item>
  49. </el-col>
  50. <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
  51. <el-form-item prop="password">
  52. <el-input
  53. v-model="registerData.registerForm.password"
  54. type="password"
  55. auto-complete="off"
  56. :placeholder="t('login.password')"
  57. size="large"
  58. :prefix-icon="iconLock"
  59. show-password
  60. />
  61. </el-form-item>
  62. </el-col>
  63. <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
  64. <el-form-item prop="confirmPassword">
  65. <el-input
  66. v-model="registerData.registerForm.confirmPassword"
  67. type="password"
  68. size="large"
  69. auto-complete="off"
  70. :placeholder="t('login.checkPassword')"
  71. :prefix-icon="iconLock"
  72. show-password
  73. />
  74. </el-form-item>
  75. </el-col>
  76. <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
  77. <el-form-item>
  78. <XButton
  79. :loading="loginLoading"
  80. :title="t('login.register')"
  81. class="w-[100%]"
  82. type="primary"
  83. @click="getCode()"
  84. />
  85. </el-form-item>
  86. </el-col>
  87. <Verify
  88. v-if="registerData.captchaEnable === 'true'"
  89. ref="verify"
  90. :captchaType="captchaType"
  91. :imgSize="{ width: '400px', height: '200px' }"
  92. mode="pop"
  93. @success="handleRegister"
  94. />
  95. </el-row>
  96. <XButton :title="t('login.hasUser')" class="w-[100%]" @click="handleBackLogin()" />
  97. </el-form>
  98. </template>
  99. <script lang="ts" setup>
  100. import { ElLoading } from 'element-plus'
  101. import LoginFormTitle from './LoginFormTitle.vue'
  102. import type { RouteLocationNormalizedLoaded } from 'vue-router'
  103. import { useIcon } from '@/hooks/web/useIcon'
  104. import * as authUtil from '@/utils/auth'
  105. import { usePermissionStore } from '@/store/modules/permission'
  106. import * as LoginApi from '@/api/login'
  107. import { LoginStateEnum, useLoginState } from './useLogin'
  108. defineOptions({ name: 'RegisterForm' })
  109. const { t } = useI18n()
  110. const iconHouse = useIcon({ icon: 'ep:house' })
  111. const iconAvatar = useIcon({ icon: 'ep:avatar' })
  112. const iconLock = useIcon({ icon: 'ep:lock' })
  113. const formLogin = ref()
  114. const { handleBackLogin, getLoginState } = useLoginState()
  115. const { currentRoute, push } = useRouter()
  116. const permissionStore = usePermissionStore()
  117. const redirect = ref<string>('')
  118. const loginLoading = ref(false)
  119. const verify = ref()
  120. const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字
  121. const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER)
  122. const equalToPassword = (rule, value, callback) => {
  123. if (registerData.registerForm.password !== value) {
  124. callback(new Error('两次输入的密码不一致'))
  125. } else {
  126. callback()
  127. }
  128. }
  129. const registerRules = {
  130. tenantName: [
  131. { required: true, trigger: 'blur', message: '请输入您所属的租户' },
  132. { min: 2, max: 20, message: '租户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
  133. ],
  134. username: [
  135. { required: true, trigger: 'blur', message: '请输入您的账号' },
  136. { min: 4, max: 30, message: '用户账号长度必须介于 4 和 30 之间', trigger: 'blur' }
  137. ],
  138. nickname: [
  139. { required: true, trigger: 'blur', message: '请输入您的昵称' },
  140. { min: 0, max: 30, message: '昵称长度必须介于 0 和 30 之间', trigger: 'blur' }
  141. ],
  142. password: [
  143. { required: true, trigger: 'blur', message: '请输入您的密码' },
  144. { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
  145. { pattern: /^[^<>"'|\\]+$/, message: '不能包含非法字符:< > " \' \\\ |', trigger: 'blur' }
  146. ],
  147. confirmPassword: [
  148. { required: true, trigger: 'blur', message: '请再次输入您的密码' },
  149. { required: true, validator: equalToPassword, trigger: 'blur' }
  150. ]
  151. }
  152. const registerData = reactive({
  153. isShowPassword: false,
  154. captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
  155. tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
  156. registerForm: {
  157. tenantName: import.meta.env.VITE_APP_DEFAULT_LOGIN_TENANT || '',
  158. nickname: '',
  159. tenantId: 0,
  160. username: '',
  161. password: '',
  162. confirmPassword: '',
  163. captchaVerification: ''
  164. }
  165. })
  166. // 提交注册
  167. const handleRegister = async (params: any) => {
  168. loading.value = true
  169. try {
  170. if (registerData.tenantEnable) {
  171. await getTenantId()
  172. registerData.registerForm.tenantId = authUtil.getTenantId()
  173. }
  174. if (registerData.captchaEnable) {
  175. registerData.registerForm.captchaVerification = params.captchaVerification
  176. }
  177. const res = await LoginApi.register(registerData.registerForm)
  178. if (!res) {
  179. return
  180. }
  181. loading.value = ElLoading.service({
  182. lock: true,
  183. text: '正在加载系统中...',
  184. background: 'rgba(0, 0, 0, 0.7)'
  185. })
  186. authUtil.removeLoginForm()
  187. authUtil.setToken(res)
  188. if (!redirect.value) {
  189. redirect.value = '/'
  190. }
  191. // 判断是否为SSO登录
  192. if (redirect.value.indexOf('sso') !== -1) {
  193. window.location.href = window.location.href.replace('/login?redirect=', '')
  194. } else {
  195. push({ path: redirect.value || permissionStore.addRouters[0].path })
  196. }
  197. } finally {
  198. loginLoading.value = false
  199. loading.value.close()
  200. }
  201. }
  202. // 获取验证码
  203. const getCode = async () => {
  204. // 情况一,未开启:则直接注册
  205. if (registerData.captchaEnable === 'false') {
  206. await handleRegister({})
  207. } else {
  208. // 情况二,已开启:则展示验证码;只有完成验证码的情况,才进行注册
  209. // 弹出验证码
  210. verify.value.show()
  211. }
  212. }
  213. // 获取租户 ID
  214. const getTenantId = async () => {
  215. if (registerData.tenantEnable === 'true') {
  216. const res = await LoginApi.getTenantIdByName(registerData.registerForm.tenantName)
  217. authUtil.setTenantId(res)
  218. }
  219. }
  220. // 根据域名,获得租户信息
  221. const getTenantByWebsite = async () => {
  222. const website = location.host
  223. const res = await LoginApi.getTenantByWebsite(website)
  224. if (res) {
  225. registerData.registerForm.tenantName = res.name
  226. authUtil.setTenantId(res.id)
  227. }
  228. }
  229. const loading = ref() // ElLoading.service 返回的实例
  230. watch(
  231. () => currentRoute.value,
  232. (route: RouteLocationNormalizedLoaded) => {
  233. redirect.value = route?.query?.redirect as string
  234. },
  235. {
  236. immediate: true
  237. }
  238. )
  239. onMounted(() => {
  240. // getCookie()
  241. getTenantByWebsite()
  242. })
  243. </script>
  244. <style lang="scss" scoped>
  245. :deep(.anticon) {
  246. &:hover {
  247. color: var(--el-color-primary) !important;
  248. }
  249. }
  250. .login-code {
  251. float: right;
  252. width: 100%;
  253. height: 38px;
  254. img {
  255. width: 100%;
  256. height: auto;
  257. max-width: 100px;
  258. vertical-align: middle;
  259. cursor: pointer;
  260. }
  261. }
  262. </style>