入库单 打印改为针式打印机

mes-ui/mes-ui-admin-vue3/src/views/heli/storage/StorageForm.vue

@@ -135,7 +135,8 @@
           <el-col>
             <el-card class="hl-incard">
               <el-col>
-                <el-button class="hl-addbutton" type="primary" size="large" @click="openMatForm"
+                <el-button
+class="hl-addbutton" type="primary" size="large" @click="openMatForm"
                            :disabled="ctrView || ctrSave">新增</el-button>
                 <el-button @click="openPnForm" type="success" v-if="btnSave" size="large">新增物料</el-button></el-col>
               <el-form
@@ -483,6 +484,86 @@
     </template>
   </el-dialog>
 
+  <!-- 新增：针式打印纸打印弹窗 -->
+  <el-dialog v-model="printDialogVisibleNew" width="80%" title="入库单打印(针式纸)" :close-on-click-modal="false">
+    <div id="printAreaNew" class="print-content-new">
+      <div class="header header-grid">
+        <div class="cell company-title">
+          <span class="company">杭州合立模具有限公司</span>
+          <span class="title">入库单</span>
+        </div>
+        <div class="cell audit"> 审核：<span class="sign-space"></span> </div>
+        <div class="cell handler"> 入库经手人：<span class="sign-space"></span> </div>
+        <div class="cell receiver"> 收货人：<span class="sign-space"></span> </div>
+      </div>
+
+      <table class="sheet" border="1" cellspacing="0" cellpadding="0" style="width: 100%; border-collapse: collapse;">
+        <colgroup>
+          <col style="width: 5%" />
+          <col style="width: 10%" />
+          <col style="width: 12%" />
+          <col style="width: 10%" />
+          <col style="width: 8%" />
+          <col style="width: 10%" />
+          <col style="width: 8%" />
+          <col style="width: 10%" />
+          <col style="width: 10%" />
+          <col style="width: 12%" />
+        </colgroup>
+        <thead>
+          <tr>
+            <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 printData.storageMatDOList.length" :key="index">
+            <td>{{ index + 1 }}</td>
+            <td>{{ printData.storageMatDOList[index]?.matCode || '' }}</td>
+            <td class="text-left">{{ printData.storageMatDOList[index]?.matName ? limitTo20Chars(printData.storageMatDOList[index].matName) : '' }}</td>
+            <td class="text-left">{{ printData.storageMatDOList[index]?.mtSpec || '' }}</td>
+            <td>{{ printData.storageMatDOList[index]?.matUnit || '' }}</td>
+            <td class="num">{{ printData.storageMatDOList[index]?.storageOkQty || '' }}</td>
+            <td class="num">{{ printData.storageMatDOList[index]?.unitPrice || '' }}</td>
+            <td class="num">{{ printData.storageMatDOList[index]?.totalPrice || '' }}</td>
+            <td class="text-left">{{ printData.storageMatDOList[index]?.projectName || '' }}</td>
+            <td class="text-left">{{ printData.storageMatDOList[index]?.description || '' }}</td>
+          </tr>
+          <tr class="sum-row">
+            <td colspan="5" class="sum-label">合计</td>
+            <td class="num sum-value">{{ sumStorageQty }}</td>
+            <td></td>
+            <td class="num sum-value">{{ sumStorageTotal }}</td>
+            <td colspan="2"></td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div class="footer-sign sign-row">
+        <div class="sign-item">
+          <span class="label">入库人：</span>
+          <span class="name">{{ printData.userName }}</span>
+        </div>
+        <div class="sign-item"> 审核人：<span class="sign-space"></span> </div>
+        <div class="sign-item"> 仓库签字：<span class="sign-space"></span> </div>
+        <div class="sign-item"> 日期：{{ printData.date }} </div>
+      </div>
+    </div>
+    <template #footer>
+      <el-button @click="printDialogVisibleNew = false">关闭</el-button>
+      <el-button type="primary" @click="doPrintNew">打印(针式纸)</el-button>
+      <el-button type="primary" @click="doPrint" v-if="false">打印(旧版本)</el-button>
+    </template>
+  </el-dialog>
+
 </template>
 
 <script setup lang="ts">
@@ -630,11 +711,17 @@ function formatDate(val) {
 const printLoading = ref(false)
 // 打印弹窗内容
 const printDialogVisible = ref(false)
+const printDialogVisibleNew = ref(false)//新增
 const printData = ref({})
 
 function openPrintDialog(data) {
   printData.value = data
-  printDialogVisible.value = true
+  printDialogVisible.value = true;
+}
+
+function openPrintDialogNew(data) {
+  printData.value = data
+  printDialogVisibleNew.value = true
 }
 const isPrint = async () => {
   printLoading.value = true
@@ -642,7 +729,8 @@ const isPrint = async () => {
   try {
     var newVar = await StorageApi.isPrint(query.id);
     console.log(newVar)
-    openPrintDialog(newVar)
+    // openPrintDialog(newVar)
+    openPrintDialogNew(newVar)//新增
   } finally {
     printLoading.value = false
   }
@@ -738,7 +826,112 @@ function doPrint() {
   }
 
 }
+//新增打印
+function doPrintNew(){
+    const printNode = document.querySelector('#printAreaNew') as HTMLElement
+  if (!printNode) return
+  const iframe = document.createElement('iframe')
+  iframe.setAttribute('style', 'width:0;height:0;position:absolute;left:-9999px;top:-9999px;')
+  document.body.appendChild(iframe)
 
+  const doc = iframe.contentWindow!.document
+
+  doc.open()
+  doc.title = ''
+  doc.write(`
+    <style>
+      /* 针式打印纸规格：241mm×140mm，撕边后222mm */
+      @page { size: 241mm 140mm; margin: 5mm; }
+
+      body { 
+        font-family: Arial, sans-serif;
+        color:#000; 
+        margin: 5px;
+        font-size: 12px;
+        box-sizing: border-box;
+      }
+      /* 打印区域适配撕边后的有效宽度 */
+      .print-wrap { 
+        width: 100%; 
+        height: 118mm; /* 130mm - 12mm上下边距 */
+      }
+
+      .header.header-grid {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        column-gap: 12px;
+        margin-bottom: 8px;
+      }
+      .header.header-grid .company-title { 
+        font-size: 12px; 
+        text-align: left; 
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .header.header-grid .audit,
+      .header.header-grid .handler,
+      .header.header-grid .receiver { 
+        font-size: 12px; 
+        text-align: right;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
+        
+        /* 合计行样式 */
+        .sum-row {
+          border-top: 2px solid #000;
+          font-weight: bold;
+        }
+        .sum-label {
+          text-align: right;
+          font-weight: bold;
+        }
+        .sum-value {
+           font-weight: bold;
+         }
+        /* 合计行样式 */
+        .sum-row {
+          border-top: 2px solid #000;
+          font-weight: bold;
+        }
+        .sum-label {
+          text-align: right;
+          font-weight: bold;
+        }
+        .sum-value {
+          font-weight: bold;
+        }
+        .sign-space {
+          display: inline-block;
+          width: 50px;
+          height: 18px; 
+          margin-left: 4px;
+        }
+
+      .sheet { width:100%; border-collapse:collapse; font-size:12px; table-layout: fixed; }
+      .sheet th, .sheet td { border:1.5pt solid #333; padding:4px 0px; text-align:center; line-height:1; vertical-align: middle; }
+      .sheet thead th { background:#f5f7fa; font-weight:600; }
+      .sheet .text-left { text-align:left; padding-left:6px; }
+      .sheet .spec { word-break: break-word; white-space: normal; }
+      .sheet .num { text-align:right; padding-right:6px; }
+      .sheet tfoot .sum-label, .sheet tfoot .sum-value { font-weight:700; }
+      .sheet tfoot .sum-row td { border-top: none; }
+
+      .sign-row { display:flex; justify-content:flex-start; margin-top:12px; font-size:12px;gap:30px }
+      .sign-item { display: flex; align-items: center; }
+      .sign-item .label { margin-right: 4px; } 
+    </style>
+  `)
+  doc.write(printNode.outerHTML)
+  doc.close()
+
+  iframe.contentWindow!.focus()
+  iframe.contentWindow!.print()
+  setTimeout(() => document.body.removeChild(iframe), 500)
+}
 function limitTo20Chars(input) {
   if (typeof input !== 'string') return '';
   return input.length > 20 ? input.slice(0, 20) : input;
@@ -1516,5 +1709,96 @@ a {
   font-size: 13px !important;
 }
 
+/* 新增：针式打印纸样式 */
+.print-content-new {
+  width: 100%;
+  background: #fff;
+}
 
+.header.header-grid {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  column-gap: 12px;
+}
+
+.header.header-grid .company-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.header.header-grid .company {
+  font-weight: bold;
+}
+
+.header.header-grid .title {
+  font-weight: bold;
+}
+
+.header.header-grid .audit,
+.header.header-grid .handler,
+.header.header-grid .receiver {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.sign-space {
+  display: inline-block;
+  width: 70px;
+  height: 18px;
+  margin-left: 4px;
+}
+
+.sheet {
+  margin-top: 8px;
+  table-layout: fixed;
+  border-collapse: collapse;
+  font-size: 12px;
+  width: 100%;
+}
+
+.sheet th,
+.sheet td {
+  padding: 6px 4px;
+  text-align: center;
+  line-height: 1.3;
+  vertical-align: middle;
+}
+
+.sheet thead th {
+  background: #f5f7fa;
+  font-weight: 600;
+}
+
+.sheet .text-left {
+  text-align: left;
+  padding-left: 6px;
+}
+
+.sheet .num {
+  text-align: right;
+  padding-right: 6px;
+}
+
+.sheet tfoot .sum-row td {
+  border-top: 2px solid #000;
+}
+
+.footer-sign.sign-row {
+  display: flex;
+  justify-content: flex-start;
+  margin-top: 12px;
+  gap: 30px;
+}
+
+.sign-item {
+  display: flex;
+  align-items: center;
+}
+
+.sign-item .label {
+  margin-right: 4px;
+}
 </style>