修改打印
夜笙歌
2 weeks ago
parent
5cda2e5937
commit
37da31df69
@ -0,0 +1,138 @@
|
||||
<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.align,width:props.dimensions.width+'px',lineHeight:props.dimensions.height+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
|
||||
<el-input class="inputEl" v-model="text" style="width: 100%;height: 100%"
|
||||
v-if="!props.isPrint" />
|
||||
<div class="printDiv" :style="{justifyContent: props.data.options.verticalAlign || 'center'}"
|
||||
v-if="props.isPrint">
|
||||
<span class="span" :style="{textAlign: props.data.options.horizontalAlign || 'center'}">
|
||||
{{ text }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { defineProps } from 'vue';
|
||||
import { NodeResizer } from '@vue-flow/node-resizer';
|
||||
|
||||
const props = defineProps({
|
||||
isView: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
},
|
||||
isPrint: {
|
||||
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 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;
|
||||
}
|
||||
}, { 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 {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
.printDiv {
|
||||
min-width: 20px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.span {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.inputEl {
|
||||
border-bottom: 1px solid #409EFF;
|
||||
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
padding: 0 !important;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue