Skip to content
GitLab
Commit f1a1ee7e authored by sgjj's avatar sgjj
Browse files

添加自定义模型

parent ad7d5402
Expand all Show whitespace changes
Inline Side-by-side
src/main/webapp/WEB-INF/manager/cms/content/form.ftl
View file @ f1a1ee7e
...@@ -5,12 +5,20 @@ ...@@ -5,12 +5,20 @@
<#include "../../include/head-file.ftl"> <#include "../../include/head-file.ftl">
</head> </head>
<body> <body>
<div id="form" v-cloak> <div id="form" v-cloak>
<el-header class="ms-header ms-tr" height="50px"> <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 type="primary" icon="iconfont icon-baocun" size="mini" @click="save()" :loading="saveDisabled">保存
<el-button size="mini" icon="iconfont icon-fanhui" plain onclick="javascript:history.go(-1)" v-if="returnIsShow">返回</el-button> </el-button>
<el-button size="mini" icon="iconfont icon-fanhui" plain onclick="javascript:history.go(-1)"
v-if="returnIsShow">返回
</el-button>
</el-header> </el-header>
<el-main class="ms-container"> <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-scrollbar class="ms-scrollbar" style="height: 100%;">
<el-form ref="form" :model="form" :rules="rules" label-width="120px" size="mini"> <el-form ref="form" :model="form" :rules="rules" label-width="120px" size="mini">
<el-row <el-row
...@@ -30,6 +38,7 @@ ...@@ -30,6 +38,7 @@
<el-form-item label="所属栏目" prop="contentCategoryId"> <el-form-item label="所属栏目" prop="contentCategoryId">
<tree-select :props="{value: 'id',label: 'categoryTitle',children: 'children'}" <tree-select :props="{value: 'id',label: 'categoryTitle',children: 'children'}"
:options="contentCategoryIdOptions" :style="{width:'100%'}" :options="contentCategoryIdOptions" :style="{width:'100%'}"
@change="categoryChange"
v-model="form.contentCategoryId"></tree-select> v-model="form.contentCategoryId"></tree-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
...@@ -45,7 +54,8 @@ ...@@ -45,7 +54,8 @@
:disabled="false" :disabled="false"
:multiple="true" :clearable="true" :multiple="true" :clearable="true"
placeholder="请选择文章类型"> 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> :label="item.dictLabel"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
...@@ -99,7 +109,8 @@ ...@@ -99,7 +109,8 @@
<el-col span="12"> <el-col span="12">
<el-form-item label="" prop="contentDisplay"> <el-form-item label="" prop="contentDisplay">
<template slot='label'>是否显示 <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> <i class="el-icon-question" slot="reference"></i>
</el-popover> </el-popover>
</template> </template>
...@@ -125,7 +136,8 @@ ...@@ -125,7 +136,8 @@
</el-row> </el-row>
<el-form-item label="" prop="contentImg"> <el-form-item label="" prop="contentImg">
<template slot='label'>文章缩略图 <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> <i class="el-icon-question" slot="reference"></i>
</el-popover> </el-popover>
</template> </template>
...@@ -166,77 +178,95 @@ ...@@ -166,77 +178,95 @@
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="文章内容" prop="contentDetails"> <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-item>
</el-form> </el-form>
<div :id="'model'+index" v-else></div>
</el-scrollbar> </el-scrollbar>
</el-tab-pane>
</el-tabs>
</el-main> </el-main>
</div> </div>
</body> </body>
</html> </html>
<script> <script>
var form = new Vue({ var form = new Vue({
el: '#form', el: '#form',
data() { data() {
return { return {
date1574910623000_52656:null,
saveDisabled: false, saveDisabled: false,
editorConfig:{ activeName: 'form',
imageScaleEnabled :true, model:undefined,//自定义模型实例
editableTabs:[{title:'文章编辑',name:'form'}],
editorConfig: {
imageScaleEnabled: true,
autoHeightEnabled: true, autoHeightEnabled: true,
autoFloatEnabled: false, autoFloatEnabled: false,
scaleEnabled: true, scaleEnabled: true,
compressSide:0, compressSide: 0,
maxImageSideLength:1000, maxImageSideLength: 1000,
maximumWords: 2000, maximumWords: 2000,
initialFrameWidth: '100%', initialFrameWidth: '100%',
initialFrameHeight: 400, initialFrameHeight: 400,
serverUrl: ms.base+"/static/plugins/ueditor/1.4.3.1/jsp/editor.do?jsonConfig=%7BvideoUrlPrefix:\'"+ms.base+"\',fileUrlPrefix:\'"+ms.base+"\',imageUrlPrefix:\'"+ms.base+"\',imagePathFormat:\'/upload/cms/content/editor/%7Btime%7D\',filePathFormat:\'/upload/cms/content/editor/%7Btime%7D\',videoPathFormat:\'/upload/cms/content/editor/%7Btime%7D\'%7D", serverUrl: ms.base + "/static/plugins/ueditor/1.4.3.1/jsp/editor.do?jsonConfig=%7BvideoUrlPrefix:\'" + ms.base + "\',fileUrlPrefix:\'" + ms.base + "\',imageUrlPrefix:\'" + ms.base + "\',imagePathFormat:\'/upload/cms/content/editor/%7Btime%7D\',filePathFormat:\'/upload/cms/content/editor/%7Btime%7D\',videoPathFormat:\'/upload/cms/content/editor/%7Btime%7D\'%7D",
UEDITOR_HOME_URL: ms.base+'/static/plugins/ueditor/1.4.3.1/' UEDITOR_HOME_URL: ms.base + '/static/plugins/ueditor/1.4.3.1/'
}, },
contentCategoryIdOptions:[], contentCategoryIdOptions: [],
returnIsShow:true, returnIsShow: true,
//表单数据 //表单数据
form: { form: {
// 文章标题 // 文章标题
contentTitle:'', contentTitle: '',
// 所属栏目 // 所属栏目
contentCategoryId: '', contentCategoryId: '',
// 文章类型 // 文章类型
contentType: [], contentType: [],
// 是否显示 // 是否显示
contentDisplay:'0', contentDisplay: '0',
// 文章作者 // 文章作者
contentAuthor:'', contentAuthor: '',
// 文章来源 // 文章来源
contentSource:'', contentSource: '',
// 自定义顺序 // 自定义顺序
contentSort:0, contentSort: 0,
// 文章缩略图 // 文章缩略图
contentImg: [], contentImg: [],
// 描述 // 描述
contentDescription:'', contentDescription: '',
// 关键字 // 关键字
contentKeyword:'', contentKeyword: '',
// 文章内容 // 文章内容
contentDetails:'', contentDetails: '',
}, },
contentTypeOptions:[], contentTypeOptions: [],
contentDisplayOptions:[{"value":"0","label":"是"},{"value":"1","label":"否"}], contentDisplayOptions: [{"value": "0", "label": "是"}, {"value": "1", "label": "否"}],
rules:{ rules: {
// 文章标题 // 文章标题
contentTitle: [{"required":true,"message":"请选择文章标题"}], contentTitle: [{"required": true, "message": "请选择文章标题"}],
// 发布时间 // 发布时间
contentDatetime: [{"required":true,"message":"发布时间不能为空"}], contentDatetime: [{"required": true, "message": "发布时间不能为空"}],
}, },
} }
}, },
watch:{ watch: {},
computed:{
currCategory(){
var that = this;
return this.contentCategoryIdOptions.find(function(value){
return value.id===that.form.contentCategoryId
})
},
}, },
methods: { methods: {
save() { save() {
var that = this; var that = this;
//自定义模型需要验证
if(this.model&&!this.model.validate()){
this.activeName = 'custom-name';
return;
}
var url = ms.manager + "/cms/content/save.do" var url = ms.manager + "/cms/content/save.do"
if (that.form.id > 0) { if (that.form.id > 0) {
url = ms.manager + "/cms/content/update.do"; url = ms.manager + "/cms/content/update.do";
...@@ -249,6 +279,11 @@ ...@@ -249,6 +279,11 @@
data.contentImg = JSON.stringify(data.contentImg); data.contentImg = JSON.stringify(data.contentImg);
ms.http.post(url, data).then(function (data) { ms.http.post(url, data).then(function (data) {
if (data.result) { if (data.result) {
//保存时需要赋值关联ID
if(that.model){
that.model.form.linkId = data.id;
that.model.save()
}
that.$notify({ that.$notify({
title: '成功', title: '成功',
message: '保存成功', message: '保存成功',
...@@ -265,29 +300,92 @@ ...@@ -265,29 +300,92 @@
that.saveDisabled = false; that.saveDisabled = false;
}); });
} else { } else {
this.activeName = 'form';
return false; return false;
} }
}) })
}, },
getValue(data){ 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; this.form.contentCategoryId = data.id;
}, },
//获取当前文章 //获取当前文章
get(id) { get(id) {
var that = this; var that = this;
ms.http.get(ms.manager + "/cms/content/get.do", {"id":id}).then(function (res) { ms.http.get(ms.manager + "/cms/content/get.do", {"id": id}).then(function (res) {
if(res.result&&res.data){ if (res.result && res.data) {
if(res.data.contentType){ if (res.data.contentType) {
res.data.contentType = res.data.contentType.split(','); res.data.contentType = res.data.contentType.split(',');
} }
if(res.data.contentImg){ if (res.data.contentImg) {
res.data.contentImg = JSON.parse(res.data.contentImg); res.data.contentImg = JSON.parse(res.data.contentImg);
res.data.contentImg.forEach(function(value){ res.data.contentImg.forEach(function (value) {
value.url= ms.base + value.path value.url = ms.base + value.path
}) })
}else{ } else {
res.data.contentImg=[] res.data.contentImg = []
} }
that.changeModel();
that.form = res.data; that.form = res.data;
} }
}).catch(function (err) { }).catch(function (err) {
...@@ -297,28 +395,28 @@ ...@@ -297,28 +395,28 @@
//获取contentCategoryId数据源 //获取contentCategoryId数据源
contentCategoryIdOptionsGet() { contentCategoryIdOptionsGet() {
var that = this; var that = this;
ms.http.get(ms.manager+"/cms/category/list.do",{pageSize:9999}).then(function(res){ ms.http.get(ms.manager + "/cms/category/list.do", {pageSize: 9999}).then(function (res) {
if(res.result){ if (res.result) {
that.contentCategoryIdOptions = ms.util.treeData(res.data.rows,'id','categoryId','children'); that.contentCategoryIdOptions = ms.util.treeData(res.data.rows, 'id', 'categoryId', 'children');
} }
}).catch(function(err){ }).catch(function (err) {
console.log(err); console.log(err);
}); });
}, },
//获取contentType数据源 //获取contentType数据源
contentTypeOptionsGet() { contentTypeOptionsGet() {
var that = this; var that = this;
ms.http.get(ms.base+'/mdiy/dict/list.do', {dictType:'文章属性',pageSize:99999}).then(function (data) { ms.http.get(ms.base + '/mdiy/dict/list.do', {dictType: '文章属性', pageSize: 99999}).then(function (data) {
that.contentTypeOptions = data.rows; that.contentTypeOptions = data.rows;
}).catch(function (err) { }).catch(function (err) {
console.log(err); console.log(err);
}); });
}, },
//contentImg文件上传完成回调 //contentImg文件上传完成回调
contentImgSuccess:function(response, file, fileList) { contentImgSuccess: function (response, file, fileList) {
this.form.contentImg.push({url:file.url,name:file.name,path:response,uid:file.uid}); this.form.contentImg.push({url: file.url, name: file.name, path: response, uid: file.uid});
}, },
contentImghandleRemove:function(file, files) { contentImghandleRemove: function (file, files) {
var index = -1; var index = -1;
index = this.form.contentImg.findIndex(text => text == file); index = this.form.contentImg.findIndex(text => text == file);
if (index != -1) { if (index != -1) {
...@@ -326,14 +424,14 @@ ...@@ -326,14 +424,14 @@
} }
}, },
//contentImg文件上传完成回调 //contentImg文件上传完成回调
contentImgSuccess:function(response, file, fileList) { contentImgSuccess: function (response, file, fileList) {
this.form.contentImg.push({url:file.url,name:file.name,path:response,uid:file.uid}); this.form.contentImg.push({url: file.url, name: file.name, path: response, uid: file.uid});
}, },
//上传超过限制 //上传超过限制
contentImghandleExceed:function(files, fileList) { contentImghandleExceed: function (files, fileList) {
this.$notify({ title: '当前最多上传1个文件', type: 'warning' }); this.$notify({title: '当前最多上传1个文件', type: 'warning'});
}, },
contentImghandleRemove:function(file, files) { contentImghandleRemove: function (file, files) {
var index = -1; var index = -1;
index = this.form.contentImg.findIndex(text => text == file); index = this.form.contentImg.findIndex(text => text == file);
if (index != -1) { if (index != -1) {
...@@ -341,26 +439,26 @@ ...@@ -341,26 +439,26 @@
} }
}, },
//查询列表 //查询列表
list: function(contentCategoryId) { list: function (contentCategoryId) {
var that = this; var that = this;
ms.http.post(ms.manager+"/cms/content/list.do",{ ms.http.post(ms.manager + "/cms/content/list.do", {
contentCategoryId:contentCategoryId, contentCategoryId: contentCategoryId,
}).then(function(res) { }).then(function (res) {
if(res.result&&res.data.total>0){ if (res.result && res.data.total > 0) {
if(res.data.rows[0].contentType){ if (res.data.rows[0].contentType) {
res.data.rows[0].contentType = res.data.rows[0].contentType.split(','); res.data.rows[0].contentType = res.data.rows[0].contentType.split(',');
} }
if(res.data.rows[0].contentImg){ if (res.data.rows[0].contentImg) {
res.data.rows[0].contentImg = JSON.parse(res.data.rows[0].contentImg); res.data.rows[0].contentImg = JSON.parse(res.data.rows[0].contentImg);
res.data.rows[0].contentImg.forEach(function(value){ res.data.rows[0].contentImg.forEach(function (value) {
value.url= ms.base + value.path value.url = ms.base + value.path
}) })
}else{ } else {
res.data.rows[0].contentImg=[] res.data.rows[0].contentImg = []
} }
that.form = res.data.rows[0]; that.form = res.data.rows[0];
} }
}).catch(function(err) { }).catch(function (err) {
console.log(err); console.log(err);
}); });
}, },
...@@ -373,7 +471,7 @@ ...@@ -373,7 +471,7 @@
if (this.form.id) { if (this.form.id) {
this.get(this.form.id); this.get(this.form.id);
} }
if(this.form.contentCategoryId){ if (this.form.contentCategoryId) {
this.list(this.form.contentCategoryId); this.list(this.form.contentCategoryId);
this.returnIsShow = false; this.returnIsShow = false;
} }
...@@ -381,13 +479,15 @@ ...@@ -381,13 +479,15 @@
}); });
</script> </script>
<style> <style>
.el-select{ .el-select {
width: 100%; width: 100%;
} }
body{
body {
overflow: hidden; overflow: hidden;
} }
#form{
#form {
overflow: hidden; overflow: hidden;
} }
</style> </style>
\ No newline at end of file
src/main/webapp/WEB-INF/manager/cms/content/main.ftl
View file @ f1a1ee7e
...@@ -180,6 +180,7 @@ ...@@ -180,6 +180,7 @@
if (!res.result||res.data.total <= 0) { if (!res.result||res.data.total <= 0) {
that.emptyText = '暂无数据' that.emptyText = '暂无数据'
that.dataList = []; that.dataList = [];
that.total = 0;
} else { } else {
that.emptyText = ''; that.emptyText = '';
that.total = res.data.total; that.total = res.data.total;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment