<script lang="ts" setup>
|
import type { BasicColumn, PaginationProps } from '@jnpf/ui/vxeTable';
|
|
import type { DmsFileCenterItem, DmsFileOperationLogItem } from '#/api/x/dms/fileCenter';
|
|
import { computed, ref } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
import { BasicVxeTable, useVxeTable } from '@jnpf/ui/vxeTable';
|
import { formatToDateTime } from '@jnpf/utils';
|
|
import { SearchOutlined } from '@ant-design/icons-vue';
|
|
import { getFileOperationLogs } from '#/api/x/dms/fileCenter';
|
|
const columns: BasicColumn[] = [
|
{ dataIndex: 'occurredAt', slots: { default: 'occurredAt' }, title: '操作时间', width: 180 },
|
{ dataIndex: 'operationContent', key: 'operationContent', title: '操作内容' },
|
];
|
const item = ref<DmsFileCenterItem>();
|
const records = ref<DmsFileOperationLogItem[]>([]);
|
const keyword = ref('');
|
const currentPage = ref(1);
|
const pageSize = ref(10);
|
const total = ref(0);
|
const loading = ref(false);
|
const loadFailed = ref(false);
|
const { createMessage } = useMessage();
|
const [registerModal] = useModalInner(init);
|
const [registerTable, { getPaginationRef }] = useVxeTable({
|
columns,
|
rowKey: 'id',
|
showIndexColumn: false,
|
showTableSetting: false,
|
});
|
|
const title = computed(() => `操作记录 - ${item.value?.fileName || item.value?.name || ''}`);
|
const pagination = computed<PaginationProps>(() => ({
|
current: currentPage.value,
|
pageSize: pageSize.value,
|
pageSizeOptions: ['10', '20', '50'],
|
showQuickJumper: total.value > pageSize.value,
|
showSizeChanger: true,
|
showTotal: (value) => `共 ${value} 条`,
|
total: total.value,
|
}));
|
|
function init(data: { item: DmsFileCenterItem }) {
|
item.value = data.item;
|
records.value = [];
|
keyword.value = '';
|
currentPage.value = 1;
|
pageSize.value = 10;
|
total.value = 0;
|
loadFailed.value = false;
|
void loadRecords();
|
}
|
|
async function loadRecords() {
|
if (!item.value) return;
|
loading.value = true;
|
loadFailed.value = false;
|
try {
|
const response = await getFileOperationLogs(item.value.id, {
|
currentPage: currentPage.value,
|
keyword: keyword.value.trim() || undefined,
|
pageSize: pageSize.value,
|
});
|
records.value = response.data.list || [];
|
total.value = response.data.total || 0;
|
currentPage.value = response.data.currentPage || currentPage.value;
|
pageSize.value = response.data.pageSize || pageSize.value;
|
} catch {
|
records.value = [];
|
total.value = 0;
|
loadFailed.value = true;
|
createMessage.error('操作记录加载失败');
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
function search() {
|
currentPage.value = 1;
|
void loadRecords();
|
}
|
|
function clearSearch() {
|
keyword.value = '';
|
currentPage.value = 1;
|
void loadRecords();
|
}
|
|
function handleTableChange() {
|
const value = getPaginationRef();
|
if (!value || typeof value !== 'object') return;
|
currentPage.value = value.current || 1;
|
pageSize.value = value.pageSize || 10;
|
void loadRecords();
|
}
|
|
function displayTime(value?: string) {
|
return value ? formatToDateTime(value, 'YYYY-MM-DD HH:mm:ss') : '—';
|
}
|
</script>
|
|
<template>
|
<BasicModal v-bind="$attrs" :footer="null" :min-height="430" :title="title" width="min(860px, calc(100vw - 24px))" destroy-on-close @register="registerModal">
|
<div class="operation-log-body">
|
<div class="operation-log-toolbar">
|
<jnpf-input v-model:value="keyword" allow-clear :maxlength="100" placeholder="请输入搜索关键字" @press-enter="search" @change="!keyword && search()">
|
<template #prefix><SearchOutlined /></template>
|
</jnpf-input>
|
<a-tooltip title="搜索">
|
<a-button aria-label="搜索操作记录" @click="search"><SearchOutlined /></a-button>
|
</a-tooltip>
|
<a-button type="link" @click="clearSearch">清空</a-button>
|
</div>
|
|
<a-alert v-if="loadFailed" class="operation-log-error" type="error" show-icon message="操作记录暂时无法加载" />
|
<BasicVxeTable
|
class="operation-log-table"
|
:data-source="records"
|
empty-text="暂无操作记录"
|
:ellipsis="false"
|
height="360px"
|
:loading="loading"
|
:pagination="pagination"
|
@change="handleTableChange"
|
@register="registerTable">
|
<template #occurredAt="{ record }">{{ displayTime(record.occurredAt) }}</template>
|
</BasicVxeTable>
|
</div>
|
</BasicModal>
|
</template>
|
|
<style lang="scss" scoped>
|
.operation-log-body {
|
min-width: 0;
|
padding: 14px 18px 18px;
|
}
|
|
.operation-log-toolbar {
|
display: flex;
|
gap: 6px;
|
align-items: center;
|
width: min(430px, 100%);
|
margin-bottom: 14px;
|
}
|
|
.operation-log-error {
|
margin-bottom: 12px;
|
}
|
|
:deep(.vxe-cell) {
|
overflow-wrap: anywhere;
|
}
|
</style>
|
