icore-pass/src/views/sale/components/saleSelfMachine/printReceipt.vue

<template>
  <div class="tableAllDate">
    <div id="pdfDom1">
      <div id="pdfDom" v-for="(item, index) in dataList" :key="index">
        <div class="blank"></div>

        <div class="title">
          <h5 align="center">{{ shippername }} 物资送货单</h5>
          <!--        <h5 align="center">物资送货单</h5>-->
        </div>
        <div>
          <!-- tablePart0 -->
          <table
            border="0"
            cellpadding="10"
            cellspacing="0"
            style="margin: auto; font-size: 20px"
            width="1000px"
            class="tablePart0"
          >
            <tr>
              <th style="width: 14.5%">销售订单号：</th>
              <td style="width: 85.5%">{{ saleNo }}</td>
            </tr>
          </table>
        </div>
        <div class="tableBody">
          <!-- tablePart1 -->
          <table
            border="1"
            cellpadding="10"
            cellspacing="0"
            style="margin-top: 10px; text-align: center"
            width="1000px"
            class="tablePart1"
          >
            <tr>
              <th style="width: 5%; text-align: center">序号</th>
              <th style="width: 23.5%; text-align: center">物资名称</th>
              <th style="width: 22.5%; text-align: center">规格型号</th>
              <th style="width: 14%">件数</th>
              <th style="width: 14%">重量</th>
              <th style="width: 21%">订单日期</th>
            </tr>
            <tr v-for="(item, index) in deliveryOrderMaterialList" :key="index">
              <td>{{ index + 1 }}</td>
              <td>{{ item.materialName }}</td>
              <td>{{ item.materialSpe }}{{ item.materialModel }}</td>
              <td>{{ item.materialNumber }}</td>
              <td>{{ item.materialWeight }}</td>
              <td>{{ item.makeDate }}</td>
            </tr>
          </table>

          <!-- tablePart2 -->
          <table
            border="1"
            cellpadding="10"
            cellspacing="0"
            style="border-top: 0px"
            width="1000px"
            class="tablePart2"
          >
            <tr>
              <th style="width: 28.5%">收货地点</th>
              <td style="width: 71.5%">
                {{ province }}{{ district }}{{ town }}{{ deliveryAddress }}
              </td>
            </tr>
          </table>

          <!-- tablePart3 -->
          <table
            border="1"
            cellpadding="10"
            cellspacing="0"
            style="border-top: 0px"
            width="1000px"
            class="tablePart3"
          >
            <tr>
              <th style="width: 28.5%">收货人</th>
              <td style="width: 22.5%">{{ consignee }}</td>
              <th style="width: 14%">电话</th>
              <td style="width: 35%">{{ consigneeTel }}</td>
            </tr>
          </table>

          <!-- tablePart4 -->
          <table
            border="0"
            cellpadding="10"
            cellspacing="0"
            style="border-top: 0px"
            width="1000px"
            class="tablePart4"
          >
            <tr>
              <th style="width: 28.5%">承运商</th>
              <td style="width: 36.5%">{{ carrierName }}</td>
              <th style="width: 14%">车牌号</th>
              <td style="width: 35%">{{ capacityNumber }}</td>
            </tr>
          </table>

          <!-- tablePart9 -->
          <table
            border="1"
            cellpadding="10"
            cellspacing="0"
            style="border-top: 0px"
            width="1000px"
            class="tablePart9"
          >
            <tr>
              <th style="width: 28.5%">备注</th>
              <td style="width: 71.5%">{{ note }}</td>
            </tr>
          </table>
        </div>

        <div>
          <!-- tablePart6 margin-top: 10px-->
          <table
            border="0"
            cellpadding="10"
            cellspacing="0"
            style="margin: auto; font-size: 20px"
            width="1000px"
            class="tablePart6"
          >
            <tr>
              <th style="width: 8.25%">发货单位：</th>
              <td style="width: 30.5%">{{ shippername }}</td>
              <th style="width: 8.25%">收货单位：</th>
              <td style="width: 30.5%">{{ consigeeName }}</td>
            </tr>
          </table>
        </div>

        <!--          <div>
        &lt;!&ndash; tablePart6 &ndash;&gt;
        <table
          border="0"
          cellpadding="10"
          cellspacing="0"
          style="margin: auto; font-size: 20px; margin-top: 10px"
          width="1000px"
          class="tablePart6"
        >
          <tr>
            <th style="width: 6.25%">收货单位：</th>
            <td style="width: 53.5%">{{ consigeeName }}</td>
          </tr>
        </table>
      </div>-->
        <div>
          <!-- tablePart6 margin-top: 10px-->
          <table
            border="0"
            cellpadding="10"
            cellspacing="0"
            style="margin: auto; font-size: 20px"
            width="1000px"
            class="tablePart6"
          >
            <tr>
              <th style="width: 14.5%">签收人：</th>
              <th style="width: 14.5%">签收时间：</th>
            </tr>
          </table>
        </div>
        <!--      <div>
        &lt;!&ndash; tablePart6 &ndash;&gt;
        <table
          border="0"
          cellpadding="10"
          cellspacing="0"
          style="margin: auto; font-size: 20px; margin-top: 10px"
          width="1000px"
          class="tablePart6"
        >
          <tr>
            <th style="width: 14.5%">签收时间：</th>
          </tr>
        </table>
      </div>-->
      </div>
    </div>
    <!-- <el-button style="margin-left: 45%;" type="primary" @click="getPdf()">
        <i class="el-icon-download"></i>导出(pdf)
      </el-button> -->
    <div class="button-box">
      <el-button type="primary" v-print="'#pdfDom1'" @click="backScan()">
        <i class="el-icon-printer"></i>打印
      </el-button>
      <el-button type="primary" @click="backScan()">
        <i class="el-icon-back"></i>返回
      </el-button>
    </div>
  </div>
</template>

<script>
import table from "@/components/DilCommonUI/packages/table/src/table.vue";
export default {
  components: { table },
  name: "Login",
  data() {
    return {
      orderNumber: "",
      consignee: "",
      town: "",
      consigneeTel: "",
      sendDate: "",
      receiptDate: "",
      consigeeName: "",
      saleNo: "",
      deliveryOrderMaterialList: [
        {
          materialName: "",
          materialSpe: "",
          materialModel: "",
          materialNumber: 0,
          materialWeight: 0,
          makeDate: ""
        }
      ],
      carrierName: "",
      province: "",
      deliveryAddress: "",
      district: "",
      capacityNumber: "",
      shippername: "",
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1,
      date: new Date().getDate(),
      htmlTitle: "客户换票送货单",
      note: ""
      dataList:['1','2','3']
    };
  },
  created() {
    this.getDeliveryOrder();
  },
  mounted() {
    // 六十秒不操作，自动返回扫码页面
    const timer = setInterval(() => {
      this.backScan();
    }, 60000);
    this.$once("hook:beforeDestroy", () => {
      clearInterval(timer);
    });
  },
  methods: {
    getDeliveryOrder() {
      let orderNumber = this.$route.query.orderNumber;
      this.axios
        .post("/api/v1/tms/getDeliveryOrder?orderNumber=" + orderNumber)
        .then(res => {
          console.log(res);
          this.orderNumber = res.data.orderNumber;
          this.carrierName = res.data.carrierName;
          this.capacityNumber = res.data.capacityNumber;
          this.consigeeName = res.data.consigeeName;
          this.consignee = res.data.consignee;
          this.consigneeTel = res.data.consigneeTel;
          this.sendDate = res.data.sendDate;
          this.saleNo = res.data.saleNo;
          console.log(this.saleNo);
          this.shippername = res.data.shippername;
          this.province = res.data.province;
          this.district = res.data.district;
          this.town = res.data.town;
          this.deliveryAddress = res.data.deliveryAddress;
          this.deliveryOrderMaterialList = res.data.deliveryOrderMaterialList;
          this.note = res.data.note;
        });
    },
    backScan() {
      this.$router.go(-2);
    }
  }
};
</script>

<style lang="scss" scoped>
.title {
  font-size: 25px;
}
.tableBody {
  table,
  th,
  td {
    border: 1px solid black;
    font-size: 20px;
    margin: auto;
    text-align: center;
  }
  .tablePart1 th {
    border-top: 1px solid black;
    text-align: center;
  }
  .tablePart2 td,
  th {
    border-top: 0px;
    text-align: center;
  }
  .tablePart3 td,
  th {
    border-top: 0px;
    text-align: center;
  }
  .tablePart4 td,
  th {
    border-top: 0px;
    text-align: center;
  }
  .tablePart9 td,
  th {
    border-top: 0px;
    text-align: center;
  }
}
.blank {
  width: 100%;
  height: 50px;
}
.button-box {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin-top: 0.3125rem;
  margin-bottom: 1.25rem;
}
</style>