From a742ba601257c85f36212c774a4fbb710fef84f1 Mon Sep 17 00:00:00 2001
From: qiuhongwu <Qhw0227@163.com>
Date: Wed, 17 Jan 2024 09:56:18 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=93=E5=8D=B0=20=E5=8F=91=E8=B4=A7?=
 =?UTF-8?q?=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/heli/hlvuestyle/dayin.vue       |  28 +-
 .../src/views/heli/hlvuestyle/print.vue       |   2 +-
 .../views/heli/hlvuestyle/shipmentsPrint.vue  | 380 ++++++++++++++++++
 3 files changed, 399 insertions(+), 11 deletions(-)
 create mode 100644 mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/shipmentsPrint.vue

diff --git a/mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/dayin.vue b/mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/dayin.vue
index f2911dc5..d8e6ec5e 100644
--- a/mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/dayin.vue
+++ b/mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/dayin.vue
@@ -1,28 +1,36 @@
 <template>
  <el-button class="default-btn primary-btn" @click="printHandle()">打印启动单</el-button>
+ <el-button class="default-btn primary-btn" @click="printHandle2()">打印发货单</el-button>
 
-<!-- 【打印】 - 弹框-->
+<!-- 【打印启动单】 - 弹框-->
 <Print ref="printRef"  :info="dialogInfo" />
+<!-- 【打印发货单】 - 弹框-->
+<ShipmentsPrint ref="shipmentsPrintRef"  :info="dialogInfo" />
 
 </template>
 <script setup lang="ts">
 import {ref,reactive} from 'vue'
 import Print from './print.vue' // 引入打印弹框
+import ShipmentsPrint from './shipmentsPrint.vue' // 引入打印弹框
 
-/**
- * 【打印小票】
- */
+
+  // 打印启动单
 const printRef = ref() // 打印弹框
-let dialogVisible = ref(false) // 打印弹框是否显示
-let dialogInfo = ref({}) // 打印弹框数据
+const dialogVisible = ref(false) // 打印弹框是否显示
+const dialogInfo = ref({}) // 打印弹框数据
 const data = ref<Record<string, any>>({});
-
-/**
- * 打印小票
- */
+  // 打印启动单
  const printHandle =()=> {
  dialogInfo.value = data.value || {};
   dialogVisible.value = true;
    printRef.value.open()
 }
+//打印发货单
+const shipmentsPrintRef = ref() // 打印弹框
+
+ const printHandle2 =()=> {
+ dialogInfo.value = data.value || {};
+  dialogVisible.value = true;
+   shipmentsPrintRef.value.open()
+}
 </script>
diff --git a/mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/print.vue b/mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/print.vue
index f16ea450..8e9e297f 100644
--- a/mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/print.vue
+++ b/mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/print.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog title="打印" v-model="dialogVisible" width="1000">
+  <Dialog title="打印预览" v-model="dialogVisible" width="1000">
     <!-- 打印预览 -->
     <div class="print-wrap page" ref="print">
       <table border="2" cellspacing="0" id="table">
diff --git a/mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/shipmentsPrint.vue b/mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/shipmentsPrint.vue
new file mode 100644
index 00000000..41dc6f3b
--- /dev/null
+++ b/mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/shipmentsPrint.vue
@@ -0,0 +1,380 @@
+<template>
+  <Dialog title="打印预览" v-model="dialogVisible" width="1000">
+    <!-- 打印预览 -->
+    <div class="print-wrap page" ref="print">
+      <!-- 客户联 -->
+      <table border="2" cellspacing="0" id="table">
+        <tbody>
+          <tr>
+            <td colspan="10">
+               <div style="display: flex; align-items: center;justify-content: space-between">
+                 <img
+                  src="/src/assets/imgs/exlogo.png"
+                  style="width: 100px;"
+                  alt=""
+                />
+              <span style="font-size: 20px; font-weight: 700;">发货单</span>
+              <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+               </div>
+            </td>
+          </tr>
+        </tbody>
+        <tbody>
+          <tr>
+            <td colspan="2"> 发货编号 </td>
+            <td colspan="3">
+              <span>{{ 'HL202306024' }}</span>
+            </td>
+            <td>合同号</td>
+            <td colspan="2">{{ `` }}</td>
+            <td> 性质： </td>
+            <td>{{ `新作` }} </td>
+          </tr>
+        </tbody>
+        <tr>
+          <td colspan="2"> 发货日期 </td>
+          <td colspan="3">
+            {{ `2024-01-18` }}
+          </td>
+          <td> 联系人</td>
+          <td>{{ `张鹏` }} </td>
+          <td> 电话 </td>
+          <td colspan="2">{{ `13812345678` }} </td>
+        </tr>
+        <tr>
+          <td colspan="2"> 收货单位 </td>
+          <td colspan="8">{{ `京凤汽车股份有限公司铸造分公司` }}</td>
+        </tr>
+        <tr>
+          <td colspan="2"> 收货地址 </td>
+          <td colspan="8">{{ `湖北省集阳市高新区米带路和斗店路交又口东凤铸造撤迁改造项目` }}</td>
+        </tr>
+        <tr>
+          <td colspan="2"> 项目名称</td>
+          <td colspan="4">{{ `康明斯Ruby发动机缸益` }}</td>
+          <td>重量(T)</td>
+          <td>{{ `18` }}</td>
+          <td>位置(米)</td>
+          <td>{{ `9.6` }}</td>
+        </tr>
+        <tbody>
+          <tr>
+            <td colspan="4"> 内容清单 </td>
+            <td> 单位 </td>
+            <td> 数量 </td>
+            <td>重量(T)</td>
+            <td>尺寸(米)</td>
+            <td colspan="2"> 备注 </td>
+          </tr>
+          <tr v-for="item in 6" :key="item.index">
+            <td colspan="4"> 工菜模具详见清单阳件 </td>
+            <td> </td>
+            <td> </td>
+            <td></td>
+            <td></td>
+            <td colspan="2"> 备注 </td>
+          </tr>
+        </tbody>
+        <tr>
+          <td colspan="2"> 发货单位 </td>
+          <td colspan="3">
+            {{ `杭州合立机有限公可` }}
+          </td>
+          <td> 联系人</td>
+          <td>{{ `张鹏` }} </td>
+          <td> 电话 </td>
+          <td colspan="2">{{ `13812345678` }} </td>
+        </tr>
+        <tr>
+          <td colspan="2"> 司机姓名 </td>
+          <td colspan="2">
+            {{ `杭州合立机有限公可` }}
+          </td>
+          <td>车牌号</td>
+          <td colspan="2"></td>
+          <td> 电话 </td>
+          <td colspan="2">{{ `13812345678` }} </td>
+        </tr>
+        <tr>
+          <td colspan="5">
+            <div style="text-align: left">内部货物门点人签名:</div>
+          </td>
+          <td colspan="5">
+            <div style="text-align: left">收货人签名:</div>
+          </td>
+        </tr>
+      </table>
+      <div style="width: 100%; display: flex; justify-content: space-between; align-items: center">
+        <span>制单人：{{ `` }}</span>
+        <span>-客户联-</span>
+      </div>
+      <div class="divide_line" style="margin: 20px 0"></div>
+      <!-- 回单联 -->
+      <table border="2" cellspacing="0" id="table1" style="position: relative !important">
+        <!-- <img
+          src="/src/assets/imgs/exlogo.png"
+          style="position: absolute; top: 10px; width: 90px"
+          alt=""
+        /> -->
+        <tbody>
+          <tr>
+            <td colspan="10">
+               <div style="display: flex; align-items: center;justify-content: space-between">
+                 <img
+                  src="/src/assets/imgs/exlogo.png"
+                  style="width: 100px;"
+                  alt=""
+                />
+              <span style="font-size: 20px; font-weight: 700;">发货单</span>
+              <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+               </div>
+            </td>
+          </tr>
+        </tbody>
+        <tbody>
+          <tr>
+            <td colspan="2"> 发货编号 </td>
+            <td colspan="3">
+              <span>{{ 'HL202306024' }}</span>
+            </td>
+            <td>合同号</td>
+            <td colspan="2">{{ `` }}</td>
+            <td> 性质： </td>
+            <td>{{ `新作` }} </td>
+          </tr>
+        </tbody>
+        <tr>
+          <td colspan="2"> 发货日期 </td>
+          <td colspan="3">
+            {{ `2024-01-18` }}
+          </td>
+          <td> 联系人</td>
+          <td>{{ `张鹏` }} </td>
+          <td> 电话 </td>
+          <td colspan="2">{{ `13812345678` }} </td>
+        </tr>
+        <tr>
+          <td colspan="2"> 收货单位 </td>
+          <td colspan="8">{{ `京凤汽车股份有限公司铸造分公司` }}</td>
+        </tr>
+        <tr>
+          <td colspan="2"> 收货地址 </td>
+          <td colspan="8">{{ `湖北省集阳市高新区米带路和斗店路交又口东凤铸造撤迁改造项目` }}</td>
+        </tr>
+        <tr>
+          <td colspan="2"> 项目名称</td>
+          <td colspan="4">{{ `康明斯Ruby发动机缸益` }}</td>
+          <td>重量(T)</td>
+          <td>{{ `18` }}</td>
+          <td>位置(米)</td>
+          <td>{{ `9.6` }}</td>
+        </tr>
+        <tbody>
+          <tr>
+            <td colspan="4"> 内容清单 </td>
+            <td> 单位 </td>
+            <td> 数量 </td>
+            <td>重量(T)</td>
+            <td>尺寸(米)</td>
+            <td colspan="2"> 备注 </td>
+          </tr>
+          <tr v-for="item in 6" :key="item.index">
+            <td colspan="4"> 工菜模具详见清单阳件 </td>
+            <td> </td>
+            <td> </td>
+            <td></td>
+            <td></td>
+            <td colspan="2"> 备注 </td>
+          </tr>
+        </tbody>
+        <tr>
+          <td colspan="2"> 发货单位 </td>
+          <td colspan="3">
+            {{ `杭州合立机有限公可` }}
+          </td>
+          <td> 联系人</td>
+          <td>{{ `张鹏` }} </td>
+          <td> 电话 </td>
+          <td colspan="2">{{ `13812345678` }} </td>
+        </tr>
+        <tr>
+          <td colspan="2"> 司机姓名 </td>
+          <td colspan="2">
+            {{ `杭州合立机有限公可` }}
+          </td>
+          <td>车牌号</td>
+          <td colspan="2"></td>
+          <td> 电话 </td>
+          <td colspan="2">{{ `13812345678` }} </td>
+        </tr>
+        <tr>
+          <td colspan="5">
+            <div style="text-align: left">内部货物门点人签名:</div>
+          </td>
+          <td colspan="5">
+            <div style="text-align: left">收货人签名:</div>
+          </td>
+        </tr>
+      </table>
+      <div style="width: 100%; display: flex; justify-content: space-between; align-items: center">
+        <span>制单人：{{ `` }}</span>
+        <span>-回单联-</span>
+      </div>
+    </div>
+    <template #footer>
+      <!-- 【打印】 -->
+      <el-button @click="onPrint" type="primary">打印</el-button>
+      <el-button @click="outopen">取消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+// import { ref, reactive } from 'vue'
+import { Check } from '@element-plus/icons-vue'
+const dialogVisible = ref(false) // 弹窗的是否展示
+
+const onPrint = () => {
+  // 拿到打印页面dom节点
+  const printNode = document.querySelector('.print-wrap')
+  if (!printNode) return
+  // 页面文档创建一个空的内框架，用于挂载打印节点，并设置一定的样式
+  const newIframe: any = document.createElement('iframe')
+  newIframe.setAttribute(
+    'style',
+    'width:0px;height:0px;position:absolute;left:-9999px;top:-9999px;'
+  )
+  newIframe.setAttribute('align', 'center')
+  document.body.appendChild(newIframe)
+  // 将打印页面设置为内框架内容
+  let doc: any = null
+  doc = newIframe.contentWindow.document
+  doc.write(`
+    <style type="text/css">
+      /* 浏览器打印基本样式 */
+     .page {
+        width: 21cm;
+        min-height: 29.7cm;
+        padding: 10mm;
+        margin: 20px auto;
+        border: 1px #d3d3d3 solid;
+        border-radius: 5px;
+        background: white;
+        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+        position: relative;
+        font-size: 14px !important;
+     }
+
+      @page {
+       size: A4;
+       margin: 5px 1cm;
+      }
+      @media print {
+        .page {
+          margin: 0;
+          border: initial;
+          border-radius: initial;
+          width: initial;
+          min-height: initial;
+          box-shadow: initial;
+          background: initial;
+          page-break-after: always;
+        }
+      }
+          table {
+             width: 100%; /* 让表格宽度100%占满其父元素宽度 */
+             height: auto; /* 高度根据内容自适应 */
+             font-size: 14px;
+             text-align: center;
+             border-collapse: collapse;
+             margin-top: 5mm; /* 添加顶部外边距，替代原先的页内边距 */
+          td {
+            padding: 5px 0;
+            border: 1px solid #333;
+            }
+         }
+        .divide_line { 
+          justify-content: center;
+          border-bottom: 1px dashed rgba(51, 51, 51, 1); 
+          }
+       
+    </style>
+    <div>
+      ${printNode.innerHTML}
+    </div>`)
+  doc.close()
+  // 浏览器打印页面打开渲染
+  setTimeout(() => {
+    newIframe.contentWindow.focus()
+    newIframe.contentWindow.print()
+    document.body.removeChild(newIframe) // 移除打印内框架，下次打印下次再挂载
+    dialogVisible.value = false
+  }, 100)
+}
+const outopen = () => {
+  dialogVisible.value = false
+}
+const queryParams: any = ref({
+  code: undefined
+})
+const isSelected = ref([1, 3])
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
+
+<style scoped lang="scss">
+.page {
+  width: 21cm;
+  min-height: 29.7cm;
+  padding: 10mm;
+  margin: 20px auto;
+  border: 1px #d3d3d3 solid;
+  border-radius: 5px;
+  background: white;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  position: relative;
+  font-size: 14px !important;
+}
+
+@page {
+  size: A4;
+  margin: 0;
+}
+@media print {
+  .page {
+    margin: 0;
+    border: initial;
+    border-radius: initial;
+    width: initial;
+    min-height: initial;
+    box-shadow: initial;
+    background: initial;
+    page-break-after: always;
+  }
+}
+table {
+  width: 100%; /* 让表格宽度100%占满其父元素宽度 */
+  height: auto; /* 高度根据内容自适应 */
+  font-size: 14px;
+  text-align: center;
+  border-collapse: collapse;
+  margin-top: 5mm; /* 添加顶部外边距，替代原先的页内边距 */
+  td {
+    padding: 5px 0;
+    border: 1px solid #333;
+  }
+}
+.divide_line {
+  justify-content: center;
+  border-bottom: 1px dashed rgba(51, 51, 51, 1);
+}
+#table {
+  position: relative;
+}
+/*
+	A4的大小：21cm*29.7cm（width:794px;）。
+	单位换算：1 inch = 2.54 cm 1mm = 96 px 1 cm = 37.79528 px*/
+</style>