af-mobile-client-vue3 1.3.16 → 1.3.18

package/src/views/user/login/LoginForm.vue

@@ -1,346 +1,346 @@
-<script setup lang="ts">
-import type { FormInstance } from 'vant'
-import { LoginStateEnum, useFormRules, useLoginState } from '@af-mobile-client-vue3/hooks/useLogin'
-import GetAppDataService from '@af-mobile-client-vue3/plugins/AppData'
-import { getUserPermissions } from '@af-mobile-client-vue3/services/api/search'
-import { useSettingStore } from '@af-mobile-client-vue3/stores/modules/setting'
-import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
-import { funcToRouter, loadRoutes } from '@af-mobile-client-vue3/utils/routerUtil'
-import { secureStorageBatchWrite, secureStorageRead } from '@af-mobile-client-vue3/utils/secureStorage'
-import { isWechat } from '@af-mobile-client-vue3/utils/wechatUtil'
-import {
-  closeToast,
-  showDialog,
-  showFailToast,
-  showLoadingToast,
-  Switch,
-  Button as VanButton,
-  Col as VanCol,
-  Field as VanField,
-  Form as VanForm,
-  Icon as VanIcon,
-  Loading as VanLoading,
-  Row as VanRow,
-} from 'vant'
-import { computed, inject, onBeforeMount, onMounted, reactive, ref, unref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import 'vant/lib/switch/index.css'
-
-declare let WeixinJSBridge: any
-const { setLoginState, getLoginState } = useLoginState()
-const { getFormRules } = useFormRules()
-const userState = useUserStore()
-const router = useRouter()
-
-const formRef = ref<FormInstance>()
-const loading = ref(false)
-const wxloading = ref(false)
-const rememberMe = ref(false)
-const switchPassType = ref(true)
-const formData = reactive({
-  username: '',
-  password: '',
-})
-const route = useRoute()
-const setting = useSettingStore()
-
-const getShow = computed(() => (unref(getLoginState) === LoginStateEnum.LOGIN))
-
-const login: any = inject('$login')
-onBeforeMount(async () => {
-  if (isWechat() && setting.getSetting()?.wxAutoLogin) {
-    // 检测是否要开放微信登录
-    if (setting.getSetting()?.wechatLogin) {
-      try {
-        wxloading.value = true
-        if (route.query.code && route.query.state) {
-          const data = await userState.loginUnified({
-            unifiedCode: `${route.query.code}`,
-            tenantName: `${route.query.state}`,
-            loginMode: 'wechat',
-            resourceName: setting.getSetting()?.routerName || '智慧手机',
-          })
-          login.f = data
-          await Promise.all([GetAppDataService.load()])
-          const loginInfo = {
-            f: login.f,
-            jwt: login.f.id,
-            r: login.r,
-          }
-          userState.setLogin(loginInfo)
-          userState.setTenantName(route.query.state)
-          await afterGeneral(data.resources)
-
-          const toPath = decodeURIComponent((route.query?.redirect || '/') as string)
-          closeToast()
-          if (route.name === '/login')
-            await router.replace('/')
-          else await router.replace(toPath)
-        }
-        else {
-          if (userState.getTenantName() !== '') {
-            closeWindows()
-          }
-          else {
-            await showDialog({ message: '当前用户无登录权限' })
-            closeWindows()
-          }
-        }
-      }
-      catch {
-        await showDialog({ message: '当前用户无登录权限' })
-        closeWindows()
-      }
-      finally {
-        wxloading.value = false
-      }
-    }
-  }
-})
-function handleSubmit() {
-  formRef.value
-    ?.validate()
-    .then(async () => {
-      try {
-        loading.value = true
-        showLoadingToast('登录中...')
-        console.warn(setting)
-        const data: any = await userState.Login({
-          username: formData.username,
-          password: formData.password,
-          resourceName: setting.getSetting()?.routerName || '智慧手机',
-        })
-        login.f = data
-        await Promise.all([GetAppDataService.load()])
-        const loginInfo = {
-          f: login.f,
-          jwt: login.f.id,
-          r: login.r,
-        }
-        userState.setLogin(loginInfo)
-        const compatible = import.meta.env.VITE_APP_COMPATIBLE
-        if (compatible === 'OA')
-          await afterGeneral(data)
-        else
-          if (data.resources.data)
-            await afterGeneral(data.resources.data)
-          else
-            await afterGeneral(data.resources)
-
-        const toPath = decodeURIComponent((route.query?.redirect || '/') as string)
-        closeToast()
-        if (route.name === '/login')
-          await router.replace('/')
-        else await router.replace(toPath)
-      }
-      finally {
-        loading.value = false
-      }
-    })
-    .catch((e) => {
-      console.error(e)
-      showFailToast('用户名或密码错误')
-    })
-}
-function closeWindows() {
-  if (isWechat()) {
-    (window as any).WeixinJSBridge.call('closeWindow')
-  }
-  else {
-    // 关闭页面
-    if (navigator.userAgent.includes('Firefox') || navigator.userAgent.includes('Chrome')) {
-      window.open('about:blank', '_self')
-      window.close()
-    }
-    else {
-      window.opener = null
-      window.open('', '_self')
-      window.close()
-    }
-  }
-}
-
-async function afterGeneral(result) {
-  // 排序 functions 及其嵌套的 children
-  if (result.functions && Array.isArray(result.functions)) {
-    // 对顶层菜单进行排序
-    result.functions.sort((a, b) => (a.position || 0) - (b.position || 0))
-
-    // 对每个菜单的子项进行排序
-    for (const item of result.functions) {
-      if (item.children && Array.isArray(item.children)) {
-        item.children.sort((a, b) => (a.position || 0) - (b.position || 0))
-      }
-    }
-  }
-
-  const user: any = {
-    ...result,
-    username: result.ename,
-    avatar: result.avatar ? result.avatar : setting.getSetting()?.defaultAvatarUrl,
-  }
-  userState.setUserInfo(user)
-  // 如果result中没有返回 权限 需要主动获取权限列表
-  if (!result.permissions) {
-    result.permissions = await getUserPermissions(result.id)
-  }
-  userState.setPermissions(result.permissions)
-  userState.setRoles([{ id: 'admin', operation: ['add', 'edit', 'delete'] }])
-  // 加载路由
-  loadRoutes(funcToRouter(user.functions))
-
-  // 存储登录数据到本地缓存
-  secureStorageBatchWrite([
-    {
-      key: 'loginData',
-      value: {
-        username: formData.username,
-        password: formData.password,
-        rememberMe: rememberMe.value,
-      },
-    },
-    {
-      key: 'userData',
-      value: result,
-    },
-  ])
-
-  // 每次重新登录时，清除indexedDB缓存
-  // indexedDB.clear()
-}
-async function wxLoginFun() {
-  await localStorage.setItem('wechatLoginPending', 'true')
-  userState.getCode(setting.getSetting()?.tenantName)
-}
-async function wxLoginFunContinue(code, state) {
-  try {
-    wxloading.value = true
-    const data = await userState.loginUnified({
-      unifiedCode: `${code}`,
-      tenantName: `${state}`,
-      loginMode: 'wechat',
-      resourceName: setting.getSetting()?.routerName || '智慧手机',
-    })
-    login.f = data
-    await Promise.all([GetAppDataService.load()])
-    const loginInfo = {
-      f: login.f,
-      jwt: login.f.id,
-      r: login.r,
-    }
-    userState.setLogin(loginInfo)
-    userState.setTenantName(route.query.state)
-    await afterGeneral(data.resources)
-    const toPath = decodeURIComponent((route.query?.redirect || '/') as string)
-    closeToast()
-    if (route.name === '/login')
-      await router.replace('/')
-    else await router.replace(toPath)
-  }
-  finally {
-    wxloading.value = false
-  }
-}
-function getQueryParam(param: string): string | null {
-  const search = window.location.search || window.location.hash.split('?')[1] || ''
-  const params = new URLSearchParams(search)
-  return params.get(param)
-}
-onMounted(() => {
-  const pending = localStorage.getItem('wechatLoginPending')
-  const code = getQueryParam('code')
-  const state = getQueryParam('state')
-  if (pending && code && state) {
-    localStorage.removeItem('wechatLoginPending')
-    wxLoginFunContinue(code, state)
-  }
-  try {
-    // 手机登录获取本地缓存的登录数据
-    secureStorageRead('loginData', (result: any) => {
-      if (result.status === 'success') {
-        const res = JSON.parse(result.data.value)
-        if (res.rememberMe) {
-          formData.username = res.username
-          formData.password = res.password
-          rememberMe.value = res.rememberMe
-        }
-      }
-    })
-  }
-  catch (e) {
-    console.warn('读取本地缓存失败', e)
-    // 未拿到跳过
-  }
-})
-</script>
-
-<template>
-  <div v-show="wxloading" class="login_form">
-    <VanRow justify="center">
-      <VanLoading type="spinner" size="30px" vertical color="#1989fa">
-        自动登录中...
-      </VanLoading>
-    </VanRow>
-  </div>
-  <div v-if="getShow && !wxloading" class="login_form form">
-    <VanForm ref="formRef" @submit="handleSubmit">
-      <VanField
-        v-model="formData.username"
-        class="form_field"
-        name="username"
-        label="账号"
-        placeholder="请输入账号"
-        label-align="top"
-        :rules="getFormRules.username"
-      />
-      <VanField
-        v-model="formData.password"
-        class="form_field"
-        :type="switchPassType ? 'password' : 'text'"
-        name="password"
-        label="密码"
-        placeholder="请输入密码"
-        label-align="top"
-        :rules="getFormRules.password"
-        @click-right-icon="switchPassType = !switchPassType"
-      >
-        <template #right-icon>
-          <VanIcon v-if="switchPassType" name="closed-eye" color="rgb(56, 149, 250)" />
-          <VanIcon v-else name="eye-o" color="rgb(56, 149, 250)" />
-        </template>
-      </VanField>
-
-      <VanRow justify="space-between" class="extra_setting">
-        <VanCol>
-          <div class="extra_setting_for_remember_password">
-            <Switch v-model="rememberMe" size="12px" />
-            <span>记住密码</span>
-          </div>
-        </VanCol>
-        <!--        <VanCol>
-          <a class="extra_setting_for_reset_password" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">忘记密码?</a>
-        </VanCol> -->
-      </VanRow>
-      <VanButton class="login_btn btn" type="primary" block native-type="submit" :loading="loading">
-        登 录
-      </VanButton>
-      <VanButton
-        v-show="setting.getSetting()?.wxLoginAge && isWechat()"
-        class="wechat-login-btn btn"
-        type="primary"
-        block
-        native-type="button"
-        :loading="wxloading"
-        style="background-color: #07C160; border-color: #07C160; margin-top: 15px"
-        @click="wxLoginFun"
-      >
-        <VanIcon name="wechat" size="20px" />
-        微信登录
-      </VanButton>
-    </VanForm>
-  </div>
-</template>
-
-<style scoped lang="less">
-@import '@af-mobile-client-vue3/styles/login.less';
-</style>
+<script setup lang="ts">
+import type { FormInstance } from 'vant'
+import { LoginStateEnum, useFormRules, useLoginState } from '@af-mobile-client-vue3/hooks/useLogin'
+import GetAppDataService from '@af-mobile-client-vue3/plugins/AppData'
+import { getUserPermissions } from '@af-mobile-client-vue3/services/api/search'
+import { useSettingStore } from '@af-mobile-client-vue3/stores/modules/setting'
+import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
+import { funcToRouter, loadRoutes } from '@af-mobile-client-vue3/utils/routerUtil'
+import { secureStorageBatchWrite, secureStorageRead } from '@af-mobile-client-vue3/utils/secureStorage'
+import { isWechat } from '@af-mobile-client-vue3/utils/wechatUtil'
+import {
+  closeToast,
+  showDialog,
+  showFailToast,
+  showLoadingToast,
+  Switch,
+  Button as VanButton,
+  Col as VanCol,
+  Field as VanField,
+  Form as VanForm,
+  Icon as VanIcon,
+  Loading as VanLoading,
+  Row as VanRow,
+} from 'vant'
+import { computed, inject, onBeforeMount, onMounted, reactive, ref, unref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import 'vant/lib/switch/index.css'
+
+declare let WeixinJSBridge: any
+const { setLoginState, getLoginState } = useLoginState()
+const { getFormRules } = useFormRules()
+const userState = useUserStore()
+const router = useRouter()
+
+const formRef = ref<FormInstance>()
+const loading = ref(false)
+const wxloading = ref(false)
+const rememberMe = ref(false)
+const switchPassType = ref(true)
+const formData = reactive({
+  username: '',
+  password: '',
+})
+const route = useRoute()
+const setting = useSettingStore()
+
+const getShow = computed(() => (unref(getLoginState) === LoginStateEnum.LOGIN))
+
+const login: any = inject('$login')
+onBeforeMount(async () => {
+  if (isWechat() && setting.getSetting()?.wxAutoLogin) {
+    // 检测是否要开放微信登录
+    if (setting.getSetting()?.wechatLogin) {
+      try {
+        wxloading.value = true
+        if (route.query.code && route.query.state) {
+          const data = await userState.loginUnified({
+            unifiedCode: `${route.query.code}`,
+            tenantName: `${route.query.state}`,
+            loginMode: 'wechat',
+            resourceName: setting.getSetting()?.routerName || '智慧手机',
+          })
+          login.f = data
+          await Promise.all([GetAppDataService.load()])
+          const loginInfo = {
+            f: login.f,
+            jwt: login.f.id,
+            r: login.r,
+          }
+          userState.setLogin(loginInfo)
+          userState.setTenantName(route.query.state)
+          await afterGeneral(data.resources)
+
+          const toPath = decodeURIComponent((route.query?.redirect || '/') as string)
+          closeToast()
+          if (route.name === '/login')
+            await router.replace('/')
+          else await router.replace(toPath)
+        }
+        else {
+          if (userState.getTenantName() !== '') {
+            closeWindows()
+          }
+          else {
+            await showDialog({ message: '当前用户无登录权限' })
+            closeWindows()
+          }
+        }
+      }
+      catch {
+        await showDialog({ message: '当前用户无登录权限' })
+        closeWindows()
+      }
+      finally {
+        wxloading.value = false
+      }
+    }
+  }
+})
+function handleSubmit() {
+  formRef.value
+    ?.validate()
+    .then(async () => {
+      try {
+        loading.value = true
+        showLoadingToast('登录中...')
+        console.warn(setting)
+        const data: any = await userState.Login({
+          username: formData.username,
+          password: formData.password,
+          resourceName: setting.getSetting()?.routerName || '智慧手机',
+        })
+        login.f = data
+        await Promise.all([GetAppDataService.load()])
+        const loginInfo = {
+          f: login.f,
+          jwt: login.f.id,
+          r: login.r,
+        }
+        userState.setLogin(loginInfo)
+        const compatible = import.meta.env.VITE_APP_COMPATIBLE
+        if (compatible === 'OA')
+          await afterGeneral(data)
+        else
+          if (data.resources.data)
+            await afterGeneral(data.resources.data)
+          else
+            await afterGeneral(data.resources)
+
+        const toPath = decodeURIComponent((route.query?.redirect || '/') as string)
+        closeToast()
+        if (route.name === '/login')
+          await router.replace('/')
+        else await router.replace(toPath)
+      }
+      finally {
+        loading.value = false
+      }
+    })
+    .catch((e) => {
+      console.error(e)
+      showFailToast('用户名或密码错误')
+    })
+}
+function closeWindows() {
+  if (isWechat()) {
+    (window as any).WeixinJSBridge.call('closeWindow')
+  }
+  else {
+    // 关闭页面
+    if (navigator.userAgent.includes('Firefox') || navigator.userAgent.includes('Chrome')) {
+      window.open('about:blank', '_self')
+      window.close()
+    }
+    else {
+      window.opener = null
+      window.open('', '_self')
+      window.close()
+    }
+  }
+}
+
+async function afterGeneral(result) {
+  // 排序 functions 及其嵌套的 children
+  if (result.functions && Array.isArray(result.functions)) {
+    // 对顶层菜单进行排序
+    result.functions.sort((a, b) => (a.position || 0) - (b.position || 0))
+
+    // 对每个菜单的子项进行排序
+    for (const item of result.functions) {
+      if (item.children && Array.isArray(item.children)) {
+        item.children.sort((a, b) => (a.position || 0) - (b.position || 0))
+      }
+    }
+  }
+
+  const user: any = {
+    ...result,
+    username: result.ename,
+    avatar: result.avatar ? result.avatar : setting.getSetting()?.defaultAvatarUrl,
+  }
+  userState.setUserInfo(user)
+  // 如果result中没有返回 权限 需要主动获取权限列表
+  if (!result.permissions) {
+    result.permissions = await getUserPermissions(result.id)
+  }
+  userState.setPermissions(result.permissions)
+  userState.setRoles([{ id: 'admin', operation: ['add', 'edit', 'delete'] }])
+  // 加载路由
+  loadRoutes(funcToRouter(user.functions))
+
+  // 存储登录数据到本地缓存
+  secureStorageBatchWrite([
+    {
+      key: 'loginData',
+      value: {
+        username: formData.username,
+        password: formData.password,
+        rememberMe: rememberMe.value,
+      },
+    },
+    {
+      key: 'userData',
+      value: result,
+    },
+  ])
+
+  // 每次重新登录时，清除indexedDB缓存
+  // indexedDB.clear()
+}
+async function wxLoginFun() {
+  await localStorage.setItem('wechatLoginPending', 'true')
+  userState.getCode(setting.getSetting()?.tenantName)
+}
+async function wxLoginFunContinue(code, state) {
+  try {
+    wxloading.value = true
+    const data = await userState.loginUnified({
+      unifiedCode: `${code}`,
+      tenantName: `${state}`,
+      loginMode: 'wechat',
+      resourceName: setting.getSetting()?.routerName || '智慧手机',
+    })
+    login.f = data
+    await Promise.all([GetAppDataService.load()])
+    const loginInfo = {
+      f: login.f,
+      jwt: login.f.id,
+      r: login.r,
+    }
+    userState.setLogin(loginInfo)
+    userState.setTenantName(route.query.state)
+    await afterGeneral(data.resources)
+    const toPath = decodeURIComponent((route.query?.redirect || '/') as string)
+    closeToast()
+    if (route.name === '/login')
+      await router.replace('/')
+    else await router.replace(toPath)
+  }
+  finally {
+    wxloading.value = false
+  }
+}
+function getQueryParam(param: string): string | null {
+  const search = window.location.search || window.location.hash.split('?')[1] || ''
+  const params = new URLSearchParams(search)
+  return params.get(param)
+}
+onMounted(() => {
+  const pending = localStorage.getItem('wechatLoginPending')
+  const code = getQueryParam('code')
+  const state = getQueryParam('state')
+  if (pending && code && state) {
+    localStorage.removeItem('wechatLoginPending')
+    wxLoginFunContinue(code, state)
+  }
+  try {
+    // 手机登录获取本地缓存的登录数据
+    secureStorageRead('loginData', (result: any) => {
+      if (result.status === 'success') {
+        const res = JSON.parse(result.data.value)
+        if (res.rememberMe) {
+          formData.username = res.username
+          formData.password = res.password
+          rememberMe.value = res.rememberMe
+        }
+      }
+    })
+  }
+  catch (e) {
+    console.warn('读取本地缓存失败', e)
+    // 未拿到跳过
+  }
+})
+</script>
+
+<template>
+  <div v-show="wxloading" class="login_form">
+    <VanRow justify="center">
+      <VanLoading type="spinner" size="30px" vertical color="#1989fa">
+        自动登录中...
+      </VanLoading>
+    </VanRow>
+  </div>
+  <div v-if="getShow && !wxloading" class="login_form form">
+    <VanForm ref="formRef" @submit="handleSubmit">
+      <VanField
+        v-model="formData.username"
+        class="form_field"
+        name="username"
+        label="账号"
+        placeholder="请输入账号"
+        label-align="top"
+        :rules="getFormRules.username"
+      />
+      <VanField
+        v-model="formData.password"
+        class="form_field"
+        :type="switchPassType ? 'password' : 'text'"
+        name="password"
+        label="密码"
+        placeholder="请输入密码"
+        label-align="top"
+        :rules="getFormRules.password"
+        @click-right-icon="switchPassType = !switchPassType"
+      >
+        <template #right-icon>
+          <VanIcon v-if="switchPassType" name="closed-eye" color="rgb(56, 149, 250)" />
+          <VanIcon v-else name="eye-o" color="rgb(56, 149, 250)" />
+        </template>
+      </VanField>
+
+      <VanRow justify="space-between" class="extra_setting">
+        <VanCol>
+          <div class="extra_setting_for_remember_password">
+            <Switch v-model="rememberMe" size="12px" />
+            <span>记住密码</span>
+          </div>
+        </VanCol>
+        <!--        <VanCol>
+          <a class="extra_setting_for_reset_password" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">忘记密码?</a>
+        </VanCol> -->
+      </VanRow>
+      <VanButton class="login_btn btn" type="primary" block native-type="submit" :loading="loading">
+        登 录
+      </VanButton>
+      <VanButton
+        v-show="setting.getSetting()?.wxLoginAge && isWechat()"
+        class="wechat-login-btn btn"
+        type="primary"
+        block
+        native-type="button"
+        :loading="wxloading"
+        style="background-color: #07C160; border-color: #07C160; margin-top: 15px"
+        @click="wxLoginFun"
+      >
+        <VanIcon name="wechat" size="20px" />
+        微信登录
+      </VanButton>
+    </VanForm>
+  </div>
+</template>
+
+<style scoped lang="less">
+@import '@af-mobile-client-vue3/styles/login.less';
+</style>