cnhis-design-vue 0.1.88-beta → 0.1.92-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, "~-~");

package/packages/table-filter/src/classification/Classification-com.vue

@@ -851,7 +851,7 @@ export default create({
         Object.assign(params, this.handleParams()); // 额外条件暂时隐藏，需要等后端确定是否需要该额外条件
         let res = await this.handleGetConfigApi(params, 'requestTableCondiTionDigital');
         this.handleConditionDiaital(res);
-        return Promise.resolve();
+        return Promise.resolve(res);
       } catch (error) {
         console.log(error, 'getTableCondiTionDigital');
       }

package/packages/table-filter/src/components/multi-select/multi-select.vue

@@ -8,7 +8,7 @@
     :maxTagCount="handleMaxTagCount(item)"
     :maxTagPlaceholder="handleMaxTag(item)"
     showSearch
-    :filterOption="filterOption"
+    :filterOption="false"
     v-model="item.value"
     @search="handleWordBookSearch($event, item)"
     @dropdownVisibleChange="dropdownVisibleChange($event, item)"

package/packages/table-filter/src/quick-search/QuickSearch.vue

@@ -56,7 +56,7 @@
                         v-model="v.isSelect"
                         @change="handleLabelChange($event, v, item)"
                         :key="i"
-                        :style="$utils.handleLabelColor(v)"
+                        :style="handleLabelColor(v)"
                       >
                         <a-tooltip placement="topLeft">
                           <template slot="title">
@@ -297,7 +297,7 @@
                         v-model="item.BIRTHDAY.unit"
                         defaultValue="YEAR"
                         showSearch
-                        :filterOption="$utils.filterOption"
+                        :filterOption="filterOption"
                         allowClear
                       >
                         <a-select-option
@@ -395,7 +395,7 @@
                             v-model="v.isSelect"
                             @change="handleLabelChange($event, v, item)"
                             :key="i"
-                            :class="['label-tag-' + handleLabelColor(v)]"
+                            :class="['label-tag-' + handleLabelColorClass(v)]"
                           >
                             <a-tooltip placement="topLeft">
                               <template slot="title">
@@ -717,6 +717,7 @@ import { durationMixin, $utils, filterApiFn } from '../mixins/mixins';
 import vexutils from '@/utils/vexutils';
 import wordBookutils from '../mixins/wordBookutils';
 import create from '@/core/create';
+import utils from '@/utils/utils-map';
 export default create({
   name: "quick-search",
   mixins: [durationMixin, $utils, filterApiFn, tableSearchCon],
@@ -896,6 +897,12 @@ export default create({
   },
   created() {},
   methods: {
+    filterOption(...arg) {
+      return utils.filterOption(...arg);
+    },
+    handleLabelColor(...arg) {
+      return utils.handleLabelColor(...arg);
+    },
     init() {
       this.quickSearch = [];
       this.relationQuickSearch = [];
@@ -1620,7 +1627,7 @@ export default create({
       this.$set(el, 'labelList', labelList);
     },
 
-    handleLabelColor(item) {
+    handleLabelColorClass(item) {
       return item?.color?.split("-")[1] || "yellow";
     },
 

package/src/utils/utils-map.js

@@ -45,7 +45,7 @@ export default {
     return _toString.call(val) === '[object Number]';
   },
 
-  parseCondition() {},
+  parseCondition() { },
 
   toDateString(time, format) {
     return moment(time).format(format);
@@ -89,7 +89,7 @@ export default {
   },
 
   filterOption(input, option) {
-    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+    return option.componentOptions.children[0]?.text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
   },
 
   // color 获取 alpha
@@ -262,7 +262,7 @@ export default {
     let result = [];
     let resultStr = '';
     const getVal = (t, i, r) => {
-      return t.replace(r, function() {
+      return t.replace(r, function () {
         let pKey = arguments[1];
         return list[i][pKey] || '';
       });
@@ -291,7 +291,7 @@ export default {
     };
     const that = this;
     const getVal = (t, r, k) => {
-      return t.replace(r, function() {
+      return t.replace(r, function () {
         var pKey = arguments[1];
         var pls = pKey.split('!');
         var plsList = pls.slice(1);
@@ -381,7 +381,7 @@ export default {
   debounce(func, wait, immediate) {
     let timeout, args, context, timestamp, result;
 
-    const later = function() {
+    const later = function () {
       // 据上一次触发时间间隔
       const last = +new Date() - timestamp;
 
@@ -398,7 +398,7 @@ export default {
       }
     };
 
-    return function(...args) {
+    return function (...args) {
       context = this;
       timestamp = +new Date();
       const callNow = immediate && !timeout;