refactor: operatelog

plp
xingyu4j 3 years ago
parent 4a692ed28c
commit f09a1a4b8e

@ -1,10 +1,40 @@
import request from '@/config/axios' import request from '@/config/axios'
export type OperateLogVO = {
id: number
userNickname: string
traceId: string
userId: number
module: string
name: string
type: number
content: string
exts: object
requestMethod: string
requestUrl: string
userIp: string
userAgent: string
javaMethod: string
javaMethodArgs: string
startTime: string
duration: number
resultCode: number
resultMsg: string
resultData: string
}
export interface OperateLogPageReqVO extends BasePage {
module?: string
userNickname?: string
type?: number
success?: boolean
startTime?: string[]
}
// 查询操作日志列表 // 查询操作日志列表
export const getOperateLogPageApi = (params) => { export const getOperateLogPageApi = (params: OperateLogPageReqVO) => {
return request.get({ url: '/system/operate-log/page', params }) return request.get({ url: '/system/operate-log/page', params })
} }
// 导出操作日志 // 导出操作日志
export const exportOperateLogApi = (params) => { export const exportOperateLogApi = (params: OperateLogPageReqVO) => {
return request.download({ url: '/system/operate-log/export', params }) return request.download({ url: '/system/operate-log/export', params })
} }

@ -1,22 +0,0 @@
export type OperateLogVO = {
id: number
userNickname: string
traceId: string
userId: number
module: string
name: string
type: number
content: string
exts: object
requestMethod: string
requestUrl: string
userIp: string
userAgent: string
javaMethod: string
javaMethodArgs: string
startTime: string
duration: number
resultCode: number
resultMsg: string
resultData: string
}

@ -20,6 +20,7 @@ export type VxeCrudSchema = {
primaryType?: VxeColumnPropTypes.Type primaryType?: VxeColumnPropTypes.Type
// 是否开启操作栏插槽 // 是否开启操作栏插槽
action?: boolean action?: boolean
actionWidth?: string
columns: VxeCrudColumns[] columns: VxeCrudColumns[]
} }
type VxeCrudColumns = Omit<VxeTableColumn, 'children'> & { type VxeCrudColumns = Omit<VxeTableColumn, 'children'> & {
@ -204,7 +205,7 @@ const filterTableSchema = (crudSchema: VxeCrudSchema): VxeGridPropTypes.Columns
const tableSchemaItem = { const tableSchemaItem = {
title: t('table.action'), title: t('table.action'),
field: 'actionbtns', field: 'actionbtns',
width: '240px', width: crudSchema.actionWidth ? crudSchema.actionWidth : '240px',
slots: { slots: {
default: 'actionbtns_default' default: 'actionbtns_default'
} }

@ -10,11 +10,6 @@ import { DeptVO } from '@/api/system/dept/types'
import { useMessage } from '@/hooks/web/useMessage' import { useMessage } from '@/hooks/web/useMessage'
import { getListSimpleUsersApi } from '@/api/system/user' import { getListSimpleUsersApi } from '@/api/system/user'
const message = useMessage() const message = useMessage()
interface Tree {
id: number
name: string
children?: Tree[]
}
const defaultProps = { const defaultProps = {
children: 'children', children: 'children',

@ -9,6 +9,7 @@ const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id', primaryKey: 'id',
primaryType: 'seq', primaryType: 'seq',
action: true, action: true,
actionWidth: '80px',
columns: [ columns: [
{ {
title: '日志类型', title: '日志类型',

@ -1,61 +1,16 @@
<script setup lang="ts">
import dayjs from 'dayjs'
import { useTable } from '@/hooks/web/useTable'
import { allSchemas } from './operatelog.data'
import { DICT_TYPE } from '@/utils/dict'
import { useI18n } from '@/hooks/web/useI18n'
import type { OperateLogVO } from '@/api/system/operatelog/types'
import * as OperateLogApi from '@/api/system/operatelog'
import { ref } from 'vue'
const { t } = useI18n() //
// ========== ==========
const { register, tableObject, methods } = useTable<OperateLogVO>({
getListApi: OperateLogApi.getOperateLogPageApi,
exportListApi: OperateLogApi.exportOperateLogApi
})
// ========== ==========
const detailRef = ref() // Ref
const dialogVisible = ref(false) //
const dialogTitle = ref(t('action.detail')) //
const { getList, setSearchParams, exportList } = methods
//
const handleDetail = (row: OperateLogVO) => {
//
detailRef.value = row
dialogVisible.value = true
}
getList()
</script>
<template> <template>
<ContentWrap> <ContentWrap>
<Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" /> <!-- 列表 -->
</ContentWrap> <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
<ContentWrap> <!-- 操作新增 -->
<!-- 操作工具栏 --> <template #toolbar_buttons>
<div class="mb-10px"> <XButton
<el-button type="warning"
type="warning" preIcon="ep:download"
v-hasPermi="['system:operate-log:export']" :title="t('action.export')"
:loading="tableObject.exportLoading" v-hasPermi="['system:operate-log:export']"
@click="exportList('操作日志.xls')" @click="handleExport()"
> />
<Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') }}
</el-button>
</div>
<Table
:columns="allSchemas.tableColumns"
:selection="false"
:data="tableObject.tableList"
:loading="tableObject.loading"
:pagination="{
total: tableObject.total
}"
v-model:pageSize="tableObject.pageSize"
v-model:currentPage="tableObject.currentPage"
@register="register"
>
<template #type="{ row }">
<DictTag :type="DICT_TYPE.SYSTEM_OPERATE_TYPE" :value="row.type" />
</template> </template>
<template #duration="{ row }"> <template #duration="{ row }">
<span>{{ row.duration + 'ms' }}</span> <span>{{ row.duration + 'ms' }}</span>
@ -63,35 +18,68 @@ getList()
<template #resultCode="{ row }"> <template #resultCode="{ row }">
<span>{{ row.resultCode === 0 ? '成功' : '失败' }}</span> <span>{{ row.resultCode === 0 ? '成功' : '失败' }}</span>
</template> </template>
<template #startTime="{ row }"> <template #actionbtns_default="{ row }">
<span>{{ dayjs(row.startTime).format('YYYY-MM-DD HH:mm:ss') }}</span> <!-- 操作详情 -->
<XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
</template> </template>
<template #action="{ row }"> </vxe-grid>
<el-button link type="primary" @click="handleDetail(row)">
<Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
</el-button>
</template>
</Table>
</ContentWrap> </ContentWrap>
<Dialog v-model="dialogVisible" :title="dialogTitle"> <!-- 弹窗 -->
<!-- 对话框(详情) --> <XModal id="postModel" v-model="dialogVisible" :title="dialogTitle">
<Descriptions :schema="allSchemas.detailSchema" :data="detailRef"> <template #default>
<template #resultCode="{ row }"> <!-- 对话框(详情) -->
<span>{{ row.resultCode === 0 ? '成功' : '失败' }}</span> <Descriptions :schema="allSchemas.detailSchema" :data="detailRef">
</template> <template #resultCode="{ row }">
<template #type="{ row }"> <span>{{ row.resultCode === 0 ? '成功' : '失败' }}</span>
<DictTag :type="DICT_TYPE.SYSTEM_OPERATE_TYPE" :value="row.type" /> </template>
</template> <template #duration="{ row }">
<template #duration="{ row }"> <span>{{ row.duration + 'ms' }}</span>
<span>{{ row.duration + 'ms' }}</span> </template>
</template> </Descriptions>
<template #startTime="{ row }"> </template>
<span>{{ dayjs(row.startTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
</template>
</Descriptions>
<!-- 操作按钮 -->
<template #footer> <template #footer>
<el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button> <!-- 按钮关闭 -->
<XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
</template> </template>
</Dialog> </XModal>
</template> </template>
<script setup lang="ts">
// import
import { ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { useVxeGrid } from '@/hooks/web/useVxeGrid'
import { VxeGridInstance } from 'vxe-table'
// import
import * as OperateLogApi from '@/api/system/operatelog'
import { allSchemas } from './operatelog.data'
import download from '@/utils/download'
const { t } = useI18n() //
//
const xGrid = ref<VxeGridInstance>() // Grid Ref
const { gridOptions } = useVxeGrid<OperateLogApi.OperateLogVO>({
allSchemas: allSchemas,
getListApi: OperateLogApi.getOperateLogPageApi
})
//
const dialogVisible = ref(false) //
const dialogTitle = ref('edit') //
const actionLoading = ref(false) // Loading
const detailRef = ref() // Ref
//
const handleDetail = (row: OperateLogApi.OperateLogVO) => {
//
detailRef.value = row
dialogVisible.value = true
}
//
const handleExport = async () => {
const queryParams = Object.assign(
{},
JSON.parse(JSON.stringify(xGrid.value?.getRefMaps().refForm.value.data))
)
const res = await OperateLogApi.exportOperateLogApi(queryParams)
download.excel(res, '岗位列表.xls')
}
</script>

@ -1,113 +1,84 @@
import { reactive } from 'vue' import { reactive } from 'vue'
import { DICT_TYPE } from '@/utils/dict' import { DICT_TYPE } from '@/utils/dict'
import { useI18n } from '@/hooks/web/useI18n' import { VxeCrudSchema, useVxeCrudSchemas } from '@/hooks/web/useVxeCrudSchemas'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
const { t } = useI18n() // 国际化 const crudSchemas = reactive<VxeCrudSchema>({
const crudSchemas = reactive<CrudSchema[]>([ primaryKey: 'id',
{ primaryType: 'seq',
label: t('common.index'), action: true,
field: 'id', actionWidth: '80px',
type: 'index', columns: [
form: { {
show: false title: '操作模块',
} field: 'module',
}, isSearch: true
{ },
label: '操作模块', {
field: 'module', title: '操作名',
search: { field: 'name'
show: true },
} {
}, title: '操作类型',
{ field: 'type',
label: '操作名', dictType: DICT_TYPE.SYSTEM_OPERATE_TYPE,
field: 'name' isSearch: true
}, },
{ {
label: '操作类型', title: '请求方法名',
field: 'type', field: 'requestMethod'
dictType: DICT_TYPE.SYSTEM_OPERATE_TYPE, },
search: { {
show: true title: '请求地址',
} field: 'requestUrl'
}, },
{ {
label: '请求方法名', title: '操作人员',
field: 'requestMethod' field: 'userNickname',
}, isSearch: true
{ },
label: '请求地址', {
field: 'requestUrl' title: '操作明细',
}, field: 'content',
{ isTable: false
label: '操作人员', },
field: 'userNickname', {
search: { title: '用户 IP',
show: true field: 'userIp',
} isTable: false
}, },
{ {
label: '操作明细', title: 'userAgent',
field: 'content', field: 'userAgent'
table: { },
show: false {
} title: '操作结果',
}, field: 'resultCode',
{ table: {
label: '用户 IP', slots: {
field: 'userIp', default: 'resultCode'
table: { }
show: false
}
},
{
label: 'userAgent',
field: 'userAgent'
},
{
label: '操作结果',
field: 'resultCode',
search: {
show: true,
component: 'Select',
componentProps: {
options: [
{ label: '成功', value: true },
{ label: '失败', value: false }
]
} }
}
},
{
label: '操作日期',
field: 'startTime',
form: {
show: false
}, },
search: { {
show: true, title: '操作日期',
component: 'DatePicker', field: 'startTime',
componentProps: { formatter: 'formatDate',
type: 'daterange', isForm: false,
valueFormat: 'YYYY-MM-DD HH:mm:ss', search: {
defaultTime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)] itemRender: {
name: 'XDataTimePicker'
}
} }
}
},
{
label: '执行时长',
field: 'duration'
},
{
label: t('table.action'),
field: 'action',
width: '120px',
form: {
show: false
}, },
detail: { {
show: false title: '执行时长',
field: 'duration',
table: {
slots: {
default: 'duration'
}
}
} }
} ]
]) })
export const { allSchemas } = useCrudSchemas(crudSchemas) export const { allSchemas } = useVxeCrudSchemas(crudSchemas)

@ -39,11 +39,6 @@ import { getAccessToken, getTenantId } from '@/utils/auth'
import { useMessage } from '@/hooks/web/useMessage' import { useMessage } from '@/hooks/web/useMessage'
const message = useMessage() const message = useMessage()
interface Tree {
id: number
name: string
children?: Tree[]
}
const defaultProps = { const defaultProps = {
children: 'children', children: 'children',

Loading…
Cancel
Save