<template>
|
<!-- <a-modal :visible="visible" :maskClosable="false" @cancel="hideModal" :width="width + 'mm'">
|
<a-spin :spinning="spinning" style="min-height: 100px">
|
<div id="preview_content_design"></div>
|
</a-spin>
|
<template slot="title">
|
<a-space>
|
<div style="margin-right: 20px">打印预览</div>
|
<a-button :loading="waitShowPrinter" type="primary" icon="printer" @click.stop="print">打印</a-button>
|
<a-button type="primary" icon="printer" @click.stop="toPdf">pdf</a-button>
|
</a-space>
|
</template>
|
<template slot="footer">
|
<a-button key="close" type="info" @click="hideModal">
|
关闭
|
</a-button>
|
</template>
|
</a-modal> -->
|
<el-dialog title="打印预览" :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false"
|
append-to-body @closed="onDialogClosed">
|
<!-- 替换 el-spin → 使用 Ruoyi 支持的 v-loading -->
|
<div style="min-height: 100px; position:relative;" v-loading="spinning" element-loading-text="加载中...">
|
<div id="preview_content_design"></div>
|
</div>
|
|
<span slot="title" class="dialog-title-wrapper">
|
<span>打印预览</span>
|
<span class="dialog-title-btn">
|
<el-button :loading="waitShowPrinter" type="primary" icon="el-icon-printer" @click.stop="print">
|
打印
|
</el-button>
|
<el-button type="primary" icon="el-icon-document" @click.stop="toPdf">
|
PDF
|
</el-button>
|
</span>
|
</span>
|
|
<div slot="footer" class="dialog-footer">
|
<el-button key="close" type="info" @click="hideModal">
|
关闭
|
</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { template } from 'lodash'
|
import * as vuePluginHiprint from '../../../hiprintVue/index'
|
import $ from 'jquery'
|
window.jQuery = window.$ = $
|
const hiprint = vuePluginHiprint.hiprint
|
const defaultElementTypeProvider = vuePluginHiprint.defaultElementTypeProvider
|
|
// 全局挂载（preview 必须）
|
window.hiprint = hiprint
|
window.defaultElementTypeProvider = defaultElementTypeProvider
|
|
export default {
|
name: "printPreview",
|
props: {},
|
data() {
|
return {
|
visible: false,
|
spinning: true,
|
waitShowPrinter: false,
|
isInited: false,
|
// 纸张宽 mm
|
width: 0,
|
// 模板
|
hiprintTemplate: {},
|
// 数据
|
printData: {}
|
}
|
},
|
computed: {},
|
watch: {},
|
created() {
|
this.initHiPrintInPreview()
|
},
|
mounted() {
|
},
|
methods: {
|
hideModal() {
|
this.visible = false
|
},
|
// ======================
|
// 异步初始化方法
|
// ======================
|
async initHiPrintAsync() {
|
return new Promise((resolve) => {
|
// 如果已经初始化过，直接返回
|
if (this.isInited) {
|
console.log("✅ preview 内部初始化 hiprint 完成")
|
return resolve()
|
}
|
|
// 执行初始化
|
window.hiprint.init({
|
providers: [new window.defaultElementTypeProvider()],
|
autoConnect: false
|
})
|
|
// 等待DOM/资源加载（保险等待 100ms）
|
setTimeout(() => {
|
this.isInited = true
|
console.log("✅ preview 内部初始化 hiprint 完成")
|
resolve()
|
}, 100)
|
})
|
},
|
initHiPrintInPreview() {
|
if (hiprint) return
|
|
// 从插件获取实例
|
hiprint = vuePluginHiprint.hiprint
|
defaultElementTypeProvider = vuePluginHiprint.defaultElementTypeProvider
|
|
// 内部初始化！
|
hiprint.init({
|
providers: [new defaultElementTypeProvider()],
|
autoConnect: false
|
})
|
|
console.log("✅ preview 内部初始化 hiprint 完成")
|
},
|
async show(hiprintTemplate, printData, width = '210') {
|
await this.initHiPrintAsync()
|
this.visible = true
|
this.spinning = true
|
this.width = hiprintTemplate.editingPanel ? hiprintTemplate.editingPanel.width : width;
|
this.hiprintTemplate = hiprintTemplate
|
this.printData = printData
|
let hiprintTemplateInstance = new window.hiprint.PrintTemplate({
|
template: hiprintTemplate,
|
settingContainer: $('#preview_content_design'),
|
fields: printData
|
});
|
|
// hiprintTemplateInstance.getJson(tempContainer)
|
setTimeout(() => {
|
// eslint-disable-next-line no-undef
|
$("#preview_content_design").html(hiprintTemplateInstance.getHtml(printData))
|
this.spinning = false
|
this.hiprintTemplate = hiprintTemplateInstance
|
}, 1000)
|
},
|
print() {
|
this.waitShowPrinter = true
|
this.hiprintTemplate.print(this.printData, {}, {
|
callback: () => {
|
console.log('callback')
|
this.waitShowPrinter = false
|
}
|
})
|
},
|
toPdf() {
|
this.hiprintTemplate.toPdf(this.printData, '打印预览', { scale: 4 });
|
},
|
// 关闭弹窗
|
hideModal() {
|
this.visible = false;
|
},
|
// 弹窗完全关闭后 → 强制移走焦点（修复你之前的浏览器报错！）
|
onDialogClosed() {
|
document.body.focus();
|
}
|
}
|
}
|
|
</script>
|
|
|
<style lang="less" scoped>
|
// /deep/ .ant-modal-body {
|
// padding: 0px;
|
// }
|
|
// /deep/ .ant-modal-content {
|
// margin-bottom: 24px;
|
// }
|
|
/* 打印预览弹窗标题样式 */
|
.dialog-title-wrapper {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
width: 100%;
|
}
|
|
.dialog-title-btn {
|
display: flex;
|
gap: 8px;
|
}
|
</style>
|
