<script lang="ts" setup>
|
import type { WatermarkConfig } from '#/api/x/dms/watermark';
|
|
import { computed, ref, watch } from 'vue';
|
|
import { BasicModal } from '@jnpf/ui/modal';
|
|
import { useWindowSize } from '@vueuse/core';
|
|
import PaperPreview from './PaperPreview.vue';
|
|
defineOptions({ name: 'DmsWatermarkPreviewModal' });
|
|
const props = defineProps<{ config?: WatermarkConfig; open: boolean }>();
|
const emit = defineEmits<{ 'update:open': [value: boolean] }>();
|
const selectedPaper = ref('');
|
const { height: viewportHeight } = useWindowSize();
|
const modalBodyHeight = computed(() => Math.max(1, viewportHeight.value - 62));
|
const positions = computed(() => props.config?.positions || []);
|
const paperOptions = computed(() => positions.value.map((position) => ({ fullName: position.paperType, id: position.paperType })));
|
const activePosition = computed(() => positions.value.find((position) => position.paperType === selectedPaper.value));
|
|
watch(
|
() => props.config,
|
(config) => {
|
selectedPaper.value = config?.positions[0]?.paperType || '';
|
},
|
{ immediate: true },
|
);
|
</script>
|
|
<template>
|
<BasicModal
|
:open="open"
|
:footer="null"
|
:width="1120"
|
:height="modalBodyHeight"
|
:centered="false"
|
:keyboard="true"
|
:z-index="2200"
|
title="水印预览"
|
wrap-class-name="watermark-preview-modal"
|
destroy-on-close
|
@update:open="emit('update:open', $event)">
|
<div v-if="config && activePosition" class="preview-content" :style="{ minHeight: `${modalBodyHeight}px` }">
|
<div class="preview-toolbar">
|
<span class="preview-name">{{ config.name }}</span>
|
<JnpfRadio v-if="positions.length > 1" v-model:value="selectedPaper" :options="paperOptions" option-type="button" />
|
<span v-else class="paper-name">{{ activePosition.paperType }}</span>
|
</div>
|
<div class="preview-workspace">
|
<PaperPreview :key="`${activePosition.paperType}-landscape`" :config="config" :position="activePosition" orientation="landscape" />
|
<PaperPreview :key="`${activePosition.paperType}-portrait`" :config="config" :position="activePosition" orientation="portrait" />
|
</div>
|
</div>
|
</BasicModal>
|
</template>
|
|
<style lang="scss">
|
.watermark-preview-modal {
|
.ant-modal {
|
top: 1px;
|
}
|
|
.ant-modal-body > .scroll-container {
|
padding: 0;
|
}
|
}
|
</style>
|
|
<style scoped>
|
.preview-content {
|
background: #edf0f2;
|
color: #252b30;
|
}
|
|
.preview-toolbar {
|
min-height: 44px;
|
padding: 6px 24px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
gap: 24px;
|
border-bottom: 1px solid #d9dfe2;
|
background: #fff;
|
}
|
|
.preview-name {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
font-weight: 600;
|
}
|
|
.paper-name {
|
font-weight: 600;
|
color: #136d73;
|
}
|
|
.preview-workspace {
|
display: grid;
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
align-items: start;
|
gap: 32px;
|
padding: 24px;
|
}
|
|
@media (max-width: 1000px) {
|
.preview-workspace {
|
grid-template-columns: 1fr;
|
}
|
}
|
|
@media (max-width: 600px) {
|
.preview-toolbar {
|
align-items: flex-start;
|
flex-direction: column;
|
gap: 8px;
|
padding: 8px 16px;
|
}
|
|
.preview-workspace {
|
padding: 16px;
|
}
|
}
|
</style>
|
