cnhis-design-vue 2.1.56 → 2.1.58

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

@@ -1,34 +1,34 @@
-<script>
-function noop() {}
-export default {
-  functional: true,
-  props: {
-    status: {
-      type: [String, Number]
-    }
-  },
-  render(_h, context) {
-    const status = context.props.status;
-    const isNum = /^\d+$/.test(status);
-    const unread = status === 'N';
-    const click = context.listeners.click || noop;
-    return (
-      <div class={['chat-read-status-text', isNum || unread ? 'light' : '']} onClick={click}>
-        {status ? (isNum ? `${status}人未读` : unread ? '未读' : `${status === 'ALL' ? '全部' : ''}已读`) : ''}
-      </div>
-    );
-  }
-};
-</script>
-<style lang="less">
-.chat-read-status-text {
-  line-height: 20px;
-  font-size: 14px;
-  color: rgba(0, 0, 0, 0.6);
-  text-align: right;
-  cursor: pointer;
-  &.light {
-    color: #2d7aff;
-  }
-}
-</style>
+<script>
+function noop() {}
+export default {
+  functional: true,
+  props: {
+    status: {
+      type: [String, Number]
+    }
+  },
+  render(_h, context) {
+    const status = context.props.status;
+    const isNum = /^\d+$/.test(status);
+    const unread = status === 'N';
+    const click = context.listeners.click || noop;
+    return (
+      <div class={['chat-read-status-text', isNum || unread ? 'light' : '']} onClick={click}>
+        {status ? (isNum ? `${status}人未读` : unread ? '未读' : `${status === 'ALL' ? '全部' : ''}已读`) : ''}
+      </div>
+    );
+  }
+};
+</script>
+<style lang="less">
+.chat-read-status-text {
+  line-height: 20px;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.6);
+  text-align: right;
+  cursor: pointer;
+  &.light {
+    color: #2d7aff;
+  }
+}
+</style>

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

@@ -1,198 +1,198 @@
-<template>
-  <div>
-    <a-dropdown
-      :placement="placement"
-      :getPopupContainer="
-        triggerNode => {
-          return triggerNode.parentNode || document.body;
-        }
-      "
-    >
-      <a-button v-if="placement === 'bottomCenter'">
-        <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="up" />
-      </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>
-                <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';
-import { mapGetters, mapMutations } from '../store/helper';
-
-export default {
-  inject: ['store', 'i18nText'],
-  components: {
-    [Tooltip.name]: Tooltip,
-    [Dropdown.name]: Dropdown,
-    [Icon.name]: Icon,
-    [Menu.name]: Menu,
-    [Menu.Item.name]: Menu.Item,
-    SvgIcon
-  },
-  props: {
-    placement: {
-      type: String,
-      default: 'bottomCenter'
-    },
-  },
-  computed: {
-    ...mapGetters([
-      'assemblyId',
-      'statusList',
-      'userStatus',
-    ]),
-    statusObj() {
-      return this.statusList.find(item => item.status === this.status);
-    },
-    statusIcon() {
-      return this.statusObj?.icon || '';
-    },
-    statusDesc() {
-      return this.statusObj?.title;
-    },
-    status() {
-      return this.userStatus || 'ON-LINE' // 客服状态
-    }
-  },
-  data() {
-    return {
-    };
-  },
-  methods: {
-    ...mapMutations([
-      'setUserStatus'
-    ]),
-    getImg(name) {
-      try {
-        return require(`../img/${name}.png`);
-      } catch {
-        return '';
-      }
-    },
-    handleStatusChange(status) {
-      this.setUserStatus(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')}!`);
-        }
-      });
-    }
-  }
-};
-</script>
-<style lang="less" scoped>
-.status-btn {
-  position: relative;
-  // padding-right: 10px;
-  height: 28px;
-  line-height: 28px;
-  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>
+<template>
+  <div>
+    <a-dropdown
+      :placement="placement"
+      :getPopupContainer="
+        triggerNode => {
+          return triggerNode.parentNode || document.body;
+        }
+      "
+    >
+      <a-button v-if="placement === 'bottomCenter'">
+        <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="up" />
+      </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>
+                <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';
+import { mapGetters, mapMutations } from '../store/helper';
+
+export default {
+  inject: ['store', 'i18nText'],
+  components: {
+    [Tooltip.name]: Tooltip,
+    [Dropdown.name]: Dropdown,
+    [Icon.name]: Icon,
+    [Menu.name]: Menu,
+    [Menu.Item.name]: Menu.Item,
+    SvgIcon
+  },
+  props: {
+    placement: {
+      type: String,
+      default: 'bottomCenter'
+    },
+  },
+  computed: {
+    ...mapGetters([
+      'assemblyId',
+      'statusList',
+      'userStatus',
+    ]),
+    statusObj() {
+      return this.statusList.find(item => item.status === this.status);
+    },
+    statusIcon() {
+      return this.statusObj?.icon || '';
+    },
+    statusDesc() {
+      return this.statusObj?.title;
+    },
+    status() {
+      return this.userStatus || 'ON-LINE' // 客服状态
+    }
+  },
+  data() {
+    return {
+    };
+  },
+  methods: {
+    ...mapMutations([
+      'setUserStatus'
+    ]),
+    getImg(name) {
+      try {
+        return require(`../img/${name}.png`);
+      } catch {
+        return '';
+      }
+    },
+    handleStatusChange(status) {
+      this.setUserStatus(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')}!`);
+        }
+      });
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.status-btn {
+  position: relative;
+  // padding-right: 10px;
+  height: 28px;
+  line-height: 28px;
+  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/index.js

@@ -1,7 +1,7 @@
-import ChatServer from './chat/index.vue';
-
-ChatServer.install = function(Vue) {
-  Vue.component(ChatServer.name, ChatServer);
-};
-
-export default ChatServer;
+import ChatServer from './chat/index.vue';
+
+ChatServer.install = function(Vue) {
+  Vue.component(ChatServer.name, ChatServer);
+};
+
+export default ChatServer;