浏览代码

发布文章bug修改

xiaoming_global 5 年前
父节点
当前提交
c478b7ff74

+ 39 - 2
src/api/act/submitinfo.js 查看文件

@@ -136,8 +136,17 @@ export function getEditArticle(id,param){
136 136
     })
137 137
 }
138 138
 
139
+export function getEditVidoInfo(id,param){
140
+    console.log("params是啥?",param)
141
+    return request({
142
+        url:"/api/acticle/getEditVidoInfo?id="+id,
143
+        method:"Get",
144
+        param:param,
145
+    })
146
+}
147
+
139 148
 export function getMenus(params){
140
-    console.log("params是什么",params)
149
+    console.log("params分类号是什么",params)
141 150
     return request({
142 151
         url:"/api/acticle/getMenus",
143 152
         method:'Get',
@@ -154,6 +163,33 @@ export function UpdataArticleInfo(id,data){
154 163
    })
155 164
 }
156 165
 
166
+export function updataVidoInfo(id,data){
167
+    console.log("修改视频内容",data)
168
+    return request({
169
+        url:"/api/acticle/updateVidoInfo?id="+id,
170
+        method:'Post',
171
+        data:data
172
+    })
173
+}
174
+
175
+export function SaveVidodraft(id,data){
176
+    console.log("保存视频草稿",data);
177
+    return request({
178
+        url:"/api/acticle/savevidodraft?id="+id,
179
+        method:'Post',
180
+        data:data
181
+    })
182
+}
183
+
184
+export function saveArticleDraft(id,data){
185
+    console.log("保存文章草稿",data);
186
+    return request({
187
+        url:"/api/acticle/saveArticleDraft?id="+id,
188
+        method:"Post",
189
+        data:data
190
+    })
191
+}
192
+
157 193
 export function previewEditArticle(id,data){
158 194
    return request({
159 195
        url:"/api/acticle/previewEditArticle?id="+id,
@@ -295,4 +331,5 @@ export function deleteComments(id,data){
295 331
       method:"delete",
296 332
       data:data, 
297 333
    })
298
-}
334
+}
335
+

+ 1 - 0
src/lang/zh.js 查看文件

@@ -55,6 +55,7 @@ export default {
55 55
     editArticle: '编辑文章',
56 56
     articleList: '文章列表',
57 57
     articlePreview:'文章预览',
58
+    editVido:'编辑视频',
58 59
     errorPages: '错误页面',
59 60
     page401: '401',
60 61
     page404: '404',

+ 7 - 0
src/router/modules/article.js 查看文件

@@ -55,6 +55,13 @@ export default {
55 55
       hidden:true,
56 56
       meta: { title: 'editArticle', noCache: true }
57 57
     },
58
+    {
59
+      path: '/articles/editVido/:id',
60
+      component:() => import('@/scrm_pages/article/editVido'),
61
+      name:'editVido',
62
+      hidden:true,
63
+      meta: { title:'editVido',noCache: true}
64
+    },
58 65
     {
59 66
       path: '/articles/articleEditPreview',
60 67
       component: () => import('@/scrm_pages/article/articleEditPreview'),

+ 1 - 1
src/scrm_pages/article/acticleCategory.vue 查看文件

@@ -103,7 +103,7 @@
103 103
       return{
104 104
         crumbs: [
105 105
           { path: false, name: '文章管理' },
106
-          { path: '/articles/acticleCategory', name: '发布文章' }
106
+          { path: '/articles/acticleCategory', name: '文章分类' }
107 107
         ],
108 108
         articsData:[],
109 109
         articData:{

+ 3 - 4
src/scrm_pages/article/articleCommentDetail.vue 查看文件

@@ -33,14 +33,14 @@
33 33
                             <el-button type="primary" @click="send(item)">发送</el-button>
34 34
                        </div>
35 35
                 </div>
36
-                 <div class="reviewed" v-show="showReply==item.id" v-for="(child) in item.childs" :key="child.id">
36
+                 <div class="reviewed" v-show="showReply===item.id" v-for="(child) in item.childs" :key="child.id">
37 37
                      <div>
38 38
                      你&nbsp;回复了&nbsp;{{item.comment_user_name}}:{{child.content}}
39 39
                      <div  id="tub" class="el-icon-error" @click="clear(item.id,index)"></div>
40 40
                      </div>
41 41
                 </div>
42 42
                  <div>
43
-                  <div class="reviewed2" v-show="shows==item.id" v-for="(items,index) in commentsReplyInfo" :key="items.id">
43
+                  <div class="reviewed2" v-show="shows===item.id" v-for="(items,index) in commentsReplyInfo" :key="items.id">
44 44
                      <div>
45 45
                      你&nbsp;回复了&nbsp;{{items.comment_user_name}}:{{items.content}}
46 46
                      <div  id="tub" class="el-icon-error" @click="clear(items.id,index)"></div>
@@ -90,7 +90,6 @@
90 90
                 },
91 91
                 total:0,
92 92
                 comments:[],
93
-                show:true,
94 93
                 showindex:-1,
95 94
                 form:{
96 95
                   replycontent:'',  
@@ -152,7 +151,7 @@
152 151
           } 
153 152
             if(spancontent == "收起"){
154 153
               document.getElementById("copy").innerHTML = "展开";
155
-              this.shows = 0;              
154
+              this.shows = !parentid;       
156 155
           } 
157 156
            const articid = this.$route.params && this.$route.params.id;
158 157
           console.log("文章id",articid);   

+ 171 - 103
src/scrm_pages/article/articleList.vue 查看文件

@@ -35,73 +35,54 @@
35 35
           </div>
36 36
 
37 37
             <div class="filter-container" style="margin-top: 10px;margin-left: 5px">
38
-              <el-checkbox style="width: 30px">全选</el-checkbox> 
38
+              <el-checkbox style="width: 30px">全选</el-checkbox>
39 39
               <el-button size="small" icon="el-icon-delete">批量删除</el-button>
40
-            </div> 
41
-           <!-- <div class="filter-container" style="margin-top: 10px;margin-left: 5px">
42
-            <el-checkbox style="width: 30px" @change="changeCheck" v-model="checkAllStatus">全选</el-checkbox>
43
-            <el-button size="small" icon="el-icon-delete">批量删除</el-button>
44
-          </div> -->
45
-          <!-- <el-table ref="multipleTable" :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}" :data="articsData" border fit highlight-current-row  style="width: 100%;margin-top: 10px;"  @selection-change="handleSelectionChange">
46
-              <el-table-column
47
-                align="center"
48
-                type="selection"
49
-                width="55">
50
-              </el-table-column>
51
-             <el-table-column label="文章图片" align="center">
52
-               <template slot-scope="scope">
53
-                  <div class="parent">
54
-                 <span class="text">已发布</span>
55
-                 <div class="triangle-topleft">
40
+            </div>
41
+         
42
+      <div class="clearfix">
43
+        <div class="published-cell" v-for="(article,index) in articsData" :key="article.id">
44
+          <div class="checkbox">
45
+            <el-checkbox></el-checkbox>
46
+          </div>
56 47
 
57
-                 </div>
58
-                <img :src="memberAvatar(scope.row)" style="width:100%;height:100%">
48
+          <div class="activity-image-panel">
49
+            <span class="status-text">{{article.article_status ==1 ? '已发布':'' || article.article_status ==2 ? '草稿':'' || article.article_status ==3 ? '未通过':''}}</span>
50
+            <img :src="article.imgs"/>
59 51
           </div>
60
-               </template>
61
-             </el-table-column>
62
-            <el-table-column label="文章标题" align="center">
63
-              <template slot-scope="scope">
64
-                  {{scope.row.title}}
65
-              </template>
66
-            </el-table-column>
67
-            <el-table-column label="阅读量" align="center">
68
-              <template slot-scope="scope">
69
-                 {{scope.row.real_read_num}}
70
-              </template>
71
-            </el-table-column>
72
-            <el-table-column label="评论数" align="center">
73
-              <template slot-scope="scope">
74
-                  {{scope.row.comment_num}}
75
-              </template>
76
-            </el-table-column>
77
-            <el-table-column label="点赞数" align="center">
78
-              <template slot-scope="scope">
79
-                  {{scope.row.star_num}}
80
-              </template>
81
-            </el-table-column>
82
-            <el-table-column label="操作" align="center">
83
-              <template slot-scope="scope">
84
-                <el-tooltip class="item" effect="dark" content="编辑" placement="top">
85
-                  <el-button
86
-                    size="mini"
87
-                    type="primary"
88
-                    icon="el-icon-edit-outline"
89
-                    @click="$router.push('/articles/editArticle/'+scope.row.id)">
90
-                  </el-button>
91
-                </el-tooltip>
92
-                 <el-tooltip class="item" effect="dark" content="删除" placement="top">
93
-                  <el-button size="mini" type="danger" icon="el-icon-delete"  @click="openDelete(scope.row,scope.$index)" ></el-button>
94
-                </el-tooltip>
95
-              </template>
96
-            </el-table-column>
97
-          </el-table> -->
98
-          
99
-             <template v-for="(article,index) in articsData">
100
-               <published-cell v-if="article.status == 1" :article="article"  :key="index" @delete="deleteArticle(article.id, index)"></published-cell>
101
-               <published-cell v-if="article.status == 2" :article="article"  :key="index" @delete="deleteArticle(article.id, index)"></published-cell>
102
-               <published-cell v-if="article.status == 3" :article="article"  :key="index" @delete="deleteArticle(article.id, index)"></published-cell>
103
-             </template>
104
-         
52
+          <div class="activity-info-panel">
53
+            <h3 class="title">
54
+              <a>{{article.title}}</a>
55
+            </h3>
56
+            <div class="statistics">
57
+              阅读:{{article.real_read_num}} 丨 评论:{{article.comment_num}} 丨 点赞:{{article.star_num}}
58
+            </div>
59
+            <div>
60
+              <el-tooltip class="item" effect="dark" content="编辑" placement="top">
61
+                <el-button
62
+                  size="mini"
63
+                  type="primary"
64
+                  icon="el-icon-edit-outline"
65
+                  @click="editArticles(article.id,article.type)">
66
+                </el-button>
67
+              </el-tooltip>
68
+              <el-tooltip class="item" effect="dark" content="删除" placement="top">
69
+                <el-button
70
+                  size="mini"
71
+                  type="danger"
72
+                  icon="el-icon-delete"
73
+                  @click="deleteArticle(article.id,index)">
74
+                </el-button>
75
+              </el-tooltip>
76
+            </div>
77
+          </div>
78
+          <div class="activity-time-panel">
79
+            <span class="center">{{orgName}}</span>
80
+            <span class="time">2019-06-08</span>
81
+          </div>
82
+        </div>
83
+      </div>
84
+
85
+
105 86
           <el-pagination
106 87
             @size-change="handleSizeChange"
107 88
             @current-change="handleCurrentChange"
@@ -149,16 +130,20 @@
149 130
         dialogVisible: false,
150 131
         checkAllStatus:false,
151 132
         selecting_status:'',
133
+        orgName:'',
134
+        statustext:'',
152 135
       }
153 136
     },
154 137
     methods:{
155 138
            GetAllArticles(){
156 139
               GetAllArticles(this.selecting_status,this.listQuery.classid,this.listQuery.keyword,this.listQuery.limit,this.listQuery.page).then(response=>{
157 140
                      if(response.data.state === 1){
158
-                        this.articsData = response.data.data.articles
159
-                        this.total = response.data.data.total
141
+                        this.articsData = response.data.data.articles;
142
+                        this.total = response.data.data.total;
160 143
                         console.log("文章列表",this.articsData)
161 144
                         console.log("total",this.total)
145
+                        this.orgName =  response.data.data.OrgName;
146
+                        console.log("机构姓名",this.orgName)
162 147
                      }
163 148
                      if(typeof(response.data.data.category != 'undefined')){
164 149
                        this.tagOptions = response.data.data.category
@@ -216,6 +201,7 @@
216 201
              this.selectedArticles = val;
217 202
          },
218 203
            deleteArticle(id,index){
204
+             
219 205
              this.$confirm('确定要删除吗?删除后信息将无法恢复!','删除提示',{
220 206
                dangerouslyUseHTMLString:true,
221 207
                 confirmButtonText: '确定',
@@ -232,51 +218,30 @@
232 218
               }).catch(e=>{});
233 219
              }).catch(() => {
234 220
                return false
235
-            });        
221
+            });
222
+           },
223
+           editArticles(articleid,articletype){
224
+               console.log("文章id",articleid);
225
+               console.log("文章内型",articletype)
226
+               if(articletype == 1){
227
+                  this.$router.push({path:'/articles/editArticle/'+articleid});
228
+               }
229
+
230
+               if(articletype ==2){
231
+                   this.$router.push({path:'/articles/editVido/'+articleid});
232
+               }
236 233
            }
237
-          // openDeletearticles(){
238
-          //   if (this.selectedArticles.length==0) {
239
-          //     this.$message.error("请选择要删除的信息");
240
-          //   return false;
241
-          //  }
242
-          //  this.$confirm('确定要删除吗?删除后信息将无法恢复!','删除提示',{
243
-          //      dangerouslyUseHTMLString:true,
244
-          //      confirmButtonText: '确定',
245
-          //      cancelButtonText: '取消',
246
-          //      type: 'warning'
247
-          //  }).then(()=>{
248
-          //       var ids = [];
249
-          //       var idMap = {};
250
-          //       for (const index in this.selectedArticles) {
251
-          //       ids.push(this.selectedArticles[index].id);
252
-          //       idMap[this.selectedArticles[index].id] = this.selectedArticles[index].id;
253
-          //   }
254
-          //      openDelete({ids:ids}).then(response=>{
255
-          //          if(response.data.state == 1){
256
-          //                var articsDatalength = this.articsData.length;
257
-          //            for (let index = articsDatalength-1; index >= 0; index--) {
258
-          //           if(this.articsData[index].id in idMap) {
259
-          //           this.articsData.splice(index, 1);
260
-          //          }
261
-          //        }
262
-          //         this.$message.success("删除成功");
263
-          //       }else{
264
-          //          this.$message.success("删除失败");
265
-          //        }
266
-          //      }).catch(e=>{});
267
-          //  }).catch(() => {
268
-          //     return false
269
-          //  });
270
-          // },
271 234
     },
272 235
     created(){
273 236
       this.GetAllArticles();
274 237
     },
238
+
239
+     
275 240
   }
276 241
 </script>
277 242
 
278
-<style scoped>
279
-      .parent{
243
+<style scoped  rel="stylesheet/scss" lang="scss">
244
+    .parent{
280 245
         position: relative;
281 246
         width: 160px;
282 247
         height: 120px;
@@ -298,4 +263,107 @@
298 263
         position: relative;
299 264
         margin-top: -140px;
300 265
     }
266
+
267
+    .published-cell {
268
+    padding: 20px 15px;
269
+    border: none;
270
+    border-bottom: 1px solid #e5e8ea;
271
+    float: left;
272
+    margin: 0;
273
+    width: 100%;
274
+    border-radius: 0;
275
+    position: relative;
276
+
277
+    .activity-image-panel {
278
+        width: 155px;
279
+        height: 122px;
280
+        border: 1px #dee2e5 solid;
281
+        display: flex;
282
+        justify-content: center;
283
+        position: relative;
284
+        -webkit-border-radius: 4px;
285
+        -moz-border-radius: 4px;
286
+        border-radius: 4px;
287
+        overflow: hidden;
288
+        float: left;
289
+
290
+        .status-text {
291
+            position: absolute;
292
+            font-size: 12px;
293
+            color: #fff;
294
+            top: 14px;
295
+            left: 3px;
296
+            -webkit-transform: rotate(316deg);
297
+            transform: rotate(316deg);
298
+        }
299
+
300
+        img {
301
+            width: 100%;
302
+            height: 100%;
303
+            object-fit: cover;
304
+            object-position: center;
305
+        }
306
+    }
307
+    .activity-image-panel::before {
308
+        border-top: 28px solid #5bd18b;
309
+        border-right: 28px solid transparent;
310
+        border-bottom: 28px solid transparent;
311
+        border-left: 28px solid #5bd18b;
312
+        position: absolute;
313
+        top: 0;
314
+        left: 0;
315
+        width: 0;
316
+        height: 0;
317
+        display: block;
318
+        content: "";
319
+    }
320
+
321
+    .activity-info-panel {
322
+        padding: 7px 20px;
323
+        width: 60%;
324
+        float: left;
325
+
326
+        .title {
327
+            padding-bottom: 5px;
328
+
329
+            a {
330
+                color: #495060;
331
+                font-size: 20px;
332
+                max-width: 100%;
333
+                font-weight: 500;
334
+                overflow: hidden;
335
+                white-space: nowrap;
336
+                text-overflow: ellipsis;
337
+                display: inline-block;
338
+            }
339
+        }
340
+
341
+        .statistics {
342
+            color: #a8b3ba;
343
+            font-size: 15px;
344
+            justify-content: space-between;
345
+            line-height: 30px;
346
+        }
347
+    }
348
+
349
+    .activity-time-panel {
350
+        float: right;
351
+        padding: 7px 0;
352
+
353
+        .time {
354
+            font-size: 15px;
355
+            color: #a8b3ba;
356
+        }
357
+    }
358
+    .center{
359
+        font-size:15px;
360
+        color: #a8b3ba;
361
+    }
362
+    .checkbox{
363
+        float:left;
364
+        position: relative;
365
+        left:-10px;
366
+    }
367
+}
368
+    
301 369
 </style>

+ 31 - 30
src/scrm_pages/article/createArticle.vue 查看文件

@@ -7,7 +7,7 @@
7 7
     <div class="app-container">
8 8
     <el-tabs type="border-card">
9 9
       <el-tab-pane label="文章">
10
-        <el-form label-width="100px" class="clearfix" :model="form" ref="arctileform"  :element-loading-text="loadingText" :rules="staffrules">
10
+        <el-form label-width="100px" class="clearfix" :model="form" ref="arctileform"  :element-loading-text="loadingText" :rules="artilcrules">
11 11
           <el-row>
12 12
             <el-col :span="23">
13 13
                 <el-form-item label="文章标题:" required prop="act_name">
@@ -29,7 +29,6 @@
29 29
                 <el-col :span="3">
30 30
                   <div>
31 31
                     <el-upload
32
-                      v-loading="uploading"
33 32
                       :element-loading-text="loadingText"
34 33
                       class="avatar-uploader"
35 34
                       :data="uploadData"
@@ -43,10 +42,10 @@
43 42
                     </el-upload>
44 43
                   </div>
45 44
                 </el-col>
45
+                <!-- 第二章图片 -->
46 46
                 <el-col :span="3">
47
-                  <div v-if="show">
47
+                  <div v-if="picshow">
48 48
                     <el-upload
49
-                      v-loading="uploading"
50 49
                       :element-loading-text="loadingText"
51 50
                       class="avatar-uploader"
52 51
                       :data="uploadData"
@@ -55,15 +54,16 @@
55 54
                       :on-error="handleAvatartwoError"
56 55
                       :on-success="handleAvatartwoSuccess"
57 56
                       :before-upload="beforeAvatartwoUpload">
58
-                      <img v-if="imageUrl" :src="imageUrl" class="avatar">
57
+                      <img v-if="this.imageUrl" :src="this.imageUrl" class="avatar">
59 58
                       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
60 59
                     </el-upload>
61 60
                   </div>
62 61
                 </el-col>
62
+
63
+                <!-- 第三张图片 -->
63 64
                 <el-col :span="3">
64
-                  <div v-if="show">
65
+                  <div v-if="picshow">
65 66
                     <el-upload
66
-                      v-loading="uploading"
67 67
                       :element-loading-text="loadingText"
68 68
                       class="avatar-uploader"
69 69
                       :data="uploadData"
@@ -236,7 +236,7 @@
236 236
         radio:'1',
237 237
         options: [],
238 238
         value: '',
239
-        show:false,
239
+        picshow:false,
240 240
         content: '',
241 241
         editorOption: {},
242 242
         company:"",
@@ -278,6 +278,7 @@
278 278
             vio_upload: [{required: true,message:"请上传视频"}],
279 279
             vid_type: [{required: true,message:"所属分类不能为空"}]
280 280
           },
281
+       
281 282
         artilcrules:{
282 283
             act_name: [{required: true, message: "文章标题不能为空"},],
283 284
             act_content: [{required: true,message:"文章内容不能为空"}],
@@ -292,12 +293,10 @@
292 293
     methods: {
293 294
       //第一个图片
294 295
       handleAvatarSuccess(res, file) {
295
-       this.form.org_logo = this.qiniuDomain + res.url;
296
-        this.uploading = false
296
+        this.form.org_logo = this.qiniuDomain + res.url;     
297 297
       },
298 298
        handleAvatarError(err, file, fileList) {
299 299
             this.$message.error(err);
300
-            this.uploading = false;
301 300
             return false
302 301
       },
303 302
       beforeAvatarUpload(file) {
@@ -320,10 +319,10 @@
320 319
             const _self = this
321 320
             return new Promise((resolve, reject) => {
322 321
                 getToken().then(response => {
323
-                    const token = response.data.data.uptoken
324
-                    console.log("token是什么?",token)
325
-                    _self._data.uploadData.token = token
326
-                    _self._data.uploadData.key = key
322
+                    const tokentree = response.data.data.uptoken
323
+                    console.log("token是什么?",tokentree)
324
+                    _self._data.uploadData.token = tokentree;
325
+                    _self._data.uploadData.key = key;
327 326
                     resolve(true)
328 327
                 }).catch(err => {
329 328
                     reject(false)
@@ -331,7 +330,9 @@
331 330
                 })
332 331
             })
333 332
       },
334
-      //监听图片获取前三张
333
+
334
+
335
+      //监听图片获取富文本前三张图片
335 336
        paragraphContentChanged: function(content) {
336 337
             var images = [],temp;
337 338
             console.log("监听获取的文章内容是什么?",content)
@@ -348,9 +349,7 @@
348 349
 
349 350
       //第二个图片
350 351
       handleAvatartwoSuccess(res, file) {
351
-        this.imageUrlSecond = URL.createObjectURL(file.raw);
352
-        this.form.org_logo = this.qiniuDomain + res.url;
353
-        this.uploading = false
352
+        this.imageUrl = this.qiniuDomain + res.url;
354 353
       },
355 354
        handleAvatartwoError(err, file, fileList) {
356 355
             this.$message.error(err);
@@ -377,10 +376,10 @@
377 376
             const _self = this
378 377
             return new Promise((resolve, reject) => {
379 378
                 getToken().then(response => {
380
-                    const token = response.data.data.uptoken
381
-                    console.log("token是什么?",token)
382
-                    _self._data.uploadData.token = token
383
-                    _self._data.uploadData.key = key
379
+                    const tokentwo = response.data.data.uptoken
380
+                    console.log("第二章图片的token是什么?",tokentwo)
381
+                    _self._data.uploadData.token = tokentwo;
382
+                    _self._data.uploadData.key = key;
384 383
                     resolve(true)
385 384
                 }).catch(err => {
386 385
                     reject(false)
@@ -393,9 +392,8 @@
393 392
 
394 393
       //第三张图片
395 394
       handleAvatarlastSuccess(res, file) {
396
-        this.imageUrlLast = URL.createObjectURL(file.raw);
397
-        this.form.org_logo = this.qiniuDomain + res.url;
398
-        this.uploading = false
395
+        // this.imageUrlLast = URL.createObjectURL(file.raw);
396
+        this.imageUrlLast = this.qiniuDomain + res.url;     
399 397
       },
400 398
        handleAvatarlastError(err, file, fileList) {
401 399
             this.$message.error(err);
@@ -481,7 +479,7 @@
481 479
         }
482 480
           const isLt2M = file.size / 1024 / 1024 < 1;
483 481
         if (!isLt2M) {
484
-          this.$message.error('上传视频大小不能超过 1M!');
482
+          this.$message.error('上传图片大小不能超过 1M!');
485 483
         }
486 484
             var date = new Date()
487 485
             var ext = getFileExtension(file.name)
@@ -500,10 +498,10 @@
500 498
             })
501 499
        },
502 500
       select(){
503
-        this.show = false
501
+        this.picshow = false
504 502
       },
505 503
       clickitem(){
506
-        this.show = true
504
+        this.picshow = true
507 505
       },
508 506
       handleRemove(file, fileList) {
509 507
         console.log(file, fileList);
@@ -547,7 +545,10 @@
547 545
         })
548 546
       },
549 547
       gotolink(){
550
-         this.$router.go(0);
548
+           this.centerDialogVisible = false;
549
+           this.form.act_name = "";
550
+           this.form.act_content = "";
551
+           this.form.act_picture = "";
551 552
       },
552 553
       gobacklist(){
553 554
         this.$router.push({path:'/articles/articleList'})

+ 56 - 21
src/scrm_pages/article/editArticle.vue 查看文件

@@ -16,7 +16,7 @@
16 16
                 <keep-alive>
17 17
                   <neditor ref="neditor"
18 18
                            id="editor"
19
-                           v-bind:r_content="form.content">
19
+                           v-bind:r_content="form.content"  @content_changed="paragraphContentChanged">
20 20
                   </neditor>
21 21
                 </keep-alive>
22 22
               </el-form-item>
@@ -42,8 +42,10 @@
42 42
                     </el-upload>
43 43
                   </div>
44 44
                 </el-col>
45
+              
46
+              <!-- 第二张图片 -->
45 47
                 <el-col :span="3">
46
-                  <div v-if="show">
48
+                  <div v-if="picshow">
47 49
                     <el-upload
48 50
                       v-loading="uploading"
49 51
                       :element-loading-text="loadingText"
@@ -54,13 +56,15 @@
54 56
                       :on-error="handleAvatartwoError"
55 57
                       :on-success="handleAvatartwoSuccess"
56 58
                       :before-upload="beforeAvatartwoUpload">
57
-                      <img v-if="imageUrlSecond" :src="imageUrlSecond" class="avatar">
59
+                      <img v-if="imageUrl" :src="imageUrl" class="avatar">
58 60
                       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
59 61
                     </el-upload>
60 62
                   </div>
61 63
                 </el-col>
64
+
65
+                <!-- 第三张图片 -->
62 66
                 <el-col :span="3">
63
-                  <div v-if="show">
67
+                  <div v-if="picshow">
64 68
                     <el-upload
65 69
                       v-loading="uploading"
66 70
                       :element-loading-text="loadingText"
@@ -94,8 +98,8 @@
94 98
             <el-col :span="24">
95 99
                 <el-form-item>
96 100
                       <el-button size="small" type="primary" style="width: 100px"  @click="UpdataArticleInfo('arctileform');">发布</el-button>
97
-                      <el-button size="small" style="width: 100px" @click="preview('arctileform')">预览</el-button>
98
-                      <el-button size="small" style="width: 100px" @click="save('arctileform');centerdraftVisible = false">保存草稿</el-button>
101
+                      <!-- <el-button size="small" style="width: 100px" @click="preview('arctileform')">预览</el-button> -->
102
+                      <el-button size="small" style="width: 100px" @click="saveArticleDraft('arctileform');centerdraftVisible = false">保存草稿</el-button>
99 103
                   <el-button size="small" style="width: 100px" @click="centercancelVisible = true">取消</el-button>
100 104
                 </el-form-item>
101 105
             </el-col>
@@ -118,7 +122,7 @@
118 122
            :visible.sync="dialogVisible"
119 123
             width="30%"
120 124
             center>
121
-           <span>这是一段信息</span>
125
+           <!-- <span>这是一段信息</span> -->
122 126
            <span slot="footer" class="dialog-footer">
123 127
            <el-button @click="gobackList()">返回文章列表</el-button>
124 128
            </span>
@@ -148,7 +152,7 @@
148 152
     import Neditor from '@/components/Neditor'
149 153
     import { getToken } from '@/api/qiniu'
150 154
     import { getFileExtension} from '@/utils/tools'
151
-    import {getEditArticle,getMenus,UpdataArticleInfo,previewEditArticle} from '@/api/act/submitinfo'
155
+    import {getEditArticle,getMenus,UpdataArticleInfo,previewEditArticle,saveArticleDraft} from '@/api/act/submitinfo'
152 156
     export default {
153 157
         name: "editArticle",
154 158
          components:{
@@ -176,6 +180,7 @@
176 180
           title:'',                 
177 181
           file:'',
178 182
         },
183
+         picshow:false,
179 184
          acttypes:[],
180 185
          imageUrl:'',
181 186
          imageUrlSecond:'',
@@ -213,8 +218,7 @@
213 218
          methods:{
214 219
              //第一个图片
215 220
       handleAvatarSuccess(res, file) {
216
-       this.form.org_logo = this.qiniuDomain + res.url;
217
-        this.uploading = false
221
+       this.form.imgs = this.qiniuDomain + res.url;      
218 222
       },
219 223
        handleAvatarError(err, file, fileList) {
220 224
             this.$message.error(err);
@@ -248,15 +252,13 @@
248 252
                     resolve(true)
249 253
                 }).catch(err => {
250 254
                     reject(false)
251
-                    this.uploading = false;
255
+                    
252 256
                 })
253 257
             })
254 258
       },
255 259
       //第二个图片
256 260
       handleAvatartwoSuccess(res, file) {
257
-        this.imageUrlSecond = URL.createObjectURL(file.raw);
258
-        this.form.org_logo = this.qiniuDomain + res.url;
259
-        this.uploading = false
261
+        this.imageUrl = this.qiniuDomain + res.url;    
260 262
       },
261 263
        handleAvatartwoError(err, file, fileList) {
262 264
             this.$message.error(err);
@@ -296,10 +298,9 @@
296 298
       },
297 299
 
298 300
       //第三张图片
299
-      handleAvatarlastSuccess(res, file) {
300
-        this.imageUrlLast = URL.createObjectURL(file.raw);
301
-        this.form.org_logo = this.qiniuDomain + res.url;
302
-        this.uploading = false
301
+      handleAvatarlastSuccess(res, file) {  
302
+        this.imageUrlLast = this.qiniuDomain + res.url;
303
+      
303 304
       },
304 305
        handleAvatarlastError(err, file, fileList) {
305 306
             this.$message.error(err);
@@ -360,9 +361,9 @@
360 361
         },
361 362
         
362 363
         UpdataArticleInfo(forName){
363
-              this.form.act_content = this.$refs.neditor.content;
364
+              this.form.content = this.$refs.neditor.content;
364 365
               const id = this.$route.params && this.$route.params.id;
365
-             console.log("文章内容",this.$refs.neditor.content);
366
+             console.log("发布文章内容",this.$refs.neditor.content);
366 367
              console.log("id是多少?",id)
367 368
              this.$refs[forName].validate((valid)=>{
368 369
                  if(valid){
@@ -374,6 +375,21 @@
374 375
                  }
375 376
              })
376 377
         },
378
+        saveArticleDraft(forName){
379
+          const id = this.$route.params && this.$route.params.id;
380
+           this.form.content = this.$refs.neditor.content;
381
+           console.log("id是多少?",id);
382
+           console.log("文章内容",this.$refs.neditor.content);
383
+           this.$refs[forName].validate((valid)=>{
384
+             if(valid){
385
+               saveArticleDraft(id,this.form).then(response=>{
386
+                  if(response.data.state ==1 ){
387
+                      this.dialogVisible = true;
388
+                  }
389
+               })
390
+             }
391
+           })
392
+        },
377 393
         gobackList(){
378 394
            this.$router.push({path:'/articles/articleList'})
379 395
         },
@@ -389,7 +405,26 @@
389 405
                  })
390 406
               }
391 407
             })
392
-        }
408
+        },
409
+        select(){
410
+        this.picshow = false
411
+        },
412
+       clickitem(){
413
+        this.picshow = true
414
+      },
415
+        //监听图片获取富文本前三张图片
416
+       paragraphContentChanged: function(content) {
417
+            var images = [],temp;
418
+            console.log("监听获取的文章内容是什么?",content)
419
+            var patt = /<img[^>]+src=['"]([^'"]+)['"]+/g;
420
+            while ((temp = patt.exec(content)) != null) {
421
+            images.push(temp[1]);
422
+            }                 
423
+             console.log("图片数组",images);
424
+             this.form.imgs = images[0];
425
+             this.imageUrl = images[1];
426
+             this.imageUrlLast = images [2];           
427
+        },
393 428
       },
394 429
       created(){
395 430
          const id = this.$route.params && this.$route.params.id;

+ 348 - 0
src/scrm_pages/article/editVido.vue 查看文件

@@ -0,0 +1,348 @@
1
+<template>
2
+    <div class="main-contain">
3
+       <div class="position">
4
+          <bread-crumb :crumbs='crumbs'></bread-crumb> 
5
+       </div>
6
+       <div class="app-container">
7
+           <el-form label-width="100px" class="clearfix"  :rules="rules" :model="form" ref="vidoform">
8
+           <el-row>
9
+             <el-col :span="24">
10
+                 <div style="margin-bottom: 100px">
11
+                   <el-form-item>
12
+                       <div class="video-select" v-if="show">
13
+                        <el-upload
14
+                            class="upload-demo"
15
+                            :data="uploadFileData"
16
+                            action="https://upload.qiniup.com"
17
+                            :on-change="handleChange"
18
+                            :on-success="handleSuccess"
19
+                            :on-error="handleError"
20
+                            :before-upload="beforeUploadFile"
21
+                             accept="video/x-flv,video/mpeg,video/avi,video/x-ms-wmv,video/quicktime,.asf,.rm,.rmvb,video/x-matroska,video/x-m4v,video/mp4">                         
22
+                             <el-button size="small" type="primary" v-if="show">点击上传</el-button>
23
+                             <div slot="tip" class="el-upload__tip" v-if="show">支持大多视频文件格式,大小不超过2G</div>
24
+                        </el-upload>
25
+                       </div>
26
+                         <div class="video" v-if="shows">
27
+                         <img v-if="form.vio_upload" :src="form.vio_upload+'?vframe/jpg/offset/1/w/300/h/200'" class="avatar" id="upvideo">
28
+                       </div>
29
+                        <div id="upvideo"></div>                  
30
+                    </el-form-item>
31
+                  </div>
32
+
33
+                 <el-form-item label="视频标题:" required prop="vid_name">
34
+                   <el-input v-model="form.vid_name"></el-input>
35
+                 </el-form-item>
36
+
37
+                 <el-form-item label="视频封面:">
38
+                   <el-upload  class="avatar-uploader" :show-file-list="false" 
39
+                   :on-success="handlevioSuccess" 
40
+                   :before-upload="beforevidoFile" 
41
+                   :on-change="handleChange"
42
+                   action="https://upload.qiniup.com"
43
+                   :data="uploadvidoData">
44
+                     <img v-if="form.vid_pic" :src="form.vid_pic" class="avatar">                  
45
+                     <img v-if="form.vio_upload" :src="form.vio_upload+'?vframe/jpg/offset/1/w/300/h/200'" class="avatar">
46
+                     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
47
+                   </el-upload>
48
+                 </el-form-item>
49
+                 <div class="eltip">
50
+                   视频封面若不上传,系统会根据视频内容进行自动截取<br>
51
+                   目前支持PNG和JPG格式,图片大小不能超过1MB
52
+                   </div>
53
+                  <el-form-item label="所属分类:" required prop="vid_type">
54
+                    <el-select v-model="form.vid_type">
55
+                      <el-option
56
+                          v-for="item in options"
57
+                          :key="item.id"
58
+                          :label="item.name"
59
+                          :value="item.id"> 
60
+                      </el-option>
61
+                      </el-select>
62
+                  </el-form-item>
63
+                   <el-row :span="24">
64
+                     <el-col :span="24">
65
+                       <el-form-item>
66
+                         <el-button size="small" type="primary" style="width: 100px" @click="SumitVido('vidoform');centerDialogVisible = false">发布</el-button>
67
+                         <el-button size="small" style="width: 100px" @click="Savedraft('vidoform');centerdraftVisible = false">保存草稿</el-button>
68
+                         <el-button size="small" style="width: 100px" @click="clear();centercancelVisible = true">取消</el-button>
69
+                       </el-form-item>
70
+                     </el-col>
71
+                   </el-row>                   
72
+             </el-col>
73
+           </el-row>
74
+        </el-form>
75
+
76
+          <el-dialog
77
+           title="发表成功"
78
+           :visible.sync="dialogVisible"
79
+            width="30%"
80
+            center>
81
+           <span>这是一段信息</span>
82
+           <span slot="footer" class="dialog-footer">
83
+           <el-button @click="gobackList()">返回文章列表</el-button>
84
+           </span>
85
+         </el-dialog>
86
+  
87
+       </div>
88
+    </div>
89
+</template>
90
+
91
+<script>
92
+    import BreadCrumb from '../components/bread-crumb'
93
+    import {getEditVidoInfo,getMenus,updataVidoInfo,SaveVidodraft} from '@/api/act/submitinfo'
94
+    import { getFileExtension} from '@/utils/tools'
95
+    import { getToken } from '@/api/qiniu'
96
+    export default {
97
+        name: "editVido",
98
+        components:{
99
+         BreadCrumb,
100
+      },
101
+      data(){
102
+         return{
103
+         crumbs: [
104
+           { path: false, name: '文章管理' },
105
+           { path: '/articles/articleList', name: '视频编辑' }
106
+          ],
107
+          form:{ 
108
+            file:'',
109
+            vid_pic:'',
110
+            vio_upload:'',
111
+            vid_name:'',
112
+            vid_type:'',
113
+          },
114
+          show:true,
115
+          shows:false,
116
+          dialogVisible:false,
117
+          options: [],
118
+          qiniuDomain: 'https://images.shengws.com/',
119
+          uploadFileData:{token:'',key:''},
120
+          uploadvidoData:{token:'',key:''},
121
+          rules: {
122
+            vid_name: [{required: true, message: "视频标题不能为空"},],
123
+            vid_type: [{required: true,message:"所属分类不能为空"}]
124
+          },
125
+         } 
126
+      },
127
+      methods:{
128
+        //视频上传
129
+        handleChange(file, fileList) {
130
+          this.form.file =  file.raw
131
+        }, 
132
+        handleSuccess(res,file,fileList){  
133
+            this.$message.success("视频上传成功")               
134
+             this.form.vio_upload = this.qiniuDomain + res.url;           
135
+             console.log("是什么",this.form.vio_upload)
136
+
137
+             this.show=false;
138
+             this.shows = true;
139
+        },
140
+        handlevioSuccess(res,file,fileList){
141
+            console.log("上传成功没有?")
142
+           this.form.vid_pic = this.qiniuDomain + res.url;  
143
+
144
+        },
145
+         handleError(err, file, fileList) {
146
+             this.$message.error("视频上传失败")
147
+         },
148
+        beforeUploadFile(file) {
149
+        console.log("失身",file.size)    
150
+        const isLt2M = file.size / 1024 / 1024 < 2048;
151
+        if (!isLt2M) {
152
+          this.$message.error('上传视频大小不能超过 2G!');
153
+        }
154
+            var date = new Date()
155
+            var ext = getFileExtension(file.name)
156
+            console.log("文件名",file.name)
157
+            var key = date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours()  + date.getMinutes()  + date.getSeconds()  +'_o_' + file.uid + '.' + ext;
158
+            const _self = this
159
+            return new Promise((resolve, reject) => {
160
+                getToken().then(response => {
161
+                    const token = response.data.data.uptoken
162
+                    console.log("token2是什么?",token)
163
+                    _self._data.uploadFileData.token = token
164
+                    _self._data.uploadFileData.key = key
165
+                    resolve(true)
166
+                }).catch(err => {
167
+                    reject(false)                  
168
+                })
169
+            })
170
+      },
171
+      beforevidoFile(file){
172
+          console.log(file.type)
173
+          const isJPG = file.type === 'image/jpg';
174
+          if (!isJPG) {
175
+          this.$message.error('上传头像图片只能是 png或者jpg格式!');
176
+        }
177
+          const isLt2M = file.size / 1024 / 1024 < 1;
178
+        if (!isLt2M) {
179
+          this.$message.error('上传图片大小不能超过 1M!');
180
+        }
181
+            var date = new Date()
182
+            var ext = getFileExtension(file.name)
183
+            var key = date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours()  + date.getMinutes()  + date.getSeconds()  +'_o_' + file.uid + '.' + ext;
184
+            const _self = this
185
+            return new Promise((resolve, reject) => {
186
+                getToken().then(response => {
187
+                    const token = response.data.data.uptoken
188
+                    console.log("token2是什么?",token)
189
+                    _self._data.uploadvidoData.token = token
190
+                    _self._data.uploadvidoData.key = key
191
+                    resolve(true)
192
+                }).catch(err => {
193
+                    reject(false)                  
194
+                })
195
+            })
196
+       },
197
+      select(){
198
+        this.picshow = false
199
+      },
200
+      clickitem(){
201
+        this.picshow = true
202
+      },
203
+      handleRemove(file, fileList) {
204
+        console.log(file, fileList);
205
+      },
206
+      handlePreview(file) {
207
+        console.log(file);
208
+      },
209
+      handleExceed(files, fileList) {
210
+        this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
211
+      },
212
+      beforeRemove(file, fileList) {
213
+        return this.$confirm(`确定移除 ${ file.name }?`);
214
+      },
215
+      changeActtype(){
216
+         console.log("所属分类",this.form.act_type)
217
+       },
218
+       getEditVidoInfo(id){
219
+           getEditVidoInfo(id,this.form).then(response=>{
220
+               if(response.data.state==1){
221
+                 var vidos = response.data.data.vidos;
222
+                 this.form.vid_name = vidos.title;
223
+                 this.form.vid_pic = vidos.imgs;
224
+                 console.log("得到的是什么?",this.form.vid_pic)
225
+                 this.form.vid_type =  vidos.class_id
226
+                 console.log("视频vidos",vidos)
227
+               }    
228
+           })        
229
+       },
230
+       
231
+       getMenus(){
232
+           getMenus().then(response=>{
233
+               if(response.data.state ==1){
234
+                   var categorys = response.data.data.categorys;
235
+                   this.options = categorys;
236
+                  console.log("分类号",categorys)
237
+               }
238
+           });
239
+       },
240
+
241
+       SumitVido(forName){
242
+             const id = this.$route.params && this.$route.params.id;
243
+             console.log("id是多少?",id)
244
+          this.$refs[forName].validate((valid)=>{
245
+              if(valid){
246
+                 updataVidoInfo(id,this.form).then(response=>{
247
+                     if(response.data.state == 1){
248
+                         this.dialogVisible = true;      
249
+                     }
250
+                 })   
251
+              }
252
+          })
253
+       },
254
+        gobackList(){
255
+         this.$router.push({path:'/articles/articleList'})
256
+        },
257
+        clear(){
258
+          this.$confirm('是否确定取消编辑此文章/视频','取消提示',{
259
+            dangerouslyUseHTMLString:true,
260
+            confirmButtonText: '确定',
261
+            cancelButtonText: '取消',
262
+            type: 'warning'
263
+          }).then(()=>{
264
+             this.$router.push({path:'/articles/articleList'})  
265
+          }) 
266
+        },
267
+
268
+        Savedraft(forName){
269
+           const id = this.$route.params && this.$route.params.id;
270
+           console.log("id是多少?",id);
271
+           this.$refs[forName].validate((valid)=>{
272
+               if(valid){
273
+                  SaveVidodraft(id,this.form).then(response=>{
274
+                      if(response.data.state == 1){
275
+                          this.dialogVisible = true;
276
+                      }
277
+                  });
278
+               }
279
+           })
280
+        }
281
+      },
282
+      created(){
283
+         const id = this.$route.params && this.$route.params.id;
284
+         console.log("id是什么?",id)
285
+         this.getEditVidoInfo(id);
286
+         this.getMenus();
287
+      }
288
+    }
289
+</script>
290
+
291
+<style scoped>
292
+      /*视频*/
293
+  .video-select {
294
+    padding: 150px 0 30px;
295
+    background: url("/static/images/video_load.png") no-repeat;
296
+    background-position: center 0;
297
+    background-size: 192px 132px;
298
+    text-align: center;
299
+    width: 200px;
300
+    height: 200px;
301
+    position: relative;
302
+    left: 500px;
303
+    margin-bottom: 1px;
304
+   }
305
+   .video{
306
+    padding: 150px 0 30px;
307
+    background-position: center 0;
308
+    background-size: 192px 132px;
309
+    text-align: center;
310
+    width: 200px;
311
+    height: 200px;
312
+    position: relative;
313
+    left: 500px;
314
+    margin-bottom: 60px;
315
+    margin-top: -140px;
316
+  }
317
+  .eltip{
318
+    font-size: 12px;
319
+    position: relative;
320
+    left: 80px;
321
+    margin-bottom: 20px;
322
+  }
323
+
324
+    .avatar-uploader{
325
+    border: 1px solid #d9d9d9;
326
+    border-radius: 6px;
327
+    cursor: pointer;
328
+    overflow: hidden;
329
+    width: 140px;
330
+    height: 140px;
331
+  }
332
+  .avatar-uploader{
333
+    border-color: #f0f2f5;
334
+  }
335
+  .avatar-uploader-icon {
336
+    font-size: 25px;
337
+    color: #8c939d;
338
+    width: 140px;
339
+    height: 140px;
340
+    line-height: 140px;
341
+    text-align: center;
342
+  }
343
+  .avatar {
344
+    width: 178px;
345
+    height: 178px;
346
+    display: block;
347
+  }
348
+</style>