1.MES工单补打生产入库条码

loulijun2021

2023-05-25 86b282043844a5c6d2624d9f18a465c08d8cfc11

 src/views/produceManager/workOrder.vue

@@ -1372,14 +1372,14 @@
      v-el-drag-dialog
      title="预览"
      :visible.sync="dialogVisible2"
      width="1140"
      width="1000"
      top="10vh"
      :close-on-click-modal="false"
      @close="dialogVisible2Close"
    >
      <div style="height: 300px">
      <div style="height: 650px;overflow:auto;">
        <!--      下拉框选择打印尺寸-->
        <div style="display: flex;align-items: center;margin: 0 0 20px 0">
        <div v-if="!isLastPrint" style="display: flex;align-items: center;margin: 0 0 20px 0">
          <div>选择打印尺寸：</div>
          <el-select
            v-model="printSize"
@@ -1399,7 +1399,8 @@
        </div>
        <!-- 要打印的区域 -->
        <!--      <div id="printMe2" :style="{paddingLeft:'10px',paddingTop: '5px'}">-->
        <div v-if="!isLastPrint" id="printMe2" :style="printMe2StylePadding(printSize)">
        <div v-if="!isLastPrint" :style="printMe2StylePadding(printSize)">
          <!--      80 * 50-->
          <div
            v-if="printSize===0"
            style="display: flex;width: 280px;height: 160px;border: 1px solid #000;text-align: center;font-size: 10px;"
@@ -1461,6 +1462,7 @@
            </div>

          </div>
          <!--      78 * 60    -->
          <div
            v-if="printSize===1"
            style="display: flex;width: 280px;height: 160px;border: 1px solid #000;text-align: center;font-size: 10px;"
@@ -1522,6 +1524,7 @@
            </div>

          </div>
          <!--      60 * 40    -->
          <div
            v-if="printSize===2"
            style="display: flex;width: 220px;height: 130px;border: 1px solid #000;text-align: center;font-size: 12px"
@@ -1646,14 +1649,189 @@
          </div>
        </div>

        <div v-if="isLastPrint">
          123
        <div v-if="isLastPrint" style="display: flex;flex-direction: column">

          <div style="display: flex;font-weight: bold;font-size: 16px;margin-bottom: 20px;">
            <div style="width: 48%;">
              请选择入库条码
            </div>
            <div style="width: 48%;margin-left: 4%;">
              已选中的入库条码
            </div>
          </div>

          <div style="display: flex;">
            <!--          请选择入库条码-->
            <div style="display: flex;flex-direction: column;height: 600px;overflow: auto;width: 48%;">
              <div
                v-for="(item,index) in lastPrintArr"
                :key="item.inbarcode"
                :style="{marginTop:index===0?'':'15px'}"
                style="display: flex;align-items: center;"
              >

                <!--          v-if="printSize===0"-->
                <div style="margin-right:40px">
                  <el-checkbox
                    :key="item.inbarcode"
                    v-model="item.checked"
                    @change="val=>inbarcodeChange(val,item)"
                  />
                </div>
                <div
                  style="display: flex;width: 280px;height: 160px;border: 1px solid #000;text-align: center;font-size: 10px;"
                >

                  <div style="width: 90px;display: flex;flex-direction: column;border-right: 1px solid #000">
                    <div
                      style="display: flex;height: 96px;border-bottom:1px solid #000;
                      justify-content: center;align-items: center;position: relative"
                    >
                      <div
                        id="qrCode2"
                        ref="qrCodeDiv2"
                        style="overflow-y: hidden;height:60px;position: absolute;left: 14px;"
                      />
                    </div>
                    <div
                      style="display: flex;height: 32px;justify-content: flex-start;border-bottom:1px solid #000;align-items: center"
                    >
                      <div style="margin-left: 5px;width: 28px">数量:</div>
                      {{ item.good_qty }}
                    </div>
                    <div style="display: flex;height: 32px;justify-content: flex-start;align-items: center">
                      <div style="margin-left: 5px;width: 42px">处理人:</div>
                      {{ item.username }}
                    </div>
                  </div>

                  <div style="width:190px;display: flex;flex-direction: column">
                    <div
                      style="display: flex;height: 20%;border-bottom:1px solid #000;justify-content: flex-start;align-items: center;text-align: left"
                    >
                      <div style="width: 60px;margin-left: 5px;">工单编号:</div>
                      <div>{{ item.wo_code }}</div>
                    </div>
                    <div
                      style="display: flex;height: 20%;border-bottom:1px solid #000;justify-content: flex-start;align-items: center ;text-align: left"
                    >
                      <div style="width: 60px;margin-left: 5px;">产品编码:</div>
                      <div>{{ item.partcode }}</div>
                    </div>
                    <div
                      style="display: flex;height: 20%;border-bottom:1px solid #000 ;justify-content: flex-start;align-items: center;text-align: left"
                    >
                      <div style="width:60px;margin-left: 5px;">产品名称:</div>
                      <div>{{ item.partname }}</div>
                    </div>
                    <div
                      style="display: flex;height: 20%;border-bottom:1px solid #000 ;justify-content: flex-start;align-items: center;text-align: left"
                    >
                      <div style="width:60px;margin-left: 5px;">产品规格:</div>
                      <div>{{ item.partspec ? item.partspec : '/' }}</div>
                    </div>
                    <div
                      style="display: flex;height: 20%;justify-content: flex-start;align-items: center;text-align: left"
                    >
                      <div style="width: 60px;margin-left: 5px;">处理时间:</div>
                      <div>{{ item.lm_date }}</div>
                    </div>

                  </div>

                </div>

              </div>
            </div>

            <!--          已选中的入库条码-->
            <div
              style="display: flex;flex-direction: column;height: 600px;overflow: auto;width: 48%;margin-left: 50px;"
            >
              <div id="printMe2">
                <div
                  v-for="(item,index) in lastPrintArrSelected"
                  v-if="item.checked"
                  :key="item.inbarcode"
                  :style="{marginTop:index===0?'':'15px'}"
                  style="display: flex;align-items: center;"
                >
                  <div
                    style="display: flex;width: 280px;height: 160px;border: 1px solid #000;text-align: center;font-size: 10px;"
                  >

                    <div style="width: 90px;display: flex;flex-direction: column;border-right: 1px solid #000">
                      <div
                        style="display: flex;height: 96px;border-bottom:1px solid #000;
                        justify-content: center;align-items: center;position: relative"
                      >
                        <div
                          id="qrCode3"
                          ref="qrCodeDiv3"
                          style="overflow-y: hidden;height:60px;position: absolute;left: 14px;"
                        />
                      </div>
                      <div
                        style="display: flex;height: 32px;justify-content: flex-start;border-bottom:1px solid #000;align-items: center"
                      >
                        <div style="margin-left: 5px;width: 28px">数量:</div>
                        {{ item.good_qty }}
                      </div>
                      <div style="display: flex;height: 32px;justify-content: flex-start;align-items: center">
                        <div style="margin-left: 5px;width: 42px">处理人:</div>
                        {{ item.username }}
                      </div>
                    </div>

                    <div style="width:190px;display: flex;flex-direction: column">
                      <div
                        style="display: flex;height: 20%;border-bottom:1px solid #000;justify-content: flex-start;align-items: center;text-align: left"
                      >
                        <div style="width: 60px;margin-left: 5px;">工单编号:</div>
                        <div>{{ item.wo_code }}</div>
                      </div>
                      <div
                        style="display: flex;height: 20%;border-bottom:1px solid #000;justify-content: flex-start;align-items: center ;text-align: left"
                      >
                        <div style="width: 60px;margin-left: 5px;">产品编码:</div>
                        <div>{{ item.partcode }}</div>
                      </div>
                      <div
                        style="display: flex;height: 20%;border-bottom:1px solid #000 ;justify-content: flex-start;align-items: center;text-align: left"
                      >
                        <div style="width:60px;margin-left: 5px;">产品名称:</div>
                        <div>{{ item.partname }}</div>
                      </div>
                      <div
                        style="display: flex;height: 20%;border-bottom:1px solid #000 ;justify-content: flex-start;align-items: center;text-align: left"
                      >
                        <div style="width:60px;margin-left: 5px;">产品规格:</div>
                        <div>{{ item.partspec ? item.partspec : '/' }}</div>
                      </div>
                      <div
                        style="display: flex;height: 20%;justify-content: flex-start;align-items: center;text-align: left"
                      >
                        <div style="width: 60px;margin-left: 5px;">处理时间:</div>
                        <div>{{ item.lm_date }}</div>
                      </div>

                    </div>

                  </div>

                </div>
              </div>

            </div>

          </div>

        </div>

      </div>
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button v-waves @click="dialogVisible2 = false">取 消</el-button>
          <el-button v-waves @click="dialogVisible2 = false;">取 消</el-button>
          <el-button v-waves v-print="printObj2" type="primary">打 印</el-button>
        </div>
      </span>
@@ -2037,7 +2215,9 @@
      },
      submitButtonIsDisabled: false,

      isLastPrint: false// 是否是末道打印
      isLastPrint: false, // 是否是末道打印
      lastPrintArr: [], // 末道打印的数组(所有)
      lastPrintArrSelected: []// 末道打印的数组(选中)
    }
  },
  created() {
@@ -2614,13 +2794,29 @@
      console.log(this.qrForm, 1111)
    },
    // 补打生产入库条码
    async  getProductInHouseLabCode(ordercode) {
    async getProductInHouseLabCode(ordercode) {
      const res = await ProductInHouseLabCode({ ordercode })
      console.log(res)
      this.isLastPrint = true
      // 做一些打印多选的操作

      this.lastPrintArr = res.data

      this.dialogVisible2 = true

      // 生产二维码
      this.$nextTick(() => {
        this.lastPrintArr.forEach((i, index) => {
          i.checked = false
          new QRCode(this.$refs.qrCodeDiv2[index], {
            text: i.inbarcode,
            width: this.printSize !== 2 ? 60 : 55,
            height: this.printSize !== 2 ? 60 : 55,
            colorDark: '#000', // 二维码颜色
            colorLight: '#ffffff', // 二维码背景色
            correctLevel: QRCode.CorrectLevel.L// 容错率，L/M/H
          })
        })
      })
    },
    dialogVisible2Close() {
      this.qrForm.qrvalue = ''
@@ -2633,6 +2829,8 @@
      this.qrForm.operatorTime = ''
      // this.$refs.qrCodeDiv2 = ''
      this.isLastPrint = false
      this.lastPrintArr = []
      this.lastPrintArrSelected = []
    },
    // 生成二维码    工序标签二维码
    bindQRCode2(text) {
@@ -2858,6 +3056,35 @@
      if (val === 5) {
        return { paddingLeft: '15px', paddingTop: '7px' }
      }
    },

    inbarcodeChange(val, item) {
      // 当 lastPrintArrSelected中未有当前勾选的值是  走push  item  否则走过滤掉item
      if (val) {
        this.lastPrintArrSelected.push(item)
      } else {
        this.lastPrintArrSelected = this.lastPrintArrSelected.filter(i => i.inbarcode !== item.inbarcode)
      }

      // 生产二维码
      this.$nextTick(() => {
        this.lastPrintArrSelected.forEach((i, index) => {
          console.log(i.inbarcode, 'i.inbarcode')
          new QRCode(this.$refs.qrCodeDiv3[index], {
            text: i.inbarcode,
            width: 60,
            height: 60,
            colorDark: '#000', // 二维码颜色
            colorLight: '#ffffff', // 二维码背景色
            correctLevel: QRCode.CorrectLevel.L// 容错率，L/M/H
          })
        })

        // const div = document.getElementById('qrCode3')
        // div.scrollTop = 0 // 滚动条位于最底部

        this.$forceUpdate()
      }, 500)
    }
  }
}