From 7c9a14ef5d0a01159096582dfa150bf9c6e98079 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Mon, 23 Jun 2025 17:49:52 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=9C=8B=E6=9D=BF=E5=92=8C?=
 =?UTF-8?q?=E6=89=93=E5=8D=B0=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.ts                       |   5 +
 src/views/mes/productPlanDetail/index.vue |   7 +-
 src/views/print/externalPrint.vue         | 123 +++++++++++++---------
 src/views/print/test.vue                  |  17 +++
 src/views/print/view.vue                  |   6 ++
 5 files changed, 106 insertions(+), 52 deletions(-)
 create mode 100644 src/views/print/test.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index 616d019..5522b34 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -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,
diff --git a/src/views/mes/productPlanDetail/index.vue b/src/views/mes/productPlanDetail/index.vue
index 0aada43..8af17ee 100644
--- a/src/views/mes/productPlanDetail/index.vue
+++ b/src/views/mes/productPlanDetail/index.vue
@@ -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>
diff --git a/src/views/print/externalPrint.vue b/src/views/print/externalPrint.vue
index 40db1a0..d9a4477 100644
--- a/src/views/print/externalPrint.vue
+++ b/src/views/print/externalPrint.vue
@@ -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 {
diff --git a/src/views/print/test.vue b/src/views/print/test.vue
new file mode 100644
index 0000000..b022900
--- /dev/null
+++ b/src/views/print/test.vue
@@ -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>
diff --git a/src/views/print/view.vue b/src/views/print/view.vue
index 604bd8a..439b4f5 100644
--- a/src/views/print/view.vue
+++ b/src/views/print/view.vue
@@ -237,6 +237,12 @@ defineExpose({
 
 /* 打印样式：仅显示图片区域 */
 @media print {
+  @page {
+ 
+
+    margin: 0;
+
+  }
   body * {
     visibility: hidden !important;
   }