Signed-off-by: yinxr 图文素材curd接口处理中
This commit is contained in:
parent
144968ee40
commit
28f6da5fdc
|
@ -12,16 +12,16 @@
|
||||||
<el-button class="ms-fr" type="success" size="small" icon="el-icon-tickets" @click="newsSave">保存</el-button>
|
<el-button class="ms-fr" type="success" size="small" icon="el-icon-tickets" @click="newsSave">保存</el-button>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-header>
|
</el-header>
|
||||||
<el-container class=" ms-container">
|
<el-container class="ms-container">
|
||||||
<el-aside width="280px">
|
<el-aside width="280px">
|
||||||
<!-- 主图文章 -->
|
<!-- 主图文章 -->
|
||||||
<div class="ms-main-article">
|
<div class="ms-main-article" @click='openMainArticle'>
|
||||||
<img :src="mainArticle.basicPic || ms.base+'/WEB-INF/manager/images/article-default.png'">
|
<img :src="mainArticle.thumbnailUrl || ms.base+'/WEB-INF/manager/images/article-default.png'">
|
||||||
<div class="ms-article-mask"></div>
|
<div class="ms-article-mask"></div>
|
||||||
<span v-text='mainArticle.basicTitle'></span>
|
<span v-text='mainArticle.basicTitle'></span>
|
||||||
</div>
|
</div>
|
||||||
<draggable v-model="subArticleList" :options="{draggable:'.ms-article-item'}">
|
<draggable v-model="subArticleList" :options="{draggable:'.ms-article-item'}">
|
||||||
<div v-for="(element,index) in subArticleList" :key="index" class="ms-article-item" @click='addOrUpdateSubArticle(element)'>
|
<div v-for="(element,index) in subArticleList" :key="index" class="ms-article-item" @click='updateSubArticle(element,index)'>
|
||||||
<p>
|
<p>
|
||||||
<span v-text='element.basicTitle'></span>
|
<span v-text='element.basicTitle'></span>
|
||||||
</p>
|
</p>
|
||||||
|
@ -46,9 +46,9 @@
|
||||||
:data={uploadFloderPath:"/mweixin/news"}
|
:data={uploadFloderPath:"/mweixin/news"}
|
||||||
>
|
>
|
||||||
<div class="ms-article-mask" v-show='headMask' @mouseover='headMask=true;' @mouseleave='headMask=false'>
|
<div class="ms-article-mask" v-show='headMask' @mouseover='headMask=true;' @mouseleave='headMask=false'>
|
||||||
<i class="el-icon-delete" @click="thumbnailUrl=mainArticle.basicPic='';uploadDisable=thumbnailShow=false"></i>
|
<i class="el-icon-delete" @click="articleForm.thumbnailUrl=mainArticle.basicPic='';uploadDisable=thumbnailShow=false"></i>
|
||||||
</div>
|
</div>
|
||||||
<img v-if="thumbnailShow" :src="thumbnailUrl"
|
<img v-if="thumbnailShow" :src="articleForm.thumbnailUrl"
|
||||||
class="article-thumbnail" @mouseover='headMask=true;' @mouseleave='headMask=false;'>
|
class="article-thumbnail" @mouseover='headMask=true;' @mouseleave='headMask=false;'>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<i class="el-icon-picture"></i>
|
<i class="el-icon-picture"></i>
|
||||||
|
@ -57,12 +57,12 @@
|
||||||
</el-upload>
|
</el-upload>
|
||||||
<el-form label-width='40px'>
|
<el-form label-width='40px'>
|
||||||
<el-form-item label="标题" prop="">
|
<el-form-item label="标题" prop="">
|
||||||
<el-input size='small' placeholder="请输入图文标题" v-model='articleForm.basicTitle' class='basic-title-input' @input.stop.self="resetWordNum('basicTitle',64)">
|
<el-input size='small' placeholder="请输入图文标题" v-model='articleForm.basicTitle' class='basic-title-input' @input.self="resetWordNum('basicTitle',64)">
|
||||||
<span slot='suffix' v-text="titleWordNumber+'/64'"></span>
|
<span slot='suffix' v-text="titleWordNumber+'/64'"></span>
|
||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="作者" prop="">
|
<el-form-item label="作者" prop="">
|
||||||
<el-input size='small' placeholder="请输入图文作者" v-model='articleForm.articleAuthor' @input.stop.self="resetWordNum('articleAuthor',8)">
|
<el-input size='small' placeholder="请输入图文作者" v-model='articleForm.articleAuthor' @input.self="resetWordNum('articleAuthor',8)">
|
||||||
<span slot='suffix' v-text="authorWordNumber+'/8'"></span>
|
<span slot='suffix' v-text="authorWordNumber+'/8'"></span>
|
||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
@ -87,8 +87,12 @@
|
||||||
el: '#article',
|
el: '#article',
|
||||||
data: {
|
data: {
|
||||||
mainArticle: {
|
mainArticle: {
|
||||||
basicPic: '', //主图
|
|
||||||
basicTitle: '', //标题
|
basicTitle: '', //标题
|
||||||
|
articleAuthor: '', //作者
|
||||||
|
basicDescription: '', //摘要
|
||||||
|
articleContent: '', //正文
|
||||||
|
basicThumbnails:'',//上传封面图片的url
|
||||||
|
thumbnailUrl:'',//缩略图全路径
|
||||||
},
|
},
|
||||||
defaultMainArticle:'',//拷贝主图信息
|
defaultMainArticle:'',//拷贝主图信息
|
||||||
subArticleList: [],// 子文章列表
|
subArticleList: [],// 子文章列表
|
||||||
|
@ -102,10 +106,13 @@
|
||||||
articleAuthor: '', //作者
|
articleAuthor: '', //作者
|
||||||
basicDescription: '', //摘要
|
basicDescription: '', //摘要
|
||||||
articleContent: '', //正文
|
articleContent: '', //正文
|
||||||
|
basicThumbnails:'',//上传封面图片的url
|
||||||
|
thumbnailUrl:'',//缩略图全路径
|
||||||
},
|
},
|
||||||
|
// 文章素材,包括主图文,子图文
|
||||||
|
articleList:[],
|
||||||
defaultArticleForm:'',//拷贝表单值
|
defaultArticleForm:'',//拷贝表单值
|
||||||
thumbnailShow:false,//显示缩略图
|
thumbnailShow:false,//显示缩略图
|
||||||
thumbnailUrl:'',//缩略图路径
|
|
||||||
headMask:false,//缩略图删除
|
headMask:false,//缩略图删除
|
||||||
uploadDisable:false,//是否禁止上传
|
uploadDisable:false,//是否禁止上传
|
||||||
newsCategoryId:'',//微信分类编号
|
newsCategoryId:'',//微信分类编号
|
||||||
|
@ -113,13 +120,24 @@
|
||||||
watch:{
|
watch:{
|
||||||
articleForm:{
|
articleForm:{
|
||||||
handler:function(n,o){
|
handler:function(n,o){
|
||||||
this.mainArticle.basicTitle = n.basicTitle
|
this.articleList.length || (this.mainArticle.basicTitle = n.basicTitle)
|
||||||
|
console.log('n文章',n);
|
||||||
|
},
|
||||||
|
deep:true,
|
||||||
|
},
|
||||||
|
editorCurrentContent:{
|
||||||
|
handler:function(n,o){
|
||||||
|
console.log('n文章',n);
|
||||||
|
this.articleForm.articleContent = n
|
||||||
|
},
|
||||||
|
deep:true,
|
||||||
|
},
|
||||||
|
mainArticle:{
|
||||||
|
handler:function(n,o){
|
||||||
|
console.log('n文章444444444444444',n);
|
||||||
},
|
},
|
||||||
deep:true,
|
deep:true,
|
||||||
},
|
},
|
||||||
editorCurrentContent:function(n,o){
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
open:function(material){
|
open:function(material){
|
||||||
|
@ -138,29 +156,57 @@
|
||||||
// 图片上传成功函数
|
// 图片上传成功函数
|
||||||
basicPicSuccess:function(url){
|
basicPicSuccess:function(url){
|
||||||
this.thumbnailShow = this.uploadDisable = true
|
this.thumbnailShow = this.uploadDisable = true
|
||||||
this.thumbnailUrl = ms.web + url
|
this.mainArticle.thumbnailUrl = this.articleForm.thumbnailUrl = ms.web + url
|
||||||
this.mainArticle.basicPic = this.thumbnailUrl
|
this.articleForm.basicThumbnails = url
|
||||||
},
|
},
|
||||||
// 添加文章
|
// 添加文章
|
||||||
addArticle: function() {
|
addArticle: function() {
|
||||||
|
console.log('this.articleForm1111111',this.articleForm);
|
||||||
if(this.subArticleList.length > 6) {
|
if(this.subArticleList.length > 6) {
|
||||||
this.$notify({
|
return this.$notify({
|
||||||
title: '添加失败',
|
title: '添加失败',
|
||||||
message: '最大图文数量为7',
|
message: '最大图文数量为7',
|
||||||
type: 'warning'
|
type: 'warning'
|
||||||
});
|
});
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
// 将主图文单独存于数组中
|
||||||
|
if(!this.articleList.length){
|
||||||
|
this.mainArticle = this.articleForm
|
||||||
|
}
|
||||||
|
console.log('this.articleForm99999999999999',this.articleForm);
|
||||||
|
// 清空百度编辑器
|
||||||
|
this.editor.setContent('')
|
||||||
|
// 将左侧表单的内容存放到数组中
|
||||||
|
this.articleList.push(this.articleForm)
|
||||||
|
// 清空表单
|
||||||
|
console.log('this.articleForm',this.articleForm);
|
||||||
|
console.log('this.articleList',this.articleList);
|
||||||
|
this.articleForm = {
|
||||||
|
basicTitle: '',
|
||||||
|
articleAuthor: '',
|
||||||
|
basicDescription: '',
|
||||||
|
articleContent: '',
|
||||||
|
basicThumbnails:'',
|
||||||
|
thumbnailUrl:'',
|
||||||
|
}
|
||||||
|
this.thumbnailShow = false //显示上传图标
|
||||||
this.subArticleList.push({
|
this.subArticleList.push({
|
||||||
basicTitle: '新增文章标题',
|
basicTitle: '',
|
||||||
basicThumbnailsl: 'https://img03.sogoucdn.com/app/a/100520091/20190125113148'
|
articleAuthor: '',
|
||||||
|
basicDescription: '',
|
||||||
|
articleContent: '',
|
||||||
|
basicThumbnails:'',
|
||||||
|
thumbnailUrl:'',
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 更新或修改子文章
|
// 打开修改子文章
|
||||||
addOrUpdateSubArticle:function(element){
|
updateSubArticle:function(element,index){
|
||||||
if(element.articleBasicId>0){
|
this.articleForm = element
|
||||||
|
},
|
||||||
}
|
// 打开 主文章
|
||||||
|
openMainArticle:function(){
|
||||||
|
this.thumbnailShow = true //显示上传图标
|
||||||
|
this.articleForm = this.mainArticle
|
||||||
},
|
},
|
||||||
// 计算剩余字数
|
// 计算剩余字数
|
||||||
resetWordNum: function(type,limit) {
|
resetWordNum: function(type,limit) {
|
||||||
|
@ -194,10 +240,10 @@
|
||||||
that.$message.error(err);
|
that.$message.error(err);
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 表单重置
|
// 表单重置 新建和修改场景
|
||||||
resetForm:function(material){
|
resetForm:function(material){
|
||||||
this.thumbnailShow = material ? true : false
|
this.thumbnailShow = material ? true : false
|
||||||
this.thumbnailUrl = material ? material.newsArticle.basicPic : ''
|
this.articleForm.thumbnailUrl = material ? material.newsArticle.basicPic : ''
|
||||||
|
|
||||||
this.mainArticle.basicPic = material ? material.newsArticle.basicPic : ''
|
this.mainArticle.basicPic = material ? material.newsArticle.basicPic : ''
|
||||||
this.mainArticle.basicTitle = material ? material.newsArticle.basicTitle : ''
|
this.mainArticle.basicTitle = material ? material.newsArticle.basicTitle : ''
|
||||||
|
@ -212,7 +258,7 @@
|
||||||
|
|
||||||
this.subArticleList = material ? material.articleList : [];
|
this.subArticleList = material ? material.articleList : [];
|
||||||
this.$forceUpdate();
|
this.$forceUpdate();
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
mounted: function() {
|
mounted: function() {
|
||||||
let that = this;
|
let that = this;
|
||||||
|
|
|
@ -5,6 +5,11 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
|
// 主图文章
|
||||||
|
.ms-main-article{
|
||||||
|
&:hover{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
.ms-article-mask {
|
.ms-article-mask {
|
||||||
background: #000;
|
background: #000;
|
||||||
opacity: .2;
|
opacity: .2;
|
||||||
|
@ -12,6 +17,10 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
&:hover{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.el-container {
|
.el-container {
|
||||||
.ms-container {
|
.ms-container {
|
||||||
|
|
|
@ -129,6 +129,13 @@ textarea::-webkit-input-placeholder {
|
||||||
.ms-header-select > .el-select:nth-of-type(2) {
|
.ms-header-select > .el-select:nth-of-type(2) {
|
||||||
margin: 0 10px;
|
margin: 0 10px;
|
||||||
}
|
}
|
||||||
|
.el-submenu .el-menu-item.is-active {
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.el-card,
|
||||||
|
.el-message {
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
.ms-article {
|
.ms-article {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
@ -136,7 +143,10 @@ textarea::-webkit-input-placeholder {
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
.ms-article .ms-article-mask {
|
.ms-article .ms-main-article:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.ms-article .ms-main-article .ms-article-mask {
|
||||||
background: #000;
|
background: #000;
|
||||||
opacity: .2;
|
opacity: .2;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -145,6 +155,9 @@ textarea::-webkit-input-placeholder {
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
.ms-article .ms-main-article .ms-article-mask:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
.ms-article .el-container .ms-container {
|
.ms-article .el-container .ms-container {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
|
Loading…
Reference in New Issue