From 37da31df696a0959b914256a62189526e742b5ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Tue, 5 Aug 2025 17:36:53 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=89=93=E5=8D=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/print/index.vue | 65 ++++++++-----
src/views/print/nodes/inputNode.vue | 138 ++++++++++++++++++++++++++++
src/views/print/tool.js | 17 +++-
src/views/print/view.vue | 8 +-
4 files changed, 204 insertions(+), 24 deletions(-)
create mode 100644 src/views/print/nodes/inputNode.vue
diff --git a/src/views/print/index.vue b/src/views/print/index.vue
index 84dec49..2ee6600 100644
--- a/src/views/print/index.vue
+++ b/src/views/print/index.vue
@@ -38,14 +38,16 @@
可选择
- 横线
-
- 竖线
-
- 矩形
-
- 圆形
+ 可输入
+
+
+
+
+
+
+
+
表单组件
@@ -98,6 +100,10 @@
+
+
+
@@ -385,8 +391,9 @@ 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 InputNode from './nodes/inputNode.vue';
import { updatePrintTemplateList } from '@/api/system/printTemplateList';
-import { getPrintTemplateInfo, updatePrintTemplateInfo } from '@/api/system/printTemplateInfo';
+import { getPrintTemplateInfo, listPrintTemplateInfo, updatePrintTemplateInfo } from '@/api/system/printTemplateInfo';
import { getPrintTemplateNode, getSysPrintTemplateNodeList, updateTemplateNode } from '@/api/system/printTemplateNode';
const router = useRouter();
@@ -498,6 +505,7 @@ const save = () => {
height: pageHeight.value,
activeFlag: '1'
});
+ console.log(nodes.value);
updateTemplateNode(
nodes.value.map(e => {
return {
@@ -509,6 +517,7 @@ const save = () => {
height: e.dimensions.height,
x: e.position.x,
y: e.position.y,
+ parentNode: e.parentNode,
data: JSON.stringify(e.data)
};
})
@@ -536,40 +545,52 @@ onMounted(() => {
zoom: 1
});
});
- let nodesData = localStorage.getItem('printNodes')
- if(nodesData){
- nodes.value = JSON.parse(nodesData);
- pid.value = nodes.value.find(e => e.name === 'area')?.id;
- }
- console.log(nodes.value);
+ // let nodesData = localStorage.getItem('printNodes')
+ // if(nodesData){
+ // nodes.value = JSON.parse(nodesData);
+ // pid.value = nodes.value.find(e => e.name === 'area')?.id;
+ // }
- getPrintTemplateInfo(router.currentRoute.value.query.id).then(e => {
- let data = e.data;
- pageType.value = data.paperType === '自定义' ? 'zdy' : data.paperType;
+ listPrintTemplateInfo({ templateListId: router.currentRoute.value.query.id }).then(e => {
+ let data = e.rows[0] || {};
+ pageType.value = (data.paperType || 'A4') === '自定义' ? 'zdy' : data.paperType;
pageId.value = data.templateInfoId;
- pageWidth.value = data.width;
- pageHeight.value = data.height;
+ pageWidth.value = data.width || 21;
+ pageHeight.value = data.height || 29.7;
getSysPrintTemplateNodeList({ templateInfoId: data.templateInfoId }).then(v => {
- nodes.value = v.data.map(vv => {
+ nodes.value = v.data.map((vv, index) => {
return {
id: vv.id,
type: vv.type,
name: vv.name,
+ extent: 'parent',
dimensions: {
width: vv.width,
height: vv.height
},
+ computedPosition: {
+ x: parseFloat(vv.x || 0),
+ y: parseFloat(vv.y || 0),
+ z: index + 1
+ },
handleBounds: {
source: null,
target: null
},
position: {
- x: vv.x,
- y: vv.y
+ x: parseFloat(vv.x || 0),
+ y: parseFloat(vv.y || 0)
},
+ parentNode: vv.parentNode,
data: JSON.parse(vv.data)
};
});
+ if (nodes.value.length > 0) {
+ pid.value = nodes.value.find(e => e.name === 'area')?.id;
+ } else {
+ clear();
+ }
+ console.log(nodes.value);
});
});
});
diff --git a/src/views/print/nodes/inputNode.vue b/src/views/print/nodes/inputNode.vue
new file mode 100644
index 0000000..9edc219
--- /dev/null
+++ b/src/views/print/nodes/inputNode.vue
@@ -0,0 +1,138 @@
+
+
+
+
+
+
diff --git a/src/views/print/tool.js b/src/views/print/tool.js
index 54f37f3..d12c791 100644
--- a/src/views/print/tool.js
+++ b/src/views/print/tool.js
@@ -13,7 +13,7 @@ const cmToPx = (cm) => {
const getOption = (e, name) => {
- let commonOption = { field: name };
+ let commonOption = { field: name || '' };
if (e === 'text') {
return {
...commonOption,
@@ -53,6 +53,19 @@ const getOption = (e, name) => {
type: 'left', isShow: false, width: 1, color: '#000', borderType: 'solid'
}]
};
+ } else if (e === 'inputNode') {
+ return {
+ ...commonOption,
+ default: '',
+ selectOptions: [],
+ horizontalAlign: 'center',
+ verticalAlign: 'center',
+ 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'
+ }]
+ };
} else {
return {};
}
@@ -70,6 +83,8 @@ const getNodeSize = (e) => {
return { width: cmToPx(8), height: cmToPx(1) };
} else if (e === 'select') {
return { width: cmToPx(4), height: cmToPx(1) };
+ } else if (e === 'inputNode') {
+ return { width: cmToPx(4), height: cmToPx(1) };
} else {
return { width: cmToPx(5), height: cmToPx(2) };
}
diff --git a/src/views/print/view.vue b/src/views/print/view.vue
index 439b4f5..9b27177 100644
--- a/src/views/print/view.vue
+++ b/src/views/print/view.vue
@@ -30,6 +30,11 @@
:pageSize="{width: cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"
v-bind="i">
+
+
+
@@ -74,6 +79,7 @@ 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 InputNode from './nodes/inputNode.vue';
const printType = ref(0);
const printers = ref([
@@ -238,7 +244,7 @@ defineExpose({
/* 打印样式：仅显示图片区域 */
@media print {
@page {
-
+
margin: 0;