<template>
|
<div class="customPublicArea">
|
<span class="deleteDiy"><i class="el-icon-delete" @click="deleteDiy"></i></span>
|
<div>
|
<el-form-item label="坐标 X：" :required="true">
|
<el-input-number :min="10" :max="setXmax()" :disabled="isDisabled" v-model="form.x">
|
</el-input-number>
|
</el-form-item>
|
<el-form-item label="坐标 Y：" :required="true">
|
<el-input-number :min="44" :max="setYmax()" v-model="form.y"></el-input-number>
|
</el-form-item>
|
</div>
|
<div>
|
<el-form-item label="宽度：" :required="true">
|
<el-input-number :min="0" :max="setWmax()" :disabled="isDisabled" v-model="form.w">
|
</el-input-number>
|
</el-form-item>
|
<el-form-item label="高度：" :required="true">
|
<el-input-number :min="0" :max="setHmax()" :disabled="isDisabled" v-model="form.h">
|
</el-input-number>
|
</el-form-item>
|
</div>
|
<slot name="functionArea"></slot>
|
</div>
|
</template>
|
|
<script>
|
import { mapMutations, mapState } from 'vuex'
|
export default {
|
props: ['form', 'isDisabled'],
|
data () {
|
return {
|
}
|
},
|
computed: {
|
...mapState(['diyList', 'mousedown'])
|
},
|
methods: {
|
...mapMutations(['updateMousedown']),
|
setXmax () {
|
let max = null
|
max = this.form.w + this.form.x >= 365 ? 365 - this.form.w : 365
|
return max
|
},
|
setYmax () {
|
let max = null
|
if (!document.getElementById('diy-page')) return
|
const height = parseInt(document.getElementById('diy-page').offsetHeight) + 44
|
max = this.form.y + this.form.h >= height ? height - this.form.h : height
|
return max
|
},
|
setWmax () {
|
let max = null
|
max = this.form.w + this.form.x >= 365 ? 365 - this.form.x : 355
|
return max
|
},
|
setHmax () {
|
let max = null
|
if (!document.getElementById('diy-page')) return
|
const height = parseInt(document.getElementById('diy-page').offsetHeight) - 10 + 44
|
max = this.form.y + this.form.h >= height ? height - this.form.y : height
|
return max
|
},
|
// 删除自定义diy
|
deleteDiy () {
|
this.$messageBox.confirm('确认删除当前页面吗？', '删除', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
const index = this.diyList.findIndex(item => { return item.id === this.form.id })
|
if (index !== -1) {
|
this.diyList.splice(index, 1)
|
let zIndex = 100
|
this.diyList.forEach(item => {
|
if (item.z) { item.z = zIndex++ }
|
})
|
this.updateMousedown({ activeId: this.diyList[this.diyList.length - 1].id, zIndex: this.mousedown.zIndex - 1 })
|
}
|
}).catch(() => { })
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
hr {
|
border: none;
|
height: 1px;
|
background-color: #e5e5e5;
|
margin-bottom: 10px;
|
}
|
.customPublicArea {
|
position: relative;
|
.deleteDiy {
|
position: absolute;
|
right: 0;
|
font-size: 20px;
|
cursor: pointer;
|
}
|
}
|
</style>
|
