<template>
|
<div class="diyContentArea">
|
<el-form ref="form" :inline="true" label-width="110px" :model="form" size="mini">
|
<basic-set v-if="componentId === 'basicSet'" :form="form"></basic-set>
|
<custom-public-area v-else :form="form"></custom-public-area>
|
</el-form>
|
<div class="buttonPosition">
|
<el-button type="primary" size="mini" @click="submit">保存</el-button>
|
<el-button size="mini" @click="cancel">返回</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import basicSet from '@/views/diy-form/set-up/components/basicSet.vue'
|
import customPublicArea from '@/views/diy-form/set-up/components/customPublicArea.vue'
|
import { addDiy, editDiy } from '@/api/diy'
|
import { mapState } from 'vuex'
|
import { useSceneMap } from '../../commonData'
|
import { submitValidate } from '@/utils/submitValidate'
|
|
export default {
|
components: { basicSet, customPublicArea },
|
props: {
|
componentId: {
|
type: String,
|
default: null
|
},
|
diyDes: {
|
type: String,
|
default: null
|
}
|
},
|
data () {
|
return {
|
form: { x: 1 },
|
useSceneMap
|
}
|
},
|
computed: {
|
...mapState(['diyList', 'mousedown']),
|
actived () {
|
const arr = this.diyList.filter(v => {
|
return v.id === this.mousedown.activeId
|
})
|
return arr.length ? arr[0] : null
|
}
|
},
|
watch: {
|
actived: {
|
deep: true,
|
handler: function () {
|
this.form = this.actived
|
},
|
immediate: true
|
}
|
},
|
methods: {
|
// 设置diy主题(当主题存在后)
|
setDiyDes () {
|
this.$prompt('请输入主题名称', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
inputPattern: /^.{1,20}$/,
|
inputErrorMessage: '主题名称不能为空，且不超过20字符'
|
}).then(({ value }) => {
|
this.addDiy(value)
|
}).catch(() => {
|
this.$router.push(`${this.$baseRouter}/diy/list`)
|
})
|
},
|
/**
|
* 设置背景图片的高度
|
*/
|
getBasicsetBgHeight () {
|
this.diyList[0].bgImg.forEach(item => {
|
item.height = document.getElementById(item.id).height
|
})
|
},
|
/**
|
* 提交
|
*/
|
async submit () {
|
if (submitValidate(this.diyList, this.useSceneMap)) return // 表单验证
|
this.getBasicsetBgHeight()
|
console.log(this.diyList, '=====DIY配置信息1')
|
if (this.$route.query.id) {
|
const res = await editDiy({
|
id: this.$route.query.id,
|
styleInfo: JSON.stringify(this.diyList),
|
diyType: '1'
|
})
|
if (res.code === '0') {
|
this.$message({
|
message: '保存成功',
|
type: 'success'
|
})
|
// this.$router.push(`${this.$baseRouter}/diy/list`)
|
}
|
} else {
|
this.addDiy(this.diyDes)
|
}
|
},
|
/**
|
* 新增diy
|
*/
|
async addDiy (diyDes) {
|
const res = await addDiy({
|
diyDes,
|
styleInfo: JSON.stringify(this.diyList),
|
diyType: '1'
|
})
|
if (res.code === '0') {
|
this.$message({
|
message: '添加成功',
|
type: 'success'
|
})
|
this.$router.push(`${this.$baseRouter}/diy/list`)
|
} else {
|
setTimeout(() => {
|
this.setDiyDes()
|
}, 1000)
|
}
|
},
|
/**
|
* 取消
|
*/
|
cancel () {
|
this.$router.push(`${this.$baseRouter}/diy/list`)
|
}
|
}
|
}
|
</script>
|
|
<style lang='scss'>
|
.diyContentArea{
|
padding-top: 20px;
|
.el-form{
|
.el-form-item{
|
margin-right: 30px;
|
}
|
}
|
.basicTip{
|
color: #D70012;
|
padding-bottom: 20px;
|
font-size: 14px;
|
}
|
}
|
.buttonPosition{
|
text-align: center;
|
}
|
.itemTips {
|
font-size: 12px;
|
color: #909399;
|
}
|
.diyInput input{
|
width: 300px;
|
}
|
</style>
|
