|
|
|
|
@ -7,10 +7,18 @@ |
|
|
|
|
<body> |
|
|
|
|
<div id="form" v-cloak> |
|
|
|
|
<el-header class="ms-header ms-tr" height="50px"> |
|
|
|
|
<el-button type="primary" icon="iconfont icon-baocun" size="mini" @click="save()" :loading="saveDisabled">保存</el-button> |
|
|
|
|
<el-button size="mini" icon="iconfont icon-fanhui" plain onclick="javascript:history.go(-1)" v-if="returnIsShow">返回</el-button> |
|
|
|
|
<el-button type="primary" icon="iconfont icon-baocun" size="mini" @click="save()" :loading="saveDisabled">保存 |
|
|
|
|
</el-button> |
|
|
|
|
<el-button size="mini" icon="iconfont icon-fanhui" plain onclick="javascript:history.go(-1)" |
|
|
|
|
v-if="returnIsShow">返回 |
|
|
|
|
</el-button> |
|
|
|
|
</el-header> |
|
|
|
|
<el-main class="ms-container"> |
|
|
|
|
<el-tabs v-model="activeName" style="height: calc(100% - 10px);"> |
|
|
|
|
<el-tab-pane v-for="(item, index) in editableTabs" |
|
|
|
|
:key="index" |
|
|
|
|
:label="item.title" |
|
|
|
|
:name="item.name"> |
|
|
|
|
<el-scrollbar class="ms-scrollbar" style="height: 100%;"> |
|
|
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="120px" size="mini"> |
|
|
|
|
<el-row |
|
|
|
|
@ -30,6 +38,7 @@ |
|
|
|
|
<el-form-item label="所属栏目" prop="contentCategoryId"> |
|
|
|
|
<tree-select :props="{value: 'id',label: 'categoryTitle',children: 'children'}" |
|
|
|
|
:options="contentCategoryIdOptions" :style="{width:'100%'}" |
|
|
|
|
@change="categoryChange" |
|
|
|
|
v-model="form.contentCategoryId"></tree-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-col> |
|
|
|
|
@ -45,7 +54,8 @@ |
|
|
|
|
:disabled="false" |
|
|
|
|
:multiple="true" :clearable="true" |
|
|
|
|
placeholder="请选择文章类型"> |
|
|
|
|
<el-option v-for='item in contentTypeOptions' :key="item.dictValue" :value="item.dictValue" |
|
|
|
|
<el-option v-for='item in contentTypeOptions' :key="item.dictValue" |
|
|
|
|
:value="item.dictValue" |
|
|
|
|
:label="item.dictLabel"></el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
@ -99,7 +109,8 @@ |
|
|
|
|
<el-col span="12"> |
|
|
|
|
<el-form-item label="" prop="contentDisplay"> |
|
|
|
|
<template slot='label'>是否显示 |
|
|
|
|
<el-popover slot="label" placement="top-start" title="提示" width="200" trigger="hover" content="选择否后前端将不显示，需要重新生成才有效果"> |
|
|
|
|
<el-popover slot="label" placement="top-start" title="提示" width="200" trigger="hover" |
|
|
|
|
content="选择否后前端将不显示，需要重新生成才有效果"> |
|
|
|
|
<i class="el-icon-question" slot="reference"></i> |
|
|
|
|
</el-popover> |
|
|
|
|
</template> |
|
|
|
|
@ -125,7 +136,8 @@ |
|
|
|
|
</el-row> |
|
|
|
|
<el-form-item label="" prop="contentImg"> |
|
|
|
|
<template slot='label'>文章缩略图 |
|
|
|
|
<el-popover slot="label" placement="top-start" title="提示" width="200" trigger="hover" content="文章缩略图,支持jpg格式"> |
|
|
|
|
<el-popover slot="label" placement="top-start" title="提示" width="200" trigger="hover" |
|
|
|
|
content="文章缩略图,支持jpg格式"> |
|
|
|
|
<i class="el-icon-question" slot="reference"></i> |
|
|
|
|
</el-popover> |
|
|
|
|
</template> |
|
|
|
|
@ -166,10 +178,14 @@ |
|
|
|
|
</el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="文章内容" prop="contentDetails"> |
|
|
|
|
<vue-ueditor-wrap style="line-height: 0px" v-model="form.contentDetails" :config="editorConfig"></vue-ueditor-wrap> |
|
|
|
|
<vue-ueditor-wrap style="line-height: 0px" v-model="form.contentDetails" |
|
|
|
|
:config="editorConfig"></vue-ueditor-wrap> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
<div :id="'model'+index" v-else></div> |
|
|
|
|
</el-scrollbar> |
|
|
|
|
</el-tab-pane> |
|
|
|
|
</el-tabs> |
|
|
|
|
</el-main> |
|
|
|
|
</div> |
|
|
|
|
</body> |
|
|
|
|
@ -179,8 +195,10 @@ |
|
|
|
|
el: '#form', |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
date1574910623000_52656:null, |
|
|
|
|
saveDisabled: false, |
|
|
|
|
activeName: 'form', |
|
|
|
|
model:undefined,//自定义模型实例 |
|
|
|
|
editableTabs:[{title:'文章编辑',name:'form'}], |
|
|
|
|
editorConfig: { |
|
|
|
|
imageScaleEnabled: true, |
|
|
|
|
autoHeightEnabled: true, |
|
|
|
|
@ -232,11 +250,23 @@ |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
watch:{ |
|
|
|
|
watch: {}, |
|
|
|
|
computed:{ |
|
|
|
|
currCategory(){ |
|
|
|
|
var that = this; |
|
|
|
|
return this.contentCategoryIdOptions.find(function(value){ |
|
|
|
|
return value.id===that.form.contentCategoryId |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
save() { |
|
|
|
|
var that = this; |
|
|
|
|
//自定义模型需要验证 |
|
|
|
|
if(this.model&&!this.model.validate()){ |
|
|
|
|
this.activeName = 'custom-name'; |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
var url = ms.manager + "/cms/content/save.do" |
|
|
|
|
if (that.form.id > 0) { |
|
|
|
|
url = ms.manager + "/cms/content/update.do"; |
|
|
|
|
@ -249,6 +279,11 @@ |
|
|
|
|
data.contentImg = JSON.stringify(data.contentImg); |
|
|
|
|
ms.http.post(url, data).then(function (data) { |
|
|
|
|
if (data.result) { |
|
|
|
|
//保存时需要赋值关联ID |
|
|
|
|
if(that.model){ |
|
|
|
|
that.model.form.linkId = data.id; |
|
|
|
|
that.model.save() |
|
|
|
|
} |
|
|
|
|
that.$notify({ |
|
|
|
|
title: '成功', |
|
|
|
|
message: '保存成功', |
|
|
|
|
@ -265,10 +300,72 @@ |
|
|
|
|
that.saveDisabled = false; |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
this.activeName = 'form'; |
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
removeModel(){ |
|
|
|
|
var that =this; |
|
|
|
|
var model= document.getElementById('model1') |
|
|
|
|
var custom= document.getElementById('c_model') |
|
|
|
|
if(custom){ |
|
|
|
|
model.removeChild(custom) |
|
|
|
|
} |
|
|
|
|
that.model = undefined; |
|
|
|
|
}, |
|
|
|
|
categoryChange(){ |
|
|
|
|
this.changeModel(); |
|
|
|
|
}, |
|
|
|
|
changeModel(){ |
|
|
|
|
var that = this; |
|
|
|
|
that.editableTabs = [that.editableTabs[0]]; |
|
|
|
|
this.removeModel(); |
|
|
|
|
if(this.currCategory){ |
|
|
|
|
if(this.currCategory.categoryCmId){ |
|
|
|
|
ms.http.get(ms.manager + "/mdiy/model/get.do",{ |
|
|
|
|
id:this.currCategory.categoryCmId |
|
|
|
|
}).then(function (data) { |
|
|
|
|
if(data.id){ |
|
|
|
|
that.rederModel(data,JSON.parse(data.modelJson)) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
rederModel(modelEntity,data){ |
|
|
|
|
var that =this; |
|
|
|
|
that.editableTabs.push({ |
|
|
|
|
title: modelEntity.modelName, |
|
|
|
|
name: 'custom-name', |
|
|
|
|
}); |
|
|
|
|
this.removeModel(); |
|
|
|
|
that.$nextTick(function () { |
|
|
|
|
var div=document.createElement('div') |
|
|
|
|
div.id='c_model' |
|
|
|
|
var model= document.getElementById('model1') |
|
|
|
|
model.appendChild(div) |
|
|
|
|
var s=document.createElement('script') |
|
|
|
|
s.innerHTML=data.script |
|
|
|
|
var con=document.createElement('div') |
|
|
|
|
con.id='custom-model'; |
|
|
|
|
con.innerHTML=data.html; |
|
|
|
|
div.appendChild(s); |
|
|
|
|
div.appendChild(con); |
|
|
|
|
//初始化自定义模型并传入关联参数 |
|
|
|
|
that.model = new custom_model( |
|
|
|
|
{ |
|
|
|
|
data:{ |
|
|
|
|
title:modelEntity.modelName, |
|
|
|
|
modelId:modelEntity.id, |
|
|
|
|
form:{ |
|
|
|
|
linkId:that.id |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
getValue(data) { |
|
|
|
|
this.form.contentCategoryId = data.id; |
|
|
|
|
}, |
|
|
|
|
@ -288,6 +385,7 @@ |
|
|
|
|
} else { |
|
|
|
|
res.data.contentImg = [] |
|
|
|
|
} |
|
|
|
|
that.changeModel(); |
|
|
|
|
that.form = res.data; |
|
|
|
|
} |
|
|
|
|
}).catch(function (err) { |
|
|
|
|
@ -384,9 +482,11 @@ |
|
|
|
|
.el-select { |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
body { |
|
|
|
|
overflow: hidden; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
#form { |
|
|
|
|
overflow: hidden; |
|
|
|
|
} |
|
|
|
|
|
sgjj
6 years ago