xins
/
hwmom-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改看版配置

Browse Source
master
夜笙歌 2 weeks ago
parent f82e8082d2
commit 6cba344e00
9 changed files with 212 additions and 11 deletions
Show Stats Download Patch File Download Diff File

3
package.json
Unescape Escape View File

@ -31,6 +31,7 @@
"bpmn-js": "16.4.0",
"clipboard": "2.0.11",
"crypto-js": "4.2.0",
"dayjs": "^1.11.13",
"diagram-js": "12.3.0",
"didi": "9.0.2",
"echarts": "5.5.0",
@ -41,9 +42,11 @@
"image-conversion": "^2.1.1",
"js-beautify": "1.14.11",
"js-cookie": "3.0.5",
"jsbarcode": "^3.11.6",
"jsencrypt": "3.3.2",
"nprogress": "0.2.0",
"pinia": "2.1.7",
"qrcode": "^1.5.4",
"screenfull": "6.0.2",
"uuid": "^11.0.5",
"vform3-builds": "^3.0.10",

BIN
src/views/print/file/img.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

20
src/views/print/index.vue
Unescape Escape View File

@ -63,6 +63,22 @@
<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>
@ -91,6 +107,10 @@ 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';
const router = useRouter();
// 获取自定义的方法

59
src/views/print/nodes/QRCodeNode.vue
Unescape Escape View File

@ -0,0 +1,59 @@
<template>
<div
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
<NodeResizer :min-width="96 / 2.54" :min-height="96 / 2.54" :max-width="pageSize.width"
:max-height="pageSize.height" color="#000"
v-if="!props.isView && !props.isHideHandle && props.selected" />
<div class="custom-node"
:style="{textAlign:props.data.options.align,width:props.dimensions.width+'px',lineHeight:props.dimensions.height+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
<img :src="QRCodeSrc || props.data.options.imageSrc"
:style="{color:props.data.options.color,width:props.dimensions.width+'px',height:props.dimensions.height+'px',objectFit:'contain'}"
alt="" />
</div>
</div>
</template>
<script setup>
import QRCode from 'qrcode';
import { defineProps } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer';
const QRCodeSrc = ref('');
const props = defineProps({
isView: {
type: Boolean,
required: false
},
isHideHandle: {
type: Boolean,
required: false
},
selected: {
type: Boolean,
required: false
},
data: {
type: Object,
required: true
},
dimensions: {
type: Object,
required: true
},
pageSize: {
type: Object,
required: true
}
});
onMounted(async () => {
QRCodeSrc.value = await QRCode.toDataURL('1234567890abc+-', { margin: 0 });
});
</script>
<style scoped>
.custom-node {
position: absolute;
}
</style>

64
src/views/print/nodes/barCodeNode.vue
Unescape Escape View File

@ -0,0 +1,64 @@
<template>
<div
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
<NodeResizer :min-width="96 / 2.54" :min-height="96 / 2.54" :max-width="pageSize.width"
:max-height="pageSize.height" color="#000"
v-if="!props.isView && !props.isHideHandle && props.selected" />
<div class="custom-node"
:style="{textAlign:props.data.options.align,width:props.dimensions.width+'px',lineHeight:props.dimensions.height+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
<svg
:style="{ width:props.dimensions.width+'px',height:props.dimensions.height+'px' }"
id="barcode"></svg>
</div>
</div>
</template>
<script setup>
import JsBarcode from 'jsbarcode';
import { defineProps } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer';
const props = defineProps({
isView: {
type: Boolean,
required: false
},
isHideHandle: {
type: Boolean,
required: false
},
selected: {
type: Boolean,
required: false
},
data: {
type: Object,
required: true
},
dimensions: {
type: Object,
required: true
},
pageSize: {
type: Object,
required: true
}
});
onMounted(() => {
JsBarcode('#barcode', '1234567890abc', {
format: 'CODE128',
lineColor: '#000',
width: 2,
height: 40,
displayValue: true
});
});
</script>
<style scoped>
.custom-node {
position: absolute;
}
</style>

10
src/views/print/nodes/image.vue
Unescape Escape View File

@ -7,12 +7,14 @@
<div class="custom-node"
:style="{textAlign:props.data.options.align,width:props.dimensions.width+'px',lineHeight:props.dimensions.height+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
<img :src="props.data.options.imageSrc"
:style="{color:props.data.options.color,fontSize:props.dimensions.height+'px'}" alt="" />
<img :src="image || props.data.options.imageSrc"
:style="{color:props.data.options.color,width:props.dimensions.width+'px',height:props.dimensions.height+'px',objectFit:'contain'}"
alt="" />
</div>
</div>
</template>
<script setup>
import image from '../file/img.png';
import { defineProps } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer';
@ -40,10 +42,6 @@ const props = defineProps({
pageSize: {
type: Object,
required: true
},
pageData: {
type: Object,
required: true
}
});

4
src/views/print/nodes/textNode.vue
Unescape Escape View File

@ -42,10 +42,6 @@ const props = defineProps({
pageSize: {
type: Object,
required: true
},
pageData: {
type: Object,
required: true
}
});

55
src/views/print/nodes/timeNode.vue
Unescape Escape View File

@ -0,0 +1,55 @@
<template>
<div
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
<NodeResizer :min-width="96 / 2.54" :min-height="96 / 2.54" :max-width="pageSize.width"
:max-height="pageSize.height" color="#000"
v-if="!props.isView && !props.isHideHandle && props.selected" />
<div class="custom-node"
:style="{textAlign:props.data.options.align,width:props.dimensions.width+'px',lineHeight:props.dimensions.height+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
<span
:style="{color:props.data.options.color,fontSize:12+'px'}">
{{ props.data.options.name || dayjs().format() }}
</span>
</div>
</div>
</template>
<script setup>
import dayjs from 'dayjs';
import { defineProps } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer';
const props = defineProps({
isView: {
type: Boolean,
required: false
},
isHideHandle: {
type: Boolean,
required: false
},
selected: {
type: Boolean,
required: false
},
data: {
type: Object,
required: true
},
dimensions: {
type: Object,
required: true
},
pageSize: {
type: Object,
required: true
}
});
</script>
<style scoped>
.custom-node {
position: absolute;
}
</style>

8
src/views/print/tool.js
Unescape Escape View File

@ -22,8 +22,14 @@ const getOption = (e) => {
}
};
const getNodeSize = (e) => {
if (e === 'line' || e === 'multiLines' || e === 'bar' || e === 'multiBars' || e === 'curve' || e === 'multiCurves' || e === 'customBoard' || e === 'pie') {
if (e === 'text') {
return { width: cmToPx(5), height: cmToPx(2) };
} else if (e === 'image') {
return { width: cmToPx(5), height: cmToPx(5) };
} else if (e === 'barCode') {
return { width: cmToPx(5), height: cmToPx(2) };
} else if (e === 'QRCode') {
return { width: cmToPx(5), height: cmToPx(5) };
} else {
return { width: cmToPx(5), height: cmToPx(2) };
}

Write Preview
Loading…
Cancel
Save