采购单打印

mes-ui/mes-ui-admin-vue3/src/views/heli/purchaseorder/index.vue

@@ -128,7 +128,7 @@ label="单据日期" align="center" prop="createTime" :formatter="dateFormatter"
           </template>
           <template #default="scope">
             <el-button
-              link type="primary" @click="isPrint( scope.row.id)"
+              link type="primary" :loading="printLoading" @click="isPrint( scope.row.id)"
              >
               打印
             </el-button>
@@ -155,6 +155,106 @@ link type="primary" @click="editReceivingStatus(scope.row.id)"
     </ContentWrap>
 
   </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: 250px">供应商：{{ 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: 4%;" />
+<col style="width: 4%;" />
+<col style="width: 15%;" />
+<col style="width: 8%;" />
+<col style="width: 6%;" />
+<col style="width: 8%;" />
+<col style="width: 7%;" />
+<col style="width: 6%;" />
+<col style="width: 7%;" />
+<col style="width: 7%;" />
+<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>
+      <th>审核</th>
+       <th>采购数量合计</th>
+      <th>总价格合计</th>
+    </tr>
+  </thead>
+  <tbody>
+  <tr v-for="(item, index) in 17" :key="index">
+    <td>{{ index + 1 }}</td>
+    <td>{{ printData.purchaseOrderNoDetailList[index]?.matCode || '' }}</td>
+        <td>{{ printData.purchaseOrderNoDetailList[index]?.boomName ? limitTo20Chars(printData.purchaseOrderNoDetailList[index].boomName) : '' }}</td>
+    <td></td>
+    <td>{{ printData.purchaseOrderNoDetailList[index]?.boomSpec || '' }}</td>
+    <td>{{ printData.purchaseOrderNoDetailList[index]?.arriveTime ? formatDate(printData.purchaseOrderNoDetailList[index].arriveTime) : '' }}</td>
+    <td>{{ printData.purchaseOrderNoDetailList[index]?.purchaseAmount || '' }}</td>
+    <td>{{ printData.purchaseOrderNoDetailList[index]?.unitPrice || '' }}</td>
+    <td>{{ printData.purchaseOrderNoDetailList[index]?.estimatedPrice || '' }}</td>
+   <td>{{ printData.purchaseOrderNoDetailList[index]?.auditorName || '' }}</td>
+   <td>{{ printData.purchaseOrderNoDetailList[index]?.purchaseAmountSum || '' }}</td>
+   <td>{{ printData.purchaseOrderNoDetailList[index]?.estimatedPriceSum || '' }}</td>
+
+ 
+ 
+  </tr>
+   <tr>
+      <td colspan="9"></td>
+      <td style="font-weight: bold;">合计</td>
+      <td style="font-weight: bold;">{{ printData.purchaseAmountSum }}</td>
+      <td style="font-weight: bold;">{{ printData.estimatedPriceSum }}</td>
+    </tr>
+</tbody>
+
+</table>
+<div class="order-info" style="margin-top: 10px;border-bottom: 1px solid #ccc;padding-bottom: 10px;">
+  <div style="display: flex;width: 40%;">
+         <span >交货地址：{{ printData.deliveryAddress }}</span>
+
+  </div>
+  <div style="display: flex;width: 20%;justify-content: center;">
+        <span style="margin-left:20px;width: 150px">审核：{{ printData.auditorName }}</span>
+        <span style="margin-left:20px;width: 120px">签字区</span>
+
+  </div>
+    <div style="display: flex; width: 40%;justify-content: right;">
+    <span style="margin-left:20px;width: 150px">接收人：{{ printData.username }}</span>
+      <span style="margin-left:20px;width: 150px">电话：{{ printData.userMobile }}</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">
@@ -285,12 +385,6 @@ const editReceivingStatus = async (id: number) => {
   } catch { }
 }
 
-const isPrint = async (id) => {
-    // var newVar = await PurchaseOrderNoApi.isPrint(id);
-    // console.log(newVar)
-  var newVar = await PurchaseOrderNoApi.countReview(id);
-  console.log(newVar)
-}
 
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
@@ -350,4 +444,202 @@ onMounted(async () => {
   await getList()
 
 })
+
+
+const printLoading = ref(false)
+
+const isPrint = async (id) => {
+    printLoading.value = true
+     var newVar = await PurchaseOrderNoApi.isPrint(id);
+    console.log(newVar)
+    printLoading.value = false
+    openPrintDialog(newVar)
+
+  // var newVar = await PurchaseOrderNoApi.countReview(id);
+  // console.log(newVar)
+}
+
+function formatDate(val) {
+  if (!val) return ''
+  const date = new Date(val)
+  return date.toLocaleDateString()
+}
+
+// 打印弹窗内容
+const printDialogVisible = ref(false)
+const printData = ref({})
+
+function openPrintDialog(data) {
+  printData.value = data
+  printDialogVisible.value = true
+}
+
+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;
+}
 </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>

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

@@ -174,12 +174,12 @@
 
   </div>
   <div style="display: flex;width: 20%;justify-content: center;">
-        <span style="margin-left:20px;width: 120px">审核：{{ printData.auditorName }}</span>
+        <span style="margin-left:20px;width: 150px">审核：{{ printData.auditorName }}</span>
         <span style="margin-left:20px;width: 120px">签字区</span>
 
   </div>
     <div style="display: flex; width: 40%;justify-content: right;">
-    <span style="margin-left:20px;width: 130px">接收人：{{ printData.username }}</span>
+    <span style="margin-left:20px;width: 150px">接收人：{{ printData.username }}</span>
       <span style="margin-left:20px;width: 150px">电话：{{ printData.userMobile }}</span>
         </div>
         </div>

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

@@ -156,7 +156,7 @@
 
   </div>
   <div style="display: flex;width: 20%;justify-content: center;">
-        <span style="margin-left:20px;width: 120px">审核：{{ printData.auditorName }}</span>
+        <span style="margin-left:20px;width: 150px">审核：{{ printData.auditorName }}</span>
         <span style="margin-left:20px;width: 120px">签字区</span>
 
   </div>