cnhis-design-vue 2.2.3 → 2.2.5

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

@@ -1,133 +0,0 @@
-<template>
-  <div class="chat-read-record" v-clickoutside="handleClickOutside">
-    <div class="chat-read-record__title">
-      <span>消息接收人列表</span>
-      <a-icon @click="handleClickOutside" type="close" />
-    </div>
-    <div>
-      <div class="chat-read-record__col">
-        <div class="chat-read-record__total">
-          <span class="chat-read-record__num">{{ record.unread.length }}</span>
-          人未读
-        </div>
-        <div class="chat-read-record__users">
-          <div class="chat-read-record__user" v-for="item in record.unread" :key="item.userId">
-            <Avatar customStyle="font-size:12px" :src="item.portrait" :size="24" :name="item.name" :len="2" />
-            <div class="chat-read-record__username">{{ item.name }}</div>
-          </div>
-        </div>
-      </div>
-      <div class="chat-read-record__col">
-        <div class="chat-read-record__total">
-          <span class="chat-read-record__num">{{ record.readed.length }}</span>
-          人已读
-        </div>
-        <div class="chat-read-record__users">
-          <div class="chat-read-record__user" v-for="item in record.readed" :key="item.userId">
-            <Avatar customStyle="font-size:12px" :src="item.portrait" :size="24" :name="item.name" :len="2" />
-            <div class="chat-read-record__username">{{ item.name }}</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import Avatar from './avatar.vue';
-import Clickoutside from '@/utils/clickoutside';
-import { Icon } from 'ant-design-vue';
-
-export default {
-  components: {
-    [Icon.name]: Icon,
-    Avatar
-  },
-  props: {
-    list: {
-      type: Array,
-      default: () => []
-    }
-  },
-  computed: {
-    record() {
-      const readed = [];
-      const unread = [];
-      this.list.forEach(item => {
-        item.readStatus === 'Y' ? readed.push(item) : unread.push(item);
-      });
-      return {
-        readed,
-        unread
-      };
-    }
-  },
-  directives: { Clickoutside },
-  methods: {
-    handleClickOutside() {
-      this.$emit('close');
-    }
-  }
-};
-</script>
-<style lang="less">
-.chat-read-record {
-  width: 430px;
-  background: #ffffff;
-  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-  border: 1px solid #d5d5d5;
-  &__title {
-    font-size: 16px;
-    color: #000000;
-    line-height: 22px;
-    padding: 15px;
-    border-bottom: 1px solid #e8e8e8;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  &__col {
-    width: 50%;
-    float: left;
-    & + & {
-      border-left: 1px solid #e8e8e8;
-    }
-  }
-  &__total {
-    padding: 10px 14px;
-    font-size: 14px;
-    color: #000000;
-    line-height: 28px;
-  }
-  &__num {
-    font-size: 20px;
-  }
-  &__users {
-    height: 234px;
-    overflow-y: auto;
-    padding: 0 8px;
-  }
-  &__user {
-    display: flex;
-    align-items: center;
-    padding: 4px 8px;
-    &:hover {
-      background: #f2f2f2;
-      border-radius: 4px;
-    }
-    & + & {
-      margin-top: 8px;
-    }
-  }
-  &__username {
-    flex: 1;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    font-size: 14px;
-    color: #212121;
-    line-height: 26px;
-    padding: 0 0 0 8px;
-  }
-}
-</style>

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

@@ -1,34 +0,0 @@
-<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 +0,0 @@
-<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/components/vuecmf-dialog.vue

@@ -1,323 +0,0 @@
-<template>
-  <div ref="vuecmf_dlg_ref" style="z-index: 2002; width: 100%; height: 100%;" class="cnhis-dialog-wrap">
-    <div class="title"></div>
-    <div class="cnhis-overlay-dialog" style="width: 100%; height: 100%; top: auto; bottom: 0px;">
-      <div class="cnhis-dialog is-draggable" aria-modal="true" role="dialog" aria-label="dialog" style="transform: translate(15px, 6px);" :style="{'width': width, 'margin-top': top}">
-        <div class="cnhis-dialog__header">
-          <div class="vuecmf_dlg_title" style="width: 90%;">{{title}}</div>
-          <div class="min_btn" title="最小化" style="display: block;" @click.stop="minScreen">—</div>
-          <div class="screen_btn" @click.stop="toggleScreen" v-if="fullscreen == true ">
-            <!-- <a-icon type="fullscreen" v-if=" fullscreen == false " /> -->
-            <a-icon type="copy" />
-          </div>
-        </div>
-        <div class="cnhis-dialog__body" :style="{ height: body_height}">
-          <slot></slot>
-          </div>
-        <a-icon v-if="show_close" type="close" class="vuecmf-dialog__headerbtn" @click="close"/>
-      </div>
-    </div>
-  </div>
-
-</template>
-
-<script >
-import { Icon } from 'ant-design-vue';
-export default {
-  name: 'vuecmf-dialog',
-  components: {
-    AIcon: Icon
-  },
-  props: {
-    isFullScreen: {
-      type: Boolean,
-      default: () => false
-    },
-    // 对话框标题
-    title: {
-      type: String,
-      default: '',
-    },
-    // 对话框宽度
-    width: {
-      type: String,
-      default: '80%'
-    },
-    // 对话框顶部相对于窗口的偏移距离
-    top: {
-      type: String,
-      default: '15vh'
-    },
-    // 是否显示关闭按钮
-    show_close: {
-      type: Boolean,
-      default: true
-    },
-    // 是否显示遮罩层
-    modal: {
-      type: Boolean,
-      default: true
-    },
-    // 关闭弹窗类型
-    type: {
-      type: String,
-      default: ''
-    },
-  },
-  data() {
-    return {
-      vuecmf_dlg_ref: '',
-      scrollbarRef: '',
-      dlg_width: '',
-      dlg_height: '',
-      dlg_transform: '',
-      dlg_margin: '',
-      is_min: false,
-      show_modal: true,
-      fullscreen: false,
-      height: '',
-      body_height: ''
-    }
-  },
-  computed: {
-  },
-  created() {
-  },
-  mounted() {
-    this.$nextTick(() => {
-      const vuecmf_dlg_ref = this.$refs.vuecmf_dlg_ref
-      let dlg = vuecmf_dlg_ref.querySelector('.cnhis-dialog')
-      let dlg_header = vuecmf_dlg_ref.querySelector('.cnhis-dialog__header')
-      if (this.isFullScreen) {
-        dlg.style.margin = '0'
-        dlg.style.transform = 'unset'
-        this.body_height = document.documentElement.clientHeight - dlg_header.clientHeight - 24 + 'px'
-      } else {
-        this.body_height = (document.documentElement.clientHeight - dlg.offsetTop * 2 - dlg_header.clientHeight - 24) + 'px'
-      }
-    })
-  },
-  methods: {
-    close() {
-      this.$emit('close', this.type)
-    },
-    setDlgHeight() {
-      const vuecmf_dlg_ref = this.$refs.vuecmf_dlg_ref
-      let dlg = vuecmf_dlg_ref.querySelector('.cnhis-dialog')
-      let dlg_header = vuecmf_dlg_ref.querySelector('.cnhis-dialog__header')
-      let dlg_body = vuecmf_dlg_ref.querySelector('.cnhis-dialog__body')
-      // let dlg_footer = vuecmf_dlg_ref.querySelector('.ant-modal-footer')
-
-      // 若是先前是最小化时
-      if(this.is_min){
-        dlg.style.width = this.dlg_width
-        dlg.style.height = this.dlg_height
-        dlg.style.transform = this.dlg_transform
-        dlg.style.margin = this.dlg_margin
-        dlg_body.style.display = 'block'
-        // dlg_footer.style.display = 'block'
-        vuecmf_dlg_ref.querySelector('.min_btn').style.display = ''
-        vuecmf_dlg_ref.querySelector('.vuecmf_dlg_title').style.width = '90%'
-        const overlay_dlg = vuecmf_dlg_ref.querySelector('.cnhis-overlay-dialog')
-        overlay_dlg.style.width = '100%'
-        overlay_dlg.style.height = '100%'
-        overlay_dlg.parentNode.style.width = '100%'
-        overlay_dlg.parentNode.style.height = '100%'
-      }
-
-      dlg_body.style.height = (document.documentElement.clientHeight - dlg.offsetTop*2 - dlg_header.clientHeight - 24) + 'px'
-
-      this.is_min = false
-      this.show_modal = true
-    },
-    toggleScreen () {
-      this.fullscreen = !this.fullscreen
-      setTimeout(() => {
-        this.setDlgHeight()
-        this.$emit('toggleScreen', this.fullscreen)
-      }, 100)
-    },
-    minScreen() {
-      const vuecmf_dlg_ref = this.$refs.vuecmf_dlg_ref
-      let dlg = vuecmf_dlg_ref.querySelector('.cnhis-dialog')
-      let dlg_body = vuecmf_dlg_ref.querySelector('.cnhis-dialog__body')
-      // let dlg_footer = vuecmf_dlg_ref.querySelector('.cnhis-dialog__footer')
-      vuecmf_dlg_ref.className = vuecmf_dlg_ref.className + ' isMini'
-
-      // 保存弹窗初始宽度及高度
-      this.dlg_width = dlg.style.width
-      this.dlg_height = dlg.style.height
-      this.dlg_transform = dlg.style.transform
-      this.dlg_margin = dlg.style.margin
-
-      dlg.style.width = '150px'
-      dlg.style.height = '40px'
-      dlg.style.margin = '0'
-      dlg.style.transform = 'unset'
-      dlg_body.style.display = 'none'
-      // dlg_footer.style.display = 'none'
-      vuecmf_dlg_ref.querySelector('.min_btn').style.display = 'none'
-      vuecmf_dlg_ref.querySelector('.vuecmf_dlg_title').style.width = '70px'
-
-      this.is_min = true
-      this.show_modal = false
-      this.fullscreen = true
-
-      const overlay_dlg = vuecmf_dlg_ref.querySelector('.cnhis-overlay-dialog')
-      overlay_dlg.style.width = '150px'
-      overlay_dlg.style.height = '40px'
-      overlay_dlg.parentNode.style.width = '150px'
-      overlay_dlg.parentNode.style.height = '40px'
-      overlay_dlg.style.top = 'auto'
-      overlay_dlg.style.bottom = 0
-      overlay_dlg.parentNode.style.top = 'auto'
-      overlay_dlg.parentNode.style.bottom = 0
-
-    }
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.cnhis-dialog-wrap {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 2000;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.45);
-  overflow: auto;
-  .cnhis-overlay-dialog {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    overflow: auto;
-  }
-  .cnhis-dialog {
-    font-size: 14px;
-    line-height: 24px;
-    position: relative;
-    margin: 15vh auto 50px;
-    background: #fff;
-    border-radius: 2px;
-    box-shadow: 0 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
-    box-sizing: border-box;
-    width: 50%;
-    .cnhis-dialog__header {
-      padding: 10px 15px 0!important;
-      position: relative!important;
-      margin-right: 16px;
-      word-break: break-all;
-      .vuecmf_dlg_title {
-        width: 90%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      .min_btn, .screen_btn {
-        color: var(--el-color-info);
-        position: absolute;
-        top: 12px;
-        cursor: pointer;
-        font-size: 13px;
-        width: 22px;
-        text-align: center;
-        height: 18px;
-      }
-      .min_btn {
-        right: 22px;
-        font-size: 8px;
-        line-height: 12px;
-      }
-      .screen_btn {
-        right: 22px;
-      }
-    }
-  }
-  .cnhis-dialog__body {
-    color: #606266;
-    font-size: 14px;
-    word-break: break-all;
-  }
-  .cnhis-dialog__body {
-    padding: 0 15px!important;
-    margin: 12px 0!important;
-    overflow-y: auto;
-  }
-  .vuecmf-dialog__headerbtn {
-    position: absolute;
-    top: 6px;
-    right: 0;
-    padding: 0;
-    width: 54px;
-    height: 54px;
-    background: 0 0;
-    border: none;
-    outline: 0;
-    cursor: pointer;
-    font-size: 16px;
-}
-}
-.isMini {
-  /deep/ .ant-modal-root {
-    width: 150px !important;
-    height: 80px !important;
-  }
-  /deep/ .ant-modal-header {
-    width: 150px !important;
-    height: 80px !important;
-  }
-  /deep/ .ant-modal-wrap {
-    top: auto;
-    bottom: 0;
-  }
-}
-
-.cnhis-dialog__header{
-  padding: 10px 15px 0 !important;
-  position: relative !important;
-  margin-right: 0 !important;
-}
-.vuecmf-dialog__headerbtn{
-  top: 15px !important;
-  right: 10px !important;
-  width: 22px !important;
-  height: 22px !important;
-  font-size: 16px !important;
-  text-align: center;
-}
-.vuecmf_dlg_title{
-  width: 90%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.min_btn {
-  margin-right: 8px;
-  vertical-align: center;
-}
-.min_btn, .screen_btn {
-  border: 0 !important;
-  color: rgba(0, 0, 0, 0.45);
-  cursor: pointer;
-  font-size: 14px !important;
-}
-.min_btn{
-  right: 35px !important;
-
-}
-.screen_btn {
-  right: 35px !important;
-}
-
-.cnhis-dialog__body{
-  padding: 0 15px  !important;
-  margin: 12px 0 !important;
-  overflow-y: auto;
-}
-
-</style>