修改打印配置

src/App.vue

@@ -2,19 +2,26 @@
   <el-config-provider :locale="appStore.locale" :size="appStore.size">
     <router-view />
   </el-config-provider>
+  <PrintView ref="printView" />
 </template>
 
 <script setup lang="ts">
 import useSettingsStore from '@/store/modules/settings';
 import { handleThemeStyle } from '@/utils/theme';
 import useAppStore from '@/store/modules/app';
+import PrintView from '@/views/print/view.vue';
 
 const appStore = useAppStore();
+const printView = ref();
+const internalInstance = getCurrentInstance();
 
 onMounted(() => {
   nextTick(() => {
     // 初始化主题样式
     handleThemeStyle(useSettingsStore().theme);
+    if (internalInstance) {
+      internalInstance.appContext.config.globalProperties.$openPrint = printView.value.openPrint;
+    }
   });
 });
 </script>

src/views/mes/productPlanDetail/index.vue

@@ -88,6 +88,11 @@
                        v-hasPermi="['mes:productPlanDetail:export']">导出
             </el-button>
           </el-col>
+          <el-col :span='1.5'>
+            <el-button type='warning' plain icon='Download' @click='toPrint'
+                       v-hasPermi="['mes:productPlanDetail:export']">打印
+            </el-button>
+          </el-col>
           <right-toolbar v-model:showSearch='showSearch' :columns='columns' :search='true'
                          @queryTable='getList'></right-toolbar>
         </el-row>
@@ -306,19 +311,19 @@
 
 <script setup name='ProductPlanDetail' lang='ts'>
 import {
-  listProductPlanDetail,
-  getProductPlanDetail,
-  delProductPlanDetail,
   addProductPlanDetail,
+  delProductPlanDetail,
+  getProductPlanDetail,
+  listProductPlanDetail,
   updateProductPlanDetail
 } from '@/api/mes/productPlanDetail';
-import { ProductPlanDetailVO, ProductPlanDetailQuery, ProductPlanDetailForm } from '@/api/mes/productPlanDetail/types';
+import { ProductPlanDetailForm, ProductPlanDetailQuery, ProductPlanDetailVO } from '@/api/mes/productPlanDetail/types';
-import {getUserList} from "@/api/system/user";
+import { getUserList } from '@/api/system/user';
-import {getBaseShiftInfoList} from "@/api/mes/baseShiftInfo";
+import { getBaseShiftInfoList } from '@/api/mes/baseShiftInfo';
-import {getBaseClassTeamInfoList} from "@/api/mes/baseClassTeamInfo";
+import { getBaseClassTeamInfoList } from '@/api/mes/baseClassTeamInfo';
-import {getBaseToolingInfoList} from "@/api/mes/baseToolingInfo";
+import { getBaseToolingInfoList } from '@/api/mes/baseToolingInfo';
-import {getBaseMeasurementUnitInfoList} from "@/api/mes/baseMeasurementUnitInfo";
+import { getBaseMeasurementUnitInfoList } from '@/api/mes/baseMeasurementUnitInfo';
-import {getPlanInfoList} from "@/api/mes/planInfo";
+import { getPlanInfoList } from '@/api/mes/planInfo';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { mes_plan_detail_status, active_flag } = toRefs<any>(proxy?.useDict('mes_plan_detail_status', 'active_flag'));
@@ -654,4 +659,10 @@ onMounted(() => {
   getWorkshopId();
   getList();
 });
+
+const internalInstance = getCurrentInstance();
+const toPrint = () => {
+  internalInstance.appContext.config.globalProperties.$openPrint(productPlanDetailList.value.filter(e => ids.value.includes(e.planDetailId)), 'demo1');
+
+};
 </script>

src/views/print/index.vue

@@ -46,6 +46,10 @@
         <el-tag :draggable="true" @dragstart="onDragStart($event, 'circle',pid)" class="mx-1" size="large">圆形
         </el-tag>
         <h4>表单组件</h4>
+        <el-tag :draggable="true" @dragstart="onDragStart($event, 'text',pid,{name:'deviceName'})" class="mx-1"
+                size="large">
+          设备名称
+        </el-tag>
       </div>
       <div class="content" @drop="onDrop">
         <div class="flowArea" :style="{width:zoom * cmToPx(pageWidth)+'px',height:zoom * cmToPx(pageHeight)+'px'}">
@@ -184,7 +188,7 @@
         </el-form>
       </div>
     </div>
-    <View v-if="isView" v-model:isView="isView" />
+    <!--    <View v-if="isView" v-model:isView="isView" />-->
   </div>
 </template>
 <script setup lang="ts">
@@ -200,16 +204,16 @@ 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 View from './view.vue';
 
 const router = useRouter();
 const { updateNode } = useVueFlow();
 // 获取自定义的方法
 const { onDragStart, onDrop, onDragOver } = tool();
 const { cmToPx } = options;
+const internalInstance = getCurrentInstance();
 
 const flowRef = ref();
-const isView = ref(false);
+// const isView = ref(false);
 const isSnapToGrid = ref(true);
 const pageWidth = ref(21);
 const pageHeight = ref(29.7);
@@ -230,7 +234,7 @@ const logEvent = async (eventname, event) => {
       nodeAttrForm.value = event.node.data.options;
       nodeData.value = JSON.parse(JSON.stringify(event.node));
       break;
-    case 'nodeDrag': 
+    case 'nodeDrag':
       if (event.nodes.length === 1) {
         nodeAttrForm.value = event.node.data.options;
         nodeData.value = JSON.parse(JSON.stringify(event.node));
@@ -285,7 +289,9 @@ const zoomChange = (e) => {
 
 const view = () => {
   localStorage.setItem('printNodes', JSON.stringify(nodes.value));
-  isView.value = true;
+  console.log();
+  internalInstance.appContext.config.globalProperties.$openPrint([{}, {}, {}, {}, {}], 'demo1');
+  // isView.value = true;
 
 };
 const save = () => {

src/views/print/nodes/textNode.vue

@@ -52,7 +52,7 @@ const props = defineProps({
 const eleData = ref('');
 const getEleData = () => {
   if (props.isView) {
-    eleData.value = props.data.options.field ? props.pageData?.[props.data.options.field] : props.data.options.default;
+    eleData.value = props.data.options.field ? props.pageData?.[props.data.options.field] : props.data.options.default; 
   } else {
     eleData.value = props.data.options.default || '文字';
   }

src/views/print/tool.js

@@ -12,8 +12,8 @@ const cmToPx = (cm) => {
 };
 
 
-const getOption = (e) => {
+const getOption = (e, name) => {
-  let commonOption = { field: '' };
+  let commonOption = { field: name };
   if (e === 'text') {
     return { ...commonOption, default: '' };
   } else if (e === 'image') {
@@ -57,8 +57,9 @@ const getNodeSize = (e) => {
 const tool = () => {
   const nodeType = ref('');
   const parentId = ref('');
+  const defaultName = ref('');
   const { addNodes, screenToFlowCoordinate, onNodesInitialized, updateNode } = useVueFlow();
-  const onDragStart = (event, type, pid) => {
+  const onDragStart = (event, type, pid, options) => {
     if (event.dataTransfer) {
       event.dataTransfer.setData('application/vueflow', type);
       event.dataTransfer.effectAllowed = 'move';
@@ -66,6 +67,7 @@ const tool = () => {
 
     nodeType.value = type;
     parentId.value = pid;
+    defaultName.value = options?.name;
     document.addEventListener('drop', onDragEnd);
   };
   const onDragEnd = () => {
@@ -88,7 +90,7 @@ const tool = () => {
       extent: 'parent',
       dimensions,
       position,
-      data: { options: getOption(nodeType.value), outputData: {} }
+      data: { options: getOption(nodeType.value, defaultName.value), outputData: {} }
     };
 
 

src/views/print/view.vue

@@ -1,32 +1,32 @@
 <template>
 
-  <el-dialog v-model="props.isView" title="预览" :close-on-press-escape="false" :show-close="false">
+  <el-dialog v-model="isView" title="预览" :close-on-press-escape="false" :show-close="false">
     <div id="printInfo" ref="printRef">
-      <div class="content" v-for=" i in pageDatas"
+      <div class="content" v-for=" pageData in pageDatas"
            :style="{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="i"
+            <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="i"
+            <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="i"
+            <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="i"
+            <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="i"
+            <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="i"
+            <SelectNode :isView="true" :isPrint="isPrint" :pageData="pageData"
                         :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"
                         v-bind="i"></SelectNode>
           </template>
@@ -38,7 +38,7 @@
       <span class="dialog-footer">
         <el-button type="primary" @click="printFun">打印</el-button>
         <!--        <el-button type="primary" v-print="printInfoObj">打印</el-button>-->
-        <el-button @click="closeDialog ">关闭</el-button>
+        <el-button @click="closePrint">关闭</el-button>
       </span>
     </template>
   </el-dialog>
@@ -56,25 +56,17 @@ import TimeNode from './nodes/timeNode.vue';
 import SelectNode from './nodes/selectNode.vue';
 
 
-const props = defineProps({
+const isView = ref(false);
-  isView: {
-    type: Boolean,
-    required: false
-  }
-});
-const emit = defineEmits(['update:isView']);
-
 
 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([]);
 onMounted(() => {
-  nodes.value = JSON.parse(localStorage.getItem('printNodes') || '[]');
+  nodes.value = JSON.parse(localStorage.getItem('printNodes') || '[]'); 
-  console.log(nodes.value);
 });
 
 const printInfoObj = {
@@ -119,9 +111,29 @@ const printFun = () => {
     });
   });
 };
-const closeDialog = () => {
+const closePrint = () => {
-  emit('update:isView', false);
+  isView.value = false;
 };
+const openPrint = (pages, templateId) => {
+  isView.value = false;
+  nextTick(() => {
+    nodes.value = JSON.parse(localStorage.getItem('printNodes') || '[]');
+    isView.value = true;
+    let pageData = [];
+    if (Array.isArray(pages)) {
+      pageData = pages;
+    }
+    if (typeof pages !== 'object' || pages === null) {
+      pageData = [pages];
+    }
+    console.log(pageData);
+    pageDatas.value = pageData || [];
+  });
+};
+defineExpose({
+  openPrint
+  // closePrint
+});
 </script>
 <style scoped>
 .content {