|
|
@@ -31,53 +31,54 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="box-canvs">
|
|
|
- <div class="box-canvs-main" :style="{ background: fromData.backgroundPictureUrl }">
|
|
|
+ <div class="box-canvs-main" :style="{ backgroundImage: `url(${fromData.backgroundPictureUrl?baseUrl+fromData.backgroundPictureUrl:''})` }">
|
|
|
<grid-layout
|
|
|
- :layout.sync="pageArray"
|
|
|
- :col-num="6"
|
|
|
- :row-height="30"
|
|
|
- :is-draggable="true"
|
|
|
+ :layout.sync="pageArray"
|
|
|
+ :col-num="6"
|
|
|
+ :row-height="30"
|
|
|
+ :is-draggable="true"
|
|
|
:is-resizable="false"
|
|
|
- :is-mirrored="false"
|
|
|
- :vertical-compact="false"
|
|
|
+ :is-mirrored="false"
|
|
|
+ :vertical-compact="false"
|
|
|
:prevent-collision="true"
|
|
|
- :margin="[10, 10]"
|
|
|
+ :margin="[10, 10]"
|
|
|
:use-css-transforms="true"
|
|
|
class="box-canvs-main-screen"
|
|
|
>
|
|
|
<grid-item
|
|
|
- v-for="(item, index) in pageArray"
|
|
|
+ v-for="(item, index) in pageArray"
|
|
|
+ :key="index"
|
|
|
:x="Number(item.x)"
|
|
|
:y="Number(item.y)"
|
|
|
:w="Number(item.w)"
|
|
|
- :h="Number(item.h)"
|
|
|
+ :h="Number(item.h)"
|
|
|
:i="item.i"
|
|
|
- :key="index"
|
|
|
@dblclick.native="showSeting(index)"
|
|
|
>
|
|
|
<div class="box-canvs-main-span">
|
|
|
- <div
|
|
|
- style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: center;"
|
|
|
+ <div
|
|
|
+ style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: center;background-size:cover"
|
|
|
:style="{
|
|
|
borderColor:item.borderColor,
|
|
|
borderWidth:item.border,
|
|
|
borderStyle:'solid',
|
|
|
borderRadius:item.borderRadius,
|
|
|
fontSize:item.fontSize,
|
|
|
- background:item.background,
|
|
|
- color:item.color
|
|
|
+ backgroundColor:item.background,
|
|
|
+ color:item.color,
|
|
|
+ backgroundImage:item.backgroundImage?`url(${baseUrl}${item.backgroundImage})`:''
|
|
|
}"
|
|
|
>
|
|
|
{{item.text}}
|
|
|
- </div>
|
|
|
- <i @click.stop="removeBtn(index)" class="el-icon-close"></i>
|
|
|
+ </div>
|
|
|
+ <i class="el-icon-close" @click.stop="removeBtn(index)" />
|
|
|
</div>
|
|
|
</grid-item>
|
|
|
</grid-layout>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="box-set">
|
|
|
- <el-tabs v-if="isShowSeting" type="card" v-model="activeName">
|
|
|
+ <el-tabs v-if="isShowSeting" v-model="activeName" type="card">
|
|
|
<el-tab-pane label="按钮基础配置" name="first">
|
|
|
<f-form
|
|
|
ref="btnForm"
|
|
|
@@ -201,6 +202,7 @@ export default {
|
|
|
}
|
|
|
]
|
|
|
const { currentCpn, pageArray } = this
|
|
|
+ if (!pageArray[currentCpn]) return []
|
|
|
const { type } = pageArray[currentCpn]
|
|
|
if (type === 'button') {
|
|
|
config = [
|
|
|
@@ -262,6 +264,16 @@ export default {
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
+ if(type === 'image') {
|
|
|
+ config = [
|
|
|
+ ...config,
|
|
|
+ {
|
|
|
+ itemType: 'fileUpload',
|
|
|
+ prop: 'backgroundImage',
|
|
|
+ label: '图片'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
return config
|
|
|
}
|
|
|
},
|
|
|
@@ -281,27 +293,24 @@ export default {
|
|
|
},
|
|
|
// 初始化按钮表单数据
|
|
|
initBtnFormData(index) {
|
|
|
- this.isShowSeting=false;
|
|
|
- this.pageArray[index].form = {
|
|
|
- ...this.pageArray[index]
|
|
|
- }
|
|
|
+ this.isShowSeting = false
|
|
|
this.currentCpn = index
|
|
|
this.$nextTick(() => {
|
|
|
this.isShowSeting = true
|
|
|
this.btnFromKey++
|
|
|
- });
|
|
|
+ })
|
|
|
},
|
|
|
// 详情
|
|
|
async handleInitData() {
|
|
|
const {dialogType,rowData} = this
|
|
|
- if(dialogType === 'add') {
|
|
|
+ if (dialogType === 'add') {
|
|
|
this.pageArray = []
|
|
|
- this.initFormData({ backgroundPictureUrl: '#fff' })
|
|
|
+ this.initFormData({ })
|
|
|
return
|
|
|
}
|
|
|
// 调接口获取详情
|
|
|
const res = await addTemplateApi.configDetail({ id: rowData.id });
|
|
|
- if (res.code !== 200) return this.initFormData({ backgroundPictureUrl: '#fff' })
|
|
|
+ if (res.code !== 200) return this.initFormData({ })
|
|
|
const from = { ...res.data, baseId: res.data.baseId.toString() }
|
|
|
this.pageArray = JSON.parse(res.data.components).map((item, index) => ({
|
|
|
...item,
|
|
|
@@ -445,6 +454,8 @@ export default {
|
|
|
border: 1px solid #000;
|
|
|
border-radius: 4px;
|
|
|
overflow-y: scroll;
|
|
|
+ background-color: #fff;
|
|
|
+ background-size: cover;
|
|
|
&::-webkit-scrollbar {
|
|
|
display: none;
|
|
|
}
|
