送货单打印机器记录

src/views/index/components/printReceipt3.vue

@@ -0,0 +1,408 @@
+<template>
+  <div class="tableAllDate">
+    <div class="button-box">
+      <!--v-print="'#pdfDom1'"-->
+      <el-button
+        type="primary"
+        @click="print1()"
+        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: 450px">物资送货单</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%">{{ orderNumber }}</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%" v-if="orderTimeFlag != null">订单日期</th>
+              <th style="width: 20%" v-else>过磅时间</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 v-if="orderTimeFlag != null">{{ item.orderDate }}</td>
+              <td v-else>{{ 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: 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;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 {
+      orderTimeFlag: null,
+      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
+          this.orderTimeFlag = res.data.orderTimeFlag || null
+          //console.log("数据的长度"+res.data.deliveryOrderMaterialList.length)
+          console.log('进入了这个方法')
+          // 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() {
+      console.log('进入了打印页面')
+      let orderNumber = this.$route.query.orderNumber
+      window.print()
+      this.axios.post('/api/v1/tms/changeNumber?orderNumber=' + orderNumber + '&printIP=1')
+      this.$router.push({ name: 'printScan3', 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;
+}
+@media print {
+  // 打印样式，去除页眉页脚
+  @page {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+</style>

src/views/index/components/printReceipt4.vue

@@ -0,0 +1,408 @@
+<template>
+  <div class="tableAllDate">
+    <div class="button-box">
+      <!--v-print="'#pdfDom1'"-->
+      <el-button
+        type="primary"
+        @click="print1()"
+        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: 450px">物资送货单</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%">{{ orderNumber }}</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%" v-if="orderTimeFlag != null">订单日期</th>
+              <th style="width: 20%" v-else>过磅时间</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 v-if="orderTimeFlag != null">{{ item.orderDate }}</td>
+              <td v-else>{{ 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: 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;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 {
+      orderTimeFlag: null,
+      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
+          this.orderTimeFlag = res.data.orderTimeFlag || null
+          //console.log("数据的长度"+res.data.deliveryOrderMaterialList.length)
+          console.log('进入了这个方法')
+          // 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() {
+      console.log('进入了打印页面')
+      let orderNumber = this.$route.query.orderNumber
+      window.print()
+      this.axios.post('/api/v1/tms/changeNumber?orderNumber=' + orderNumber + '&printIP=2')
+      this.$router.push({ name: 'printScan4', 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;
+}
+@media print {
+  // 打印样式，去除页眉页脚
+  @page {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+</style>

src/views/index/components/printScan3.vue

@@ -0,0 +1,271 @@
+<template xmlns="http://www.w3.org/1999/html">
+  <div class="saleSelfMachine">
+    <div class="background">
+      <img :src="backgroundImgURL" width="100%" height="100%" />
+    </div>
+    <el-button @click.native="fullScreen" id="full" v-show="false"></el-button>
+    <div class="orderNumberData">
+      <!--v-show="false" disabled="!isEdit"-->
+      <el-input
+        placeholder="请将二维码放置在扫描区"
+        v-model="orderNumber"
+        :focus="true"
+        ref="inputs"
+      >
+      </el-input>
+      <!--style="display:block;width:120px"-->
+      <div v-show="false">
+        手动输入开关：
+      </div>
+      <!--      <i class="el-icon-full-screen" @click="fullScreen"
+      v-show="edit1"></i>-->
+      <!--      <el-switch
+=======
+      <i class="el-icon-full-screen" @click="fullScreen" v-show="edit1"></i>
+      <el-switch
+        :disabled="!isEdit"
+        v-show="false"
+      >
+      </el-input>style="display:block;width:120px"-->
+      <div v-show="false">
+        手动输入开关：
+      </div>
+      <i class="el-icon-full-screen" @click="fullScreen" v-show="edit1"></i>
+      <!--      <el-switch
+        v-model="isEdit"
+        active-color="#66ccff"
+        inactive-color="#ffffff"
+      >
+      </el-switch>-->
+    </div>
+    <!--    <div class="tip">
+      手机二维码对准下方摄像头<br />
+      <div class="arrowDown">⇩</div>
+      &lt;!&ndash; <i
+        class="el-icon-bottom"
+        style="padding-left: 450px;font-size: 300px;color: red"
+      ></i> &ndash;&gt;
+    </div>-->
+    <div class="emg"><span style="">紧急联系人:0818-2521703</span></div>
+  </div>
+</template>
+<script>
+import screenfull from 'screenfull'
+export default {
+  data() {
+    return {
+      orderNumber: null,
+      isEdit: true,
+      edit1: true,
+      backgroundImgURLList: [
+        require('@/assets/saleSelfMachine/00.png'),
+        require('@/assets/saleSelfMachine/01.png'),
+        require('@/assets/saleSelfMachine/02.png'),
+        require('@/assets/saleSelfMachine/03.png')
+      ],
+      backgroundImgURL: require('@/assets/saleSelfMachine/00.png')
+    }
+  },
+  created() {
+    localStorage.setItem(
+      'onlyKey',
+      Math.floor(Math.random() * 60 * 24 * 60) + 'huabao'
+    )
+    this.changfouce()
+  },
+  // watch:{
+  //    data:"toSaleSelfMachine"
+  // },
+  methods: {
+    //打印函数
+    printing() {
+      console.log('进入了打印方法')
+      this.backgroundImgURL = this.backgroundImgURLList[2]
+      setTimeout(() => {
+        console.log('进入了第一层定时器')
+        this.backgroundImgURL = this.backgroundImgURLList[3]
+        setTimeout(() => {
+          console.log('进入了第二层定时器')
+          this.backgroundImgURL = this.backgroundImgURLList[0]
+          this.$route.params.index = 0
+        }, 2000)
+      }, 30000)
+    },
+    //全屏函数
+    fullScreen() {
+      // screenfull.request()
+      // console.log('wbei')
+      // // documentElement 属性以一个元素对象返回一个文档的文档元素
+      // // var el = document.documentElement
+      // // el.requestFullscreen ||
+      // // el.mozRequestFullScreen ||
+      // // el.webkitRequestFullscreen ||
+      // // el.msRequestFullScreen
+      // //   ? el.requestFullscreen() ||
+      // //     el.mozRequestFullScreen() ||
+      // //     el.webkitRequestFullscreen() ||
+      // //     el.msRequestFullscreen()
+      // //   : null
+      var wscript = new ActiveXObject('WScript.Shell') //创建ActiveX
+      if (wscript !== null) {
+        //创建成功
+        wscript.SendKeys('{F11}') //触发f11
+      }
+    },
+    //输入框自动聚焦
+    changfouce() {
+      this.$nextTick(x => {
+        this.$refs.inputs.focus()
+      })
+    },
+    /*fullScreen() {
+      if (screenfull.isEnabled && !screenfull.isFullscreen) {
+        screenfull.request()
+        this.edit1 = false
+      }
+    },*/
+    /*async querynumber(){
+      console.log(this.orderNumber)
+      let orderNumber=this.orderNumber
+      let i=0
+      await this.axios.post("/api/v1/tms/queryNumber?orderNumber=" + orderNumber)
+        .then((res)=>{
+          console.log("查找出来的数据")
+          console.log(res.data)
+          console.log("-------------------------")
+          if (res.data.printnumber==1){
+            i=1
+          }
+        })
+      console.log(i)
+      return i
+        this.edit1 = false;
+      }
+    },*/
+    async querynumber() {
+      console.log(this.orderNumber)
+      console.log(this.orderNumber)
+      let orderNumber = this.orderNumber
+      let i = 0
+      await this.axios
+        .post('/api/v1/tms/queryNumber?orderNumber=' + orderNumber)
+        .then(res => {
+          console.log('查找出来的数据')
+          console.log(res.data)
+          console.log('-------------------------')
+          if (res.data.printnumber == 1) {
+            i = 1
+          }
+        })
+      console.log(i)
+      return i
+    }
+    //失去焦点后自动执行获得焦点事件
+    // onInputBlur(){
+    //     console.log("获取焦点")
+    //     this.changfouce();
+    // }
+    // toSaleSelfMachine(){
+    //      this.$router.push({
+    //         path:'/saleSelfMachine',
+    //     })
+    // }
+  },
+  mounted() {
+    document.getElementById('full').click()
+    console.log(screenfull.isFullscreen)
+    console.log(this.$route.params.index)
+    if (this.$route.params.index == 1) {
+      this.printing()
+    }
+    /*const timer1 = setInterval(async ()=>{
+      this.backgroundImgURL=this.backgroundImgURLList[0]
+    },3000)*/
+    const timer = setInterval(async () => {
+      // if(this.$refs.inputs.focus==false){
+      //     console.log("false")
+      this.changfouce()
+      //}
+      if (
+        this.orderNumber != null &&
+        this.orderNumber != '' &&
+        this.orderNumber.length == 21
+      ) {
+        if (
+          this.orderNumber.startsWith('WYSDD') == true ||
+          this.orderNumber.startsWith('wysdd') == true
+        ) {
+          let promise = await this.querynumber(this.orderNumber)
+          console.log(promise)
+          if (promise == 1) {
+            this.backgroundImgURL = this.backgroundImgURLList[1]
+            this.orderNumber = null
+            setTimeout(() => {
+              this.backgroundImgURL = this.backgroundImgURLList[0]
+              console.log('进入该方法了')
+            }, 4000)
+            return
+          }
+          this.$router.push({
+            path: '/printReceipt3?orderNumber=' + this.orderNumber
+          })
+        }
+      } else if (
+        this.orderNumber != null &&
+        this.orderNumber != '' &&
+        this.orderNumber.length > 21
+      ) {
+        //清空输入框，免得一次多个重复订单还无法删除
+        this.orderNumber = null
+      }
+    }, 3000)
+    this.$once('hook:beforeDestroy', () => {
+      clearInterval(timer)
+    })
+  }
+}
+</script>
+<style lang="scss">
+.saleSelfMachine {
+  width: 100vh;
+  height: 100vh;
+  .background {
+    width: 100%;
+    height: 100%;
+    margin-top: 30px;
+    z-index: -1;
+    position: absolute;
+    overflow: hidden;
+  }
+  .orderNumberData {
+    width: 100%;
+    color: #fff;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .tip {
+    width: 1800px;
+    height: 600px;
+    font-size: 100px;
+    padding-left: 350px;
+    padding-top: 500px;
+    color: #4cc9e9;
+    .arrowDown {
+      margin-top: 150px;
+      padding-left: 450px;
+      font-size: 300px;
+      color: red;
+    }
+  }
+  .emg {
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+    font-size: 30px;
+    color: red;
+    font-weight: 500;
+  }
+}
+</style>

src/views/index/components/printScan4.vue

@@ -0,0 +1,271 @@
+<template xmlns="http://www.w3.org/1999/html">
+  <div class="saleSelfMachine">
+    <div class="background">
+      <img :src="backgroundImgURL" width="100%" height="100%" />
+    </div>
+    <el-button @click.native="fullScreen" id="full" v-show="false"></el-button>
+    <div class="orderNumberData">
+      <!--v-show="false" disabled="!isEdit"-->
+      <el-input
+        placeholder="请将二维码放置在扫描区"
+        v-model="orderNumber"
+        :focus="true"
+        ref="inputs"
+      >
+      </el-input>
+      <!--style="display:block;width:120px"-->
+      <div v-show="false">
+        手动输入开关：
+      </div>
+      <!--      <i class="el-icon-full-screen" @click="fullScreen"
+      v-show="edit1"></i>-->
+      <!--      <el-switch
+=======
+      <i class="el-icon-full-screen" @click="fullScreen" v-show="edit1"></i>
+      <el-switch
+        :disabled="!isEdit"
+        v-show="false"
+      >
+      </el-input>style="display:block;width:120px"-->
+      <div v-show="false">
+        手动输入开关：
+      </div>
+      <i class="el-icon-full-screen" @click="fullScreen" v-show="edit1"></i>
+      <!--      <el-switch
+        v-model="isEdit"
+        active-color="#66ccff"
+        inactive-color="#ffffff"
+      >
+      </el-switch>-->
+    </div>
+    <!--    <div class="tip">
+      手机二维码对准下方摄像头<br />
+      <div class="arrowDown">⇩</div>
+      &lt;!&ndash; <i
+        class="el-icon-bottom"
+        style="padding-left: 450px;font-size: 300px;color: red"
+      ></i> &ndash;&gt;
+    </div>-->
+    <div class="emg"><span style="">紧急联系人:0818-2521703</span></div>
+  </div>
+</template>
+<script>
+import screenfull from 'screenfull'
+export default {
+  data() {
+    return {
+      orderNumber: null,
+      isEdit: true,
+      edit1: true,
+      backgroundImgURLList: [
+        require('@/assets/saleSelfMachine/00.png'),
+        require('@/assets/saleSelfMachine/01.png'),
+        require('@/assets/saleSelfMachine/02.png'),
+        require('@/assets/saleSelfMachine/03.png')
+      ],
+      backgroundImgURL: require('@/assets/saleSelfMachine/00.png')
+    }
+  },
+  created() {
+    localStorage.setItem(
+      'onlyKey',
+      Math.floor(Math.random() * 60 * 24 * 60) + 'huabao'
+    )
+    this.changfouce()
+  },
+  // watch:{
+  //    data:"toSaleSelfMachine"
+  // },
+  methods: {
+    //打印函数
+    printing() {
+      console.log('进入了打印方法')
+      this.backgroundImgURL = this.backgroundImgURLList[2]
+      setTimeout(() => {
+        console.log('进入了第一层定时器')
+        this.backgroundImgURL = this.backgroundImgURLList[3]
+        setTimeout(() => {
+          console.log('进入了第二层定时器')
+          this.backgroundImgURL = this.backgroundImgURLList[0]
+          this.$route.params.index = 0
+        }, 2000)
+      }, 30000)
+    },
+    //全屏函数
+    fullScreen() {
+      // screenfull.request()
+      // console.log('wbei')
+      // // documentElement 属性以一个元素对象返回一个文档的文档元素
+      // // var el = document.documentElement
+      // // el.requestFullscreen ||
+      // // el.mozRequestFullScreen ||
+      // // el.webkitRequestFullscreen ||
+      // // el.msRequestFullScreen
+      // //   ? el.requestFullscreen() ||
+      // //     el.mozRequestFullScreen() ||
+      // //     el.webkitRequestFullscreen() ||
+      // //     el.msRequestFullscreen()
+      // //   : null
+      var wscript = new ActiveXObject('WScript.Shell') //创建ActiveX
+      if (wscript !== null) {
+        //创建成功
+        wscript.SendKeys('{F11}') //触发f11
+      }
+    },
+    //输入框自动聚焦
+    changfouce() {
+      this.$nextTick(x => {
+        this.$refs.inputs.focus()
+      })
+    },
+    /*fullScreen() {
+      if (screenfull.isEnabled && !screenfull.isFullscreen) {
+        screenfull.request()
+        this.edit1 = false
+      }
+    },*/
+    /*async querynumber(){
+      console.log(this.orderNumber)
+      let orderNumber=this.orderNumber
+      let i=0
+      await this.axios.post("/api/v1/tms/queryNumber?orderNumber=" + orderNumber)
+        .then((res)=>{
+          console.log("查找出来的数据")
+          console.log(res.data)
+          console.log("-------------------------")
+          if (res.data.printnumber==1){
+            i=1
+          }
+        })
+      console.log(i)
+      return i
+        this.edit1 = false;
+      }
+    },*/
+    async querynumber() {
+      console.log(this.orderNumber)
+      console.log(this.orderNumber)
+      let orderNumber = this.orderNumber
+      let i = 0
+      await this.axios
+        .post('/api/v1/tms/queryNumber?orderNumber=' + orderNumber)
+        .then(res => {
+          console.log('查找出来的数据')
+          console.log(res.data)
+          console.log('-------------------------')
+          if (res.data.printnumber == 1) {
+            i = 1
+          }
+        })
+      console.log(i)
+      return i
+    }
+    //失去焦点后自动执行获得焦点事件
+    // onInputBlur(){
+    //     console.log("获取焦点")
+    //     this.changfouce();
+    // }
+    // toSaleSelfMachine(){
+    //      this.$router.push({
+    //         path:'/saleSelfMachine',
+    //     })
+    // }
+  },
+  mounted() {
+    document.getElementById('full').click()
+    console.log(screenfull.isFullscreen)
+    console.log(this.$route.params.index)
+    if (this.$route.params.index == 1) {
+      this.printing()
+    }
+    /*const timer1 = setInterval(async ()=>{
+      this.backgroundImgURL=this.backgroundImgURLList[0]
+    },3000)*/
+    const timer = setInterval(async () => {
+      // if(this.$refs.inputs.focus==false){
+      //     console.log("false")
+      this.changfouce()
+      //}
+      if (
+        this.orderNumber != null &&
+        this.orderNumber != '' &&
+        this.orderNumber.length == 21
+      ) {
+        if (
+          this.orderNumber.startsWith('WYSDD') == true ||
+          this.orderNumber.startsWith('wysdd') == true
+        ) {
+          let promise = await this.querynumber(this.orderNumber)
+          console.log(promise)
+          if (promise == 1) {
+            this.backgroundImgURL = this.backgroundImgURLList[1]
+            this.orderNumber = null
+            setTimeout(() => {
+              this.backgroundImgURL = this.backgroundImgURLList[0]
+              console.log('进入该方法了')
+            }, 4000)
+            return
+          }
+          this.$router.push({
+            path: '/printReceipt4?orderNumber=' + this.orderNumber
+          })
+        }
+      } else if (
+        this.orderNumber != null &&
+        this.orderNumber != '' &&
+        this.orderNumber.length > 21
+      ) {
+        //清空输入框，免得一次多个重复订单还无法删除
+        this.orderNumber = null
+      }
+    }, 3000)
+    this.$once('hook:beforeDestroy', () => {
+      clearInterval(timer)
+    })
+  }
+}
+</script>
+<style lang="scss">
+.saleSelfMachine {
+  width: 100vh;
+  height: 100vh;
+  .background {
+    width: 100%;
+    height: 100%;
+    margin-top: 30px;
+    z-index: -1;
+    position: absolute;
+    overflow: hidden;
+  }
+  .orderNumberData {
+    width: 100%;
+    color: #fff;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .tip {
+    width: 1800px;
+    height: 600px;
+    font-size: 100px;
+    padding-left: 350px;
+    padding-top: 500px;
+    color: #4cc9e9;
+    .arrowDown {
+      margin-top: 150px;
+      padding-left: 450px;
+      font-size: 300px;
+      color: red;
+    }
+  }
+  .emg {
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+    font-size: 30px;
+    color: red;
+    font-weight: 500;
+  }
+}
+</style>

src/views/index/router/index.js

@@ -21,6 +21,11 @@ import printScan2 from '../components/printScan2'
 import printReceipt from '../components/printReceipt'
 import printReceipt1 from '../components/printReceipt1'
 import printReceipt2 from '../components/printReceipt2'
+//记录打印日志
+import printScan3 from '../components/printScan3'
+import printReceipt3 from '../components/printReceipt3'
+import printScan4 from '../components/printScan4'
+import printReceipt4 from '../components/printReceipt4'
 // 网页登录不可访问
 import page404 from '@/views/index/components/page404.vue'
 
@@ -88,6 +93,34 @@ export const constantRouterMap = [
     name: 'printReceipt2',
     component: printReceipt2
   },
+
+  {
+    path: '/printScan3',
+    name: 'printScan3',
+    meta: {
+      title: '下载'
+    },
+    component: printScan3
+  },
+  {
+    path: '/printReceipt3',
+    name: 'printReceipt3',
+    component: printReceipt3
+  },
+  {
+    path: '/printScan4',
+    name: 'printScan4',
+    meta: {
+      title: '下载'
+    },
+    component: printScan4
+  },
+  {
+    path: '/printReceipt4',
+    name: 'printReceipt4',
+    component: printReceipt4
+  },
+
   {
     path: '/login',
     name: 'login',