cnhis-design-vue 2.1.24 → 2.1.25

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

@@ -1,1232 +1,1232 @@
-<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',
-      'setClosedSession'
-    ]),
-    ...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);
-      this.setClosedSession(this.type === 'end');
-      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;
-      // }
-      const name = JSON.parse(item.params || {})?.name || "";
-      return item.titleSetting || item.name || name;
-    },
-    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>
+<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',
+      'setClosedSession'
+    ]),
+    ...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);
+      this.setClosedSession(this.type === 'end');
+      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;
+      // }
+      const name = JSON.parse(item.params || {})?.name || "";
+      return item.titleSetting || item.name || name;
+    },
+    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>