cnhis-design-vue 0.1.86-beta → 0.1.87-beta

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cnhis-design-vue",
-  "version": "0.1.86-beta",
+  "version": "0.1.87-beta",
   "description": "基于 Ant Desgin Vue 的UI库",
   "keyword": "cnhis-design-vue vue cnhis",
   "homepage": "http://dv.cnhis.com/",

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

@@ -24,7 +24,8 @@
       <div>
         <a-button v-if="isShow('TRANSFER') && sessionType == 1 && onChating" @click="handleConvertShow" :disabled="!onChating && !!convertButtonTitle">{{ convertButtonTitle }}</a-button>
         <!-- 状态切换 -->
-        <a-dropdown placement="bottomCenter">
+        <UserStatus :assemblyId="assemblyId" :statusList="statusList" :curStatus="status" @changeStatus="changeStatus" />
+        <!-- <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" />
@@ -56,7 +57,7 @@
               >
             </a-menu-item>
           </a-menu>
-        </a-dropdown>
+        </a-dropdown> -->
         <a-button @click="handleConfirm" :disabled="!onChating" v-if="isSessionOwner && !isStaff">{{ endSessionTitle }}</a-button>
       </div>
     </div>
@@ -100,6 +101,7 @@ 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 {
@@ -118,7 +120,8 @@ export default {
     [Select.Option.name]: Select.Option,
     [Input.TextArea.name]: Input.TextArea,
     SvgIcon,
-    Avatar
+    Avatar,
+    UserStatus,
   },
   props: {
     hideHeader: {
@@ -132,7 +135,7 @@ export default {
       serviceList: [],
       converUserId: '',
       converMark: '',
-      status: 'ON-LINE' // 客服状态
+      // status: 'ON-LINE' // 客服状态
     };
   },
   computed: {
@@ -149,6 +152,7 @@ export default {
       'convertButtonTitle',
       'clientId',
       'statusList',
+      'status',
       'endSessionTitle',
       'isServer',
       'clientParams',
@@ -169,15 +173,15 @@ export default {
     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 || '';
-    },
+    // 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;
@@ -215,9 +219,13 @@ export default {
       'setSessionHistoryList',
       'setClientParams',
       'setClientId',
-      'setVoiceAlert'
+      'setVoiceAlert',
+      'setStatus'
     ]),
     ...mapActions(['setChatTimer']),
+    changeStatus(status) {
+      this.setStatus(status);
+    },
     /**
      * 剔除延时提醒
      */
@@ -322,25 +330,25 @@ export default {
           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')}!`);
-        }
-      });
-    },
+    // 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({

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

@@ -130,47 +130,55 @@
           </template>
         </a-tabs>
         <div v-if="isNormalStyle" class="footer-operate">
-          <span v-if="showSetting" class="setting-span">
-            <svg-icon icon-class="a-xitongtubiaoliaotianshezhi" @click="handleSetting" />
-          </span>
-          <span>
-            <a-tooltip placement="bottom">
-              <template slot="title">
-                <span>声音提醒</span>
-              </template>
-              <svg-icon :icon-class="voiceAlert ? 'a-xitongtubiaoliaotianlaba' : 'a-xitongtubiaoliaotianjingyin'" style="margin-right: 10px" @click="toggleVoiceAlert" />
-            </a-tooltip>
-          </span>
-          <span>
-            <a-tooltip placement="top">
-              <template slot="title">
-                <span>语音历史</span>
-              </template>
-              <svg-icon @click="toggleVideoVoiceList" icon-class="a-xitongtubiaoliaotiantonghua" />
-            </a-tooltip>
-          </span>
+          <!-- 状态切换 -->
+          <UserStatus v-if="hideHeader" type="left-bottom" :assemblyId="assemblyId" :statusList="statusList" :curStatus="status" @changeStatus="changeStatus" />
+          <div class="footer-operate-right">
+            <span v-if="showSetting" class="setting-span">
+              <svg-icon icon-class="a-xitongtubiaoliaotianshezhi" @click="handleSetting" />
+            </span>
+            <span>
+              <a-tooltip placement="bottom">
+                <template slot="title">
+                  <span>声音提醒</span>
+                </template>
+                <svg-icon :icon-class="voiceAlert ? 'a-xitongtubiaoliaotianlaba' : 'a-xitongtubiaoliaotianjingyin'" style="margin-right: 10px" @click="toggleVoiceAlert" />
+              </a-tooltip>
+            </span>
+            <span>
+              <a-tooltip placement="top">
+                <template slot="title">
+                  <span>语音历史</span>
+                </template>
+                <svg-icon @click="toggleVideoVoiceList" icon-class="a-xitongtubiaoliaotiantonghua" />
+              </a-tooltip>
+            </span>
+          </div>
         </div>
-        <a-popover v-else placement="rightBottom" arrowPointAtCenter>
-          <template slot="content">
-            <div class="chat-operate-group">
-              <div v-if="showSetting" class="chat-operate-item" @click="handleSetting">
-                <svg-icon icon-class="a-xitongtubiaoliaotianshezhi" />
-                <span>设置</span>
-              </div>
-              <div class="chat-operate-item" @click="toggleVoiceAlert">
-                <svg-icon :icon-class="voiceAlert ? 'a-xitongtubiaoliaotianlaba' : 'a-xitongtubiaoliaotianjingyin'" />
-                <span>静音</span>
-              </div>
-              <div class="chat-operate-item" @click="toggleVideoVoiceList">
-                <svg-icon icon-class="a-xitongtubiaoliaotiantonghua" />
-                <span>通话</span>
+        <template v-else>
+          <a-popover placement="rightBottom" arrowPointAtCenter>
+            <template slot="content">
+              <div class="chat-operate-group">
+                <div v-if="showSetting" class="chat-operate-item" @click="handleSetting">
+                  <svg-icon icon-class="a-xitongtubiaoliaotianshezhi" />
+                  <span>设置</span>
+                </div>
+                <div class="chat-operate-item" @click="toggleVoiceAlert">
+                  <svg-icon :icon-class="voiceAlert ? 'a-xitongtubiaoliaotianlaba' : 'a-xitongtubiaoliaotianjingyin'" />
+                  <span>静音</span>
+                </div>
+                <div class="chat-operate-item" @click="toggleVideoVoiceList">
+                  <svg-icon icon-class="a-xitongtubiaoliaotiantonghua" />
+                  <span>通话</span>
+                </div>
               </div>
+            </template>
+            <div class="chat-operate-more">
+              <i class="operate-more-icon"></i>
             </div>
-          </template>
-          <div class="chat-operate-more">
-            <i class="operate-more-icon"></i>
-          </div>
-        </a-popover>
+          </a-popover>
+          <!-- 状态切换 -->
+          <UserStatus v-if="hideHeader" type="left-bottom" :assemblyId="assemblyId" :statusList="statusList" :curStatus="status"  @changeStatus="changeStatus" style="margin: -10px 0 8px; width: 100px;text-align: center;" />
+        </template>
       </a-layout-sider>
       <a-row style="width: 100%;height: 100%;overflow: hidden;">
         <a-col :span="mainSpan" style="height: 100%;position: relative">
@@ -327,6 +335,7 @@ import VideoVoiceList from './videoVoiceList';
 import addConference from './addConference';
 import ClassifyTabs from '../components/classify-tabs';
 import ChatTabsHeader from '../components/chat-tabs-header';
+import UserStatus from '../components/user-status';
 import { checkTalkingEnv } from '../utils/index';
 
 export default {
@@ -432,6 +441,7 @@ export default {
       'callings',
       'assemblySetting',
       'statusList',
+      'status',
       'tabList',
       'chatMainTitle',
       'endSessionTitle',
@@ -625,12 +635,16 @@ export default {
       'setLastCurrentTab',
       'setQueueItem',
       'setCurScrollItem',
-      'setSessionType'
+      'setSessionType',
+      'setStatus'
     ]),
     ...mapActions(['setChatTimer', 'getVideoHistoryList']),
     ...mapActions({
       getMsgList: 'setMsgList'
     }),
+    changeStatus(status) {
+      this.setStatus(status);
+    },
     handleDateOpenChange(v) {
       this.dateOpenStatus = v;
     },
@@ -1621,7 +1635,8 @@ export default {
     VideoVoiceList,
     addConference,
     ChatTabsHeader,
-    ClassifyTabs
+    ClassifyTabs,
+    UserStatus
   },
   beforeDestroy() {
     if (this.stompClient) {
@@ -1932,40 +1947,52 @@ export default {
     }
     .footer-operate {
       display: inline-flex;
+      justify-content: space-around;
+      align-items: center;
       width: 100%;
+      box-sizing: border-box;
+      padding: 0 0 0 8px;
       height: 55px;
       line-height: 55px;
       border-top: 1px solid #f0f0f5;
-      .setting-span {
-        position: relative;
-        z-index: 2;
-      }
-      span {
-        position: relative;
+      &-right {
         flex: 1;
         display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        &::after {
-          content: '';
-          position: absolute;
-          right: 0;
-          top: 50%;
-          transform: translateY(-50%);
-          width: 1px;
-          background: #ccc;
-          height: 22px;
+        justify-content: flex-end;
+        height: 100%;
+        line-height: 55px;
+        .setting-span {
+          position: relative;
+          z-index: 2;
         }
-        .svg-icon {
-          font-size: 20px;
-          cursor: pointer;
-          outline: none;
-          color: #b5b5b5;
+        span {
+          position: relative;
+          // flex: 1;
+          display: inline-flex;
+          justify-content: center;
+          padding: 0 10px;
+          align-items: center;
+          &::after {
+            content: '';
+            position: absolute;
+            right: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 1px;
+            background: #ccc;
+            height: 22px;
+          }
+          .svg-icon {
+            font-size: 20px;
+            cursor: pointer;
+            outline: none;
+            color: #b5b5b5;
+          }
         }
-      }
-      span:last-child {
-        &::after {
-          width: 0;
+        span:last-child {
+          &::after {
+            width: 0;
+          }
         }
       }
     }

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

@@ -167,7 +167,8 @@ export default {
             if (aLevel === bLevel) {
               return Number(a.createdTime) - Number(b.createdTime);
             }
-            return descOrAsc === 'desc' ? aLevel - bLevel : bLevel - aLevel;
+            // 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];
@@ -592,6 +593,7 @@ export default {
       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));

package/packages/multi-chat/components/user-status.vue

@@ -0,0 +1,204 @@
+<template>
+  <div>
+    <a-dropdown
+      v-if="type === 'right-top'"
+      placement="bottomCenter"
+      :getPopupContainer="
+        triggerNode => {
+          return triggerNode.parentNode || document.body;
+        }
+      "
+    >
+      <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>
+    <template v-else>
+      <div class="status-btn">
+        <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="right" />
+        <ul class="status-list">
+          <li 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
+            >
+          </li>
+        </ul>
+      </div>
+    </template>
+  </div>
+</template>
+<script>
+import { Tooltip, Dropdown, Icon, Menu } from 'ant-design-vue';
+import SvgIcon from '@/component/svg/index.vue';
+import fetch, { qs } from '@/utils/chatFetch';
+
+export default {
+  inject: ['i18nText'],
+  components: {
+    [Tooltip.name]: Tooltip,
+    [Dropdown.name]: Dropdown,
+    [Icon.name]: Icon,
+    [Menu.name]: Menu,
+    [Menu.Item.name]: Menu.Item,
+    SvgIcon
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'right-top'
+    },
+    assemblyId: {
+      type: String,
+      require: true
+    },
+    statusList: {
+      type: Array,
+      default: () => []
+    },
+    curStatus: {
+      type: String,
+      default: 'ON-LINE'
+    }
+  },
+  computed: {
+    statusObj() {
+      return this.statusList.find(item => item.status === this.status);
+    },
+    statusIcon() {
+      return this.statusObj?.icon || '';
+    },
+    statusDesc() {
+      return this.statusObj?.title;
+    }
+  },
+  data() {
+    return {
+      status: 'ON-LINE' // 客服状态
+    };
+  },
+  watch: {
+    curStatus(val) {
+      val && (this.status = val);
+    }
+  },
+  methods: {
+    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.$emit('changeStatus', status);
+          this.$message.success(`${this.i18nText('1.9.334')}!`);
+        }
+      });
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.status-btn {
+  position: relative;
+  padding-right: 10px;
+  height: 26px;
+  line-height: 26px;
+  cursor: pointer;
+  .status-list {
+    position: absolute;
+    right: -85px;
+    bottom: 8px;
+    z-index: 1;
+    display: none;
+    padding: 4px 0;
+    outline: none;
+    list-style-type: none;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
+    background-color: #fff;
+    transition: all .5s;
+    li {
+      height: 32px;
+      line-height: 32px;
+      padding: 0 16px;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      background: #fff;
+      a {
+        padding-right: 8px;
+        color: rgba(0, 0, 0, 0.65);
+      }
+      &:hover {
+        background: #f2f2f2;
+      }
+    }
+  }
+  &:hover {
+    .status-list {
+      display: block;
+    }
+  }
+}
+.dropdown-status {
+  left: 92px !important;
+  top: 706px !important;
+}
+</style>

package/packages/multi-chat/store/getters.js

@@ -337,5 +337,8 @@ export default {
   },
   isRecorderVoice(state) {
     return state.isRecorderVoice;
+  },
+  status(state) {
+    return state.status;
   }
 };

package/packages/multi-chat/store/mutation.js

@@ -262,5 +262,8 @@ export default {
   },
   setUserInfo(state, userInfo) {
     state.userInfo = userInfo;
-  }
+  },
+  setStatus(state, status) {
+    state.status = status;
+  },
 };

package/packages/multi-chat/store/state.js

@@ -102,6 +102,7 @@ export default () => {
     curScrollItem: null,
     isQuickReply: false,
     isRecorderVoice: false,
-    msgRecordCache: {} // 消息已读记录缓存
+    msgRecordCache: {}, // 消息已读记录缓存
+    status: ''
   };
 };