assetLabelGen/AssetLabel.vue

<template>
  <article class="label">
    <div class="content">
      <img class="qrcode" :src="qrcode_dataURL" />
      <slot> </slot>
    </div>
    <div class="bottom">
      <span class="scanme">Scan the QR code to learn more!</span>
      <span class="barcode-tag">
        <img class="barcode" ref="barcode" />
        <div class="tag">{{ asset.asset_tag }}</div>
      </span>
    </div>
  </article>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import JsBarcode from 'jsbarcode';
import QRCode from 'qrcode';

import snipeit from './snipeit';

@Component
export default class ComputerLabel extends Vue {
  QRCODE_BASE = 'https://inv.claremontmakerspace.org/';

  @Prop(Object) readonly asset: snipeit.Hardware;

  qrcode_dataURL: string | null = null;

  async mounted() {
    this.qrcode_dataURL = await QRCode.toDataURL(
      this.QRCODE_BASE + this.asset.asset_tag,
      {
        margin: 0,
      }
    );

    JsBarcode(this.$refs.barcode, this.asset.asset_tag, {
      displayValue: false,
      margin: 0,
    });
  }
}
</script>

<style>
.label {
  background-size: cover;
  page-break-after: always;
  clear: both;
  width: calc(146.64pt - 4.32pt);
  height: calc(69.12pt - 4.08pt);
  position: relative;
  padding-top: 1.9mm;

  /* overflow: hidden; */
}

@media screen {
  .label {
    border: 1px solid red;
  }
}

.content {
  display: flex;
  height: 70%;
}

.qrcode {
  height: 100%;
}

.text-content {
  margin-left: 1ex;
}

.bottom {
  margin-top: 2%;
  display: flex;
  height: 26%;
  padding-right: 1.2mm;
}

.scanme {
  font-size: 10px;
}

.barcode-tag {
  width: 90%;

  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 7px;
}

.barcode {
  width: 90%;
  height: 60%;
}
</style>