<template>
|
<el-dialog
|
width="80%"
|
title="布局预览"
|
top="5vh"
|
:visible.sync="innerVisible"
|
append-to-body
|
@close="$emit('update:currshowlist', false)"
|
:show="currshowlist"
|
class="preview-layout-dialog"
|
>
|
<div>
|
<el-row
|
:gutter="5"
|
v-for="(rowItem, i) in layOutJson"
|
:key="rowItem.uniqueId"
|
>
|
<div
|
:ref="'body_row_' + rowItem.uniqueId"
|
:style="'min-height:' + rowItem.minHeight + 'px'"
|
>
|
<el-col
|
:span="colItem.span"
|
v-for="(colItem, k) in rowItem.cols"
|
:key="colItem.uniqueId"
|
>
|
<div
|
style="background:#ecf5ff;"
|
:class="[colItem.isSelect ? 'selected-item' : '']"
|
>
|
<div v-if="colItem.type === 'item'" style="position:relative;">
|
<div>
|
<div class="preview-col-title">
|
<div
|
style="cursor: move;width:calc(100% - 18px)"
|
:title="colItem.label"
|
:id="colItem.uniqueId"
|
>
|
{{ colItem.label }}
|
</div>
|
<!--<div
|
style="width:18px;text-align:center;line-height:18px;background:#fff;color:#fff;border:1px solid #dcdfe6;cursor: pointer;"
|
></div>-->
|
<div
|
style="width:18px;text-align:center;line-height:18px;background:#67c23a;color:#fff;cursor: pointer;"
|
>
|
✓
|
</div>
|
<!--<div
|
style="width:18px;text-align:center;line-height:18px;background:#f56c6c;color:#fff;cursor: pointer;"
|
>
|
✕
|
</div>-->
|
</div>
|
<div class="preview-col-remark">
|
{{ colItem.remark }}
|
</div>
|
<div>
|
<el-input
|
class="preview-item-input"
|
v-model="inputVal1"
|
placeholder="请输入内容"
|
></el-input>
|
</div>
|
</div>
|
</div>
|
<div v-else style="position:relative;">
|
<div>
|
<div class="preview-group-title">
|
<div
|
style="cursor: move;line-height:30px;font-weight:bold;text-align:center;"
|
:id="colItem.uniqueId"
|
>
|
{{ colItem.label }}
|
</div>
|
</div>
|
<div class="preview-group-item">
|
<el-row
|
:gutter="5"
|
v-for="(child, j) in colItem.children"
|
:key="child.uniqueId"
|
>
|
<div class="preview-test-item-row-div">
|
<el-col
|
:span="childCol.span"
|
v-for="(childCol, m) in child.cols"
|
:key="childCol.uniqueId"
|
>
|
<div style="position:relative;">
|
<div
|
style="background:#f4f6fc;"
|
:class="[
|
childCol.isSelect ? 'selected-item' : ''
|
]"
|
>
|
<div class="preview-col-title">
|
<div
|
style="cursor: move;width:calc(100% - 18px)"
|
:title="childCol.label"
|
:id="childCol.uniqueId"
|
>
|
{{ childCol.label }}
|
</div>
|
<!--<div
|
style="width:18px;text-align:center;line-height:18px;background:#fff;color:#fff;border:1px solid #dcdfe6;cursor: pointer;"
|
></div>-->
|
<div
|
style="width:18px;text-align:center;line-height:18px;background:#67c23a;color:#fff;cursor: pointer;"
|
>
|
✓
|
</div>
|
<!--<div
|
style="width:18px;text-align:center;line-height:18px;background:#f56c6c;color:#fff;cursor: pointer;"
|
>
|
✕
|
</div>-->
|
</div>
|
<div>
|
<el-input
|
class="item-input"
|
v-model="inputVal"
|
placeholder="请输入内容"
|
></el-input>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</div>
|
</el-row>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</div>
|
</el-row>
|
</div>
|
</el-dialog>
|
</template>
|
<style>
|
.preview-col-title {
|
display: flex;
|
justify-content: space-between;
|
height: 18px;
|
text-align: center;
|
}
|
.preview-col-title div {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
.preview-col-remark {
|
border-top: 1px solid #ccc;
|
height: 16px;
|
font-size: 12px;
|
text-align: center;
|
}
|
.preview-item-input input {
|
height: 28px;
|
}
|
.preview-group-title {
|
height: 30px;
|
}
|
.preview-group-item {
|
border: 1px dashed #ccc;
|
}
|
.preview-test-item-row-div {
|
min-height: 60px;
|
}
|
</style>
|
<script>
|
export default {
|
props: {
|
currshowlist: {
|
type: Boolean,
|
default: false
|
},
|
layOutJson: {
|
type: Array,
|
default: () => {
|
return []
|
},
|
required: true
|
}
|
},
|
data() {
|
return {
|
innerVisible: false,
|
inputVal: '',
|
inputVal1: ''
|
}
|
},
|
methods: {},
|
watch: {
|
currshowlist() {
|
this.innerVisible = this.currshowlist
|
if (this.currshowlist) {
|
this.$nextTick(() => {
|
// this.getData()
|
})
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.preview-layout-dialog >>> .el-dialog__header {
|
padding: 10px 20px 10px;
|
}
|
.preview-layout-dialog >>> .el-dialog__header .el-dialog__headerbtn {
|
top: 10px;
|
}
|
.preview-layout-dialog >>> .el-dialog__body {
|
padding: 5px 15px;
|
}
|
|
.preview-layout-dialog >>> .el-dialog__footer {
|
padding: 5px 20px 10px;
|
}
|
|
.preview-layout-dialog >>> .el-dialog__body .avue-crud__pagination {
|
margin-top: 0px;
|
margin-bottom: 5px;
|
}
|
</style>
|
