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

修改打印配置

Browse Source
master
夜笙歌 7 days ago
parent 53eedf52f9
commit 380d191ad3
5 changed files with 378 additions and 12 deletions
Show Stats Download Patch File Download Diff File

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

@ -59,6 +59,7 @@
:panOnDrag="false"
fit-view-on-init
default-marker-color="#409EFF"
@selectionEnd="logEvent('selectionEnd', $event)"
@dragover="onDragOver"
@node-click="logEvent('click', $event)"
@pane-click="logEvent('paneClick', $event)"
@ -185,10 +186,189 @@
/>
</el-select>
</el-form-item>
<el-form-item label="边框设置" v-if="Object.keys(nodeAttrForm).includes('border')">
<div class="borderArea">
<div class="borderTopLine"
:style="{display:nodeAttrForm.border.find(e=>e.type==='top').isShow?'block':'none'}"></div>
<div class="borderTopArea"
@click="nodeAttrForm.border.find(e=>e.type==='top').isShow = !nodeAttrForm.border.find(e=>e.type==='top').isShow"></div>
<div class="borderRightLine"
:style="{display:nodeAttrForm.border.find(e=>e.type==='right').isShow?'block':'none'}"></div>
<div class="borderRightArea"
@click="nodeAttrForm.border.find(e=>e.type==='right').isShow = !nodeAttrForm.border.find(e=>e.type==='right').isShow"></div>
<div class="borderBottomLine"
:style="{display:nodeAttrForm.border.find(e=>e.type==='bottom').isShow?'block':'none'}"></div>
<div class="borderBottomArea"
@click="nodeAttrForm.border.find(e=>e.type==='bottom').isShow = !nodeAttrForm.border.find(e=>e.type==='bottom').isShow"></div>
<div class="borderLeftLine"
:style="{display:nodeAttrForm.border.find(e=>e.type==='left').isShow?'block':'none'}"></div>
<div class="borderLeftArea"
@click="nodeAttrForm.border.find(e=>e.type==='left').isShow = !nodeAttrForm.border.find(e=>e.type==='left').isShow"></div>
</div>
</el-form-item>
<el-form-item label="上框设置"
v-if="Object.keys(nodeAttrForm).includes('border') && nodeAttrForm.border.find(e=>e.type==='top').isShow">
<el-input
v-model="nodeAttrForm.border.find(e=>e.type==='top').width"
style=" width: 90px"
class="borderOption"
>
<template #append>px</template>
</el-input>
<el-dropdown @command="(e)=>{nodeAttrForm.border.find(v=>v.type==='top').borderType = e}">
<div class="borderType">
<div class="borderView"
:style="`border-bottom: 2px ${nodeAttrForm.border.find(e=>e.type==='top').borderType} #000;`"></div>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="solid">
<div style="width: 100%;height: 20px;padding-top: 9px">
<div style="width: 50px;margin: 0 auto;height: 0px;border-bottom: 2px solid #000"></div>
</div>
</el-dropdown-item>
<el-dropdown-item command="dashed">
<div style="width: 100%;height: 20px;padding-top: 9px">
<div style="width: 50px;margin: 0 auto;height: 0px;border-bottom: 2px dashed #000"></div>
</div>
</el-dropdown-item>
<el-dropdown-item command="dotted">
<div style="width: 100%;height: 20px;padding-top: 9px">
<div style="width: 50px;margin: 0 auto;height: 0px;border-bottom: 2px dotted #000"></div>
</div>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-color-picker style="margin-left: 8px; "
v-model="nodeAttrForm.border.find(e=>e.type==='top').color"
show-alpha />
</el-form-item>
<el-form-item label="右框设置"
v-if="Object.keys(nodeAttrForm).includes('border') && nodeAttrForm.border.find(e=>e.type==='right').isShow">
<el-input
v-model="nodeAttrForm.border.find(e=>e.type==='right').width"
style=" width: 90px"
class="borderOption"
>
<template #append>px</template>
</el-input>
<el-dropdown @command="(e)=>{nodeAttrForm.border.find(v=>v.type==='right').borderType = e}">
<div class="borderType">
<div class="borderView"
:style="`border-bottom: 2px ${nodeAttrForm.border.find(e=>e.type==='right').borderType} #000;`"></div>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="solid">
<div style="width: 100%;height: 20px;padding-top: 9px">
<div style="width: 50px;margin: 0 auto;height: 0px;border-bottom: 2px solid #000"></div>
</div>
</el-dropdown-item>
<el-dropdown-item command="dashed">
<div style="width: 100%;height: 20px;padding-top: 9px">
<div style="width: 50px;margin: 0 auto;height: 0px;border-bottom: 2px dashed #000"></div>
</div>
</el-dropdown-item>
<el-dropdown-item command="dotted">
<div style="width: 100%;height: 20px;padding-top: 9px">
<div style="width: 50px;margin: 0 auto;height: 0px;border-bottom: 2px dotted #000"></div>
</div>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-color-picker style="margin-left: 8px; "
v-model="nodeAttrForm.border.find(e=>e.type==='right').color"
show-alpha />
</el-form-item>
<el-form-item label="下框设置"
v-if="Object.keys(nodeAttrForm).includes('border') && nodeAttrForm.border.find(e=>e.type==='bottom').isShow">
<el-input
v-model="nodeAttrForm.border.find(e=>e.type==='bottom').width"
style=" width: 90px"
class="borderOption"
>
<template #append>px</template>
</el-input>
<el-dropdown @command="(e)=>{nodeAttrForm.border.find(v=>v.type==='bottom').borderType = e}">
<div class="borderType">
<div class="borderView"
:style="`border-bottom: 2px ${nodeAttrForm.border.find(e=>e.type==='bottom').borderType} #000;`"></div>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="solid">
<div style="width: 100%;height: 20px;padding-top: 9px">
<div style="width: 50px;margin: 0 auto;height: 0px;border-bottom: 2px solid #000"></div>
</div>
</el-dropdown-item>
<el-dropdown-item command="dashed">
<div style="width: 100%;height: 20px;padding-top: 9px">
<div style="width: 50px;margin: 0 auto;height: 0px;border-bottom: 2px dashed #000"></div>
</div>
</el-dropdown-item>
<el-dropdown-item command="dotted">
<div style="width: 100%;height: 20px;padding-top: 9px">
<div style="width: 50px;margin: 0 auto;height: 0px;border-bottom: 2px dotted #000"></div>
</div>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-color-picker style="margin-left: 8px; "
v-model="nodeAttrForm.border.find(e=>e.type==='bottom').color"
show-alpha />
</el-form-item>
<el-form-item label="左框设置"
v-if="Object.keys(nodeAttrForm).includes('border') && nodeAttrForm.border.find(e=>e.type==='left').isShow">
<el-input
v-model="nodeAttrForm.border.find(e=>e.type==='left').width"
style=" width: 90px"
class="borderOption"
>
<template #append>px</template>
</el-input>
<el-dropdown @command="(e)=>{nodeAttrForm.border.find(v=>v.type==='left').borderType = e}">
<div class="borderType">
<div class="borderView"
:style="`border-bottom: 2px ${nodeAttrForm.border.find(e=>e.type==='left').borderType} #000;`"></div>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="solid">
<div style="width: 100%;height: 20px;padding-top: 9px">
<div style="width: 50px;margin: 0 auto;height: 0px;border-bottom: 2px solid #000"></div>
</div>
</el-dropdown-item>
<el-dropdown-item command="dashed">
<div style="width: 100%;height: 20px;padding-top: 9px">
<div style="width: 50px;margin: 0 auto;height: 0px;border-bottom: 2px dashed #000"></div>
</div>
</el-dropdown-item>
<el-dropdown-item command="dotted">
<div style="width: 100%;height: 20px;padding-top: 9px">
<div style="width: 50px;margin: 0 auto;height: 0px;border-bottom: 2px dotted #000"></div>
</div>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-color-picker style="margin-left: 8px; "
v-model="nodeAttrForm.border.find(e=>e.type==='left').color"
show-alpha />
</el-form-item>
</el-form>
</div>
</div>
<!-- <View v-if="isView" v-model:isView="isView" />-->
</div>
</template>
<script setup lang="ts">
@ -231,8 +411,13 @@ const logEvent = async (eventname, event) => {
nodeData.value = {};
break;
case 'click':
if (nodes.value.filter(e => e.selected).length === 1) {
nodeAttrForm.value = event.node.data.options;
nodeData.value = JSON.parse(JSON.stringify(event.node));
} else {
nodeAttrForm.value = {};
nodeData.value = {};
}
break;
case 'nodeDrag':
if (event.nodes.length === 1) {
@ -252,6 +437,9 @@ const logEvent = async (eventname, event) => {
nodeData.value = {};
}
break;
case 'selectionEnd':
console.log(event);
break;
}
};
// const nodes = ref([{
@ -315,7 +503,6 @@ onMounted(() => {
});
watch(() => flowRef.value?.viewport, () => {
if (flowRef.value && (flowRef.value.viewport.x !== 0 || flowRef.value.viewport.y !== 0)) {
console.log('重置原点');
flowRef.value.setTransform({
x: 0,
y: 0,
@ -339,6 +526,12 @@ const nodeChange = () => {
};
</script>
<style lang="less" scoped>
.borderOption {
:deep(.el-input-group__append) {
padding-left: 8px;
padding-right: 8px;
}
}
:deep(.vue-flow__node-area) {
z-index: -1 !important;
pointer-events: none !important;
@ -388,5 +581,92 @@ const nodeChange = () => {
.flowArea {
border-right: 1px solid #ccc;
}
.borderArea {
width: 200px;
height: 200px;
position: relative;
}
.borderTopArea, .borderBottomArea {
position: absolute;
left: 50px;
width: 100px;
height: 20px;
background: #0000;
border: 1px solid #ccc;
}
.borderTopArea {
top: 11px;
}
.borderBottomArea {
bottom: 11px;
}
.borderRightArea, .borderLeftArea {
position: absolute;
top: 50px;
width: 20px;
height: 100px;
background: #0000;
border: 1px solid #ccc;
}
.borderRightArea {
right: 11px;
}
.borderLeftArea {
left: 11px;
}
.borderTopLine, .borderBottomLine {
position: absolute;
left: 30px;
width: 140px;
height: 2px;
background: #000;
}
.borderTopLine {
top: 20px;
}
.borderBottomLine {
bottom: 20px;
}
.borderRightLine, .borderLeftLine {
position: absolute;
top: 30px;
width: 2px;
height: 140px;
background: #000;
}
.borderRightLine {
right: 20px;
}
.borderLeftLine {
left: 20px;
}
.borderType {
margin-left: 8px;
width: 60px;
height: 30px;
border: 1px solid #ccc;
position: relative;
.borderView {
position: absolute;
top: calc(50% - 1px);
width: 80%;
left: 10%;
}
}
</style>

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

@ -5,7 +5,7 @@
: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'}">
: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'}">
<el-dropdown @command="spanChange" style="width: 100%;height: 100%" v-if="!props.isPrint">
<div class="dropDiv" :style="{justifyContent: props.data.options.verticalAlign || 'center'}">
<span class="span" :style="{textAlign: props.data.options.horizontalAlign || 'center'}">
@ -92,6 +92,28 @@ watch(() => JSON.parse(JSON.stringify(props.data.options.default)), (obj1, obj2)
}
}, { deep: true, immediate: 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 lang="less">
.custom-node {

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

@ -6,7 +6,7 @@
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="{...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',}">
<span
v-if="eleData"
:style="{color:props.data.options.color,fontSize:props.dimensions.height+'px'}">
@ -65,7 +65,28 @@ watch(() => JSON.parse(JSON.stringify(props.data.options.default)), (obj1, 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 {

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

@ -6,7 +6,7 @@
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="{...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'}">
<span
:style="{color:props.data.options.color,fontSize:12+'px'}">
{{ eleData }}
@ -66,6 +66,28 @@ watch(() => JSON.parse(JSON.stringify(props.data.options.dateTimeType)), (obj1,
}
}, { 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 {

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

@ -15,7 +15,15 @@ const cmToPx = (cm) => {
const getOption = (e, name) => {
let commonOption = { field: name };
if (e === 'text') {
return { ...commonOption, default: '' };
return {
...commonOption,
default: '',
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 if (e === 'image') {
return { ...commonOption, imageSrc: '', imageType: '' };
} else if (e === 'barCode') {
@ -23,14 +31,27 @@ const getOption = (e, name) => {
} else if (e === 'QRCode') {
return { ...commonOption, default: '' };
} else if (e === 'dateTime') {
return { ...commonOption, dateTimeType: '' };
return {
...commonOption,
dateTimeType: '',
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 if (e === 'select') {
return {
...commonOption,
default: '',
selectOptions: [],
horizontalAlign: 'center',
verticalAlign: '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 {};

Write Preview
Loading…
Cancel
Save