kd-aiot-frontend-wms/src/components/print/index.vue

<template>
  <div>
    <!-- 打印窗口 -->
    <el-dialog
      title="打印条码"
      width="1000px"
      :before-close="handleClose"
      :visible.sync="openBarCode"
    >
      <div id="content" ref="print-content">
        <div
          :class="config.putType == 1 ? 'crosswise' : 'lengthways'"
          :style="
            'width:' +
            config.sizeWide +
            'cm;' +
            'height:' +
            config.sizeLong +
            'cm;' +
            'border: 2px black solid;'
          "
        >
          <div class="active-top" v-show="config.putType == 1">
            <div class="span-con">
              <div class="con-top">
                <span
                  :style="
                    'font-size:' +
                    config.fontSizeCode1 +
                    'cm;font-family:' +
                    config.typefaceCode1
                  "
                  >{{ config.code1 }}</span
                >
                <span
                  :style="
                    'font-size:' +
                    config.fontSizeCode2 +
                    'cm;font-family:' +
                    config.typefaceCode2
                  "
                  >{{ config.code2 }}</span
                >
                <span
                  :style="
                    'font-size:' +
                    config.fontSizeCode3 +
                    'cm;font-family:' +
                    config.typefaceCode3
                  "
                  >{{ config.code3 }}</span
                >
              </div>
              <div class="con-bottom">
                <span
                  :style="
                    'font-size:' +
                    config.fontSizeCode4 +
                    'cm;font-family:' +
                    config.typefaceCode4
                  "
                  >{{ config.code4 }}</span
                >
                <span
                  :style="
                    'font-size:' +
                    config.fontSizeCode5 +
                    'cm;font-family:' +
                    config.typefaceCode5
                  "
                  >{{ config.code5 }}</span
                >
                <span
                  :style="
                    'font-size:' +
                    config.fontSizeCode6 +
                    'cm;font-family:' +
                    config.typefaceCode6
                  "
                  >{{ config.code6 }}</span
                >
              </div>
            </div>
            <div class="logoImg">
              <!-- <img src="@/assets/img/codeLogo.png" alt="" /> -->
            </div>
          </div>
          <div class="active-bottom" v-show="config.putType == 1">
            <div class="left-con">
              <div class="span-box">
                <span
                  :style="
                    'font-size:' +
                    config.fontSizeCode7 +
                    'cm;font-family:' +
                    config.typefaceCode7
                  "
                  >{{ config.code7 }}</span
                >
                <span
                  :style="
                    'font-size:' +
                    config.fontSizeCode8 +
                    'cm;font-family:' +
                    config.typefaceCode8
                  "
                  >{{ config.code8 }}</span
                >
              </div>
              <div class="span-box">
                <span
                  :style="
                    'font-size:' +
                    config.fontSizeCode9 +
                    'cm;font-family:' +
                    config.typefaceCode9
                  "
                  >{{ config.code9 }}</span
                >
                <span
                  :style="
                    'font-size:' +
                    config.fontSizeCode10 +
                    'cm;font-family:' +
                    config.typefaceCode10
                  "
                  >{{ config.code10 }}</span
                >
              </div>
              <div class="span-box">
                <span
                  :style="
                    'font-size:' +
                    config.fontSizeCode11 +
                    'cm;font-family:' +
                    config.typefaceCode11
                  "
                  >{{ config.code11 }}</span
                >
                <span
                  :style="
                    'font-size:' +
                    config.fontSizeCode12 +
                    'cm;font-family:' +
                    config.typefaceCode12
                  "
                  >{{ config.code12 }}</span
                >
              </div>
              <div class="span-box">
                <span
                  :style="
                    'font-size:' +
                    config.fontSizeCode13 +
                    'cm;font-family:' +
                    config.typefaceCode13
                  "
                  >{{ config.code13 }}</span
                >
                <span
                  :style="
                    'font-size:' +
                    config.fontSizeCode14 +
                    'cm;font-family:' +
                    config.typefaceCode14
                  "
                  >{{ config.code14 }}</span
                >
              </div>
            </div>
            <div class="vue-qr">
              <vue-qr
                :logoSrc="config.imagePath"
                :text="config.qrCode ? config.qrCode : ''"
                class="vueQrSize"
              ></vue-qr>
            </div>
          </div>
          <div v-show="config.putType == 2" class="vertical-top1">
            <div class="top-img">
              <div class="top-span">
                <p
                  :style="
                    'font-size:' +
                    config.fontSizeCode1 +
                    'cm;font-family:' +
                    config.typefaceCode1
                  "
                >
                  {{ config.code1 }}
                </p>
                <p
                  :style="
                    'font-size:' +
                    config.fontSizeCode2 +
                    'cm;font-family:' +
                    config.typefaceCode2
                  "
                >
                  {{ config.code2 }}
                </p>
              </div>
              <div class="logoImg">
                <!-- <img src="@/assets/img/codeLogo.png" alt="" /> -->
              </div>
            </div>
            <div class="bottom-span">
              <div class="top">
                <span
                  :style="
                    'font-size:' +
                    config.fontSizeCode3 +
                    'cm;font-family:' +
                    config.typefaceCode3
                  "
                  >{{ config.code3 }}</span
                >
                <span
                  :style="
                    'font-size:' +
                    config.fontSizeCode4 +
                    'cm;font-family:' +
                    config.typefaceCode4
                  "
                  >{{ config.code4 }}</span
                >
              </div>
              <div class="bottom">
                <span
                  :style="
                    'font-size:' +
                    config.fontSizeCode5 +
                    'cm;font-family:' +
                    config.typefaceCode5
                  "
                  >{{ config.code5 }}</span
                >
                <span
                  :style="
                    'font-size:' +
                    config.fontSizeCode6 +
                    'cm;font-family:' +
                    config.typefaceCode6
                  "
                  >{{ config.code6 }}</span
                >
              </div>
            </div>
          </div>
          <div v-show="config.putType == 2" class="vertical-bottom1">
            <div class="bot-top">
              <div class="bot-con">
                <span
                  :style="
                    'font-size:' +
                    config.fontSizeCode7 +
                    'cm;font-family:' +
                    config.typefaceCode7
                  "
                  >{{ config.code7 }}</span
                >
                <span
                  :style="
                    'font-size:' +
                    config.fontSizeCode8 +
                    'cm;font-family:' +
                    config.typefaceCode8
                  "
                  >{{ config.code8 }}</span
                >
              </div>
              <div class="bot-con">
                <span
                  :style="
                    'font-size:' +
                    config.fontSizeCode9 +
                    'cm;font-family:' +
                    config.typefaceCode9
                  "
                  >{{ config.code9 }}</span
                >
                <span
                  :style="
                    'font-size:' +
                    config.fontSizeCode10 +
                    'cm;font-family:' +
                    config.typefaceCode10
                  "
                  >{{ config.code10 }}</span
                >
              </div>
              <div class="bot-con">
                <span
                  :style="
                    'font-size:' +
                    config.fontSizeCode11 +
                    'cm;font-family:' +
                    config.typefaceCode11
                  "
                  >{{ config.code11 }}</span
                >
                <span
                  :style="
                    'font-size:' +
                    config.fontSizeCode12 +
                    'cm;font-family:' +
                    config.typefaceCode12
                  "
                  >{{ config.code12 }}</span
                >
              </div>
            </div>
            <div class="bot-bottom">
              <div class="qr-span">
                <span
                  :style="
                    'font-size:' +
                    config.fontSizeCode13 +
                    'cm;font-family:' +
                    config.typefaceCode13
                  "
                  >{{ config.code13 }}</span
                >
                <span
                  :style="
                    'font-size:' +
                    config.fontSizeCode14 +
                    'cm;font-family:' +
                    config.typefaceCode14
                  "
                  >{{ config.code14 }}</span
                >
              </div>
              <div class="vue-qr">
                <vue-qr
                  :logoSrc="config.imagePath"
                  :text="config.qrCode ? config.qrCode : ''"
                  class="vueQrSize"
                ></vue-qr>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="margin-right: 2%">
        <el-button size="small" @click="Print" v-show="!isPrint" type="primary"
          >打印</el-button
        >
        <el-button size="small" @click="handleClose">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import VueQr from 'vue-qr'
export default {
  components: {
    VueQr
  },
  props: {
    config: {
      type: Object,
      default () {
        return config
      }
    },
    openBarCode: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      isPrint: false
    }
  },
  methods: {
    //打印
    Print () {
      this.isPrint = true
      setTimeout(() => {
        this.$print(this.$refs['print-content']) //打印
        this.isPrint = false
      })
    },
    handleClose () {
      this.$emit('update:openBarCode', false)
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  letter-spacing: 0.1px !important;
}
#content {
  display: flex;
  justify-content: center;
  .active-top {
    width: 100%;
    height: 40%;
    display: flex;
    border-bottom: 2px black solid;
    .span-con {
      width: 80%;
      height: 100%;
      padding: 5px 10px;
      .con-top,
      .con-bottom {
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: space-between;
        span {
          font-weight: bold;
          display: inline-block;
          margin-top: 10px;
        }
      }
    }
    .logoImg {
      width: 20%;
      height: 70%;
      margin: 10px;
      text-align: right;
      img {
        width: 100%;
        height: 80%;
      }
    }
  }
  .active-bottom {
    height: 60%;
    display: flex;
    justify-content: space-between;
    .left-con {
      padding: 5px;
      width: 70%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      .span-box {
        margin-top: 10px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        span {
          font-weight: bold;
          display: inline-block;
          margin: 0 5px;
        }
      }
    }
    .vue-qr {
      width: 40%;
      height: 100%;
      border-left: 2px black solid;
      display: flex;
      justify-content: center;
      align-items: center;
      .vueQrSize {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  }
  .vertical-top1 {
    width: 100%;
    height: 40%;
    border-bottom: 2px black solid;
    .top-img {
      width: 100%;
      height: 50%;
      padding: 10px;
      display: flex;
      .top-span {
        width: 70%;
        height: 100%;
        margin-top: 10px;
        p {
          font-weight: bold;
          height: 50%;
          line-height: 50%;
        }
      }
      .logoImg {
        width: 30%;
        height: 80%;
        text-align: right;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .bottom-span {
      padding: 10px;
      width: 100%;
      height: 50%;
      .top,
      .bottom {
        width: 100%;
        height: 50%;
        margin-top: 2%;
        display: flex;
        justify-content: space-between;
        span {
          font-weight: bold;
          display: inline-block;
          height: 50%;
          line-height: 50%;
        }
      }
    }
  }
  .vertical-bottom1 {
    width: 100%;
    height: 60%;
    .bot-top {
      width: 100%;
      height: 55%;
      padding: 10px;
      display: flex;
      flex-wrap: wrap;
      .bot-con {
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-weight: bold;
        margin-top: 5%;
        span {
          font-weight: bold;
        }
      }
    }
    .bot-bottom {
      width: 100%;
      height: 45%;
      display: flex;
      .qr-span {
        width: 60%;
        height: 100%;
        padding: 10px;
        span {
          display: inline-block;
          width: 100%;
          height: 50%;
          font-weight: bold;
          line-height: 50%;
        }
      }
      .vue-qr {
        width: 50%;
        height: 100%;
        border-left: 2px black solid;
        border-top: 2px black solid;

        display: flex;
        justify-content: center;
        align-items: center;
        .vueQrSize {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }
  }
  .crosswise,
  .lengthways {
    transition: all 0.5s;
  }
}
</style>