mall4vs-bbc/src/views/modules/print/merge-print-scan-delivery.vue

<template>
  <el-dialog title="扫码集货"
  :close-on-click-modal="false"
  :visible.sync="mergeScanVisible"
   v-if="mergeScanVisible"
  @close="closeMergeScanDialog"
             width="80%">
  <div style="margin: 20px">
    <h1 align="center">扫码集货打单</h1>
    <el-row>
      <el-col :span="3">
        <el-select v-model="logistics" placeholder="请选择快递">
          <el-option v-for="(item,index) in logisticsList"
                     :key="index"
                     :label="item.logisticsName"
                     :value="item.logisticsValue">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-select v-model="deviceNo" placeholder="请选择打印设备" >
          <el-option
            v-for="(item,index) in deviceList"
            :key="index"
            :label="item.deviceNo"
            :value="item.deviceNo">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="18">
        <el-input id="scanInput" @change="scanMatchPrintOrder" type="text" v-model="scanOrderNo" placeholder="请扫码二维码"></el-input>
      </el-col>
    </el-row>
    <div v-if="infoVisible">
      <div style="margin-top: 30px">
        <span style="font-weight: bold; font-size: 26px">集货单</span>
        <el-row>
          <el-col class="col" :span="6">订单编号</el-col>
          <el-col class="col" :span="3">数量</el-col>
          <el-col class="col" :span="6">扫码状态</el-col>
          <el-col class="col" :span="6">商品名称</el-col>
          <el-col class="col" :span="3">货架</el-col>
        </el-row>
        <el-row v-for="item in mergeRecordList">
          <el-col class="col" :span="6" :class="item.orderNumber === scanOrderNo? 'heightLine':''">{{item.orderNumber}}</el-col>
          <el-col class="col" :span="3">{{item.prodNums}}</el-col>
          <el-col class="col" :span="6" v-if="item.scanStatus === 0">未扫码</el-col>
          <el-col class="col" :span="6" v-if="item.scanStatus === 1" style="color: #2da641;font-weight: bold">已扫码</el-col>
          <el-col class="col" :span="6">{{item.prodName}}</el-col>
          <el-col class="col" :span="3">{{item.storeNo}}</el-col>
        </el-row>
      </div>
      <div style="margin-top: 6px">
        <span style="font-weight: bold; font-size: 26px;">配送信息</span>
        <el-row>
          <el-col class="col" :span="6">配送方式</el-col>
          <el-col class="col" :span="18" style="color: red">{{printOrder.orderLogistics.logisticsName}}</el-col>
        </el-row>
        <el-row>
          <el-col class="col" :span="6">收货地址</el-col>
          <el-col class="col" :span="18">{{printOrder.orderLogistics.receiverAddr}}</el-col>
        </el-row>
        <el-row>
          <el-col class="col" :span="6">收货人</el-col>
          <el-col class="col" :span="18">{{printOrder.orderLogistics.receiverName}}</el-col>
        </el-row>
        <el-row>
          <el-col class="col" :span="6">联系电话</el-col>
          <el-col class="col" :span="18">{{printOrder.orderLogistics.receiverMobile}}</el-col>
        </el-row>
      </div>
      <div style="margin-top: 6px">
        <span style="font-weight: bold; font-size: 26px">打单记录</span>
        <el-row>
          <el-col class="col" :span="4">编号</el-col>
          <el-col class="col" :span="6">运单号</el-col>
          <el-col class="col" :span="4">打印次数</el-col>
          <el-col class="col" :span="6">打单时间</el-col>
          <el-col class="col" :span="4">操作</el-col>
        </el-row>
        <el-row>
          <el-col class="col" :span="4">{{printOrder.orderLogistics.logisticsName}}</el-col>
          <el-col class="col" :span="6">{{printOrder.orderLogistics.deliveryNo}}</el-col>
          <el-col class="col" :span="4">{{printOrder.orderLogistics.printTimes}}</el-col>
          <el-col class="col" :span="6">{{printOrder.orderLogistics.updateTime}}</el-col>
          <el-col class="col" :span="4">
            <el-button type="info" @click="handlePrintOrder">打印</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
  </el-dialog>

</template>

<script>
// import AddOrUpdate from './orderLogistics-add-or-update'
import {autoConnect, disAutoConnect, hiprint, defaultElementTypeProvider} from 'vue-plugin-hiprint'
import template from './yunda-template-data'
import printData from './yunda-print-data'
autoConnect();
hiprint.init();
export default {
  data () {
    return {
      logistics: "YUNDA",
      logisticsList:[{logisticsName: "韵达速递", logisticsValue: "YUNDA"},{logisticsName: "申通快递", logisticsValue: "STO"}],
      dataList: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      printOrder:{
        orderLogistics:{}
      },
      deviceList: [],
      deviceNo: null,
      infoVisible:false,
      lastInputStr: null,
      scanOrderNo: null,
      searchForm: {}, // 搜索
      dataListLoading: false,
      addOrUpdateVisible: false,
      mergeRecordList:[],
      mergeScanVisible: false,
    }
  },
  components: {
    // AddOrUpdate
  },
  created () {
    this.getDeviceList();
  },
  mounted () {
    this.buildDesigner();
  },
  methods: {
    init(){
      this.mergeScanVisible = true;
    },
    printWallbill(logistics){
      this.hiprintTemplate.print2(printData.value(logistics));
    },
    buildDesigner(){
      $("#hiprint-printTemplate").empty(); // 先清空, 避免重复构建
      this.hiprintTemplate = new hiprint.PrintTemplate({
        // 如果使用 vue ref 创建的模板json, 需要使用 .value 获取 (确保内部能够使用 object.key 拿到对应数据就行)
        template: template, // 模板json(object)
        settingContainer: "#PrintElementOptionSetting", // 元素参数容器
      });
      // 构建 并填充到 容器中
      this.hiprintTemplate.design("#hiprint-printTemplate");
    },
    closeMergeScanDialog(){
      this.mergeScanVisible = false;
      this.mergeRecordList = [];
      this.scanOrderNo = null;
      this.lastInputStr = null;
      this.$emit('refreshDataList')
    },
    getDeviceList(){
      this.$http({
        url: this.$http.adornUrl('/print/printDevice/getDeviceList'),
        method: 'GET',
        params: this.$http.adornParams(),
      }).then(({data}) => {
        if(data){
          this.deviceList = data;
        }
      }).catch((error) => {

      })
    },
    scanMatchPrintOrder(value){
      let substr;
      if(this.lastInputStr != null){
        substr = value.replace(new RegExp(this.lastInputStr), "");
      }else{
        substr = value;
      }
      if(!this.deviceNo){
        this.$message.error("请选择打印设备");
      }
      if(substr){
        this.scanOrderNo = substr;
        let dataBody = {orderNumber: substr};
        this.$http({
          url: this.$http.adornUrl('/mergeOrderRecord/scanMergeOrder'),
          method: 'POST',
          data: this.$http.adornData(dataBody),
        }).then(({data}) => {
          if(data){
            this.$message.success("扫码集货成功");
            this.getMergeOrderList(data.batchNo);
        }
          this.lastInputStr = substr;
        }).catch((error) =>{
          this.lastInputStr = substr;
        })
      }
    },
    getMergeOrderList(batchNo){
      this.$http({
        url: this.$http.adornUrl('/mergeOrderRecord/getMergeOrderList'),
        method: 'GET',
        params: this.$http.adornParams({batchNo:batchNo}),
      }).then(({data}) => {
        if(data){
          this.mergeRecordList = data;
        }
        this.infoVisible = true;
      })
    },
    handlePrintOrder(){
      if(!this.deviceNo){
        this.$message.error("请选择打印设备");
      }
      this.$confirm('确定打印面单吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/logistics/mergePrintAndDelivery'),
          method: 'POST',
          data: this.$http.adornData({orderNumber: this.scanOrderNo, logistics: this.printOrder.orderLogistics.logistics, deviceNo: this.deviceNo}),
        }).then(({data}) => {
          if(data){
            this.$message.success("打印成功")
            this.getLogisticsInfo(this.scanOrderNo);
            if(this.logistics === 'YUNDA'){
              //打印韵达面单
              this.printWallbill(this.printOrder.orderLogistics)
            }
          }
        }).catch((error) => {
          this.$message.error("打印失败")
        })
      })
    },
    getLogisticsInfo(orderNumber){
      this.$http({
        url: this.$http.adornUrl('/logistics/getLogisticsInfo'),
        method: 'GET',
        params: this.$http.adornParams({orderNumber:orderNumber}),
      }).then(({data}) => {
        if(data){
          this.printOrder = data;
        }
      })
    },
  }
}
</script>
<style lang="scss">
  .col{
    height: 40px;
    border: gainsboro 1px solid;
    font-size: 20px;
    line-height: 40px;
    text-align: center;
  }
  .heightLine{
    background-color: #2d8cf0;
    color: white;
  }
</style>