feat: 登录页改造

src/components/Table/index.ts

@@ -15,7 +15,6 @@ export interface TableExpose {
   setColumn: (columnProps: TableSetProps[]) => void
   addColumn: (column: TableColumn, index?: number) => void
   delColumn: (field: string) => void
-  selections: Recordable[]
   elTableRef: ComponentRef<typeof ElTable>
 }
 

src/components/Table/src/Table.vue

@@ -230,18 +230,11 @@ export default defineComponent({
       }
     }
 
-    const selections = ref<Recordable[]>([])
-
-    const selectionChange = (selection: Recordable[]) => {
-      selections.value = selection
-    }
-
     expose({
       setProps,
       setColumn,
       delColumn,
       addColumn,
-      selections,
       elTableRef
     })
 
@@ -409,12 +402,7 @@ export default defineComponent({
 
     return () => (
       <div v-loading={unref(getProps).loading}>
-        <ElTable
+        <ElTable ref={elTableRef} data={unref(getProps).data} {...unref(getBindValue)}>
-          ref={elTableRef}
-          data={unref(getProps).data}
-          onSelection-change={selectionChange}
-          {...unref(getBindValue)}
-        >
           {{
             default: () => renderTableColumn(),
             empty: () => getSlot(slots, 'empty') || unref(getProps).emptyText,

src/hooks/web/useTable.ts

@@ -143,15 +143,6 @@ export const useTable = (config: UseTableConfig) => {
       table?.delColumn(field)
     },
 
-    /**
-     * @description 获取全选数据
-     * @returns
-     */
-    getSelections: async () => {
-      const table = await getTable()
-      return table?.selections || []
-    },
-
     /**
      * @description 获取ElTable组件的实例
      * @returns ElTable instance

src/locales/en.ts

@@ -421,7 +421,8 @@ export default {
     delOrAddAction: 'Delete or add action',
     showOrHiddenStripe: 'Show or hidden stripe',
     showOrHiddenBorder: 'Show or hidden border',
-    fixedHeaderOrAuto: 'Fixed header or auto'
+    fixedHeaderOrAuto: 'Fixed header or auto',
+    getSelections: 'Get selections'
   },
   richText: {
     richText: 'Rich text',

src/locales/zh-CN.ts

@@ -416,7 +416,8 @@ export default {
     delOrAddAction: '删除/添加操作列',
     showOrHiddenStripe: '显示/隐藏斑马纹',
     showOrHiddenBorder: '显示/隐藏边框',
-    fixedHeaderOrAuto: '固定头部/自动'
+    fixedHeaderOrAuto: '固定头部/自动',
+    getSelections: '获取多选数据'
   },
   richText: {
     richText: '富文本',

src/permission.ts

@@ -26,52 +26,52 @@ const whiteList = ['/login'] // 不重定向白名单
 router.beforeEach(async (to, from, next) => {
   start()
   loadStart()
-  // if (!wsCache.get(appStore.getUserInfo)) {
+  if (wsCache.get(appStore.getUserInfo)) {
-  if (to.path === '/login') {
+    if (to.path === '/login') {
-    next({ path: '/' })
+      next({ path: '/' })
-  } else {
-    if (!dictStore.getIsSetDict) {
-      // 获取所有字典
-      const res = await getDictApi()
-      if (res) {
-        dictStore.setDictObj(res.data)
-        dictStore.setIsSetDict(true)
-      }
-    }
-    if (permissionStore.getIsAddRouters) {
-      next()
-      return
-    }
-
-    // 开发者可根据实际情况进行修改
-    const roleRouters = wsCache.get('roleRouters') || []
-    const userInfo = wsCache.get(appStore.getUserInfo)
-
-    // 是否使用动态路由
-    if (appStore.getDynamicRouter) {
-      userInfo.role === 'admin'
-        ? await permissionStore.generateRoutes('admin', roleRouters as AppCustomRouteRecordRaw[])
-        : await permissionStore.generateRoutes('test', roleRouters as string[])
     } else {
-      await permissionStore.generateRoutes('none')
+      if (!dictStore.getIsSetDict) {
-    }
+        // 获取所有字典
+        const res = await getDictApi()
+        if (res) {
+          dictStore.setDictObj(res.data)
+          dictStore.setIsSetDict(true)
+        }
+      }
+      if (permissionStore.getIsAddRouters) {
+        next()
+        return
+      }
 
-    permissionStore.getAddRouters.forEach((route) => {
+      // 开发者可根据实际情况进行修改
-      router.addRoute(route as unknown as RouteRecordRaw) // 动态添加可访问路由表
+      const roleRouters = wsCache.get('roleRouters') || []
-    })
+      const userInfo = wsCache.get(appStore.getUserInfo)
-    const redirectPath = from.query.redirect || to.path
+
-    const redirect = decodeURIComponent(redirectPath as string)
+      // 是否使用动态路由
-    const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect }
+      if (appStore.getDynamicRouter) {
-    permissionStore.setIsAddRouters(true)
+        userInfo.role === 'admin'
-    next(nextData)
+          ? await permissionStore.generateRoutes('admin', roleRouters as AppCustomRouteRecordRaw[])
+          : await permissionStore.generateRoutes('test', roleRouters as string[])
+      } else {
+        await permissionStore.generateRoutes('none')
+      }
+
+      permissionStore.getAddRouters.forEach((route) => {
+        router.addRoute(route as unknown as RouteRecordRaw) // 动态添加可访问路由表
+      })
+      const redirectPath = from.query.redirect || to.path
+      const redirect = decodeURIComponent(redirectPath as string)
+      const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect }
+      permissionStore.setIsAddRouters(true)
+      next(nextData)
+    }
+  } else {
+    if (whiteList.indexOf(to.path) !== -1) {
+      next()
+    } else {
+      next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
+    }
   }
-  // } else {
-  //   if (whiteList.indexOf(to.path) !== -1) {
-  //     next()
-  //   } else {
-  //     next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
-  //   }
-  // }
 })
 
 router.afterEach((to) => {

src/views/Components/Table/UseTableDemo.vue

@@ -207,6 +207,12 @@ const fixedHeaderOrAuto = () => {
     height.value = 'auto'
   }
 }
+
+const getSelections = async () => {
+  const elTableRef = await getElTableExpose()
+  const selections = elTableRef?.getSelectionRows()
+  console.log(selections)
+}
 </script>
 
 <template>
@@ -236,6 +242,8 @@ const fixedHeaderOrAuto = () => {
     <ElButton @click="showOrHiddenStripe">{{ t('tableDemo.showOrHiddenStripe') }}</ElButton>
 
     <ElButton @click="fixedHeaderOrAuto">{{ t('tableDemo.fixedHeaderOrAuto') }}</ElButton>
+
+    <ElButton @click="getSelections">{{ t('tableDemo.getSelections') }}</ElButton>
   </ContentWrap>
   <ContentWrap :title="`UseTable ${t('tableDemo.example')}`">
     <Table

src/views/Login/components/LoginForm.vue

@@ -1,6 +1,6 @@
-<script setup lang="ts">
+<script setup lang="tsx">
-import { reactive, ref, unref, watch } from 'vue'
+import { reactive, ref, watch } from 'vue'
-import { Form } from '@/components/Form'
+import { Form, FormSchema } from '@/components/Form'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ElButton, ElCheckbox, ElLink } from 'element-plus'
 import { useForm } from '@/hooks/web/useForm'
@@ -12,7 +12,7 @@ import { useRouter } from 'vue-router'
 import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
 import { UserType } from '@/api/login/types'
 import { useValidator } from '@/hooks/web/useValidator'
-import { FormSchema } from '@/types/form'
+import { Icon } from '@/components/Icon'
 
 const { required } = useValidator()
 
@@ -38,6 +38,13 @@ const schema = reactive<FormSchema[]>([
     field: 'title',
     colProps: {
       span: 24
+    },
+    formItemProps: {
+      slots: {
+        default: () => {
+          return <h2 class="text-2xl font-bold text-center w-[100%]">{t('login.login')}</h2>
+        }
+      }
     }
   },
   {
@@ -71,12 +78,48 @@ const schema = reactive<FormSchema[]>([
     field: 'tool',
     colProps: {
       span: 24
+    },
+    formItemProps: {
+      slots: {
+        default: () => {
+          return (
+            <>
+              <div class="flex justify-between items-center w-[100%]">
+                <ElCheckbox v-model={remember.value} label={t('login.remember')} size="small" />
+                <ElLink type="primary" underline={false}>
+                  {t('login.forgetPassword')}
+                </ElLink>
+              </div>
+            </>
+          )
+        }
+      }
     }
   },
   {
     field: 'login',
     colProps: {
       span: 24
+    },
+    formItemProps: {
+      slots: {
+        default: () => {
+          return (
+            <>
+              <div class="w-[100%]">
+                <ElButton loading={loading.value} type="primary" class="w-[100%]" onClick={signIn}>
+                  {t('login.login')}
+                </ElButton>
+              </div>
+              <div class="w-[100%] mt-15px">
+                <ElButton class="w-[100%]" onClick={toRegister}>
+                  {t('login.register')}
+                </ElButton>
+              </div>
+            </>
+          )
+        }
+      }
     }
   },
   {
@@ -91,6 +134,42 @@ const schema = reactive<FormSchema[]>([
     field: 'otherIcon',
     colProps: {
       span: 24
+    },
+    formItemProps: {
+      slots: {
+        default: () => {
+          return (
+            <>
+              <div class="flex justify-between w-[100%]">
+                <Icon
+                  icon="ant-design:github-filled"
+                  size={iconSize}
+                  class="cursor-pointer ant-icon"
+                  color={iconColor}
+                />
+                <Icon
+                  icon="ant-design:wechat-filled"
+                  size={iconSize}
+                  class="cursor-pointer ant-icon"
+                  color={iconColor}
+                />
+                <Icon
+                  icon="ant-design:alipay-circle-filled"
+                  size={iconSize}
+                  color={iconColor}
+                  class="cursor-pointer ant-icon"
+                />
+                <Icon
+                  icon="ant-design:weibo-circle-filled"
+                  size={iconSize}
+                  color={iconColor}
+                  class="cursor-pointer ant-icon"
+                />
+              </div>
+            </>
+          )
+        }
+      }
     }
   }
 ])
@@ -99,7 +178,8 @@ const iconSize = 30
 
 const remember = ref(false)
 
-const { register, elFormRef, methods } = useForm()
+const { formRegister, formMethods } = useForm()
+const { getFormData, getElFormExpose } = formMethods
 
 const loading = ref(false)
 
@@ -126,11 +206,10 @@ const signIn = async () => {
   permissionStore.setIsAddRouters(true)
   push({ path: redirect.value || permissionStore.addRouters[0].path })
 
-  const formRef = unref(elFormRef)
+  const formRef = await getElFormExpose()
   await formRef?.validate(async (isValid) => {
     if (isValid) {
       loading.value = true
-      const { getFormData } = methods
       const formData = await getFormData<UserType>()
 
       try {
@@ -159,7 +238,6 @@ const signIn = async () => {
 
 // 获取角色信息
 const getRole = async () => {
-  const { getFormData } = methods
   const formData = await getFormData<UserType>()
   const params = {
     roleName: formData.username
@@ -199,66 +277,13 @@ const toRegister = () => {
     hide-required-asterisk
     size="large"
     class="dark:(border-1 border-[var(--el-border-color)] border-solid)"
-    @register="register"
+    @register="formRegister"
-  >
+  />
-    <template #title>
-      <h2 class="text-2xl font-bold text-center w-[100%]">{{ t('login.login') }}</h2>
-    </template>
-
-    <template #tool>
-      <div class="flex justify-between items-center w-[100%]">
-        <ElCheckbox v-model="remember" :label="t('login.remember')" size="small" />
-        <ElLink type="primary" :underline="false">{{ t('login.forgetPassword') }}</ElLink>
-      </div>
-    </template>
-
-    <template #login>
-      <div class="w-[100%]">
-        <ElButton :loading="loading" type="primary" class="w-[100%]" @click="signIn">
-          {{ t('login.login') }}
-        </ElButton>
-      </div>
-      <div class="w-[100%] mt-15px">
-        <ElButton class="w-[100%]" @click="toRegister">
-          {{ t('login.register') }}
-        </ElButton>
-      </div>
-    </template>
-
-    <template #otherIcon>
-      <div class="flex justify-between w-[100%]">
-        <Icon
-          icon="ant-design:github-filled"
-          :size="iconSize"
-          class="cursor-pointer anticon"
-          :color="iconColor"
-        />
-        <Icon
-          icon="ant-design:wechat-filled"
-          :size="iconSize"
-          class="cursor-pointer anticon"
-          :color="iconColor"
-        />
-        <Icon
-          icon="ant-design:alipay-circle-filled"
-          :size="iconSize"
-          :color="iconColor"
-          class="cursor-pointer anticon"
-        />
-        <Icon
-          icon="ant-design:weibo-circle-filled"
-          :size="iconSize"
-          :color="iconColor"
-          class="cursor-pointer anticon"
-        />
-      </div>
-    </template>
-  </Form>
 </template>
 
 <style lang="less" scoped>
-:deep(.anticon) {
+:deep(.ant-icon) {
-  &:hover {
+  & > svg:hover {
     color: var(--el-color-primary) !important;
   }
 }

src/views/Login/components/RegisterForm.vue

@@ -1,15 +1,15 @@
-<script setup lang="ts">
+<script setup lang="tsx">
-import { Form } from '@/components/Form'
+import { Form, FormSchema } from '@/components/Form'
-import { reactive, ref, unref } from 'vue'
+import { reactive, ref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useForm } from '@/hooks/web/useForm'
 import { ElButton, ElInput, FormRules } from 'element-plus'
 import { useValidator } from '@/hooks/web/useValidator'
-import { FormSchema } from '@/types/form'
 
 const emit = defineEmits(['to-login'])
 
-const { register, elFormRef } = useForm()
+const { formRegister, formMethods } = useForm()
+const { getElFormExpose } = formMethods
 
 const { t } = useI18n()
 
@@ -20,6 +20,13 @@ const schema = reactive<FormSchema[]>([
     field: 'title',
     colProps: {
       span: 24
+    },
+    formItemProps: {
+      slots: {
+        default: () => {
+          return <h2 class="text-2xl font-bold text-center w-[100%]">{t('login.register')}</h2>
+        }
+      }
     }
   },
   {
@@ -71,12 +78,48 @@ const schema = reactive<FormSchema[]>([
     label: t('login.code'),
     colProps: {
       span: 24
+    },
+    formItemProps: {
+      slots: {
+        default: (formData) => {
+          return (
+            <div class="w-[100%] flex">
+              <ElInput v-model={formData.code} placeholder={t('login.codePlaceholder')} />
+            </div>
+          )
+        }
+      }
     }
   },
   {
     field: 'register',
     colProps: {
       span: 24
+    },
+    formItemProps: {
+      slots: {
+        default: () => {
+          return (
+            <>
+              <div class="w-[100%]">
+                <ElButton
+                  type="primary"
+                  class="w-[100%]"
+                  loading={loading.value}
+                  onClick={loginRegister}
+                >
+                  {t('login.register')}
+                </ElButton>
+              </div>
+              <div class="w-[100%] mt-15px">
+                <ElButton class="w-[100%]" onClick={toLogin}>
+                  {t('login.hasUser')}
+                </ElButton>
+              </div>
+            </>
+          )
+        }
+      }
     }
   }
 ])
@@ -95,7 +138,7 @@ const toLogin = () => {
 const loading = ref(false)
 
 const loginRegister = async () => {
-  const formRef = unref(elFormRef)
+  const formRef = await getElFormExpose()
   formRef?.validate(async (valid) => {
     if (valid) {
       try {
@@ -117,29 +160,6 @@ const loginRegister = async () => {
     hide-required-asterisk
     size="large"
     class="dark:(border-1 border-[var(--el-border-color)] border-solid)"
-    @register="register"
+    @register="formRegister"
-  >
+  />
-    <template #title>
-      <h2 class="text-2xl font-bold text-center w-[100%]">{{ t('login.register') }}</h2>
-    </template>
-
-    <template #code="form">
-      <div class="w-[100%] flex">
-        <ElInput v-model="form['code']" :placeholder="t('login.codePlaceholder')" />
-      </div>
-    </template>
-
-    <template #register>
-      <div class="w-[100%]">
-        <ElButton type="primary" class="w-[100%]" :loading="loading" @click="loginRegister">
-          {{ t('login.register') }}
-        </ElButton>
-      </div>
-      <div class="w-[100%] mt-15px">
-        <ElButton class="w-[100%]" @click="toLogin">
-          {{ t('login.hasUser') }}
-        </ElButton>
-      </div>
-    </template>
-  </Form>
 </template>