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

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

@@ -1,473 +0,0 @@
-<template>
-  <a-layout-header>
-    <div v-if="!hideHeader" class="chat-header-wrapper">
-      <div class="chat-header-title" @click="$emit('openPortraitPanel', { fromId: clientId })">
-        <Avatar v-if="clientParams.name" :src="curScrollItem && curScrollItem.portrait" :size="30" :name="clientParams.name" :len="2" />
-        <span class="chat-header-username">{{ clientParams.name }}</span>
-        <template v-if="curScrollItem">
-          <a-tooltip placement="topLeft" v-if="curScrollItem.sendName">
-            <template slot="title">{{ curScrollItem.sendName + '转接给了你' }}</template>
-            <span class="zhuanjie">
-              <svg-icon icon-class="liaotian-zhuanchu" style="font-size:16px"></svg-icon>
-              {{ curScrollItem.sendName }}
-            </span>
-          </a-tooltip>
-          <a-tooltip placement="topLeft" v-if="curScrollItem.receiveName">
-            <template slot="title">{{ '你转接给了' + curScrollItem.receiveName }}</template>
-            <span class="zhuanchu">
-              <svg-icon icon-class="liaotian-zhuanru" style="font-size:16px"></svg-icon>
-              {{ curScrollItem.receiveName }}
-            </span>
-          </a-tooltip>
-        </template>
-      </div>
-      <div class="chat-header-opt">
-        <a-button class="chat-header-opt-btn" v-if="isShow('TRANSFER') && sessionType == 1 && onChating" @click="handleConvertShow" :disabled="!onChating && !!convertButtonTitle">{{ convertButtonTitle }}</a-button>
-        <!-- 状态切换 -->
-        <UserStatus class="chat-header-opt-btn" />
-        <!-- <a-dropdown placement="bottomCenter">
-          <a-button>
-            <svg-icon v-if="statusIcon" :icon-class="statusIcon" style="font-size:16px;"></svg-icon>
-            <img v-else :src="getImg(status)" height="16" />
-            {{ statusDesc }}
-            <a-icon type="down" />
-          </a-button>
-          <a-menu slot="overlay">
-            <a-menu-item v-for="{ title, status, description, icon } in statusList" :key="status" @click="handleStatusChange(status)">
-              <template v-if="description">
-                <a-tooltip placement="right">
-                  <template slot="title">
-                    <span>{{ description }}</span>
-                  </template>
-                  <a>
-                    <svg-icon v-if="icon" :icon-class="icon" style="font-size:16px;"></svg-icon>
-
-                    <img v-else :src="getImg(status)" height="16" />
-                    {{ title }}
-                  </a>
-                </a-tooltip>
-              </template>
-              <template v-else
-                ><a>
-                  <svg-icon v-if="icon" :icon-class="icon" style="font-size:16px;"></svg-icon>
-
-                  <img v-else :src="getImg(status)" height="16" />
-                  {{ title }}
-                </a></template
-              >
-            </a-menu-item>
-          </a-menu>
-        </a-dropdown> -->
-        <a-button class="chat-header-opt-btn" @click="handleConfirm" :disabled="!onChating" v-if="isSessionOwner && !isStaff">{{ endSessionTitle }}</a-button>
-      </div>
-    </div>
-    <a-alert v-if="sessionTimer" class="session-time" type="success">
-      <template v-slot:message>
-        {{ i18nText('1.9.324') }}:
-        {{ formatedSessionTime }}
-      </template>
-    </a-alert>
-    <!-- 转接客服 -->
-    <a-modal
-      :title="convertButtonTitle"
-      :visible="convertShow"
-      :maskClosable="false"
-      :mask="true"
-      :width="400"
-      destroyOnClose
-      :okText="i18nText('1.9.326')"
-      @cancel="
-        () => {
-          this.convertShow = false;
-        }
-      "
-      @ok="handleConvertOk"
-    >
-      <img src="../img/required.png" width="20" />
-      {{ i18nText('1.9.392') }}:
-      <br />
-      <a-select :placeholder="i18nText('1.9.327')" v-model="converUserId" style="width: 100%;margin: 10px 0;" showSearch :filterOption="filterOption">
-        <a-select-option :value="item.userId" v-for="(item, index) in serviceList" :key="index">{{ item.userName }}</a-select-option>
-      </a-select>
-      <br />
-      {{ i18nText('1.9.328') }}:
-      <a-textarea v-model="converMark" style="margin: 10px 0;"></a-textarea>
-    </a-modal>
-  </a-layout-header>
-</template>
-
-<script>
-import { mapState, mapGetters, mapMutations, mapActions } from '../store/helper';
-import { Layout, Button, Tooltip, Dropdown, Icon, Menu, Alert, Modal, Select, Input } from 'ant-design-vue';
-import SvgIcon from '@/component/svg/index.vue';
-import Avatar from '../components/avatar';
-import UserStatus from '../components/user-status';
-import fetch, { qs } from '@/utils/chatFetch';
-
-export default {
-  inject: ['store', 'i18nText', 'registerEvent', 'unregisterEvent', 'dispatchEvent'],
-  components: {
-    [Layout.Header.name]: Layout.Header,
-    [Button.name]: Button,
-    [Tooltip.name]: Tooltip,
-    [Dropdown.name]: Dropdown,
-    [Icon.name]: Icon,
-    [Menu.name]: Menu,
-    [Menu.Item.name]: Menu.Item,
-    [Alert.name]: Alert,
-    AModal: Modal,
-    [Select.name]: Select,
-    [Select.Option.name]: Select.Option,
-    [Input.TextArea.name]: Input.TextArea,
-    SvgIcon,
-    Avatar,
-    UserStatus,
-  },
-  props: {
-    hideHeader: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      convertShow: false,
-      serviceList: [],
-      converUserId: '',
-      converMark: '',
-      // status: 'ON-LINE' // 客服状态
-    };
-  },
-  computed: {
-    ...mapGetters([
-      'curScrollItem',
-      'chatMainTitle',
-      'sessionTimer',
-      'sessionTime',
-      'delays',
-      'sessionId',
-      'assemblySetting',
-      'onChating',
-      'assemblyId',
-      'convertButtonTitle',
-      'clientId',
-      'statusList',
-      'endSessionTitle',
-      'isServer',
-      'clientParams',
-      'voiceAlert',
-      'isSessionOwner',
-      'lastClassify',
-      'currentTab',
-      'lastCurrentTab',
-      'sessionType'
-    ]),
-    ...mapState({
-      sessionTotalTime: state => state.sessionTotalTime,
-      classify: state => state.lastClassify || state.classify
-    }),
-    isListClassify() {
-      return this.assemblySetting.isListClassify === 'Y';
-    },
-    isStaff() {
-      return this.assemblySetting?.type === 'staff';
-    },
-    // statusObj() {
-    //   return this.statusList.find(item => item.status === this.status);
-    // },
-    // statusDesc() {
-    //   return this.statusObj?.title;
-    // },
-    // statusIcon() {
-    //   return this.statusObj?.icon || '';
-    // },
-    formatedSessionTime() {
-      let sessionTime = this.sessionTime;
-      const totalTime = this.sessionTotalTime;
-      // 判断是否结束： 如果有总时长则判断是否超时 ，否则判断计时<= 0
-      if (sessionTime !== undefined && (totalTime ? sessionTime > totalTime : sessionTime <= 0)) {
-        this.setChatTimer();
-        this.removeDelay(this.sessionId);
-        this.isSessionOwner && this.handleSessionEnd(); // v2.5.6 前端需要手动结束
-        return;
-      }
-      let hour = Math.floor(sessionTime / 3600);
-      sessionTime = sessionTime - 3600 * hour;
-      let minute = Math.floor(sessionTime / 60);
-      let second = sessionTime % 60;
-      return [hour, minute, second].map(x => `${x < 10 ? 0 : ''}${x}`).join(':');
-    }
-  },
-  mounted() {
-    this.registerEvent('closeCurrentSession', this.handleSessionEnd);
-    this.registerEvent('transferCurrentSession', this.handleConvertShow);
-    this.$on('hook:beforeDestroy', () => {
-      this.unregisterEvent('closeCurrentSession', this.handleSessionEnd);
-      this.unregisterEvent('transferCurrentSession', this.handleConvertShow);
-    });
-  },
-  methods: {
-    ...mapMutations([
-      'setDelays',
-      'setIsScrollListChange',
-      'setListChangeItem',
-      'setOnChating',
-      'setSessionId',
-      'setMsgList',
-      'setSessionEnd',
-      'setSessionHistoryList',
-      'setClientParams',
-      'setClientId',
-      'setVoiceAlert',
-    ]),
-    ...mapActions(['setChatTimer']),
-    /**
-     * 剔除延时提醒
-     */
-    removeDelay(sessionId) {
-      let delays = this.delays.filter(item => item.sessionId !== sessionId);
-      this.setDelays(delays);
-    },
-    isShow(type) {
-      let currentTab = this.currentTab;
-      if (this.lastCurrentTab && this.lastCurrentTab != currentTab) {
-        currentTab = this.lastCurrentTab;
-      }
-      if (currentTab === 'queue' && type === 'TRANSFER') {
-        return false;
-      }
-      if (this.isListClassify) {
-        let label;
-        if (this.isServer) {
-          label = 'serverFunctionSetting';
-        } else {
-          label = 'clientFunctionSetting';
-        }
-        let classify = this.classify;
-        if (this.lastClassify && this.lastClassify != this.classify) {
-          classify = this.lastClassify;
-        }
-        let funs = this.assemblySetting.listClassify.filter(item => item.classify === classify)[0][label];
-        return funs.find(item => item.function === type)?.isChecked === 'Y';
-      }
-      let label;
-      if (this.isServer) {
-        label = 'serverSetting';
-      } else {
-        label = 'clientSetting';
-      }
-      let funs = this.assemblySetting[label]?.functionSetting || [];
-      return funs.find(item => item.function === type)?.isChecked === 'Y';
-    },
-    handleConvertShow() {
-      if (!(this.isShow('TRANSFER') && this.sessionType == 1 && this.onChating)) return;
-      this.convertShow = true;
-      fetch
-        .get('/chat/event/getSysBaseInformation', {
-          params: {
-            type: 'PERSONNEL_SERVICE',
-            excludeSelf: true,
-            assemblyId: this.assemblyId
-          }
-        })
-        .then(({ data }) => {
-          if (data.result === 'SUCCESS') {
-            let { imformation } = data.map;
-            this.serviceList = imformation.map(item => {
-              let setting = JSON.parse(item.setting);
-              let { userName, userId } = setting;
-              item.userName = userName || '-';
-              item.userId = userId || '-';
-              return item;
-            });
-            console.log(this.serviceList);
-          }
-        });
-    },
-    handleConvertOk() {
-      if (!this.converUserId) {
-        this.$message.warning(this.i18nText('1.9.335'));
-        return;
-      }
-      let params = {
-        assemblyId: this.assemblyId,
-        sessionId: this.sessionId,
-        receiveId: this.converUserId,
-        remark: this.converMark
-      };
-      fetch
-        .post('/chat/service/transferSession', qs.stringify(params))
-        .then(({ data }) => {
-          if (data.result === 'SUCCESS') {
-            this.setIsScrollListChange(true);
-            this.setListChangeItem({
-              sessionId: this.sessionId,
-              opt: 2,
-              from: this.clientId
-            });
-            this.removeDelay(this.sessionId);
-            this.setOnChating(false);
-            this.setSessionId(null);
-            this.setMsgList();
-            this.setChatTimer();
-            this.setSessionHistoryList([]);
-            this.setClientParams({});
-            this.setClientId(null);
-            this.$message.success(this.i18nText('1.9.336'));
-            this.convertShow = false;
-            this.dispatchEvent('user_transferSuccess', { sessionId: this.sessionId });
-          } else {
-            this.$message.warning(data.resultMsg || '转接失败');
-          }
-        })
-        .finally(() => {
-          this.converMark = '';
-          this.converUserId = '';
-        });
-    },
-    // getImg(name) {
-    //   try {
-    //     return require(`../img/${name}.png`);
-    //   } catch {
-    //     return '';
-    //   }
-    // },
-    // handleStatusChange(status) {
-    //   this.status = status;
-    //   let params = {
-    //     assemblyId: this.assemblyId,
-    //     status
-    //   };
-    //   fetch.post('/chat/service/updateServiceState', qs.stringify(params)).then(({ data }) => {
-    //     if (data.result === 'SUCCESS') {
-    //       this.$message.success(`${this.i18nText('1.9.334')}!`);
-    //     }
-    //   });
-    // },
-    handleConfirm() {
-      let that = this;
-      this.$confirm({
-        title: this.i18nText('1.9.331'),
-        content: `${this.i18nText('1.9.332')}?`,
-        okText: '确定',
-        cancelText: '取消',
-        onOk() {
-          return that.handleSessionEnd();
-        },
-        onCancel() {}
-      });
-    },
-    handleSessionEnd() {
-      let params = { sessionId: this.sessionId, assemblyId: this.assemblyId };
-      fetch.post('/chat/service/closeSession', qs.stringify(params)).then(({ data }) => {
-        if (data.result === 'SUCCESS') {
-          this.$message.success(this.i18nText('1.9.333'));
-          this.removeDelay(this.sessionId);
-          this.setOnChating(false);
-          this.setSessionId(null);
-          this.setMsgList();
-          this.setChatTimer();
-          this.setSessionEnd(true);
-          this.setClientParams({});
-          this.setClientId(null);
-          this.setSessionHistoryList([]);
-          this.dispatchEvent('user_sessionEnd', { sessionId: this.sessionId });
-        } else {
-          this.$message.warning(data.resultMsg);
-        }
-      });
-    },
-    filterOption(input, option) {
-      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
-    },
-    toggleVoiceAlert() {
-      this.setVoiceAlert(!this.voiceAlert);
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.ant-layout-header {
-  padding: 0;
-  height: auto;
-  background-color: transparent;
-  .session-time {
-    background-color: #f2fffb;
-    border: 1px solid rgba(59, 213, 161, 0.46);
-    /deep/.ant-alert-message {
-      color: #05c987;
-      &::before {
-        content: '';
-        display: inline-block;
-        width: 8px;
-        height: 8px;
-        background: #05c987;
-        border-radius: 50%;
-        margin-right: 8px;
-      }
-    }
-  }
-}
-.chat-header-wrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 65px;
-  padding: 0 18px;
-  background: #fff;
-  border-bottom: 1px solid #e6e6e6;
-  line-height: 1.2;
-  .chat-header-username {
-    word-break: break-all;
-  }
-  .chat-header-title {
-    cursor: pointer;
-    flex: 1;
-    position: relative;
-    padding-left: 36px;
-    .zhuanchu,
-    .zhuanjie {
-      line-height: 16px;
-      height: 18px;
-      display: inline-block;
-      text-align: center;
-      margin-left: 10px;
-      border: 1px solid #37d39f;
-      color: #37d39f;
-      border-radius: 2px;
-      font-size: 12px;
-      padding: 0 4px 0 2px;
-      border-radius: 2px;
-      .svg-icon {
-        vertical-align: top;
-      }
-    }
-    .zhuanchu {
-      color: #2d7aff;
-      border: 1px solid #2d7aff;
-    }
-    /deep/ .avatar-logo {
-      font-size: 12px;
-      position: absolute;
-      left: 0;
-      top: 50%;
-      margin-top: -15px;
-    }
-  }
-
-  .chat-header-opt {
-    display: flex;
-    &-btn {
-      margin-left: 10px;
-    }
-  }
-  /deep/ .ant-btn {
-    border-radius: 13px;
-    height: 26px;
-    & + .ant-btn {
-      margin-left: 8px;
-    }
-  }
-}
-</style>