feat(销售订单): 添加出库单打印功能

src/views/saleManage/saleOrder/invoice/components/print-template-ht-1.vue

@@ -0,0 +1,247 @@
+<template>
+  <ele-modal
+    title="出库单"
+    :visible.sync="QRvisible"
+    v-if="QRvisible"
+    width="80%"
+  >
+    <div
+      id="printSection"
+      style="
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      "
+    >
+      <div>
+        <div
+          style="
+            font-size: 20px;
+            font-weight: 800;
+            padding-right: 20px;
+            width: 400px;
+            margin: 0 auto;
+          "
+          >{{ groupName }}出库单</div
+        >
+      </div>
+      <div
+        style="
+          width: 100%;
+          font-size: 12px;
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 10px;
+          margin-top: 10px;
+        "
+      >
+        <span style="width: 30%">客户：{{ formData.contactName }}</span>
+        <span style="width: 30%">单据编码：{{ formData.docNo }}</span>
+        <span style="width: 30%">单据日期：{{ formData.createTime }}</span>
+      </div>
+      <div
+        style="
+          width: 100%;
+          font-size: 12px;
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 10px;
+        "
+      >
+        <span style="width: 80%">送货地址：{{ formData.receiveAddress }}</span>
+      </div>
+      <table
+        cellspacing="0"
+        border
+        style="
+          width: 100%;
+          table-layout: fixed;
+          word-break: break-all;
+          word-wrap: break-word;
+          font-size: 12px;
+        "
+      >
+        <tbody>
+          <tr align="center">
+            <td style="padding: 5px"> 序号 </td>
+            <td style="padding: 5px"> 名称 </td>
+            <td style="padding: 5px"> 规格型号 </td>
+            <td style="padding: 5px; width: 60px"> 单位 </td>
+            <td style="padding: 5px; width: 110px"> 数量 </td>
+            <td style="padding: 5px"> 颜色 </td>
+            <td style="padding: 5px"> 生产批号 </td>
+            <td style="padding: 5px"> 裁线米段 </td>
+            <td style="padding: 5px"> 仓库 </td>
+          </tr>
+
+          <tr align="center" v-for="(item, index) in formData.productList">
+            <td style="padding: 5px"> {{ index + 1 }} </td>
+            <td style="padding: 5px"> {{ item.productName }} </td>
+            <td style="padding: 5px">
+              {{ item.specification }}/{{ item.modelType }}
+            </td>
+            <td style="padding: 5px"> {{ item.measuringUnit }}</td>
+            <td style="padding: 5px"> {{ item.totalCount }}</td>
+            <td style="padding: 5px"> {{ item.colorKey }}</td>
+            <td style="padding: 5px"> {{ item.batchNo }}</td>
+            <td style="padding: 5px"> {{ item.remark }}</td>
+            <td style="padding: 5px"> {{ item.warehouseName }}</td>
+          </tr>
+          <tr align="center">
+            <td style="padding: 5px"> </td>
+            <td style="padding: 5px"> 合计 </td>
+            <td style="padding: 5px" colspan="2">  </td>
+            <td style="padding: 5px">{{ getTotalValue('totalCount', 2) }} </td>
+            <td style="padding: 5px"> </td>
+            <td style="padding: 5px"> </td>
+            <td style="padding: 5px"> </td>
+            <td style="padding: 5px"> </td>
+          </tr>
+        </tbody>
+      </table>
+      <div
+        style="
+          width: 100%;
+          font-size: 12px;
+          display: flex;
+          justify-content: space-between;
+          margin-top: 10px;
+        "
+      >
+        <div style="flex: 1">
+          <div>制单人：{{ formData.makerName }}</div>
+        </div>
+        <div style="flex: 1"> 核对人： </div>
+        <div style="flex: 1">
+          <div>仓库：</div>
+        </div>
+        <div style="flex: 1"> 审核： {{ formData.reviewerName || '' }}</div>
+      </div>
+      <div
+        style="
+          width: 100%;
+          font-size: 12px;
+          display: flex;
+          justify-content: space-between;
+          margin-top: 10px;
+        "
+      >
+        <div style="flex: 1">
+          <div>司机：</div>
+        </div>
+        <div style="flex: 1"> 是否回单： {{ receiptRequirementTypeOption.find(item => item.value === formData.receiptRequirementTypeId)?.label || '' }}</div>
+        <div style="flex: 1">
+          <div>运费：{{ formData.deliveryTypeName || '' }}</div>
+        </div>
+        <div style="flex: 1"> </div>
+      </div>
+      <div
+        style="
+          width: 100%;
+          font-size: 12px;
+          display: flex;
+          justify-content: space-between;
+          margin-top: 10px;
+        "
+      >
+        <div style="flex: 1">
+          <div>备注：</div>
+        </div>
+      </div>
+    </div>
+
+    <div slot="footer">
+      <el-button @click="print">打印预览</el-button>
+      <el-button @click="close">关闭</el-button>
+    </div>
+  </ele-modal>
+</template>
+
+<script>
+  import { getSendSaleOrderrecordDetailSplit } from '@/api/saleManage/saleordersendrecord';
+  import { mapGetters } from 'vuex';
+  import dictMixins from '@/mixins/dictMixins';
+  export default {
+    mixins: [dictMixins],
+    name: 'print',
+    computed: {
+      ...mapGetters(['user'])
+    },
+    props: {
+      groupName: ''
+    },
+    data() {
+      return {
+        checked: '',
+        QRvisible: false,
+        isPrintPrice: false,
+        formData: {},
+        receiptRequirementTypeOption: [
+          {
+            label: '签回单',
+            value: 1
+          },
+          {
+            label: '不签回单',
+            value: 2
+          },
+          {
+            label: '带签收单',
+            value: 3
+          }
+        ]
+      };
+    },
+    created() {
+      this.requestDict('送货方式');
+    },
+    methods: {
+      async open(id, isPrintPrice) {
+        this.formData = await getSendSaleOrderrecordDetailSplit(id);
+        this.formData.deliveryTypeName = this.getDictValue(
+            '送货方式',
+            this.formData.deliveryTypeId
+          );
+        this.QRvisible = true;
+        this.isPrintPrice = isPrintPrice;
+        //包装维度
+      },
+      close() {
+        this.QRvisible = false;
+      },
+      getTotalValue(key, num) {
+        let val = this.formData?.productList?.reduce((total, item) => {
+          return (total += Number(item[key]));
+        }, 0);
+
+        return (
+          (val &&
+            parseFloat(val)
+              .toFixed(num)
+              .replace(/\.?0+$/, '')) ||
+          0
+        );
+      },
+      print() {
+        const printSection = document.getElementById('printSection');
+        // 创建打印任务
+        const printWindow = window.open('', '_blank');
+        printWindow.document.open();
+        printWindow.document.write('<html><head><title>打印预览</title>');
+        printWindow.document.write(
+          '<link rel="stylesheet" href="your-stylesheet-url.css" type="text/css" />'
+        );
+        printWindow.document.write('</head><body>');
+        printWindow.document.write(printSection.innerHTML);
+        printWindow.document.write('</body></html>');
+        printWindow.document.close();
+        printWindow.onload = function () {
+          printWindow.print();
+        };
+      }
+    }
+  };
+</script>
+
+<style lang="scss"></style>

src/views/saleManage/saleOrder/invoice/index.vue

@@ -90,6 +90,12 @@
                   @click.native="handlePrint('printTemplateTrRef')"
                   >送货单打印</el-dropdown-item
                 >
+
+                <el-dropdown-item
+                  v-if="$hasPermission('eom:print-invoice9')"
+                  @click.native="handlePrint('printTemplateHt1Ref')"
+                  >出库单</el-dropdown-item
+                >
               </el-dropdown-menu>
             </el-dropdown>
             <exportButton
@@ -247,6 +253,10 @@
       ref="printTemplateHtRef"
       :groupName="groupName"
     ></printTemplateHt>
+    <printTemplateHt1
+      ref="printTemplateHt1Ref"
+      :groupName="groupName"
+    ></printTemplateHt1>
     <printTemplateTr
       ref="printTemplateTrRef"
       :groupName="groupName"
@@ -286,6 +296,7 @@
   import printTemplateBs from '@/views/saleManage/saleOrder/invoice/components/print-template-bs.vue';
   import printTemplateJr from '@/views/saleManage/saleOrder/invoice/components/print-template-jr.vue';
   import printTemplateHt from '@/views/saleManage/saleOrder/invoice/components/print-template-ht.vue';
+  import printTemplateHt1 from '@/views/saleManage/saleOrder/invoice/components/print-template-ht-1.vue';
   import printTemplateTr from '@/views/saleManage/saleOrder/invoice/components/print-template-tr.vue';
   import {
     deleteSendInformation,
@@ -320,7 +331,8 @@
       printTemplateJr,
       exportButton,
       printTemplateHt,
-      printTemplateTr
+      printTemplateTr,
+      printTemplateHt1
     },
 
     //客户管理数据