<script lang="ts" setup>
|
import type { ActionItem, BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import { reactive } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { useDrawer } from '@jnpf/ui/drawer';
|
import { BasicVxeTable, TableAction, useVxeTable } from '@jnpf/ui/vxeTable';
|
|
import dayjs from 'dayjs';
|
|
import { batchDelLog, delLog, getLogList } from '#/api/system/log';
|
import { $t } from '#/locales';
|
|
import Detail from '../requestLog/Detail.vue';
|
|
defineOptions({ name: 'SysLogErrorLog' });
|
|
interface State {
|
category: string;
|
}
|
const state = reactive<State>({
|
category: '4',
|
});
|
const { createMessage, createConfirm } = useMessage();
|
|
const columns: BasicColumn[] = [
|
{ title: '操作时间', dataIndex: 'creatorTime', width: 150, format: 'date|YYYY-MM-DD HH:mm:ss' },
|
{ title: '用户', dataIndex: 'userName', width: 120 },
|
{ title: 'IP地址', dataIndex: 'ipAddress', width: 160 },
|
{ title: '地点', dataIndex: 'ipAddressName', width: 120 },
|
{ title: '浏览器', dataIndex: 'browser', width: 120 },
|
{ title: '操作系统', dataIndex: 'platForm', width: 120 },
|
{ title: '请求方式', dataIndex: 'requestMethod', width: 80 },
|
{ title: '请求地址', dataIndex: 'requestUrl', minWidth: 200 },
|
];
|
|
const [registerTable, { reload, getSelectRows }] = useVxeTable({
|
api: getLogList,
|
rowSelection: { type: 'checkbox' },
|
clickToRowSelect: false,
|
clearSelectOnPageChange: true,
|
searchInfo: { category: state.category },
|
useSearchForm: true,
|
formConfig: {
|
schemas: [
|
{
|
field: 'keyword',
|
label: $t('common.keyword'),
|
component: 'Input',
|
componentProps: {
|
placeholder: $t('common.enterKeyword'),
|
submitOnPressEnter: true,
|
},
|
},
|
{
|
field: 'requestMethod',
|
label: '请求方式',
|
component: 'Select',
|
componentProps: {
|
placeholder: '请选择',
|
options: [
|
{ fullName: 'GET', id: 'GET' },
|
{ fullName: 'POST', id: 'POST' },
|
{ fullName: 'PUT', id: 'PUT' },
|
{ fullName: 'DELETE', id: 'DELETE' },
|
],
|
},
|
},
|
{
|
field: 'pickerVal',
|
label: '操作时间',
|
component: 'DateRange',
|
componentProps: {
|
format: 'YYYY-MM-DD HH:mm:ss',
|
showTime: { defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('23:59:59', 'HH:mm:ss')] },
|
placeholder: ['开始时间', '结束时间'],
|
},
|
},
|
],
|
fieldMapToTime: [['pickerVal', ['startTime', 'endTime']]],
|
},
|
columns,
|
actionColumn: {
|
width: 50,
|
title: '操作',
|
dataIndex: 'action',
|
},
|
});
|
const [registerDetailDetail, { openDrawer }] = useDrawer();
|
|
function handleDelete() {
|
const list: any[] = getSelectRows() || [];
|
if (!list.length) return createMessage.error($t('common.selectDataTip'));
|
const query = { ids: list.map((item) => item.id) };
|
createConfirm({
|
iconType: 'warning',
|
title: $t('common.tipTitle'),
|
content: $t('common.batchDelTip'),
|
onOk: () => {
|
delLog(query).then((res) => {
|
createMessage.success(res.msg);
|
reload();
|
});
|
},
|
});
|
}
|
function handleDelAll() {
|
createConfirm({
|
iconType: 'warning',
|
title: $t('common.tipTitle'),
|
content: '此操作会将所有日志删除，是否继续?',
|
onOk: () => {
|
batchDelLog(state.category).then((res) => {
|
createMessage.success(res.msg);
|
reload();
|
});
|
},
|
});
|
}
|
function getTableActions(record): ActionItem[] {
|
return [
|
{
|
label: $t('common.detailText'),
|
onClick: toDetail.bind(null, record.id),
|
},
|
];
|
}
|
function toDetail(id) {
|
openDrawer(true, { id, category: state.category });
|
}
|
</script>
|
<template>
|
<div class="jnpf-content-wrapper">
|
<div class="jnpf-content-wrapper-center">
|
<div class="jnpf-content-wrapper-content">
|
<BasicVxeTable @register="registerTable">
|
<template #tableTitle>
|
<a-button type="error" pre-icon="icon-ym icon-ym-btn-clearn" @click="handleDelete">{{ $t('common.delText') }}</a-button>
|
<a-button type="link" danger @click="handleDelAll">一键清空</a-button>
|
</template>
|
<template #action="{ record }">
|
<TableAction :actions="getTableActions(record)" />
|
</template>
|
</BasicVxeTable>
|
</div>
|
</div>
|
<Detail @register="registerDetailDetail" />
|
</div>
|
</template>
|
