Signed-off-by: yinxr 图文素材curd接口处理中

src/main/webapp/WEB-INF/manager/mweixin/metarial/form.ftl

@@ -12,16 +12,16 @@
             <el-button class="ms-fr" type="success" size="small" icon="el-icon-tickets" @click="newsSave">保存</el-button>
          </el-row>
       </el-header>
-      <el-container class=" ms-container">
+      <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,30 +156,58 @@
         //   图片上传成功函数
         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) {
              var target = event.target
@@ -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;

src/main/webapp/static/mweixin/article.less

@@ -5,13 +5,22 @@
     width: 100%;
     background: transparent !important;
     padding: 0 !important;
-    .ms-article-mask {
-        background: #000;
-        opacity: .2;
-        .ms-width-height(100%, 146px);
-        position: absolute;
-        top: 0;
-        left: 0;
+    // 主图文章
+    .ms-main-article{
+        &:hover{
+            cursor: pointer;
+        }
+        .ms-article-mask {
+            background: #000;
+            opacity: .2;
+            .ms-width-height(100%, 146px);
+            position: absolute;
+            top: 0;
+            left: 0;
+            &:hover{
+                cursor: pointer;
+            }
+        }
     }
     .el-container {
         .ms-container {

src/main/webapp/static/mweixin/css/article.css

@@ -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;