修改看板和首页
suixy
3 months ago
parent
23f49449aa
commit
eae37c7f7d
@ -0,0 +1,155 @@
|
|||||||
|
<template>
|
||||||
|
<div class="card">
|
||||||
|
<div class="head">{{title}}</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="left">
|
||||||
|
<div class="inner">
|
||||||
|
<div>
|
||||||
|
<div class="value" :class="items.color">{{ items[0].value }}</div>
|
||||||
|
<div class="label">{{ items[0].label }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="inner">
|
||||||
|
<div class="item"></div>
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in items.slice(1)"
|
||||||
|
:key="index"
|
||||||
|
class="item"
|
||||||
|
>
|
||||||
|
<div class="value" :class="item.color">
|
||||||
|
<span>
|
||||||
|
{{ item.label }}
|
||||||
|
</span>
|
||||||
|
<span style="font-weight: bold;font-size: 22px;margin-left: 12px;">
|
||||||
|
{{ item.value }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed } from 'vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
items: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.red {
|
||||||
|
color: #f56c6c;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.green {
|
||||||
|
color: #67c23a;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.blue {
|
||||||
|
color: #409eff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
height: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 8px;
|
||||||
|
position: relative;
|
||||||
|
margin-right: 16px;
|
||||||
|
&:last-child{
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.head{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: #5085FD;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 0.8vw;
|
||||||
|
width: 4vw;
|
||||||
|
height: 1.5vw;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.5vw;
|
||||||
|
border-bottom-right-radius: 1.5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
height: calc(100% - 2vw);
|
||||||
|
margin: 1vw 0;
|
||||||
|
width: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
border-right: 1px solid #ddd;
|
||||||
|
|
||||||
|
.inner {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #909399;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.right {
|
||||||
|
height: calc(100% - 2vw);
|
||||||
|
margin: 1vw 0;
|
||||||
|
width: 50%;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
|
||||||
|
.inner {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.2;
|
||||||
|
padding: 0.2vw 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -1,718 +0,0 @@
|
|||||||
<template>
|
|
||||||
|
|
||||||
<div style="width: 100%;height: 100vh;overflow: hidden">
|
|
||||||
<div class="left">
|
|
||||||
<div id="printInfo" ref="printRef">
|
|
||||||
<div class="content" v-for=" pageData in pageDatas"
|
|
||||||
:style="{pageBreakAfter: 'always',width: cmToPx(pageWidth)+'px',height: cmToPx(pageHeight)+'px',marginBottom:'4px'}">
|
|
||||||
<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" :isPrint="isPrint" :pageData="pageData"
|
|
||||||
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></TextNode>
|
|
||||||
</template>
|
|
||||||
<template v-if="i.type === 'image'">
|
|
||||||
<ImageNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
|
|
||||||
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></ImageNode>
|
|
||||||
</template>
|
|
||||||
<template v-if="i.type === 'barCode'">
|
|
||||||
<BarCodeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
|
|
||||||
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></BarCodeNode>
|
|
||||||
</template>
|
|
||||||
<template v-if="i.type === 'QRCode'">
|
|
||||||
<QRCodeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
|
|
||||||
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></QRCodeNode>
|
|
||||||
</template>
|
|
||||||
<template v-if="i.type === 'dateTime'">
|
|
||||||
<TimeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
|
|
||||||
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></TimeNode>
|
|
||||||
</template>
|
|
||||||
<template v-if="i.type === 'select'">
|
|
||||||
<SelectNode :isView="true" :isPrint="isPrint" :pageData="pageData"
|
|
||||||
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"
|
|
||||||
v-bind="i"></SelectNode>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="right">
|
|
||||||
<el-dropdown split-button type="primary" @click="printFun" @command="switchPrinter" style="margin-right: 8px;">
|
|
||||||
{{ printName() }}
|
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu>
|
|
||||||
<el-dropdown-item :command="-1">导出PDF</el-dropdown-item>
|
|
||||||
<el-dropdown-item divided :command="0">本地打印</el-dropdown-item>
|
|
||||||
<el-dropdown-item :divided="k===0" :command="i.id" v-for=" (i,k) in printers">{{ i.name }}
|
|
||||||
</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="printArea" v-if="printPngList.length>0">
|
|
||||||
<div
|
|
||||||
v-for="(url, index) in printPngList"
|
|
||||||
:key="index"
|
|
||||||
class="print-page"
|
|
||||||
>
|
|
||||||
<img :src="url" class="print-image" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
|
|
||||||
import html2canvas from 'html2canvas';
|
|
||||||
import jsPDF from 'jspdf';
|
|
||||||
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';
|
|
||||||
import SelectNode from './nodes/selectNode.vue';
|
|
||||||
import { useRoute } from 'vue-router';
|
|
||||||
import { isJSON } from '@/utils/scrin.js';
|
|
||||||
|
|
||||||
const route = useRoute();
|
|
||||||
const printType = ref(0);
|
|
||||||
const printers = ref([
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: '网络打印机1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: '网络打印机2'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: '网络打印机3'
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
const printPngList = ref([]);
|
|
||||||
const isView = ref(true);
|
|
||||||
|
|
||||||
const isPrint = ref(false);
|
|
||||||
const printRef = ref();
|
|
||||||
const pageWidth = ref(21);
|
|
||||||
const pageHeight = ref(29.7);
|
|
||||||
const pageDatas = ref([{}, {}]);
|
|
||||||
const { cmToPx } = options;
|
|
||||||
const nodes = ref([]);
|
|
||||||
let printNode = `[
|
|
||||||
{
|
|
||||||
"id": "area_d14a13ad_1a78_4171_b54f_93d18abd528d",
|
|
||||||
"type": "area",
|
|
||||||
"dimensions": {
|
|
||||||
"width": 794,
|
|
||||||
"height": 1123
|
|
||||||
},
|
|
||||||
"computedPosition": {
|
|
||||||
"x": 0,
|
|
||||||
"y": 0,
|
|
||||||
"z": 0
|
|
||||||
},
|
|
||||||
"handleBounds": {
|
|
||||||
"source": null,
|
|
||||||
"target": null
|
|
||||||
},
|
|
||||||
"selected": false,
|
|
||||||
"dragging": false,
|
|
||||||
"resizing": false,
|
|
||||||
"initialized": false,
|
|
||||||
"isParent": true,
|
|
||||||
"position": {
|
|
||||||
"x": 0,
|
|
||||||
"y": 0
|
|
||||||
},
|
|
||||||
"data": {},
|
|
||||||
"events": {},
|
|
||||||
"name": "area"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "text_1902a5ff_d7fc_4750_b634_8a88868f3ddb",
|
|
||||||
"type": "text",
|
|
||||||
"dimensions": {
|
|
||||||
"width": 94,
|
|
||||||
"height": 19
|
|
||||||
},
|
|
||||||
"computedPosition": {
|
|
||||||
"x": 151.1811023622047,
|
|
||||||
"y": 37.79527559055118,
|
|
||||||
"z": 1
|
|
||||||
},
|
|
||||||
"handleBounds": {
|
|
||||||
"source": null,
|
|
||||||
"target": null
|
|
||||||
},
|
|
||||||
"selected": false,
|
|
||||||
"dragging": false,
|
|
||||||
"resizing": false,
|
|
||||||
"initialized": false,
|
|
||||||
"isParent": false,
|
|
||||||
"position": {
|
|
||||||
"x": 151.1811023622047,
|
|
||||||
"y": 37.79527559055118
|
|
||||||
},
|
|
||||||
"data": {
|
|
||||||
"options": {
|
|
||||||
"default": "供应商",
|
|
||||||
"border": [
|
|
||||||
{
|
|
||||||
"type": "top",
|
|
||||||
"isShow": false,
|
|
||||||
"width": 1,
|
|
||||||
"color": "#000",
|
|
||||||
"borderType": "solid"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "right",
|
|
||||||
"isShow": false,
|
|
||||||
"width": 1,
|
|
||||||
"color": "#000",
|
|
||||||
"borderType": "solid"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "bottom",
|
|
||||||
"isShow": false,
|
|
||||||
"width": 1,
|
|
||||||
"color": "#000",
|
|
||||||
"borderType": "solid"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "left",
|
|
||||||
"isShow": false,
|
|
||||||
"width": 1,
|
|
||||||
"color": "#000",
|
|
||||||
"borderType": "solid"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"outputData": {}
|
|
||||||
},
|
|
||||||
"events": {},
|
|
||||||
"name": "text",
|
|
||||||
"parentNode": "area_d14a13ad_1a78_4171_b54f_93d18abd528d",
|
|
||||||
"extent": "parent",
|
|
||||||
"style": {
|
|
||||||
"width": "94px",
|
|
||||||
"height": "19px"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "text_899234fc_9ace_49c3_8127_fadeabcbd23d",
|
|
||||||
"type": "text",
|
|
||||||
"dimensions": {
|
|
||||||
"width": 94,
|
|
||||||
"height": 19
|
|
||||||
},
|
|
||||||
"computedPosition": {
|
|
||||||
"x": 150.97637795275588,
|
|
||||||
"y": 56.69291338582677,
|
|
||||||
"z": 1
|
|
||||||
},
|
|
||||||
"handleBounds": {
|
|
||||||
"source": null,
|
|
||||||
"target": null
|
|
||||||
},
|
|
||||||
"selected": false,
|
|
||||||
"dragging": false,
|
|
||||||
"resizing": false,
|
|
||||||
"initialized": false,
|
|
||||||
"isParent": false,
|
|
||||||
"position": {
|
|
||||||
"x": 150.97637795275588,
|
|
||||||
"y": 56.69291338582677
|
|
||||||
},
|
|
||||||
"data": {
|
|
||||||
"options": {
|
|
||||||
"default": "客户名称",
|
|
||||||
"border": [
|
|
||||||
{
|
|
||||||
"type": "top",
|
|
||||||
"isShow": false,
|
|
||||||
"width": 1,
|
|
||||||
"color": "#000",
|
|
||||||
"borderType": "solid"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "right",
|
|
||||||
"isShow": false,
|
|
||||||
"width": 1,
|
|
||||||
"color": "#000",
|
|
||||||
"borderType": "solid"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "bottom",
|
|
||||||
"isShow": false,
|
|
||||||
"width": 1,
|
|
||||||
"color": "#000",
|
|
||||||
"borderType": "solid"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "left",
|
|
||||||
"isShow": false,
|
|
||||||
"width": 1,
|
|
||||||
"color": "#000",
|
|
||||||
"borderType": "solid"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"outputData": {}
|
|
||||||
},
|
|
||||||
"events": {},
|
|
||||||
"name": "text",
|
|
||||||
"parentNode": "area_d14a13ad_1a78_4171_b54f_93d18abd528d",
|
|
||||||
"extent": "parent",
|
|
||||||
"style": {
|
|
||||||
"width": "94px",
|
|
||||||
"height": "19px"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "text_8da299d4_a35b_4ba9_bfac_860c200b6cf3",
|
|
||||||
"type": "text",
|
|
||||||
"dimensions": {
|
|
||||||
"width": 94,
|
|
||||||
"height": 19
|
|
||||||
},
|
|
||||||
"computedPosition": {
|
|
||||||
"x": 245.66929133858267,
|
|
||||||
"y": 56.69291338582677,
|
|
||||||
"z": 1
|
|
||||||
},
|
|
||||||
"handleBounds": {
|
|
||||||
"source": null,
|
|
||||||
"target": null
|
|
||||||
},
|
|
||||||
"selected": false,
|
|
||||||
"dragging": false,
|
|
||||||
"resizing": false,
|
|
||||||
"initialized": false,
|
|
||||||
"isParent": false,
|
|
||||||
"position": {
|
|
||||||
"x": 245.66929133858267,
|
|
||||||
"y": 56.69291338582677
|
|
||||||
},
|
|
||||||
"data": {
|
|
||||||
"options": {
|
|
||||||
"field": "name",
|
|
||||||
"default": "",
|
|
||||||
"border": [
|
|
||||||
{
|
|
||||||
"type": "top",
|
|
||||||
"isShow": false,
|
|
||||||
"width": 1,
|
|
||||||
"color": "#000",
|
|
||||||
"borderType": "solid"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "right",
|
|
||||||
"isShow": false,
|
|
||||||
"width": 1,
|
|
||||||
"color": "#000",
|
|
||||||
"borderType": "solid"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "bottom",
|
|
||||||
"isShow": false,
|
|
||||||
"width": 1,
|
|
||||||
"color": "#000",
|
|
||||||
"borderType": "solid"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "left",
|
|
||||||
"isShow": false,
|
|
||||||
"width": 1,
|
|
||||||
"color": "#000",
|
|
||||||
"borderType": "solid"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"outputData": {}
|
|
||||||
},
|
|
||||||
"events": {},
|
|
||||||
"name": "text",
|
|
||||||
"parentNode": "area_d14a13ad_1a78_4171_b54f_93d18abd528d",
|
|
||||||
"extent": "parent",
|
|
||||||
"style": {
|
|
||||||
"width": "94px",
|
|
||||||
"height": "19px"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "text_5a3a87dd_1697_43a1_9678_f20421e1f3df",
|
|
||||||
"type": "text",
|
|
||||||
"dimensions": {
|
|
||||||
"width": 396,
|
|
||||||
"height": 19
|
|
||||||
},
|
|
||||||
"computedPosition": {
|
|
||||||
"x": 245.66929133858267,
|
|
||||||
"y": 37.79527559055118,
|
|
||||||
"z": 1
|
|
||||||
},
|
|
||||||
"handleBounds": {
|
|
||||||
"source": null,
|
|
||||||
"target": null
|
|
||||||
},
|
|
||||||
"selected": false,
|
|
||||||
"dragging": false,
|
|
||||||
"resizing": false,
|
|
||||||
"initialized": false,
|
|
||||||
"isParent": false,
|
|
||||||
"position": {
|
|
||||||
"x": 245.66929133858267,
|
|
||||||
"y": 37.79527559055118
|
|
||||||
},
|
|
||||||
"data": {
|
|
||||||
"options": {
|
|
||||||
"field": "DONGLONG HOME TEXTILE CO..,LTD.",
|
|
||||||
"default": "DONGLONG HOME TEXTILE CO..,LTD.",
|
|
||||||
"border": [
|
|
||||||
{
|
|
||||||
"type": "top",
|
|
||||||
"isShow": false,
|
|
||||||
"width": 1,
|
|
||||||
"color": "#000",
|
|
||||||
"borderType": "solid"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "right",
|
|
||||||
"isShow": false,
|
|
||||||
"width": 1,
|
|
||||||
"color": "#000",
|
|
||||||
"borderType": "solid"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "bottom",
|
|
||||||
"isShow": false,
|
|
||||||
"width": 1,
|
|
||||||
"color": "#000",
|
|
||||||
"borderType": "solid"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "left",
|
|
||||||
"isShow": false,
|
|
||||||
"width": 1,
|
|
||||||
"color": "#000",
|
|
||||||
"borderType": "solid"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"outputData": {}
|
|
||||||
},
|
|
||||||
"events": {},
|
|
||||||
"name": "text",
|
|
||||||
"parentNode": "area_d14a13ad_1a78_4171_b54f_93d18abd528d",
|
|
||||||
"extent": "parent",
|
|
||||||
"style": {
|
|
||||||
"width": "396px",
|
|
||||||
"height": "19px"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "text_e9bde955_7c37_44d0_8c37_265ad44fdd9d",
|
|
||||||
"type": "text",
|
|
||||||
"dimensions": {
|
|
||||||
"width": 75,
|
|
||||||
"height": 19
|
|
||||||
},
|
|
||||||
"computedPosition": {
|
|
||||||
"x": 170.0787401574803,
|
|
||||||
"y": 302.3622047244094,
|
|
||||||
"z": 1
|
|
||||||
},
|
|
||||||
"handleBounds": {
|
|
||||||
"source": null,
|
|
||||||
"target": null
|
|
||||||
},
|
|
||||||
"selected": false,
|
|
||||||
"dragging": false,
|
|
||||||
"resizing": false,
|
|
||||||
"initialized": false,
|
|
||||||
"isParent": false,
|
|
||||||
"position": {
|
|
||||||
"x": 170.0787401574803,
|
|
||||||
"y": 302.3622047244094
|
|
||||||
},
|
|
||||||
"data": {
|
|
||||||
"options": {
|
|
||||||
"field": "deviceName",
|
|
||||||
"default": "",
|
|
||||||
"border": [
|
|
||||||
{
|
|
||||||
"type": "top",
|
|
||||||
"isShow": false,
|
|
||||||
"width": 1,
|
|
||||||
"color": "#000",
|
|
||||||
"borderType": "solid"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "right",
|
|
||||||
"isShow": false,
|
|
||||||
"width": 1,
|
|
||||||
"color": "#000",
|
|
||||||
"borderType": "solid"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "bottom",
|
|
||||||
"isShow": false,
|
|
||||||
"width": 1,
|
|
||||||
"color": "#000",
|
|
||||||
"borderType": "solid"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "left",
|
|
||||||
"isShow": false,
|
|
||||||
"width": 1,
|
|
||||||
"color": "#000",
|
|
||||||
"borderType": "solid"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"outputData": {}
|
|
||||||
},
|
|
||||||
"events": {},
|
|
||||||
"name": "text",
|
|
||||||
"parentNode": "area_d14a13ad_1a78_4171_b54f_93d18abd528d",
|
|
||||||
"extent": "parent",
|
|
||||||
"style": {
|
|
||||||
"width": "75px",
|
|
||||||
"height": "19px"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "QRCode_94877b0d_0e26_4a8e_b159_8d99120725a0",
|
|
||||||
"type": "QRCode",
|
|
||||||
"dimensions": {
|
|
||||||
"width": 189,
|
|
||||||
"height": 189
|
|
||||||
},
|
|
||||||
"computedPosition": {
|
|
||||||
"x": 415.74803149606294,
|
|
||||||
"y": 264.56692913385825,
|
|
||||||
"z": 1001
|
|
||||||
},
|
|
||||||
"handleBounds": {
|
|
||||||
"source": null,
|
|
||||||
"target": null
|
|
||||||
},
|
|
||||||
"selected": true,
|
|
||||||
"dragging": false,
|
|
||||||
"resizing": false,
|
|
||||||
"initialized": false,
|
|
||||||
"isParent": false,
|
|
||||||
"position": {
|
|
||||||
"x": 415.74803149606294,
|
|
||||||
"y": 264.56692913385825
|
|
||||||
},
|
|
||||||
"data": {
|
|
||||||
"options": {
|
|
||||||
"default": "123123121"
|
|
||||||
},
|
|
||||||
"outputData": {}
|
|
||||||
},
|
|
||||||
"events": {},
|
|
||||||
"name": "QRCode",
|
|
||||||
"parentNode": "area_d14a13ad_1a78_4171_b54f_93d18abd528d",
|
|
||||||
"extent": "parent"
|
|
||||||
}
|
|
||||||
]`;
|
|
||||||
window.addEventListener('message', (event) => {
|
|
||||||
if (isJSON(event.data)) {
|
|
||||||
let data = JSON.parse(event.data);
|
|
||||||
if (data.type === 'print') {
|
|
||||||
printFun();
|
|
||||||
}
|
|
||||||
if (data.type === 'setData') {
|
|
||||||
if (typeof data.value === 'object' && data.value !== null && !Array.isArray(data.value)) {
|
|
||||||
pageDatas.value = [data.value];
|
|
||||||
}
|
|
||||||
if (Array.isArray(data.value)) {
|
|
||||||
pageDatas.value = data.value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (data.type === 'setTemplate') {
|
|
||||||
nodes.value = JSON.parse(printNode || '[]');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
onMounted(() => {
|
|
||||||
// nodes.value = JSON.parse(localStorage.getItem('printNodes') || '[]');
|
|
||||||
nodes.value = JSON.parse(printNode || '[]');
|
|
||||||
const param = route.query.data;
|
|
||||||
if (isJSON(param)) {
|
|
||||||
let data = JSON.parse(param);
|
|
||||||
if (Array.isArray(data)) {
|
|
||||||
|
|
||||||
}
|
|
||||||
// if()
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const printInfoObj = {
|
|
||||||
id: 'printInfo',
|
|
||||||
preview: false, // 是否开启预览
|
|
||||||
beforeOpenCallback(vue) {
|
|
||||||
console.log('触发打印工具打开前回调');
|
|
||||||
},
|
|
||||||
openCallback(vue) {
|
|
||||||
console.log('触发打印工具打开的回调');
|
|
||||||
},
|
|
||||||
closeCallback() {
|
|
||||||
console.log('触发关闭打印工具回调');
|
|
||||||
},
|
|
||||||
previewBeforeOpenCallback() {
|
|
||||||
console.log('触发预览前回调');
|
|
||||||
},
|
|
||||||
previewOpenCallback() {
|
|
||||||
console.log('触发预览的回调');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const switchPrinter = (e) => {
|
|
||||||
console.log(e);
|
|
||||||
printType.value = e;
|
|
||||||
};
|
|
||||||
const printFun = (e) => {
|
|
||||||
if (printType.value === -1) {
|
|
||||||
isPrint.value = true;
|
|
||||||
nextTick(() => {
|
|
||||||
const element = printRef.value;
|
|
||||||
let eles = element.querySelectorAll('.content');
|
|
||||||
const pros = [];
|
|
||||||
|
|
||||||
eles.forEach((ele, index) => {
|
|
||||||
pros.push(
|
|
||||||
html2canvas(ele).then(canvas => {
|
|
||||||
const imgData = canvas.toDataURL('image/png');
|
|
||||||
const pdf = new jsPDF();
|
|
||||||
pdf.addImage(imgData, 'PNG', 0, 0);
|
|
||||||
pdf.save(`${new Date().getTime()}-${index}.pdf`);
|
|
||||||
})
|
|
||||||
);
|
|
||||||
});
|
|
||||||
Promise.all(pros).then((values) => {
|
|
||||||
isPrint.value = false;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
} else if (printType.value === 0) {
|
|
||||||
isPrint.value = true;
|
|
||||||
printPngList.value = [];
|
|
||||||
nextTick(() => {
|
|
||||||
const element = printRef.value;
|
|
||||||
let eles = element.querySelectorAll('.content');
|
|
||||||
const pros = [];
|
|
||||||
|
|
||||||
eles.forEach((ele, index) => {
|
|
||||||
pros.push(
|
|
||||||
html2canvas(ele).then(canvas => {
|
|
||||||
const imgData = canvas.toDataURL('image/png');
|
|
||||||
printPngList.value.push(imgData);
|
|
||||||
})
|
|
||||||
);
|
|
||||||
});
|
|
||||||
Promise.all(pros).then((values) => {
|
|
||||||
window.print();
|
|
||||||
isPrint.value = false;
|
|
||||||
printPngList.value = [];
|
|
||||||
});
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const closePrint = () => {
|
|
||||||
isView.value = false;
|
|
||||||
};
|
|
||||||
const openPrint = (pages, templateId) => {
|
|
||||||
isView.value = false;
|
|
||||||
nextTick(() => {
|
|
||||||
nodes.value = JSON.parse(localStorage.getItem('printNodes') || '[]');
|
|
||||||
isView.value = true;
|
|
||||||
let pageData = [];
|
|
||||||
if (Array.isArray(pages)) {
|
|
||||||
pageData = pages;
|
|
||||||
}
|
|
||||||
if (typeof pages !== 'object' || pages === null) {
|
|
||||||
pageData = [pages];
|
|
||||||
}
|
|
||||||
console.log(pageData);
|
|
||||||
pageDatas.value = pageData || [];
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const printName = () => {
|
|
||||||
if (printType.value === -1) {
|
|
||||||
return '导出PDF';
|
|
||||||
} else if (printType.value === 0) {
|
|
||||||
return '本地打印';
|
|
||||||
} else {
|
|
||||||
let name = printers?.value?.find(e => e.id === printType?.value)?.name;
|
|
||||||
return name || '';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
defineExpose({
|
|
||||||
openPrint
|
|
||||||
// closePrint
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
.content {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.node {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left {
|
|
||||||
display: inline-block;
|
|
||||||
width: calc(100% - 200px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
|
||||||
vertical-align: top;
|
|
||||||
display: inline-block;
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style>
|
|
||||||
.print-page {
|
|
||||||
page-break-after: always;
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px;
|
|
||||||
background: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.print-image {
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 打印样式：仅显示图片区域 */
|
|
||||||
@media print {
|
|
||||||
body * {
|
|
||||||
visibility: hidden !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#printArea,
|
|
||||||
#printArea * {
|
|
||||||
visibility: visible !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#printArea {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.print-page {
|
|
||||||
page-break-after: always;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue