cnhis-design-vue 0.2.64-beta → 0.3.2-beta

package/packages/multi-chat/chat/client/clientChat.vue

@@ -1,716 +0,0 @@
-<template>
-  <div class="online-chat client-chat">
-    <a-layout>
-      <a-layout-header>
-        {{ chatTitle }}
-        <span class="session-time" v-if="sessionTimer" style="flex: 1; text-align: center;color: red;">
-          {{ i18nText('1.9.324') }}:
-          {{ formatedSessionTime }}
-        </span>
-      </a-layout-header>
-      <chat-main></chat-main>
-      <div v-if="queueMsg" class="notice-bottom">
-        <svg-icon icon-class="anniuyuyue"></svg-icon>
-        <span v-html="queueMsg" />
-      </div>
-      <chat-footer :validTalkingEnv="validTalkingEnv"></chat-footer>
-    </a-layout>
-    <Evaluate v-if="evaluateModal" :orgId="accessParams.orgId" :evaluateSetting="evaluateSetting" @closeEvaluate="closeEvaluate" />
-    <ChatVideo v-if="showVideo"></ChatVideo>
-    <ChatAudio v-if="showAudio" :validTalkingEnv="validTalkingEnv"></ChatAudio>
-  </div>
-</template>
-
-<script>
-import { Layout } from 'ant-design-vue';
-import ChatSock from '../../utils/chatSock';
-import { mapGetters, mapMutations, mapActions } from '../../store/helper';
-import ChatFooter from '../chatFooter';
-import ChatMain from '../chatMain';
-import Evaluate from '../evaluate';
-import ChatVideo from '../video';
-import ChatAudio from '../audio';
-import fetch, { qs } from '@/utils/chatFetch';
-import vexutils from '@/utils/vexutils';
-import SvgIcon from '@/component/svg/index.vue';
-import { checkTalkingEnv } from '../../utils/index';
-import uniRTCAPI from '../mixins/uniRTCAPI';
-
-export default {
-  inject: ['store', 'dispatchEvent', 'i18nText'],
-  mixins: [uniRTCAPI],
-  data() {
-    this.stompClient = null;
-    return {
-      statusSubscribe: null,
-      evaluateModal: false,
-      evaluateSetting: {},
-      queueMsg: '',
-      isAccessQueue: false
-    };
-  },
-  props: {
-    chatURL: {
-      type: String
-    },
-    assembly: {
-      type: String
-    },
-    isCustomServe: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'userInfo',
-      'msgList',
-      'clientId',
-      'botSessionId',
-      'assemblyId',
-      'serviceName',
-      'statusTitle',
-      'chatType',
-      'sessionId',
-      'serviceId',
-      'accessParams',
-      'assemblySetting',
-      'sessionTime',
-      'sessionTimer',
-      'robotId',
-      'chatUserId',
-      'chatName',
-      'clientChatISRobot',
-      'queryParams',
-      'showVideo',
-      'showAudio',
-      { curOrgId: 'orgId' }
-    ]),
-    orgId() {
-      return this.userInfo?.sysParams?.orgId || this.curOrgId;
-    },
-    userId() {
-      return this.userInfo?.sysParams?.userId;
-    },
-    name() {
-      return this.userInfo?.sysParams?.userName;
-    },
-    serviceUserId() {
-      return this.queryParams.serviceId;
-    },
-    chatTitle() {
-      if (this.chatType === 'bot') {
-        return this.i18nText('1.9.372');
-      }
-      const isQueue = this.isAccessQueue;
-      let title = '';
-      if (this.assemblySetting && Object.keys(this.assemblySetting).length) {
-        let { serverSetting = {} } = this.assemblySetting;
-        let { serverInfo = [] } = serverSetting;
-        if (serverInfo.length) {
-          // 查找 统一客服或者排队 的title
-          const key = isQueue ? 'waitAccessTitle' : 'customerName';
-          let matchInfo = serverInfo.find(v => v.key == key);
-          title = (matchInfo && matchInfo.value) || title;
-        }
-        if (!isQueue) {
-          title = title || this.serviceName;
-          return `${title}${this.statusTitle ? '(' + this.statusTitle + ')' : ''}`;
-        }
-        return title || `${this.i18nText('1.9.373')}...`;
-      }
-      // assemblySetting 没有配置则为空
-      return '';
-    },
-    formatedSessionTime() {
-      if (this.sessionTime !== undefined && this.sessionTime <= 0) {
-        this.setChatTimer();
-        return;
-      }
-      let sessionTime = this.sessionTime;
-      let hour = Math.floor(sessionTime / 3600);
-      sessionTime = sessionTime - 3600 * hour;
-      let minute = Math.floor(sessionTime / 60);
-      let second = sessionTime % 60;
-      return [hour, minute, second].map(x => `${x < 10 ? 0 : ''}${x}`).join(':');
-    }
-  },
-  created() {
-    this.setIsServer(false);
-  },
-  async mounted() {
-    let messageList = await this.handleClientAccess();
-    await this.getHistoryMsg();
-    if (messageList) {
-      this.setMsgList([...this.msgList, ...messageList]);
-    }
-    this.setScrollTo('bottom');
-    if (this.botSessionId) return;
-    this.initWebSocket();
-    this.getSdkAppId();
-  },
-  methods: {
-    ...mapMutations([
-      'setMultiVideoShow',
-      'setShowVideo',
-      'setShowAudio',
-      'setVideoData',
-      'setVideoMembers',
-      'setRecordId',
-      'setVideoStatus',
-      'setVideoMode',
-      'setSdkInfo',
-      'setMuteAudio',
-      'setRoomId',
-      'setMsgRecordCache',
-      'setQueueId',
-      'setChatType',
-      'setHistorySessionId',
-      'setBotSessionId',
-      'setMsgList',
-      'setScrollTo',
-      'setServiceId',
-      'setServiceName',
-      'setStatusTitle',
-      'setSessionEnd',
-      'setAssemblyId',
-      'setClientId',
-      'setOnChating',
-      'setSessionId',
-      'setIsAppendMsg',
-      'setMessage',
-      'setIsServer',
-      'setAssemblySetting',
-      'setClassify'
-    ]),
-    ...mapActions({
-      getHistoryMsg: 'setMsgList',
-      setChatTimer: 'setChatTimer',
-      initUniRTC: 'initUniRTC'
-    }),
-    // 获取视频sdk
-    getSdkAppId() {
-      fetch({
-        url: '/chat/access/getMediaAuth',
-        method: 'GET',
-        params: {
-          orgId: this.orgId || this.accessParams.orgId || this.queryParams.orgId
-        }
-      }).then(({ data }) => {
-        if (data.result === 'SUCCESS') {
-          const { sdkAppId, host, vendor } = data.obj;
-          this.setSdkInfo({ sdkAppId, host, vendor });
-          // 江苏省
-          if (vendor == 3) {
-            this.initUniRTC({
-              ...data.obj,
-              params: {
-                assemblyId: this.assemblyId,
-              }
-            });
-          }
-        }
-      });
-    },
-    validTalkingEnv() {
-      return checkTalkingEnv(this.assemblyId, this.sdkInfo).then(res => {
-        if (!res.status) {
-          this.$message.error(res.message);
-        }
-        return res;
-      });
-    },
-    /* 接入客户端聊天 */
-    handleClientAccess() {
-      let params = Object.assign({}, this.queryParams, this.accessParams, {
-        assemblyId: this.assemblyId
-      });
-      if (this.isCustomServe) {
-        if (this.clientChatISRobot == 'Y') {
-          Object.assign(params, this.queryParams);
-        }
-        this.robotId && (params.robotId = this.robotId);
-        this.chatUserId && (params.userId = this.chatUserId);
-        this.chatName && (params.name = this.chatName);
-      }
-      return fetch.post('/chat/access/client', qs.stringify(params)).then(({ data }) => {
-        let { result, map } = data;
-        if (result === 'SUCCESS') {
-          let {
-            queueNoticeMessage,
-            chatType,
-            sessionStatus,
-            sessionId,
-            queueMessages,
-            queueId,
-            username,
-            assembly,
-            sName,
-            sUserStatusTitle,
-            sUsername,
-            classify,
-            countdown,
-            robotMessages,
-            isAccessQueue
-          } = map;
-          this.isAccessQueue = isAccessQueue;
-          if (countdown > 0) {
-            this.setChatTimer(countdown);
-          }
-          if (this.isCustomServe) {
-            this.setMsgList();
-          }
-          this.setClassify(classify);
-          this.setOnChating(true);
-          this.setChatType(chatType);
-          this.setQueueId(queueId);
-          this.setQueueNoticeMsg(queueNoticeMessage);
-          if (chatType === 'chat') {
-            this.setClientId(username);
-            if (sessionStatus === 0) {
-              this.setHistorySessionId(sessionId);
-            }
-            if (sessionStatus === 1) {
-              this.setSessionId(sessionId);
-            }
-            if (sessionId) {
-              this.setServiceName(sName);
-              this.setStatusTitle(sUserStatusTitle);
-              this.setServiceId(sUsername);
-            }
-            if (assembly) {
-              this.setAssemblySetting(assembly.settingObj);
-            }
-            let newQueueMessages = [],
-              newRobotMessages = [];
-            if (queueMessages) {
-              newQueueMessages = this.handleQueueMessages(queueMessages);
-            }
-            if (robotMessages) {
-              newRobotMessages = this.handleRobotMessages(robotMessages);
-            }
-            return [...newRobotMessages, ...newQueueMessages];
-          } else {
-            this.setBotSessionId(sessionId);
-          }
-        }
-      });
-    },
-    setQueueNoticeMsg(queueNoticeMessage) {
-      let value = '';
-      if (queueNoticeMessage) {
-        const content = queueNoticeMessage.content || '';
-        const params = queueNoticeMessage.params;
-        value = content.replace(/\{([^}]+)\}/g, function(v, $1) {
-          const s = params[$1];
-          return s ? `<span class="light">${s}</span>` : v;
-        });
-      }
-      this.queueMsg = value;
-    },
-    handleQueueMessages(queueMessages) {
-      return queueMessages.map(item => ({
-        content: {
-          type: item.type,
-          source: item.source,
-          content: item.content,
-          duration: item.duration
-        },
-        fromId: this.clientId,
-        id: 1,
-        createdTime: item.createdTime,
-        sendTime: item.sendTime
-      }));
-    },
-    handleRobotMessages(robotMessages) {
-      if (!robotMessages || robotMessages.length === 0) return [];
-      return robotMessages.map(item => {
-        let content = item.content;
-        if (item.content && vexutils.isJSON(item.content)) {
-          content = JSON.parse(item.content);
-        }
-        item.content = content || {};
-        return item;
-      });
-    },
-    /** 初始化Socket连接 */
-    initWebSocket() {
-      const heartFn = () => {
-        try {
-          this.stompClient.send('test');
-        } catch (err) {
-          this.stompClient.disconnect();
-          this.initWebSocket();
-        }
-      };
-      // let socketURL = "http://192.168.1.223/dev_crmchat/stomp";
-      // const socket = new SockJS(socketURL);
-      const socketURL = `${this.chatURL}/stomp`;
-      const options = {
-        heartbeatFn: heartFn,
-        headers: { username: this.clientId },
-        connectCb: () => {
-          this.subscribeMessage();
-          this.subscribeJoinNotice();
-          this.subscribeSessionClose();
-          this.subscribeRecallMessage();
-          this.subscribeUpdateCountdown();
-          this.subscribeTransfer();
-          this.subscribeTransferQueue();
-          this.subscribeMessageRecord();
-          this.subscribeVideoInvite();
-          this.subscribeVideoConfirm();
-          this.subscribeVideoClose();
-          if (this.sessionId) {
-            this.subscribeStatus();
-          }
-        },
-        errorCb: err => {
-          this.$message.error(err);
-        }
-      };
-      this.stompClient = new ChatSock(socketURL, options);
-    },
-
-    /* 订阅加入队列的消息 */
-    subscribeJoinNotice() {
-      this.stompClient.subscribe(`/user/${this.clientId}/accessChat`, response => {
-        let { sessionId, name, username, statusTitle, countdown } = JSON.parse(response.body);
-        const serverInfo = this.assemblySetting?.serverSetting?.serverInfo || [];
-        const connectTips = serverInfo.find(info => info.key === 'connectTips');
-        const message = (connectTips && connectTips.value) || '';
-        if (message) {
-          this.$message.success(message);
-        }
-        this.setQueueId('');
-        this.setSessionId(sessionId);
-        this.setServiceId(username);
-        this.setServiceName(name);
-        this.setStatusTitle(statusTitle);
-        this.subscribeStatus();
-        this.setQueueNoticeMsg();
-        this.isAccessQueue = false;
-        if (countdown > 0) {
-          this.setChatTimer(countdown);
-        }
-      });
-    },
-
-    /* 订阅消息 */
-    subscribeMessage() {
-      this.stompClient.subscribe('/user/' + this.clientId + '/message', response => {
-        let res = JSON.parse(response.body);
-        let { body, from, id, fromName, readStatus } = res;
-        // 排队消息
-        if (body.type == 0 && body.source == 2) {
-          this.setQueueNoticeMsg(body);
-          return;
-        }
-        this.setIsAppendMsg(true);
-        this.setMessage({
-          readStatus: readStatus,
-          content: body,
-          fromId: from,
-          id,
-          fromName
-        });
-        this.setScrollTo('bottom');
-      });
-    },
-
-    /* 订阅客服关闭会话 */
-    subscribeSessionClose() {
-      this.stompClient.subscribe(`/user/${this.clientId}/closeSession`, response => {
-        const res = JSON.parse(response.body);
-        let { body, from, id, fromName, queueId, portrait = '' } = res;
-        // 如果有 queueId 代表 队列中被拒绝 需要展示拒绝原因
-        if (queueId) {
-          if (body) {
-            this.setIsAppendMsg(true);
-            this.setMessage({
-              portrait,
-              content: body,
-              fromId: from,
-              id,
-              fromName
-            });
-          }
-        } else {
-          this.openEvalute();
-        }
-        this.setSessionEnd(true);
-        this.setChatTimer();
-      });
-    },
-    async openEvalute() {
-      let { evaluate = {} } = this.assemblySetting;
-      if (evaluate.isChecked === 'Y' && evaluate.id) {
-        this.getById();
-      }
-    },
-    /* 订阅客服状态更新 */
-    subscribeStatus() {
-      this.statusSubscribe = this.stompClient.subscribe(`/topic/updateStatus/${this.serviceId}`, response => {
-        let res = JSON.parse(response.body);
-        let { statusTitle } = res;
-        this.setStatusTitle(statusTitle);
-      });
-    },
-
-    /* 订阅消息撤回 */
-    subscribeRecallMessage() {
-      this.stompClient.subscribe('/user/' + this.clientId + '/recallMessage', response => {
-        let res = JSON.parse(response.body);
-        let { from, id } = res;
-        // 客服撤回
-        if (this.serviceId === from) {
-          let msg = this.msgList.find(msg => msg.id == id);
-          this.$set(msg, 'recallFlag', 1);
-        }
-      });
-    },
-
-    /* 订阅客服转接 */
-    subscribeTransfer() {
-      this.stompClient.subscribe('/user/' + this.clientId + '/transferSession', response => {
-        this.statusSubscribe.unsubscribe();
-        let res = JSON.parse(response.body);
-        let { name, username, statusTitle } = res;
-        this.setServiceId(username);
-        this.setServiceName(name);
-        this.setStatusTitle(statusTitle);
-        this.subscribeStatus();
-      });
-    },
-    // 订阅接入前转接
-    subscribeTransferQueue() {
-      this.stompClient.subscribe(`/user/${this.clientId}/transferQueue`, res => {
-        const body = JSON.parse(res.body);
-        this.setQueueId(body.queueId);
-        this.setServiceId(body.username);
-        this.setServiceName(body.name);
-        this.setStatusTitle(body.statusTitle);
-        this.subscribeStatus();
-        this.dispatchEvent('user_transferQueue', {
-          clientId: this.clientId,
-          body: body
-        });
-      });
-    },
-    /* 订阅延时后的会话时长 */
-    subscribeUpdateCountdown() {
-      this.stompClient.subscribe(`/user/${this.clientId}/updateCountdown`, response => {
-        let res = JSON.parse(response.body);
-        let { countdown } = res;
-        if (countdown > 0) {
-          this.setChatTimer(countdown);
-        }
-      });
-    },
-
-    // 订阅消息已读回执
-    subscribeMessageRecord() {
-      this.stompClient.subscribe('/user/' + this.clientId + '/msgReadStatus', response => {
-        if (!this.sessionId) return;
-        let body = JSON.parse(response.body);
-        if (body?.sessionId !== this.sessionId) return;
-        const readStatus = body?.readStatus || {};
-        const keys = Object.keys(readStatus);
-        if (keys.length < 1) return;
-        const idxs = {};
-        let hasSending = false;
-        const msgList = this.msgList;
-        msgList.forEach((item, i) => {
-          const id = item?.id;
-          if (id) {
-            idxs[id] = i;
-          } else if (item.sending) {
-            hasSending = true; // 存在正在发送的消息
-          }
-        });
-        let notFound = {};
-        keys.forEach(id => {
-          const i = idxs[id];
-          if (typeof i === 'number') {
-            const item = msgList[i];
-            msgList.splice(i, 1, {
-              ...item,
-              readStatus: readStatus[id]
-            });
-          } else {
-            notFound[id] = readStatus[id];
-          }
-        });
-        this.setMsgRecordCache(hasSending ? Object.freeze(notFound) : {});
-      });
-    },
-    /* 订阅视频邀请 */
-    subscribeVideoInvite() {
-      this.stompClient.subscribe(`/user/${this.clientId}/videoChat/invite/notice`, response => {
-        let res = JSON.parse(response.body);
-        let { sessionId, type, mode, inviteResult } = res;
-        if (inviteResult == 0) {
-          this.setVideoMembers([]);
-        }
-        this.setVideoData(res);
-        if (this.sessionId == sessionId) {
-          if (type == 2) {
-            this.setMultiVideoShow(true);
-            this.setVideoStatus(1);
-            this.setVideoData(res);
-            this.setVideoMode(mode);
-          } else {
-            this.setShowAudio(true);
-            this.setVideoData(res);
-            this.setVideoMode(mode);
-          }
-        }
-      });
-    },
-    /* 订阅视频确认接入 */
-    subscribeVideoConfirm() {
-      this.stompClient.subscribe(`/user/${this.clientId}/videoChat/inviteEnter/notice`, response => {
-        let res = JSON.parse(response.body);
-        this.setMultiVideoShow(false);
-        let { inviteResult, callee, sessionId, isCaller, mode, recordId, type } = res;
-        if (isCaller === 0 || this.sessionId != sessionId) {
-          return;
-        }
-        if (inviteResult === 0) {
-          if (callee !== this.clientId) {
-            this.$message.warning(`${this.i18nText('1.9.329')}!`);
-            this.setShowVideo(false);
-            this.setShowAudio(false);
-            this.setVideoData({});
-            this.setVideoMembers([]);
-          }
-          return;
-        }
-        if (type == 1) {
-          if (mode == 2) {
-            this.setShowVideo(true);
-            this.setShowAudio(false);
-          } else {
-            this.setShowVideo(false);
-            this.setShowAudio(true);
-          }
-        }
-        this.setVideoData(res);
-        this.$nextTick(() => {
-          this.setRecordId(recordId);
-        });
-      });
-    },
-    /* 订阅视频挂断 */
-    subscribeVideoClose() {
-      this.stompClient.subscribe(`/user/${this.clientId}/videoChat/hangUp/notice`, () => {
-        this.$message.success('通话结束!');
-        this.setShowVideo(false);
-        this.setRoomId(null);
-        this.setRecordId('');
-        this.setMultiVideoShow(false);
-        this.setVideoData({});
-        this.setMuteAudio(false);
-      });
-    },
-
-    getById() {
-      let url = '/evaluation/getById';
-      let { evaluate = {} } = this.assemblySetting;
-      if (Object.keys(evaluate).length === 0) return;
-      let params = { id: evaluate.id };
-      return fetch
-        .get(url, { params })
-        .then(({ data }) => {
-          if (data.result === 'SUCCESS') {
-            if (data.obj && data.obj.setting) {
-              this.evaluateSetting = JSON.parse(data.obj.setting);
-              this.evaluateModal = true;
-            }
-          }
-        })
-        .catch(() => {});
-    },
-    closeEvaluate(val) {
-      this.evaluateModal = val;
-    }
-  },
-  components: {
-    [Layout.name]: Layout,
-    [Layout.Header.name]: Layout.Header,
-    ChatFooter,
-    ChatMain,
-    Evaluate,
-    ChatVideo,
-    ChatAudio,
-    SvgIcon
-  },
-  beforeDestroy() {
-    if (this.stompClient) {
-      this.stompClient.disconnect();
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.online-chat {
-  position: relative;
-  height: 100%;
-  &.chat-page {
-    margin: 0;
-  }
-
-  /deep/ .ant-layout {
-    height: 100%;
-  }
-  /deep/ .ant-layout-footer {
-    color: rgb(0, 0, 0);
-  }
-  .ant-layout-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 48px;
-    padding-left: 18px;
-    padding-right: 0;
-    background: #fff;
-    border-bottom: 1px solid #d8d8d8;
-    .title {
-      margin-right: auto;
-    }
-    /deep/ .ant-btn {
-      border-radius: 13px;
-      height: 26px;
-      margin-right: 18px;
-    }
-  }
-  /deep/ .ant-layout-footer {
-    height: 190px;
-    padding: 0;
-    background: #fff;
-  }
-  /deep/ .ant-layout-content {
-    background: #fff;
-  }
-  .notice-bottom {
-    border: 1px solid #e2e2e2;
-    border-bottom: 0;
-    padding: 5px 15px;
-    font-size: 14px;
-    line-height: 20px;
-    color: rgba(0, 0, 0, 0.6);
-    text-align: left;
-    background-color: #fff;
-    word-break: break-all;
-    .svg-icon {
-      margin-right: 10px;
-      font-size: 14px;
-      color: #969696;
-    }
-    /deep/ .light {
-      color: #e54949;
-    }
-  }
-}
-</style>