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

修改看版配置

Browse Source
master
夜笙歌 2 weeks ago
parent 6cba344e00
commit de31fdcbac
8 changed files with 132 additions and 14 deletions
Show Stats Download Patch File Download Diff File

1
package.json
Unescape Escape View File

@ -56,6 +56,7 @@
"vue-json-pretty": "2.4.0",
"vue-router": "4.3.2",
"vue-types": "5.1.1",
"vue3-print-nb": "^0.1.4",
"vue3-seamless-scroll": "^3.0.2",
"vuedraggable": "4.1.0",
"vxe-table": "4.5.22"

3
src/main.ts
Unescape Escape View File

@ -56,6 +56,8 @@ import i18n from '@/lang/index';
import VXETable from 'vxe-table';
import 'vxe-table/lib/style.css';
import print from 'vue3-print-nb';
VXETable.config({
zIndex: 999999
@ -84,6 +86,7 @@ app.provide('$testColor', testColor);
app.provide('$isJSON', isJSON);
app.use(vue3SeamlessScroll);
app.use(print);
app.use(HighLight);
app.use(ElementIcons);
app.use(ElementPlus);

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

@ -97,6 +97,17 @@
</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';
@ -111,12 +122,14 @@ 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);
@ -136,7 +149,6 @@ const logEvent = async (eventname, event) => {
nodeAttrForm.value = event.node.data.options;
break;
case 'nodeDrag':
console.log(event.nodes);
if (event.nodes.length === 1) {
nodeAttrForm.value = event.node.data.options;
} else {
@ -179,9 +191,12 @@ const zoomChange = (e) => {
};
const view = () => {
localStorage.setItem('printNodes', JSON.stringify(nodes.value));
isView.value = true;
};
const save = () => {
localStorage.setItem('printNodes', JSON.stringify(nodes.value));
};
const clear = () => {
};
@ -220,6 +235,26 @@ window.addEventListener('keyup', keyup);
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) {

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

@ -6,10 +6,10 @@
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'}">
:style="{ 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'}"
<img :src="QRCodeSrc "
:style="{ width:props.dimensions.width+'px',height:props.dimensions.height+'px',objectFit:'contain'}"
alt="" />
</div>
</div>
@ -48,8 +48,13 @@ const props = defineProps({
});
onMounted(async () => {
QRCodeSrc.value = await QRCode.toDataURL('1234567890abc+-', { margin: 0 });
QRCodeSrc.value = await QRCode.toDataURL(props.data.options.default || '1234567890abc+-', { margin: 0 });
});
watch(() => JSON.parse(JSON.stringify(props.data.options.default)), async (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
QRCodeSrc.value = await QRCode.toDataURL(props.data.options.default || '1234567890abc+-', { margin: 0 });
}
}, { deep: true, immediate: true });
</script>
<style scoped>
.custom-node {

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

@ -6,11 +6,13 @@
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'}">
:style="{ 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>
<img
:width="props.dimensions.width+'px'"
:height="props.dimensions.height+'px'"
:style="{ width:props.dimensions.width+'px',height:props.dimensions.height+'px',objectFit:'contain' }"
:id="'barcode'+props.id" />
</div>
</div>
</template>
@ -19,7 +21,12 @@ import JsBarcode from 'jsbarcode';
import { defineProps } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer';
const props = defineProps({
id: {
type: String,
required: false
},
isView: {
type: Boolean,
required: false
@ -46,15 +53,21 @@ const props = defineProps({
}
});
onMounted(() => {
JsBarcode('#barcode', '1234567890abc', {
JsBarcode('#barcode' + props.id, props.data.options.default || '1234567890abc', {
format: 'CODE128',
lineColor: '#000',
width: 2,
height: 40,
displayValue: true
});
});
watch(() => JSON.parse(JSON.stringify(props.data.options.default)), (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
JsBarcode('#barcode' + props.id, props.data.options.default || '1234567890abc', {
format: 'CODE128',
lineColor: '#000',
displayValue: true
});
}
}, { deep: true });
</script>
<style scoped>
.custom-node {

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

@ -9,7 +9,7 @@
: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() }}
{{ props.data.options.name || dayjs().format('YYYY-MM-DD HH:mm:ss') }}
</span>
</div>
</div>

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

@ -17,6 +17,10 @@ const getOption = (e) => {
return { name: '', field: '', default: '' };
} else if (e === 'image') {
return { name: '', field: '', imageSrc: '', imageType: '' };
} else if (e === 'barCode') {
return { field: '', default: '' };
} else if (e === 'QRCode') {
return { field: '', default: '' };
} else {
return {};
}

57
src/views/print/view.vue
Unescape Escape View File

@ -0,0 +1,57 @@
<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"
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></TextNode>
</template>
<template v-if="i.type === 'image'">
<ImageNode v-bind="i"
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></ImageNode>
</template>
<template v-if="i.type === 'barCode'">
<BarCodeNode v-bind="i"
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></BarCodeNode>
</template>
<template v-if="i.type === 'QRCode'">
<QRCodeNode v-bind="i"
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></QRCodeNode>
</template>
<template v-if="i.type === 'dateTime'">
<TimeNode v-bind="i"
: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 { 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>
Write Preview
Loading…
Cancel
Save