<template>
|
<!--
|
作者：wangxw
|
时间：2020-06-10
|
描述：页面-页面列表-添加页面
|
-->
|
<div v-loading="loading" class="diy-container clearfix">
|
<!--类别选择-->
|
<div class="diy-menu"><Type v-if="!loading" :defaultData="defaultData"></Type></div>
|
|
<!--手机diy容器-->
|
<div class="diy-phone"><Model v-if="!loading" ref="model" :form="form" :defaultData="defaultData" :diyData="diyData"></Model></div>
|
|
<!--参数设置-->
|
<div class="diy-info"><Params v-if="!loading" :form="form" :defaultData="defaultData" :diyData="diyData"></Params></div>
|
|
<!--提交-->
|
<div class="common-button-wrapper">
|
<el-button size="small" type="info" @click="gotoBack">返回上一页</el-button>
|
<el-button size="small" type="primary" @click="Submit()" :loading="loading">保存</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {deepClone} from '@/utils/base.js'
|
import PageApi from '@/api/page.js';
|
import Type from './diy/Type.vue';
|
import Model from './diy/Model.vue';
|
import Params from './diy/Params.vue';
|
export default {
|
components: {
|
/*组件类别*/
|
Type,
|
/*组件信息*/
|
Model,
|
/*参数信息*/
|
Params
|
},
|
data() {
|
return {
|
/*是否正在加载*/
|
loading: true,
|
/*默认数据*/
|
defaultData: {},
|
/*组件数据列表*/
|
diyData: {
|
items: []
|
},
|
opts: {},
|
/*表单对象*/
|
form: {
|
umeditor: {},
|
/*当前选中*/
|
curItem: {},
|
/*当前选中的元素（下标）*/
|
selectedIndex: -1
|
}
|
};
|
},
|
created() {
|
/*获取列表*/
|
this.getData();
|
},
|
methods: {
|
|
/*获取初始化数据*/
|
getData() {
|
let self = this;
|
PageApi.toAddPage({}, true)
|
.then(res => {
|
self.defaultData = res.data.defaultData;
|
self.diyData = res.data.jsonData;
|
self.form.curItem=self.diyData.page;
|
self.opts = res.data.opts;
|
self.loading = false;
|
})
|
.catch(error => {
|
self.loading = false;
|
});
|
},
|
|
/**
|
* 新增Diy组件
|
* @param key
|
*/
|
onAddItem: function(key) {
|
// 复制默认diy组件数据
|
let item = deepClone(this.defaultData[key]);
|
this.diyData.items.push(item);
|
// 编辑当前选中的元素
|
this.$refs.model.onEditer(this.diyData.items.length - 1);
|
},
|
|
/*添加页面*/
|
Submit() {
|
let self = this;
|
let params = self.diyData;
|
if (params.items.length < 1) {
|
self.$message({
|
message: '至少要选择一个组件',
|
type: 'warning'
|
});
|
return;
|
}
|
self.loading = true;
|
PageApi.addPage(
|
{
|
params: JSON.stringify(params)
|
},
|
true
|
)
|
.then(data => {
|
self.loading = false;
|
self.$message({
|
message: '恭喜你，添加成功',
|
type: 'success'
|
});
|
self.gotoBack();
|
})
|
.catch(error => {
|
self.loading = false;
|
});
|
},
|
|
/*返回上一页面*/
|
gotoBack(){
|
this.$router.back(-1);
|
}
|
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/page/diy.scss';
|
</style>
|
