<script lang="ts" setup>
|
import type { BasicColumn } from '@jnpf/ui/vxeTable';
|
import type { DmsPrintOperationLog, DmsPrintOperationQuery } from '#/api/x/dms/printOperation';
|
|
import { ref } from 'vue';
|
|
import { useMessage, usePermission } from '@jnpf/hooks';
|
import { useDrawer } from '@jnpf/ui/drawer';
|
import { BasicVxeTable, TableAction, useVxeTable } from '@jnpf/ui/vxeTable';
|
import { downloadByData } from '@jnpf/utils';
|
|
import dayjs from 'dayjs';
|
|
import { exportDmsPrintOperations, getDmsPrintOperationPage } from '#/api/x/dms/printOperation';
|
|
import DetailDrawer from './DetailDrawer.vue';
|
|
defineOptions({ name: 'DmsPrintOperations' });
|
|
const EXPORT_PERMISSION = 'dms.printOperation.export';
|
const currentQuery = ref<DmsPrintOperationQuery>({ currentPage: 1, pageSize: 20 });
|
const exporting = ref(false);
|
const { createMessage } = useMessage();
|
const { hasBtnP } = usePermission();
|
|
const PRINT_TYPE_LABELS: Record<string, string> = {
|
ARCHIVE_BOX: '档案盒打印',
|
BLANK_FORM: '空白表单打印',
|
CONTROLLED_DOCUMENT: '受控文件打印',
|
LABEL: '标签打印',
|
OTHER: '其他打印',
|
RECORD_DOCUMENT: '记录文件打印',
|
};
|
|
const columns: BasicColumn[] = [
|
{ title: '编号', dataIndex: 'documentCode', minWidth: 150, slots: { default: 'text' } },
|
{ title: '名称', dataIndex: 'documentName', minWidth: 220, slots: { default: 'text' } },
|
{ title: '批号/版本号', dataIndex: 'batchVersion', minWidth: 150, slots: { default: 'batchVersion' } },
|
{ title: '操作日期', dataIndex: 'operatedAt', width: 165, format: 'date|YYYY-MM-DD HH:mm:ss' },
|
{ title: '打印类型', dataIndex: 'printType', minWidth: 140, slots: { default: 'printType' } },
|
{ title: '操作人', dataIndex: 'operatorName', minWidth: 110, slots: { default: 'text' } },
|
{ title: '备注', dataIndex: 'remark', minWidth: 180, slots: { default: 'text' } },
|
];
|
|
const [registerDrawer, { openDrawer }] = useDrawer();
|
const [registerTable] = useVxeTable({
|
api: fetchPage,
|
beforeFetch: normalizeQuery,
|
columns,
|
immediate: true,
|
emptyText: '当前条件下没有打印记录',
|
rowKey: 'id',
|
showIndexColumn: false,
|
useSearchForm: true,
|
formConfig: {
|
baseColProps: { xs: 24, sm: 12, md: 8, xl: 6 },
|
compact: true,
|
showAdvancedButton: true,
|
schemas: [
|
{
|
field: 'keyword',
|
label: '关键词',
|
component: 'Input',
|
componentProps: { placeholder: '编号、名称、批号、版本、操作人或备注', submitOnPressEnter: true },
|
},
|
{ field: 'documentCode', label: '编号', component: 'Input', componentProps: { placeholder: '请输入编号', submitOnPressEnter: true } },
|
{ field: 'documentName', label: '名称', component: 'Input', componentProps: { placeholder: '请输入名称', submitOnPressEnter: true } },
|
{ field: 'batchNo', label: '批号', component: 'Input', componentProps: { placeholder: '请输入批号', submitOnPressEnter: true } },
|
{ field: 'versionNo', label: '版本号', component: 'Input', componentProps: { placeholder: '请输入版本号', submitOnPressEnter: true } },
|
{ field: 'operatorName', label: '操作人', component: 'Input', componentProps: { placeholder: '请输入操作人', submitOnPressEnter: true } },
|
{
|
field: 'printType',
|
label: '打印类型',
|
component: 'Select',
|
componentProps: { allowClear: true, placeholder: '请选择', options: Object.entries(PRINT_TYPE_LABELS).map(([id, fullName]) => ({ id, fullName })) },
|
},
|
{
|
field: 'pickerVal',
|
label: '操作日期',
|
component: 'DateRange',
|
componentProps: { allowClear: true, format: 'YYYY-MM-DD HH:mm:ss', showTime: true },
|
},
|
],
|
fieldMapToTime: [['pickerVal', ['startTime', 'endTime'], 'YYYY-MM-DD HH:mm:ss']],
|
},
|
pagination: {
|
pageSize: 20,
|
pageSizeOptions: ['20', '50', '100'],
|
showQuickJumper: true,
|
showSizeChanger: true,
|
showTotal: (total) => `共 ${total} 条记录`,
|
},
|
actionColumn: { dataIndex: 'action', fixed: 'right', title: '操作', width: 90 },
|
});
|
|
function normalizeQuery(raw: Record<string, unknown>): DmsPrintOperationQuery {
|
const query = { ...raw } as unknown as DmsPrintOperationQuery;
|
query.currentPage = Number(query.currentPage) || 1;
|
query.pageSize = Math.min(Number(query.pageSize) || 20, 200);
|
currentQuery.value = query;
|
return query;
|
}
|
|
async function fetchPage(query: DmsPrintOperationQuery) {
|
const response = await getDmsPrintOperationPage(query);
|
return { data: response.data };
|
}
|
|
async function handleExport() {
|
exporting.value = true;
|
try {
|
const blob = await exportDmsPrintOperations(currentQuery.value);
|
downloadByData(blob, `打印操作记录_${dayjs().format('YYYYMMDD_HHmmss')}.csv`, 'text/csv;charset=UTF-8');
|
} catch {
|
createMessage.error('导出失败，请稍后重试');
|
} finally {
|
exporting.value = false;
|
}
|
}
|
|
function displayText(value?: string) {
|
return value || '—';
|
}
|
</script>
|
|
<template>
|
<div class="jnpf-content-wrapper print-operation-page">
|
<div class="jnpf-content-wrapper-center">
|
<div class="jnpf-content-wrapper-content">
|
<BasicVxeTable @register="registerTable">
|
<template #tableTitle>
|
<a-button v-if="hasBtnP(EXPORT_PERMISSION, false)" pre-icon="icon-ym icon-ym-btn-download" :loading="exporting" @click="handleExport"
|
>导出</a-button
|
>
|
</template>
|
<template #text="{ record, column }">
|
<span class="cell-ellipsis" :title="displayText(record[column.field])">{{ displayText(record[column.field]) }}</span>
|
</template>
|
<template #batchVersion="{ record }">
|
<span class="cell-ellipsis" :title="[record.batchNo, record.versionNo].filter(Boolean).join(' / ') || '—'">
|
{{ [record.batchNo, record.versionNo].filter(Boolean).join(' / ') || '—' }}
|
</span>
|
</template>
|
<template #printType="{ record }">
|
<a-tag :bordered="false" color="blue">{{ PRINT_TYPE_LABELS[record.printType] || record.printType }}</a-tag>
|
</template>
|
<template #action="{ record }">
|
<TableAction :actions="[{ label: '详情', onClick: () => openDrawer(true, { id: (record as DmsPrintOperationLog).id }) }]" />
|
</template>
|
</BasicVxeTable>
|
</div>
|
</div>
|
<DetailDrawer @register="registerDrawer" />
|
</div>
|
</template>
|
|
<style lang="scss" scoped>
|
.print-operation-page,
|
.print-operation-page :deep(.jnpf-content-wrapper-content) {
|
min-width: 0;
|
}
|
|
.cell-ellipsis {
|
display: block;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
</style>
|
