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

修改打印配置

Browse Source
master
夜笙歌 2 weeks ago
parent b376b32841
commit fb53bec3f3
9 changed files with 249 additions and 32 deletions
Show Stats Download Patch File Download Diff File

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

@ -9,7 +9,13 @@
<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 :type="pageType === 'zdy' ? 'primary' : ''" @click="setPage('zdy')">自定义</el-button>
</el-button-group>
<el-input-number :disabled="pageType !== 'zdy'" v-model="pageWidth" style="width: 80px;margin-left: 8px;"
:min="0" :controls="false" />
<span style="margin: 0 8px">x</span>
<el-input-number :disabled="pageType !== 'zdy'" v-model="pageHeight" style="width: 80px" :min="0"
:controls="false" />
<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;" />
@ -29,6 +35,8 @@
</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, 'select',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">竖线
@ -79,6 +87,10 @@
<TimeNode v-bind="dateTimeNodeProps"
:pageSize="{width:zoom * cmToPx(pageWidth) ,height:zoom * cmToPx(pageHeight) }"></TimeNode>
</template>
<template #node-select="selectNodeProps">
<SelectNode v-bind="selectNodeProps"
:pageSize="{width:zoom * cmToPx(pageWidth) ,height:zoom * cmToPx(pageHeight) }"></SelectNode>
</template>
</VueFlow>
</div>
</div>
@ -93,6 +105,20 @@
<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-item label="图片地址" v-if="Object.keys(nodeAttrForm).includes('imageSrc')">
<el-input v-model="nodeAttrForm.imageSrc" style="width: 100%" />
</el-form-item>
<el-form-item label="时间类型" v-if="Object.keys(nodeAttrForm).includes('dateTimeType')">
<el-select
v-model="nodeAttrForm.dateTimeType"
placeholder="Select"
>
<el-option
label="实时"
value="1"
/>
</el-select>
</el-form-item>
</el-form>
</div>
</div>
@ -126,6 +152,7 @@ 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 SelectNode from './nodes/selectNode.vue';
import View from './view.vue';
const router = useRouter();
@ -176,8 +203,8 @@ const edges = ref([]);
const setPage = (type, width, height) => {
pageType.value = type;
pageHeight.value = height;
pageWidth.value = width;
pageHeight.value = height || pageHeight.value;
pageWidth.value = width || pageWidth.value;
};
const zoomChange = (e) => {

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

@ -1,14 +1,14 @@
<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"
<NodeResizer :min-width="96 / 2.54/2" :min-height="96 / 2.54/2" :max-width="pageSize.width"
:max-height="pageSize.height" color="#000"
v-if="!props.isView && !props.isHideHandle && props.selected" />
<div class="custom-node"
:style="{ width:props.dimensions.width+'px',lineHeight:props.dimensions.height+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
<img :src="QRCodeSrc"
v-if="eleData"
:style="{ width:props.dimensions.width+'px',height:props.dimensions.height+'px',objectFit:'contain'}"
alt="" />
</div>
@ -19,7 +19,6 @@ import QRCode from 'qrcode';
import { defineProps } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer';
const QRCodeSrc = ref('');
const props = defineProps({
isView: {
type: Boolean,
@ -44,15 +43,29 @@ const props = defineProps({
pageSize: {
type: Object,
required: true
},
pageData: {
type: Object,
required: true
}
});
onMounted(async () => {
const QRCodeSrc = ref('');
const eleData = ref('');
QRCodeSrc.value = await QRCode.toDataURL(props.data.options.default || '1234567890abc+-', { margin: 0 });
const getEleData = async () => {
if (props.isView) {
eleData.value = props.pageData?.[props.data.options.field] || props.data.options.default || '';
} else {
eleData.value = props.data.options.default || '1234567890abc';
}
QRCodeSrc.value = await QRCode.toDataURL(eleData.value, { margin: 0 });
};
onMounted(async () => {
await getEleData();
});
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 });
await getEleData();
}
}, { deep: true, immediate: true });
</script>

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

@ -1,14 +1,13 @@
<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"
<NodeResizer :min-width="96 / 2.54/2" :min-height="96 / 2.54/2" :max-width="pageSize.width"
:max-height="pageSize.height" color="#000"
v-if="!props.isView && !props.isHideHandle && props.selected" />
<div class="custom-node"
:style="{ width:props.dimensions.width+'px',lineHeight:props.dimensions.height+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
<img
v-if="eleData"
:width="props.dimensions.width+'px'"
:height="props.dimensions.height+'px'"
:style="{ width:props.dimensions.width+'px',height:props.dimensions.height+'px',objectFit:'contain' }"
@ -50,23 +49,46 @@ const props = defineProps({
pageSize: {
type: Object,
required: true
},
pageData: {
type: Object,
required: false
}
});
const eleData = ref('');
const getEleData = () => {
if (props.isView) {
eleData.value = props.data.options.field ? props.pageData?.[props.data.options.field] : props.data.options.default;
} else {
eleData.value = props.data.options.default || '1234567890abc';
}
};
onMounted(() => {
JsBarcode('#barcode' + props.id, props.data.options.default || '1234567890abc', {
getEleData();
nextTick(() => {
if (eleData.value) {
JsBarcode('#barcode' + props.id, eleData.value, {
format: 'CODE128',
lineColor: '#000',
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', {
getEleData();
nextTick(() => {
if (eleData.value) {
JsBarcode('#barcode' + props.id, eleData.value, {
format: 'CODE128',
lineColor: '#000',
displayValue: true
});
}
});
}
}, { deep: true });
</script>
<style scoped>

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

@ -1,13 +1,14 @@
<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"
<NodeResizer :min-width="96 / 2.54/2" :min-height="96 / 2.54/2" :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="image || props.data.options.imageSrc"
<img :src="eleData"
v-if="eleData"
:style="{color:props.data.options.color,width:props.dimensions.width+'px',height:props.dimensions.height+'px',objectFit:'contain'}"
alt="" />
</div>
@ -42,9 +43,29 @@ const props = defineProps({
pageSize: {
type: Object,
required: true
},
pageData: {
type: Object,
required: true
}
});
const eleData = ref('');
const getEleData = () => {
if (props.isView) {
eleData.value = props.pageData?.[props.data.options.field] || props.data.options.imageSrc;
} else {
eleData.value = props.data.options.imageSrc || image;
}
};
onMounted(() => {
getEleData();
});
watch(() => JSON.parse(JSON.stringify(props.data.options.imageSrc)), (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
getEleData();
}
}, { deep: true });
</script>
<style scoped>
.custom-node {

81
src/views/print/nodes/selectNode.vue
Unescape Escape View File

@ -0,0 +1,81 @@
<template>
<div
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
<NodeResizer :min-width="96 / 2.54/2" :min-height="96 / 2.54/2" :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': 'auto'}">
<el-select
v-model="value"
style="width: 100%;height: 100%"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</div>
</template>
<script setup>
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
},
pageData: {
type: Object,
required: true
}
});
const value = ref('');
const options = ref([]);
const getEleData = () => {
if (props.isView) {
options.value = props.data.options.field ? props.pageData?.[props.data.options.field] : props.data.options.selectOptions;
} else {
options.value = props.data.options.selectOptions || [];
}
};
onMounted(() => {
getEleData();
});
watch(() => JSON.parse(JSON.stringify(props.data.options.selectOptions)), (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
getEleData();
}
}, { deep: true });
</script>
<style scoped>
.custom-node {
position: absolute;
}
</style>

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

@ -1,15 +1,16 @@
<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"
<NodeResizer :min-width="96 / 2.54/2" :min-height="96 / 2.54/2" :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
v-if="eleData"
:style="{color:props.data.options.color,fontSize:props.dimensions.height+'px'}">
{{ props.data.options.name || '文字' }}
{{ eleData }}
</span>
</div>
</div>
@ -42,8 +43,28 @@ const props = defineProps({
pageSize: {
type: Object,
required: true
},
pageData: {
type: Object,
required: true
}
});
const eleData = ref('');
const getEleData = () => {
if (props.isView) {
eleData.value = props.data.options.field ? props.pageData?.[props.data.options.field] : props.data.options.default;
} else {
eleData.value = props.data.options.default || '文字';
}
};
onMounted(() => {
getEleData();
});
watch(() => JSON.parse(JSON.stringify(props.data.options.default)), (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
getEleData();
}
}, { deep: true });
</script>
<style scoped>

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

@ -1,7 +1,7 @@
<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"
<NodeResizer :min-width="96 / 2.54/2" :min-height="96 / 2.54/2" :max-width="pageSize.width"
:max-height="pageSize.height" color="#000"
v-if="!props.isView && !props.isHideHandle && props.selected" />
@ -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('YYYY-MM-DD HH:mm:ss') }}
{{ eleData }}
</span>
</div>
</div>
@ -43,8 +43,28 @@ const props = defineProps({
pageSize: {
type: Object,
required: true
},
pageData: {
type: Object,
required: true
}
});
const eleData = ref('');
const getEleData = () => {
if (props.isView) {
eleData.value = dayjs().format('YYYY-MM-DD HH:mm:ss');
} else {
eleData.value = dayjs().format('YYYY-MM-DD HH:mm:ss');
}
};
onMounted(() => {
getEleData();
});
watch(() => JSON.parse(JSON.stringify(props.data.options.dateTimeType)), (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
getEleData();
}
}, { deep: true });
</script>
<style scoped>

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

@ -14,13 +14,17 @@ const cmToPx = (cm) => {
const getOption = (e) => {
if (e === 'text') {
return { name: '', field: '', default: '' };
return { field: '', default: '' };
} else if (e === 'image') {
return { name: '', field: '', imageSrc: '', imageType: '' };
return { field: '', imageSrc: '', imageType: '' };
} else if (e === 'barCode') {
return { field: '', default: '' };
} else if (e === 'QRCode') {
return { field: '', default: '' };
} else if (e === 'dateTime') {
return { field: '', dateTimeType: '' };
} else if (e === 'select') {
return { field: '', default: '', selectOptions: [] };
} else {
return {};
}
@ -34,6 +38,8 @@ const getNodeSize = (e) => {
return { width: cmToPx(5), height: cmToPx(2) };
} else if (e === 'QRCode') {
return { width: cmToPx(5), height: cmToPx(5) };
} else if (e === 'dateTime') {
return { width: cmToPx(8), height: cmToPx(1) };
} else {
return { width: cmToPx(5), height: cmToPx(2) };
}

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

@ -4,22 +4,27 @@
<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"
<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"
<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"
<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"
<TimeNode v-bind="i" :isView="true"
:pageData="pageData"
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></TimeNode>
</template>
@ -36,6 +41,7 @@ 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(() => {

Write Preview
Loading…
Cancel
Save