修改看板和打印设置

master
夜笙歌 3 days ago
parent 4b69c1a940
commit 7c9a14ef5d

@ -26,6 +26,11 @@ import Layout from '@/layout/index.vue';
// 公共路由 // 公共路由
export const constantRoutes: RouteRecordRaw[] = [ export const constantRoutes: RouteRecordRaw[] = [
{
path: '/test',
hidden: true,
component: () => import('@/views/print/test.vue')
},
{ {
path: '/externalPrint', path: '/externalPrint',
hidden: true, hidden: true,

@ -310,6 +310,8 @@
</template> </template>
<script setup name='ProductPlanDetail' lang='ts'> <script setup name='ProductPlanDetail' lang='ts'>
import { useRouter } from 'vue-router';
import { import {
addProductPlanDetail, addProductPlanDetail,
delProductPlanDetail, delProductPlanDetail,
@ -336,7 +338,7 @@ const ids = ref<Array<string | number>>([]);
const single = ref(true); const single = ref(true);
const multiple = ref(true); const multiple = ref(true);
const total = ref(0); const total = ref(0);
const router = useRouter();
const queryFormRef = ref<ElFormInstance>(); const queryFormRef = ref<ElFormInstance>();
const productPlanDetailFormRef = ref<ElFormInstance>(); const productPlanDetailFormRef = ref<ElFormInstance>();
@ -663,6 +665,7 @@ onMounted(() => {
const internalInstance = getCurrentInstance(); const internalInstance = getCurrentInstance();
const toPrint = () => { const toPrint = () => {
internalInstance.appContext.config.globalProperties.$openPrint(productPlanDetailList.value.filter(e => ids.value.includes(e.planDetailId)), 'demo1'); internalInstance.appContext.config.globalProperties.$openPrint(productPlanDetailList.value.filter(e => ids.value.includes(e.planDetailId)), 'demo1');
// let data = JSON.stringify(productPlanDetailList.value.filter(e => ids.value.includes(e.planDetailId)));
// router.push({ path: '/externalPrint', query: { data } });
}; };
</script> </script>

@ -1,58 +1,54 @@
<template> <template>
<div style="width: 100%;height: 100vh;overflow: hidden" title="预览" :close-on-press-escape="false" <div style="width: 100%;height: 100vh;overflow: hidden">
:show-close="false"> <div class="left">
<div id="printInfo" ref="printRef">
<el-dropdown split-button type="primary" @click="printFun" @command="switchPrinter" style="margin-right: 8px;"> <div class="content" v-for=" pageData in pageDatas"
{{ printName() }} :style="{pageBreakAfter: 'always',width: cmToPx(pageWidth)+'px',height: cmToPx(pageHeight)+'px',marginBottom:'4px'}">
<template #dropdown> <div v-for="i in nodes" class="node" :style="{left:i.position?.x+'px',top: i.position?.y+'px'}">
<el-dropdown-menu> <template v-if="i.type === 'text'">
<el-dropdown-item :command="-1">导出PDF</el-dropdown-item> <TextNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
<el-dropdown-item divided :command="0">本地打印</el-dropdown-item> :pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></TextNode>
<el-dropdown-item :divided="k===0" :command="i.id" v-for=" (i,k) in printers">{{ i.name }}</el-dropdown-item> </template>
</el-dropdown-menu> <template v-if="i.type === 'image'">
</template> <ImageNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
</el-dropdown> :pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></ImageNode>
<div id="printInfo" ref="printRef"> </template>
<div class="content" v-for=" pageData in pageDatas" <template v-if="i.type === 'barCode'">
:style="{pageBreakAfter: 'always',width: cmToPx(pageWidth)+'px',height: cmToPx(pageHeight)+'px',marginBottom:'4px'}"> <BarCodeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
<div v-for="i in nodes" class="node" :style="{left:i.position?.x+'px',top: i.position?.y+'px'}"> :pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></BarCodeNode>
<template v-if="i.type === 'text'"> </template>
<TextNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData" <template v-if="i.type === 'QRCode'">
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></TextNode> <QRCodeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
</template> :pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></QRCodeNode>
<template v-if="i.type === 'image'"> </template>
<ImageNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData" <template v-if="i.type === 'dateTime'">
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></ImageNode> <TimeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
</template> :pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></TimeNode>
<template v-if="i.type === 'barCode'"> </template>
<BarCodeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData" <template v-if="i.type === 'select'">
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></BarCodeNode> <SelectNode :isView="true" :isPrint="isPrint" :pageData="pageData"
</template> :pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"
<template v-if="i.type === 'QRCode'"> v-bind="i"></SelectNode>
<QRCodeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData" </template>
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></QRCodeNode>
</template>
<template v-if="i.type === 'dateTime'">
<TimeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></TimeNode>
</template>
<template v-if="i.type === 'select'">
<SelectNode :isView="true" :isPrint="isPrint" :pageData="pageData"
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"
v-bind="i"></SelectNode>
</template>
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- <template #footer>--> <div class="right">
<span class="dialog-footer"> <el-dropdown split-button type="primary" @click="printFun" @command="switchPrinter" style="margin-right: 8px;">
<!-- <el-button type="primary" @click="printFun"></el-button>--> {{ printName() }}
<!-- <el-button type="primary" v-print="printInfoObj"></el-button>--> <template #dropdown>
<el-button @click="closePrint"></el-button> <el-dropdown-menu>
</span> <el-dropdown-item :command="-1">导出PDF</el-dropdown-item>
<!-- </template>--> <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>
<div id="printArea" v-if="printPngList.length>0"> <div id="printArea" v-if="printPngList.length>0">
<div <div
@ -75,7 +71,10 @@ import BarCodeNode from './nodes/barCodeNode.vue';
import QRCodeNode from './nodes/QRCodeNode.vue'; import QRCodeNode from './nodes/QRCodeNode.vue';
import TimeNode from './nodes/timeNode.vue'; import TimeNode from './nodes/timeNode.vue';
import SelectNode from './nodes/selectNode.vue'; import SelectNode from './nodes/selectNode.vue';
import { useRoute } from 'vue-router';
import { isJSON } from '@/utils/scrin.js';
const route = useRoute();
const printType = ref(0); const printType = ref(0);
const printers = ref([ const printers = ref([
{ {
@ -98,11 +97,25 @@ const isPrint = ref(false);
const printRef = ref(); const printRef = ref();
const pageWidth = ref(21); const pageWidth = ref(21);
const pageHeight = ref(29.7); const pageHeight = ref(29.7);
const pageDatas = ref([{}]); const pageDatas = ref([{}, {}]);
const { cmToPx } = options; const { cmToPx } = options;
const nodes = ref([]); const nodes = ref([]);
window.addEventListener('message', (event) => {
if (event.data === 'print') {
printFun();
}
console.log(event);
});
onMounted(() => { onMounted(() => {
nodes.value = JSON.parse(localStorage.getItem('printNodes') || '[]'); nodes.value = JSON.parse(localStorage.getItem('printNodes') || '[]');
const param = route.query.data;
if (isJSON(param)) {
let data = JSON.parse(param);
if (Array.isArray(data)) {
}
// if()
}
}); });
const printInfoObj = { const printInfoObj = {
@ -222,6 +235,16 @@ defineExpose({
position: absolute; position: absolute;
} }
.left {
display: inline-block;
width: calc(100% - 200px);
}
.right {
vertical-align: top;
display: inline-block;
width: 200px;
}
</style> </style>
<style> <style>
.print-page { .print-page {

@ -0,0 +1,17 @@
<template>
<div style="width:100%;height: 100%;">
<iframe style="width:100%;height: 100%;" :src="url" frameborder="0" ref="iframe"></iframe>
</div>
</template>
<script setup>
const url = ref('/externalPrint');
const iframe = ref(null);
onMounted(() => {
iframe.value.onload = function() {
setTimeout(() => {
iframe.value.contentWindow.postMessage('print', '*');
}, 1000);
};
});
</script>
<style></style>

@ -237,6 +237,12 @@ defineExpose({
/* 打印样式:仅显示图片区域 */ /* 打印样式:仅显示图片区域 */
@media print { @media print {
@page {
margin: 0;
}
body * { body * {
visibility: hidden !important; visibility: hidden !important;
} }

Loading…
Cancel
Save