icore-pass/src/views/index/components/printReceipt2.vue

<template>
  <div class="tableAllDate">
    <div class="button-box">
      <!--v-print="'#pdfDom1'"-->
      <el-button
        type="primary"
        @click="print1()"
        v-print="'#pdfDom1'"
        style="width: 500px;height: 120px;font-size: 100px"
        id="printReceipt"
        v-show="false"
      >
        <!--class="el-icon-printer"-->
        <!---->
        打印
      </el-button>
    </div>
    <div id="pdfDom1">
      <div id="pdfDom" v-for="(item, index) in dataList" :key="index">
        <div class="blank"></div>
        <div class="title" style="margin: auto">
          <h5 align="center">{{ shippername }}</h5>
          <div style="height: 10px"></div>
          <span style="margin-left: 480px">物资送货单</span>
        </div>
        <div style="height: 20px"></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 style="height: 35px">
              <th style="width: 5%; text-align: center">序号</th>
              <th style="width: 22.5%; text-align: center">物资名称</th>
              <th style="width: 17.5%; text-align: center">规格型号</th>
              <th style="width: 5%">件数</th>
              <th style="width: 6%">重量</th>
              <th style="width: 20%">过磅时间</th>
              <th style="width: 24%">摘要</th>
              <!--              <th style="width: 21%">订单日期</th>-->
            </tr>
            <tr
              style="height: 35px"
              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.netWeightTime }}</td>
              <td>{{ item.saleRemark }}</td>
              <!--              <td>{{ item.makeDate }}</td>-->
            </tr>
          </table>

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

          <!-- tablePart3 -->
          <table
            border="1"
            cellpadding="10"
            cellspacing="0"
            style="border-top: 0px;height: 40px"
            width="1000px"
            class="tablePart3"
          >
            <tr>
              <th style="width: 27.5%">收货人</th>
              <td style="width: 23.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;height: 40px"
            width="1000px"
            class="tablePart4"
          >
            <tr>
              <th style="width: 27.5%">承运商</th>
              <td style="width: 37.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;height: 45px"
            width="1000px"
            class="tablePart9"
          >
            <tr>
              <th style="width: 27.5%">备注</th>
              <td style="width: 72.5%">{{ note }}</td>
            </tr>
          </table> -->
        </div>

        <div>
          <!-- tablePart6 margin-top: 10px-->
          <table
            border="0"
            cellpadding="10"
            cellspacing="0"
            style="margin: auto; font-size: 20px;height: 45px"
            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;height: 40px"
            width="1000px"
            class="tablePart6"
          >
            <tr>
              <th style="width: 28.5%;">
                注:此单据共计三联，需签字返回两联。
              </th>
              <th style="width: 14.5%;text-align: left">签收人及签收时间：</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 style="page-break-after:always"></div>
      </div>
    </div>
    <!-- <el-button style="margin-left: 45%;" type="primary" @click="getPdf()">
        <i class="el-icon-download"></i>导出(pdf)
      </el-button> -->
    <!--    <el-button type="primary" @click="backScan()">
      <i class="el-icon-back"></i>返回
    </el-button>-->
  </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'],
      timer1: '',
      //分页数据
      page: ''
    }
  },
  created() {
    this.getDeliveryOrder()
  },
  mounted() {
    /*this.timer1 = setTimeout(this.print,2000);*/
    // 六十秒不操作，自动返回扫码页面
    const timer = setInterval(() => {
      this.backScan()
    }, 30000)
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timer)
      /*clearTimeout(this.timer1)*/
    })
  },
  methods: {
    async getDeliveryOrder() {
      let orderNumber = this.$route.query.orderNumber
      //空对象设置为null值
      var deliver = {}
      await this.axios
        .post('/api/v1/tms/getDeliveryOrder?orderNumber=' + orderNumber)
        .then(res => {
          console.log('查询出来的数据')
          console.log(res.data)
          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
          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
          console.log('数据的长度' + res.data.deliveryOrderMaterialList.length)
          if (res.data.deliveryOrderMaterialList.length > 2) {
            this.page = true
          } else if (res.data.deliveryOrderMaterialList.length == 1) {
            this.deliveryOrderMaterialList.push(deliver)
            console.log(this.deliveryOrderMaterialList)
          }
        })
      document.getElementById('printReceipt').click()
    },
    // print() {
    //   console.log('调用了吗')
    //   let newstr = document.getElementById('pdfDom1').innerHTML
    //   let oldstr = document.body.innerHTML
    //   document.body.innerHTML = newstr
    //   window.print()
    //   /*document.body.innerHTML=oldstr*/
    //   // let orderNumber = this.$route.query.orderNumber
    //   // this.axios.post('/api/v1/tms/changeNumber?orderNumber=' + orderNumber)
    // },
    print1() {
      let orderNumber = this.$route.query.orderNumber
      this.axios.post('/api/v1/tms/changeNumber?orderNumber=' + orderNumber)
      //window.print()
      //this.$router.push({name:'printScan1',params:{index:'1'}})
      this.backScan()
    },
    backScan() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
#id {
  width: 1500px;
  height: 700px;
}
.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>