BJ_ZTEITS-Developers / parking-cloud-yudao

Commit c0bd3471d5382b9fd8f8f015cf12558b4f26c778

Authored by YunaiV
1 parent 4080d2de

mp：初步实现【草稿】的前端新增（优化，减少冗余代码）

Inline Side-by-side
Showing 1 changed file with 77 additions and 107 deletions
yudao-ui-admin/src/views/mp/draft/index.vue
  View file @c0bd347
... ... @@ -39,7 +39,7 @@ SOFTWARE.
39 39 <!-- 操作工具栏 -->
40 40 <el-row :gutter="10" class="mb8">
41 41 <el-col :span="1.5">
42   - <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddNews"
  42 + <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
43 43 v-hasPermi="['mp:draft:create']">新增
44 44 </el-button>
45 45 </el-col>
... ... @@ -114,7 +114,7 @@ SOFTWARE.
114 114 </div>
115 115 </div>
116 116 </div>
117   - <div class="right" v-loading="addMaterialLoading">
  117 + <div class="right" v-loading="addMaterialLoading" v-if="articlesAdd.length > 0">
118 118 <!--富文本编辑器组件-->
119 119 <el-row>
120 120 <WxEditor v-model="articlesAdd[isActiveAddNews].content" :uploadData="uploadData"
... ... @@ -154,7 +154,7 @@ SOFTWARE.
154 154 </div>
155 155 <div slot="footer" class="dialog-footer">
156 156 <el-button @click="dialogNewsVisible = false">取 消</el-button>
157   - <el-button type="primary" @click="subNews">提 交</el-button>
  157 + <el-button type="primary" @click="submitForm">提 交</el-button>
158 158 </div>
159 159 </el-dialog>
160 160 </div>
... ... @@ -212,18 +212,7 @@ export default {
212 212 // ========== 草稿新建 or 修改 ==========
213 213 dialogNewsVisible: false,
214 214 addMaterialLoading: false, // 添加草稿的 loading 标识
215   - articlesAdd: [{
216   - "title": '',
217   - "thumbMediaId": '',
218   - "author": '',
219   - "digest": '',
220   - "showCoverPic": '',
221   - "content": '123', // TODO 芋艿：临时测试
222   - "contentSourceUrl": '',
223   - "needOpenComment": '',
224   - "onlyFansCanComment": '',
225   - "thumbUrl": '',
226   - }],
  215 + articlesAdd: [],
227 216 isActiveAddNews: 0,
228 217 dialogImageVisible: false,
229 218 imageListData: [],
... ... @@ -349,80 +338,14 @@ export default {
349 338 }).catch(() => {
350 339 })
351 340 },
352   - downNews(index){
353   - let temp = this.articlesAdd[index]
354   - this.articlesAdd[index] = this.articlesAdd[index+1]
355   - this.articlesAdd[index+1] = temp
356   - this.isActiveAddNews = index+1
357   - },
358   - upNews(index){
359   - let temp = this.articlesAdd[index]
360   - this.articlesAdd[index] = this.articlesAdd[index-1]
361   - this.articlesAdd[index-1] = temp
362   - this.isActiveAddNews = index-1
363   - },
364   - activeNews(index){
365   - this.hackResetEditor = false//销毁组件
366   - this.$nextTick(() => {
367   - this.hackResetEditor = true//重建组件
368   - })
369   - this.isActiveAddNews = index
370   - },
371   - minusNews(index){
372   - this.$confirm('确定删除该图文吗?', '提示', {
373   - confirmButtonText: '确定',
374   - cancelButtonText: '取消',
375   - type: 'warning'
376   - }).then(() => {
377   - this.articlesAdd.splice(index,1);
378   - if(this.isActiveAddNews === index){
379   - this.isActiveAddNews = 0
380   - }
381   - }).catch(() => {})
382   - },
383   - plusNews(){
384   - this.articlesAdd.push(
385   - {
386   - "title": '',
387   - "thumbMediaId": '',
388   - "author": '',
389   - "digest": '',
390   - "showCoverPic": '',
391   - "content": '',
392   - "contentSourceUrl": '',
393   - "needOpenComment":'',
394   - "onlyFansCanComment":'',
395   - "thumbUrl":''
396   - }
397   - )
398   - this.isActiveAddNews = this.articlesAdd.length - 1
399   - },
400   - subNews() {
  341 + /** 提交按钮 */
  342 + submitForm() {
401 343 this.addMaterialLoading = true
402   - if(this.operateMaterial === 'add'){
  344 + if (this.operateMaterial === 'add') {
403 345 createDraft(this.queryParams.accountId, this.articlesAdd).then(response => {
404   - this.addMaterialLoading = false
405   - this.dialogNewsVisible = false
406   - if(response.code == 200){
407   - this.isActiveAddNews = 0
408   - this.articlesAdd = [
409   - {
410   - "title": '',
411   - "thumbMediaId": '',
412   - "author": '',
413   - "digest": '',
414   - "showCoverPic": '',
415   - "content": '',
416   - "contentSourceUrl": '',
417   - "needOpenComment":'',
418   - "onlyFansCanComment":'',
419   - "thumbUrl":''
420   - }
421   - ]
422   - this.getList()
423   - } else {
424   - this.$message.error('新增图文出错：' + response.msg)
425   - }
  346 + this.$modal.msgSuccess("新增成功");
  347 + this.dialogNewsVisible = false;
  348 + this.getList()
426 349 }).finally(() => {
427 350 this.addMaterialLoading = false
428 351 })
... ... @@ -472,32 +395,77 @@ export default {
472 395 this.articlesMediaId = item.mediaId
473 396 this.dialogNewsVisible = true
474 397 },
475   - handleAddNews(){
  398 + /** 新增按钮操作 */
  399 + handleAdd() {
  400 + this.resetEditor();
  401 + this.reset();
  402 + // 打开表单，并设置初始化
  403 + this.operateMaterial = 'add'
  404 + this.dialogNewsVisible = true
  405 + },
  406 + // 表单重置
  407 + reset() {
  408 + this.isActiveAddNews = 0
  409 + this.articlesAdd = [this.buildEmptyArticle()]
  410 + },
  411 + // 表单 Editor 重置
  412 + resetEditor() {
476 413 this.hackResetEditor = false // 销毁组件
477 414 this.$nextTick(() => {
478 415 this.hackResetEditor = true // 重建组件
479 416 })
480   - if(this.operateMaterial == 'edit'){
481   - this.isActiveAddNews = 0
482   - this.articlesAdd = [
483   - {
484   - "title": '',
485   - "thumbMediaId": '',
486   - "author": '',
487   - "digest": '',
488   - "showCoverPic": '',
489   - "content": '',
490   - "contentSourceUrl": '',
491   - "needOpenComment":'',
492   - "onlyFansCanComment":'',
493   - "thumbUrl":''
494   - }
495   - ]
  417 + },
  418 + // 将图文向下移动
  419 + downNews(index) {
  420 + let temp = this.articlesAdd[index]
  421 + this.articlesAdd[index] = this.articlesAdd[index+1]
  422 + this.articlesAdd[index + 1] = temp
  423 + this.isActiveAddNews = index + 1
  424 + },
  425 + // 将图文向上移动
  426 + upNews(index) {
  427 + let temp = this.articlesAdd[index]
  428 + this.articlesAdd[index] = this.articlesAdd[index - 1]
  429 + this.articlesAdd[index - 1] = temp
  430 + this.isActiveAddNews = index - 1
  431 + },
  432 + // 选中指定 index 的图文
  433 + activeNews(index) {
  434 + this.resetEditor();
  435 + this.isActiveAddNews = index
  436 + },
  437 + // 删除指定 index 的图文
  438 + minusNews(index) {
  439 + this.$modal.confirm('确定删除该图文吗?').then(() => {
  440 + this.articlesAdd.splice(index,1);
  441 + if (this.isActiveAddNews === index) {
  442 + this.isActiveAddNews = 0
  443 + }
  444 + }).catch(() => {})
  445 + },
  446 + // 添加一个图文
  447 + plusNews() {
  448 + this.articlesAdd.push(this.buildEmptyArticle())
  449 + this.isActiveAddNews = this.articlesAdd.length - 1
  450 + },
  451 + // 创建空的 article
  452 + buildEmptyArticle() {
  453 + return {
  454 + "title": '',
  455 + "thumbMediaId": '',
  456 + "author": '',
  457 + "digest": '',
  458 + "showCoverPic": '',
  459 + "content": '',
  460 + "contentSourceUrl": '',
  461 + "needOpenComment":'',
  462 + "onlyFansCanComment":'',
  463 + "thumbUrl":''
496 464 }
497   - this.operateMaterial = 'add'
498   - this.dialogNewsVisible = true
499 465 },
500   - beforeThumbImageUpload(file){
  466 +
  467 + // ======================== 文件上传 ========================
  468 + beforeThumbImageUpload(file) {
501 469 this.addMaterialLoading = true
502 470 const isType = file.type === 'image/jpeg'
503 471 || file.type === 'image/png'
... ... @@ -539,6 +507,8 @@ export default {
539 507 this.articlesAdd[this.isActiveAddNews].thumbMediaId = item.mediaId
540 508 this.articlesAdd[this.isActiveAddNews].thumbUrl = item.url
541 509 },
  510 +
  511 + // ======================== 草稿箱发布 ========================
542 512 handlePublishNews(item){
543 513 this.$confirm('你正在通过发布的方式发表内容。 发布不占用群发次数，一天可多次发布。已发布内容不会推送给用户，也不会展示在公众号主页中。 发布后，你可以前往发表记录获取链接，也可以将发布内容添加到自定义菜单、自动回复、话题和页面模板中。', '提示', {
544 514 confirmButtonText: '确定',
... ...