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

修改打印

Browse Source
master
夜笙歌 1 week ago
parent b71c935af1
commit 6aa5544c9e
7 changed files with 196 additions and 29 deletions
Show Stats Download Patch File Download Diff File

3
src/views/boardGenerate/nodes/form/backgroundNode.vue
Unescape Escape View File

@ -6,9 +6,8 @@
<div class="custom-node"
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
<div style="width: 100%; height: 100%;background-repeat: no-repeat; background-size: 100% 100%;"
:style="{backgroundImage:props.data.options.backgroundImage,backgroundColor:props.data.options.backgroundColor,border:props.data.options.isBorder? ` 1px solid ${props.data.options.borderColor}` :''}">
:style="{backgroundImage:`url(${props.data.options.backgroundImage})`,backgroundColor:props.data.options.backgroundColor,border:props.data.options.isBorder? ` 1px solid ${props.data.options.borderColor}` :''}">
</div>
</div>

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

@ -40,6 +40,8 @@
</el-tag>
<el-tag :draggable="true" @dragstart="onDragStart($event, 'inputNode',pid)" class="mx-1" size="large">可输入
</el-tag>
<!-- <el-tag :draggable="true" @dragstart="onDragStart($event, 'box',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">竖线-->
@ -104,6 +106,10 @@
<InputNode v-bind="inputNodeProps"
:pageSize="{width:zoom * cmToPx(pageWidth) ,height:zoom * cmToPx(pageHeight) }"></InputNode>
</template>
<template #node-box="boxNodeProps">
<BoxNode v-bind="boxNodeProps"
:pageSize="{width:zoom * cmToPx(pageWidth) ,height:zoom * cmToPx(pageHeight) }"></BoxNode>
</template>
</VueFlow>
</div>
</div>
@ -136,6 +142,23 @@
<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('fontSize')">
<el-input-number :min="12" :controls="false" v-model="nodeAttrForm.fontSize"
style="width: 100%" />
</el-form-item>
<el-form-item label="使用字典" v-if="Object.keys(nodeAttrForm).includes('dic')">
<el-select
v-model="nodeAttrForm.dic"
placeholder="Select"
>
<el-option
v-for="i in dics"
:key="i"
:label="i.dictName"
:value="i.dictType"
/>
</el-select>
</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>
@ -373,6 +396,9 @@
v-model="nodeAttrForm.border.find(e=>e.type==='left').color"
show-alpha />
</el-form-item>
<el-form-item label="自定义脚本">
<el-input type="textarea" :rows="2" v-model="nodeAttrForm.JScript" style="width: 100%" />
</el-form-item>
</el-form>
</div>
</div>
@ -392,9 +418,11 @@ 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 BoxNode from './nodes/boxNode.vue';
import { updatePrintTemplateList } from '@/api/system/printTemplateList';
import { getPrintTemplateInfo, listPrintTemplateInfo, updatePrintTemplateInfo } from '@/api/system/printTemplateInfo';
import { getPrintTemplateNode, getSysPrintTemplateNodeList, updateTemplateNode } from '@/api/system/printTemplateNode';
import { listType } from '@/api/system/dict/type';
const router = useRouter();
const { updateNode } = useVueFlow();
@ -403,6 +431,24 @@ const { onDragStart, onDrop, onDragOver } = tool();
const { cmToPx } = options;
const internalInstance = getCurrentInstance();
const data = {
planCode:'1',
cardId:'1',
classes:'1',
planCode:'1',
planCode:'1',
planCode:'1',
planCode:'1',
planCode:'1',
planCode:'1',
planCode:'1',
planCode:'1',
planCode:'1',
planCode:'1',
planCode:'1',
};
const dics = ref([]);
const flowRef = ref();
// const isView = ref(false);
const isSnapToGrid = ref(true);
@ -538,6 +584,13 @@ const clear = () => {
};
onMounted(() => {
listType({
pageNum: 1,
pageSize: 9999999
}).then(e => {
dics.value = e.rows;
console.log(dics.value);
});
flowRef.value.onInit(() => {
flowRef.value.setTransform({
x: 0,

96
src/views/print/nodes/boxNode.vue
Unescape Escape View File

@ -0,0 +1,96 @@
<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="{...border(),textAlign:props.data.options.horizontalAlign,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'}">
{{ eleData }}
</span>
</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 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 });
const border = () => {
let res = {};
if (props.data.options.border) {
let top = props.data.options.border.find(e => e.type === 'top');
let right = props.data.options.border.find(e => e.type === 'right');
let bottom = props.data.options.border.find(e => e.type === 'bottom');
let left = props.data.options.border.find(e => e.type === 'left');
if (top.isShow) {
res['borderTop'] = `${top.width}px ${top.borderType} ${top.color}`;
}
if (right.isShow) {
res['borderRight'] = `${right.width}px ${right.borderType} ${right.color}`;
}
if (bottom.isShow) {
res['borderBottom'] = `${bottom.width}px ${bottom.borderType} ${bottom.color}`;
}
if (left.isShow) {
res['borderLeft'] = `${left.width}px ${left.borderType} ${left.color}`;
}
}
return res;
};
</script>
<style scoped>
.custom-node {
position: absolute;
}
</style>

15
src/views/print/nodes/inputNode.vue
Unescape Escape View File

@ -57,24 +57,9 @@ const props = defineProps({
});
const text = ref('');
const options = ref([]);
const getEleData = () => {
if (props.isView) {
options.value = props.data.options.selectOptions || [];
} else {
options.value = props.data.options.selectOptions || [];
}
};
const spanChange = (val) => {
text.value = val;
};
onMounted(() => {
getEleData();
});
watch(() => JSON.parse(JSON.stringify(props.data.options.selectOptions)), (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
getEleData();
}
}, { deep: true });
watch(() => JSON.parse(JSON.stringify(props.data.options.default)), (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
text.value = props.data.options.default;

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

@ -31,6 +31,8 @@
<script setup>
import { defineProps } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer';
import { listData } from '@/api/system/dict/data/index';
import request from '@/utils/request';
const props = defineProps({
isView: {
@ -68,12 +70,39 @@ const props = defineProps({
});
const text = ref('');
const options = ref([]);
const getEleData = () => {
const getDic = (value) => {
listData({
pageNum: 1,
pageSize: 9999999,
dictType: value
}).then(e => {
options.value = e.rows.map(v => v.dictLabel);
})
.catch(e => {
getDic(value);
});
};
const getEleData = async () => {
if (props.isView) {
options.value = props.data.options.selectOptions || [];
if (props.data.options.JScript) {
const fun = () => {
return `return async ()=>{
${props.data.options.JScript}
}`;
};
const addFunction = new Function('request', fun());
const data = await addFunction(request)();
options.value = data;
} else if (props.data.options.field) {
options.value = options.value = props.pageData?.[props.data.options.field] || [];
} else if (props.data.options.dic) {
getDic(props.data.options.dic);
} else {
options.value = props.data.options.selectOptions || [];
}
} else {
options.value = props.data.options.field ? (props.pageData?.[props.data.options.field] || []) : props.data.options.selectOptions || [];
}
};
const spanChange = (val) => {
text.value = val;
@ -81,10 +110,14 @@ const spanChange = (val) => {
onMounted(() => {
getEleData();
});
watch(() => JSON.parse(JSON.stringify(props.data.options.selectOptions)), (obj1, obj2) => {
let timestep = new Date().getTime();
watch(() => [JSON.parse(JSON.stringify(props.data.options.selectOptions)), JSON.parse(JSON.stringify(props.data.options.field)), JSON.parse(JSON.stringify(props.data.options.dic || ''))], (obj1, obj2) => {
if (new Date().getTime() - timestep > 500) {
timestep = new Date().getTime();
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
getEleData();
}
}
}, { deep: true });
watch(() => JSON.parse(JSON.stringify(props.data.options.default)), (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {

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

@ -6,10 +6,11 @@
v-if="!props.isView && !props.isHideHandle && props.selected" />
<div class="custom-node"
:style="{...border(),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="{...border(),justifyContent: 'center',textAlign:props.data.options.horizontalAlign,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'}">
:style="{color:props.data.options.color,fontSize:props.data.options.fontSize+'px'}">
<!-- :style="{color:props.data.options.color,fontSize:props.dimensions.height+'px'}">-->
{{ eleData }}
</span>
</div>

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

@ -16,8 +16,9 @@ const getOption = (e, name) => {
let commonOption = { field: name || '' };
if (e === 'text') {
return {
...commonOption,
...commonOption, horizontalAlign: 'center',
default: '',
fontSize: 14,
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' }, {
@ -42,8 +43,9 @@ const getOption = (e, name) => {
};
} else if (e === 'select') {
return {
...commonOption,
...commonOption, dic: '',
default: '',
JScript: '',
selectOptions: [],
horizontalAlign: 'center',
verticalAlign: 'center',
@ -55,9 +57,7 @@ const getOption = (e, name) => {
};
} else if (e === 'inputNode') {
return {
...commonOption,
default: '',
selectOptions: [],
horizontalAlign: 'center',
verticalAlign: 'center',
border: [{ type: 'top', isShow: false, width: 1, color: '#000', borderType: 'solid' }, {

Write Preview
Loading…
Cancel
Save