BJ_ZTEITS-Developers / parking-cloud-yudao

Commit 866247959eff63969d391254b1a7625edcb5d78c

Authored by xingyu4j
1 parent 7250e23d

refactor： loginlog vxe

Inline Side-by-side
Showing 4 changed files with 103 additions and 149 deletions
yudao-ui-admin-vue3/src/api/system/loginLog/index.ts
  View file @8662479
1 1 import request from '@/config/axios'
2 2  
  3 +export interface LoginLogVO {
  4 + id: number
  5 + logType: number
  6 + traceId: number
  7 + userType: number
  8 + username: string
  9 + status: number
  10 + userIp: string
  11 + userAgent: string
  12 + createTime: string
  13 +}
  14 +
3 15 // 查询登录日志列表
4 16 export const getLoginLogPageApi = (params) => {
5 17 return request.get({ url: '/system/login-log/page', params })
... ...
yudao-ui-admin-vue3/src/api/system/loginLog/types.ts deleted
View file @7250e23
1   -export type LoginLogVO = {
2   - id: number
3   - logType: number
4   - traceId: number
5   - userType: number
6   - username: string
7   - status: number
8   - userIp: string
9   - userAgent: string
10   - createTime: string
11   -}
yudao-ui-admin-vue3/src/views/system/loginlog/index.vue
  View file @8662479
  1 +<template>
  2 + <ContentWrap>
  3 + <!-- 列表 -->
  4 + <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
  5 + <template #toolbar_buttons>
  6 + <XButton
  7 + type="primary"
  8 + preIcon="ep:download"
  9 + :title="t('action.export')"
  10 + @click="handleExport()"
  11 + />
  12 + </template>
  13 + <template #actionbtns_default="{ row }">
  14 + <!-- 操作：详情 -->
  15 + <XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
  16 + </template>
  17 + </vxe-grid>
  18 + </ContentWrap>
  19 + <!-- 弹窗 -->
  20 + <XModal id="postModel" v-model="dialogVisible" :title="dialogTitle">
  21 + <template #default>
  22 + <!-- 表单：详情 -->
  23 + <Descriptions :schema="allSchemas.detailSchema" :data="detailRef" />
  24 + </template>
  25 + <template #footer>
  26 + <!-- 按钮：关闭 -->
  27 + <XButton :title="t('dialog.close')" @click="dialogVisible = false" />
  28 + </template>
  29 + </XModal>
  30 +</template>
1 31 <script setup lang="ts">
  32 +// 全局相关的 import
2 33 import { ref } from 'vue'
3   -import dayjs from 'dayjs'
4   -import { useTable } from '@/hooks/web/useTable'
5   -import { allSchemas } from './loginLog.data'
6   -import { DICT_TYPE } from '@/utils/dict'
7   -import type { LoginLogVO } from '@/api/system/loginLog/types'
8   -import { getLoginLogPageApi, exportLoginLogApi } from '@/api/system/loginLog'
9 34 import { useI18n } from '@/hooks/web/useI18n'
  35 +import { useVxeGrid } from '@/hooks/web/useVxeGrid'
  36 +import { VxeGridInstance } from 'vxe-table'
  37 +import { allSchemas } from './loginLog.data'
  38 +import { getLoginLogPageApi, exportLoginLogApi, LoginLogVO } from '@/api/system/loginLog'
  39 +import download from '@/utils/download'
10 40  
11 41 const { t } = useI18n() // 国际化
12   -// ========== 列表相关 ==========
13   -const { register, tableObject, methods } = useTable<LoginLogVO>({
14   - getListApi: getLoginLogPageApi,
15   - exportListApi: exportLoginLogApi
  42 +// 列表相关的变量
  43 +const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
  44 +const { gridOptions } = useVxeGrid<LoginLogVO>({
  45 + allSchemas: allSchemas,
  46 + getListApi: getLoginLogPageApi
16 47 })
17   -const { getList, setSearchParams } = methods
18 48 // 详情操作
  49 +const detailRef = ref() // 详情 Ref
19 50 const dialogVisible = ref(false) // 是否显示弹出层
20 51 const dialogTitle = ref(t('action.detail')) // 弹出层标题
21   -const detailRef = ref() // 详情 Ref
22 52 const handleDetail = async (row: LoginLogVO) => {
23 53 // 设置数据
24 54 detailRef.value = row
25 55 dialogVisible.value = true
26 56 }
27   -getList()
  57 +// 导出操作
  58 +const handleExport = async () => {
  59 + const queryParams = Object.assign(
  60 + {},
  61 + JSON.parse(JSON.stringify(xGrid.value?.getRefMaps().refForm.value.data))
  62 + )
  63 + const res = await exportLoginLogApi(queryParams)
  64 + download.excel(res, '登录列表.xls')
  65 +}
28 66 </script>
29   -<template>
30   - <ContentWrap>
31   - <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
32   - </ContentWrap>
33   - <ContentWrap>
34   - <Table
35   - :columns="allSchemas.tableColumns"
36   - :selection="false"
37   - :data="tableObject.tableList"
38   - :loading="tableObject.loading"
39   - :pagination="{
40   - total: tableObject.total
41   - }"
42   - v-model:pageSize="tableObject.pageSize"
43   - v-model:currentPage="tableObject.currentPage"
44   - @register="register"
45   - >
46   - <template #logType="{ row }">
47   - <DictTag :type="DICT_TYPE.SYSTEM_LOGIN_TYPE" :value="row.logType" />
48   - </template>
49   - <template #result="{ row }">
50   - <DictTag :type="DICT_TYPE.SYSTEM_LOGIN_RESULT" :value="row.result" />
51   - </template>
52   - <template #createTime="{ row }">
53   - <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
54   - </template>
55   - <template #action="{ row }">
56   - <el-button link type="primary" @click="handleDetail(row)">
57   - <Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
58   - </el-button>
59   - </template>
60   - </Table>
61   - </ContentWrap>
62   - <Dialog v-model="dialogVisible" :title="dialogTitle" maxHeight="500px" width="50%">
63   - <!-- 对话框(详情) -->
64   - <Descriptions :schema="allSchemas.detailSchema" :data="detailRef">
65   - <template #logType="{ row }">
66   - <DictTag :type="DICT_TYPE.SYSTEM_LOGIN_TYPE" :value="row.logType" />
67   - </template>
68   - <template #result="{ row }">
69   - <DictTag :type="DICT_TYPE.SYSTEM_LOGIN_RESULT" :value="row.result" />
70   - </template>
71   - <template #createTime="{ row }">
72   - <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
73   - </template>
74   - </Descriptions>
75   - <!-- 操作按钮 -->
76   - <template #footer>
77   - <el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button>
78   - </template>
79   - </Dialog>
80   -</template>
... ...
yudao-ui-admin-vue3/src/views/system/loginlog/loginLog.data.ts
  View file @8662479
1 1 import { reactive } from 'vue'
2   -import { DICT_TYPE } from '@/utils/dict'
3 2 import { useI18n } from '@/hooks/web/useI18n'
4   -import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
  3 +import { DICT_TYPE } from '@/utils/dict'
  4 +import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
5 5 const { t } = useI18n() // 国际化
6   -const crudSchemas = reactive<CrudSchema[]>([
7   - {
8   - label: t('common.index'),
9   - field: 'id',
10   - type: 'index',
11   - form: {
12   - show: false
  6 +
  7 +// CrudSchema
  8 +const crudSchemas = reactive<VxeCrudSchema>({
  9 + primaryKey: 'id',
  10 + primaryType: 'seq',
  11 + action: true,
  12 + columns: [
  13 + {
  14 + title: '日志类型',
  15 + field: 'logType',
  16 + dictType: DICT_TYPE.SYSTEM_LOGIN_TYPE,
  17 + isSearch: true
13 18 },
14   - detail: {
15   - show: false
16   - }
17   - },
18   - {
19   - label: '日志类型',
20   - field: 'logType',
21   - dictType: DICT_TYPE.SYSTEM_LOGIN_TYPE,
22   - search: {
23   - show: true
24   - }
25   - },
26   - {
27   - label: '用户名称',
28   - field: 'username',
29   - search: {
30   - show: true
31   - }
32   - },
33   - {
34   - label: '登录地址',
35   - field: 'userIp',
36   - search: {
37   - show: true
38   - }
39   - },
40   - {
41   - label: 'userAgent',
42   - field: 'userAgent'
43   - },
44   - {
45   - label: '登陆结果',
46   - field: 'result',
47   - dictType: DICT_TYPE.SYSTEM_LOGIN_RESULT,
48   - search: {
49   - show: true
50   - }
51   - },
52   - {
53   - label: t('common.createTime'),
54   - field: 'createTime',
55   - form: {
56   - show: false
  19 + {
  20 + title: '用户名称',
  21 + field: 'username',
  22 + isSearch: true
57 23 },
58   - search: {
59   - show: true,
60   - component: 'DatePicker',
61   - componentProps: {
62   - type: 'daterange',
63   - valueFormat: 'YYYY-MM-DD HH:mm:ss',
64   - defaultTime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]
65   - }
66   - }
67   - },
68   - {
69   - label: t('table.action'),
70   - field: 'action',
71   - width: '120px',
72   - form: {
73   - show: false
  24 + {
  25 + title: '登录地址',
  26 + field: 'userIp',
  27 + isSearch: true
  28 + },
  29 + {
  30 + title: 'userAgent',
  31 + field: 'userAgent'
  32 + },
  33 + {
  34 + title: '登陆结果',
  35 + field: 'result',
  36 + dictType: DICT_TYPE.SYSTEM_LOGIN_RESULT,
  37 + isSearch: true
74 38 },
75   - detail: {
76   - show: false
  39 + {
  40 + title: t('common.createTime'),
  41 + field: 'createTime',
  42 + formatter: 'formatDate',
  43 + isForm: false
77 44 }
78   - }
79   -])
80   -export const { allSchemas } = useCrudSchemas(crudSchemas)
  45 + ]
  46 +})
  47 +export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
... ...