hwmom-ui/src/views/print/view.vue

<template>
  <div class="content"
       :style="{width: cmToPx(pageWidth)+'px',height: cmToPx(pageHeight)+'px'}">
    <div v-for="i in nodes" class="node" :style="{left:i.position?.x+'px',top: i.position?.y+'px'}">
      <template v-if="i.type === 'text'">
        <TextNode v-bind="i" :isView="true"
                  :pageData="pageData"
                  :pageSize="{width:  cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></TextNode>
      </template>
      <template v-if="i.type === 'image'">
        <ImageNode v-bind="i" :isView="true"
                   :pageData="pageData"
                   :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></ImageNode>
      </template>
      <template v-if="i.type === 'barCode'">
        <BarCodeNode v-bind="i" :isView="true"
                     :pageData="pageData"
                     :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></BarCodeNode>
      </template>
      <template v-if="i.type === 'QRCode'">
        <QRCodeNode v-bind="i" :isView="true"
                    :pageData="pageData"
                    :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></QRCodeNode>
      </template>
      <template v-if="i.type === 'dateTime'">
        <TimeNode v-bind="i" :isView="true"
                  :pageData="pageData"
                  :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></TimeNode>
      </template>

    </div>
  </div>
</template>
<script setup>
import { options } from '@/views/print/tool.js';
import TextNode from '@/views/print/nodes/textNode.vue';
import ImageNode from '@/views/print/nodes/image.vue';
import BarCodeNode from './nodes/barCodeNode.vue';
import QRCodeNode from './nodes/QRCodeNode.vue';
import TimeNode from './nodes/timeNode.vue';

const pageWidth = ref(21);
const pageHeight = ref(29.7);
const pageData = ref({});
const { cmToPx } = options;
const nodes = ref([]);
onMounted(() => {
  nodes.value = JSON.parse(localStorage.getItem('printNodes') || '[]');
  console.log(nodes.value);
});
</script>
<style scoped>
.content {
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.node {
  position: absolute;
}
</style>