cnhis-design-vue 0.1.88-beta → 0.1.89-beta

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

@@ -1,58 +1,89 @@
 <template>
-  <a-dropdown
-    :placement="type === 'right-top' ? 'bottomCenter' : 'topLeft'"
-    :getPopupContainer="
-      triggerNode => {
-        return triggerNode.parentNode || document.body;
-      }
-    "
-  >
-    <a-button v-if="type === 'right-top'">
-      <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>
-    <div v-else 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" />
-    </div>
-    <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>
+  <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>
-          </a-tooltip>
-        </template>
-        <template v-else
-          ><a>
-            <svg-icon v-if="icon" :icon-class="icon" style="font-size: 16px"></svg-icon>
+            </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></template
-        >
-      </a-menu-item>
-    </a-menu>
-  </a-dropdown>
+                  <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';
+import { mapGetters, mapMutations } from '../store/helper';
 
 export default {
-  inject: ['i18nText'],
+  inject: ['store', 'i18nText'],
   components: {
     [Tooltip.name]: Tooltip,
     [Dropdown.name]: Dropdown,
@@ -66,16 +97,13 @@ export default {
       type: String,
       default: 'right-top'
     },
-    assemblyId: {
-      type: String,
-      require: true
-    },
-    statusList: {
-      type: Array,
-      default: () => []
-    }
   },
   computed: {
+    ...mapGetters([
+      'assemblyId',
+      'statusList',
+      'userStatus',
+    ]),
     statusObj() {
       return this.statusList.find(item => item.status === this.status);
     },
@@ -84,14 +112,19 @@ export default {
     },
     statusDesc() {
       return this.statusObj?.title;
+    },
+    status() {
+      return this.userStatus || 'ON-LINE' // 客服状态
     }
   },
   data() {
     return {
-      status: 'ON-LINE' // 客服状态
     };
   },
   methods: {
+    ...mapMutations([
+      'setUserStatus'
+    ]),
     getImg(name) {
       try {
         return require(`../img/${name}.png`);
@@ -100,7 +133,7 @@ export default {
       }
     },
     handleStatusChange(status) {
-      this.status = status;
+      this.setUserStatus(status);
       let params = {
         assemblyId: this.assemblyId,
         status
@@ -116,11 +149,45 @@ export default {
 </script>
 <style lang="less" scoped>
 .status-btn {
+  position: relative;
+  padding-right: 10px;
   height: 26px;
   line-height: 26px;
-}
-.dropdown-status {
-  left: 92px !important;
-  top: 706px !important;
+  cursor: pointer;
+  .status-list {
+    position: absolute;
+    right: -85px;
+    bottom: 8px;
+    z-index: 2;
+    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;
+    }
+  }
 }
 </style>

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

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

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

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

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

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

package/packages/scale-view/scaleView.vue

@@ -869,7 +869,7 @@ export default create({
       const results = list.map(item => {
         const key = this.formKey(item);
         let title = (key || "").replace(/\n/g, "");
-        this.$set(item, "showTitle", title);
+        this.$set(item, "showTitle", item.title);
         // 表单校验rule prop如果有 . 会报错, 替换成 ~-~
         if (title.includes(".")) {
           let newTitle = title.replace(/\./g, "~-~");