<script lang="ts" setup>
|
import type { BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import type { WatermarkConfig, WatermarkQuery } from '#/api/x/dms/watermark';
|
|
import { useMessage, usePermission } from '@jnpf/hooks';
|
import { useModal } from '@jnpf/ui/modal';
|
import { BasicVxeTable, TableAction, useVxeTable } from '@jnpf/ui/vxeTable';
|
|
import { deleteWatermark, getWatermarkPage, setWatermarkEnabled } from '#/api/x/dms/watermark';
|
|
import FormModal from './FormModal.vue';
|
import { sceneText, VERSION_SCOPE_LABELS, WATERMARK_TYPE_LABELS } from './model';
|
|
defineOptions({ name: 'DmsWatermarkManagement' });
|
|
const { createConfirm, createMessage } = useMessage();
|
const { hasBtnP } = usePermission();
|
const [registerModal, { openModal }] = useModal();
|
const columns: BasicColumn[] = [
|
{ title: '水印名称', dataIndex: 'name', minWidth: 160, slots: { default: 'name' } },
|
{ title: '水印类型', dataIndex: 'watermarkType', width: 100, slots: { default: 'type' } },
|
{ title: '使用范围', dataIndex: 'versionScope', width: 110, slots: { default: 'scope' } },
|
{ title: '水印加载', dataIndex: 'loadScenes', minWidth: 150, slots: { default: 'scenes' } },
|
{ title: '是否启用', dataIndex: 'enabled', width: 100, slots: { default: 'enabled' } },
|
{ title: '配置内容', dataIndex: 'contentTemplate', minWidth: 220, slots: { default: 'content' } },
|
{ title: '所属企业', dataIndex: 'enterpriseName', minWidth: 180 },
|
{ title: '更新时间', dataIndex: 'updatedAt', width: 165, format: 'date|YYYY-MM-DD HH:mm:ss' },
|
];
|
|
const [registerTable, { reload }] = useVxeTable({
|
api: fetchPage,
|
columns,
|
immediate: true,
|
emptyText: '暂无水印配置',
|
rowKey: 'id',
|
showIndexColumn: false,
|
useSearchForm: true,
|
formConfig: {
|
baseColProps: { xs: 24, sm: 12, md: 8, xl: 6 },
|
compact: true,
|
schemas: [
|
{ field: 'keyword', label: '关键词', component: 'Input', componentProps: { placeholder: '名称、内容或所属企业', submitOnPressEnter: true } },
|
{
|
field: 'watermarkType',
|
label: '水印类型',
|
component: 'Select',
|
componentProps: { allowClear: true, options: Object.entries(WATERMARK_TYPE_LABELS).map(([id, fullName]) => ({ id, fullName })) },
|
},
|
{
|
field: 'enabled',
|
label: '启用状态',
|
component: 'Select',
|
componentProps: {
|
allowClear: true,
|
options: [
|
{ id: true, fullName: '已启用' },
|
{ id: false, fullName: '已停用' },
|
],
|
},
|
},
|
],
|
},
|
pagination: {
|
pageSize: 20,
|
pageSizeOptions: ['20', '50', '100'],
|
showQuickJumper: true,
|
showSizeChanger: true,
|
showTotal: (total) => `共 ${total} 条记录`,
|
},
|
actionColumn: { dataIndex: 'action', fixed: 'right', title: '操作', width: 190 },
|
});
|
|
async function fetchPage(raw: Record<string, unknown>) {
|
const query = { ...raw, currentPage: Number(raw.currentPage) || 1, pageSize: Math.min(Number(raw.pageSize) || 20, 200) } as WatermarkQuery;
|
const response = await getWatermarkPage(query);
|
return { data: response.data };
|
}
|
|
function openForm(mode: 'create' | 'edit' | 'view', record?: WatermarkConfig) {
|
openModal(true, { id: record?.id, mode });
|
}
|
|
async function toggle(record: WatermarkConfig, enabled: boolean) {
|
if (!record.id || record.revision === undefined) return;
|
try {
|
await setWatermarkEnabled(record.id, record.revision, enabled);
|
createMessage.success(enabled ? '水印已启用' : '水印已停用');
|
await reload();
|
} catch {
|
createMessage.error('状态更新失败，请刷新后重试');
|
}
|
}
|
|
function remove(record: WatermarkConfig) {
|
createConfirm({
|
title: '删除水印配置',
|
content: `确认删除“${record.name}”？`,
|
iconType: 'warning',
|
onOk: async () => {
|
if (!record.id || record.revision === undefined) return;
|
try {
|
await deleteWatermark(record.id, record.revision);
|
createMessage.success('水印配置已删除');
|
await reload();
|
} catch {
|
createMessage.error('删除失败，请刷新后重试');
|
}
|
},
|
});
|
}
|
</script>
|
|
<template>
|
<div class="jnpf-content-wrapper watermark-page">
|
<div class="jnpf-content-wrapper-center">
|
<div class="jnpf-content-wrapper-content">
|
<BasicVxeTable @register="registerTable">
|
<template #tableTitle>
|
<a-button v-if="hasBtnP('dms.watermark.create', false)" type="primary" pre-icon="icon-ym icon-ym-btn-add" @click="openForm('create')">
|
新增配置
|
</a-button>
|
</template>
|
<template #name="{ record }">
|
<a-button type="link" class="name-link" @click="openForm('view', record)">{{ record.name }}</a-button>
|
</template>
|
<template #type="{ record }">
|
<a-tag :bordered="false" color="blue">{{ WATERMARK_TYPE_LABELS[record.watermarkType] || record.watermarkType }}</a-tag>
|
</template>
|
<template #scope="{ record }">{{ VERSION_SCOPE_LABELS[record.versionScope] || record.versionScope }}</template>
|
<template #scenes="{ record }">{{ sceneText(record.loadScenes) }}</template>
|
<template #enabled="{ record }">
|
<JnpfSwitch
|
:value="record.enabled"
|
:checked-value="true"
|
:un-checked-value="false"
|
:disabled="!hasBtnP('dms.watermark.toggle', false)"
|
@change="(value) => toggle(record, value)" />
|
</template>
|
<template #content="{ record }">
|
<span class="cell-ellipsis" :title="record.contentTemplate || record.imageUrl || '—'">{{ record.contentTemplate || record.imageUrl || '—' }}</span>
|
</template>
|
<template #action="{ record }">
|
<TableAction
|
:actions="[
|
{ label: '查看', onClick: () => openForm('view', record) },
|
{ label: '编辑', ifShow: hasBtnP('dms.watermark.update', false), onClick: () => openForm('edit', record) },
|
{ label: '删除', color: 'error', ifShow: hasBtnP('dms.watermark.delete', false), onClick: () => remove(record) },
|
]" />
|
</template>
|
</BasicVxeTable>
|
</div>
|
</div>
|
<FormModal @register="registerModal" @saved="reload" />
|
</div>
|
</template>
|
|
<style lang="scss" scoped>
|
.watermark-page,
|
.watermark-page :deep(.jnpf-content-wrapper-content) {
|
min-width: 0;
|
}
|
.name-link {
|
padding: 0;
|
height: auto;
|
max-width: 100%;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
.cell-ellipsis {
|
display: block;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
</style>
|
