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

package/packages/multi-chat/chat/chatMain.vue

@@ -1,1446 +0,0 @@
-<template>
-  <div class="message-wrapper">
-    <chat-header :hideHeader="hideHeader" @openPortraitPanel="handleOpenPortraitPanel" v-if="isServer && enable"></chat-header>
-    <a-layout-content>
-      <slot></slot>
-      <div v-if="showBroadcast" class="broadcast-wrap">
-        <div v-if="broadcastCarousel" class="carousel-item" :class="{ 'has-link': assemblySetting.broadcast.PC.list[0].url }" @click="goToBroadcastLink(assemblySetting.broadcast.PC.list[0])">
-          <a-icon type="sound" />
-          <span class="ellips">
-            {{ assemblySetting.broadcast.PC.list[0].content }}
-          </span>
-        </div>
-        <template v-else>
-          <a-carousel dotPosition="right" autoplay :dots="false">
-            <div class="carousel-item" v-for="(item, i) in assemblySetting.broadcast.PC.list" :key="i" :class="{ 'has-link': item.url }" @click="goToBroadcastLink(item)">
-              <a-icon type="sound" />
-              <span class="ellips">{{ item.content }}</span>
-            </div>
-          </a-carousel>
-        </template>
-      </div>
-      <div v-if="sessionHistoryList.length > 1 && !(!onChating && currentTab === 'end') && !sessionEnd" style="position: absolute; top: 0; left: 20px; z-index: 1">
-        <a-radio-group :value="selectedSession" @change="handleSessionIdChange" buttonStyle="solid">
-          <a-radio-button :value="item.id + '-' + item.fromId" v-for="item in sessionHistoryList" :key="item.id + item.fromId">{{ item.fromName }}</a-radio-button>
-        </a-radio-group>
-      </div>
-      <div class="online-message" ref="message-wrapper" v-infinite-scroll="handleInfiniteOnLoad" @scroll="scrollEvent">
-        <template v-for="(item, index) in msgList">
-          <div :key="index" v-if="item">
-            <p v-if="isNeedShowTime(item, index)" class="message-time">
-              {{ formatDate(item.createdTime) }}
-            </p>
-            <div v-if="item.recallFlag" style="margin: 10px 0">
-              <template v-if="handleRecallFlag(item)">
-                {{ getRecallText(item, isServer) }}
-                <a style="text-decoration: underline" @click="reEditMessage(item)" v-if="[0, 4].includes(item.content && item.content.type) && onChating && isServer">,{{ i18nText('1.9.368') }}</a>
-              </template>
-              <template v-else>
-                {{ getRecallText(item) || `${item.fromName} ${i18nText('1.9.365')}` }}
-              </template>
-            </div>
-            <!--  系统消息 -->
-            <div class="system-msg" v-else-if="isSystemMsg(item)">
-              <a-icon class="system-icon" theme="filled" type="exclamation-circle" />
-              <div>
-                <span v-html="getSystemMsgContent(item)"></span>
-                <span class="system-btn" v-for="(btn, index) in getTemplateButton(item)" @click="handleTemplateButton(btn)" :key="index">{{ btn.title }}</span>
-              </div>
-            </div>
-            <div
-              v-else-if="!item.recallFlag"
-              class="message-item"
-              :class="[getMessageItemClass(item), { 'read-status': enableReadRecord && item.readStatus }]"
-              :data-rid="item.readStatus === 'N' ? item.id : ''"
-            >
-              <img v-if="!isServer && item.fromPortrait" class="msg-avatar" :src="item.fromPortrait" />
-
-              <div v-else-if="!isServer && item.fromName" class="first-name">
-                {{ item.fromName && item.fromName.slice(0, 2) }}
-              </div>
-              <img v-else-if="!isServer" class="msg-avatar" :src="getAvatar(item)" width="40" height="40" />
-
-              <template v-else>
-                <img :src="customerStaffIcon" class="msg-avatar" width="40" height="40" v-if="item.fromId === 'SYSTEM'" />
-
-                <img src="../img/system_message.png" class="msg-avatar" width="40" height="40" v-else-if="item.content && item.content.source === 1" />
-
-                <img v-else-if="item.portrait" class="msg-avatar" :src="item.portrait" />
-
-                <div v-else class="first-name">
-                  {{ item.fromName && item.fromName.slice(0, 2) }}
-                </div>
-              </template>
-              <div @contextmenu="handleContextmenu($event, item)" style="display: flex">
-                <a-spin v-if="item.sending">
-                  <a-icon slot="indicator" type="loading" style="font-size: 24px" spin />
-                </a-spin>
-                <a-popconfirm @confirm="handleSendFail(item)" :okText="i18nText('1.1.1.1.3')" :cancelText="i18nText('2.7.1.14')">
-                  <a-icon type="exclamation-circle" slot="icon" />
-                  <div slot="title">
-                    <span>确认重新发送该消息?</span>
-                  </div>
-                  <a-icon v-if="item.fail" theme="filled" type="exclamation-circle" style="font-size: 16px; display: flex; align-items: center; color: red" />
-                </a-popconfirm>
-                <div class="content-wrap" v-if="item.content.type === 0">
-                  <span class="right-time">
-                    {{ formatDate(item.createdTime || item.sendTime, true) }}
-                  </span>
-                  <div
-                    :class="{
-                      content: true,
-                      'has-dictionary': item.dictionaryValues && item.dictionaryValues.length,
-                      'has-intention': item.intentionList && item.intentionList.length
-                    }"
-                  >
-                    <p v-html="item.content.content"></p>
-                    <template v-if="item.content.attachments && item.content.attachments.length > 0">
-                      <div v-for="(v, index) in item.content.attachments" :key="index" class="robot-item">
-                        <a v-if="v.type == 1" :href="v.url" target="_blank"> {{ v.desc }}(超链) </a>
-                        <a @click.prevent.stop="$emit('sendQuestion', v, item)" v-if="v.type == 2 || v.type == 3" href="javascript:void(0);">
-                          {{ v.desc }}
-                        </a>
-                      </div>
-                    </template>
-                    <div v-if="item.intentionList && item.intentionList.length" class="intention-wrap">
-                      <div v-for="(v, index) in item.intentionList" :key="index" @click.prevent.stop="$emit('sendIntention', v)">
-                        <svg-icon :icon-class="v.icon || 'moren'" style="font-size: 26px"></svg-icon>
-                        <span>{{ v.name }}</span>
-                      </div>
-                    </div>
-                  </div>
-                  <ul class="dictionary-ul" v-if="item.dictionaryValues && item.dictionaryValues.length">
-                    <li v-for="(v, i) in item.dictionaryValues" :key="i" @click.prevent.stop="$emit('sendDictionary', v, item)">
-                      {{ v }}
-                    </li>
-                  </ul>
-                  <div class="client-btn" v-if="item.autoAccess && item.autoAccess === 'false'">
-                    <svg-icon icon-class="kefu"></svg-icon>
-                    <span @click="$emit('goCustomServe')">转人工客服</span>
-                  </div>
-                </div>
-                <div v-else-if="item.content.type === 1" class="upload-image">
-                  <MsgPicture style="max-width: 345px" :image="item.content.content" @click="show(item)" />
-                </div>
-                <div class="content-wrap" v-else-if="item.content.type === 2">
-                  <span class="right-time">
-                    {{ formatDate(item.createdTime || item.sendTime, true) }}
-                  </span>
-                  <div class="content">
-                    <img style="width: 16px;margin-right:8px" src="../img/multi-video.png" />
-                    {{ item.content.content }}&nbsp;
-                    <span @click.prevent.stop="reCall(item, 'video')" class="re-call" v-if="item.content.isRefuse == 1">
-                      {{ handleReCall(item) }}
-                    </span>
-                  </div>
-                </div>
-                <div class="content-wrap" v-else-if="item.content.type === 5">
-                  <span class="right-time">
-                    {{ formatDate(item.createdTime || item.sendTime, true) }}
-                  </span>
-                  <div class="content">
-                    <img style="width: 16px;margin-right:8px" src="../img/multi-voice.png" />
-                    {{ item.content.content }}&nbsp;
-                    <span @click.prevent.stop="reCall(item, 'voice')" class="re-call" v-if="item.content.isRefuse == 1">
-                      {{ handleReCall(item) }}
-                    </span>
-                  </div>
-                </div>
-                <div class="content-wrap" v-else-if="item.content.type === 6">
-                  <span class="right-time">
-                    {{ formatDate(item.createdTime || item.sendTime, true) }}
-                  </span>
-                  <div class="voice-bg content" @click.prevent.stop="playAudio(item)">
-                    <img v-if="item.content.isPlay" src="../img/audio-play.gif" alt="" />
-                    <img v-else src="../img/audio-new.png" alt="" />
-                    <span class="voice-text" :style="AudioStyle(item)"> {{ item.content.duration || 1 }}" </span>
-                  </div>
-                </div>
-                <template v-else-if="item.content.type === 4">
-                  <msg-describe v-if="isDescribeMsg(item)" :item="item" />
-                  <div v-else class="content-wrap">
-                    <span class="right-time">
-                      {{ formatDate(item.createdTime || item.sendTime, true) }}
-                    </span>
-                    <MsgPrescription :data="item" :isServer="isServer" :theme="isServer ? '' : 'customer'" @handleTemplateDetail="handleTemplateDetail" @handleTemplateButton="handleTemplateButton" />
-                  </div>
-                </template>
-              </div>
-              <ReadStatus v-if="enableReadRecord" :status="item.readStatus" @click="openReadRecord($event, item)" />
-            </div>
-          </div>
-        </template>
-        <ul class="menu-main" ref="contextMenu" :style="contextMenuStyle" v-if="contextMenuShow">
-          <template v-for="(item, index) in rightClickSetting">
-            <li :key="index" class="menu-item" @click="() => handleRightClick(contextMenuItem, item)">
-              {{ item.rightClickName }}
-            </li>
-          </template>
-        </ul>
-        <div class="session-end" v-if="sessionEnd && !isServer">
-          <span class="end">{{ i18nText('1.9.370') }}</span>
-        </div>
-        <a-spin v-if="loading" class="loading-icon" />
-      </div>
-      <!-- 图片预览 -->
-      <viewer class="viewer" ref="viewer" :images="images" @inited="inited" style="display: none">
-        <template slot-scope="scope">
-          <img v-for="src in scope.images" :src="src" :key="src" />
-        </template>
-      </viewer>
-      <!-- 卡片详情 -->
-      <a-modal
-        wrapClassName="chat-footer-modal-small"
-        :title="modalData.title || i18nText('1.1.1.10')"
-        :visible="modalShow"
-        :maskClosable="false"
-        :mask="true"
-        width="80%"
-        destroyOnClose
-        :okText="i18nText('1.2.1.11.6')"
-        :footer="null"
-        @cancel="
-          () => {
-            this.modalShow = false;
-          }
-        "
-      >
-        <iframe id="chat-footer-modal" v-if="modalData.targetType === 'LINK_ADDRESS'" width="100%" height="100%" frameborder="0" :src="modalData.address" allow="camera;midi"></iframe>
-      </a-modal>
-    </a-layout-content>
-    <audio style="display: none" controls autoplay ref="audio" preload="auto" crossOrigin="anonymous" media-player="audioPlayer" :src="curAudioUrl" @ended="audioEnd"></audio>
-    <ReadRecord v-if="readRecordVisible" :style="readRecordStyle" :list="readRecordList" @close="closeReadRecord" />
-  </div>
-</template>
-
-<script>
-import { Layout, Modal, Icon, Spin, Popconfirm, Carousel, Radio } from 'ant-design-vue';
-import SvgIcon from '@/component/svg/index.vue';
-import InfiniteScroll from '@/directive/scroll';
-import { mapGetters, mapMutations, mapActions } from '../store/helper';
-import fetch, { qs } from '@/utils/chatFetch';
-import MsgDescribe from '../components/msg-describe';
-import MsgPicture from '../components/msg-picture';
-import MsgPrescription from '../components/msg-prescription';
-import ReadStatus from '../components/read-status';
-import ReadRecord from '../components/read-record';
-import chatHeader from './chatHeader';
-import 'viewerjs/dist/viewer.css';
-import { component as Viewer } from "v-viewer";
-// import Viewer from 'v-viewer/src/component.vue';
-import { getRecallText } from '../utils';
-import vexutils from '@/utils/vexutils';
-import ObserverScroll from '../utils/observer-scroll';
-
-const customerStaffIcon = require('../img/customer_staff.png');
-export default {
-  inject: ['store', 'dispatchEvent', 'registerEvent', 'unregisterEvent', 'i18nText'],
-  props: {
-    hideHeader: {
-      type: Boolean,
-      default: false
-    },
-    robotAvatar: {
-      type: String,
-      default: ''
-    },
-    curChatType: {
-      type: String
-    },
-    isShowPortraitPanel: {
-      type: Boolean
-    },
-    activatedTime: {
-      type: Number
-    }
-  },
-  data() {
-    return {
-      loading: false,
-      // 卡片详情
-      modalShow: false,
-      modalData: {},
-      // 客户头像
-      // 右键操作
-      contextMenuStyle: {
-        position: 'fixed',
-        top: 0,
-        left: 0
-      },
-      contextMenuShow: false,
-      contextMenuItem: null,
-      // 查看历史消息滚动定位
-      scrollHeight: 0,
-      curAudioUrl: '',
-      lastAudioItem: null,
-      readRecordStyle: '',
-      readRecordVisible: false,
-      readRecordList: []
-    };
-  },
-  computed: {
-    ...mapGetters([
-      'userInfo',
-      'currentTab',
-      'isAppendMsg',
-      'message',
-      'msgList',
-      'sessionId',
-      'serviceId',
-      'scrollTo',
-      'isServer',
-      'clientId',
-      'sessionEnd',
-      'assemblyId',
-      'footerMessage',
-      'portraitPanelParams',
-      'assemblySetting',
-      'clientParams',
-      'onChating',
-      'classify',
-      'collapsed',
-      'barStatus',
-      'sessionHistoryList',
-      'enable',
-      'appendList',
-      'queueItem',
-      'isRecorderVoice'
-    ]),
-    orgId() {
-      const getters = this.store.getters;
-      return this.isServer ? this.userInfo?.sysParams?.orgId : getters.accessParams.orgId || getters.queryParams.orgId;
-    },
-    userId() {
-      const getters = this.store.getters;
-      return this.isServer ? this.userInfo?.sysParams?.userId : getters.accessParams.userId || getters.chatUserId || getters.queryParams.userId;
-    },
-    enableReadRecord() {
-      return this.assemblySetting?.readStatus === 'Y';
-    },
-    customerStaffIcon() {
-      return this.robotAvatar || customerStaffIcon;
-    },
-    selectedSession() {
-      let sessionMap = this.sessionHistoryList.find(item => item.fromId === this.serviceId);
-      if (sessionMap) {
-        return sessionMap.id + '-' + sessionMap.fromId;
-      }
-      return '';
-    },
-    isListClassify() {
-      return this.assemblySetting.isListClassify === 'Y';
-    },
-    showPanel() {
-      return this.assemblySetting.portraitPanelSetting?.targetIs;
-    },
-    showBroadcast() {
-      let res = (!this.isServer && this.assemblySetting?.broadcast?.PC?.isChecked == 'Y' && this.assemblySetting?.broadcast?.PC?.list?.length > 0) || false;
-      return res;
-    },
-    broadcastCarousel() {
-      return (this.assemblySetting.broadcast && this.assemblySetting.broadcast.PC.list.length == 1) || false;
-    },
-    rightClickSetting() {
-      const { isServer } = this;
-      if (!isServer) return [];
-      const isSelf = this.contextMenuItem.fromId === this.serviceId;
-      const setting = this.assemblySetting?.rightClickSetting || [];
-      const doArr = ['resend', 'rollBack'];
-      return setting.filter(item => {
-        const { rightClickDo } = item;
-        return isSelf || doArr.indexOf(rightClickDo) < 0;
-      });
-    },
-    handleReCall() {
-      return function(item) {
-        if (item.content?.source === 1) {
-          return '[点击回拨]';
-        } else if (item.senderFlag == 1) {
-          return `[点击${this.isServer ? '回拨' : '重拨'}]`;
-        }
-        if (item.senderFlag == 2) {
-          return `[点击${this.isServer ? '重拨' : '回拨'}]`;
-        }
-        if (this.isServer) {
-          let isRight = item.fromId !== 'SYSTEM' && item.fromId && item.fromId === this.serviceId;
-          return `[点击${isRight ? '重拨' : '回拨'}]`;
-        } else {
-          let isRight = (item.fromId !== 'SYSTEM' && item.toId === 'SYSTEM') || item.fromId === this.clientId || (item.mode === 'bot' && !item.fromId);
-          return `[点击${isRight ? '重拨' : '回拨'}]`;
-        }
-      };
-    },
-    handleRecallFlag() {
-      return function(item) {
-        return this.serviceId == item.fromId;
-      };
-    },
-    AudioStyle() {
-      return function(item) {
-        let { duration = 1 } = item.content;
-        if (!duration) {
-          duration = 1;
-        }
-        let curWidth = (+duration / 60) * 400;
-        return {
-          width: curWidth < 13 ? 13 : curWidth + 'px'
-        };
-      };
-    },
-    showTimeDuration() {
-      let { variableSetting = null } = this.assemblySetting || {};
-      if (!variableSetting) return 3;
-      let matchItem = variableSetting.find(v => v.name === 'CHAT_SEPARATION_TIME');
-      if (!matchItem) return 3;
-      if (!+matchItem.value) return 3;
-      return +matchItem.value;
-    },
-    images() {
-      return this.msgList
-        .filter(v => !v.recallFlag && v.content.type == 1)
-        ?.map(v => v.content?.content);
-    }
-  },
-  created() {
-    this.attachEvent();
-  },
-  methods: {
-    ...mapMutations([
-      'setIsAppendMsg',
-      'setMsgList',
-      'setScrollTo',
-      'setFooterMessage',
-      'setIsScrollListChange',
-      'setListChangeItem',
-      'setSessionId',
-      'setOnChating',
-      'setServiceId',
-      'setShowAudio',
-      'setVideoMode',
-      'setVideoMembers',
-      'setIsRecorderVoice'
-    ]),
-    ...mapActions({
-      getEarlierMsg: 'setMsgList',
-      handleBotChat: 'handleBotChat',
-      sendMessage: 'sendMessage'
-    }),
-    getMessageItemClass(item) {
-      // content.source === 1, 代表为系统消息, 系统统一左侧展示
-      if (item.content?.source === 1) {
-        return {
-          left: true
-        };
-      }
-
-      // 服务端 senderFlag 1 左 2 右
-      // 客户端 senderFlag 1 右 2 左
-      if (item.content?.source === 1) {
-        return {
-          left: true
-        };
-      } else if (item.senderFlag == 1) {
-        if (this.isServer) {
-          return {
-            left: true
-          };
-        } else {
-          return {
-            right: true
-          };
-        }
-      }
-      if (item.senderFlag == 2) {
-        if (this.isServer) {
-          return {
-            right: true
-          };
-        } else {
-          return {
-            left: true
-          };
-        }
-      }
-      if (this.isServer) {
-        return {
-          right: item.fromId !== 'SYSTEM' && item.fromId && item.fromId === this.serviceId,
-          left: item.fromId === 'SYSTEM' || item.fromId === this.clientId || item.content?.source === 1 || !item.fromId
-        };
-      } else {
-        let isRight, isLeft;
-        if (this.curChatType == 'robot') {
-          isRight = item.fromId !== 'SYSTEM';
-          isLeft = item.fromId === 'SYSTEM';
-        } else {
-          isRight = (item.fromId !== 'SYSTEM' && item.toId === 'SYSTEM') || item.fromId === this.clientId || (item.mode === 'bot' && !item.fromId);
-          isLeft = item.fromId === 'SYSTEM' || item.fromId !== this.clientId || item.content?.source === 1;
-        }
-        return {
-          right: isRight,
-          left: isLeft
-        };
-      }
-    },
-    /* 向上滚动刷新 */
-    handleInfiniteOnLoad() {
-      if (this.curChatType === 'robot') return;
-      this.loading = true;
-      this.getEarlierMsg().then(msg => {
-        if (msg) {
-          this.$message.info(msg);
-        }
-        this.loading = false;
-      });
-    },
-    inited(viewer) {
-      this.$viewer = viewer;
-    },
-    show(item) {
-      const src = item.content.content;
-      // this.images = vexutils.imgs2imgArr(src);
-      this.$viewer.view(this.images.findIndex(v => v === src));
-      this.$viewer.show();
-      this.readSingleMsg(item);
-    },
-    /* 滚动条定位 */
-    handleScrollTo(scrollTo) {
-      let target = this.$refs['message-wrapper'];
-      this.$nextTick().then(() => {
-        if (!target) return;
-        let top = target.scrollHeight;
-        if (scrollTo === 'current') {
-         top = target.scrollHeight - this.scrollHeight;
-        }
-        if(typeof scrollTo === 'number') {
-          top = scrollTo;
-        }
-        target.scrollTo({
-          left: 0,
-          top,
-          behavior: 'instant'
-        });
-        this.scrollHeight = 0;
-      });
-      this.setScrollTo('');
-    },
-
-    /**
-     * 是否需要显示时间
-     */
-    isNeedShowTime(item, index) {
-      const curMsgTime = item.createdTime || new Date().getTime();
-      let duration = 60 * 1000 * this.showTimeDuration;
-      let lastMsgTime;
-      if (index == 0) {
-        lastMsgTime = 0;
-      } else {
-        lastMsgTime = this.msgList[index - 1].createdTime;
-      }
-      if (Number(curMsgTime) - Number(lastMsgTime) > duration) {
-        return true;
-      } else {
-        return false;
-      }
-    },
-    formatDate(date) {
-      return vexutils.formatDate(date, true);
-    },
-    getAvatar(item) {
-      if (item.content && item.content.source === 1) {
-        return require('../img/system_message.png');
-      }
-      if (item.mode === 'bot' && !item.fromId) {
-        return require('../img/default.png');
-      }
-      if (this.isServer) {
-        if (item.fromId === this.clientId || !item.fromId) {
-          return require('../img/default.png');
-        } else {
-          return this.customerStaffIcon;
-        }
-      } else {
-        if (this.curChatType == 'robot') {
-          if (item.fromId === 'SYSTEM') {
-            return this.customerStaffIcon;
-          } else {
-            return require('../img/default.png');
-          }
-        } else {
-          if (item.fromId !== this.clientId) {
-            return this.customerStaffIcon;
-          } else {
-            return require('../img/default.png');
-          }
-        }
-      }
-    },
-    getContent(item) {
-      let content;
-      if (vexutils.isJSON(item.content.content)) {
-        content = JSON.parse(item.content.content);
-      } else {
-        content = item.content.content;
-      }
-      return content;
-    },
-    getTemplateTitle(item) {
-      return this.getContent(item)?.title;
-    },
-    showArrow(item) {
-      let setting = this.getContent(item)?.customerSetting || {};
-      if (this.isServer) {
-        setting = this.getContent(item)?.serverSetting || {};
-      }
-      let { address } = setting;
-      if (!address) return false;
-      return true;
-    },
-    getTemplateTitleIcon(item) {
-      return this.getContent(item)?.icon;
-    },
-    getTemplateContent(item) {
-      let content = this.getContent(item);
-      let array = [];
-      try {
-        array = content.content.split('##');
-      } catch {
-        console.log(content, 'error');
-      }
-      array = array.map(item => `<div>${item}</div>`);
-      return array.join('');
-    },
-    getSystemMsgContent(item) {
-      let content = this.getContent(item);
-      let array = [];
-      try {
-        array = content.content.split('##');
-      } catch {
-        console.log(content, 'error');
-      }
-      return array.join('<br>');
-    },
-    getTemplateButton(item) {
-      let content = this.getContent(item);
-      const setting = this.isServer ? content.serverSetting : content.customerSetting;
-      return setting?.toolbar_button || [];
-    },
-    // 处理模板按钮,详情等跳转
-    handleTemplate(data, dispatch = true) {
-      let { targetType, address, params = [], openMode } = data;
-      dispatch &&
-        this.dispatchEvent('click_templateCard', {
-          ...data
-        });
-      if (!address) return;
-      if (targetType === 'LINK_ADDRESS') {
-        let urlParams = [];
-        params.forEach(({ p_name, p_value }) => {
-          urlParams.push(`${p_name}=${p_value}`);
-        });
-        if (address.includes('?')) {
-          address += `&${urlParams.join('&')}`;
-        } else {
-          address += `?${urlParams.join('&')}`;
-        }
-        if (openMode === 'WINDOW') {
-          window.open(address);
-          return;
-        }
-        if (openMode === 'EJECT') {
-          this.modalShow = true;
-          this.modalData = Object.assign({}, data, {
-            address
-          });
-          return;
-        }
-      }
-    },
-    handleTemplateDetail(item) {
-      let content = this.getContent(item) || {};
-      let setting = content.customerSetting || {};
-      if (this.isServer) {
-        setting = content.serverSetting || {};
-      }
-      this.readSingleMsg(item);
-      this.handleTemplate(setting);
-    },
-    handleTemplateButton(btn) {
-      this.handleTemplate(btn);
-    },
-    // 消息撤回
-    handleRecall(item) {
-      let params = {
-        assemblyId: this.assemblyId,
-        sessionId: this.sessionId,
-        messageId: item.id,
-        messageType: item.content?.type,
-        userId: this.userInfo?.sysParams?.userId || ''
-      };
-
-      fetch.post('/chat/service/recallMessage', qs.stringify(params)).then(({ data }) => {
-        if (data.result === 'SUCCESS') {
-          this.dispatchEvent('msg_recallSuccess', {
-            message: { ...item },
-            ...params
-          });
-          this.$set(item, 'recallFlag', 1);
-          // 撤回成功提示
-          let title = this.getContent(item)?.title;
-          let text = title ? `已撤回[${title}]` : '已撤回';
-          this.$message.success(text);
-
-          if (!this.isLastMessage(item.id)) return;
-          this.setIsScrollListChange(true);
-          this.setListChangeItem({
-            opt: 1,
-            from: this.clientId,
-            sessionId: this.sessionId,
-            msgCount: 0,
-            lastContentRecallFlag: 1,
-            lastContent: vexutils.clone(item.content, true),
-            lastTime: new Date().getTime()
-          });
-        } else {
-          this.$message.error(data.resultMsg);
-        }
-      });
-    },
-    handleJumpUrl(contextMenuItem, item) {
-      const title = item.rightClickName;
-      const url = item.rightClickUrl.replace(/{(.*?)}/g, (match, p) => {
-        return eval(p);
-      });
-      this.dispatchEvent('open_jumpUrl', {
-        title: title,
-        url: url
-      });
-    },
-    // 右键菜单功能
-    handleRightClick(contextMenuItem, item) {
-      if (item.rightClickDo === 'rollBack') {
-        this.handleRecall(contextMenuItem);
-      } else if (item.rightClickDo === 'jumpUrl') {
-        this.handleJumpUrl(contextMenuItem, item);
-      } else if (item.rightClickDo === 'resend') {
-        this.resendMessage(contextMenuItem);
-      }
-    },
-    resendMessage(item) {
-      fetch({
-        method: 'POST',
-        url: '/chat/service/resendMessage',
-        data: qs.stringify({
-          assemblyId: this.assemblyId,
-          sessionId: this.sessionId,
-          messageId: item.id
-        })
-      });
-    },
-    // 重新编辑
-    reEditMessage(item) {
-      if (item.content?.type === 4) {
-        let content = this.getContent(item);
-        this.handleTemplate(content.serverSetting.reEditSetting, false);
-        return;
-      }
-      this.setFooterMessage(this.footerMessage + item.content.content.slice(5, -6));
-    },
-    observeMsg() {
-      if (this.enableReadRecord) {
-        if (!this._observer) {
-          this._observer = new ObserverScroll(this.$refs['message-wrapper'], this.readMsg);
-          this.$on('hook:beforeDestroy', () => {
-            this._observer.remove();
-            this._observer = null;
-          });
-        }
-        this._observer.disconnect();
-        if (this.msgList.length) {
-          this.$nextTick(() => {
-            const el = this.$refs['message-wrapper'];
-            const els = el?.querySelectorAll('.message-item.left');
-            els && this._observer.observe(Array.from(els).filter(item => item.getAttribute('data-rid')));
-          });
-        }
-      }
-    },
-    readMsg(ids, enableVaid = true, notify = true, post = true) {
-      const msgList = this.msgList;
-      const idKeys = msgList.reduce((obj, item, i) => {
-        const id = item?.id;
-        if (id) obj[id] = i;
-        return obj;
-      }, {});
-      const data = [];
-      const validFn = (item, type) => {
-        /**
-         * 针对文本、表情消息类型，只要在聊天区域内，视为已读，
-         * 图片、语音类型消息，需要点击查看后，才视为已读，
-         * 模板 类型消息，如果没有详情链接，只要在聊天区域内，视为已读，若有详情链接，需要点击查看后，才视为已读
-         */
-        const jumpType = `,6,1,`;
-        if (jumpType.includes(type)) return false;
-        if (type == 4 && !this.isDescribeMsg(item)) {
-          let content = this.getContent(item) || {};
-          let setting = (this.isServer ? content.serverSetting : content.customerSetting) || {};
-          return !setting?.address;
-        }
-        return true;
-      };
-      const value = ids.filter(id => {
-        const i = idKeys[id];
-        let item = msgList[i];
-        if (item) {
-          const type = item.content.type;
-          if (!enableVaid || validFn(item, type)) {
-            item.readStatus = 'Y';
-            data.push({ id, type });
-            return true;
-          }
-          return false;
-        }
-      });
-      if (!value.length) return;
-      notify &&
-        this.dispatchEvent('msg_readed', {
-          data,
-          assemblyId: this.assemblyId,
-          sessionId: this.sessionId
-        });
-      post && this.postReadMessage({ ids: value.join(',') });
-    },
-    postReadMessage(data) {
-      fetch.post(
-        `/chat/${this.isServer ? 'service' : 'access'}/readMessage`,
-        qs.stringify({
-          assemblyId: this.assemblyId,
-          orgId: this.orgId,
-          userId: this.userId,
-          sessionId: this.sessionId,
-          ...data
-        })
-      );
-    },
-    readSingleMsg(item) {
-      if (this.enableReadRecord && item.readStatus === 'N') {
-        const cls = this.getMessageItemClass(item);
-        if (!cls?.left) return;
-        this.readMsg([item.id], false);
-      }
-    },
-    closeReadRecord() {
-      this.readRecordVisible = false;
-      this.readRecordList = [];
-    },
-    openReadRecord(event, item) {
-      const readStatus = item.readStatus;
-      if (readStatus) {
-        const cls = this.getMessageItemClass(item);
-        if (!cls.right) return;
-        const rect = event.target.getBoundingClientRect();
-        const w = 440;
-        const h = 340;
-        const top = Math.max(0, Math.min(document.body.clientHeight - h, rect.top - h / 2));
-        const left = Math.max(0, Math.min(document.body.clientWidth - w, rect.left - w));
-        fetch({
-          url: `/chat/${this.isServer ? 'service' : 'access'}/getMessageMember`,
-          method: 'get',
-          params: {
-            assemblyId: this.assemblyId,
-            messageId: item.id,
-            orgId: this.isServer ? undefined : this.orgId
-          }
-        }).then(res => {
-          const list = res.data?.list || [];
-          this.readRecordStyle = `top:${top}px;left:${left}px;position:fixed;z-index:10`;
-          this.readRecordVisible = list.length > 0;
-          this.readRecordList = Object.freeze(list);
-          if (item.readStatus && list.length) {
-            const unread = list.filter(item => item.readStatus == 'N').length;
-            const single = list.length < 2;
-            const status = unread > 0 ? (single ? 'N' : `${unread}`) : single ? 'Y' : 'ALL';
-            //  检查是否更新人数
-            if (item.readStatus != status) {
-              item.readStatus = status;
-            }
-          }
-        });
-      }
-    },
-    isLastMessage(id) {
-      return this.msgList.findIndex(msg => msg.id === id) === this.msgList.length - 1;
-    },
-    isSystemMsg(item) {
-      return item.content.type == 4 && this.getContent(item).styleId == '2';
-    },
-    isDescribeMsg(item) {
-      return this.getContent(item).styleId == '3';
-    },
-    async handleOpenPortraitPanel(item) {
-      if (!this.showPanel || item.fromId === this.serviceId || !this.isServer || !this.isShowPortraitPanel) return;
-      const { portraitPanelParams, clientParams } = this;
-      const panelSetting = this.assemblySetting?.portraitPanelSetting;
-      this.dispatchEvent('open_portraitPanel', {
-        panelSetting,
-        clientParams,
-        panelParams: portraitPanelParams,
-        targetId: panelSetting?.targetId,
-        targetType: panelSetting?.targetType
-      });
-    },
-    handleContextmenu(e, item) {
-      // 系统消息,客户消息,待接入消息,历史消息不允许撤回
-      // 模板-描述消息禁用右键
-      if (item.content?.source === 1 || !this.sessionId || (this.sessionId && !this.onChating) || (item.content.type === 4 && this.isDescribeMsg(item))) return;
-      this.contextMenuItem = item;
-      if (this.rightClickSetting.length < 1) return;
-      e.preventDefault();
-      let left = e.pageX + 'px';
-      let top = e.pageY + 'px';
-      this.contextMenuStyle = Object.assign(this.contextMenuStyle, {
-        top,
-        left
-      });
-      this.contextMenuShow = true;
-    },
-    scrollEvent(e) {
-      console.log("e.target.scrollTop->", e.target.scrollTop);
-      this._scrollTop = e.target.scrollTop;
-    },
-    /* 事件绑定 */
-    attachEvent() {
-      this.scrollEvent = vexutils.debounce(this.scrollEvent, 800);
-      const handleClick = () => {
-        this.contextMenuShow = false;
-      };
-      const handleRasize = () => {
-        if (this.readRecordVisible) {
-          let style = this.readRecordStyle;
-          const top = style.match(topReg)?.[1];
-          const topReg = /top:([\d.]+)/;
-          const maxH = document.body.clientHeight - 360;
-          if (top && maxH < top) {
-            style = style.replace(topReg, `top:${maxH}`);
-          }
-          const leftReg = /left:([\d.]+)/;
-          const left = style.match(leftReg)?.[1];
-          const maxW = document.body.clientWidth - 440;
-          if (left && maxW < left) {
-            style = style.replace(leftReg, `left:${maxW}`);
-          }
-          this.readRecordStyle = style;
-        }
-      };
-      window.addEventListener('resize', handleRasize);
-      document.addEventListener('click', handleClick);
-      this.registerEvent('openPortraitPanel', this.handleOpenPortraitPanel);
-      const readMessage = data => {
-        this.readMsg(data.ids.split(','), false, false, false);
-        this.postReadMessage(data);
-      };
-      this.registerEvent('readMessage', readMessage);
-      this.$on('hook:beforeDestroy', () => {
-        window.removeEventListener('resize', handleRasize);
-        document.removeEventListener('click', handleClick);
-        this.unregisterEvent('openPortraitPanel', this.handleOpenPortraitPanel);
-        this.unregisterEvent('readMessage', readMessage);
-      });
-    },
-    goToBroadcastLink(item) {
-      if (!item.url) return;
-      window.open(item.url);
-    },
-    /**
-     * 客服切换
-     */
-    handleSessionIdChange(e) {
-      let [sessionId, serviceId] = e.target.value.split('-');
-      this.setSessionId(sessionId);
-      this.setServiceId(serviceId);
-      let isOnChating = this.sessionHistoryList.find(item => item.fromId === serviceId).onChating;
-      this.setOnChating(!!isOnChating);
-      this.setMsgList([]);
-      this.getEarlierMsg();
-    },
-    handleSendFail(item) {
-      this.sendMessage(Object.assign(item.content, { failItem: item }));
-    },
-    reCall(type) {
-      this.setShowAudio(true);
-      this.setVideoMode(type === 'voice' ? 1 : 2);
-      this.$nextTick(() => {
-        this.setVideoMembers([]);
-      });
-    },
-    playAudio(item) {
-      let { content = '' } = item?.content || {};
-      if (!content) return;
-      if (this.lastAudioItem && (item.id !== this.lastAudioItem.id || item.createdTime !== this.lastAudioItem.createdTime)) {
-        this.$set(this.lastAudioItem.content, 'isPlay', false);
-      }
-
-      this.readSingleMsg(item);
-      this.lastAudioItem = item;
-      this.$set(item.content, 'isPlay', !item.content.isPlay);
-      this.$nextTick(() => {
-        this.curAudioUrl = content;
-        let audioRef = this.$refs['audio'];
-        if (!audioRef) return;
-        audioRef.load();
-        setTimeout(() => {
-          if (item.content.isPlay) {
-            let playPromise = audioRef.play();
-            if (playPromise !== undefined) {
-              playPromise.then(() => {
-                audioRef.play();
-              });
-            }
-          } else {
-            audioRef.pause();
-            this.curAudioUrl = '';
-          }
-        });
-      });
-    },
-    audioEnd() {
-      if (!this.lastAudioItem) return;
-      this.$set(this.lastAudioItem.content, 'isPlay', false);
-    },
-    getRecallText(item, flag = false) {
-      return getRecallText(this, item, flag);
-    }
-  },
-  directives: {
-    InfiniteScroll
-  },
-  components: {
-    AModal: Modal,
-    [Layout.Content.name]: Layout.Content,
-    [Spin.name]: Spin,
-    [Icon.name]: Icon,
-    [Popconfirm.name]: Popconfirm,
-    [Radio.Button.name]: Radio.Button,
-    [Radio.Group.name]: Radio.Group,
-    [Carousel.name]: Carousel,
-    SvgIcon,
-    MsgPrescription,
-    ReadStatus,
-    ReadRecord,
-    MsgPicture,
-    MsgDescribe,
-    chatHeader,
-    Viewer
-  },
-  watch: {
-    msgList() {
-      this.observeMsg();
-    },
-    isAppendMsg: {
-      immediate: true,
-      handler(isAppendMsg) {
-        if (isAppendMsg) {
-          let newArr = [];
-          if (vexutils.isPlainObject(this.message)) {
-            newArr = [...this.msgList, this.message];
-          } else if (vexutils.isArray(this.message)) {
-            newArr = [...this.msgList, ...this.message];
-          }
-          this.setMsgList(newArr);
-          this.setIsAppendMsg(false);
-          this.setScrollTo('bottom');
-        }
-      }
-    },
-    scrollTo: {
-      immediate: true,
-      handler(scrollTo) {
-        if (scrollTo) {
-          this.handleScrollTo(scrollTo);
-        }
-      }
-    },
-    activatedTime: {
-      immediate: true,
-      handler(value) {
-        this.handleScrollTo(this._scrollTop);
-      }
-    },
-    /**
-     * 图片懒加载处理
-     */
-    appendList: {
-      handler() {
-        if (!this.scrollHeight) {
-          let target = this.$refs['message-wrapper'];
-          this.scrollHeight = target.scrollHeight;
-        }
-        if (this.appendList.length === this.msgList.length || this.appendList.length === 1) {
-          this.setScrollTo('bottom');
-        } else {
-          this.setScrollTo('current');
-        }
-      }
-    },
-    isRecorderVoice: {
-      immediate: true,
-      handler(val) {
-        if (!val) return;
-        this.curAudioUrl = '';
-        this.setIsRecorderVoice(false);
-        if (!this.lastAudioItem) return;
-        this.$set(this.lastAudioItem.content, 'isPlay', false);
-      }
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-@import '../style/emoji.css';
-@import '../style/message.mixin.less';
-.message-wrapper {
-  .createMessageStyle(#ebebeb, @primary-color);
-  flex: 1;
-  height: 0;
-  // position: relative;
-  display: flex;
-  flex-direction: column;
-  overflow-x: hidden;
-  .broadcast-wrap {
-    height: 30px;
-    text-align: center;
-    font-size: 14px;
-    background-color: #fffbe8;
-    /deep/ .carousel-item {
-      display: inline-flex !important;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      height: 30px;
-      text-align: center;
-      &.has-link {
-        color: #ed6a0c;
-        cursor: pointer;
-      }
-      span {
-        display: inline-block;
-        max-width: calc(100% - 30px);
-        margin-left: 4px;
-      }
-    }
-  }
-
-  .loading-icon {
-    position: absolute;
-    top: 0;
-    left: 50%;
-  }
-}
-/deep/ .ant-layout-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-}
-.online-message {
-  flex: 1;
-  height: 100%;
-  // height: 608px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 10px 22px;
-  // margin: 10px 0;
-  text-align: center;
-  &::-webkit-scrollbar {
-    width: 5px;
-  }
-  .message-time {
-    display: inline-block;
-    color: #666;
-    font-size: 14px;
-    border-radius: 4px;
-    padding: 4px;
-    margin: 0 auto;
-    margin-bottom: 16px;
-  }
-  > div {
-    margin-bottom: 16px;
-  }
-  .message-item {
-    display: flex;
-    /deep/ .chat-read-status-text {
-      display: none;
-    }
-    &.right.read-status {
-      padding-bottom: 24px;
-      position: relative;
-      /deep/ .chat-read-status-text {
-        display: block;
-        position: absolute;
-        right: 50px;
-        bottom: 0;
-      }
-    }
-    .right-time {
-      display: none;
-      position: absolute;
-      top: -16px;
-      left: 10px;
-      font-size: 12px;
-      color: #b0b1b1;
-      white-space: nowrap;
-    }
-
-    .content-wrap {
-      padding: 0 10px;
-      text-align: left;
-      position: relative;
-      &:hover {
-        .right-time {
-          display: block;
-        }
-      }
-
-      .robot-item {
-        text-align: left;
-        a {
-          text-decoration: underline;
-        }
-      }
-      .intention-wrap {
-        display: flex;
-        flex-wrap: wrap;
-        padding: 8px 0 4px 0;
-        background-color: #fff;
-        border-radius: 0 0 8px 8px;
-        > div {
-          display: inline-flex;
-          flex-direction: column;
-          align-items: center;
-          width: 60px;
-          height: 54px;
-          cursor: pointer;
-
-          &:hover {
-            color: #5585f5;
-            span {
-              color: #5585f5;
-            }
-          }
-        }
-        span {
-          margin-top: 8px;
-          max-width: 90%;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-          font-size: 12px;
-          color: #6a6a6a;
-        }
-      }
-      .dictionary-ul {
-        padding-top: 8px;
-        display: flex;
-        flex-wrap: wrap;
-        li {
-          padding: 4px 16px;
-          margin-right: 16px;
-          font-size: 14px;
-          color: #5585f5;
-          background: #efefef;
-          border-radius: 16px;
-          cursor: pointer;
-        }
-      }
-      .client-btn {
-        display: inline-block;
-        padding: 4px 8px;
-        margin-top: 8px;
-        color: #fff;
-        font-size: 12px;
-        border-radius: 20px;
-        background: #5585f5;
-        cursor: pointer;
-      }
-      .re-call {
-        cursor: pointer;
-        color: #5585f5;
-      }
-      .voice-bg {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        img {
-          mix-blend-mode: difference;
-          display: inline-block;
-          width: 14px;
-        }
-        .voice-text {
-          display: inline-block;
-        }
-        span {
-          margin-left: 8px;
-        }
-      }
-    }
-    .has-dictionary {
-      padding: 0;
-      text-align: left;
-      background: unset;
-    }
-    .content {
-      padding: 10px;
-      background: #ebebeb;
-      border-radius: 0px 8px 8px 8px;
-      max-width: 500px;
-      margin: 0px;
-      line-height: 20px;
-      font-size: 14px;
-      color: #000;
-      text-align: left;
-      word-break: break-word;
-      /deep/ p {
-        margin: 0;
-      }
-    }
-    .upload-image {
-      margin-left: 8px;
-    }
-    &.right {
-      flex-direction: row-reverse;
-      .right-time {
-        left: unset;
-        right: 10px;
-      }
-      .content-wrap {
-        text-align: right;
-        .robot-item {
-          text-align: right;
-        }
-        .voice-bg {
-          flex-direction: row-reverse;
-          align-self: flex-end;
-          img {
-            transform: rotateY(180deg);
-          }
-          span {
-            margin-left: 0;
-            margin-right: 8px;
-            text-align: right;
-          }
-        }
-      }
-      .content-wrap .content {
-        background-color: #e7f0ff;
-        border-radius: 8px 0px 8px 8px;
-        border: 1px solid #e7f0ff;
-        box-sizing: border-box;
-      }
-      .upload-image {
-        margin-right: 8px;
-      }
-    }
-  }
-  .bot-message {
-    display: block;
-    text-decoration: underline;
-    color: #5585f5;
-    cursor: pointer;
-  }
-  .session-end {
-    display: flex;
-    justify-content: center;
-    margin-top: 15px;
-    margin-bottom: 25px;
-    .end {
-      display: flex;
-      justify-content: center;
-      width: 30%;
-      height: 36px;
-      line-height: 36px;
-      background-color: #e8e8e8;
-      color: #939393;
-      font-size: 14px;
-      border-radius: 18px;
-    }
-  }
-  .menu-tip {
-    font-size: 20px;
-    align-self: flex-end;
-    margin-bottom: 8px;
-    background: #f6f6f6;
-    height: 25px;
-    line-height: 25px;
-    width: 30px;
-    border-radius: 4px;
-  }
-  .menu-item {
-    :hover {
-      background: red;
-    }
-  }
-  .menu-main {
-    width: 100px;
-    background-color: #101627;
-    color: #fff;
-    text-align: left;
-    border-radius: 6px;
-    padding: 10px 0;
-    z-index: 3000;
-    cursor: pointer;
-    .menu-item {
-      padding: 0 10px;
-    }
-    .menu-item:hover {
-      background-color: #efefef;
-      color: #000;
-    }
-  }
-  .first-name {
-    width: 40px;
-    height: 40px;
-    line-height: 40px;
-    text-align: center;
-    background: #5585f5;
-    color: #fff;
-    border-radius: 100%;
-    font-size: 15px;
-  }
-  .msg-avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-
-    object-fit: cover;
-    background: #fff;
-  }
-  /deep/ .ant-spin-spinning {
-    display: flex;
-    align-items: center;
-  }
-  .system-msg {
-    margin: 10px 0;
-    text-align: left;
-    line-height: 20px;
-    word-wrap: break-word;
-    display: flex;
-    justify-content: center;
-    .system-icon {
-      font-size: 18px;
-      color: #ffc200;
-      vertical-align: middle;
-      margin-right: 10px;
-      margin-top: 1px;
-    }
-    .system-btn {
-      color: @primary-color;
-      margin-left: 8px;
-      cursor: pointer;
-      text-decoration: underline;
-    }
-  }
-}
-/deep/ p {
-  margin-bottom: 0;
-}
-</style>