feat:对账单详情打印出库单

src/components/PrintOrderRecord/src/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, watchEffect } from "vue";
+import { ref, watchEffect, shallowRef, nextTick } from "vue";
 import { addition } from "/@/utils/calc";
 import printStyle from "/@/assets/print-style"
 
@@ -11,9 +11,11 @@ const initialInfo = {
   supplierName: "",
   companyName: "",
   totalPrice: 0,
+  totalNum: 0,
   payNo:""
 }
 
+const isGoodNum = shallowRef(false);
 const cgdlist = ref<Array<Record<string, any>>>([])
 const cgdInfo = ref({ ...initialInfo })
 
@@ -24,6 +26,8 @@ function handleRecord(data: any) {
 
   _cgdlist.forEach((item, index) => {
     cgdInfo.value.totalPrice = addition(cgdInfo.value.totalPrice, item.totalPrice)
+    cgdInfo.value.totalNum = addition(cgdInfo.value.totalNum, item.goodNum)
+
     cgdlist.value.push({
       index: index + 1,
       qrdNo: item.qrdCode,
@@ -43,18 +47,22 @@ function handleRecord(data: any) {
   cgdInfo.value.payNo = payNo;
 }
 
-function print() {
-  const printInnerHTML = document.getElementById("print-template")!.innerHTML;
-  const iframe = document.createElement('iframe');
-  iframe.setAttribute('style', 'position: absolute; width: 0; height: 0;'); document.body.appendChild(iframe);
-  const iframeDoc = iframe.contentWindow!.document;
-  iframeDoc.write(printStyle);
-  iframeDoc.write('<div>' + printInnerHTML + '</div>');
-
-  setTimeout(function () {
-    iframe.contentWindow!.print();
-    document.body.removeChild(iframe);
-  }, 50);
+function print(isNum = false) {
+  isGoodNum.value = isNum;
+
+  nextTick(() => {
+    const printInnerHTML = document.getElementById("print-template")!.innerHTML;
+    const iframe = document.createElement('iframe');
+    iframe.setAttribute('style', 'position: absolute; width: 0; height: 0;'); document.body.appendChild(iframe);
+    const iframeDoc = iframe.contentWindow!.document;
+    iframeDoc.write(printStyle);
+    iframeDoc.write('<div>' + printInnerHTML + '</div>');
+
+    setTimeout(function () {
+      iframe.contentWindow!.print();
+      document.body.removeChild(iframe);
+    }, 50);
+  })
 }
 
 
@@ -73,14 +81,15 @@ defineExpose({ print })
     <div id="print-template">
       <table>
           <div class="header">
-            <div class="first">对账单</div>
+            <div class="first">{{isGoodNum ? "出库单" : "对账单"}}</div>
             <div class="column">
                <div class="supplier">供货商: {{ cgdInfo.supplierName }}</div>
                 <div class="record">对账单号: {{cgdInfo.payNo}}</div>
             </div>
             <div class="column">
               <div class="company">业务公司: {{ cgdInfo.supplierName }}</div>
-              <div class="total">总货款: {{ cgdInfo.totalPrice }}</div>
+              <div class="total" v-if="isGoodNum"> 商品总数量: {{cgdInfo.totalNum}}</div>
+              <div class="total" v-else>总货款: {{ cgdInfo.totalPrice }}</div>
             </div>
           </div>
 
@@ -92,9 +101,12 @@ defineExpose({ print })
             <th style="text-align: left;">商品名称</th>
             <th style="text-align: left;" width="30px">单位</th>
             <th style="text-align: left;" width="70px">商品数量</th>
-            <th style="text-align: left;" width="100px">商品单价</th>
-            <th style="text-align: left;" width="100px">总货款</th>
-            <th style="text-align: left;" width="30px">税率</th>
+            
+            <template v-if="!isGoodNum">
+              <th style="text-align: left;" width="100px">商品单价</th>
+              <th style="text-align: left;" width="100px">总货款</th>
+              <th style="text-align: left;" width="30px">税率</th>
+            </template>
           </tr>
         </thead>
         <tbody>
@@ -105,9 +117,12 @@ defineExpose({ print })
             <td>{{ item.goodName }}</td>
             <td>{{ item.goodUnit }}</td>
             <td>{{ item.goodNum }}</td>
-            <td>{{ item.goodPrice }}</td>
-            <td>{{ item.totalPrice }}</td>
-            <td>{{ item.tax }}</td>
+
+            <template v-if="!isGoodNum">
+              <td>{{ item.goodPrice }}</td>
+              <td>{{ item.totalPrice }}</td>
+              <td>{{ item.tax }}</td>
+            </template>
           </tr>
         </tbody>
       </table>

src/views/purchase/orderRecord/detail.vue

@@ -79,8 +79,14 @@ async function onDownloadPayInfo() {
         <ElCollapse v-model="collapses">
           <!-- 详情 or 创建 -->
           <ElCollapseItem name="1" :title="title">
-            <ReconciliationForm :id="id" ref="formRef" :loading="loading" :readonly="isDetail" @create="handleCreate"
-              @get-record="_record => record = _record" isPurch />
+            <ReconciliationForm 
+              :id="id" 
+              ref="formRef" 
+              :loading="loading" 
+              :readonly="isDetail" 
+              @create="handleCreate"
+              @get-record="_record => record = _record" isPurch 
+            />
           </ElCollapseItem>
 
           <!-- 详情 - 审批节点 -->
@@ -93,6 +99,10 @@ async function onDownloadPayInfo() {
       </ElTabPane>
     </ElTabs>
     <div style="position: absolute; top: 15px; right: 15px" v-if="isDetail">
+       <ElButton @click="PrintOrderRecordRef.print(true)">
+        打印出库单
+      </ElButton>
+      
       <ElButton @click="PrintOrderRecordRef.print()">
         打印对账单
       </ElButton>

src/views/supply/orderRecord/detail.vue

@@ -70,10 +70,11 @@ async function onDownloadPayInfo() {
       </ElTabPane>
     </ElTabs>
 
-    <div
-      v-if="isDetail"
-      style="position: absolute; top: 15px; right: 15px"
-    >
+    <div v-if="isDetail" style="position: absolute; top: 15px; right: 15px">
+      <ElButton @click="PrintOrderRecordRef.print(true)">
+        打印出库单
+      </ElButton>
+
       <ElButton @click="PrintOrderRecordRef.print()">
         打印对账单
       </ElButton>