初始化提交

Crunchy

2025-06-14 7e460156de73171f9660ce48f80703e79f8b478d

 src/views/add_operation/barcode/index.vue

@@ -1,15 +1,167 @@
<template>
  <div class="barcode">
    条码打印
<!--绑定id方法-->
<!-- <div id='box'>
   <p>打印内容</p>
</div>
<div v-print='#box'>打印</div> -->
<!--绑定对象方法-->
<div id='printMe'>
  <vue-barcode
  :value="value"
  >不支持vue-barcode</vue-barcode>
   <div>
    <div>产品名称</div>
    <div>数量</div>
    <div>单位</div>
   </div>
   <div>
    <div>时间</div>
    <div>规格</div>
   </div>
</div>

<div v-for="(item,index) in table" :key="index">
  {{item}}
</div>

<el-button @click="showCode">生成条形码</el-button>
<el-button v-print='printObj'>打印</el-button>
<el-input v-show="false" class="input" v-model="value" ref="input"></el-input> 

  </div>
</template>

<script>
export default {
   import VueBarcode from 'vue-barcode'

export default{
   data(){
      return {
         printObj:{
            id: "printMe", // 打印的区域
            // preview: false, // 预览工具是否启用
            previewTitle: '打印条码', // 预览页面的标题
            popTitle: '', // 打印页面的页眉
            previewBeforeOpenCallback(vue) {
              console.log('正在加载预览窗口')
            },
            previewOpenCallback(vue) {
              console.log('已经加载完预览窗口')
            },
            clickMounted: (vue) => {
              console.log("触发点击打印回调");
              vue.isShowPrint = true  //弹框显示条码
            },
            beforeOpenCallback(vue) {
              console.log('打开之前',vue.barcodeNum)
            },
            openCallback (vue) {
              vue.isShowPrint = false  // 关闭条码显示弹框
              console.log('执行了打印',vue.barcodeNum)
            },
         },
         value: '',
         table:[]
      }
   },
   components: { VueBarcode },
   mounted() {
    
    this.makeCode('1234567891234567')
    this.addScanMonitor()
   },
   methods: {
    // 监听扫描
    showCode() {
      this.makeCode('1234567891234567')
// window.document.onkeypress=undefined
    },
    addScanMonitor() {
      window.document.onkeypress = e => {
        console.log(e)
        if (window.event) { // IE
          this.nextCode = e.keyCode
        } else if (e.which) { // Netscape/Firefox/Opera
          this.nextCode = e.which
        }

        if (e.which === 13) { // 键盘回车事件
          if (this.code.length < 3) return // 扫码枪的速度很快，手动输入的时间不会让code的长度大于2，所以这里不会对扫码枪有效
          console.log('扫码结束,条形码：', this.code)
          this.table.push(this.code)
          this.scanningForm.scanCode = this.code
          this.lastCode = ''
          this.lastTime = ''
          this.handleSubmitScanning()
          return
        }

        this.nextTime = new Date().getTime()
        if (!this.lastTime && !this.lastCode) {
          this.code = '' // 清空上次的条形码
          // 继续扫描一下条前关闭弹窗
          // this.handleCloseTipsVisible()
          this.code += e.key
          console.log('扫码开始---', this.code)
        }
        if (this.lastCode && this.lastTime && this.nextTime - this.lastTime > 500) { // 当扫码前有keypress事件时,防止首字缺失
          this.code = e.key
          console.log('防止首字缺失。。。', this.code)
        } else if (this.lastCode && this.lastTime) {
          this.code += e.key
          console.log('扫码中。。。', this.code)
        }
        this.lastCode = this.nextCode
        this.lastTime = this.nextTime
      }
    },
    makeCode(msg) {
      // let obj = {jack: '1212'}
     this.value = msg

    }
   }
}
</script>

<style>
<style lang="scss">

  #printMe{
  // height: 4cm;
  width: 8cm;
  display: flex;
  flex-direction: column;
  text-align: center;
  img{
    display: inline-block;
    text-align: center;
    width: 6cm;
    height: 2cm;
  }
  >div{
    width: 100%;
    display: flex;
    >div{
      flex: 1;
      // height: 30px;
      border: 1px solid #ddd;
    }
  }
}
@media print {
  @page {
    size: 8cm 4cm !important;
    // margin: 0cm;
    // padding: 0cm;
    // size: portrait;
    // border: 1px solid #ddd;
    
  }
  #printMe{
    display: block;
    width: 100%;
      overflow: hidden;
    }
  }
</style>