From d604c6c5fbad1668a408edcc95c9c19c317ea4d3 Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Tue, 22 Nov 2022 21:41:59 +0800
Subject: [PATCH] refactor: login

---
 yudao-ui-admin-vue3/src/views/Login/Login.vue | 17 +++-----
 .../src/views/Login/components/LoginForm.vue  | 36 ++++++++--------
 .../src/views/Login/components/MobileForm.vue | 43 +++++++++----------
 .../views/Login/components/RegisterForm.vue   |  9 ++--
 4 files changed, 49 insertions(+), 56 deletions(-)

diff --git a/yudao-ui-admin-vue3/src/views/Login/Login.vue b/yudao-ui-admin-vue3/src/views/Login/Login.vue
index 711976fbe..5dcc41657 100644
--- a/yudao-ui-admin-vue3/src/views/Login/Login.vue
+++ b/yudao-ui-admin-vue3/src/views/Login/Login.vue
@@ -59,21 +59,18 @@
   </div>
 </template>
 <script setup lang="ts">
-import { LoginForm, MobileForm, RegisterForm, QrCodeForm } from './components'
+import { underlineToHump } from '@/utils'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useDesign } from '@/hooks/web/useDesign'
+import { useAppStore } from '@/store/modules/app'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
 import { LocaleDropdown } from '@/components/LocaleDropdown'
-import { useI18n } from '@/hooks/web/useI18n'
-import { underlineToHump } from '@/utils'
-import { useAppStore } from '@/store/modules/app'
-import { useDesign } from '@/hooks/web/useDesign'
+import { LoginForm, MobileForm, RegisterForm, QrCodeForm } from './components'
 
 const { t } = useI18n()
-
-const { getPrefixCls } = useDesign()
-
-const prefixCls = getPrefixCls('login')
-
 const appStore = useAppStore()
+const { getPrefixCls } = useDesign()
+const prefixCls = getPrefixCls('login')
 </script>
 
 <style lang="less" scoped>
diff --git a/yudao-ui-admin-vue3/src/views/Login/components/LoginForm.vue b/yudao-ui-admin-vue3/src/views/Login/components/LoginForm.vue
index 5d7b224ce..3b63d175b 100644
--- a/yudao-ui-admin-vue3/src/views/Login/components/LoginForm.vue
+++ b/yudao-ui-admin-vue3/src/views/Login/components/LoginForm.vue
@@ -137,7 +137,7 @@
   </el-form>
 </template>
 <script setup lang="ts">
-import { useIcon } from '@/hooks/web/useIcon'
+import { reactive, ref, unref, onMounted, computed, watch } from 'vue'
 import LoginFormTitle from './LoginFormTitle.vue'
 import {
   ElForm,
@@ -150,20 +150,24 @@ import {
   ElDivider,
   ElLoading
 } from 'element-plus'
-import { reactive, ref, unref, onMounted, computed, watch } from 'vue'
-import * as LoginApi from '@/api/login'
-import { setToken, setTenantId } from '@/utils/auth'
-import { usePermissionStore } from '@/store/modules/permission'
-import { useRouter } from 'vue-router'
-import { useI18n } from '@/hooks/web/useI18n'
-import { required } from '@/utils/formRules'
-import { Icon } from '@/components/Icon'
-import { LoginStateEnum, useLoginState, useFormValid } from './useLogin'
-import type { RouteLocationNormalizedLoaded } from 'vue-router'
-import { Verify } from '@/components/Verifition'
 import Cookies from 'js-cookie'
+import { useRouter } from 'vue-router'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useIcon } from '@/hooks/web/useIcon'
+import { required } from '@/utils/formRules'
+import { setToken, setTenantId } from '@/utils/auth'
 import { decrypt, encrypt } from '@/utils/jsencrypt'
+import { Icon } from '@/components/Icon'
+import { Verify } from '@/components/Verifition'
+import { usePermissionStore } from '@/store/modules/permission'
+import * as LoginApi from '@/api/login'
+import { LoginStateEnum, useLoginState, useFormValid } from './useLogin'
 
+const { t } = useI18n()
+const iconHouse = useIcon({ icon: 'ep:house' })
+const iconAvatar = useIcon({ icon: 'ep:avatar' })
+const iconLock = useIcon({ icon: 'ep:lock' })
 const { currentRoute, push } = useRouter()
 const permissionStore = usePermissionStore()
 const formLogin = ref()
@@ -173,16 +177,12 @@ const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN)
 const iconSize = 30
 const iconColor = '#999'
 const redirect = ref<string>('')
-const { t } = useI18n()
-const iconHouse = useIcon({ icon: 'ep:house' })
-const iconAvatar = useIcon({ icon: 'ep:avatar' })
-const iconLock = useIcon({ icon: 'ep:lock' })
+const loginLoading = ref(false)
 const LoginRules = {
   tenantName: [required],
   username: [required],
   password: [required]
 }
-const loginLoading = ref(false)
 const loginData = reactive({
   isShowPassword: false,
   captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
@@ -202,7 +202,6 @@ const loginData = reactive({
 // blockPuzzle 滑块 clickWord 点击文字
 const verify = ref()
 const captchaType = ref('blockPuzzle')
-
 // 获取验证码
 const getCode = async () => {
   // 情况一，未开启：则直接登录
@@ -210,7 +209,6 @@ const getCode = async () => {
     await handleLogin({})
     return
   }
-
   // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
   // 弹出验证码
   verify.value.show()
diff --git a/yudao-ui-admin-vue3/src/views/Login/components/MobileForm.vue b/yudao-ui-admin-vue3/src/views/Login/components/MobileForm.vue
index e32a5dbd5..15811d067 100644
--- a/yudao-ui-admin-vue3/src/views/Login/components/MobileForm.vue
+++ b/yudao-ui-admin-vue3/src/views/Login/components/MobileForm.vue
@@ -85,31 +85,34 @@
   </el-form>
 </template>
 <script setup lang="ts">
-import { useIcon } from '@/hooks/web/useIcon'
 import { reactive, ref, unref, watch, computed } from 'vue'
-import LoginFormTitle from './LoginFormTitle.vue'
-import { ElForm, ElFormItem, ElInput, ElRow, ElCol, ElMessage } from 'element-plus'
-import { useI18n } from '@/hooks/web/useI18n'
-import { required } from '@/utils/formRules'
-import { getTenantIdByNameApi, sendSmsCodeApi, smsLoginApi } from '@/api/login'
-import { useCache } from '@/hooks/web/useCache'
-import { usePermissionStore } from '@/store/modules/permission'
+import { ElForm, ElFormItem, ElInput, ElRow, ElCol } from 'element-plus'
 import { useRouter } from 'vue-router'
-import { setToken } from '@/utils/auth'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useIcon } from '@/hooks/web/useIcon'
+import { useCache } from '@/hooks/web/useCache'
+import { useMessage } from '@/hooks/web/useMessage'
+import { setToken } from '@/utils/auth'
+import { required } from '@/utils/formRules'
+import { usePermissionStore } from '@/store/modules/permission'
+import { getTenantIdByNameApi, sendSmsCodeApi, smsLoginApi } from '@/api/login'
+import LoginFormTitle from './LoginFormTitle.vue'
 import { useLoginState, LoginStateEnum, useFormValid } from './useLogin'
+
+const { t } = useI18n()
+const { wsCache } = useCache()
+const message = useMessage()
+const permissionStore = usePermissionStore()
+const { currentRoute, push } = useRouter()
 const formSmsLogin = ref()
-const { validForm } = useFormValid(formSmsLogin)
-const { handleBackLogin, getLoginState } = useLoginState()
-const getShow = computed(() => unref(getLoginState) === LoginStateEnum.MOBILE)
+const loginLoading = ref(false)
 const iconHouse = useIcon({ icon: 'ep:house' })
 const iconCellphone = useIcon({ icon: 'ep:cellphone' })
 const iconCircleCheck = useIcon({ icon: 'ep:circle-check' })
-const { wsCache } = useCache()
-const permissionStore = usePermissionStore()
-const { currentRoute, push } = useRouter()
-const loginLoading = ref(false)
-const { t } = useI18n()
+const { validForm } = useFormValid(formSmsLogin)
+const { handleBackLogin, getLoginState } = useLoginState()
+const getShow = computed(() => unref(getLoginState) === LoginStateEnum.MOBILE)
 
 const rules = {
   tenantName: [required],
@@ -146,11 +149,7 @@ const getSmsCode = async () => {
   await getTenantId()
   smsVO.smsCode.mobile = loginData.loginForm.mobileNumber
   await sendSmsCodeApi(smsVO.smsCode).then(async () => {
-    // 提示验证码发送成功
-    ElMessage({
-      type: 'success',
-      message: t('login.SmsSendMsg')
-    })
+    message.success(t('login.SmsSendMsg'))
     // 设置倒计时
     mobileCodeTimer.value = 60
     let msgTimer = setInterval(() => {
diff --git a/yudao-ui-admin-vue3/src/views/Login/components/RegisterForm.vue b/yudao-ui-admin-vue3/src/views/Login/components/RegisterForm.vue
index 8cc4c6129..d9e652ed9 100644
--- a/yudao-ui-admin-vue3/src/views/Login/components/RegisterForm.vue
+++ b/yudao-ui-admin-vue3/src/views/Login/components/RegisterForm.vue
@@ -35,22 +35,21 @@
 </template>
 
 <script setup lang="ts">
-import { Form } from '@/components/Form'
 import { computed, reactive, ref, unref } from 'vue'
+import { ElInput, FormRules } from 'element-plus'
+import { Form } from '@/components/Form'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useForm } from '@/hooks/web/useForm'
-import { ElInput, FormRules } from 'element-plus'
 import { useValidator } from '@/hooks/web/useValidator'
 import { useLoginState, LoginStateEnum } from './useLogin'
 import LoginFormTitle from './LoginFormTitle.vue'
 import { FormSchema } from '@/types/form'
 
+const { t } = useI18n()
+const { required } = useValidator()
 const { register, elFormRef } = useForm()
 const { handleBackLogin, getLoginState } = useLoginState()
 const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER)
-const { t } = useI18n()
-
-const { required } = useValidator()
 
 const schema = reactive<FormSchema[]>([
   {