xins
/
hwmom-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改看板和打印设置

Browse Source
master
夜笙歌 3 days ago
parent 4b69c1a940
commit 7c9a14ef5d
5 changed files with 106 additions and 52 deletions
Show Stats Download Patch File Download Diff File

5
src/router/index.ts
Unescape Escape View File

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

7
src/views/mes/productPlanDetail/index.vue
Unescape Escape View File

@ -310,6 +310,8 @@
</template>
<script setup name='ProductPlanDetail' lang='ts'>
import { useRouter } from 'vue-router';
import {
addProductPlanDetail,
delProductPlanDetail,
@ -336,7 +338,7 @@ const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const router = useRouter();
const queryFormRef = ref<ElFormInstance>();
const productPlanDetailFormRef = ref<ElFormInstance>();
@ -663,6 +665,7 @@ onMounted(() => {
const internalInstance = getCurrentInstance();
const toPrint = () => {
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>

123
src/views/print/externalPrint.vue
Unescape Escape View File

@ -1,58 +1,54 @@
<template>
<div style="width: 100%;height: 100vh;overflow: hidden" title="预览" :close-on-press-escape="false"
:show-close="false">
<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 id="printInfo" ref="printRef">
<div class="content" v-for=" pageData in pageDatas"
:style="{pageBreakAfter: 'always',width: cmToPx(pageWidth)+'px',height: cmToPx(pageHeight)+'px',marginBottom:'4px'}">
<div v-for="i in nodes" class="node" :style="{left:i.position?.x+'px',top: i.position?.y+'px'}">
<template v-if="i.type === 'text'">
<TextNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></TextNode>
</template>
<template v-if="i.type === 'image'">
<ImageNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></ImageNode>
</template>
<template v-if="i.type === 'barCode'">
<BarCodeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></BarCodeNode>
</template>
<template v-if="i.type === 'QRCode'">
<QRCodeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
: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 style="width: 100%;height: 100vh;overflow: hidden">
<div class="left">
<div id="printInfo" ref="printRef">
<div class="content" v-for=" pageData in pageDatas"
:style="{pageBreakAfter: 'always',width: cmToPx(pageWidth)+'px',height: cmToPx(pageHeight)+'px',marginBottom:'4px'}">
<div v-for="i in nodes" class="node" :style="{left:i.position?.x+'px',top: i.position?.y+'px'}">
<template v-if="i.type === 'text'">
<TextNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></TextNode>
</template>
<template v-if="i.type === 'image'">
<ImageNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></ImageNode>
</template>
<template v-if="i.type === 'barCode'">
<BarCodeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></BarCodeNode>
</template>
<template v-if="i.type === 'QRCode'">
<QRCodeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
: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>
<!-- <template #footer>-->
<span class="dialog-footer">
<!-- <el-button type="primary" @click="printFun">打印</el-button>-->
<!-- <el-button type="primary" v-print="printInfoObj">打印</el-button>-->
<el-button @click="closePrint">关闭</el-button>
</span>
<!-- </template>-->
<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
@ -75,7 +71,10 @@ import BarCodeNode from './nodes/barCodeNode.vue';
import QRCodeNode from './nodes/QRCodeNode.vue';
import TimeNode from './nodes/timeNode.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 printers = ref([
{
@ -98,11 +97,25 @@ const isPrint = ref(false);
const printRef = ref();
const pageWidth = ref(21);
const pageHeight = ref(29.7);
const pageDatas = ref([{}]);
const pageDatas = ref([{}, {}]);
const { cmToPx } = options;
const nodes = ref([]);
window.addEventListener('message', (event) => {
if (event.data === 'print') {
printFun();
}
console.log(event);
});
onMounted(() => {
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 = {
@ -222,6 +235,16 @@ defineExpose({
position: absolute;
}
.left {
display: inline-block;
width: calc(100% - 200px);
}
.right {
vertical-align: top;
display: inline-block;
width: 200px;
}
</style>
<style>
.print-page {

17
src/views/print/test.vue
Unescape Escape View File

@ -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>

6
src/views/print/view.vue
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save