feat(退货单): 添加打印功能,特瑞

src/views/purchasingManage/purchaseOrder/returnGoods/components/print-template-tr.vue

@@ -0,0 +1,161 @@
+<template>
+  <ele-modal
+    title="送货单"
+    :visible.sync="QRvisible"
+    v-if="QRvisible"
+    width="90%"
+  >
+    <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;
+          "
+          >{{ companyInfo?.name }}到货退厂单</div
+        >
+      </div>
+      <!-- 表头信息 -->
+      <div style="width: 100%; margin-bottom: 10px; margin-top: 20px;">
+        <table cellspacing="0" style="width: 100%; font-size: 12px;">
+          <tbody>
+            <tr>
+              <td style="text-align: right; padding: 3px;">供应商：</td>
+              <td style="padding: 3px; width: 150px;">{{ formData.supplierName || '' }}</td>
+              <td style="text-align: right; padding: 3px;">单据日期：</td>
+              <td style="padding: 3px; width: 150px;">{{ formData.createTime || '' }}</td>
+              <td style="text-align: right; padding: 3px;">单据编号：</td>
+              <td style="padding: 3px;">{{ formData.returnNo }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </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; width: 100px"> 物料编码 </td>
+            <td style="padding: 5px"> 物料名称 </td>
+            <td style="padding: 5px"> 厂家批号/灭菌批号 </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"> {{ item.productCode || '' }} </td>
+            <td style="padding: 5px"> {{ item.productName }} </td>
+            <td style="padding: 5px">  </td>
+            <td style="padding: 5px"> {{ item.batchNo || '' }}</td>
+            <td style="padding: 5px"> {{ item.specification }}/{{ item.modelType }}</td>
+            <td style="padding: 5px"> {{ item.measuringUnit }}</td>
+            <td style="padding: 5px"> {{ item.totalCount }} </td>
+          </tr>
+        </tbody>
+      </table>
+      <!-- 联系信息 -->
+      <div style="width: 100%; margin-top: 10px; font-size: 12px; display: flex; align-items: center;">
+        <div style="width: 33%;">制单：{{ formData.makerName }}</div>
+        <div style="width: 33%;">审核人：{{ formData.reviewerName }}</div>
+        <div style="width: 33%;">收货人：{{ formData.linkName }}</div>
+      </div>
+    </div>
+
+    <div slot="footer">
+      <el-button @click="print">打印预览</el-button>
+      <el-button @click="close">关闭</el-button>
+    </div>
+  </ele-modal>
+</template>
+
+<script>
+  import { getReturnSaleOrderrecordDetail } from '@/api/purchasingManage/returnGoods';
+  import { mapGetters } from 'vuex';
+  import { convertToChinese as numToChinese } from '@/utils/util';
+  export default {
+    name: 'print',
+    computed: {
+      ...mapGetters(['user'])
+    },
+    props: {
+      groupName: '',
+      companyInfo: {}
+    },
+    data() {
+      return {
+        checked: '',
+        QRvisible: false,
+        formData: {}
+      };
+    },
+
+    methods: {
+      async open(id) {
+        console.log('this.companyInfo',this.companyInfo)
+        this.formData = await getReturnSaleOrderrecordDetail(id);
+        this.QRvisible = true;
+        //包装维度
+      },
+      close() {
+        this.QRvisible = false;
+      },
+      getTotalValue(key, num) {
+          let val = this.formData?.productList?.reduce((total, item) => {
+            return (total += Number(item[key] || 0));
+          }, 0);
+
+          return (
+            (val &&
+              parseFloat(val)
+                .toFixed(num)
+                .replace(/\.?0+$/, '')) ||
+            0
+          );
+        },
+        // 将导入的函数添加到methods中，使其在模板中可用
+        convertToChinese(num) {
+          return numToChinese(num);
+        },
+      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/purchasingManage/purchaseOrder/returnGoods/index.vue

@@ -40,6 +40,16 @@
             >
               批量删除
             </el-button>
+            <el-button
+              size="small"
+              type="primary"
+              icon="el-icon-print"
+              class="ele-btn-icon"
+              v-if="$hasPermission('eom:purchaseorderreturn:print')"
+              @click="handlePrint('printTemplateTrRef')"
+            >
+              打印
+            </el-button>
           </template>
 
           <!-- 查看详情列 -->
@@ -139,6 +149,11 @@
       ref="processSubmitDialogRef"
       @reload="reload"
     ></process-submit-dialog>
+    <!-- 打印模板 -->
+    <printTemplateTr
+      ref="printTemplateTrRef"
+      :companyInfo="companyInfo"
+    ></printTemplateTr>
   </div>
 </template>
 
@@ -159,6 +174,8 @@
   import dictMixins from '@/mixins/dictMixins';
   import processSubmitDialog from '@/BIZComponents/processSubmitDialog/processSubmitDialog.vue';
   import tabMixins from '@/mixins/tableColumnsMixin';
+  import printTemplateTr from './components/print-template-tr.vue';
+  import { enterprisePage } from '@/api/contractManage/contractBook';
 
   export default {
     mixins: [dictMixins, tabMixins],
@@ -169,12 +186,13 @@
       orderDetailDialog,
       popModal,
       addReturnGoodsDialog,
-      detailDialog
+      detailDialog,
+      printTemplateTr
     },
     data() {
       return {
         activeComp: 'saleorder',
-
+        companyInfo: {},
         selection: [], //单选中集合
         delVisible: false, //批量删除弹框状态
         loading: false, // 加载状态
@@ -310,8 +328,20 @@
       };
     },
     computed: {},
-
+    created() {
+      this.getCompanyInfo()
+    },
     methods: {
+      getCompanyInfo() {
+        enterprisePage({
+          pageNum: 1,
+          size: 200
+        }).then((res) => {
+          if (res.list?.length > 0) {
+            this.companyInfo = res.list[0];
+          }
+        });
+      },
       /* 表格数据源 */
       datasource({ page, limit, where, order }) {
         return getReturnTableList({
@@ -413,6 +443,11 @@
         if (type === 'orderNo') {
           this.$refs.orderDetailDialogRef.open({ id: row.orderId });
         }
+      },
+      // 打印
+      handlePrint(templateRef) {
+        if (this.selection.length != 1) return this.$message.warning('请选择一条要打印的退货单');
+        this.$refs[templateRef].open(this.selection[0].id);
       }
     }
   };