群发消息接口联调

src/views/IM/chain-history/detail.vue

@@ -2,22 +2,28 @@
   <div class="chain-history-detail">
     <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
     <div class="component-content screenSet" id="screenSet">
-       <div>群发标题：{{detailData.title}}</div>
-       <div>目标用户：{{detailData.title}}</div>
-       <div v-for="(item, index) in contentList" :key="index">
-           <div v-if="item.type == 1" class="text-content">
-               <div>{{item.content}}</div>
+       <div class="title">群发标题：<span>{{detailData.title}}</span></div>
+       <div class="user-list">目标用户：<span>{{detailData.fileName}}</span></div>
+       <div class="msg-container" v-for="(item, index) in detailData.contentModelList" :key="index">
+           <div v-if="item.type == 0" class="text-content">
+               <div>{{item.info}}</div>
            </div>
+           <div v-if="item.type == 1" class="img-content">
+              <img :src="item.url" />
+            </div>
            <div v-if="item.type == 2" class="file-content">
-               <div v-if="item.fileType == 1">
-
-               </div>
-               <div v-if="item.fileType == 2">
-                   <img :src="item.content" />
-               </div>
+             <div class="file-con" @click="downPDF()">
+               <div class="file-left">
+                  <span class="name">{{item.info}}</span>
+                  <span class="size">{{item.fileSize}}</span>
+              </div>
+              <div class="file-right">
+                <img src="../../../assets/image/IM/icon-pdf.png" alt />
+              </div>
+             </div>
            </div>
            <div v-if="item.type == 3" class="link-content">
-               <div class="link-text">{{item.content}}</div>
+               <div class="link-text">{{item.info}}</div>
            </div>
        </div>
     </div>
@@ -26,7 +32,6 @@
 <script>
 import BreadCrumb from "@/components/breadcrumb.vue";
 import { doUpload, getFilePath } from "@/utils/qiniu-util";
-import { validateWord } from "@/utils/validate.js";
 import { openLoading, closeLoading } from "@/utils/utils";
 import * as commonUtil from "@/utils/utils";
 export default {
@@ -38,110 +43,111 @@ export default {
       curmbFirst: "历史群发",
       curmbSecond: "任务详情",
       detailData: {
-        title: ''
+        title: '',
+        fileName: '',
+        contentModelList: []
       },
-      contentList: [{
-          type: 1,
-          content: '这个是内容区'
-      },{
-          type: 2,
-          fileType: 1,
-          content: '这是个文件'
-      },{
-          type: 2,
-          fileType: 2,
-          content: ''
-      },{
-          type: 3,
-          content: '这是个链接'
-      }],
+      historyId: '',
     };
   },
   created() {
-    this.search();
+    this.historyId = this.$router.query.id;
   },
   // 挂载到Dom完成时
-  mounted: function() {
+  mounted() {
     commonUtil.resizeHeight();
+    this.getData();
   },
   methods: {
-    // 列表查询
-    search() {
-      this.getData();
-    },
-
-    // 获取数据
+    // 获取历史群发数据
     getData() {
-      let subject = 0,
-        status = 0,
-        name = 0;
-
       this.loading = true;
-      let cStatus = this.categoryStatus ? this.categoryStatus : "0"; //'0'表示默认查所有的
-      let url =
-        "/interaction/discuss/" +
-        cStatus +
-        "/" +
-        subject +
-        "/" +
-        name +
-        "/" +
-        status +
-        "/" +
-        this.searchParam.pageNo +
-        "/" +
-        this.searchParam.pageSize;
-
+      let url = `im/group/info/${this.historyId}`
       this.GET(url).then(res => {
         this.loading = false;
         if (res.code == "000000") {
-          console.log(res.data);
-          this.tableData = res.data.resp.discuss || [];
-          this.nextSessionId = this.tableData[0] && this.tableData[0].id;
-          console.log("this.nextSessionId", this.nextSessionId);
-          if (res.data.typeList && res.data.typeList.length) {
-            let arr = [];
-            for (let i = 0; i < res.data.typeList.length; i++) {
-              let obj = {};
-              obj.label = res.data.typeList[i];
-              obj.value = res.data.typeList[i];
-              arr.push(obj);
-            }
-            this.category = arr;
-          }
+          this.detailData = res.data;
         }
       });
     },
-
-    // 查看消息详情
-    edit() {
-      this.$router.push({
-        path: `/chain-history-detail`,
-        query: {}
-      });
-    },
   }
 };
 </script>
 <style lang="scss" scoped>
 .chain-history-detail {
   .component-content {
-    padding: 10px;
+    padding: 24px 32px;
     background: #fff;
-    // margin: 84px 20px 20px;
-    .search-title {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-      padding: 10px 12px;
-      font-size: 12px;
-      margin-bottom: 20px;
-      border-bottom: 1px solid #efefef;
-      .num {
-        color: #449284;
+    .title {
+      font-size: 14px;
+      color: #000;
+      padding: 0 5px 10px 0;
+    }
+    .user-list {
+      font-size: 14px;
+      color: #000;
+      padding: 0 5px 20px 0;
+      border-bottom: 1px solid #F0F1F2;
+      span {
+        color: #0D9078;
+      }
+    }
+    .text-content {
+      padding: 16px 0;
+      color: #333333;
+      border-bottom: 1px solid #F0F1F2;
+    }
+    .img-content {
+      padding: 16px 0;
+      border-bottom: 1px solid #F0F1F2;
+      cursor: pointer;
+      & > img {
+        width: 170px;
+        height: 108px;
+        border-radius: 8px;
       }
     }
+    .file-content {
+      padding: 16px 0;
+      border-bottom: 1px solid #F0F1F2;
+      .file-con {
+        display: flex;
+        flex-direction: row;
+        max-width: 260px;
+        text-align: left;
+        padding: 10px 15px;
+        background: #f0f1f2;
+        border-radius: 8px;
+        cursor: pointer;
+        .file-left {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          .name {
+            font-size: 13px;
+            color: #333333;
+          }
+          .size {
+            font-size: 12px;
+            color: #999999;
+          }
+        }
+        .file-right {
+          width: 36px;
+          height: 44px;
+          & > img {
+            width: 36px;
+            height: 100%;
+            border-radius: 3px;
+          }
+        }
+      }
+    }
+    .link-content {
+      padding: 16px 0;
+      color: #2f86f6;
+      border-bottom: 1px solid #F0F1F2;
+    }
   }
 }
 </style>
\ No newline at end of file

src/views/IM/chain-history/list.vue

 <template>
   <div class="chain-history-wrap">
-    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
     <div class="component-content screenSet" id="screenSet">
       <el-row :gutter="30" class="row" type="flex" style="margin-top: 10px;margin-right:0px;">
         <el-form ref="serchForm" inline :model="searchParam" label-width="15px" style="width:100%;text-align:right;">
@@ -59,17 +58,11 @@ import { openLoading, closeLoading } from "@/utils/utils";
 import * as commonUtil from "@/utils/utils";
 let vm = null;
 export default {
-  components: {
-    BreadCrumb
-  },
   data() {
     return {
-      curmbFirst: "云鹊客服",
-      curmbSecond: "消息查询",
       searchParam: {
         chooseDate: '',
         messageLogId: '',
-        token: '',
         pageNo: 1,
         pageSize: 15
       },
@@ -93,30 +86,22 @@ export default {
     }
   },
   created() {
-    this.search();
-    setTimeout(() => {
-      this.search();
-    }, 10000);
+    
   },
   // 挂载到Dom完成时
-  mounted: function() {
+  mounted() {
     commonUtil.resizeHeight();
+    this.search();
   },
   methods: {
     // 列表查询
     search() {
-      this.getData();
-    },
-
-    // 获取数据
-    getData() {
       this.loading = true;
-      let url = `/im/group/list`
-      let params = this.searchParam;
-      this.GET(url, {params}).then(res => {
+      const {pageNo, pageSize, chooseDate, messageLogId} = this.searchParam;
+      let url = `/im/group/list?pageNo=${pageNo}&pageSize=${pageSize}&chooseDate=${chooseDate}&messageLogId=${messageLogId}`;
+      this.GET(url).then(res => {
         this.loading = false;
         if (res.code == "000000") {
-          console.log(res.data);
           this.tableData = res.data.list;
           this.totalRows = res.data.total;
         }
@@ -124,11 +109,8 @@ export default {
     },
 
     // 查看消息详情
-    edit() {
-      this.$router.push({
-        path: `/chain-history-detail`,
-        query: {}
-      });
+    edit(row) {
+      this.$router.push({ path: `/chain-history-detail`,query: {id: row.id}});
     },
     handleSizeChange(value) {
         this.searchParam.pageSize = value;
@@ -143,6 +125,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .chain-history-wrap {
+  margin-top: -60px;
   .component-content {
     padding: 10px;
     background: #fff;

src/views/IM/chain-message/index.vue

@@ -78,8 +78,7 @@
 <script>
 import BreadCrumb from "@/components/breadcrumb.vue";
 import { doUpload, getFilePath } from "@/utils/qiniu-util";
-import { validateWord } from "@/utils/validate.js";
-import { openLoading, closeLoading } from "@/utils/utils";
+import { openLoading, closeLoading, isEmptyUtils } from "@/utils/utils";
 import * as commonUtil from "@/utils/utils";
 export default {
     components: {
@@ -103,7 +102,7 @@ export default {
 
     },
     // 挂载到Dom完成时
-    mounted: function() {
+    mounted() {
         commonUtil.resizeHeight();
     },
     methods: {
@@ -228,11 +227,42 @@ export default {
         },
         // 确认群发
         confirmSubmit() {
-            console.log(this.searchParam)
             this.loading = true;
             let req = {
                 groupMessageSendReq: this.searchParam
             };
+            if(!req.groupMessageSendReq.title) {
+                this.$message({
+                    message: '请输入标题',
+                    type: 'warning'
+                });
+                return
+            }
+            if(isEmptyUtils(req.groupMessageSendReq.fileModel)) {
+                this.$message({
+                    message: '请上传人员名单',
+                    type: 'warning'
+                });
+                return
+            }
+            if(req.groupMessageSendReq.contentModelList.length < 1) {
+                this.$message({
+                    message: '请输入群发内容',
+                    type: 'warning'
+                });
+                return
+            }else {
+                let list = req.groupMessageSendReq.contentModelList;
+                for(let i = 0; i < list.length; i++) {
+                    if(!list[i].info) {
+                       this.$message({
+                            message: '请输入群发内容',
+                            type: 'warning'
+                        });
+                        return
+                    }
+                }
+            }
             this.POST("/im/group/message", req).then(res => {
                 this.loading = false;
                 if (res.code == "000000") {

src/views/layout/slidebar.vue

@@ -82,12 +82,12 @@ export default {
             title: "消息查询"
           },{
             icon: 'el-icon-setting',
-            index: "waiting-session-list-3",
+            index: "chain-history-list",
             subs: [],
             title: "我要群发"
           },{
             icon: 'el-icon-setting',
-            index: "waiting-session-list-4",
+            index: "chain-message",
             subs: [],
             title: "历史群发"
           }];