HolyKnightIX пре 9 месеци
родитељ
комит
b47e331c90
2 измењених фајлова са 55 додато и 108 уклоњено
  1. +26
    -24
      src/components/panel/page.vue
  2. +29
    -84
      src/components/panel/style.vue

+ 26
- 24
src/components/panel/page.vue Прегледај датотеку

@@ -9,44 +9,28 @@
<el-row>
<el-col :span="12">
<el-form-item label="模板宽度">
<el-input-number
v-model="pageInfo.width"
controls-position="right"
:min="0"
class="min-input"
></el-input-number>
<el-input-number v-model="pageInfo.width" controls-position="right" :min="0" class="min-input"
@input="shapeChanged('width')"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="模板高度">
<el-input-number
v-model="pageInfo.height"
controls-position="right"
:min="0"
class="min-input"
></el-input-number>
<el-input-number v-model="pageInfo.height" controls-position="right" :min="0" class="min-input"
@input="shapeChanged('height')"></el-input-number>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item label="纸张宽度">
<el-input-number
v-model="pageInfo.pageWidth"
controls-position="right"
:min="0"
class="min-input"
></el-input-number>
<el-input-number v-model="pageInfo.pageWidth" controls-position="right" :min="0" class="min-input"
@input="shapeChanged('pageWidth')"></el-input-number>
<span class="unit-text">(mm)</span>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="纸张高度">
<el-input-number
v-model="pageInfo.pageHeight"
controls-position="right"
:min="0"
class="min-input"
></el-input-number>
<el-input-number v-model="pageInfo.pageHeight" controls-position="right" :min="0" class="min-input"
@input="shapeChanged('pageHeight')"></el-input-number>
<span class="unit-text">(mm)</span>
</el-form-item>
</el-row>
@@ -61,6 +45,24 @@ export default {
return this.$vptd.state.page
},
},
methods: {
// 宽度与高度的比例必须约等于纸张宽度与纸张高度的比例,否则拖拽组件将错位
shapeChanged(element) {
if (element === "width") {
const proportion = this.pageInfo.width / this.pageInfo.height
this.pageInfo.pageWidth = Math.ceil(proportion * this.pageInfo.pageHeight)
} else if (element === "height") {
const proportion = this.pageInfo.height / this.pageInfo.width
this.pageInfo.pageHeight = Math.ceil(proportion * this.pageInfo.pageWidth)
} else if (element === "pageWidth") {
const proportion = this.pageInfo.pageWidth / this.pageInfo.pageHeight
this.pageInfo.width = Math.ceil(proportion * this.pageInfo.height)
} else if (element === "pageHeight") {
const proportion = this.pageInfo.pageHeight / this.pageInfo.pageWidth
this.pageInfo.height = Math.ceil(proportion * this.pageInfo.width)
}
}
}
}
</script>


+ 29
- 84
src/components/panel/style.vue Прегледај датотеку

@@ -5,44 +5,28 @@
<el-row>
<el-col :span="12">
<el-form-item label="宽度">
<el-input-number
v-model="activeElement.width"
controls-position="right"
:min="1"
class="min-input"
></el-input-number>
<el-input-number v-model="activeElement.width" controls-position="right" :min="1"
class="min-input"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="高度">
<el-input-number
v-model="activeElement.height"
controls-position="right"
:min="1"
class="min-input"
></el-input-number>
<el-input-number v-model="activeElement.height" controls-position="right" :min="1"
class="min-input"></el-input-number>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="横坐标">
<el-input-number
v-model="activeElement.left"
controls-position="right"
:min="0"
class="min-input"
></el-input-number>
<el-input-number v-model="activeElement.left" controls-position="right" :min="0"
class="min-input"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="纵坐标">
<el-input-number
v-model="activeElement.top"
controls-position="right"
:min="0"
class="min-input"
></el-input-number>
<el-input-number v-model="activeElement.top" controls-position="right" :min="0"
class="min-input"></el-input-number>
</el-form-item>
</el-col>
</el-row>
@@ -50,60 +34,40 @@
<el-row>
<el-col :span="12">
<el-form-item label="字号">
<el-input-number
:disabled="activeElement.style.FontSize===undefined"
v-model="activeElement.style.FontSize"
controls-position="right"
:min="0"
class="min-input"
></el-input-number>
<el-input-number :disabled="activeElement.style.FontSize === undefined" v-model="activeElement.style.FontSize"
controls-position="right" :min="0" class="min-input"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="加粗">
<el-switch
:disabled="activeElement.style.Bold===undefined"
v-model="activeElement.style.Bold"
:active-value="true"
:inactive-value="false"
></el-switch>
<el-switch :disabled="activeElement.style.Bold === undefined" v-model="activeElement.style.Bold"
:active-value="true" :inactive-value="false"></el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="字体颜色">
<el-color-picker
:disabled="activeElement.style.FontColor===undefined"
v-model="activeElement.style.FontColor"
></el-color-picker>
<el-color-picker :disabled="activeElement.style.FontColor === undefined"
v-model="activeElement.style.FontColor"></el-color-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="边框颜色">
<el-color-picker
:disabled="activeElement.style.BorderColor===undefined"
v-model="activeElement.style.BorderColor"
></el-color-picker>
<el-color-picker :disabled="activeElement.style.BorderColor === undefined"
v-model="activeElement.style.BorderColor"></el-color-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="条码值">
<el-switch
:disabled="activeElement.style.ShowBarText===undefined"
v-model="activeElement.style.ShowBarText"
:active-value="true"
:inactive-value="false"
></el-switch>
<el-switch :disabled="activeElement.style.ShowBarText === undefined" v-model="activeElement.style.ShowBarText"
:active-value="true" :inactive-value="false"></el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item label="对齐方式">
<el-radio-group
:disabled="activeElement.style.Alignment===undefined"
v-model="activeElement.style.Alignment"
>
<el-radio-group :disabled="activeElement.style.Alignment === undefined" v-model="activeElement.style.Alignment">
<el-radio :label="'left'">左对齐</el-radio>
<el-radio :label="'center'">居中</el-radio>
<el-radio :label="'right'">右对齐</el-radio>
@@ -113,50 +77,31 @@
<el-row>
<el-col :span="12">
<el-form-item label="条码类型">
<el-select
:disabled="activeElement.style.codeType===undefined"
v-model="activeElement.style.codeType"
class="min-input"
>
<el-select :disabled="activeElement.style.codeType === undefined" v-model="activeElement.style.codeType"
class="min-input">
<el-option v-for="val in codeTypeArray" :key="val" :label="val" :value="val" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="打印类型">
<el-select
:disabled="activeElement.style.ItemType===undefined"
v-model="activeElement.style.ItemType"
class="min-input"
>
<el-option
v-for="val in itemTypeArray"
:key="val.value"
:label="val.label"
:value="val.value"
/>
<el-select :disabled="activeElement.style.ItemType === undefined" v-model="activeElement.style.ItemType"
class="min-input">
<el-option v-for="val in itemTypeArray" :key="val.value" :label="val.label" :value="val.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="高度自动">
<el-switch
:disabled="activeElement.style.AutoHeight===undefined"
v-model="activeElement.style.AutoHeight"
:active-value="true"
:inactive-value="false"
></el-switch>
<el-switch :disabled="activeElement.style.AutoHeight === undefined" v-model="activeElement.style.AutoHeight"
:active-value="true" :inactive-value="false"></el-switch>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="下边距">
<el-input-number
:disabled="activeElement.style.BottomMargin===undefined || !activeElement.style.AutoHeight"
v-model="activeElement.style.BottomMargin"
controls-position="right"
:min="0"
class="min-input"
></el-input-number>
<el-input-number :disabled="activeElement.style.BottomMargin === undefined || !activeElement.style.AutoHeight"
v-model="activeElement.style.BottomMargin" controls-position="right" :min="0"
class="min-input"></el-input-number>
</el-form-item>
</el-col>
</el-row>


Loading…
Откажи
Сачувај