import { useCallback, useMemo, useState } from 'react';
|
import { ProTable } from '@ant-design/pro-components';
|
import { createAuditLogColumns } from './columns';
|
import AuditLogDetailDrawer from './components/AuditLogDetailDrawer';
|
import { getAuditLogList } from './service';
|
import type { AuditLogListQuery, AuditLogVO } from './types';
|
|
const AuditLogs = () => {
|
const [detail, setDetail] = useState<AuditLogVO | null>(null);
|
|
const openDetail = useCallback((record: AuditLogVO) => {
|
setDetail(record);
|
}, []);
|
|
const closeDetail = useCallback(() => {
|
setDetail(null);
|
}, []);
|
|
const columns = useMemo(() => createAuditLogColumns({ onDetail: openDetail }), [openDetail]);
|
|
const fetchList = useCallback(
|
(params: AuditLogListQuery) =>
|
getAuditLogList({
|
page: params.current,
|
size: params.pageSize,
|
module: params.module,
|
action: params.action,
|
entityType: params.entityType,
|
resultStatus: params.resultStatus,
|
operatorId: params.operatorId,
|
start: params.start,
|
end: params.end,
|
}).then((result) => ({
|
data: result.records ?? [],
|
total: result.total ?? 0,
|
success: true,
|
})),
|
[],
|
);
|
|
return (
|
<div className="audit-log-page">
|
<ProTable<AuditLogVO, AuditLogListQuery>
|
rowKey="logId"
|
columns={columns}
|
cardProps={{ bodyStyle: { padding: 20 } }}
|
search={{ labelWidth: 'auto', defaultCollapsed: false }}
|
scroll={{ x: 1430 }}
|
options={false}
|
pagination={{
|
defaultPageSize: 10,
|
showSizeChanger: true,
|
hideOnSinglePage: false,
|
showTotal: (total) => `共 ${total} 条`,
|
}}
|
request={fetchList}
|
/>
|
|
<AuditLogDetailDrawer open={detail !== null} record={detail} onClose={closeDetail} />
|
</div>
|
);
|
};
|
|
export default AuditLogs;
|
