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