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

<template>
  <div style="overflow:hidden;">
    <div class="top">
      <div style="line-height: 60px;margin-left: 12px;">
        <el-button-group>
          <el-button :type="pageType === 'A3' ? 'primary' : ''" @click="setPage('A3',42,29.7)">A3</el-button>
          <el-button :type="pageType === 'A4' ? 'primary' : ''" @click="setPage('A4',21,29.7)">A4</el-button>
          <el-button :type="pageType === 'A5' ? 'primary' : ''" @click="setPage('A5',14.8,21)">A5</el-button>
          <el-button :type="pageType === 'B3' ? 'primary' : ''" @click="setPage('B3',35.3,50)">B3</el-button>
          <el-button :type="pageType === 'B4' ? 'primary' : ''" @click="setPage('B4',25,35.2)">B4</el-button>
          <el-button :type="pageType === 'B5' ? 'primary' : ''" @click="setPage('B5',17.6,25)">B5</el-button>
        </el-button-group>
        <el-button @click="zoomChange(-0.1)" icon="ZoomOut" circle style="margin-left: 12px;" />
        <el-input v-model="zoomInput" disabled style="margin-left: 8px;width:100px" />
        <el-button @click="zoomChange(0.1)" icon="ZoomIn" circle style="margin-left: 8px;" />
        <el-button type="primary" @click="view" style="margin-left: 12px;">预览</el-button>
        <el-button type="primary" @click="save" style="margin-left: 12px;">保存</el-button>
        <el-button type="primary" @click="clear" style="margin-left: 12px;">清空</el-button>
      </div>
    </div>
    <div class="bottom">
      <div class="leftPanel">
        <h4>基础组件</h4>
        <el-tag :draggable="true" @dragstart="onDragStart($event, 'text',pid)" class="mx-1" size="large">文字</el-tag>
        <el-tag :draggable="true" @dragstart="onDragStart($event, 'image',pid)" class="mx-1" size="large">图片</el-tag>
        <el-tag :draggable="true" @dragstart="onDragStart($event, 'barCode',pid)" class="mx-1" size="large">条形码
        </el-tag>
        <el-tag :draggable="true" @dragstart="onDragStart($event, 'QRCode',pid)" class="mx-1" size="large">二维码
        </el-tag>
        <el-tag :draggable="true" @dragstart="onDragStart($event, 'dateTime',pid)" class="mx-1" size="large">日期时间
        </el-tag>
        <el-tag :draggable="true" @dragstart="onDragStart($event, 'transverseLine',pid)" class="mx-1" size="large">横线
        </el-tag>
        <el-tag :draggable="true" @dragstart="onDragStart($event, 'verticalLine',pid)" class="mx-1" size="large">竖线
        </el-tag>
        <el-tag :draggable="true" @dragstart="onDragStart($event, 'rectangle',pid)" class="mx-1" size="large">矩形
        </el-tag>
        <el-tag :draggable="true" @dragstart="onDragStart($event, 'circle',pid)" class="mx-1" size="large">圆形
        </el-tag>
        <h4>表单组件</h4>
      </div>
      <div class="content" @drop="onDrop">
        <div class="flowArea" :style="{width:zoom * cmToPx(pageWidth)+'px',height:zoom * cmToPx(pageHeight)+'px'}">
          <VueFlow :autoPanSpeed="0" :min-zoom="0.01" ref="flowRef" v-model:nodes="nodes" v-model:edges="edges"
                   :zoomOnScroll="false"
                   :snapToGrid="isSnapToGrid" :snapGrid="[cmToPx(0.5), cmToPx(0.5)]"
                   :panOnDrag="false"
                   fit-view-on-init
                   default-marker-color="#409EFF"
                   @dragover="onDragOver"
                   @node-click="logEvent('click', $event)"
                   @pane-click="logEvent('paneClick', $event)"
                   @node-drag-start="logEvent('nodeDrag', $event)"
          >
            <Background variant="lines" :size="0.4" :gap="cmToPx(0.5)" pattern-color="#ddd"
                        style="background-color: #fff" />

            <template #node-area="areaNodeProps">
              <AreaNode v-bind="areaNodeProps"
                        :pageData="{width: cmToPx(pageWidth)+'px',height:  cmToPx(pageHeight)+'px'}"></AreaNode>
            </template>
            <template #node-text="textNodeProps">
              <TextNode v-bind="textNodeProps"
                        :pageSize="{width:zoom * cmToPx(pageWidth) ,height:zoom * cmToPx(pageHeight) }"></TextNode>
            </template>
            <template #node-image="imageNodeProps">
              <ImageNode v-bind="imageNodeProps"
                         :pageSize="{width:zoom * cmToPx(pageWidth) ,height:zoom * cmToPx(pageHeight) }"></ImageNode>
            </template>
            <template #node-barCode="barCodeNodeProps">
              <BarCodeNode v-bind="barCodeNodeProps"
                           :pageSize="{width:zoom * cmToPx(pageWidth) ,height:zoom * cmToPx(pageHeight) }"></BarCodeNode>
            </template>
            <template #node-QRCode="QRCodeNodeProps">
              <QRCodeNode v-bind="QRCodeNodeProps"
                          :pageSize="{width:zoom * cmToPx(pageWidth) ,height:zoom * cmToPx(pageHeight) }"></QRCodeNode>
            </template>
            <template #node-dateTime="dateTimeNodeProps">
              <TimeNode v-bind="dateTimeNodeProps"
                        :pageSize="{width:zoom * cmToPx(pageWidth) ,height:zoom * cmToPx(pageHeight) }"></TimeNode>
            </template>
          </VueFlow>
        </div>
      </div>
      <div class="rightPanel" style="padding: 8px">
        <el-form :model="nodeAttrForm" label-width="auto" style="max-width: 600px">
          <el-form-item label="名称" v-if="Object.keys(nodeAttrForm).includes('name')">
            <el-input v-model="nodeAttrForm.name" style="width: 100%" />
          </el-form-item>
          <el-form-item label="字段名" v-if="Object.keys(nodeAttrForm).includes('field')">
            <el-input v-model="nodeAttrForm.field" style="width: 100%" />
          </el-form-item>
          <el-form-item label="缺省显示" v-if="Object.keys(nodeAttrForm).includes('default')">
            <el-input v-model="nodeAttrForm.default" style="width: 100%" />
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
  <el-dialog v-model="isView" title="预览">
    <div id="printInfo" v-if="isView">
      <View />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" v-print="printInfoObj">打印</el-button>
        <el-button @click="isView = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { v4 as uuidv4 } from 'uuid';
import { useRouter } from 'vue-router';
import { VueFlow, useVueFlow } from '@vue-flow/core';
import { Background } from '@vue-flow/background';
import { StarFilled } from '@element-plus/icons-vue';
import tool, { options } from './tool';
import AreaNode from './nodes/areaNode.vue';
import TextNode from './nodes/textNode.vue';
import ImageNode from './nodes/image.vue';
import BarCodeNode from './nodes/barCodeNode.vue';
import QRCodeNode from './nodes/QRCodeNode.vue';
import TimeNode from './nodes/timeNode.vue';
import View from './view.vue';

const router = useRouter();
// 获取自定义的方法
const { onDragStart, onDrop, onDragOver } = tool();
const { cmToPx } = options;

const isView = ref(false);
const flowRef = ref();
const isSnapToGrid = ref(true);
const pageWidth = ref(21);
const pageHeight = ref(29.7);
const pageType = ref('A4');
const zoom = ref(1);
const zoomInput = ref('100%');
const nodeAttrForm = ref({});
const pid = ref(`area_${uuidv4().replaceAll('-', '_')}`);

const logEvent = async (eventname, event) => {
  switch (eventname) {
    case 'paneClick':
      nodeAttrForm.value = {};
      break;
    case 'click':
      nodeAttrForm.value = event.node.data.options;
      break;
    case 'nodeDrag':
      if (event.nodes.length === 1) {
        nodeAttrForm.value = event.node.data.options;
      } else {
        nodeAttrForm.value = {};
      }
      break;
  }
};
const nodes = ref([{
  id: pid.value,
  name: 'area',
  type: 'area',
  position: {
    x: 0,
    y: 0
  },
  data: {}
}]);
const edges = ref([]);

const setPage = (type, width, height) => {
  pageType.value = type;
  pageHeight.value = height;
  pageWidth.value = width;
};

const zoomChange = (e) => {
  console.log(flowRef.value.autoPanSpeed);
  flowRef.value.viewport.x = 0;
  flowRef.value.viewport.y = 0;
  let num = zoom.value;
  num += e;
  zoom.value = parseFloat(Math.min(2, Math.max(0.2, num)).toFixed(2));
  zoomInput.value = (zoom.value * 100).toFixed(0) + '%';
  flowRef.value.setTransform({
    x: 0,
    y: 0,
    zoom: zoom.value
  });
};

const view = () => {
  localStorage.setItem('printNodes', JSON.stringify(nodes.value));
  isView.value = true;

};
const save = () => {
  localStorage.setItem('printNodes', JSON.stringify(nodes.value));
};
const clear = () => {
};

onMounted(() => {
  flowRef.value.onInit(() => {
    flowRef.value.setTransform({
      x: 0,
      y: 0,
      zoom: 1
    });
  });
});
watch(() => flowRef.value?.viewport, () => {
  if (flowRef.value && (flowRef.value.viewport.x !== 0 || flowRef.value.viewport.y !== 0)) {
    console.log('重置原点');
    flowRef.value.setTransform({
      x: 0,
      y: 0,
      zoom: zoom.value
    });
  }
}, { deep: true });

const toggleSnapToGrid = (e) => {
  if (e.key === 'Alt') {
    isSnapToGrid.value = false;
  }
};
const keyup = () => {
  isSnapToGrid.value = true;
};
window.addEventListener('keydown', toggleSnapToGrid);
window.addEventListener('keyup', keyup);
// flow内置方法
const {
  updateNode
} = useVueFlow();
const printInfoObj = {
  id: 'printInfo',
  preview: false,  // 是否开启预览
  beforeOpenCallback(vue) {
    console.log('触发打印工具打开前回调');
  },
  openCallback(vue) {
    console.log('触发打印工具打开的回调');
  },
  closeCallback() {
    console.log('触发关闭打印工具回调');
  },
  previewBeforeOpenCallback() {
    console.log('触发预览前回调');
  },
  previewOpenCallback() {
    console.log('触发预览的回调');
  }
};

</script>
<style lang="less" scoped>
:deep(.vue-flow__node-area) {
  z-index: -1 !important;
  pointer-events: none !important;
}

:deep(.el-tag) {
  margin-bottom: 8px;
}

.top {
  height: 64px;
  margin: 8px 8px 0 8px;
  border: 1px solid #ccc;
  width: calc(100% - 16px);
  display: inline-block;
}

.bottom {
  height: calc(100vh - 64px - 16px - 8px);
}


.leftPanel, .rightPanel {
  vertical-align: top;
  display: inline-block;
  width: 300px;
  height: 100%;
  margin: 8px 8px 0;
  overflow: auto;
  border: 1px solid #ccc;
}

.content {
  vertical-align: top;
  display: inline-block;
  width: calc(100vw - 300px - 300px - 16px - 16px);
  height: 100%;
  margin-top: 8px;
  border: 1px solid #ccc;
  overflow: auto;

  &::-webkit-scrollbar {
    display: none;
  }
}

.flowArea {
  border-right: 1px solid #ccc;
}
</style>