cnhis-design-vue 0.2.63-beta → 0.3.1-beta

package/packages/multi-chat/components/chat-tabs-header.vue

@@ -1,251 +0,0 @@
-<script>
-import SvgIcon from '@/component/svg/index.vue';
-import { Popover } from 'ant-design-vue';
-export default {
-  components: {
-    [Popover.name]: Popover,
-    SvgIcon
-  },
-  props: {
-    handleOfflineClassifyCount: {
-      type: Function
-    },
-    activeKey: {
-      type: String,
-      default: ''
-    },
-    classify: {
-      type: String,
-      default: ''
-    },
-    queueStatistic: {
-      type: Object,
-      default: () => ({})
-    },
-    sessionStatistic: {
-      type: Object,
-      default: () => ({})
-    },
-    offlineSessionStatistic: {
-      type: Object,
-      default: () => ({})
-    },
-    classifyList: {
-      type: Array,
-      default: () => []
-    },
-    tabList: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      visible: false
-    };
-  },
-  methods: {
-    getStaticByType(type) {
-      let item = null;
-      switch (type) {
-        case 'queue':
-          item = this.queueStatistic;
-          break;
-        case 'session':
-          item = this.sessionStatistic;
-          break;
-        default:
-          item = this.offlineSessionStatistic;
-          break;
-      }
-      return item;
-    },
-    toggleType(type) {
-      if (type === this.activeKey) return;
-      this.$emit('change', type);
-      this.visible = true;
-    },
-    toggleClassify(v) {
-      this.$emit('changeClassify', v);
-      this.visible = false;
-    },
-    onVisibleChange(type, v) {
-      if (type === this.activeKey) {
-        this.visible = v;
-      }
-    }
-  },
-  render(_h) {
-    const { tabList } = this;
-    return (
-      <div class="chat-tabs--mini">
-        {tabList.map(item => {
-          const type = item.type;
-          const staticItem = this.getStaticByType(type);
-          const unreadCount = staticItem?.unreadCount || 0;
-          const isEnd = type == 'end';
-          const icon = item.icon;
-          const active = type === this.activeKey;
-          const classiflyLen = this.classifyList.length;
-          return (
-            <a-popover
-              destroyTooltipOnHide={true}
-              visible={classiflyLen > 0 && active && this.visible}
-              onVisibleChange={v => this.onVisibleChange(type, v)}
-              overlayClassName="chat-classifly-popover"
-              placement="rightTop"
-              title={`${item.name}筛选`}
-            >
-              <div key={type} class={['chat-tabs-type', active ? 'active' : '', icon ? 'has-icon' : '']} onClick={() => this.toggleType(type)}>
-                {unreadCount ? <div class="chat-msg-num">{unreadCount > 99 ? `${unreadCount}+` : unreadCount}</div> : null}
-                {icon ? <SvgIcon iconClass={icon} /> : null}
-                <div class="chat-type-name"> {item.name} </div>
-                {!isEnd && <div>{staticItem.peopleCount} 人</div>}
-              </div>
-              <div slot="content" class="chat-mini-classify">
-                {this.classifyList.map(classify => {
-                  const cid = classify.classify;
-                  const cnum = classify.count;
-                  const isStatistic = classify.isStatistic === 'Y';
-                  return (
-                    <div key={cid} class={['chat-classify-item', this.classify === cid ? 'active' : '']} onClick={() => this.toggleClassify(cid)}>
-                      {classify.icon ? <SvgIcon iconClass={classify.icon} /> : null}
-                      <span class="chat-classify-name">{classify.name}</span>
-                      {isStatistic ? (isEnd ? this.handleOfflineClassifyCount(cid) + '人' : `${cnum}人`) : null}
-                    </div>
-                  );
-                })}
-              </div>
-            </a-popover>
-          );
-        })}
-        {this.$slots.default}
-      </div>
-    );
-  }
-};
-</script>
-<style lang="less">
-.chat-tabs--mini {
-  text-align: center;
-  padding: 0 0 12px;
-  border-bottom: 1px solid #d5d5d5;
-  margin-top: -8px;
-  overflow: hidden;
-  .chat-tabs-type {
-    margin-top: 8px;
-    text-align: center;
-    padding: 10px 4px;
-    font-size: 12px;
-    // line-height: 16px;
-    color: rgba(0, 0, 0, 0.6);
-    width: 62px;
-    cursor: pointer;
-    position: relative;
-    border-radius: 4px;
-    .svg-icon {
-      font-size: 20px;
-      background-color: #5585f5;
-      color: #5585f5;
-      margin-bottom: 5px;
-    }
-    .chat-type-name {
-      width: 100%;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-    &:hover {
-      background-color: #e6e6e6;
-    }
-    &.active {
-      background-color: #5585f5;
-      color: #fff;
-      .svg-icon {
-        color: #fff;
-      }
-    }
-    &.has-icon {
-      .chat-msg-num {
-        margin-left: -4px;
-      }
-    }
-    .chat-msg-num {
-      position: absolute;
-      left: 50%;
-      top: -2px;
-      margin-left: 6px;
-      width: 28px;
-      height: 28px;
-      font-size: 20px;
-      line-height: 28px;
-      text-align: center;
-      border-radius: 50%;
-      background: #e54949;
-      color: #fff;
-      transform: scale(0.5);
-    }
-  }
-}
-.chat-classifly-popover {
-  .ant-popover-title {
-    border-bottom: 0;
-    padding: 16px 16px 0;
-    font-size: 14px;
-    color: #212121;
-    line-height: 20px;
-  }
-  .ant-popover-content {
-    width: 300px;
-  }
-  .ant-popover-arrow {
-    display: none;
-  }
-  .chat-mini-classify {
-    margin-top: -8px;
-    overflow: auto;
-    max-height: 272px;
-  }
-  .chat-classify-item {
-    height: 60px;
-    border-radius: 4px;
-    border: 1px solid #e1e1e1;
-    font-size: 14px;
-    color: rgba(0, 0, 0, 0.6);
-    line-height: 17px;
-    margin-top: 8px;
-    padding: 14px 16px;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    .svg-icon {
-      font-size: 18px;
-      color: #fff;
-      padding: 7px;
-      background: #acacac;
-      border-radius: 5px;
-      width: 32px;
-      height: 32px;
-    }
-    .chat-classify-name {
-      flex: 1;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      font-size: 12px;
-      padding: 0 8px;
-    }
-    &:hover {
-      background: #f1f1f1;
-      border-color: #f1f1f1;
-    }
-    &.active {
-      border-color: #5585f5;
-      background: transparent;
-      .svg-icon {
-        background: #5585f5;
-      }
-    }
-  }
-}
-</style>

package/packages/multi-chat/components/classify-tabs.vue

@@ -1,185 +0,0 @@
-<template>
-  <div class="classify-tabs">
-    <a-icon v-show="showPrev" class="classify-icon left" type="left" @click="handlePrev" />
-    <div class="classify-wrapper" ref="wrapper">
-      <div class="classify-scroll" :style="{ transform: `translateX(${offset}px)` }">
-        <div
-          class="classify-item"
-          v-for="item in list"
-          :key="item.classify"
-          :class="{ active: item.classify === classify }"
-          @click="handleClick($event, item)"
-        >
-          <slot :item="item"></slot>
-        </div>
-      </div>
-    </div>
-    <a-icon v-show="showNext" class="classify-icon right" type="right" @click="handleNext" />
-  </div>
-</template>
-<script>
-import { Icon } from 'ant-design-vue';
-
-export default {
-  components: {
-    [Icon.name]:Icon
-  },
-  props: {
-    list: {
-      type: Array,
-      default: () => []
-    },
-    value: {
-      type: [String, Number],
-      default: ""
-    }
-  },
-  data() {
-    return {
-      classify: "",
-      offset: 0,
-      showPrev: false,
-      showNext: false
-    };
-  },
-  created() {
-    this.classify = this.value;
-  },
-  mounted() {
-    this.handleChange();
-  },
-  watch: {
-    list: {
-      handler() {
-        this.handleChange();
-      }
-    },
-    value: {
-      handler(v) {
-        if (this.classify !== v) {
-          this.classify = v;
-          this.handleChange();
-        }
-      }
-    }
-  },
-  methods: {
-    handleClick(event, { classify }) {
-      this.classify = classify;
-      this.$emit("input", classify);
-      const target = Array.from(event.path).find(item => {
-        const name = item.className || "";
-        return item.tagName.toLocaleUpperCase() == "DIV" && name && name.includes("classify-item");
-      });
-      this.handleScrollTarget(target);
-    },
-    handleScrollTarget(target) {
-      if (target) {
-        const wrapper = this.$refs.wrapper;
-        if (!wrapper) return;
-        const children = wrapper.children[0];
-        const { scrollWidth: sw, clientWidth: w } = children;
-        const max = sw - w;
-        const offset = target.offsetLeft * -1;
-        this.calcScroll(max, offset);
-      }
-    },
-    calcScroll(max, offset) {
-      const showPrev = offset < 0;
-      const showNext = max > 0 && offset > -max;
-      if (this.showPrev !== showPrev) {
-        const value = (showPrev ? -1 : 1) * 20;
-        max -= value;
-        this.showPrev = showPrev;
-      }
-      if (this.showNext !== showNext) {
-        const value = 20 * (showNext ? -1 : 1);
-        max -= value;
-        this.showNext = showNext;
-      }
-      offset = Math.min(Math.max(-max, offset), 0);
-      this.offset = offset;
-    },
-    handleScroll(flag) {
-      const wrapper = this.$refs.wrapper;
-      if (!wrapper) return;
-      const children = wrapper.children[0];
-      if (!children) return;
-      const { scrollWidth: sw, clientWidth: w } = children;
-      const max = sw - w;
-      const offset = this.offset + w * (flag ? 1 : -1);
-      this.calcScroll(max, offset);
-    },
-    handlePrev() {
-      this.handleScroll(true);
-    },
-    handleNext() {
-      this.handleScroll(false);
-    },
-    handleChange() {
-      this.$nextTick(() => {
-        const wrapper = this.$refs.wrapper;
-        if (!wrapper) {
-          this.offset = 0;
-        } else {
-          const target = wrapper.querySelector(".classify-item.active");
-          this.handleScrollTarget(target);
-        }
-      });
-    }
-  }
-};
-</script>
-<style lang="less" scoped>
-.classify-tabs {
-  display: flex;
-  align-items: center;
-  padding: 0 10px;
-  .classify-wrapper {
-    flex: 1;
-    overflow: hidden;
-  }
-  .classify-icon {
-    color: #969696;
-    font-size: 12px;
-    cursor: pointer;
-    &.left {
-      margin-right: 8px;
-    }
-    &.right {
-      margin-left: 8px;
-    }
-  }
-}
-.classify-scroll {
-  display: flex;
-  flex-wrap: nowrap;
-  transition: all 0.3s;
-  .classify-item {
-    text-align: left;
-    cursor: pointer;
-    white-space: nowrap;
-    line-height: 17px;
-    background: #f7f7f7;
-    border-radius: 14px;
-    color: #212121;
-    padding: 4px 12px;
-    &:hover {
-      background-color: #f0f0f0;
-    }
-    &.active {
-      color: @primary-color;
-      background: rgba(@primary-color, 0.1);
-      font-weight: 600;
-    }
-    & + .classify-item {
-      margin-left: 8px;
-    }
-    .name {
-      display: inline-block;
-      margin-left: 4px;
-      font-size: 12px;
-    }
-  }
-}
-</style>

package/packages/multi-chat/components/empty.vue

@@ -1,24 +0,0 @@
-<script>
-export default {
-  functional: true,
-  props: {
-    emptyRender: {
-      type: Function
-    },
-    noDataTip: {
-      type: String
-    },
-    noDataImg: {
-      type: String
-    }
-  },
-  render(_h, context) {
-    const props = context.props;
-    const emptyRender = props.emptyRender;
-    if (typeof emptyRender === "function") {
-      return emptyRender(props);
-    }
-    return <div>{props.noDataTip}</div>;
-  }
-};
-</script>

package/packages/multi-chat/components/modal-refuse-reason.vue

@@ -1,112 +0,0 @@
-<template>
-  <a-modal
-    wrapClassName="standard-modal standard-modal-white has-mask"
-    :title="i18nText('1.9.678')"
-    :visible="visible"
-    :maskClosable="false"
-    :width="400"
-    destroyOnClose
-    :okText="i18nText('1.9.326')"
-    @cancel="handleCancel"
-    @ok="handleOk"
-  >
-    <div class="reason-tips">{{ i18nText('1.1.6.7') + i18nText('1.9.678') }}</div>
-    <a-radio-group class="reason-options" v-model="reason">
-      <a-radio v-for="(item, i) in reasonList" :key="i" :value="i">
-        {{ item.text }}
-      </a-radio>
-      <a-radio key="-1" :value="-1">{{ i18nText('1.9.679') }}</a-radio>
-    </a-radio-group>
-    <div class="reason-remark">
-      <a-textarea v-model="remark" :disabled="reason != -1" :placeholder="i18nText('1.9.40') + i18nText('1.9.679')" :maxLength="100" :auto-size="{ minRows: 3, maxRows: 5 }" />
-      <div class="word-count">{{ i18nText('1.9.272') }}{{ remarkLen }}/100</div>
-    </div>
-  </a-modal>
-</template>
-<script>
-import { Input, Modal, Radio } from 'ant-design-vue';
-
-export default {
-  inject: ['i18nText'],
-  components: {
-    AModal: Modal,
-    [Radio.name]: Radio,
-    [Radio.Group.name]: Radio.Group,
-    [Input.TextArea.name]: Input.TextArea
-  },
-  props: {
-    visible: {
-      type: Boolean,
-      default: true
-    },
-    reasonList: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      reason: '',
-      remark: ''
-    };
-  },
-  computed: {
-    remarkLen() {
-      const v = this.remark;
-      return v ? v.length : 0;
-    }
-  },
-  watch: {
-    visible(v) {
-      if (v) {
-        this.reason = this.remark = '';
-      }
-    }
-  },
-  methods: {
-    handleCancel() {
-      this.$emit('update:visible', false);
-      this.$emit('cancel');
-    },
-    handleOk() {
-      const reason = this.reason;
-      if (reason || reason === 0) {
-        const v = reason < 0 ? this.remark : this.reasonList[this.reason]?.text;
-        this.$emit('ok', v);
-      } else {
-        this.$message.warning(this.i18nText('1.1.6.7') + this.i18nText('1.9.678'));
-      }
-    }
-  }
-};
-</script>
-<style lang="less" scoped>
-.reason-tips {
-  font-size: 14px;
-  color: #212121;
-  line-height: 20px;
-  margin-bottom: 16px;
-  &::before {
-    content: '*';
-    color: #e54949;
-  }
-}
-.reason-options .ant-radio-wrapper {
-  margin-bottom: 16px;
-}
-.reason-remark {
-  position: relative;
-  textarea {
-    padding-bottom: 30px;
-  }
-  .word-count {
-    position: absolute;
-    bottom: 8px;
-    right: 11px;
-    text-align: right;
-    color: #969696;
-    font-size: 12px;
-    line-height: 20px;
-  }
-}
-</style>