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 import request from '@/config/axios' 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 export const getLoginLogPageApi = (params) => { 16 export const getLoginLogPageApi = (params) => {
5 return request.get({ url: '/system/login-log/page', params }) 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 <script setup lang="ts"> 31 <script setup lang="ts">
  32 +// 全局相关的 import
2 import { ref } from 'vue' 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 import { useI18n } from '@/hooks/web/useI18n' 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 const { t } = useI18n() // 国际化 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 const dialogVisible = ref(false) // 是否显示弹出层 50 const dialogVisible = ref(false) // 是否显示弹出层
20 const dialogTitle = ref(t('action.detail')) // 弹出层标题 51 const dialogTitle = ref(t('action.detail')) // 弹出层标题
21 -const detailRef = ref() // 详情 Ref  
22 const handleDetail = async (row: LoginLogVO) => { 52 const handleDetail = async (row: LoginLogVO) => {
23 // 设置数据 53 // 设置数据
24 detailRef.value = row 54 detailRef.value = row
25 dialogVisible.value = true 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 </script> 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 import { reactive } from 'vue' 1 import { reactive } from 'vue'
2 -import { DICT_TYPE } from '@/utils/dict'  
3 import { useI18n } from '@/hooks/web/useI18n' 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 const { t } = useI18n() // 国际化 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)