修改看板和打印设置

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,

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>

src/views/print/externalPrint.vue

@@ -1,18 +1,7 @@
 <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 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'}">
@@ -46,13 +35,20 @@
           </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>
+    <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 {

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>

src/views/print/view.vue

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