零件采购订单打印

mes-ui/mes-ui-admin-vue3/src/views/heli/purchaseorderno/detail.vue

@@ -79,13 +79,110 @@
     </el-form>
     <div class="hl-footer text-center">
       <el-button @click="receiveGoods()" type="primary" size="large" >收货</el-button>
-      <el-button @click="isPrint()" type="primary" size="large" >打印</el-button>
+      <el-button @click="isPrint()" type="primary" size="large"  :loading="printLoading">打印</el-button>
       <el-button @click="deleteForm()" type="danger" size="large" >删除</el-button>
 
     </div>
   </el-card>
 
   <!-- 表单弹窗：物料列表 -->
+
+
+
+
+
+
+
+  <!-- 表单弹窗：物料列表 -->
+  <el-dialog v-model="printDialogVisible" width="80%" title="采购单打印" :close-on-click-modal="false">
+    <div id="printArea" class="print-content">
+      <div class="print-header">
+        <div class="order-info">
+          <div style="display: flex;">
+          <span style="width: 210px;">订单编号：{{ printData.purchaseNo }}</span>
+          <span style="margin-left:20px; width: 170px;">订单日期：{{ formatDate(printData.ordDate) }}</span>
+          <span style="margin-left:20px;width: 150px">供应商：{{ printData.supplierName }}</span>
+         </div>
+         <div style="display: flex;">
+          <span style="margin-left:20px;width: 110px">联系人：{{ printData.contactName }}</span>
+          <span style="margin-left:20px;width: 150px">电话：{{ printData.contactMobile }}</span>
+          </div>
+         
+        </div>
+      </div>
+      <table class="print-table">
+        <colgroup>
+    <col style="width: 19%;"/>
+    <col style="width: 25%;"/>
+    <col style="width: 8%;"/>
+    <col style="width: 8%;"/>
+    <col style="width: 9%;"/>
+    <col style="width: 8%;"/>
+    <col style="width: 8%;"/>
+    <col style="width: 8%;"/>
+    <col style="width: 7%;"/>
+  </colgroup>
+  <thead>
+    <tr>
+      <th>子项目编号</th>
+      <th>零件名称</th>
+      <th>材料</th>
+      <th>数量</th>
+      <th>要求完成日期</th>
+      <th>技术要求</th>
+      <th>理论重量</th>
+      <th>价格(元)</th>
+      <th>备注</th>
+
+    </tr>
+  </thead>
+  <tbody>
+  <tr v-for="(item, index) in 17" :key="index">
+    <td>{{ printData.purchaseOrderNoDetailList[index]?.projectSubCode || '' }}</td>
+    <td>{{ printData.purchaseOrderNoDetailList[index]?.boomName ? limitTo20Chars(printData.purchaseOrderNoDetailList[index].boomName) : '' }}</td>
+    <td>{{ printData.purchaseOrderNoDetailList[index]?.compositionName || '' }}</td>
+    <td>{{ printData.purchaseOrderNoDetailList[index]?.purchaseAmount || '' }}</td>
+    <td>{{ printData.purchaseOrderNoDetailList[index]?.requireTime ? formatDate(printData.purchaseOrderNoDetailList[index].requireTime) : '' }}</td>
+    <td>{{ printData.purchaseOrderNoDetailList[index]?.description || '' }}</td>
+    <td>{{ printData.purchaseOrderNoDetailList[index]?.theWeight || '' }}</td>
+    <td>{{ printData.purchaseOrderNoDetailList[index]?.estimatedPrice || '' }}</td>
+    <td></td>
+
+  </tr>
+</tbody>
+
+</table>
+<div class="order-info" style="margin-top: 10px;border-bottom: 1px solid #ccc;padding-bottom: 10px;">
+  <div style="display: flex;">
+         <span >交货地址：{{ printData.deliveryAddress }}</span>
+
+  </div>
+    <div style="display: flex; padding-right: 10%;">
+         <span style="margin-left:20px;width: 100px">邮编：{{ printData.postalCode }}</span>
+   <span style="margin-left:20px;width: 150px">接收人：{{ printData.username }}</span>
+      <span style="margin-left:20px;width: 150px">电话：{{ printData.userMobile }}</span>
+        </div>
+        </div>
+
+        <div class="stamp-info" style="display: flex;justify-content: space-between;">
+
+          <div style="display: flex;flex-direction: column;">
+             <span >买方：{{ printData.buyer }}</span>
+              <span style="margin-top: 20px;">签字/盖章</span>
+
+          </div>
+             <div style="display: flex;flex-direction: column;padding-right: 20%;">
+             <span >卖方：{{ printData.supplierName }}</span>
+              <span style="margin-top: 20px;">签字/盖章</span>
+
+          </div>
+        </div>
+    </div>
+    <template #footer>
+      <el-button @click="printDialogVisible = false">关闭</el-button>
+      <el-button type="primary" @click="doPrint">打印</el-button>
+    </template>
+  </el-dialog>
 </template>
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
@@ -175,12 +272,132 @@ onMounted(async () => {
   formData.value = await PurchaseOrderNoApi.getPurchaseOrderNo(query.id)
   getList();
 })
-const isPrint = async () => {
-  var newVar = await PurchaseOrderNoApi.isPrint(query.id);
-  console.log(newVar)
 
 
+
+const printLoading = ref(false)
+// 打印弹窗内容
+const printDialogVisible = ref(false)
+const printData = ref({})
+
+function openPrintDialog(data) {
+  printData.value = data
+  printDialogVisible.value = true
+}
+const isPrint = async () => {
+    printLoading.value = true
+    printLoading.value = true
+  try {
+   var newVar = await PurchaseOrderNoApi.isPrint(query.id);
+  console.log(newVar)
+    openPrintDialog(newVar)
+  } finally {
+    printLoading.value = false
+  }
+
 }
+
+
+function doPrint() {
+  // 创建新的打印窗口
+  const printContent = document.getElementById('printArea')
+  if (!printContent) return
+
+  const iframe = document.createElement('iframe')
+  iframe.style.position = 'absolute'
+  iframe.style.width = '0'
+  iframe.style.height = '0'
+  iframe.style.border = 'none'
+  document.body.appendChild(iframe)
+
+  const doc = iframe.contentWindow?.document
+  doc?.open()
+  doc?.write(`
+      <!DOCTYPE html>
+      <html>
+      <head>
+        <title >采购单</title>
+        <style>
+          body {
+            font-family: Arial, sans-serif;
+            margin: 10px;
+            font-size: 12px;
+          }
+          .print-content {
+            width: 100%;
+            padding-top: 15px;
+          }
+          .order-info {
+            justify-content: space-between;
+            display: flex;
+            flex-wrap: wrap;  
+            align-items: center;
+
+          }
+
+          .stamp-info {
+  margin-top: 10px;
+   
+}
+.stamp-info span{
+    font-size: 15px !important;
+  
+}
+    .order-info span{
+    font-size: 15px !important;
+  
+}
+          .print-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 10px;
+          }
+          .print-table th, .print-table td {
+            border: 1px solid #ddd;
+            padding: 5px;
+            text-align: center;
+            height: 20px;         /* 设置固定高度 */
+            line-height: 20px;    /* 垂直居中 */
+          }
+          .print-table th {
+            background-color: #f5f5f5;
+          }
+          @media print {
+            body { margin: 0; }
+            .print-content { 
+              width: 100%;
+              margin: 0;
+              padding: 10px;
+            }
+          }
+        </style>
+      </head>
+      <body>
+        ${printContent.innerHTML}
+      </body>
+      </html>
+    `)
+     doc?.close()
+
+  iframe.onload = () => {
+    iframe.contentWindow?.focus()
+    iframe.contentWindow?.print()
+    setTimeout(() => document.body.removeChild(iframe), 1000)
+  }
+   
+}
+
+function limitTo20Chars(input) {
+  if (typeof input !== 'string') return '';
+  return input.length > 20 ? input.slice(0, 20) : input;
+}
+
+function formatDate(val) {
+  if (!val) return ''
+  const date = new Date(val)
+  return date.toLocaleDateString()
+}
+
 const deleteForm = async () => {
   await PurchaseOrderNoApi.deleteForm(query.id)
   router.push({ path: '/purchase/purchaseorderno' })
@@ -224,3 +441,79 @@ const getList = async () => {
 }
 
 </script>
+
+<style scoped>
+/* 打印样式 */
+@media print {
+  /* 隐藏所有非打印内容 */
+  body * {
+    visibility: hidden;
+  }
+  
+  /* 只显示打印区域 */
+  #printArea, #printArea * {
+    visibility: visible;
+  }
+  
+  /* 打印区域定位 */
+  #printArea {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+  }
+  
+  /* 隐藏弹窗相关元素 */
+  .el-dialog, .el-dialog__wrapper, .el-dialog__header, .el-dialog__footer {
+    display: none !important;
+  }
+}
+
+.order-info {
+  display: flex;
+  flex-wrap: wrap;  
+  align-items: center;
+  justify-content: space-between;
+
+}
+
+.order-info span {
+  font-size: 15px !important;
+  margin-right: 10px !important;
+}
+.stamp-info {
+  margin-top: 10px;
+   
+}
+.stamp-info span{
+    font-size: 15px !important;
+  
+}
+.print-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 10px;
+  border: 1px solid #ccc;
+  }
+
+.print-table th,
+.print-table td {
+  border: 1px solid #ccc;
+  padding: 6px 8px;
+  text-align: center;
+  font-size: 13px !important;
+  height: 30px;         /* 设置固定高度 */
+  line-height: 30px;    /* 垂直居中 */
+
+}
+
+.print-table th {
+  background-color: #f5f7fa; 
+  color: #303133;          
+  font-weight: 600;
+  font-size: 13px !important;
+}
+
+
+
+</style>