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

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

@@ -1,1229 +0,0 @@
-<script>
-import Grid from '~/grid';
-import infiniteScroll from 'vue-infinite-scroll';
-import { mapGetters, mapMutations, mapActions } from '../store/helper';
-import { getRecallText } from '../utils';
-import Avatar from '../components/avatar';
-import vexutils, { moment } from '@/utils/vexutils';
-import fetch, { qs } from '@/utils/chatFetch';
-import { Popover, Spin, Tooltip } from 'ant-design-vue';
-import SvgIcon from '@/component/svg/index.vue';
-
-export default {
-  inject: ['store', 'i18nText', 'dispatchEvent'],
-  components: {
-    [Tooltip.name]: Tooltip,
-    [Spin.name]: Spin,
-    [Popover.name]: Popover,
-    [Grid.name]: Grid,
-    SvgIcon,
-    Avatar
-  },
-  data() {
-    return {
-      scrollList: [],
-      defaultAvatar: require('../img/default.png'),
-      busy: false,
-      pageSize: 20,
-      pageNum: 1,
-      infiniteMsgShow: true
-    };
-  },
-  computed: {
-    ...mapGetters(['userInfo']),
-    ...mapGetters([
-      'assemblyId',
-      'classify',
-      'isScrollListChange',
-      'listChangeItem',
-      'currentTab',
-      'sessionId',
-      'keywords',
-      'searchKeywords',
-      'enable',
-      'panelParams',
-      'assemblySetting',
-      'clientId',
-      'clientParams',
-      'serviceId',
-      'msgList',
-      'queueItem'
-    ]),
-    foldTheme() {
-      return this.theme === 'fold';
-    },
-    tableTheme() {
-      return this.theme === 'table';
-    },
-    classifyIcon() {
-      const { classify, assemblySetting } = this;
-      if (!classify) return '';
-      const isListClassify = assemblySetting?.isListClassify === 'Y';
-      const target = isListClassify ? assemblySetting?.listClassify?.find(item => item.classify === classify) : null;
-      return target?.icon;
-    },
-    isListClassify() {
-      return this.assemblySetting.isListClassify === 'Y';
-    },
-    tabChange() {
-      let { searchKeywords, classify } = this;
-      return {
-        searchKeywords,
-        classify
-      };
-    },
-    tableColumns() {
-      const tableLayout = this.assemblySetting?.listLayoutSetting?.tableLayout;
-      if (tableLayout && tableLayout.length) {
-        const htmlField = ['${lastContent}'];
-        return tableLayout.map((item, i) => {
-          let { title = '', name = '' } = item;
-          title = title || name;
-          const w = Math.max((title?.length || 1) * 14 + 22, 60);
-          const key = name || i;
-          const data = {
-            ...item,
-            title,
-            // width: w,
-            field: `_${key}_`,
-            showHeaderOverflow: true,
-            showOverflow: true
-          };
-          if (htmlField.includes(item.value) || item.mapping?.length > 0) {
-            data.type = 'html';
-          }
-          return data;
-        });
-      }
-      return [];
-    },
-    // 根据后台配置信息进行排序
-    processedScrollList() {
-      let processedScrollList = [];
-      let settingList = [];
-      if (this.tableTheme) {
-        settingList = this.tableColumns.map(item => [item.field, item]);
-      } else {
-        let setting = this.assemblySetting.listLayoutSetting || {};
-        if (setting.timeSetting) {
-          setting = Object.assign({}, setting, {
-            timeSettingTip: setting.timeSetting // 时间类型 tooltip 展示的值和原值不同 额外处理
-          });
-        }
-        settingList = Object.entries(setting);
-      }
-      let reg = /\$\{(.+)\}/;
-      const { currentTab, keywords, classify, isListClassify } = this;
-      processedScrollList = this.scrollList.reduce((list, item) => {
-        if (item.kind == 2 || !this.showScrollItem(item, currentTab, keywords, classify, isListClassify)) return list; // <- 通话记录跳过
-        const layoutData = {};
-        for (let [key, value] of settingList) {
-          const isTip = /.+Tip$/.test(key);
-          let parseValue = (value.value || '').replace(/\$\{([^}]+)\}/g, (_v, $1) => {
-            let key = $1;
-            let param;
-            if (key.startsWith('form.')) {
-              key = key.split('.')[1];
-              let params = JSON.parse(item.params || '{}');
-              param = params[key] || this.getMsgFieldValue(key, item, isTip);
-            } else {
-              param = this.getMsgFieldValue(key, item, isTip);
-            }
-            if (value.mapping) {
-              // param = this.getMappingHTML(value.mapping[param]);
-              param = this.getMappingHTML(value.mapping.find( v => v.value == param) || {});
-            }
-            return param || '';
-          });
-          layoutData[key] = parseValue;
-        }
-        list.push({ ...item, ...layoutData });
-        return list;
-      }, []);
-
-      // 排队列表排序(1.等级2.创建时间)
-      const sortTabs = ['queue', 'session'];
-      const sortKeys = ['queueSortSetting', 'sessionSortSetting'];
-      const sortIndex = sortTabs.indexOf(currentTab);
-      if (sortIndex >= 0) {
-        // 获取对应sortsetting, listSortSetting兼容旧数据
-        const sortSetting = this.assemblySetting[sortKeys[sortIndex]] || this.assemblySetting.listSortSetting;
-        if (sortSetting) {
-          let { isParams, descOrAsc, orderBy } = sortSetting;
-          orderBy = orderBy ? orderBy.replace(reg, '$1') : orderBy; // 去除 ${}
-          let hasLevel = [],
-            noLevel = [];
-          processedScrollList.forEach(item => {
-            let value;
-            if (isParams) {
-              value = JSON.parse(item.params || '{}')[orderBy];
-            } else {
-              value = item[orderBy];
-            }
-            vexutils.isUndefined(value) ? noLevel.push(item) : hasLevel.push(item);
-          });
-          hasLevel.sort((a, b) => {
-            let aLevel = JSON.parse(a.params || '{}')[orderBy] || a[orderBy];
-            let bLevel = JSON.parse(b.params || '{}')[orderBy] || b[orderBy];
-            if (aLevel === bLevel) {
-              return Number(a.createdTime) - Number(b.createdTime);
-            }
-            // return descOrAsc === 'desc' ? aLevel - bLevel : bLevel - aLevel;
-            return descOrAsc === 'desc' ? bLevel - aLevel : aLevel - bLevel;
-          });
-          noLevel.sort((a, b) => Number(a.createdTime) - Number(b.createdTime));
-          processedScrollList = [...hasLevel, ...noLevel];
-        } else {
-          processedScrollList.sort((a, b) => Number(a.createdTime) - Number(b.createdTime));
-        }
-      }
-      return processedScrollList;
-    }
-  },
-  props: {
-    // 日期过滤条件
-    dateParams: {
-      type: Array,
-      default: () => []
-    },
-    theme: {
-      type: String,
-      default: ''
-    },
-    // 默认会话id
-    defSessionId: {
-      type: [String, Number]
-    },
-    type: {
-      type: String
-    }
-  },
-  methods: {
-    ...mapMutations([
-      'setSessionId',
-      'setIsScrollListChange',
-      'setListChangeItem',
-      'setCurrentTab',
-      'setClientId',
-      'setOnChating',
-      'setClientParams',
-      'setQueueItem',
-      'setScrollTo',
-      'setSessionHistoryList',
-      'setSessionEnd',
-      'setQueueStatistic',
-      'setSessionStatistic',
-      'offlineSessionStatistic',
-      'appendList',
-      'setSessionType',
-      'setOfflineClassifyCount',
-      'setScrollQueueId',
-      'setLastClassify',
-      'setLastCurrentTab',
-      'setFooterMessage',
-      'setCurScrollItem',
-      'setDisableOperate',
-      'setClassify',
-      'setOfflineSessionStatistic'
-    ]),
-    ...mapMutations({
-      clearMsgList: 'setMsgList'
-    }),
-    ...mapActions(['setMsgList', 'setChatTimer']),
-    isActive(item) {
-      let res = this.sessionId === item.id || (item.username && item.username === this.clientId);
-      return res;
-    },
-    formatBrief(item) {
-      let { lastContentRecallFlag } = item;
-      if (lastContentRecallFlag == 1) {
-        const content = JSON.parse(item.lastContent);
-        const flag = this.serviceId == item.fromId;
-        return getRecallText(this, { content }, flag);
-      }
-      let lastItem;
-      try {
-        lastItem = JSON.parse(item.lastContent || '{}');
-      } catch {
-        console.log(item.lastContent.value);
-      }
-      if (!lastItem) return '';
-      let { type, content } = lastItem;
-      if (type === 1) {
-        return `[${this.i18nText('1.9.181')}]`;
-      } else if (type === 0) {
-        return content;
-      } else if (type === 2) {
-        // return `[${this.i18nText("1.9.388")}]`;
-        return '[视频通话]';
-      } else if (type === 5) {
-        return '[语音通话]';
-      } else if (type === 6) {
-        return '[语音消息]';
-      } else if (type === 3) {
-        return JSON.parse(content)?.type == 2 ? `[${this.i18nText('1.9.389')}]` : `[${this.i18nText('1.9.390')}]`;
-      } else if (type === 4) {
-        let title = content.title ? content.title : JSON.parse(content).title;
-        return `[${title}]`;
-      } else {
-        return '';
-      }
-    },
-    showScrollItem(item, currentTab, keywords, classify, isListClassify) {
-      if (currentTab == 'end') return true;
-      return (!keywords || (item.name || item.toName || item.title).includes(keywords)) && (item.classify === classify || !isListClassify);
-    },
-    handleInfiniteOnLoad() {
-      if (this.busy) return;
-      if (this.currentTab !== 'end') {
-        this.busy = true;
-        this.infiniteMsgShow = false;
-        return;
-      }
-      this.busy = true;
-      this.infiniteMsgShow = true;
-      // 发送请求有时间间隔第一个滚动时间结束后才发送第二个请求
-      this.pageNum++; // 滚动之后加载第二页
-      this.getScrollList(true);
-    },
-    async getScrollList(flag) {
-      switch (this.currentTab) {
-        case 'queue':
-          this.getQueueUsers();
-          break;
-        case 'session':
-          await this.getSessionList();
-          this.handleSelectItem();
-          break;
-        case 'end':
-          // this.getSessionList(flag);
-          this.getData(1, flag);
-      }
-    },
-    /* 获取会话列表 */
-    getSessionList() {
-      let params = {
-        ...this.getDateParams(),
-        assemblyId: this.assemblyId,
-        onlineType: this.currentTab === 'session' ? 1 : 0
-      };
-      if (this.isListClassify) {
-        this.assemblySetting.listClassify.forEach(item => {
-          this.$set(item, 'count', '');
-        });
-      }
-      return fetch
-        .get('/chat/service/getMySessionList', {
-          params
-        })
-        .then(({ data }) => {
-          if (data.result === 'SUCCESS') {
-            this.scrollList = data.map.list;
-            if (this.isListClassify) {
-              this.assemblySetting.listClassify.forEach(item => {
-                let count = data.map.list.filter(i => i.classify === item.classify).length;
-                this.$set(item, 'count', count);
-              });
-            }
-            if (data.map.listStatistic) {
-              if (this.currentTab === 'end') {
-                this.setOfflineSessionStatistic(data.map.listStatistic);
-              } else {
-                this.setSessionStatistic(data.map.listStatistic);
-              }
-            }
-          } else {
-            this.$message.warning(data.resultMsg);
-          }
-        });
-    },
-    async getData(type, flag) {
-      try {
-        let res = await this.handleDataRequest(type);
-        let { data = {} } = res;
-        if (data.result === 'SUCCESS') {
-          let { list = [] } = data.map;
-          if (flag) {
-            if (!list || !list.length) {
-              this.busy = true;
-              this.infiniteMsgShow = false;
-            } else {
-              this.busy = false;
-              this.scrollList = this.scrollList.concat(list);
-            }
-            return;
-          } else {
-            this.infiniteMsgShow = false;
-            this.busy = false;
-            this.scrollList = list;
-          }
-          if (this.isListClassify) {
-            this.assemblySetting.listClassify.forEach(item => {
-              let count = list.filter(i => i.classify === item.classify).length;
-              this.$set(item, 'count', count);
-            });
-          }
-          let { classifyStatistic = {} } = data.map || {};
-          if (Object.keys(classifyStatistic).length) {
-            this.setOfflineClassifyCount(classifyStatistic);
-          }
-        } else {
-          this.infiniteMsgShow = false;
-          this.$message.warning(data.resultMsg);
-        }
-        this.handleSelectItem();
-      } catch (err) {
-        this.infiniteMsgShow = false;
-        console.log(err);
-      }
-    },
-    getDateParams() {
-      let params = {};
-      const dateParams = this.dateParams;
-      if (dateParams?.length) {
-        const fmt = 'YYYY-MM-DD';
-        params.startDate = dateParams[0].format(fmt) + ' 00:00:00';
-        params.endDate = dateParams[1].format(fmt) + ' 23:59:59';
-      }
-      return params;
-    },
-    handleDataRequest(type) {
-      let url = type == 1 ? '/chat/service/getMySessionList' : '/chat/service/getQueueUsers';
-      let params = {
-        ...this.getDateParams(),
-        assemblyId: this.assemblyId,
-        pageSize: this.pageSize,
-        pageNum: this.pageNum
-      };
-      if (type == 1) {
-        params.onlineType = this.currentTab === 'session' ? 1 : 0;
-      }
-      if (this.currentTab == 'end') {
-        params.keyword = this.searchKeywords;
-        params.classify = this.classify;
-      }
-      if (this.isListClassify) {
-        this.assemblySetting.listClassify.forEach(item => {
-          this.$set(item, 'count', '');
-        });
-      }
-      return fetch.get(url, {
-        params
-      });
-    },
-    /* 获取排队列表 */
-    getQueueUsers() {
-      if (this.isListClassify) {
-        this.assemblySetting.listClassify.forEach(item => {
-          this.$set(item, 'count', '');
-        });
-      }
-      // let params = { assemblyId: this.assemblyId };
-      let params = {
-        ...this.getDateParams(),
-        assemblyId: this.assemblyId,
-      };
-      fetch
-        .get('/chat/service/getQueueUsers', {
-          params
-        })
-        .then(({ data }) => {
-          if (data.result === 'SUCCESS') {
-            this.scrollList = data.map.list;
-            if (this.isListClassify) {
-              this.assemblySetting.listClassify.forEach(item => {
-                let count = data.map.list.filter(i => i.classify === item.classify).length;
-                this.$set(item, 'count', count);
-              });
-            }
-            if (data.map.listStatistic) {
-              this.setQueueStatistic(data.map.listStatistic);
-            }
-          } else {
-            this.$message.warning(data.resultMsg);
-          }
-        });
-    },
-    /* 点击列表项 */
-    handleClick(item) {
-      this.setLastClassify(this.classify);
-      this.setLastCurrentTab(this.currentTab);
-      this.setCurScrollItem(item);
-      switch (this.type) {
-        case 'queue':
-          this.accessChat(item);
-          break;
-        case 'session':
-          this.getMsgList(item);
-          break;
-        case 'end':
-          if (item.msgCount > 0) {
-            this.cleanSessionCount(item);
-          }
-          this.getEndMsgList(item);
-      }
-      this.dispatchEvent('click_sessionListUser', JSON.parse(JSON.stringify(item)));
-    },
-    handleTableCellClick({ row }) {
-      this.handleClick(row);
-    },
-    tableRowClass({ row }) {
-      return this.isActive(row) ? 'active' : '';
-    },
-    handleTableScroll(args) {
-      let target;
-      if (this.currentTab == 'end' && !this.busy && (target = args.$event.target) && target.scrollHeight - target.clientHeight - args.scrollTop <= 10) {
-        this.handleInfiniteOnLoad();
-      }
-    },
-    cleanSessionCount(item) {
-      let params = {
-        sessionId: item.id,
-        orgId: this.userInfo?.sysParams?.orgId,
-        assemblyId: this.assemblyId
-      };
-      fetch.post('/chat/service/cleanSessionCount', qs.stringify(params)).then(({ data }) => {
-        if (data.result === 'SUCCESS') {
-          item.msgCount = 0;
-        }
-      });
-    },
-    /* 查看结束历史消息 */
-    getEndMsgList(item) {
-      let { id, toId } = item;
-      this.setClientId(toId);
-      this.setSessionId(id);
-      this.clearMsgList();
-      this.setMsgList({ validate: this.getMsgValidateFn(toId) });
-      this.setOnChating(false);
-      this.setChatTimer();
-      let clientParams = JSON.parse(item.params || '{}');
-      this.setClientParams(clientParams);
-      // this.getSessionHistoryList();
-      this.setQueueItem(null);
-    },
-    /* 客服点击会话列表进入会话, id:会话id, toId:客户id */
-    getMsgList(item) {
-      let { id, toId, params: cParams } = item;
-      let lastSessionId = this.sessionId;
-      this.setQueueItem(null);
-      item.msgCount = 0;
-      let params = {
-        sessionId: id,
-        lastSessionId,
-        assemblyId: this.assemblyId
-      };
-      // 心跳
-      fetch.post(
-        '/chat/service/sessionHeart',
-        qs.stringify({
-          assemblyId: this.assemblyId,
-          sessionId: id
-        })
-      );
-      this.setDisableOperate(true);
-      fetch
-        .post('/chat/service/accessSession', qs.stringify(params))
-        .then(({ data }) => {
-          this.setScrollQueueId('');
-          this.setSessionId(id);
-          if (data.result === 'SUCCESS') {
-            let { countdown, clientParams, sessionType, countdownDesc } = data.map;
-            this.setClientId(toId);
-            this.clearMsgList();
-            this.setMsgList({ validate: this.getMsgValidateFn(toId) });
-            this.setOnChating(true);
-            this.setChatTimer({ countdown, countdownDesc });
-            this.setSessionEnd(false);
-            this.setClientParams(clientParams || JSON.parse(cParams || '{}'));
-            this.getSessionHistoryList();
-            this.setSessionType(sessionType);
-            this.setFooterMessage('');
-          } else {
-            this.$message.warning(data.resultMsg);
-          }
-        })
-        .finally(() => {
-          this.setDisableOperate(false);
-        });
-    },
-    getMsgValidateFn(id) {
-      return () => id === this.clientId;
-    },
-    scrollToItem(sessionId) {
-      if (!sessionId) return;
-      this.$nextTick(() => {
-        const target = this.$el.querySelector(`#item_id_${sessionId}`);
-        if (!target) return;
-        target.scrollIntoView(true);
-      });
-    },
-    getSessionHistoryList() {
-      if (this.assemblySetting?.type == 'staff') return;
-      this.setSessionHistoryList([]);
-      if (this.assemblySetting.recordScopeSetting === 'CURRENT') return;
-      fetch
-        .get('/chat/service/getPastSessionList', {
-          params: { sessionId: this.sessionId }
-        })
-        .then(({ data }) => {
-          if (data.result === 'SUCCESS') {
-            let list = data.list.map(item => {
-              if (item.fromId === this.serviceId) {
-                item.onChating = true;
-              }
-              return item;
-            });
-            this.setSessionHistoryList(list);
-          }
-        });
-    },
-    /* 客服点击排队列表进入会话 */
-    accessChat(item) {
-      this.getQueueMsgList(item);
-    },
-    /* 排队消息 */
-    getQueueMsgList(item) {
-      let { bid: userId, userType, username, params: clientParams } = item;
-      let params = {
-        assemblyId: this.assemblyId,
-        userId,
-        userType,
-        relateId: JSON.parse(clientParams || '{}').relateId
-      };
-      fetch.get('/chat/service/getQueueUser', { params }).then(({ data }) => {
-        if (data.result === 'SUCCESS') {
-          const obj = data.obj || {};
-          this.currentTab === 'queue' && this.dispatchEvent('click_queueListUser', JSON.parse(JSON.stringify(obj.messages || [])));
-          let messages = (obj.messages || []).map(item => {
-            item.fromName = obj.name;
-            item.content = JSON.parse(JSON.stringify(item));
-            return item;
-          });
-          let robotMessages = this.handleRobotMessages(obj.robotMessages, obj.name);
-          this.setScrollQueueId(obj.bid);
-          this.setClientParams(JSON.parse(clientParams || '{}'));
-          this.setClientId(username);
-          this.setSessionId(null);
-          this.setSessionHistoryList([]);
-          this.clearMsgList([...robotMessages, ...messages]);
-          this.setQueueItem(item);
-          this.setChatTimer();
-          this.$nextTick(() => {
-            this.setScrollTo('bottom');
-          });
-        }
-      });
-    },
-    handleRobotMessages(robotMessages, name) {
-      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;
-        item.fromName = name;
-        return item;
-      });
-    },
-    // queue: 排队列表, session: 会话列表, end: 已结束列表
-    updateScrollList() {
-      const v = this.listChangeItem;
-      if (!v) return;
-      // 存在队列id 更新排队列表
-      if (v.queueId) {
-        this.updateQueueList();
-      } else if (v.sessionId) {
-        // 存在会话id 更新排队列表
-        this.updateSessionList();
-      } else {
-        this.updateEndList();
-      }
-    },
-    /* 更新咨询结束列表 */
-    updateEndList() {
-      let { lastTime, lastContent, opt, sessionId, username, name } = this.listChangeItem;
-      if (opt === 2) {
-        this.scrollList.unshift({
-          toId: username,
-          lastTime,
-          lastContent,
-          toName: name,
-          id: sessionId
-        });
-      }
-    },
-    /* 更新会话列表 */
-    updateSessionList() {
-      let { msgCount = undefined, lastContent, opt, from, to, sendTime, sessionId, lastTime, lastContentRecallFlag = undefined } = this.listChangeItem;
-      lastContent = vexutils.isJSON(lastContent) ? JSON.parse(lastContent) : lastContent;
-      // 0: 新增, 1: 更新, 2: 删除
-      if (opt === 0) {
-        this.scrollList.unshift(
-          Object.assign(
-            {},
-            this.listChangeItem,
-            {
-              lastContent: JSON.stringify(lastContent)
-            },
-            { id: sessionId, lastTime: sendTime, fromId: from, toId: to }
-          )
-        );
-      } else if (opt === 1) {
-        let realIndex = this.scrollList.findIndex(item => item.id === sessionId);
-        if (realIndex === -1) return;
-        let res = {
-          lastTime: sendTime || lastTime,
-          sendTime,
-          lastContentRecallFlag
-        };
-        if (lastContentRecallFlag != 1) {
-          if (msgCount !== undefined) {
-            res.msgCount = msgCount;
-          }
-          res.lastContent = JSON.stringify(lastContent);
-        }
-        let item = Object.assign({}, this.scrollList[realIndex], res);
-        this.scrollList.splice(realIndex, 1, item);
-      } else if (opt === 2) {
-        let realIndex = this.scrollList.findIndex(item => item.id === sessionId);
-        if (realIndex === -1) return;
-        this.scrollList.splice(realIndex, 1);
-      }
-    },
-    /* 更新排队列表 */
-    updateQueueList() {
-      let { sendTime, sendName, receiveName, opt, name, username, bid, msgCount, messages = [], createdTime, userType, classify, params, lastTime, lastContent } = this.listChangeItem;
-      if (messages.length === 0) {
-        messages = [{ createdTime }];
-      }
-      lastTime = lastTime || sendTime;
-      lastContent = vexutils.isPlainObject(lastContent) ? JSON.stringify(lastContent) : lastContent;
-      let current_item = {
-        sendName,
-        receiveName,
-        msgCount,
-        username,
-        bid,
-        name,
-        messages,
-        createdTime: new Date(createdTime).getTime(),
-        userType,
-        classify,
-        params,
-        lastTime: new Date(lastTime).getTime(),
-        lastContent
-      };
-      // 0: 新增, 1: 更新, 2: 删除
-      if (opt === 0) {
-        this.scrollList.unshift(current_item);
-      } else if (opt === 2) {
-        let realIndex = this.scrollList.findIndex(item => item.username == username);
-        this.scrollList.splice(realIndex, 1);
-      } else if (opt === 1) {
-        let realIndex = this.scrollList.findIndex(item => item.username == username);
-        this.scrollList.splice(realIndex, 1, current_item);
-        // 排队消息更新
-        if (this.queueItem && username === this.queueItem.username) {
-          this.clearMsgList([
-            ...this.msgList,
-            {
-              fromName: name,
-              content: Object.assign(JSON.parse(lastContent), { lastTime })
-            }
-          ]);
-          this.appendList([
-            {
-              fromName: name,
-              content: Object.assign(JSON.parse(lastContent), { lastTime })
-            }
-          ]);
-        }
-      }
-    },
-    getMappingHTML(value) {
-      if (!vexutils.isObject(value)) return value;
-      const { icon = '', desc, color } = value;
-      let str = '';
-      if (icon) {
-        str += `<svg aria-hidden="true" style="font-size 20px;width: 1em;height: 1em;" class={svg-icon}><use xlinkhref={#icon-${icon}}></use></svg>`;
-      }
-      if (desc) {
-        str += `<span style="color:#fff;padding:0 4px;${color ? 'background:' + color : ''}">${desc}</span>`;
-      }
-      return str;
-    },
-    // 获取聊天字段对应的值(部分字段需要格式化处理)
-    getMsgFieldValue(key, item, isTip = false) {
-      let val = item[key];
-      switch (key) {
-        case 'createdTime':
-        case 'lastTime':
-          val = this.formatDate(val || item.createdTime, isTip);
-          break;
-        case 'lastContent':
-          val = this.formatBrief(item);
-          break;
-      }
-      return val;
-    },
-    handleSelectItem() {
-      let sessionId = this.defSessionId;
-      if (!sessionId || this._selected) return;
-      let matchItem = this.processedScrollList.find(item => item.id === sessionId);
-      if (!matchItem) return;
-      this._selected = 1;
-      this.setClassify(matchItem.classify);
-      this.handleClick(matchItem);
-      this.$nextTick(() => {
-        const target = this.$el.querySelector(`#item_id_${sessionId}`);
-        if (!target) return;
-        target.scrollIntoView(true);
-      });
-    },
-    formatDate(date, showDetail) {
-      let input;
-      if (!isNaN(Number(date))) {
-        input = moment(Number(date));
-      } else {
-        input = moment(new Date(date));
-      }
-      if (showDetail) {
-        return input.format('YYYY年M月D日 HH:mm:ss');
-      }
-      // let input = moment(new Date(date));
-      let now = moment();
-      let today = moment(now.toArray().slice(0, 3));
-      let yestoday = moment(today).subtract(1, 'days');
-      let thisYear = moment(now.toArray().slice(0, 1));
-      let inToday = today.isBefore(input);
-      let inYestoday = input.isBetween(yestoday, today);
-      let inThisYear = thisYear.isBefore(input);
-      if (inToday) {
-        return '今天' + input.format('HH:mm');
-      } else if (inYestoday) {
-        return '昨天' + input.format('HH:mm');
-      } else if (inThisYear) {
-        return input.format('M月D日');
-      } else {
-        return input.format('YYYY年M月D日');
-      }
-      // return vexutils.formatDate(date);
-    }
-  },
-  directives: {
-    infiniteScroll
-  },
-  filters: {
-    formatName(item) {
-      if (item.title) return item.title;
-      // if (item.type == 2) {
-      //   return item.toName;
-      // }
-      return item.titleSetting;
-    },
-    formatTime(item) {
-      return item.timeSetting || item.createdTime;
-    },
-    formatCount(item) {
-      return item.msgCount || 0;
-    }
-  },
-  watch: {
-    /* 列表更新 */
-    isScrollListChange: {
-      handler(isScrollListChange) {
-        if (isScrollListChange) {
-          this.updateScrollList();
-          this.setIsScrollListChange(false);
-          this.setListChangeItem(null);
-          // 分类
-          if (this.assemblySetting.isListClassify !== 'Y') return;
-          this.assemblySetting.listClassify.forEach(item => {
-            let count = this.scrollList.filter(i => i.classify === item.classify).length;
-            this.$set(item, 'count', count);
-          });
-        }
-      }
-    },
-    dateParams() {
-      if (this.enable) {
-        if (this.currentTab === 'end') {
-          this.pageNum = 1;
-          this.getData(1);
-        } else {
-          this.getScrollList();
-        }
-      }
-    },
-    /* 组件更新 */
-    currentTab: {
-      immediate: true,
-      handler(val) {
-        if (this.enable) {
-          this.pageNum = 1;
-          if (val == 'end') return;
-          this.getScrollList();
-        }
-      }
-    },
-    tabChange: {
-      immediate: true,
-      deep: true,
-      handler(val) {
-        if (!val || !Object.keys(val).length) return;
-        if (this.currentTab != 'end') return;
-        this.pageNum = 1;
-        this.getData(1);
-      }
-    }
-  },
-  render(_h) {
-    if (this.tableTheme) {
-      return (
-        <c-grid
-          class="chat-scroll-session__table"
-          resizable
-          max-height="100%"
-          auto-resize
-          data={this.processedScrollList}
-          columns={this.tableColumns}
-          scroll-y={{ enabled: false }}
-          scroll-x={{ enabled: false }}
-          row-class-name={this.tableRowClass}
-          on-cell-click={this.handleTableCellClick}
-          on-scroll={this.handleTableScroll}
-        ></c-grid>
-      );
-    }
-    const { theme, currentTab, processedScrollList, handleInfiniteOnLoad, busy, infiniteMsgShow, foldTheme, classifyIcon } = this;
-    const isEnd = currentTab === 'end';
-    const isNoData = !processedScrollList?.length;
-    const filters = this.$options.filters;
-    const directives = [
-      {
-        name: 'infiniteScroll',
-        value: handleInfiniteOnLoad
-      }
-    ];
-    function getAvatar(item) {
-      return <Avatar className="avatar" src={item.portrait} name={item.name || item.toName || item.title || item.titleSetting} len={2} />;
-    }
-    function getContent(item, filters, fold, classifyIcon) {
-      const { formatName, formatCount } = filters;
-      const name = formatName(item);
-      const sendName = item.sendName;
-      const receiveName = item.receiveName;
-      const msgCount = item.msgCount;
-      const statusSetting = item.statusSetting;
-      return (
-        <div class={{ 'chat-scroll-session__item': true, fold: fold }}>
-          <div class="chat-scroll-session__name-time">
-            <div class="chat-scroll-session__name-zhuanjie">
-              <a-tooltip placement="topLeft">
-                <template slot="title">{name}</template>
-                <span class="chat-scroll-session__name">{name}</span>
-              </a-tooltip>
-              {fold && classifyIcon ? <svg-icon icon-class={classifyIcon} style="margin-left:4px"></svg-icon> : null}
-              {sendName ? (
-                <a-tooltip placement="topLeft">
-                  <template slot="title">{sendName + '转接给了你'}</template>
-                  <span class="chat-scroll-session__zhuanjie">
-                    <svg-icon icon-class="liaotian-zhuanchu" style="fontSize: 16px"></svg-icon>
-                    {sendName}
-                  </span>
-                </a-tooltip>
-              ) : null}
-              {receiveName ? (
-                <a-tooltip placement="topLeft">
-                  <template slot="title">{'你转接给了' + receiveName}</template>
-                  <span class="chat-scroll-session__zhuanchu">
-                    <svg-icon icon-class="liaotian-zhuanru" style="fontSize: 16px"></svg-icon>
-                    {receiveName}
-                  </span>
-                </a-tooltip>
-              ) : null}
-            </div>
-            <a-tooltip placement="topRight" title={item.timeSettingTip}>
-              <span class="chat-scroll-session__time">{item.timeSetting}</span>
-            </a-tooltip>
-          </div>
-          <div class="chat-scroll-session__remark">{item.remarkSetting}</div>
-          <div class="chat-scroll-session__brief-count">
-            <div class="chat-scroll-session__brief" domPropsInnerHTML={item.contentSetting}></div>
-            {msgCount ? <span class="chat-scroll-session__count">{msgCount > 99 ? <a-tooltip title={msgCount}>99+</a-tooltip> : formatCount(item)}</span> : null}
-            {statusSetting ? <span class="chat-scroll-session__level" domPropsInnerHTML={statusSetting}></span> : null}
-          </div>
-        </div>
-      );
-    }
-
-    return (
-      <div class={[theme, 'chat-scroll-container']}>
-        <ul class="chat-scroll-session__list">
-          {processedScrollList.map((item, index) => {
-            const msgCount = item.msgCount;
-            return (
-              <li class={{ 'scroll-item': true, active: this.isActive(item) }} key={item.id || item.bid || index} onClick={() => this.handleClick(item)} id={'item_id_' + item.id}>
-                {foldTheme
-                  ? [
-                      <a-popover overlayClassName="chat-list-popover--fold" placement="right" destroyTooltipOnHide={true}>
-                        <template slot="content">{getContent(item, filters, foldTheme, classifyIcon)}</template>
-                        {getAvatar(item)}
-                      </a-popover>,
-                      msgCount ? <div class="chat-scroll-session__num">{msgCount > 99 ? '99+' : msgCount}</div> : null
-                    ]
-                  : [getAvatar(item), getContent(item, filters, foldTheme, classifyIcon)]}
-              </li>
-            );
-          })}
-        </ul>
-        
-        {isEnd ? (
-          <div {...{ directives }} infinite-scroll-immediate-check="immediate" infinite-scroll-disabled={busy} infinite-scroll-distance={10}>
-            <div class="infinite-wrap" style={infiniteMsgShow ? '' : 'display:none'}>
-              <a-spin size="small" />
-              {foldTheme ? '' : '加载中'}
-            </div>
-          </div>
-        ) : null}
-
-        {isNoData && ((isEnd && !infiniteMsgShow) || !isEnd) ? (
-          <div class={[theme, 'no-data']}>
-            <img src={require('../img/no-data2.png')} />
-            <span>{this.i18nText('1.1.6.11')}</span>
-          </div>
-        ) : null}
-      </div>
-    );
-  }
-};
-</script>
-
-<style lang="less">
-.no-data {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  & > img {
-    width: 160px;
-  }
-  &.fold > img {
-    width: 80%;
-  }
-  span {
-    display: inline-block;
-    font-size: 14px;
-  }
-  &.fold span {
-    font-size: 12px;
-  }
-}
-.chat-scroll-container {
-  height: 100%;
-  overflow-y: auto;
-  &::-webkit-scrollbar {
-    width: 5px;
-  }
-  .infinite-wrap {
-    padding: 16px;
-    text-align: center;
-    font-size: 14px;
-    color: #000000;
-    line-height: 20px;
-    .ant-spin {
-      margin-right: 8px;
-    }
-  }
-}
-.chat-scroll-session__list {
-  margin-bottom: -1px;
-  overflow: hidden;
-  .scroll-item {
-    position: relative;
-    display: flex;
-    align-items: center;
-    height: 82px;
-    padding: 15px 8px;
-    background: #fff;
-    border-bottom: 1px solid #d5d5d5;
-    &:hover {
-      background-color: #f4f4f4;
-    }
-    &.active {
-      background: #ebebeb;
-      .chat-scroll-session__name-time .chat-scroll-session__time {
-        color: #666;
-      }
-    }
-    .avatar {
-      margin-right: 20px;
-    }
-  }
-}
-
-.chat-scroll-container.fold .chat-scroll-session__list {
-  .scroll-item {
-    border-bottom: 0;
-    justify-content: center;
-    background-color: transparent;
-    padding: 8px;
-    height: auto;
-  }
-  .avatar {
-    margin-right: 0;
-  }
-}
-.chat-list-popover--fold {
-  .ant-popover-content {
-    max-width: 300px;
-  }
-  .ant-popover-arrow {
-    display: none;
-  }
-}
-
-.chat-scroll-session__item {
-  flex: 1;
-  width: 0;
-  &.fold {
-    width: 192px;
-    .chat-scroll-session__time {
-      font-size: 12px;
-    }
-  }
-}
-.chat-scroll-session__name-time {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 4px;
-  .chat-scroll-session__name {
-    cursor: pointer;
-    font-size: 16px;
-    color: #212121;
-    height: 26px;
-    font-weight: 600;
-    line-height: 26px;
-    flex: 1;
-    text-align: left;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    word-break: break-all;
-    text-align: left;
-  }
-  .chat-scroll-session__time {
-    padding-left: 4px;
-    cursor: pointer;
-    color: #b3b3b3;
-    text-align: right;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    word-break: break-all;
-  }
-  .chat-scroll-session__name-zhuanjie {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    max-width: 65%;
-  }
-  .chat-scroll-session__zhuanchu,
-  .chat-scroll-session__zhuanjie {
-    line-height: 16px;
-    height: 18px;
-    display: flex;
-    align-items: center;
-    margin-left: 8px;
-    border: 1px solid #37d39f;
-    color: #37d39f;
-    border-radius: 2px;
-    font-size: 12px;
-    padding: 0 4px 0 2px;
-    border-radius: 2px;
-  }
-  .chat-scroll-session__zhuanchu {
-    color: #2d7aff;
-    border: 1px solid #2d7aff;
-  }
-}
-.chat-scroll-session__remark {
-  width: 100%;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-.chat-scroll-session__brief-count {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  overflow: hidden;
-  height: 20px;
-  .chat-scroll-session__brief {
-    flex: 1;
-    width: 0;
-    height: 20px;
-    font-size: 14px;
-    color: rgba(33, 33, 33, 0.6);
-    line-height: 20px;
-    text-align: left;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    word-break: break-all;
-    padding-right: 8px;
-    > div {
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      word-break: break-all;
-    }
-  }
-  .chat-scroll-session__level {
-    flex: 0 0 60px;
-    display: flex;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-}
-.chat-scroll-session__num,
-.chat-scroll-session__count {
-  display: block;
-  min-width: 28px;
-  height: 28px;
-  line-height: 28px;
-  text-align: center;
-  border-radius: 14px;
-  background: #e54949;
-  padding: 0 2px;
-  color: #fff;
-  font-size: 20px;
-  transform: scale(0.5);
-}
-.chat-scroll-session__num {
-  position: absolute;
-  right: 0;
-  top: 8px;
-  margin-right: 12px;
-}
-.chat-scroll-session__table {
-  .vxe-table--render-default .vxe-body--column.col--ellipsis,
-  .vxe-table--render-default.vxe-editable .vxe-body--column,
-  .vxe-table--render-default .vxe-footer--column.col--ellipsis,
-  .vxe-table--render-default .vxe-header--column.col--ellipsis {
-    height: 40px;
-  }
-  .vxe-table--render-default.border--default .vxe-table--header-wrapper,
-  .vxe-table--render-default.border--full .vxe-table--header-wrapper,
-  .vxe-table--render-default.border--outer .vxe-table--header-wrapper {
-    background-color: #fff;
-  }
-  .vxe-body--row.active {
-    background-color: #f2f2f2;
-  }
-}
-</style>