feat: 添加聊天功能

package.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@riophae/vue-treeselect": "0.0.37",
+    "@tencentcloud/chat": "^3.2.1",
     "@tinymce/tinymce-vue": "1.1.0",
     "axios": "0.18.0",
     "clipboard": "1.7.1",
@@ -36,6 +37,8 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "screenfull": "3.3.3",
+    "tim-profanity-filter-plugin": "^1.0.0",
+    "tim-upload-plugin": "^1.3.0",
     "tree-table-vue": "^1.1.0",
     "v-charts": "1.19.0",
     "vue": "2.5.17",
@@ -46,9 +49,9 @@
     "vue-router": "3.0.1",
     "vue2-org-tree": "^1.3.6",
     "vued3tree": "^5.1.0",
+    "vuedraggable": "^2.23.2",
     "vuex": "3.0.1",
-    "xlsx": "^0.11.16",
-    "vuedraggable": "^2.23.2"
+    "xlsx": "^0.11.16"
   },
   "devDependencies": {
     "autoprefixer": "8.5.0",

src/api/business/chat.js

+import request from '@/utils/request'
+
+export function getUserSig(params) {
+  return request({
+    url: '/sysIM/getUserSig',
+    method: 'post',
+    data: params
+  })
+}
+export function getUserList(params) {
+  return request({
+    url: '/sysAiAssistant/find',
+    method: 'post',
+    data: params
+  })
+}
+

src/utils/chat.js

+import TencentCloudChat from '@tencentcloud/chat'
+import TIMUploadPlugin from 'tim-upload-plugin'
+import TIMProfanityFilterPlugin from 'tim-profanity-filter-plugin'
+// 初始化 SDK 实例
+const options = {
+  SDKAppID: 1400489950 // 接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID
+}
+// 创建 SDK 实例，`TencentCloudChat.create()`方法对于同一个 `SDKAppID` 只会返回同一份实例
+const chat = TencentCloudChat.create(options) // SDK 实例通常用 chat 表示
+
+chat.setLogLevel(0) // 普通级别，日志量较多，接入时建议使用
+// chat.setLogLevel(1); // release 级别，SDK 输出关键信息，生产环境时建议使用
+
+// 注册腾讯云即时通信 IM 上传插件
+chat.registerPlugin({ 'tim-upload-plugin': TIMUploadPlugin })
+// 注册腾讯云即时通信 IM 本地审核插件
+chat.registerPlugin({ 'tim-profanity-filter-plugin': TIMProfanityFilterPlugin })
+export default chat

src/utils/index.js

@@ -51,21 +51,61 @@ export function formatTime(time, option) {
     return Math.ceil(diff / 3600) + '小时前'
   } else if (diff < 3600 * 24 * 2) {
     return '1天前'
+  } else if (diff < 3600 * 24 * 2 * 7) {
+    return (
+      d.getMonth() +
+      1 +
+      '-' +
+      d.getDate() +
+      ' ' +
+      d.getHours() +
+      ':' +
+      d.getMinutes()
+    )
+  } else if (isYear(time)) {
+    return (
+      d.getMonth() +
+      1 +
+      '-' +
+      d.getDate()
+    )
+  } else {
+    return (
+      d.getFullYear() +
+      '-' +
+      d.getMonth() +
+      '-' +
+      d.getDate() +
+      ' ' +
+      d.getHours() +
+      ':' +
+      d.getMinutes()
+    )
   }
-  if (option) {
+  /* if (option) {
     return parseTime(time, option)
   } else {
     return (
-      d.getMonth() +
-      1 +
-      '月' +
+      d.getMonth()
+      +
+      '-' +
       d.getDate() +
-      '日' +
+      ' ' +
       d.getHours() +
-      '时' +
-      d.getMinutes() +
-      '分'
+      ':' +
+      d.getMinutes()
     )
+  }*/
+}
+
+function isYear(timeValue) { // 是否为今年
+  const dateyear = new Date(timeValue).getFullYear()
+  const toyear = new Date().getFullYear()
+  // console.log(dateyear, toyear)
+  if (dateyear === toyear) {
+    return true
+  } else {
+    return false
   }
 }
 

src/views/customerService/components/chatMessageItem.vue

+<template>
+  <div class="message_components">
+    <div v-if="chatMessageItem.msgType === 1" class="message-self">
+      <div class="message-self_content">{{ chatMessageItem.messageContent }}</div>
+      <img :src="chatMessageItem.avatar" class="message-self__avatar">
+    </div>
+    <div v-if="chatMessageItem.msgType === 2" class="message-other">
+      <img :src="chatMessageItem.avatar" class="message-other__avatar">
+      <div class="message-other_content">
+        {{ chatMessageItem.messageContent }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ChatMessageItem',
+  props: {
+    chatMessageItem: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.message_components {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  .message-self {
+    display: flex;
+    flex-direction: row;
+    .message-self_content {
+      width: fit-content;
+      max-width: 60%;
+      background: #95EC69;
+      border-radius: 11px 11px 0px 11px;
+      padding: 10px 12px;
+      font-size: 12px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #000000;
+      line-height: 20px;
+      margin-left:auto;
+    }
+    .message-self__avatar {
+      width: 30px;
+      height: 30px;
+      border-radius: 15px;
+      margin: 0 10px;
+    }
+  }
+  .message-other {
+    display: flex;
+    flex-direction: row;
+
+    .message-other_content {
+      width: fit-content;
+      max-width: 60%;
+      background: #FFFFFF;
+      border-radius: 11px 11px 0px 11px;
+      padding: 10px 12px;
+      font-size: 12px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #000000;
+      line-height: 20px;
+    }
+    .message-other__avatar {
+      width: 30px;
+      height: 30px;
+      border-radius: 15px;
+      margin: 0 10px;
+    }
+  }
+}
+
+</style>