mp：初步实现【草稿】的前端新增

yudao-ui-admin/src/api/mp/draft.js

@@ -8,3 +8,14 @@ export function getDraftPage(query) {
     params: query
   })
 }
+
+// 创建草稿
+export function createDraft(accountId, articles) {
+  return request({
+    url: '/mp/draft/create?accountId=' + accountId,
+    method: 'post',
+    data: {
+      articles
+    }
+  })
+}

yudao-ui-admin/src/views/mp/draft/index.vue

@@ -103,13 +103,13 @@ SOFTWARE.
                            @click="downNews(index)">下移
                 </el-button>
                 <el-button type="mini" icon="el-icon-sort-up" @click="upNews(index)">上移</el-button>
-                <el-button v-if="operateMaterial=='add'" type="mini" icon="el-icon-delete"
+                <el-button v-if="operateMaterial=== 'add'" type="mini" icon="el-icon-delete"
                            @click="minusNews(index)">删除
                 </el-button>
               </div>
             </div>
           </div>
-          <div class="news-main-plus" @click="plusNews" v-if="articlesAdd.length<8 && operateMaterial=='add'">
+          <div class="news-main-plus" @click="plusNews" v-if="articlesAdd.length<8 && operateMaterial==='add'">
             <i class="el-icon-circle-plus icon-plus"></i>
           </div>
         </div>
@@ -121,40 +121,30 @@ SOFTWARE.
                     v-if="hackResetEditor"/>
         </el-row>
         <br><br><br><br>
+        <!-- 封面和摘要 -->
         <div class="input-tt">封面和摘要：</div>
         <div>
           <div class="thumb-div">
             <img class="material-img" v-if="articlesAdd[isActiveAddNews].thumbUrl"
-                 :src="articlesAdd[isActiveAddNews].thumbUrl" :class="isActiveAddNews == 0 ? 'avatar':'avatar1'">
+                 :src="articlesAdd[isActiveAddNews].thumbUrl" :class="isActiveAddNews === 0 ? 'avatar':'avatar1'">
             <i v-else class="el-icon-plus avatar-uploader-icon"
                :class="isActiveAddNews === 0 ? 'avatar':'avatar1'"></i>
             <div class="thumb-but">
-              <el-upload
+              <el-upload :action="actionUrl" :headers="headers" multiple :limit="1" :file-list="fileList" :data="uploadData"
-                :action="actionUrl"
+                         :before-upload="beforeThumbImageUpload" :on-success="handleUploadSuccess">
-                :headers="headers"
+                <el-button slot="trigger" size="mini" type="primary">本地上传</el-button>
-                multiple
+                <el-button size="mini" type="primary" @click="openMaterial" style="margin-left: 5px">素材库选择</el-button>
-                :limit="1"
-                :on-success="handleUploadSuccess"
-                :file-list="fileList"
-                :before-upload="beforeThumbImageUpload"
-                :data="uploadData">
-                <el-button slot="trigger" size="mini" type="primary">
-                  本地上传
-                </el-button>
-                <el-button size="mini" type="primary"
-                           @click="openMaterial" style="margin-left: 5px">素材库选择
-                </el-button>
                 <div slot="tip" class="el-upload__tip">支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M</div>
               </el-upload>
             </div>
           </div>
           <el-dialog title="选择图片" :visible.sync="dialogImageVisible" width="80%" append-to-body>
-            <WxMaterialSelect :objData="{repType:'image'}"
+            <WxMaterialSelect :objData="{repType:'image'}" @selectMaterial="selectMaterial" />
-                              @selectMaterial="selectMaterial"></WxMaterialSelect>
           </el-dialog>
           <el-input :rows="8" type="textarea" v-model="articlesAdd[isActiveAddNews].digest" placeholder="请输入摘要"
                     class="digest" maxlength="120"></el-input>
         </div>
+        <!-- 标题、作者、原文地址 -->
         <div class="input-tt">标题：</div>
         <el-input v-model="articlesAdd[isActiveAddNews].title" placeholder="请输入标题"></el-input>
         <div class="input-tt">作者：</div>
@@ -171,13 +161,12 @@ SOFTWARE.
 </template>
 
 <script>
-// import {getPage, addObj, delObj, putObj, publish} from '@/api/wxmp/wxdraft'
 // import { getPage as getPage1 } from '@/api/wxmp/wxmaterial'
 // import WxEditor from '@/components/Editor/WxEditor.vue'
 import WxNews from '@/views/mp/components/wx-news/main.vue';
 import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
 import { getAccessToken } from '@/utils/auth'
-import { getDraftPage } from "@/api/mp/draft";
+import {createDraft, getDraftPage} from "@/api/mp/draft";
 import {getSimpleAccounts} from "@/api/mp/account";
 
 export default {
@@ -208,31 +197,33 @@ export default {
         currentPage: 1, // 当前页数
         pageSize: 10 // 每页显示多少条
       },
-      actionUrl: process.env.VUE_APP_BASE_API +'/wxmaterial/materialFileUpload',
+
+      // ========== 文件上传 ==========
+      actionUrl: process.env.VUE_APP_BASE_API + "/admin-api/mp/material/upload-permanent", // 上传永久素材的地址
       headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
       fileList: [],
-      dialogVideoVisible: false,
-      dialogNewsVisible: false,
-      addMaterialLoading: false,
       uploadData: {
-        "mediaType": 'image',
+        "type": 'image', // TODO 芋艿：试试要不要换成 thumb
         "title": '',
-        "introduction": ''
+        "introduction": '',
+        "accountId": 1,
       },
-      articlesAdd: [
+
-        {
+      // ========== 草稿新建 or 修改 ==========
+      dialogNewsVisible: false,
+      addMaterialLoading: false, // 添加草稿的 loading 标识
+      articlesAdd: [{
         "title": '',
         "thumbMediaId": '',
         "author": '',
         "digest": '',
         "showCoverPic": '',
-          "content": '',
+        "content": '123', // TODO 芋艿：临时测试
         "contentSourceUrl": '',
         "needOpenComment": '',
         "onlyFansCanComment": '',
-          "thumbUrl": ''
+        "thumbUrl": '',
-        }
+      }],
-      ],
       isActiveAddNews: 0,
       dialogImageVisible: false,
       imageListData: [],
@@ -251,12 +242,18 @@ export default {
       // 默认选中第一个
       if (this.accounts.length > 0) {
         this.queryParams.accountId = this.accounts[0].id;
+        this.setAccountId(this.accounts[0].id);
       }
       // 加载数据
-      this.getList();
+      // this.getList();
     })
   },
   methods: {
+    /** 设置账号编号 */
+    setAccountId(accountId) {
+      this.queryParams.accountId = accountId;
+      this.uploadData.accountId = accountId;
+    },
     /** 查询列表 */
     getList() {
       // 如果没有选中公众号账号，则进行提示。
@@ -280,6 +277,20 @@ export default {
         this.loading = false
       })
     },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm('queryForm')
+      // 默认选中第一个
+      if (this.accounts.length > 0) {
+        this.setAccountId(this.accounts[0].id)
+      }
+      this.handleQuery()
+    },
 
     delMaterial(item){
       this.$confirm('此操作将永久删除该草稿, 是否继续?', '提示', {
@@ -388,10 +399,8 @@ export default {
     },
     subNews() {
       this.addMaterialLoading = true
-      if(this.operateMaterial == 'add'){
+      if(this.operateMaterial === 'add'){
-        addObj({
+        createDraft(this.queryParams.accountId, this.articlesAdd).then(response => {
-          articles:this.articlesAdd
-        }).then(response => {
           this.addMaterialLoading = false
           this.dialogNewsVisible = false
           if(response.code == 200){
@@ -410,12 +419,11 @@ export default {
                 "thumbUrl":''
               }
             ]
-            this.queryParams.currentPage = 1
+            this.getList()
-            this.getList(this.queryParams)
           } else {
             this.$message.error('新增图文出错：' + response.msg)
           }
-        }).catch(() => {
+        }).finally(() => {
           this.addMaterialLoading = false
         })
       }
@@ -491,30 +499,40 @@ export default {
     },
     beforeThumbImageUpload(file){
       this.addMaterialLoading = true
-      const isType = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/bmp' || file.type === 'image/jpg';
+      const isType = file.type === 'image/jpeg'
-      const isLt = file.size / 1024 / 1024 < 2
+          || file.type === 'image/png'
+          || file.type === 'image/gif'
+          || file.type === 'image/bmp'
+          || file.type === 'image/jpg';
       if (!isType) {
         this.$message.error('上传图片格式不对!')
+        this.addMaterialLoading = false
+        return false;
       }
+      const isLt = file.size / 1024 / 1024 < 2
       if (!isLt) {
         this.$message.error('上传图片大小不能超过 2M!')
-      }
         this.addMaterialLoading = false
-      return isType && isLt;
+        return false;
+      }
+      // 校验通过
+      return true;
     },
     handleUploadSuccess(response, file, fileList) {
-      this.loading = false
+      this.addMaterialLoading = false // 关闭 loading
-      this.addMaterialLoading = false
+      if (response.code !== 0) {
-      if(response.code == 200){
+        this.$message.error('上传出错：' + response.msg)
-        this.dialogVideoVisible = false
+        return false;
+      }
+
+      // 重置上传文件的表单
       this.fileList = []
       this.uploadData.title = ''
       this.uploadData.introduction = ''
+
+      // 设置草稿的封面字段
       this.articlesAdd[this.isActiveAddNews].thumbMediaId = response.data.mediaId
       this.articlesAdd[this.isActiveAddNews].thumbUrl = response.data.url
-      }else{
-        this.$message.error('上传出错：' + response.msg)
-      }
     },
     selectMaterial(item){
       this.dialogImageVisible = false