@aochuang/common 1.0.0 → 1.0.126

package/common/scroll-load-more/scroll-load-more.vue

@@ -0,0 +1,397 @@
+<template>
+  <div class="ac-scroll-load-more" :class="{'is-full': isFull, 'is-empty': !items || !items.length}">
+    <div class="ac-scroll-load-history__more" v-if="enableHistory && items && items.length">
+      <span class="ac-scroll-load-history__more-loading" v-if="historyLoading"><ui-icon name="loading"></ui-icon> 数据加载中</span>
+      <template v-else-if="notMoreHistory">
+        <span class="ac-scroll-load-history__more-complete">没有更多历史数据~</span>
+      </template>
+      <span class="ac-scroll-load-history__more-load" v-else @click="handleLoadMoreHistoryClick">点击加载更多历史数据</span>
+    </div>
+    <div class="ac-scroll-load-more__list">
+      <div
+        class="ac-scroll-load-more__item"
+        :style="itemStyle"
+        v-for="(item, index) in items"
+        :key="index"
+        :ref="idField ? `item-${item[idField]}` : ''"
+      >
+        <slot name="item" :item="item" :index="index"></slot>
+      </div>
+    </div>
+    <div class="ac-scroll-load-more__more" v-if="items && items.length">
+      <span class="ac-scroll-load-more__more-loading" v-if="loading"><ui-icon name="loading"></ui-icon> 数据加载中</span>
+      <template v-else-if="notMore">
+        <span class="ac-scroll-load-more__more-complete" v-if="items && items.length > pageSize">{{ emptyText }}</span>
+      </template>
+      <span class="ac-scroll-load-more__more-load" v-else @click="handleLoadMoreClick">点击加载更多数据</span>
+    </div>
+    <template v-else>
+      <template v-if="loading">
+        <!-- <div
+          class="ac-scroll-load-more__loading-item"
+          v-for="item in 6"
+          :key="item"
+        >
+          <slot name="skeleton"></slot>
+        </div> -->
+        <slot name="loading">
+          <div class="ac-scroll-load-more__loading">
+            <ui-icon name="loading" :size="36"></ui-icon> 数据加载中
+          </div>
+        </slot>
+      </template>
+      <div class="ac-scroll-load-more__empty" v-else>
+        <slot name="empty">
+          <ui-empty icon="activity-line" text="暂无相关数据"></ui-empty>
+        </slot>
+        <!-- <ui-empty icon="device" text="暂无设备数据"></ui-empty> -->
+      </div>
+    </template>
+  </div>
+</template>
+<script>
+import { Empty as UiEmpty } from '../../components'
+import { getScrollParent } from '../../utils/dom'
+
+export default {
+  name: 'AcScrollLoadMore',
+  components: {
+    UiEmpty
+  },
+  props: {
+    height: {
+      type: String,
+      default: 'auto'
+    },
+    idField: {
+      type: String
+    },
+    span: {
+      type: Number,
+      default: 1
+    },
+    pageSize: {
+      type: Number,
+      default: 18
+    },
+    checkMore: {
+      type: Boolean,
+      default: true
+    },
+    loadMoreText: {
+      type: String,
+      default: '点击加载更多数据'
+    },
+    emptyText: {
+      type: String,
+      default: '数据已加载完毕'
+    },
+    enableHistory: {
+      type: Boolean,
+      default: false
+    },
+    autoLoad: {
+      type: Boolean,
+      default: true
+    },
+    // 数据有变化时自动滚到最新
+    autoScrollNew: {
+      type: Boolean,
+      defualt: false
+    },
+    data: {
+      type: Array
+    },
+    queryMethod: {
+      type: Function
+    },
+    isDelete: {
+      type: [Number, Boolean],
+      default: 0
+    }
+  },
+  data () {
+    return {
+      pageIndex: 0,
+      loading: false,
+      notMore: false,
+      historyLoading: false,
+      notMoreHistory: false,
+      items: this.data || []
+    }
+  },
+  computed: {
+    isFull () {
+      return this.height === '100%'
+    },
+    itemStyle () {
+      const style = {}
+      if (this.span && this.span !== 1) {
+        const span = this.span || 1
+        const colSpan = (100 / span) + '%'
+        style.width = colSpan
+        style.float = 'left'
+      }
+      return style
+    }
+  },
+  watch: {
+    data () {
+      this.items = this.data || []
+    }
+  },
+  created () {
+    if (this.autoLoad) {
+      this.reload()
+    }
+  },
+  mounted () {
+    this.parentScrollEl = getScrollParent(this.$el)
+    this.parentScrollEl.addEventListener('scroll', this.handleParentScroll)
+  },
+  methods: {
+    handleLoadMoreHistoryClick () {
+      this.loadData(false).then(rs => {
+        this.items = (rs || []).concat(this.items)
+        this.$emit('load', {
+          data: this.items
+        })
+      })
+    },
+    handleParentScroll (evt) {
+      if (this.loading) {
+        return
+      }
+      if (this.disabledScrollLoad) {
+        return
+      }
+      const scrollTop = evt.target.scrollTop + evt.target.clientHeight
+      if (evt.target.scrollHeight - 10 <= scrollTop) {
+        if (this.lastScrollTop === scrollTop) {
+          return
+        }
+        this.lastScrollTop = scrollTop
+        this.loadMoreData()
+      }
+    },
+    handleLoadMoreClick () {
+      if (this.loading) {
+        return
+      }
+      this.loadMoreData()
+    },
+    reload () {
+      this.pageIndex = 0
+      this.notMore = false
+      this.items = []
+      this.parentScrollEl && (this.parentScrollEl.scrollTop = 0)
+      return this.loadData().then((data) => {
+        this.items = data || []
+        this.$emit('load', {
+          data: this.items
+        })
+        if (this.autoScrollNew && this.idField && data && data.length) {
+          this.$nextTick(() => {
+            this.scrollTo(data[data.length - 1][this.idField])
+          })
+        }
+      })
+    },
+    loadMoreData () {
+      if (this.notMore) {
+        return
+      }
+      this.pageIndex++
+      return this.loadData().then(rs => {
+        this.items = [].concat(this.items, rs)
+        this.$emit('load', {
+          data: this.items
+        })
+        if (this.autoScrollNew && this.idField && rs && rs.length) {
+          this.$nextTick(() => {
+            this.scrollTo(rs[rs.length - 1][this.idField])
+          })
+        }
+      })
+    },
+    scrollTo (id) {
+      const key = `item-${id}`
+      if (!this.$refs[key]) {
+        return
+      }
+      if (this.parentScrollEl) {
+        this.disabledScrollLoad = true
+        this.parentScrollEl.scrollTop = this.$refs[key][0].offsetTop
+        this._scrollTimer = setTimeout(() => {
+          this.disabledScrollLoad = false
+        })
+      }
+    },
+    removeItem (index) {
+      this.items.splice(index, 1)
+    },
+    loadData (isDown = true) {
+      if (!this.queryMethod) {
+        return Promise.reject()
+      }
+      if (isDown) {
+        this.loading = true
+      } else {
+        this.historyLoading = true
+      }
+      let relativeItem = null
+      if (this.items && this.items.length) {
+        if (isDown) {
+          relativeItem = this.items[this.items.length - 1]
+        } else {
+          relativeItem = this.items[0]
+        }
+      }
+      const params = {}
+      if (this.pageSize) {
+        params.pageIndex = this.pageIndex
+        params.pageSize = this.pageSize
+      }
+      return this.queryMethod(params, relativeItem, isDown).then((data) => {
+        if (!this.pageSize) {
+          this.notMore = true
+        } else {
+          if (isDown) {
+            if (this.checkMore && data.length < this.pageSize) {
+              this.notMore = true
+            }
+          } else {
+            if (data.length < this.pageSize) {
+              this.notMoreHistory = true
+            }
+          }
+        }
+        return data
+      }).finally(() => {
+        if (isDown) {
+          this.loading = false
+        } else {
+          this.historyLoading = false
+        }
+      })
+    }
+  },
+  beforeDestroy () {
+    clearTimeout(this._scrollTimer)
+    this.parentScrollEl && this.parentScrollEl.removeEventListener('scroll', this.handleParentScroll)
+  }
+}
+</script>
+<style lang="less">
+.ac-scroll-load-more{
+  position: relative;
+  &.is-full {
+    height: 100%;
+    .ac-scroll-load-more__empty{
+      padding-top: 0;
+    }
+    &.is-empty{
+      .ac-scroll-load-more__loading{
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+      }
+    }
+  }
+}
+.ac-scroll-load-more__list{
+  &:after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+}
+.ac-scroll-load-more__item {
+  box-sizing: border-box;
+  position: relative;
+  .friend_item-del-icon {
+    font-style: normal;
+    position: absolute;
+    top: 12px;
+    right: 3px;
+    font-size: 12px;
+    transform: rotateZ(-30deg);
+    z-index: 1;
+  }
+}
+.ac-scroll-load-more__more{
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #999;
+}
+.ac-scroll-load-more__more-loading,
+.ac-scroll-load-more__more-load,
+.ac-scroll-load-more__more-complete {
+  padding-bottom: 20px;
+  padding-top: 12px;
+}
+.ac-scroll-load-more__more-load{
+  cursor: pointer;
+  &:hover {
+    color: #52a1e4;
+  }
+}
+.ac-scroll-load-more__empty{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-top: 60px;
+  height: 100%;
+}
+.ac-scroll-load-more__loading {
+  text-align: center;
+  color: #999;
+  padding-top: 60px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  box-sizing: border-box;
+  .ui-icon {
+    width: 36px;
+    height: 36px;
+    text-align: center;
+    line-height: 36px;
+  }
+  &:after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+}
+.ac-scroll-load-more__loading-item{
+  padding: 8px;
+  box-sizing: border-box;
+}
+.ac-scroll-load-history__more{
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #999;
+}
+.ac-scroll-load-history__more-loading,
+.ac-scroll-load-history__more-load,
+.ac-scroll-load-history__more-complete {
+  padding-bottom: 20px;
+  padding-top: 12px;
+}
+.ac-scroll-load-history__more-load{
+  cursor: pointer;
+  &:hover {
+    color: #52a1e4;
+  }
+}
+</style>

package/common/static-map/index.js

@@ -0,0 +1,3 @@
+import StaticMap from './static-map'
+
+export default StaticMap

package/common/static-map/static-map.vue

@@ -0,0 +1,87 @@
+<template>
+  <component :is="enableLink ? 'a' : 'div'" target="_blank" :href="mapHref" class="bi-static-map" :style="style">
+    <img v-if="isVisible && ready" :src="mapUrl" alt="地图" />
+  </component>
+</template>
+<script>
+import { md5 } from '../../utils/string'
+
+export default {
+  name: 'BiStaticMap',
+  props: {
+    width: {
+      type: String,
+      default: '400'
+    },
+    height: {
+      type: String,
+      default: '300'
+    },
+    mapKey: {
+      type: String
+    },
+    enableLink: {
+      type: Boolean,
+      default: false
+    },
+    lng: {
+      type: [String, Number]
+    },
+    lat: {
+      type: [String, Number]
+    }
+  },
+  data () {
+    return {
+      ready: false,
+      sign: null
+    }
+  },
+  computed: {
+    mapHref () {
+      return `https://apis.map.qq.com/uri/v1/geocoder?coord=${this.center}&referer=workphone`
+    },
+    isVisible () {
+      return !!(this.lng && this.lat)
+    },
+    center () {
+      return `${this.lat},${this.lng}`
+    },
+    size () {
+      return `${this.width}*${this.height}`
+    },
+    style () {
+      return {
+        width: this.width + 'px',
+        height: this.height + 'px'
+      }
+    },
+    encryptUrl () {
+      return `/ws/staticmap/v2/?center=${this.center}&key=${this.mapKey}&markers=color:blue|${this.center}&size=${this.size}&zoom=15pIwHI3PGMl0wtRP7Zvj1kqlXlQiVej7B`
+    },
+    mapUrl () {
+      return `https://apis.map.qq.com/ws/staticmap/v2/?size=${this.size}&key=${this.mapKey}&center=${this.center}&markers=color:blue|${this.center}&zoom=15&sig=${this.sign}`
+    }
+  },
+  created () {
+    this.ready = false
+    if (!this.mapKey) {
+      throw new Error('缺少腾讯地图授权key配置')
+    }
+    md5(this.encryptUrl).then(rs => {
+      this.sign = rs
+      this.ready = true
+    }, () => {
+      this.ready = true
+    })
+    this.$emit('map-created', {
+      mapHref: this.mapHref
+    })
+  }
+}
+</script>
+<style lang="less">
+.bi-static-map{
+  background-color: #f1f0f5;
+}
+</style>

package/common/tips/index.js

@@ -0,0 +1,7 @@
+import AcTips from './tips'
+
+AcTips.install = (Vue) => {
+  Vue.component(AcTips.name, AcTips)
+}
+
+export default AcTips

package/common/tips/tips.vue

@@ -0,0 +1,82 @@
+<script>
+export default {
+  name: 'AcTips',
+  functional: true,
+  props: {
+    showIcon: {
+      type: Boolean,
+      default: true
+    },
+    type: {
+      type: String,
+      default: 'info',
+      validator (value) {
+        return ['info', 'warning'].includes(value)
+      }
+    },
+    title: {
+      type: String
+    },
+    bgColor: {
+      type: Boolean,
+      default: false
+    },
+    inline: {
+      type: Boolean,
+      default: false
+    }
+  },
+  render (h, context) {
+    const { props, data } = context
+    return h('div', {
+      class: ['ac-tips', 'ac-tips--' + props.type, { 'is-bgcolor': props.bgColor, 'is-inline': props.inline }, data.staticClass]
+    }, [
+      h('span', {
+        class: 'ac-tips__title'
+      }, [
+        props.showIcon ? h('ui-icon', {
+          props: {
+            name: props.type === 'warning' ? 'alert-fill1' : 'error-warning-line'
+          }
+        }) : null,
+        props.title ? h('span', {
+          class: 'ac-tips__title-text'
+        }, [props.title]) : null
+      ]),
+      h('div', {
+        class: 'ac-tips__main'
+      }, [context.slots().default])
+    ])
+  }
+}
+</script>
+<style lang="less">
+.ac-tips{
+  line-height: 24px;
+  padding: 4px 0;
+  display: flex;
+  flex-direction: row;
+  .ui-icon{
+    margin-right: 3px;
+    vertical-align: top;
+    display: inline-block;
+  }
+  &.is-bgcolor{
+    background-color: #f3f3f3;
+    border-radius: 3px;
+    padding: 6px 12px;
+  }
+  &.is-inline{
+    display: inline-block;
+  }
+}
+.ac-tips__title-text {
+  margin-right: 6px;
+}
+.ac-tips--warning {
+  color: #E6A23C;
+}
+.ac-tips--tips {
+  color: #999;
+}
+</style>

package/common/tooltip/index.js

@@ -0,0 +1,7 @@
+import Tooltip from './tooltip'
+
+Tooltip.install = (Vue) => {
+  Vue.component(Tooltip.name, Tooltip)
+}
+
+export default Tooltip

package/common/tooltip/popper.js

@@ -0,0 +1,18 @@
+import Vue from 'vue'
+import UiTooltip from '../../components/tooltip'
+
+const TooltipConstructor = Vue.extend(UiTooltip)
+
+let tooltip = null
+
+export function getTooltip () {
+  if (!tooltip) {
+    const $mound = document.createElement('div')
+    tooltip = new TooltipConstructor({
+      el: $mound
+    })
+    tooltip.manual = true
+    document.body.appendChild($mound)
+  }
+  return tooltip
+}

package/common/tooltip/tooltip.vue

@@ -0,0 +1,75 @@
+<script>
+import { getTooltip } from './popper'
+
+let _timer = null
+
+export default {
+  name: 'BiTooltip',
+  functional: true,
+  props: {
+    text: {
+      type: String
+    },
+    html: {
+      type: String
+    },
+    inline: {
+      type: Boolean,
+      default: false
+    }
+  },
+  render (h, context) {
+    if (!context.props.text && !context.props.html) {
+      return context.scopedSlots.default ? context.scopedSlots.default() : null
+    }
+    return h('span', {
+      class: ['bi-tooltip'].concat(context.data.class || '', context.data.staticClass || '', {'is-inline': context.props.inline}),
+      attrs: context.data.attrs,
+      on: {
+        ...context.listeners,
+        mouseenter (e) {
+          clearTimeout(_timer)
+          const tooltip = getTooltip()
+          tooltip.visible = true
+          tooltip.content = context.props.text
+          tooltip.html = context.props.html
+          tooltip.setReferenceElm(e.target)
+        },
+        mouseleave () {
+          clearTimeout(_timer)
+          const tooltip = getTooltip()
+          tooltip.visible = false
+        },
+        click (evt) {
+          // 有些场景点击之后元素就从dom移除了，但是toolip还在，所以需要这么处理一下
+          clearTimeout(_timer)
+          _timer = setTimeout(() => {
+            if (!document.body.contains(evt.target)) {
+              const tooltip = getTooltip()
+              tooltip.visible = false
+            }
+          }, 300)
+        }
+      }
+    }, [
+      context.children
+    ])
+  }
+}
+</script>
+<style lang="less">
+body {
+  .el-tooltip__popper{
+    white-space: pre-wrap;
+  }
+}
+.bi-tooltip{ 
+  &:not(.is-inline){
+    display: inline-block;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+  }
+}
+</style>

package/common/viewer/index.js

@@ -0,0 +1,4 @@
+import Viewer from './viewer'
+
+export * from './util'
+export default Viewer