群发助手优化

src/components/groupSend/index.vue

@@ -126,7 +126,7 @@
               <el-input v-model="searchFrom.user_ids"></el-input>
             </el-form-item>
           </el-col>
-          <el-col :span="8">
+          <el-col :span="6" :offset="2">
             <el-button type="primary" @click="onSelectUser">选择用户</el-button>
           </el-col>
         </el-row>
@@ -157,33 +157,91 @@
             </div>
           </el-tab-pane>
           <el-tab-pane label="图片" name="image">
-            <div class="inner-edit_area">
+            <div class="flex-start">
+              <div>
+                <el-upload
+                  action="/api/public/upload/zone"
+                  :http-request="uploadFile"
+                  :before-upload="beforeAvatarUpload"
+                  list-type="picture-card"
+                  :file-list="imageList"
+                  :on-success="handleAvatarSuccess"
+                  :on-remove="handleRemove"
+                  :limit="1">
+                  <i class="el-icon-plus"></i>
+                </el-upload>
+              </div>
+              <div class="display-b" style="margin-left: 10px">
+                <div class="choose_item" style="color: #888;" @click="getMediaList()"><i class="el-icon-plus" style="color: #8c939d"></i>从素材库中选择</div>
+              </div>
+            </div>
+            <div v-if="showImage && mediaImageList.length > 0">
+              <el-table
+                :data="mediaImageList"
+                @row-click="onChooseMedia"
+                style="width: 100%">
+                <el-table-column
+                  prop="name"
+                  label="名称">
+                </el-table-column>
+                <el-table-column
+                  prop="media_id"
+                  label="mediaId">
+                </el-table-column>
+                <el-table-column
+                  label="URL">
+                  <template slot-scope="scope">
+                    <a :href="scope.row.url">
+                      <img style="width: 60px;" :src="scope.row.url"/>
+                    </a>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <page-image :total="mediaImagePage.total" v-model="mediaImagePage.nowPage" :limit="mediaImagePage.limit" @pageChange="onImagePageChange" @sizeChange="onImageSizeChange"/>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="视频" name="video">
+            <div class="flex-start">
               <el-upload
+                class="upload-video"
                 action="/api/public/upload/zone"
-                :http-request="uploadFile"
-                :before-upload="beforeAvatarUpload"
-                list-type="picture-card"
-                :file-list="imageList"
-                :on-success="handleAvatarSuccess"
-                :on-remove="handleRemove"
+                :http-request="uploadVideo"
+                :file-list="fileList"
+                :on-remove="handleRemoveVideo"
                 :limit="1">
-                <i class="el-icon-plus"></i>
+                <el-button size="small" type="primary" :disabled="(fileUid && progress < 99)">点击上传</el-button>
+                <div style="width: 300px">
+                  <el-progress v-if="fileUid" :percentage="progress"></el-progress>
+                </div>
               </el-upload>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label="视频" name="video">
-            <el-upload
-              class="upload-video"
-              action="/api/public/upload/zone"
-              :http-request="uploadVideo"
-              :file-list="fileList"
-              :on-remove="handleRemoveVideo"
-              :limit="1">
-              <el-button size="small" type="primary" :disabled="(fileUid && progress < 99)">点击上传</el-button>
-              <div style="width: 300px">
-                <el-progress v-if="fileUid" :percentage="progress"></el-progress>
+              <div class="display-b">
+                <div class="choose_item" style="color: #888;" @click="getMediaList()"><i class="el-icon-plus" style="color: #8c939d"></i>从素材库中选择</div>
               </div>
-            </el-upload>
+            </div>
+            <div v-if="showVideo && mediaVideoList.length > 0">
+              <el-table
+                :data="mediaVideoList"
+                @row-click="onChooseMedia"
+                style="width: 100%">
+                <el-table-column
+                  prop="name"
+                  label="名称">
+                </el-table-column>
+                <el-table-column
+                  prop="media_id"
+                  label="mediaId">
+                </el-table-column>
+                <el-table-column
+                  label="URL">
+                  <template slot-scope="scope">
+                    <a :href="scope.row.info.down_url" target="_blank" v-if="scope.row.info && scope.row.info.down_url">
+                      {{scope.row.info.title}}
+                    </a>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <page :total="total" v-model="nowPage" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
+            </div>
           </el-tab-pane>
           <el-tab-pane label="图文" name="news">
             <div v-if="newsContent && newsContent.content && newsContent.content.news_item">
@@ -217,7 +275,7 @@
               <i class="el-icon-delete" @click="newsContent=''" style="display: inline-block"></i>
             </div>
             <div class="display-b">
-              <div class="choose_item" style="color: #888;" @click="getMediaList()">+从素材库中选择</div>
+              <div class="choose_item" style="color: #888;" @click="getMediaList()"><i class="el-icon-plus" style="color: #8c939d"></i>从素材库中选择</div>
             </div>
             <div v-if="showMedia && mediaList.length > 0">
               <el-table
@@ -329,6 +387,8 @@
   import {uploadFileApi,getMsgListApi,sendMsgApi,getUserListApi,getMediaListApi} from "../../service/api";
   import page from '../framework/page'
   import page2 from '../framework/page'
+  import pageImage from '../framework/page'
+  import pageVideo from '../framework/page'
   import emotion from '../framework/Emotion/index'
   import CommonJs from '../../util/common';
   export default {
@@ -336,6 +396,8 @@
     components: {
       page,
       page2,
+      pageImage,
+      pageVideo,
       emotion
     },
     data() {
@@ -346,7 +408,7 @@
         mediaPage: {
           nowPage: 1,
           total: 0,
-          limit: 10,
+          limit: 5,
         },
         show: false,
         loading: false,
@@ -375,7 +437,21 @@
         multipleSelection: [],
         showEmotion: false,
         showMedia: false,
+        showImage: false,
+        showVideo: false,
         mediaList: [],
+        mediaImageList: [],
+        mediaVideoList: [],
+        mediaImagePage: {
+          nowPage: 1,
+          total: 0,
+          limit: 5,
+        },
+        mediaVideoPage: {
+          nowPage: 1,
+          total: 0,
+          limit: 5,
+        },
         imageContent: null,
         videoContent: null,
         newsContent: null
@@ -598,6 +674,24 @@
         this.mediaPage.limit = val
         this.getMediaList()
       },
+      onImagePageChange(val){
+        this.mediaImagePage.nowPage = val
+        this.getMediaList()
+      },
+      onImageSizeChange(val){
+        this.mediaImagePage.nowPage = 1
+        this.mediaImagePage.limit = val
+        this.getMediaList()
+      },
+      onVideoPageChange(val){
+        this.mediaVideoPage.nowPage = val
+        this.getMediaList()
+      },
+      onVideoSizeChange(val){
+        this.mediaVideoPage.nowPage = 1
+        this.mediaVideoPage.limit = val
+        this.getMediaList()
+      },
       onPageChange(val){
         this.nowPage = val
         this.getMsgList()
@@ -697,14 +791,25 @@
         this.content += i
       },
       onChooseMedia(val){
+        console.log('onChooseMedia', val)
         if (this.type === 'image') {
-          this.imageContent = val
+          this.imageContent = {
+            content: val.media_id,
+            url: val.url
+          }
+          this.imageList = [{name:val.media_id,url:val.url}]
+          this.showImage = false;
         } else if (this.type === 'video'){
-          this.videoContent = val
+          this.videoContent = {
+            content: val.media_id,
+            url: val.info.down_url
+          }
+          this.fileList = [{name:val.info.title,url:val.info.url}]
+          this.showVideo = false;
         } else if (this.type === 'news'){
           this.newsContent = val
+          this.showMedia = false;
         }
-        this.showMedia = false;
       },
       getMediaList(){
         let type = this.activeName;
@@ -713,13 +818,35 @@
           page: this.mediaPage.nowPage,
           limit: this.mediaPage.limit
         };
+        if(type === 'image'){
+          json.page =  this.mediaImagePage.nowPage
+          json.limit = this.mediaImagePage.limit
+          this.showImage = true;
+        }else if (type === 'video'){
+          json.page =  this.mediaVideoPage.nowPage
+          json.limit = this.mediaVideoPage.limit
+          this.showVideo = true;
+        }else if (type === 'news'){
+          json.page =  this.mediaPage.nowPage
+          json.limit = this.mediaPage.limit
+          this.showMedia = true;
+        }
         this.loading = true;
-        this.showMedia = true;
         getMediaListApi(json).then(res=>{
           this.loading = false;
           this.type = type;
           this.mediaList = res.item;
           this.mediaPage.total = res.total_count;
+          if(type === 'image'){
+            this.mediaImageList = res.item;
+            this.mediaImagePage.total = res.total_count;
+          }else if (type === 'video'){
+            this.mediaVideoList = res.item;
+            this.mediaVideoPage.total = res.total_count;
+          }else if (type === 'news'){
+            this.mediaList = res.item;
+            this.mediaPage.total = res.total_count;
+          }
           if (this.total === 0 ) {
             this.$message({
               showClose: true,
@@ -804,13 +931,15 @@
     margin-top: 20px;
   }
   .choose_item {
+    box-sizing: border-box;
     margin-bottom: 25px;
     color: rgb(136, 136, 136);
-    height: 80px;
-    line-height: 80px;
-    width: 45%;
-    border: 1px dashed;
+    height: 148px;
+    line-height: 148px;
+    width: 148px;
     text-align: center;
+    border: 1px dashed #c0ccda;
+    border-radius: 6px;
   }
   .display-b {
     display: flex;
@@ -911,16 +1040,22 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .flex-start {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
 </style>
 <style>
   .el-radio-group {
-    display: flex;
+    display: flex !important;
     flex-flow: column;
     justify-content: flex-start;
     align-items: flex-start;
   }
   .el-radio+.el-radio {
-     margin-left: 0;
+     margin-left: 0 !important;
   }
   .el-radio {
     margin-bottom: 6px;