kd-aiot-frontend/src/components/print/indexMultiple.vue

<template>
  <div>
    <!-- 打印窗口 -->
    <el-dialog
      title="打印条码"
      :before-close="handleClose"
      :visible.sync="openBarCode"
      width="1000px"
    >
      <div id="content" ref="print-content">
        <div
          v-for="(item, index) in config"
          :key="index"
          :class="item.putType == 1 ? 'crosswise' : 'lengthways'"
          :style="
            'width:' +
            item.sizeWide +
            'cm;' +
            'height:' +
            item.sizeLong +
            'cm;' +
            'border: 2px black solid;'
          "
        >
          <div class="active-top" v-show="item.putType == 1">
            <div class="span-con">
              <div class="con-top">
                <span
                  :style="
                    'font-size:' +
                    item.useModeList[0].fontSize +
                    'cm;font-family:' +
                    fontTypeObj[item.useModeList[0].fontType]
                  "
                  >{{ item.useModeList[0].sampleData }}</span
                >
                <span
                  :style="
                    'font-size:' +
                    item.useModeList[1].fontSize +
                    'cm;font-family:' +
                    fontTypeObj[item.useModeList[1].fontType]
                  "
                  >{{ item.useModeList[1].sampleData }}</span
                >
                <span
                  :style="
                    'font-size:' +
                    item.useModeList[2].fontSize +
                    'cm;font-family:' +
                    fontTypeObj[item.useModeList[2].fontType]
                  "
                  >{{ item.useModeList[2].sampleData }}</span
                >
              </div>
              <div class="con-bottom">
                <span
                  :style="
                    'font-size:' +
                    item.useModeList[3].fontSize +
                    'cm;font-family:' +
                    fontTypeObj[item.useModeList[3].fontType]
                  "
                  >{{ item.useModeList[3].sampleData }}</span
                >
                <span
                  :style="
                    'font-size:' +
                    item.useModeList[4].fontSize +
                    'cm;font-family:' +
                    fontTypeObj[item.useModeList[4].fontType]
                  "
                  >{{ item.useModeList[4].sampleData }}</span
                >
                <span
                  :style="
                    'font-size:' +
                    item.useModeList[5].fontSize +
                    'cm;font-family:' +
                    fontTypeObj[item.useModeList[5].fontType]
                  "
                  >{{ item.useModeList[5].sampleData }}</span
                >
              </div>
            </div>
            <div class="logoImg">
              <!-- <img src="@/assets/img/codeLogo.png" alt="" /> -->
            </div>
          </div>
          <div class="active-bottom" v-show="item.putType == 1">
            <div class="left-con">
              <div class="span-box">
                <span
                  :style="
                    'font-size:' +
                    item.useModeList[6].fontSize +
                    'cm;font-family:' +
                    fontTypeObj[item.useModeList[6].fontType]
                  "
                  >{{ item.useModeList[6].sampleData }}</span
                >
                <span
                  :style="
                    'font-size:' +
                    item.useModeList[7].fontSize +
                    'cm;font-family:' +
                    fontTypeObj[item.useModeList[7].fontType]
                  "
                  >{{ item.useModeList[7].sampleData }}</span
                >
              </div>
              <div class="span-box">
                <span
                  :style="
                    'font-size:' +
                    item.useModeList[8].fontSize +
                    'cm;font-family:' +
                    fontTypeObj[item.useModeList[8].fontType]
                  "
                  >{{ item.useModeList[8].sampleData }}</span
                >
                <span
                  :style="
                    'font-size:' +
                    item.useModeList[9].fontSize +
                    'cm;font-family:' +
                    fontTypeObj[item.useModeList[9].fontType]
                  "
                  >{{ item.useModeList[9].sampleData }}</span
                >
              </div>
              <div class="span-box">
                <span
                  :style="
                    'font-size:' +
                    item.useModeList[10].fontSize +
                    'cm;font-family:' +
                    fontTypeObj[item.useModeList[10].fontType]
                  "
                  >{{ item.useModeList[10].sampleData }}</span
                >
                <span
                  :style="
                    'font-size:' +
                    item.useModeList[11].fontSize +
                    'cm;font-family:' +
                    fontTypeObj[item.useModeList[11].fontType]
                  "
                  >{{ item.useModeList[11].sampleData }}</span
                >
              </div>
              <div class="span-box">
                <span
                  :style="
                    'font-size:' +
                    item.useModeList[12].fontSize +
                    'cm;font-family:' +
                    fontTypeObj[item.useModeList[12].fontType]
                  "
                  >{{ item.useModeList[12].sampleData }}</span
                >
                <span
                  :style="
                    'font-size:' +
                    item.useModeList[13].fontSize +
                    'cm;font-family:' +
                    fontTypeObj[item.useModeList[13].fontType]
                  "
                  >{{ item.useModeList[13].sampleData }}</span
                >
              </div>
            </div>
            <div class="vue-qr">
              <vue-qr
                :logoSrc="item.imagePath"
                :text="item.qrCode ? item.qrCode : ''"
                class="vueQrSize"
              ></vue-qr>
            </div>
          </div>
          <div v-show="item.putType == 2" class="vertical-top1">
            <div class="top-img">
              <div class="top-span">
                <p
                  :style="
                    'font-size:' +
                    item.useModeList[0].fontSize +
                    'cm;font-family:' +
                    fontTypeObj[item.useModeList[0].fontType]
                  "
                >
                  {{ item.useModeList[0].sampleData }}
                </p>
                <p
                  :style="
                    'font-size:' +
                    item.useModeList[1].fontSize +
                    'cm;font-family:' +
                    fontTypeObj[item.useModeList[1].fontType]
                  "
                >
                  {{ item.useModeList[1].sampleData }}
                </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:' +
                    item.useModeList[2].fontSize +
                    'cm;font-family:' +
                    fontTypeObj[item.useModeList[2].fontType]
                  "
                  >{{ item.useModeList[2].sampleData }}</span
                >
                <span
                  :style="
                    'font-size:' +
                    item.useModeList[3].fontSize +
                    'cm;font-family:' +
                    fontTypeObj[item.useModeList[3].fontType]
                  "
                  >{{ item.useModeList[3].sampleData }}</span
                >
              </div>
              <div class="bottom">
                <span
                  :style="
                    'font-size:' +
                    item.useModeList[4].fontSize +
                    'cm;font-family:' +
                    fontTypeObj[item.useModeList[4].fontType]
                  "
                  >{{ item.useModeList[4].sampleData }}</span
                >
                <span
                  :style="
                    'font-size:' +
                    item.useModeList[5].fontSize +
                    'cm;font-family:' +
                    fontTypeObj[item.useModeList[5].fontType]
                  "
                  >{{ item.useModeList[5].sampleData }}</span
                >
              </div>
            </div>
          </div>
          <div v-show="item.putType == 2" class="vertical-bottom1">
            <div class="bot-top">
              <div class="bot-con">
                <span
                  :style="
                    'font-size:' +
                    item.useModeList[6].fontSize +
                    'cm;font-family:' +
                    fontTypeObj[item.useModeList[6].fontType]
                  "
                  >{{ item.useModeList[6].sampleData }}</span
                >
                <span
                  :style="
                    'font-size:' +
                    item.useModeList[7].fontSize +
                    'cm;font-family:' +
                    fontTypeObj[item.useModeList[7].fontType]
                  "
                  >{{ item.useModeList[7].sampleData }}</span
                >
              </div>
              <div class="bot-con">
                <span
                  :style="
                    'font-size:' +
                    item.useModeList[8].fontSize +
                    'cm;font-family:' +
                    fontTypeObj[item.useModeList[8].fontType]
                  "
                  >{{ item.useModeList[8].sampleData }}</span
                >
                <span
                  :style="
                    'font-size:' +
                    item.useModeList[9].fontSize +
                    'cm;font-family:' +
                    fontTypeObj[item.useModeList[9].fontType]
                  "
                  >{{ item.useModeList[9].sampleData }}</span
                >
              </div>
              <div class="bot-con">
                <span
                  :style="
                    'font-size:' +
                    item.useModeList[10].fontSize +
                    'cm;font-family:' +
                    fontTypeObj[item.useModeList[10].fontType]
                  "
                  >{{ item.useModeList[10].sampleData }}</span
                >
                <span
                  :style="
                    'font-size:' +
                    item.useModeList[11].fontSize +
                    'cm;font-family:' +
                    fontTypeObj[item.useModeList[11].fontType]
                  "
                  >{{ item.useModeList[11].sampleData }}</span
                >
              </div>
            </div>
            <div class="bot-bottom">
              <div class="qr-span">
                <span
                  :style="
                    'font-size:' +
                    item.useModeList[12].fontSize +
                    'cm;font-family:' +
                    fontTypeObj[item.useModeList[12].fontType]
                  "
                  >{{ item.useModeList[12].sampleData }}</span
                >
                <span
                  :style="
                    'font-size:' +
                    item.useModeList[13].fontSize +
                    'cm;font-family:' +
                    fontTypeObj[item.useModeList[13].fontType]
                  "
                  >{{ item.useModeList[13].sampleData }}</span
                >
              </div>
              <div class="vue-qr">
                <vue-qr
                  :logoSrc="item.imagePath"
                  :text="item.qrCode ? item.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: Array,
        default() {
          return [];
        }
      },
      openBarCode: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        isPrint: false,
        fontTypeObj: { 1: '宋体', 2: '微软雅黑', 3: 'Arial' }
      };
    },
    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;
    flex-direction: column;
    align-items: 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;
        .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;
          .vueQrSize {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
      }
    }
    .crosswise,
    .lengthways {
      margin-bottom: 200px;
      // &:nth-child(2n) {
      //   margin-bottom: 100px;
      // }
      transition: all 0.5s;
    }
  }
</style>