cnhis-design-vue 2.1.78 → 2.1.80

package/packages/multi-chat/chat/robot/index.vue

@@ -1,312 +1,312 @@
-<template>
-  <div class="online-chat robot-chat">
-    <a-layout>
-      <a-layout-header>
-        <span class="title">{{ chatTitle }}</span>
-        <span v-if="showCustomServe" class="custom-serve" @click="$emit('goCustomServe')">
-          转人工客服
-        </span>
-      </a-layout-header>
-      <chat-main v-on="$listeners" :curChatType="'robot'" :robotAvatar="robotAvatar" @sendQuestion="sendQuestion" @sendIntention="sendIntention" @sendDictionary="sendDictionary">
-        <a-alert v-if="stompStatus" type="warning" :message="stompStatus" show-icon>
-          <a-icon type="exclamation-circle" slot="icon" />
-        </a-alert>
-      </chat-main>
-      <chat-footer :curChatType="'robot'" :clientFinish="clientFinish"></chat-footer>
-    </a-layout>
-    <Evaluate v-if="evaluateModal" :orgId="accessParams.orgId" :evaluateSetting="evaluateSetting" @closeEvaluate="closeEvaluate" />
-  </div>
-</template>
-
-<script>
-import { Layout, Icon, Alert } from 'ant-design-vue';
-import { mapGetters, mapMutations, mapActions } from '../../store/helper';
-import ChatFooter from '../chatFooter';
-import ChatMain from '../chatMain';
-import Evaluate from '../evaluate';
-import { fmtRobotMessage } from '../../utils';
-import ChatSock from '../../utils/chatSock';
-import fetch, { qs } from '@/utils/chatFetch';
-
-export default {
-  name: 'robotChat',
-  inject: ['store', 'i18nText'],
-  components: {
-    [Alert.name]: Alert,
-    [Icon.name]: Icon,
-    [Layout.name]: Layout,
-    [Layout.Header.name]: Layout.Header,
-    ChatFooter,
-    ChatMain,
-    Evaluate
-  },
-  data() {
-    return {
-      chatTitle: '',
-      stompStatus: '',
-      statusSubscribe: null,
-      evaluateModal: false,
-      evaluateSetting: {},
-      robotAvatar: '',
-      clientFinish: true
-    };
-  },
-  props: {
-    chatURL: {
-      type: String
-    },
-    assembly: {
-      type: String
-    }
-  },
-  computed: {
-    ...mapGetters(['userInfo', 'msgList', 'serviceId', 'accessParams', 'assemblySetting', 'chatMode', 'robotId', 'assemblyId', 'clientChatISRobot', 'queryParams']),
-    showCustomServe() {
-      return this.chatMode !== 'ROBOT';
-    },
-    orgId() {
-      return this.userInfo?.sysParams?.orgId;
-    },
-    userId() {
-      return this.userInfo?.sysParams?.userId;
-    },
-    name() {
-      return this.userInfo?.sysParams?.userName;
-    },
-    serviceUserId() {
-      return this.queryParams.serviceId;
-    }
-  },
-  created() {
-    this.setIsServer(false);
-  },
-  async mounted() {
-    let messages = await this.handleClientAccess();
-    if (messages) {
-      this.setMsgList([...this.handleMessages(messages)]);
-    }
-    this.setScrollTo('bottom');
-    this.initWebSocket();
-  },
-  beforeDestroy() {
-    this.chatClient?.disconnect();
-    this.chatClient = null;
-  },
-  methods: {
-    ...mapMutations([
-      'setMsgList',
-      'setScrollTo',
-      'setStatusTitle',
-      'setIsAppendMsg',
-      'setMessage',
-      'setIsServer',
-      'setQuestionId',
-      'setDictionaryKey',
-      'setRobotId',
-      'setChatUserId',
-      'setChatName',
-      'setIntentionId',
-      'setDictionaryValue',
-      'setOrgId',
-      'setIsQuickReply'
-    ]),
-    ...mapActions({
-      robotSendMessage: 'robotSendMessage',
-      getHistoryMsg: 'setMsgList',
-      setChatTimer: 'setChatTimer',
-      sendRobotMessage: 'sendRobotMessage'
-    }),
-    /* 接入客户端聊天 */
-    handleClientAccess() {
-      let params = {
-        assemblyId: this.assemblyId // <- 机器人和非机器人都需要 assemblyId 参数
-      };
-      if (this.clientChatISRobot == 'Y') {
-        Object.assign(params, this.queryParams);
-      } else {
-        if (this.showCustomServe) {
-          // 如果是 可转接客服的 带上 路由参数 防止某些用户信息未传递给后台
-          Object.assign(params, this.queryParams);
-        }
-        Object.assign(params, this.accessParams, {
-          robotId: this.robotId
-        });
-      }
-      let orgId = this.orgId || this.queryParams?.orgId || '';
-      orgId & this.setOrgId(orgId);
-      params.orgId = orgId;
-      return fetch.post('/robot/access/client', qs.stringify(params)).then(({ data }) => {
-        let { result, obj } = data;
-        if (result === 'SUCCESS') {
-          this.clientFinish = false;
-          this.chatTitle = obj.robotName || '智能客服';
-          let { messages, userId, name, icon, username } = obj;
-          this.username = username;
-          this.robotAvatar = icon || '';
-          userId && this.setChatUserId(userId);
-          name && this.setChatName(name);
-          return fmtRobotMessage(messages);
-        }
-      });
-    },
-    handleMessages(message) {
-      message.forEach(item => {
-        item.content = JSON.parse(item.content);
-      });
-      return message;
-    },
-
-    async openEvalute() {
-      let { evaluate = {} } = this.assemblySetting;
-      if (evaluate.isChecked === 'Y' && evaluate.id) {
-        this.getById();
-      }
-    },
-    sendQuestion(question, item) {
-      let { questionId, desc, type, dictionaryValue, dictionaryKey } = question;
-      let { intentionId } = item;
-      if (type == 2) {
-        this.setQuestionId(questionId);
-      } else if (type == 3) {
-        this.setDictionaryValue(dictionaryValue);
-        this.setDictionaryKey(dictionaryKey);
-        this.setIsQuickReply(true);
-      }
-      this.setIntentionId(intentionId);
-      this.sendRobotMessage({
-        message: desc,
-        postParams: {
-          wordName: item.wordName
-        }
-      });
-    },
-    sendDictionary(dictionary, item) {
-      let { dictionaryKey, intentionId } = item;
-      this.setIntentionId(intentionId);
-      this.setIsQuickReply(true); // <- open isQuickReply 带上 dictionaryValue 参数
-      this.setDictionaryValue(dictionary);
-      this.setDictionaryKey(dictionaryKey);
-      this.sendRobotMessage({
-        message: dictionary,
-        postParams: {
-          dictionaryValue: dictionary,
-          wordName: item.wordName
-        }
-      });
-    },
-    sendIntention(intention) {
-      let { id } = intention;
-      this.setIntentionId(id);
-      this.sendRobotMessage();
-    },
-
-    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;
-    },
-
-    initWebSocket() {
-      const username = this.username;
-      const reconnectMaxCount = 60;
-      const connectCb = isReconnect => {
-        this.stompStatus = '';
-        if (isReconnect) {
-          this.setMsgList([]);
-          this.handleClientAccess().then(msg => {
-            msg && this.setMsgList(this.handleMessages(msg));
-          });
-        }
-      };
-      const errorCb = (_err, count) => {
-        this.stompStatus = count > reconnectMaxCount ? '当前网络不可用，请检查网络！' : this.i18nText('1.10.181');
-      };
-      const subscribeCbs = [
-        {
-          action: `/user/${username}/robot/actionData`,
-          cb: this.subscribeActionData
-        }
-      ];
-      this.chatClient = new ChatSock(`${this.chatURL}/stomp`, {
-        headers: { username: this.serviceId },
-        connectCb,
-        errorCb,
-        subscribeCbs,
-        reconnectMaxCount
-      });
-    },
-    subscribeActionData(response) {
-      let res = JSON.parse(response.body);
-      this.robotSendMessage(res);
-    }
-  }
-};
-</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: 18px;
-    background: #fff;
-    border-bottom: 1px solid #d8d8d8;
-    .title {
-      margin-right: auto;
-    }
-    .custom-serve {
-      display: inline-block;
-      line-height: 1.5;
-      padding: 4px 16px;
-      font-size: 14px;
-      color: #5585f5;
-      border-radius: 16px;
-      border: 1px solid #5585f5;
-      cursor: pointer;
-    }
-    /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;
-  }
-}
-</style>
+<template>
+  <div class="online-chat robot-chat">
+    <a-layout>
+      <a-layout-header>
+        <span class="title">{{ chatTitle }}</span>
+        <span v-if="showCustomServe" class="custom-serve" @click="$emit('goCustomServe')">
+          转人工客服
+        </span>
+      </a-layout-header>
+      <chat-main v-on="$listeners" :curChatType="'robot'" :robotAvatar="robotAvatar" @sendQuestion="sendQuestion" @sendIntention="sendIntention" @sendDictionary="sendDictionary">
+        <a-alert v-if="stompStatus" type="warning" :message="stompStatus" show-icon>
+          <a-icon type="exclamation-circle" slot="icon" />
+        </a-alert>
+      </chat-main>
+      <chat-footer :curChatType="'robot'" :clientFinish="clientFinish"></chat-footer>
+    </a-layout>
+    <Evaluate v-if="evaluateModal" :orgId="accessParams.orgId" :evaluateSetting="evaluateSetting" @closeEvaluate="closeEvaluate" />
+  </div>
+</template>
+
+<script>
+import { Layout, Icon, Alert } from 'ant-design-vue';
+import { mapGetters, mapMutations, mapActions } from '../../store/helper';
+import ChatFooter from '../chatFooter';
+import ChatMain from '../chatMain';
+import Evaluate from '../evaluate';
+import { fmtRobotMessage } from '../../utils';
+import ChatSock from '../../utils/chatSock';
+import fetch, { qs } from '@/utils/chatFetch';
+
+export default {
+  name: 'robotChat',
+  inject: ['store', 'i18nText'],
+  components: {
+    [Alert.name]: Alert,
+    [Icon.name]: Icon,
+    [Layout.name]: Layout,
+    [Layout.Header.name]: Layout.Header,
+    ChatFooter,
+    ChatMain,
+    Evaluate
+  },
+  data() {
+    return {
+      chatTitle: '',
+      stompStatus: '',
+      statusSubscribe: null,
+      evaluateModal: false,
+      evaluateSetting: {},
+      robotAvatar: '',
+      clientFinish: true
+    };
+  },
+  props: {
+    chatURL: {
+      type: String
+    },
+    assembly: {
+      type: String
+    }
+  },
+  computed: {
+    ...mapGetters(['userInfo', 'msgList', 'serviceId', 'accessParams', 'assemblySetting', 'chatMode', 'robotId', 'assemblyId', 'clientChatISRobot', 'queryParams']),
+    showCustomServe() {
+      return this.chatMode !== 'ROBOT';
+    },
+    orgId() {
+      return this.userInfo?.sysParams?.orgId;
+    },
+    userId() {
+      return this.userInfo?.sysParams?.userId;
+    },
+    name() {
+      return this.userInfo?.sysParams?.userName;
+    },
+    serviceUserId() {
+      return this.queryParams.serviceId;
+    }
+  },
+  created() {
+    this.setIsServer(false);
+  },
+  async mounted() {
+    let messages = await this.handleClientAccess();
+    if (messages) {
+      this.setMsgList([...this.handleMessages(messages)]);
+    }
+    this.setScrollTo('bottom');
+    this.initWebSocket();
+  },
+  beforeDestroy() {
+    this.chatClient?.disconnect();
+    this.chatClient = null;
+  },
+  methods: {
+    ...mapMutations([
+      'setMsgList',
+      'setScrollTo',
+      'setStatusTitle',
+      'setIsAppendMsg',
+      'setMessage',
+      'setIsServer',
+      'setQuestionId',
+      'setDictionaryKey',
+      'setRobotId',
+      'setChatUserId',
+      'setChatName',
+      'setIntentionId',
+      'setDictionaryValue',
+      'setOrgId',
+      'setIsQuickReply'
+    ]),
+    ...mapActions({
+      robotSendMessage: 'robotSendMessage',
+      getHistoryMsg: 'setMsgList',
+      setChatTimer: 'setChatTimer',
+      sendRobotMessage: 'sendRobotMessage'
+    }),
+    /* 接入客户端聊天 */
+    handleClientAccess() {
+      let params = {
+        assemblyId: this.assemblyId // <- 机器人和非机器人都需要 assemblyId 参数
+      };
+      if (this.clientChatISRobot == 'Y') {
+        Object.assign(params, this.queryParams);
+      } else {
+        if (this.showCustomServe) {
+          // 如果是 可转接客服的 带上 路由参数 防止某些用户信息未传递给后台
+          Object.assign(params, this.queryParams);
+        }
+        Object.assign(params, this.accessParams, {
+          robotId: this.robotId
+        });
+      }
+      let orgId = this.orgId || this.queryParams?.orgId || '';
+      orgId & this.setOrgId(orgId);
+      params.orgId = orgId;
+      return fetch.post('/robot/access/client', qs.stringify(params)).then(({ data }) => {
+        let { result, obj } = data;
+        if (result === 'SUCCESS') {
+          this.clientFinish = false;
+          this.chatTitle = obj.robotName || '智能客服';
+          let { messages, userId, name, icon, username } = obj;
+          this.username = username;
+          this.robotAvatar = icon || '';
+          userId && this.setChatUserId(userId);
+          name && this.setChatName(name);
+          return fmtRobotMessage(messages);
+        }
+      });
+    },
+    handleMessages(message) {
+      message.forEach(item => {
+        item.content = JSON.parse(item.content);
+      });
+      return message;
+    },
+
+    async openEvalute() {
+      let { evaluate = {} } = this.assemblySetting;
+      if (evaluate.isChecked === 'Y' && evaluate.id) {
+        this.getById();
+      }
+    },
+    sendQuestion(question, item) {
+      let { questionId, desc, type, dictionaryValue, dictionaryKey } = question;
+      let { intentionId } = item;
+      if (type == 2) {
+        this.setQuestionId(questionId);
+      } else if (type == 3) {
+        this.setDictionaryValue(dictionaryValue);
+        this.setDictionaryKey(dictionaryKey);
+        this.setIsQuickReply(true);
+      }
+      this.setIntentionId(intentionId);
+      this.sendRobotMessage({
+        message: desc,
+        postParams: {
+          wordName: item.wordName
+        }
+      });
+    },
+    sendDictionary(dictionary, item) {
+      let { dictionaryKey, intentionId } = item;
+      this.setIntentionId(intentionId);
+      this.setIsQuickReply(true); // <- open isQuickReply 带上 dictionaryValue 参数
+      this.setDictionaryValue(dictionary);
+      this.setDictionaryKey(dictionaryKey);
+      this.sendRobotMessage({
+        message: dictionary,
+        postParams: {
+          dictionaryValue: dictionary,
+          wordName: item.wordName
+        }
+      });
+    },
+    sendIntention(intention) {
+      let { id } = intention;
+      this.setIntentionId(id);
+      this.sendRobotMessage();
+    },
+
+    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;
+    },
+
+    initWebSocket() {
+      const username = this.username;
+      const reconnectMaxCount = 60;
+      const connectCb = isReconnect => {
+        this.stompStatus = '';
+        if (isReconnect) {
+          this.setMsgList([]);
+          this.handleClientAccess().then(msg => {
+            msg && this.setMsgList(this.handleMessages(msg));
+          });
+        }
+      };
+      const errorCb = (_err, count) => {
+        this.stompStatus = count > reconnectMaxCount ? '当前网络不可用，请检查网络！' : this.i18nText('1.10.181');
+      };
+      const subscribeCbs = [
+        {
+          action: `/user/${username}/robot/actionData`,
+          cb: this.subscribeActionData
+        }
+      ];
+      this.chatClient = new ChatSock(`${this.chatURL}/stomp`, {
+        headers: { username: this.serviceId },
+        connectCb,
+        errorCb,
+        subscribeCbs,
+        reconnectMaxCount
+      });
+    },
+    subscribeActionData(response) {
+      let res = JSON.parse(response.body);
+      this.robotSendMessage(res);
+    }
+  }
+};
+</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: 18px;
+    background: #fff;
+    border-bottom: 1px solid #d8d8d8;
+    .title {
+      margin-right: auto;
+    }
+    .custom-serve {
+      display: inline-block;
+      line-height: 1.5;
+      padding: 4px 16px;
+      font-size: 14px;
+      color: #5585f5;
+      border-radius: 16px;
+      border: 1px solid #5585f5;
+      cursor: pointer;
+    }
+    /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;
+  }
+}
+</style>