kd-aiot-frontend-wms/src/views/warehouseManagement/inventoryAllocation/components/print-template-bs-car.vue

<template>
  <ele-modal
    title="送货单"
    :visible.sync="QRvisible"
    v-if="QRvisible"
    width="90%"
    destroy-on-close
  >
    <div
      id="printSection"
      ref="printRef"
      style="
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      "
    >
      <div
        style="
          position: relative;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: 20px;
        "
      >
        <!-- <img
          v-if="groupName.includes('宝盛')"
          style="width: 80px; height: 80px; position: absolute; left: 20px"
          src="@/assets/bslogo.png"
          alt=""
        /> -->
        <div
          style="
            font-size: 18px;
            font-weight: 800;
            text-align: center;
            width: 100%;
          "
          >{{ groupName || '长沙宝盛汽车配件有限公司' }}送货单</div
        >
      </div>
      <div
        style="
          width: 100%;
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
        "
      >
        <span style="width: 40%">客户名称：{{ infoData.customerNames }}</span>
        <span style="width: 40%"
          >发货单号：{{ infoData.allotCode }}</span
        >
      </div>
      <div
        style="
          width: 100%;
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
        "
      >
        <span style="width: 40%">发货日期：{{ infoData.createTime }}</span>
        <span style="width: 40%"
          >收货联系人：{{ infoData.receiveContacts }} {{ infoData.receiveTels }}</span
        >
      </div>
      <table
        cellspacing="0"
        class="print-table"
        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: 35px"> 序号 </td>
            <td style="padding: 5px; width: 10%;"> 车型 </td>
            <td style="padding: 5px; width: 12%;"> 料号 </td>
            <td style="padding: 5px; width: 14%;"> 零件名 </td>
            <td style="padding: 5px; width: 8%;"> 单位</td>
            <td style="padding: 5px; width: 8%;"> 交货数</td>
            <td style="padding: 5px; width: 8%;"> 实收数量</td>
            <td style="padding: 5px; width: 11%"> 客户订单号</td>
            <td style="padding: 5px; width: 8%;"> 重量</td>
            <td style="padding: 5px; width: 14%;"> 工艺</td>
            <td style="padding: 5px; width: 12%;"> 备注</td>
          </tr>

          <tr align="center" v-for="(item, index) in detailList">
            <td style="padding: 5px"> {{ index + 1 }} </td>
            <td style="padding: 5px"> 
              <span v-if="isPrint">{{ item.car }}</span>
              <el-input
                v-else
                type="textarea"
                style="width: 100%; border: none;"
                placeholder=""
                v-model="item.car"
                class="input-with-select"
                autosize
              ></el-input> 
            </td>
            <td style="padding: 5px"> {{ item.categoryCode }} </td>
            <td style="padding: 5px">
              {{ item.categoryName }}
            </td>
            <td style="padding: 5px"> {{ item.measureUnit }} </td>
            <td style="padding: 5px"> {{ item.quantity }}</td>
            <td style="padding: 5px"> </td>
            <td style="padding: 5px"> {{ item.saleOrderNo }}</td>
            <td style="padding: 5px"> {{ item.weight }}</td>
            <td style="padding: 5px">
              <span v-if="isPrint">{{ item.produceRoutingName }}</span>
              <el-input
                v-else
                type="textarea"
                style="width: 100%; border: none;"
                placeholder=""
                v-model="item.produceRoutingName"
                class="input-with-select"
                autosize
              ></el-input>
            </td>
            <td style="padding: 5px"> {{ item.remark }} </td>
          </tr>
          <tr style="height: 40px;">
            <td style="border: 1px solid #000; padding: 8px; text-align: center;"></td>
            <td colspan="2" style="border: 1px solid #000; padding: 8px; text-align: center;">合计</td>
            <!-- <td style="border: 1px solid #000; padding: 8px; text-align: center;"></td> -->
            <td style="border: 1px solid #000; padding: 8px; text-align: center;"></td>
            <td style="border: 1px solid #000; padding: 8px; text-align: center;"></td>
            <td style="border: 1px solid #000; padding: 8px; text-align: center;">{{ detailList.reduce((total, item) => total + Number(item.quantity || 0), 0) || ''}}</td>
            <td style="border: 1px solid #000; padding: 8px; text-align: center;"></td>
            <td style="border: 1px solid #000; padding: 8px; text-align: center;" colspan="4">
              <div style="display: flex; align-items: center;" class="foot">
                <div style="flex: 1; width: 25%; display: flex; align-items: center;">
                  <span style="width: 50px;">铁框：</span>
                  <span v-if="isPrint">{{ query.tk }}</span>
                  <el-input
                    v-else
                    style="width: calc(100% - 50px); border: none;"
                    placeholder=""
                    v-model="query.tk"
                    class="input-with-select"
                  >
                  </el-input>
                </div>
                <div style="flex: 1; width: 25%; display: flex; align-items: center;">
                  <span style="width: 50px;">托盘：</span>
                  <span v-if="isPrint">{{ query.tp }}</span>
                  <el-input
                    v-else
                    style="width: 100%; border: none;"
                    placeholder=""
                    v-model="query.tp"
                    class="input-with-select"
                  ></el-input>
                </div>
                <div style="flex: 1; width: 25%; display: flex; align-items: center;">
                  <span style="width: 50px;">工装：</span>
                  <span v-if="isPrint">{{ query.gz }}</span>
                  <el-input
                    v-else
                    style="width: calc(100% - 50px); border: none;"
                    placeholder=""
                    v-model="query.gz"
                    class="input-with-select"
                  ></el-input>
                </div>
                <div style="flex: 1; width: 25%; display: flex; align-items: center;">
                  <span style="width: 50px;">胶框：</span>
                  <span v-if="isPrint">{{ query.jk }}</span>
                  <el-input
                    v-else
                    style="width: calc(100% - 50px); border: none;"
                    placeholder=""
                    v-model="query.jk"
                    class="input-with-select"
                  ></el-input>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div
        style="
          width: 100%;
          display: flex;
          justify-content: space-between;
          margin-top: 10px;
        "
      >
        <div style="flex: 1">
          <div>发货人：{{ infoData.allotName }}</div>
        </div>
        <div style="flex: 1">
          <div>承运人：{{ infoData.carNo }}</div>
        </div>
        <div style="flex: 1"> 收货人: </div>
        <!-- <div style="flex: 1"> 托盘:{{   infoData.trayNum }} </div> -->
      
      </div>
    </div>

    <div slot="footer">
      <el-button @click="print">打印预览</el-button>
      <el-button @click="close">关闭</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import storageApi from '@/api/warehouseManagement/index.js';
  import { mapGetters } from 'vuex';
  import { printElement } from 'ele-admin';
  export default {
    name: 'print',
    computed: {
      ...mapGetters(['user'])
    },
    props: {
      groupName: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        isPrint: false,
        checked: '',
        QRvisible: false,
        isPrintPrice: false,
        infoData: {},
        outBound: {},
        detailList: [],
        query: {
          tp: '',
          gz: '',
          jk: '',
          tk: '',
        }
      };
    },

    methods: {
      print() {
        this.isPrint = true;
        // 等待 DOM 更新完成后再打印，确保输入框变成不可编辑的 span
        this.$nextTick(() => {
          // 如果 ref 是组件可以用 this.$refs.printRef.$el
          // printElement(this.$refs.printRef);
          //printElement(this.$refs.printRef, { });  // 参数二加更多参数同 printThis 方法
          this.print1();
        });
      },
      async open(row) {
        this.row = row;
        this.getData();
        this.QRvisible = true;
      },
      async getData() {
      const res = await storageApi.getAllotDetailList({
          applyId: this.row.id
        });
        const data = await storageApi.getAllotDetail(this.row.id);
        this.infoData = data;
        if (this.infoData.type == 1) {
          // 库内调拨
          /* this.infoData.auditStatus = 2; */
          this.infoData.auditStatus = data.status;
        } else {
          // 库外调拨
          this.infoData.auditStatus = data.status;
        }
        this.detailList = res.map((item) => {
          return {
            ...item,
            // categoryCode: this.infoData.categoryCode,
            // categoryName: this.infoData.categoryName,
            // brandNum: this.infoData.brandNum,
            // categoryModel: this.infoData.model,
            // specification: this.infoData.specification
          };
        });
        console.log('infoData', this.infoData)
        console.log('detailList', this.detailList)
    },
      close() {
        this.QRvisible = false;
      },

      print1() {
        const printSection = document.getElementById('printSection');
        const self = this;
        // 创建打印任务
        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.onbeforeunload = function() {
          self.isPrint = false;
        };
        
        printWindow.onunload = function() {
          self.isPrint = false;
        };
        
        printWindow.onafterprint = function() {
          self.isPrint = false;
        };
        
        printWindow.onload = function () {
          printWindow.print();
        };
      }
    }
  };
</script>

<style lang="scss" scoped>
:deep(.print-table) {
  .el-input--medium {
    font-size: 12px !important;
    .el-textarea__inner {
      border: none;
      padding-left: 0;
      padding-right: 0;
    }
  }
}
 :deep(.foot) {
    .el-input--medium {
      font-size: 12px !important;
      .el-input__inner {
        border: none;
        padding-left: 0;
        padding-right: 0;
      }
    }
 }
</style>