gjerp_ui/src/views/jhzxgl/components/SljhPrint.vue

<template>
  <!--  <el-container>-->
  <div>
    <div class=""   v-for="(item,indexOne) in sljhPrintData"   style=" width: 1050px;
  /*border: 1px #000 solid;*/
  text-align: center;
  font-size: 20px; ">
      <div style="width: 20%;" class="ewm"
           :id="`patientQrCode_${indexOne}`"

      ></div>

      <div style="text-align: center; padding-top: 20px">

        <div style="width:100%;">
          <h5> 上 料 计 划</h5>
        </div>

        <div style="width: 100%">
          <div  style="height: 20px;width: 50%;" class="base">打印单据：{{item.sllsh}}</div>
          <div  style="height: 20px;width: 50%;" class="base">制单日期：{{item.dyrq}}</div>
        </div>
        <div style="width: 100%">
          <div class="headOne" style="width:4%">序号</div>
          <div class="headOne" style="width: 11%">合同号</div>
          <div class="headOne" style="width: 7%">船号</div>
          <div class="headOne" style="width: 15%">材质</div>

          <div class="headOne" style="width: 10%">规格</div>
          <div class="headOne" style="width: 9%">炉批号</div>
          <div class="headOne" style="width: 3%">数量</div>
          <div class="headOne" style="width: 5%">库存垛位</div>
          <div class="headOne" style="width: 4%">层数</div>
          <div class="headOne" style="width: 6%">需求船只</div>
          <div class="headOne" style="width: 5%">需求批量</div>
          <div class="headOne" style="width: 5%">流向</div>
          <div class="headOne" style="width: 7%">跨位</div>
          <div class="headOne" style="width: 3%">物品状态</div>
          <div class="headOne" style="width: 6%">备注</div>

          <div style="clear: both"></div>
        </div>
        <div style="width: 100%" v-for="(item1,index) in item.list">
          <div class="one" style="width:4%">{{ item1.xh }}</div>
          <div class="one" style="width: 11%">{{ item1.dcFd }}</div>
          <div class="one" style="width: 7%">{{ item1.dcch }}</div>
          <div class="one" style="width: 15%">{{ item1.wpxh }}</div>

          <div class="one" style="width: 10%">{{ item1.wpgg }}</div>
          <div class="one" style="width: 9%">{{ item1.lph }}</div>
          <div class="one" style="width: 3%">{{ item1.qxkcl }}</div>
          <div class="one" style="width: 5%">{{ item1.kwh }}</div>
          <div class="one" style="width: 4%">{{ item1.cfcs1 }}</div>
          <div class="one" style="width: 6%">{{ item1.zych }}</div>
          <div class="one" style="width: 5%">{{ item1.zypl }}</div>
          <div class="one" style="width: 5%">{{ item1.zylx }}</div>
          <div class="one" style="width: 7%">{{ item1.sldw }}</div>
          <div class="one" style="width: 3%">{{ item1.wpzt }}</div>
          <div class="one" style="width: 6%">{{ item1.bz }}</div>


          <div style="clear: both"></div>
        </div>






      </div>
      <div class="pageBreak"/>
    </div>

  </div>



</template>

<script>
import {mapGetters} from 'vuex'
import QRCode from 'qrcodejs2'
export default {
  // 流程卡
  name: 'SljhPrint',
  props: ['sljhPrintData'],
  data() {
    return {
      dataSize:0,
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'bmbm'
    ])
  },
  created() {
    console.log(this.sljhPrintData)
    // console.log(sljhPrintData)
    console.log(11111)

  },
  methods: {

    gegn() {

      this.$nextTick(() => {
        console.log(this.sljhPrintData)
        this.sljhPrintData.forEach((v, i) => {
          // let fix=''
          // if(v.jhlx==='0201'){
          //   fix='0201'
          // }else if (v.jhlx==='0202'){
          //   fix='ZJ'
          // }else if (v.jhlx==='0203'){
          //
          // }else if (v.jhlx==='0101'){
          //
          // }
          console.log(v.sllsh)
          console.log(v)
          let text=v.sllsh
          this.qrcode(`patientQrCode_${i}`, text);
          if (document.getElementById(`QrCode_${i}`)) {
            // 写在延时器或者this.$nextTick()都可以,要不报错

            document.getElementById(`QrCode_${i}`).nextElementSibling.href = document.getElementById(`QrCode_${i}`).children[1].src;

          }
        })
      })
      // console.log(1111)
    },
    // 封装生成二维码的函数
    qrcode(qrcode, text) {
      if (document.getElementById(qrcode)) {
        document.getElementById(qrcode).innerHTML = ''; //这一步是防止重复生成二维码
        this.$nextTick(function () {
          new QRCode(document.getElementById(qrcode), {
            text: text, // 后端返回的url_code
            width: 95,
            height: 95,
            colorDark: '#333333', // 二维码颜色
            colorLight: '#ffffff', // 二维码背景色
            correctLevel: QRCode.CorrectLevel.L,
          })
        })
      }
    },

  }
}
</script>

<style lang="scss" scoped>


@media print {
  .pageBreak {
    page-break-after: always;
  }
  .noPrint {
    display: none;
  }
  /*@page {margin:0 30mm}*/
}
/*  .tableBorder th{*/
/*    font-weight: 400;*/
/*    font-size: 9px;*/
/*    border: 1px solid black;*/
/*  }*/
/*  .tableBorder td{*/
/*    text-align:  center;*/
/*    font-size: 9px;*/
/*    border: 1px solid black;*/
/*    height: 30px;*/
/*  }*/
/*  .fist div{*/
/*    float: left;*/
/*  }*/

.base{
  float: left;
  /*border: 1px solid black;*/
  overflow:hidden;
}
.one{
  float: left;
  border: 1px solid black;
  height: 30px;

  font-size: 13px;
  /*line-height: 17px;*/
}
.headOne{
  float: left;
  border: 1px solid black;
  height: 35px;
  overflow:hidden;
  font-size: 12px;
  /*line-height: 17
}
.one2{
  float: left;
  border: 1px solid black;
  overflow:hidden;
  height: 100px;
  /*line-height: 17px;*/
}
.headOne1{
  float: left;
  border: 0px ;
  height: 35px;
  overflow:hidden;
  font-size: 13px;
  /*line-height: 1
}
.one3{
  float: left;
  border: 1px solid black;
  overflow:hidden;
  height:50px;
  /*line-height: 17px;*/
}
.one1{
  float: left;
  //border: 1px solid black;
  height: 30px;
  overflow:hidden;
  /*line-height: 17px;*/
}
.header{
  position: fixed;
  top: 0;
}
.a4-endwise{
  width: 1000px;
  height: 1455px;
  /*border: 1px #000 solid;*/
  text-align: center;
  font-size: 20px;

}

.ewm{
  position: absolute;
  left: 10px;
  top:-0px;

}
</style>