cnhis-design-vue 2.1.78 → 2.1.80

package/packages/multi-chat/components/vuecmf-dialog.vue

@@ -1,323 +1,323 @@
-<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;
-}
-
+<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>

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;