<script lang="ts" setup>
|
import { ref } from 'vue';
|
|
import { useGlobSetting } from '@jnpf/hooks';
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
|
import dayjs from 'dayjs';
|
import $ from 'jquery';
|
|
import { getPreviewInfo } from '#/api/system/printDev';
|
import logoImg from '#/assets/images/jnpf.png';
|
import { newHiprintPrintTemplate } from '#/components/PrintDesign/PrintDesign/utils/template-helper';
|
import { $t } from '#/locales';
|
|
defineOptions({ name: 'PrintPreview' });
|
|
const globSetting = useGlobSetting();
|
const [registerModal, { closeModal, changeLoading }] = useModalInner(init);
|
const hiprintTemplate = ref();
|
const fullName = ref('');
|
|
/**
|
* 初始化
|
*/
|
async function init(data) {
|
fullName.value = data.fullName || '';
|
$('#previewContentDesign').html(null);
|
changeLoading(true);
|
const { id, printTplPanels = '' } = data;
|
try {
|
let realPanels = {};
|
if (id) {
|
const res = await getPreviewInfo(id);
|
realPanels = JSON.parse(res?.data?.printTemplate);
|
} else {
|
realPanels = JSON.parse(printTplPanels);
|
}
|
hiprintTemplate.value = newHiprintPrintTemplate('printPreview', { template: realPanels });
|
initHinnn();
|
$('#previewContentDesign').html(hiprintTemplate.value?.getHtml() || '模板加载失败');
|
} catch {
|
$('#previewContentDesign').html('<div class="tpl-invalid">模板已失效，请重新设计</div>');
|
} finally {
|
changeLoading(false);
|
}
|
}
|
// 重写hinnn
|
function initHinnn() {
|
if (!(window as any).hinnn) return;
|
(window as any).hinnn.apiUrl = globSetting.apiURL;
|
(window as any).hinnn.dateFormat = function (date, format) {
|
if (!date) return '';
|
if (!Number.isNaN(date) && typeof date === 'string') date = Number(date);
|
format = format.replaceAll('y', 'Y').replaceAll('d', 'D');
|
return dayjs(date).format(format);
|
};
|
}
|
/**
|
* 浏览器打印
|
*/
|
function handlePrint() {
|
const options = { leftOffset: 0, topOffset: 0 };
|
// 调用浏览器打印
|
hiprintTemplate.value?.print({}, options, {
|
styleHandler: () => {
|
return '<link rel="stylesheet" href="/css/print-lock.css" />';
|
},
|
});
|
}
|
// 导出PDF
|
function handleDownload() {
|
if (!hiprintTemplate.value) return;
|
hiprintTemplate.value?.toPdf({}, `${fullName.value}_${dayjs().format('YYYYMMDDHHmmss')}`, { isDownload: true }).then(() => {});
|
}
|
</script>
|
|
<template>
|
<BasicModal
|
v-bind="$attrs"
|
@register="registerModal"
|
default-fullscreen
|
:footer="null"
|
:closable="false"
|
:keyboard="false"
|
destroy-on-close
|
class="jnpf-full-modal full-modal designer-modal jnpf-print-preview-modal">
|
<template #title>
|
<div class="jnpf-full-modal-header">
|
<div class="header-title">
|
<img :src="logoImg" class="header-logo" />
|
<span class="header-dot"></span>
|
<p class="header-txt">打印预览</p>
|
</div>
|
<a-space class="options" :size="10">
|
<a-button type="primary" @click="handleDownload()">导出PDF</a-button>
|
<a-button type="primary" @click="handlePrint()">{{ $t('common.printText') }}</a-button>
|
<a-button @click="closeModal()">{{ $t('common.cancelText') }}</a-button>
|
</a-space>
|
</div>
|
</template>
|
<div id="previewContentDesign"></div>
|
</BasicModal>
|
</template>
|
|
<style lang="scss">
|
.jnpf-full-modal.jnpf-print-preview-modal {
|
.ant-modal-body > .scrollbar {
|
padding: 0 0 10px !important;
|
}
|
|
.scrollbar__view {
|
overflow: hidden auto !important;
|
}
|
|
.hiprint-printPaper {
|
margin: 10px auto;
|
background-color: #fff;
|
}
|
|
.tpl-invalid {
|
box-sizing: border-box;
|
width: 210mm;
|
height: 296mm;
|
padding-top: 20px;
|
margin: 0 auto;
|
font-size: 16px;
|
text-align: center;
|
background: #fff;
|
}
|
}
|
|
#hiwprint_iframe {
|
border: 0 !important;
|
}
|
</style>
|
