外购订单的标签打印功能

deslrey

20 小时以前 86c6109d652a6b863b4f890e3bea573877503932

外购订单的标签打印功能

 src/api/business/productOrder.js

@@ -98,6 +98,16 @@
    data: query
  })
}

//  外购下单成品标签打印信息
export function labelOutsideOrderPrinting(query) {
  return request({
    url: '/insOrder/labelOutsideOrderPrinting',
    method: 'post',
    data: query
  })
}

// 根据订单id查询样品
export function getSampleByOrderId(query) {
  return request({

 src/views/business/outsourcingFinishProduct/components/printDialog.vue

@@ -1,60 +1,67 @@
<template>
  <div>
    <el-dialog :visible.sync="isShow" title="标签打印" top="5vh" width="600px" @close="$emit('closePrintDialog')">
    <el-dialog title="标签打印" :visible.sync="isShow" width="600px" top="5vh" @close="$emit('closePrintDialog')">
      <div style="width:100%;height: 400px;overflow-y: auto;text-align: left">
        <div class="dia_body">
          <el-checkbox
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            style="margin: 10px 5px;"
          <el-checkbox style="margin: 10px 5px;" :indeterminate="isIndeterminate" v-model="checkAll"
            @change="handleCheckAllChange">全选</el-checkbox>
          <el-checkbox-group v-model="checkIndexList" @change="changePrintCode()">
            <el-card v-for="(item, i) in barcodeData" :key="i" class="box-card" style="margin-bottom: 15px; font-size: 16px !important;">
              <el-checkbox :key="i" :label="i" style="position: relative;top:0;left:10px"><br></el-checkbox>
          <el-checkbox-group @change="changePrintCode()" v-model="checkIndexList">
            <el-card class="box-card" v-for="(item, i) in barcodeData" :key="i"
              style="margin-bottom: 15px; font-size: 16px !important;">
              <el-checkbox :label="i" :key="i" style="position: relative;top:0;left:10px"><br></el-checkbox>
              <div>
                <div class="titleH1" style="text-align: center; margin-bottom: 2px;font-size: 16px">检测中心样品标识卡</div>
                <div style="text-align: center;">
                  <barcode :displayValue="false" :height="34" :value="item.barcode" :width="2"></barcode>
                <div style="text-align: center; margin-bottom: 2px;font-size: 22px;font-weight: bold;">成品检测</div>
                <div style="text-align: center; margin-bottom: 2px;font-size: 16px;font-weight: bold;">{{ item.partDesc
                }}</div>
                <div style="display: flex; align-items: center;">
                  <div style="flex: 0 0 45%; text-align: center;">
                    <vueQr :text="getQrCodeText(item)" :size="160" :margin="2"></vueQr>
                    <div style="margin-top: 5px; font-size: 14px;">
                      <span class="print-person-label">打印人</span>
                      <span style="margin-left: 20px; font-weight: bold;">{{ nickName }}</span>
                </div>
                <div style="margin-left: 20px;text-align: left">
                  </div>
                  <div style="flex: 1; margin-left: 10px;text-align: left">
                  <div class="item">
                    <span class="full-title">样品名称</span>:
                    <span class="info">{{ item.sampleView }}</span>
                      <span class="full-title">SN号</span>
                      <span class="info">{{ item.lotBatchNo }}</span>
                  </div>
                  <div class="item">
                    <span class="full-title">生产单位</span>:
                    <span class="info">{{ item.production }}</span>
                      <span class="full-title">绝缘颜色</span>
                      <span class="info">{{ item.insulationColor }}</span>
                  </div>
                  <div class="item2">
                    <span class="full-title">规格型号</span>:
                    <span class="info">{{ item.sampleModel }}</span>
                      <span class="full-title">护套颜色</span>
                      <span class="info">{{ item.outerColor }}</span>
                  </div>
                  <div class="item">
                    <span class="full-title">委托日期</span>:
                    <span class="info">{{ item.sendTime }}</span>
                      <span class="full-title">载具编号</span>
                      <span class="info">{{ item.drumNo }}</span>
                  </div>
                  <div class="item">
                    <span class="full-title">委托人</span>:
                    <span class="info2">{{ item.prepareUser }}</span>
                    <span class="full-title">检测编号</span>:
                    <span class="info">{{ item.entrustCode }}</span>
                      <span class="full-title">起止米标</span>
                      <span class="info">{{ item.startMeterMark }} - {{ item.endMeterMark }}</span>
                  </div>
                  <div class="item">
                    <span class="full-title">样品数量</span>:
                    <span class="info2">{{ item.testQuantity }}</span>
                      <span class="full-title">长度(km)</span>
                      <span class="info">{{ calcInbondLength(item.startMeterMark, item.endMeterMark) }}</span>
                  </div>
                  <div style="font-weight: bold;display: flex;align-items: center;">
                    <span class="full-title">样品状态</span>:
                    <el-radio-group v-model="item.insState" v-removeAriaHidden style="margin-top: 7px;margin-left: 4px;">
                      <el-radio :label="0" style="font-weight: bold;margin-right: 7px;">待检</el-radio>
                      <el-radio :label="1" style="font-weight: bold;margin-right: 7px;">在检</el-radio>
                      <el-radio :label="2" style="font-weight: bold;margin-right: 7px;">已检</el-radio>
                    </el-radio-group>
                    <span>
                      <el-radio v-model="item.isLeave"
                                :label="true"
                                size="small" style="margin-left: 14px;margin-top: 3px;" @click.native.prevent="changeIsLeave(item)">留样</el-radio>
                    </span>
                    <div class="item">
                      <span class="full-title">检测人员</span>
                      <span class="info">{{ item.inspectorName }}</span>
                    </div>
                    <div class="item">
                      <span class="full-title">检测结论</span>
                      <span class="info">{{ formatData(item.insState) }}</span>
                    </div>
                    <div class="item">
                      <span class="full-title">入库时间</span>
                      <span class="info">{{ item.updateTime }}</span>
                    </div>
                    <div class="item">
                      <span class="full-title">零件号</span>
                      <span class="info">{{ item.partNo }}</span>
                    </div>
                  </div>
                </div>
              </div>
@@ -69,49 +76,63 @@
        </el-row>
      </span>
    </el-dialog>
    <div class="el-dialog-body" style="overflow-y: auto;margin-top: 0;position: fixed;top: 20px;right: 10px;z-index: 99999;">
      <div id="printOrder" ref="printOrder" class="printOrder">
        <el-card v-for="(item, i) in checkDataList" :key="i" class="box-card" style="font-size: 0.29cm !important;font-weight: 700;page-break-after: always;color: #000;box-shadow: none;margin: 0 !important;padding: 0 !important;">
    <div class="el-dialog-body"
      style="overflow-y: auto;margin-top: 0;position: fixed;top: 20px;right: 10px;z-index: 99999;width: 500px;">
      <div id="printOrder" class="printOrder" ref="printOrder">
        <el-card class="box-card" v-for="(item, i) in checkDataList" :key="i"
          style="font-size: 0.29cm !important;font-weight: 700;page-break-after: always;color: #000;box-shadow: none;margin: 0 !important;padding: 0 !important;">
          <div>
            <div class="titleH1" style="text-align: center;margin-bottom: 1px">检测中心样品标识卡</div>
            <div style="text-align: center;">
              <barcode :displayValue="false" :height="22" :value="item.barcode" :width="1.6"></barcode>
            <div class="titleH1" style="text-align: center;margin-bottom: 1px">成品检测</div>
            <div class="titleH1" style="text-align: center;margin-bottom: 1px">{{ item.partDesc }}</div>
            <div style="display: flex; align-items: center;">
              <div style="flex: 0 0 45%; text-align: center;">
                <vueQr :text="getQrCodeText(item)" :size="160" :margin="2"></vueQr>
                <div style="margin-top: 5px;">
                  <span class="print-person-label">打印人</span>
                  <span style="margin-left: 20px; font-weight: bold;">{{ nickName }}</span>
            </div>
            <div style="margin-left: 12px;text-align: left">
              </div>
              <div style="flex: 1; margin-left: 5px;text-align: left">
              <div class="item">
                <span class="full-title4">样品名称:</span>
                <span class="info4">{{ item.sampleView }}</span>
                  <span class="full-title">SN号</span>
                  <span class="info">{{ item.lotBatchNo }}</span>
              </div>
              <div class="item">
                <span class="full-title2">生产单位</span>:
                <span class="info">{{ item.production }}</span>
                  <span class="full-title">绝缘颜色</span>
                  <span class="info">{{ item.insulationColor }}</span>
              </div>
              <div class="item2">
                <span class="full-title4">规格型号:</span>
                <span class="info4">{{ item.sampleModel }}</span>
                  <span class="full-title">护套颜色</span>
                  <span class="info">{{ item.outerColor }}</span>
              </div>
              <div class="item">
                <span class="full-title2">委托日期</span>:
                <span class="info">{{ item.sendTime }}</span>
                  <span class="full-title">载具编号</span>
                  <span class="info">{{ item.drumNo }}</span>
              </div>
              <div class="item">
                <span class="full-title2">委托人</span>:
                <span class="info3">{{ item.prepareUser }}</span>
                <span class="full-title2">检测编号</span>:
                <span class="info">{{ item.entrustCode }}</span>
                  <span class="full-title">起止米标</span>
                  <span class="info">{{ item.startMeterMark }} - {{ item.endMeterMark }}</span>
              </div>
              <div class="item">
                <span class="full-title2">样品数量</span>:
                <span class="info3">{{ item.testQuantity }}</span>
                  <span class="full-title">长度(km)</span>
                  <span class="info">{{ calcInbondLength(item.startMeterMark, item.endMeterMark) }}</span>
              </div>
              <div>
                <span class="full-title2">样品状态</span>:
                <span style="white-space: nowrap;margin-left: 2px">
                  待检<span v-if="item.insState!==0" class="scor"></span><span v-if="item.insState===0" class="checked">√</span>
                  在检<span v-if="item.insState!==1" class="scor"></span><span v-if="item.insState===1" class="checked">√</span>
                  已检<span v-if="item.insState!==2" class="scor"></span><span v-if="item.insState===2" class="checked">√</span>
                  留样<span v-if="!item.isLeave" class="scor"></span><span v-if="item.isLeave" class="checked">√</span>
                </span>
                <div class="item">
                  <span class="full-title">检测人员</span>
                  <span class="info">{{ item.inspectorName }}</span>
                </div>
                <div class="item">
                  <span class="full-title">检测结论</span>
                  <span class="info">{{ formatData(item.insState) }}</span>
                </div>
                <div class="item">
                  <span class="full-title">入库时间</span>
                  <span class="info">{{ item.updateTime }}</span>
                </div>
                <div class="item">
                  <span class="full-title">零件号</span>
                  <span class="info">{{ item.partNo }}</span>
                </div>
              </div>
            </div>
          </div>
@@ -123,17 +144,25 @@

<script>
import PrintJS from "print-js";
import {labelOrderPrinting} from "@/api/business/productOrder";
import vueQr from "vue-qr";
import { labelOutsideOrderPrinting } from "@/api/business/productOrder";
import { mapGetters } from "vuex";

export default {
  name: "printDialog",
  // import 引入的组件需要注入到对象中才能使用
  components: {},
  // 2. 在这里注册组件
  components: {
    vueQr
  },
  props: {
    printDialog: {
      type: Boolean,
      default: () => false
    },
  },
  computed: {
    ...mapGetters(["nickName"]),
  },
  data() {
    // 这里存放数据
@@ -158,17 +187,17 @@
        selection.map(m => {
          ids.push(m.id)
        })
        labelOrderPrinting({
          ids: ids
        }).then(res => {
        labelOutsideOrderPrinting({ ids: ids }).then(res => {
          if (res.code === 200 && res.data.length > 0) {
            res.data.forEach(item => {
              console.log('item---', item)
              item.sendTime = item.sendTime && item.sendTime.substring(0, 10)
              item.sampleNumber = item.qtyArrived + item.buyUnitMeas
              this.$set(item, 'barcode', item.entrustCode)
              this.$set(item, 'isLeave', item.insState === '2')
              this.$set(item, 'isLeave', item.labelStatus === '2')
            })
            this.barcodeData = res.data
            console.log('barcodeData---', this.barcodeData)
          }
        })
      } catch (e) {
@@ -176,10 +205,27 @@
      }

    },
    changeIsLeave(item) {
      const index = this.barcodeData.findIndex(val => val.entrustCode === item.entrustCode)
      if (index > -1) {
        this.barcodeData[index].isLeave = !this.barcodeData[index].isLeave
    calcInbondLength(startMeterMark, endMeterMark) {
      let inboundLength = null;
      if ((startMeterMark != null && startMeterMark !== '') && (endMeterMark != null && endMeterMark !== '')) {
        let minus = this.$Big(endMeterMark).minus(this.$Big(startMeterMark));
        inboundLength = Math.abs(minus)
      }
      return inboundLength;
    },
    formatData(params) {
      if (params == 0) {
        return '检验中'
      } else if (params == 1) {
        return '合格'
      } else if (params == 2) {
        return '不合格'
      } else if (params == 3) {
        return '未下单'
      } else if (params == 4) {
        return '让步放行'
      } else {
        return null
      }
    },
    // 全选多选框回调
@@ -197,6 +243,17 @@
    },
    changeType(type) {
      type = type === '1' ? '0' : '1'
    },
    // 生成二维码内容
    getQrCodeText(item) {
      const data = {
        sn_no: item.lotBatchNo,
        vehicle_no: item.drumNo,
        qty_arrived: this.calcInbondLength(item.startMeterMark, item.endMeterMark),
        lot_batch_no: item.lotBatchNo,
        part_no: item.partNo,
      };
      return JSON.stringify(data, null, 2);
    },
    //选择要打印的二维码
    changePrintCode() {
@@ -238,7 +295,7 @@
          }
          @media print{
            width: 400px;
            height: 75px;
            height: 800px;
            margin:0;
          }`,
        onPrintDialogClose: this.erexcel = false,
@@ -261,56 +318,70 @@

<style scoped>
.item {
  margin-bottom: 4px;
  margin-bottom: 2px;
  line-height: 1.2;
}

.item2 {
  margin-bottom: 8px;
  margin-bottom: 2px;
  vertical-align: top;
  line-height: 1.2;
}

.full-title {
  display: inline-block;
  width: 80px;
  width: 70px;
  text-align-last: justify;
  text-align: justify;
  font-weight: bold;
}

/* For the print section which might use smaller font */
.full-title2 {
  display: inline-block;
  width: 50px;
  width: 60px;
  text-align-last: justify;
  text-align: justify;
  font-weight: bold;
}

.full-title4 {
  display: inline-block;
  width: 53px;
  width: 60px;
  text-align-last: justify;
  text-align: justify;
  vertical-align: top;
  font-weight: bold;
}

.info {
  margin-left: 2px;
  margin-left: 15px;
  font-weight: bold;
}

.info2 {
  margin-left: 2px;
  margin-right: 30px;
  width: 80px;
  margin-left: 15px;
  margin-right: 10px;
  width: auto;
  display: inline-block;
  font-weight: bold;
}

.info3 {
  margin-left: 2px;
  margin-right: 8px;
  width: 44px;
  margin-left: 15px;
  margin-right: 10px;
  width: auto;
  display: inline-block;
  font-weight: bold;
}

.info4 {
  display: inline-block;
  margin-left: 2px;
  margin-left: 15px;
  white-space: normal;
  width: 260px;
  width: 200px;
  font-weight: bold;
  vertical-align: top;
}

.checkboxInfo {
@@ -331,6 +402,15 @@
.checked {
  margin-right: 14px;
  margin-left: 4px;
  font-weight: bold;
}

.print-person-label {
  display: inline-block;
  width: 50px;
  text-align-last: justify;
  text-align: justify;
  font-weight: bold;
}

>>> .el-checkbox {

 src/views/business/outsourcingFinishProduct/index.vue

@@ -187,7 +187,7 @@
</template>

<script>
import PrintDialog from "@/views/business/materialOrderComponents/materialOrder/printDialog.vue";
import PrintDialog from "@/views/business/outsourcingFinishProduct/components/printDialog.vue";
import ShowInfo from "@/views/business/materialOrderComponents/materialOrder/showInfo.vue";
import DataLookVisible from "@/views/business/materialOrderComponents/materialOrder/dataLookVisible.vue";
import FilesLookVisible from "@/views/business/materialOrderComponents/materialOrder/filesLookVisible.vue";