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%"
  >
    <div
      id="printSection"
      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%">客户名称：</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%"
          >收货联系人：
        </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; width: 35px"> 序号 </td>
            <td style="padding: 5px; width: 10%;"> 车型 </td>
            <td style="padding: 5px; width: 12%;"> 料号 </td>
            <td style="padding: 5px; width: 20%;"> 零件名 </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: 15%"> 客户订单号</td>
            <td style="padding: 5px; width: 8%;"> 重量</td>
            <td style="padding: 5px; width: 10%;"> 工艺</td>
            <td style="padding: 5px; width: 10%;"> 备注</td>
          </tr>

          <tr align="center" v-for="(item, index) in detailList">
            <td style="padding: 5px"> {{ index + 1 }} </td>
            <td style="padding: 5px">  </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"> {{ item.quantity }}</td>
            <td style="padding: 5px"> {{ item.saleOrderNo }}</td>
            <td style="padding: 5px"> {{ item.weight }}</td>
            <td style="padding: 5px">{{ item.produceRoutingName }} </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;">{{ detailList.reduce((total, item) => total + Number(item.quantity || 0), 0) || ''}}</td>
            <td style="border: 1px solid #000; padding: 8px; text-align: center;" colspan="4">
              <div style="display: flex; align-items: center;">
                <div style="flex: 1;">铁框：</div>
                <div style="flex: 1;">托盘：</div>
                <div style="flex: 1;">工装：</div>
                <div style="flex: 1;">胶框：</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>承运人：</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';
  export default {
    name: 'print',
    computed: {
      ...mapGetters(['user'])
    },
    props: {
      groupName: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        checked: '',
        QRvisible: false,
        isPrintPrice: false,
        infoData: {},
        outBound: {},
        detailList: []
      };
    },

    methods: {
      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;
      },

      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>