会话存档修改

linkwe-ui/src/components/ChatContent.vue

+<script>
+// import { AMapManager } from 'vue-amap'
+// import Video from 'video.js'
+export default {
+  name: 'ChatContent',
+  props: {
+    message: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  components: {},
+  data() {
+    return {
+      dialogVisible: false,
+      audioSrc: []
+    }
+  },
+  computed: {
+    content() {
+      let typeDict = {
+        text: 'content',
+        image: 'attachment',
+        emotion: 'attachment',
+        file: 'filename',
+        docmsg: 'title',
+        video: 'attachment',
+        voice: 'attachment',
+        location: 'address',
+        weapp: 'title',
+        card: 'corpname'
+      }
+      return JSON.parse(this.message.contact)[typeDict[this.message.msgType]]
+    }
+  },
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    close() {
+      this.dialogVisible = false
+      const mp3 = this.$refs.AudioPlayer
+      mp3.pause()
+    },
+    playAudio(type) {
+      this.audioSrc = [JSON.parse(this.message.contact)[type]]
+      this.dialogVisible = true
+    },
+    onBeforePlay(next) {
+      next() // 开始播放
+    },
+    play(e) {
+      this.dia = true
+      const player = this.$refs.videoPlayer.player
+      this.playerOptions['sources'][0]['src'] = e.attachment
+      player.play()
+    },
+    down(type) {
+      let contact = JSON.parse(this.message.contact)
+      const url = window.URL.createObjectURL(
+        new Blob([contact[type]], {
+          type:
+            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
+        })
+      )
+      const link = document.createElement('a')
+      link.href = url
+      link.setAttribute('download', this.content) // 下载文件的名称及文件类型后缀
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link) // 下载完成移除元素
+      window.URL.revokeObjectURL(url) // 释放掉blob对象
+    }
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div v-if="message.msgType === 'text'" class="msgtypetext">
+      {{ content }}
+    </div>
+    <div
+      v-else-if="'image,emotion'.includes(message.msgType)"
+      class="msgtypeimg"
+    >
+      <el-image
+        style="width: 100px; height: 100px"
+        :src="content"
+        fit="fit"
+        :preview-src-list="[content]"
+      >
+      </el-image>
+    </div>
+    <a
+      v-else-if="'file'.includes(message.msgType)"
+      class="msgtypefile"
+      :href="JSON.parse(this.message.contact).attachment"
+      target="balnk"
+    >
+      {{ content }}
+    </a>
+    <a
+      v-else-if="'docmsg'.includes(message.msgType)"
+      class="msgtypefile"
+      :href="JSON.parse(this.message.contact).link_url"
+      target="balnk"
+    >
+      {{ content }}
+    </a>
+    <div v-else-if="message.msgType === 'voice'" class="msgtypevoice">
+      <i
+        class="el-icon-microphone"
+        style=" font-size: 40px; color: #199ed8;"
+        @click="playAudio('attachment')"
+      ></i>
+    </div>
+    <template v-else-if="message.msgType === 'video'">
+      <video
+        id="video"
+        class="video-js vjs-default-skin vjs-big-play-centered"
+        controls
+        webkit-playsinline="true"
+        playsinline="true"
+        :autoplay="false"
+        preload="none"
+      >
+        <source :src="content" type="video/mp4" />
+      </video>
+      <!-- <video-player
+        class="video-player vjs-custom-skin"
+        ref="videoPlayer"
+        style="width: 150px;"
+        :playsinline="true"
+        :options="{
+          playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
+          autoplay: false, //如果true,浏览器准备好时开始回放。
+          controls: true, //控制条
+          preload: 'none', //视频预加载
+          muted: false, //默认情况下将会消除任何音频。
+          loop: false, //导致视频一结束就重新开始。
+          language: 'zh-CN',
+          aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（
+          fluid: true,
+          sources: [
+            {
+              type: 'video/mp4',
+              src: content
+            }
+          ],
+          poster: '',
+          width: '175',
+          height: '75',
+          notSupportedMessage: '此视频暂无法播放，请稍后再试'
+        }"
+      ></video-player> -->
+    </template>
+    <div v-else-if="message.msgType === 'location'" class="msgtypecard">
+      <div class="card_name">
+        <el-amap
+          ref="map"
+          vid="amapDemo"
+          :center="[
+            JSON.parse(message.contact).longitude,
+            JSON.parse(message.contact).latitude
+          ]"
+          :zoom="15"
+          class="amap-demo"
+          style="pointer-events: none;"
+        >
+          <el-amap-marker
+            :position="[
+              JSON.parse(message.contact).longitude,
+              JSON.parse(message.contact).latitude
+            ]"
+          ></el-amap-marker>
+        </el-amap>
+      </div>
+      <div class="card_foot">{{ content }}</div>
+    </div>
+    <div v-else-if="message.msgType === 'weapp'" class="msgtypecard">
+      <div class="card_name">{{ content }}</div>
+      <div class="card_foot">小程序</div>
+    </div>
+    <div v-else-if="message.msgType === 'card'" class="msgtypecard ">
+      <div class="card_name">{{ content }}</div>
+      <div class="card_foot">个人名片</div>
+    </div>
+
+    <el-dialog
+      v-if="audioSrc[0]"
+      :visible.sync="dialogVisible"
+      width="30%"
+      @close="close"
+    >
+      <div class="shabowboxvidoe shabowboxaudio">
+        <AudioPlayer
+          :audio-list="audioSrc"
+          ref="AudioPlayer"
+          :before-play="onBeforePlay"
+        />
+        <!-- <audio controls>
+          <source :src="audioSrc[0]" type="audio/mpeg" />
+        </audio> -->
+      </div>
+      <span slot="footer" class="dialog-footer"> </span>
+    </el-dialog>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.msgtypefile {
+  margin: 5px;
+  width: 200px;
+  display: inline-block;
+  line-height: 30px;
+  cursor: pointer;
+  color: #199ed8;
+  // text-indent: 10px;
+  // box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.19);
+}
+
+.msgtypecard {
+  width: 320px;
+  height: 140px;
+  margin: 10px 5px;
+  border-radius: 8px;
+  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
+    0 6px 8px 0 rgba(0, 0, 0, 0.19);
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 8px 0 rgba(0, 0, 0, 0.19);
+  position: relative;
+
+  .card_name {
+    width: 320px;
+    height: 105px;
+    line-height: 80px;
+    text-indent: 10px;
+  }
+  .card_foot {
+    position: absolute;
+    height: 20px;
+    border-top: 1px solid #efefef;
+    text-align: left;
+    bottom: 15px;
+    padding: 10px;
+    color: #333;
+    font-weight: bold;
+    width: 100%;
+  }
+}
+</style>

linkwe-ui/src/views/conversation/component/chat.vue

@@ -3,113 +3,25 @@
     <ul>
       <li v-for="(item, index) in allChat" :key="index">
         <!-- <span v-if="item.fromInfo.name">{{item.fromInfo.name}}</span> -->
-        <div :style="{ color: item.action == 'send' ? '#199ed8' : '#999' }">
-          <span v-if="item">{{ item.name }}</span>
+        <div class="mb15">
+          <span class="mr20">{{ item.fromId }}</span>
           <span
             :style="{ color: item.action == 'send' ? '#199ed8' : '#999' }"
             >{{ item.msgTime }}</span
           >
         </div>
-        <div v-if="item.msgType == 'text'" class="msgtypetext">
-          {{ JSON.parse(item.contact).content }}
-        </div>
-        <div v-else-if="item.msgType == 'image'" class="msgtypeimg">
-          <img :src="JSON.parse(item.contact).attachment" @click="showImg(JSON.parse(item.contact))" />
-        </div>
-        <div
-          v-else-if="item.msgType == 'file'"
-          class="msgtypefile"
-          @click="down(JSON.parse(item.contact))"
-        >
-          {{ JSON.parse(item.contact).fileName }}
-        </div>
-        <div v-else-if="item.msgType == 'voice'" class="msgtypevoice">
-          <i
-            class="el-icon-microphone"
-            style=" font-size: 40px; color: #199ed8;"
-            @click="playVideo(JSON.parse(item.contact))"
-          ></i>
-        </div>
-        <div v-else-if="item.msgType == 'emotion'" class="msgtypeimg">
-          <img :src="JSON.parse(item.contact).attachment" @click="showImg(item)" />
-        </div>
-        <div v-else-if="item.msgType == 'video'" class="msgtypevideo">
-          <i
-            class="el-icon-video-play"
-            style=" font-size: 40px;  color: #199ed8;"
-            @click="play(JSON.parse(item.contact), 'video')"
-          ></i>
-        </div>
-        <div v-else-if="item.msgType == 'location'" class="msgtypecard">
-          <div class="card_name">
-            <el-amap
-              ref="map"
-              vid="amapDemo"
-              :center="[JSON.parse(item.contact).longitude, JSON.parse(item.contact).latitude]"
-              :zoom="zoom"
-              class="amap-demo"
-              style="pointer-events: none;"
-            >
-              <el-amap-marker
-                :position="[JSON.parse(item.contact).longitude, iJSON.parse(item.contact).latitude]"
-              ></el-amap-marker>
-            </el-amap>
-          </div>
-          <div class="card_foot">{{ JSON.parse(item.contact).address }}</div>
-        </div>
-        <div v-else-if="item.msgType == 'weapp'" class="msgtypecard">
-          <div class="card_name">{{ JSON.parse(item.contact).title }}</div>
-          <div class="card_foot">小程序</div>
-        </div>
-        <div v-else-if="item.msgType == 'card'" class="msgtypecard ">
-          <div class="card_name">{{ JSON.parse(item.contact).corpName }}</div>
-          <div class="card_foot">个人名片</div>
-        </div>
+
+        <ChatContent :message="item"></ChatContent>
       </li>
     </ul>
-
-    <div class="shabowbox" v-show="dia">
-      <div class="close" @click="dia = false">
-        <i class="el-icon-circle-close"></i>
-      </div>
-      <div class="shabowboxvidoe">
-        <video-player
-          class="video-player vjs-custom-skin"
-          ref="videoPlayer"
-          id="videoPlayer"
-          :playsinline="true"
-          :options="playerOptions"
-        ></video-player>
-      </div>
-    </div>
-    <div class="shabowbox" v-show="diavioce">
-      <div class="close" @click="vioceClose">
-        <i class="el-icon-circle-close"></i>
-      </div>
-      <div class="shabowboxvidoe shabowboxaudio">
-        <AudioPlayer
-          :audio-list="vioceSrc"
-          ref="AudioPlayer"
-          :before-play="onBeforePlay"
-        />
-      </div>
-    </div>
-    <el-dialog :visible.sync="dialogVisible" width="30%">
-      <img :src="imgSrc" style="width:100%;max-height:600px" />
-      <span slot="footer" class="dialog-footer"> </span>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import { AMapManager } from 'vue-amap'
-import 'video.js/dist/video-js.css'
-import 'vue-video-player/src/custom-theme.css'
-
-import { parseTime, yearMouthDay } from '@/utils/common.js'
+import ChatContent from '@/components/ChatContent'
 export default {
   components: {
-    AMapManager
+    ChatContent
   },
   props: {
     allChat: {
@@ -119,84 +31,9 @@ export default {
   },
   mounted() {},
   data() {
-    return {
-      dia: false,
-      diavioce: false,
-      dialogVisible: false,
-      imgSrc: '',
-      vioceSrc: [],
-      playerOptions: {
-        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
-        autoplay: false, //如果true,浏览器准备好时开始回放。
-        controls: true, //控制条
-        preload: 'auto', //视频预加载
-        muted: false, //默认情况下将会消除任何音频。
-        loop: false, //导致视频一结束就重新开始。
-        language: 'zh-CN',
-        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
-        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
-        sources: [
-          {
-            type: 'video/mp4',
-            src: 'https://v-cdn.zjol.com.cn/280443.mp4' //你所放置的视频的地址，最好是放在服务器上
-          }
-        ],
-        poster: '', //你的封面地址（覆盖在视频上面的图片）
-        width: document.documentElement.clientWidth,
-        height: '475',
-        notSupportedMessage: '此视频暂无法播放，请稍后再试' //允许覆盖Video.js无法播放媒体源时显示的默认信息。
-      },
-
-      zoom: 15,
-      center: [117.148118, 36.660223],
-      markers: [
-        {
-          position: [117.148118, 36.660223],
-          visible: false,
-          draggable: false
-        }
-      ]
-    }
+    return {}
   },
-  methods: {
-    vioceClose() {
-      this.diavioce = false
-      const mp3 = this.$refs.AudioPlayer
-      mp3.pause()
-    },
-    playVideo(e) {
-      this.vioceSrc = [e.attachment]
-      this.diavioce = true
-    },
-    onBeforePlay(next) {
-      next() // 开始播放
-    },
-    showImg(e) {
-      this.imgSrc = e.attachment
-      this.dialogVisible = true
-    },
-    play(e) {
-      this.dia = true
-      const player = this.$refs.videoPlayer.player
-      this.playerOptions['sources'][0]['src'] = e.attachment
-      player.play()
-    },
-    down(e) {
-      const url = window.URL.createObjectURL(
-        new Blob([e.attachment], {
-          type:
-            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
-        })
-      )
-      const link = document.createElement('a')
-      link.href = url
-      link.setAttribute('download', e.filename) // 下载文件的名称及文件类型后缀
-      document.body.appendChild(link)
-      link.click()
-      document.body.removeChild(link) // 下载完成移除元素
-      window.URL.revokeObjectURL(url) // 释放掉blob对象
-    }
-  }
+  methods: {}
 }
 </script>
 <style lang="scss" scoped>
@@ -257,7 +94,7 @@ export default {
   }
 
   ul li {
-    padding: 8px;
+    padding: 10px;
   }
 
   .msgtypetext {

linkwe-ui/src/views/conversation/page/roleTest.vue

@@ -32,9 +32,8 @@
     </el-form>
     <div>
       <el-table
+        v-loading="loading"
         :data="fileData"
-        stripe
-        style="width: 100%"
         :header-cell-style="{ background: '#fff' }"
       >
         <el-table-column prop="date" label="发送者" width="180">
@@ -43,15 +42,8 @@
           </template>
         </el-table-column>
         <el-table-column prop="name" label=" 内容">
-          <template slot-scope="scope">
-            <p
-              v-if="!!scope.row.contact"
-              class="emcode"
-              v-html="scope.row.contact"
-            ></p>
-            <p v-else-if="!!!scope.row.contact && scope.row.text">
-              {{ JSON.parse(scope.row.contact).content }}
-            </p>
+          <template slot-scope="{ row }">
+            <ChatContent :message="row"></ChatContent>
           </template>
         </el-table-column>
         <el-table-column label="消息状态" width="200">
@@ -111,7 +103,10 @@
 <script>
 import { content } from '@/api/conversation/content.js'
 import { yearMouthDay, parseTime } from '@/utils/common.js'
+import ChatContent from '@/components/ChatContent'
 export default {
+  components: { ChatContent },
+
   data() {
     return {
       form: {
@@ -142,7 +137,8 @@ export default {
           value: 'switch',
           label: '切回企业日志'
         }
-      ]
+      ],
+      loading: false
     }
   },
   mounted() {
@@ -154,6 +150,7 @@ export default {
       this.init(true)
     },
     init(flag) {
+      this.loading = true
       if (!!!flag) {
         this.currentPage = 1
       }
@@ -164,14 +161,21 @@ export default {
         beginTime: this.form.Stime ? yearMouthDay(this.form.Stime[0]) : '',
         endTime: this.form.Stime ? yearMouthDay(this.form.Stime[1]) : '',
         pageNum: this.currentPage,
+        pageSize: 10,
         action: this.ac,
         orderByColumn: 'msg_time',
         isAsc: 'desc'
       }
-      content.getFullSearchChatList(query).then((res) => {
-        this.fileData = res.rows
-        this.total = Number(res.total)
-      })
+      content
+        .getFullSearchChatList(query)
+        .then((res) => {
+          this.fileData = res.rows
+          this.total = Number(res.total)
+          this.loading = false
+        })
+        .catch(() => {
+          this.loading = false
+        })
     },
     chechName(e) {
       if (e == '') {
@@ -189,6 +193,15 @@ export default {
       }
       console.log(e, this.ac)
       this.init()
+    },
+    parseMesContent(data, type) {
+      let contact = JSON.parse(data)
+      let typeDict = {
+        text: 'content',
+        image: 'attachment',
+        text: 'content'
+      }
+      return contact[type]
     }
   }
 }