|
|
|
|
@ -1,16 +1,30 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div style="width: 100%; height: 100vh; overflow: hidden">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<div class="printTemplateList" v-for=" i in printTemplateList">
|
|
|
|
|
<el-card @click="setNodes(i)" class="moduleCard" shadow="never"
|
|
|
|
|
:style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
|
|
|
|
:body-style="{padding:'4px 0'}">
|
|
|
|
|
<template #header>
|
|
|
|
|
<el-image style="width: 100%; height: 100%" :src="doc" fit="contain" />
|
|
|
|
|
</template>
|
|
|
|
|
<div class="moduleText">{{ i.templateName }}</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
<div style="width: 100%; height: 100vh; overflow: hidden" v-loading="loading">
|
|
|
|
|
<div class="open" @click="drawer = true">
|
|
|
|
|
<div class="icon"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<el-drawer
|
|
|
|
|
v-model="drawer"
|
|
|
|
|
:with-header="false"
|
|
|
|
|
:close-on-click-modal="true"
|
|
|
|
|
direction="ttb"
|
|
|
|
|
size="240"
|
|
|
|
|
ref="drawerRef"
|
|
|
|
|
>
|
|
|
|
|
<div class="divCenter" v-loading="loading">
|
|
|
|
|
<div class="printTemplateList" v-for=" i in printTemplateList">
|
|
|
|
|
<el-card @click="setNodes(i)" class="moduleCard" shadow="never"
|
|
|
|
|
:style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
|
|
|
|
:body-style="{padding:'4px 0'}">
|
|
|
|
|
<template #header>
|
|
|
|
|
<el-image style="width: 100px" :src="doc" fit="contain" />
|
|
|
|
|
</template>
|
|
|
|
|
<div class="moduleText">{{ i.templateName }}</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-drawer>
|
|
|
|
|
<div class="left">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="center">
|
|
|
|
|
<div id="printInfo" ref="printRef">
|
|
|
|
|
@ -89,19 +103,19 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right">
|
|
|
|
|
<el-dropdown split-button type="primary" @click="printFun" @command="switchPrinter" style="margin-right: 8px">
|
|
|
|
|
{{ printName() }}
|
|
|
|
|
<template #dropdown>
|
|
|
|
|
<el-dropdown-menu>
|
|
|
|
|
<el-dropdown-item :command="-1">导出PDF</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item divided :command="0">本地打印</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item :divided="k === 0" :command="i.id" v-for="(i, k) in printers">{{ i.name }}
|
|
|
|
|
</el-dropdown-item>
|
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
</template>
|
|
|
|
|
</el-dropdown>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div class="right">-->
|
|
|
|
|
<!-- <el-dropdown split-button type="primary" @click="printFun" @command="switchPrinter" style="margin-right: 8px">-->
|
|
|
|
|
<!-- {{ printName() }}-->
|
|
|
|
|
<!-- <template #dropdown>-->
|
|
|
|
|
<!-- <el-dropdown-menu>-->
|
|
|
|
|
<!-- <el-dropdown-item :command="-1">导出PDF</el-dropdown-item>-->
|
|
|
|
|
<!-- <el-dropdown-item divided :command="0">本地打印</el-dropdown-item>-->
|
|
|
|
|
<!-- <el-dropdown-item :divided="k === 0" :command="i.id" v-for="(i, k) in printers">{{ i.name }}-->
|
|
|
|
|
<!-- </el-dropdown-item>-->
|
|
|
|
|
<!-- </el-dropdown-menu>-->
|
|
|
|
|
<!-- </template>-->
|
|
|
|
|
<!-- </el-dropdown>-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
</div>
|
|
|
|
|
<div id="printArea" v-if="printPngList.length > 0">
|
|
|
|
|
<div v-for="(url, index) in printPngList" :key="index" class="print-page">
|
|
|
|
|
@ -112,6 +126,7 @@
|
|
|
|
|
<script setup>
|
|
|
|
|
import html2canvas from 'html2canvas';
|
|
|
|
|
import jsPDF from 'jspdf';
|
|
|
|
|
import { ElMessageBox } from 'element-plus';
|
|
|
|
|
import { options } from '@/views/print/tool.js';
|
|
|
|
|
import TextNode from '@/views/print/nodes/textNode.vue';
|
|
|
|
|
import ImageNode from '@/views/print/nodes/image.vue';
|
|
|
|
|
@ -127,6 +142,18 @@ import doc from '@/assets/images/doc.png';
|
|
|
|
|
import { getSysPrintTemplateNodeList } from '@/api/system/printTemplateNode/index';
|
|
|
|
|
import { listPrintTemplateInfo } from '@/api/system/printTemplateInfo/index';
|
|
|
|
|
|
|
|
|
|
const handleClose = (done) => {
|
|
|
|
|
ElMessageBox.confirm('Are you sure you want to close this?')
|
|
|
|
|
.then(() => {
|
|
|
|
|
done();
|
|
|
|
|
})
|
|
|
|
|
.catch(() => {
|
|
|
|
|
// catch error
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
const drawer = ref(false);
|
|
|
|
|
const loading = ref(false);
|
|
|
|
|
const drawerRef = ref()
|
|
|
|
|
const printTemplateList = ref([]);
|
|
|
|
|
const route = useRoute();
|
|
|
|
|
const printType = ref(0);
|
|
|
|
|
@ -178,7 +205,7 @@ const messageFun = (event) => {
|
|
|
|
|
// }
|
|
|
|
|
};
|
|
|
|
|
const setNodes = (data) => {
|
|
|
|
|
|
|
|
|
|
loading.value = true;
|
|
|
|
|
listPrintTemplateInfo({ templateListId: data.templateListId }).then(e => {
|
|
|
|
|
let templateInfoId = e.rows?.[0]?.templateInfoId;
|
|
|
|
|
getSysPrintTemplateNodeList({ templateInfoId }).then(v => {
|
|
|
|
|
@ -203,8 +230,10 @@ const setNodes = (data) => {
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
zoom.value = ((printRef.value.offsetWidth - 20) / 793);
|
|
|
|
|
zoom.value = ((printRef.value.offsetWidth) / 793);
|
|
|
|
|
});
|
|
|
|
|
drawer.value = false
|
|
|
|
|
loading.value = false;
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
@ -229,6 +258,9 @@ onMounted(() => {
|
|
|
|
|
listPrintTemplateList().then(data => {
|
|
|
|
|
printTemplateList.value = data.rows;
|
|
|
|
|
});
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
zoom.value = ((printRef.value.offsetWidth) / 793);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const switchPrinter = (e) => {
|
|
|
|
|
@ -318,10 +350,11 @@ defineExpose({
|
|
|
|
|
<style scoped>
|
|
|
|
|
.content {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
border: 1px solid #ccc;
|
|
|
|
|
border-top: 1px solid #ccc;
|
|
|
|
|
transform-origin: top left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -330,16 +363,23 @@ defineExpose({
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.left {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
z-index: 8;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 10vw;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
width: 100%;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
margin-right: 50px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.divCenter {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.center {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: calc(100% - 10vw - 50px);
|
|
|
|
|
width: calc(100%);
|
|
|
|
|
height: 100vh;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
padding-top: 40px;
|
|
|
|
|
@ -357,6 +397,36 @@ defineExpose({
|
|
|
|
|
right: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
}
|
|
|
|
|
.printTemplateList {
|
|
|
|
|
width: 150px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
text-align: center;
|
|
|
|
|
min-width: 50px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.open {
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 50%;
|
|
|
|
|
width: 100px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
background-color: #ddd;
|
|
|
|
|
border-bottom-left-radius: 30px;
|
|
|
|
|
border-bottom-right-radius: 30px;
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
background-image: url("@/assets/icons/down.png");
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
width: 12px;
|
|
|
|
|
height: 12px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<style>
|
|
|
|
|
.print-page {
|
|
|
|
|
@ -393,4 +463,5 @@ defineExpose({
|
|
|
|
|
page-break-after: always;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|