集团数据看板数据对接

src/views/Login/components/LoginForm.vue

@@ -1,56 +1,31 @@
 <template>
-  <el-form
-    v-show="getShow"
-    ref="formLogin"
-    :model="loginData.loginForm"
-    :rules="LoginRules"
-    class="login-form login-form-default"
-    label-position="top"
-    label-width="120px"
-    size="large"
-  >
+  <el-form v-show="getShow" ref="formLogin" :model="loginData.loginForm" :rules="LoginRules"
+    class="login-form login-form-default" label-position="top" label-width="120px" size="large">
     <el-row style="margin-right: -10px; margin-left: -10px">
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item>
-          <LoginFormTitle style="width: 100%"/>
+          <LoginFormTitle style="width: 100%" />
         </el-form-item>
       </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName">
-          <el-input
-            v-model="loginData.loginForm.tenantName"
-            :placeholder="t('login.tenantNamePlaceholder')"
-            :prefix-icon="iconHouse"
-            link
-            type="primary"
-          />
+          <el-input v-model="loginData.loginForm.tenantName" :placeholder="t('login.tenantNamePlaceholder')"
+            :prefix-icon="iconHouse" link type="primary" />
         </el-form-item>
       </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item prop="username">
-          <el-input
-            v-model="loginData.loginForm.username"
-            :placeholder="t('login.usernamePlaceholder')"
-            :prefix-icon="iconAvatar"
-          />
+          <el-input v-model="loginData.loginForm.username" :placeholder="t('login.usernamePlaceholder')"
+            :prefix-icon="iconAvatar" />
         </el-form-item>
       </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item prop="password">
-          <el-input
-            v-model="loginData.loginForm.password"
-            :placeholder="t('login.passwordPlaceholder')"
-            :prefix-icon="iconLock"
-            show-password
-            type="password"
-            @keyup.enter="getCode()"
-          />
+          <el-input v-model="loginData.loginForm.password" :placeholder="t('login.passwordPlaceholder')"
+            :prefix-icon="iconLock" show-password type="password" @keyup.enter="getCode()" />
         </el-form-item>
       </el-col>
-      <el-col
-        :span="24"
-        style="padding-right: 10px; padding-left: 10px; margin-top: -20px; margin-bottom: -20px"
-      >
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px; margin-top: -20px; margin-bottom: -20px">
         <el-form-item>
           <el-row justify="space-between" style="width: 100%">
             <el-col :span="6">
@@ -66,26 +41,21 @@
       </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px" class="login-btn-col">
         <el-form-item>
-          <XButton
-            :loading="loginLoading"
-            :title="t('login.login')"
-            class="w-[100%]"
-            type="primary"
-            @click="getCode()"
-          />
+          <XButton :loading="loginLoading" :title="t('login.login')" class="w-[100%]" type="primary"
+            @click="getCode()" />
           <div v-if="loginType == 'easy'" class="w-100% mt-6px flex justify-end">
             <el-dropdown @command="easyCommand">
               <div class="mt--2px cursor-pointer">
                 <el-text type="primary">
                   <span class="text-14px">{{ t('login.otherLogin') }}</span>
-                  <Icon :size="16" icon="iconamoon:arrow-down-2-light"/>
+                  <Icon :size="16" icon="iconamoon:arrow-down-2-light" />
                 </el-text>
               </div>
               <template #dropdown>
                 <el-dropdown-menu>
                   <template v-for="item in easyDropdownList" :key="item.label">
                     <el-dropdown-item :command="item">
-                      <Icon :size="16" :icon="item.icon"/>
+                      <Icon :size="16" :icon="item.icon" />
                       <span>{{ item.label }}</span>
                     </el-dropdown-item>
                   </template>
@@ -95,13 +65,8 @@
           </div>
         </el-form-item>
       </el-col>
-      <Verify
-        ref="verify"
-        :captchaType="captchaType"
-        :imgSize="{ width: '400px', height: '200px' }"
-        mode="pop"
-        @success="handleLogin"
-      />
+      <Verify ref="verify" :captchaType="captchaType" :imgSize="{ width: '400px', height: '200px' }" mode="pop"
+        @success="handleLogin" />
       <template v-if="!loginType">
         <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
           <!-- <el-form-item>
@@ -123,19 +88,12 @@
             </el-row>
           </el-form-item> -->
         </el-col>
-       <el-divider content-position="center">{{ t('login.otherLogin') }}</el-divider>
+        <el-divider content-position="center">{{ t('login.otherLogin') }}</el-divider>
         <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
           <el-form-item>
             <div class="w-[100%] flex justify-center">
-              <Icon
-                v-for="(item, key) in socialList"
-                :key="key"
-                :icon="item.icon"
-                :size="50"
-                class="anticon cursor-pointer"
-                color="#999"
-                @click="doSocialLogin(item.type)"
-              />
+              <Icon v-for="(item, key) in socialList" :key="key" :icon="item.icon" :size="50"
+                class="anticon cursor-pointer" color="#999" @click="doSocialLogin(item.type)" />
             </div>
           </el-form-item>
         </el-col>
@@ -144,18 +102,18 @@
   </el-form>
 </template>
 <script lang="ts" setup>
-import {ElLoading} from 'element-plus'
+import { ElLoading } from 'element-plus'
 import LoginFormTitle from './LoginFormTitle.vue'
-import type {RouteLocationNormalizedLoaded} from 'vue-router'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
 
-import {useIcon} from '@/hooks/web/useIcon'
+import { useIcon } from '@/hooks/web/useIcon'
 
 import * as authUtil from '@/utils/auth'
-import {usePermissionStore} from '@/store/modules/permission'
+import { usePermissionStore } from '@/store/modules/permission'
 import * as LoginApi from '@/api/login'
-import {LoginStateEnum, useFormValid, useLoginState} from './useLogin'
+import { LoginStateEnum, useFormValid, useLoginState } from './useLogin'
 
-defineOptions({name: 'LoginForm'})
+defineOptions({ name: 'LoginForm' })
 
 interface Props {
   loginType?: 'easy'
@@ -163,15 +121,15 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const {t} = useI18n()
+const { t } = useI18n()
 const message = useMessage()
-const iconHouse = useIcon({icon: 'ep:house'})
-const iconAvatar = useIcon({icon: 'ep:avatar'})
-const iconLock = useIcon({icon: 'ep:lock'})
+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 {setLoginState, getLoginState} = useLoginState()
-const {currentRoute, push} = useRouter()
+const { validForm } = useFormValid(formLogin)
+const { setLoginState, getLoginState } = useLoginState()
+const { currentRoute, push } = useRouter()
 const permissionStore = usePermissionStore()
 const redirect = ref<string>('')
 const loginLoading = ref(false)
@@ -203,7 +161,7 @@ const socialList = [
   // { icon: 'ant-design:dingtalk-circle-filled', type: 20 },
   // { icon: 'ant-design:github-filled', type: 0 },
   // { icon: 'ant-design:alipay-circle-filled', type: 0 },
-  {icon: 'bx:planet', type: 100},
+  { icon: 'bx:planet', type: 100 },
 ]
 
 const easyDropdownList = [
@@ -219,15 +177,15 @@ const easyDropdownList = [
     type: LoginStateEnum.QR_CODE,
     code: 'page'
   },
-  {label: t('login.btnWechat'), icon: 'ant-design:wechat-filled', type: 30, code: 'url'},
+  { label: t('login.btnWechat'), icon: 'ant-design:wechat-filled', type: 30, code: 'url' },
   {
     label: t('login.btnDingtalk'),
     icon: 'ant-design:dingtalk-circle-filled',
     type: 20,
     code: 'url'
   },
-  {label: t('login.btnGitHub'), icon: 'ant-design:github-filled', type: 0, code: 'url'},
-  {label: t('login.btnAlipay'), icon: 'ant-design:alipay-circle-filled', type: 0, code: 'url'}
+  { label: t('login.btnGitHub'), icon: 'ant-design:github-filled', type: 0, code: 'url' },
+  { label: t('login.btnAlipay'), icon: 'ant-design:alipay-circle-filled', type: 0, code: 'url' }
 ]
 
 const easyCommand = (row) => {
@@ -308,9 +266,14 @@ const handleLogin = async (params) => {
     if (redirect.value.indexOf('sso') !== -1) {
       window.location.href = window.location.href.replace('/login?redirect=', '')
     } else {
-      push({path: redirect.value || permissionStore.addRouters[0].path})
+      push({ path: redirect.value || permissionStore.addRouters[0].path })
     }
-  } finally {
+  }
+  catch (e) {
+    loginLoading.value = false
+    loading.value?.close()
+  }
+  finally {
     loginLoading.value = false
     loading.value?.close()
   }
@@ -327,7 +290,7 @@ const doSocialLogin = async (type: number) => {
       await getTenantId()
       // 如果获取不到，则需要弹出提示，进行处理
       if (!authUtil.getTenantId()) {
-        await message.prompt('请输入租户名称', t('common.reminder')).then(async ({value}) => {
+        await message.prompt('请输入租户名称', t('common.reminder')).then(async ({ value }) => {
           const res = await LoginApi.getTenantIdByName(value)
           authUtil.setTenantId(res)
         })
@@ -356,7 +319,7 @@ watch(
   }
 )
 onMounted(() => {
-  if(redirect.value && import.meta.env.VITE_DEFAULT_SSO =='true'){
+  if (redirect.value && import.meta.env.VITE_DEFAULT_SSO == 'true') {
     //默认
     doSocialLogin(100)
   }