@@ -32,8 +32,13 @@ | |||||
<el-input-number v-model="pageInfo.pageHeight" controls-position="right" :min="0" class="min-input" | <el-input-number v-model="pageInfo.pageHeight" controls-position="right" :min="0" class="min-input" | ||||
@input="shapeChanged('pageHeight')"></el-input-number> | @input="shapeChanged('pageHeight')"></el-input-number> | ||||
<span class="unit-text">(mm)</span> | <span class="unit-text">(mm)</span> | ||||
<span class="unit-text">(mm)</span> | |||||
</el-form-item> | </el-form-item> | ||||
</el-row> | </el-row> | ||||
<el-row> | |||||
<el-button size="mini" type="primary" @click="selectPage(1)">A4纸张预设</el-button> | |||||
<el-button size="mini" type="primary" @click="selectPage(2)">标准收据预设</el-button> | |||||
</el-row> | |||||
</el-form> | </el-form> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
@@ -50,9 +55,23 @@ export default { | |||||
// 宽度与高度的比例必须约等于纸张宽度与纸张高度的比例,否则拖拽组件将错位 | // 宽度与高度的比例必须约等于纸张宽度与纸张高度的比例,否则拖拽组件将错位 | ||||
shapeChanged(element) { | shapeChanged(element) { | ||||
if (element === "pageWidth") { | if (element === "pageWidth") { | ||||
this.pageInfo.width = this.pageInfo.pageWidth * 2 | |||||
this.pageInfo.width = this.pageInfo.pageWidth * 2.5 | |||||
} else if (element === "pageHeight") { | } else if (element === "pageHeight") { | ||||
this.pageInfo.height = this.pageInfo.pageHeight * 2 | |||||
this.pageInfo.height = this.pageInfo.pageHeight * 2.5 | |||||
} | |||||
}, | |||||
selectPage(num) { | |||||
if (num == 1) { | |||||
this.pageInfo.pageWidth = 210 | |||||
this.pageInfo.pageHeight = 297 | |||||
this.shapeChanged("pageWidth") | |||||
this.shapeChanged("pageHeight") | |||||
} else if (num == 2) { | |||||
this.pageInfo.pageWidth = 210 | |||||
this.pageInfo.pageHeight = 105 | |||||
this.shapeChanged("pageWidth") | |||||
this.shapeChanged("pageHeight") | |||||
} | } | ||||
} | } | ||||
} | } | ||||
@@ -1,25 +1,14 @@ | |||||
<template> | <template> | ||||
<div id="viewport" data-type="viewport" class="holder"> | <div id="viewport" data-type="viewport" class="holder"> | ||||
<div | |||||
:style="{ | |||||
height: page.height + 'px', | |||||
width: page.width + 'px', | |||||
backgroundImage: 'url('+backImg+')' | |||||
}" | |||||
class="screen" | |||||
> | |||||
<div :style="{ | |||||
height: page.height + 'px', | |||||
width: page.width + 'px', | |||||
backgroundImage: 'url(' + backImg + ')' | |||||
}" class="screen"> | |||||
<!-- 组件 --> | <!-- 组件 --> | ||||
<component | |||||
v-for="val in widgetStore" | |||||
:is="val.type" | |||||
:data-title="val.type" | |||||
:class="{'active': widgetId === val.uuid}" | |||||
:key="val.uuid" | |||||
:val="val" | |||||
:data-type="val.type" | |||||
:data-uuid="val.uuid" | |||||
class="layer" | |||||
></component> | |||||
<component v-for="val in widgetStore" :is="val.type" :data-title="val.type" | |||||
:class="{ 'active': widgetId === val.uuid }" :key="val.uuid" :val="val" :data-type="val.type" :data-uuid="val.uuid" | |||||
class="layer"></component> | |||||
<!-- 参考线 --> | <!-- 参考线 --> | ||||
<!-- <ref /> --> | <!-- <ref /> --> | ||||
@@ -153,7 +142,7 @@ export default { | |||||
.holder { | .holder { | ||||
display: flex; | display: flex; | ||||
justify-content: center; | justify-content: center; | ||||
overflow: auto; | |||||
overflow: scroll; | |||||
font-size: 0; | font-size: 0; | ||||
border: 1px solid #f5f5f5; | border: 1px solid #f5f5f5; | ||||
border-width: 0 1px; | border-width: 0 1px; | ||||
@@ -162,6 +151,7 @@ export default { | |||||
background-position: 0 0, 13px 13px; | background-position: 0 0, 13px 13px; | ||||
background-size: 26px 26px; | background-size: 26px 26px; | ||||
} | } | ||||
.screen { | .screen { | ||||
margin: 25px auto; | margin: 25px auto; | ||||
transform-origin: center top; | transform-origin: center top; | ||||