@aochuang/common 1.0.0 → 1.0.126

package/common/viewer/util.js

@@ -0,0 +1,40 @@
+import Vue from 'vue'
+
+const viewerProps = Vue.observable({
+  value: null,
+  data: []
+})
+
+export function getViewerImageData () {
+  return viewerProps.data
+}
+
+export function setViewerImageData (data) {
+  viewerProps.data = data
+}
+
+export function setViewerCurrentImage (value) {
+  viewerProps.value = value
+}
+
+export function getViewerCurrentImage () {
+  return viewerProps.value
+}
+
+let _downloadMethod = null
+export function setDownloadMethod (downloadMethod) {
+  _downloadMethod = downloadMethod
+}
+
+export function getDownloadMethod () {
+  return _downloadMethod
+}
+
+let _formatterNameMethod = null
+export function setFormatterNameMethod (formatterNameMethod) {
+  _formatterNameMethod = formatterNameMethod
+}
+
+export function getFormatterNameMethod () {
+  return _formatterNameMethod
+}

package/common/viewer/viewer.vue

@@ -0,0 +1,607 @@
+<template>
+  <div class="ac-viewer">
+    <div class="ac-viewer__inner" ref="inner" v-show="show" :style="{'z-index': zIndex}">
+      <div class="ac-viewer__toolbar">
+        <div class="ac-viewer__toolbar-left">
+          <div class="ac-viewer__toolbar-item">
+            <div class="ac-viewer__title"><ui-icon name="image-line" :size="20"></ui-icon>{{currentImageName}}</div>
+          </div>
+        </div>
+        <div class="ac-viewer__toolbar-right">
+          <div class="ac-viewer__toolbar-item">
+            <div class="ac-viewer__toolbar-group">
+              <div class="ac-viewer__toolbar-btn" :class="{'is-loading': downloading}" @click="handleDownloadClick">
+                <ui-icon :name="downloading ? 'loading' : 'download-line'" :size="20"></ui-icon>
+              </div>
+            </div>
+          </div>
+          <div class="ac-viewer__toolbar-line"></div>
+          <div class="ac-viewer__toolbar-item">
+            <div class="ac-viewer__toolbar-btn is-compact" @click="handleCloseClick">
+              <ui-icon name="error" :size="24"></ui-icon>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="ac-viewer__main" ref="main" @click="handleMainClick">
+        <div class="ac-viewer__operate" @click.stop>
+          <div class="ac-viewer__operate-item" title="旋转" @click="handleRotateClick">
+            <ui-icon name="anticlockwise-2-line" :size="20"></ui-icon>
+          </div>
+          <div class="ac-viewer__operate-item" title="缩小" @click="handleZoomOutClick">
+            <ui-icon name="zoom-out-line" :size="20"></ui-icon>
+          </div>
+          <div class="ac-viewer__operate-item" title="放大" @click="handleZoomInClick">
+            <ui-icon name="zoom-in-line" :size="20"></ui-icon>
+          </div>
+          <div class="ac-viewer__operate-item" title="复位" @click="handleResetClick">
+            <ui-icon name="refresh-line" :size="20"></ui-icon>
+          </div>
+          <slot name="addon"></slot>
+        </div>
+        <div class="ac-viewer__arrow">
+          <div class="ac-viewer__arrow-prev" :class="{'is-disabled': disabledPrevBtn}" title="前一张" @click.stop="handlePrevClick">
+            <ui-icon name="arrow-left" :size="42"></ui-icon>
+          </div>
+          <div class="ac-viewer__arrow-next" :class="{'is-disabled': disabledNextBtn}" title="后一张" @click.stop="handleNextClick">
+            <ui-icon name="arrow-right" :size="42"></ui-icon>
+          </div>
+        </div>
+        <ul class="ac-viewer__hidden" ref="images">
+          <li
+            v-for="(item, index) in data"
+            :key="index"
+          >
+            <img :src="handleFormatSrc(item.thumbSrc || item.src)" :data-original="handleFormatSrc(item.src)" :alt="item.alt" @error="handleThumbImageError(item, $event)" />
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Viewer from 'viewerjs'
+import 'viewerjs/dist/viewer.css'
+import { downloadFile, getNameByFileUrl } from '../../utils/file'
+import { closest } from '../../utils/dom'
+import { setViewerImageData, setViewerCurrentImage, getDownloadMethod, getFormatterNameMethod } from './util'
+import { formatOssPath } from '@aochuang/common/utils/oss'
+import { PopupManager } from 'element-ui/lib/utils/popup';
+
+export default {
+  name: 'AcViewer',
+  props: {
+    value: {
+      type: [Number, String]
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    downloadMethod: {
+      type: Function
+    }
+  },
+  computed: {
+    show () {
+      return !!this.value
+    },
+    zIndex () {
+      return PopupManager.nextZIndex() || 2000
+    },
+    lastIndex () {
+      return this.data.length - 1
+    },
+    currentIndex () {
+      let index = -1 
+      this.data.some((v, i) => {
+        if (v.id === this.value) {
+          index = i
+          return true
+        }
+      })
+      return index
+    },
+    currentItem () {
+      const item = this.data[this.currentIndex]
+      if (!item) {
+        return
+      }
+      return item
+    },
+    currentImageName () {
+      if (!this.currentItem) {
+        return
+      }
+      if (this.currentItem.alt) {
+        return this.currentItem.alt
+      }
+      const mask = this.currentItem.id || this.currentItem.src || ''
+      const formatterNameMethod = getFormatterNameMethod()
+      if (formatterNameMethod) {
+        return formatterNameMethod(mask)
+      } else {
+        const ns = mask.substr(mask.lastIndexOf('/') + 1)
+        if (ns.lastIndexOf('?') >= 0) {
+          return ns.substr(0, ns.lastIndexOf('?'))
+        } else {
+          return ns
+        }
+      }
+    },
+    disabledPrevBtn () {
+      return this.currentIndex <= 0
+    },
+    disabledNextBtn () {
+      return this.currentIndex >= this.lastIndex
+    }
+  },
+  data () {
+    return {
+      downloading: false,
+      changing: false,
+      thumbImageErrorMap: Object.create(null)
+    }
+  },
+  watch: {
+    data () {
+      this.thumbImageErrorMap = Object.create(null)
+      this.update().then(() => {
+        this.view(this.value)
+      })
+    },
+    value (value) {
+      let index = -1
+      this.data.some((v, i) => {
+        if (v.src === this.value) {
+          index = i
+        }
+      })
+      this.currentIndex = index
+      this.view(value)
+    }
+  },
+  mounted () {
+    window.document.body.appendChild(this.$refs.inner)
+    this.getViewer()
+    this.update().then(() => {
+      this.view(this.value)
+    })
+  },
+  methods: {
+    getViewer (options) {
+      if (this.viewer) {
+        return this.viewer
+      }
+      this.viewer = new Viewer(this.$refs.images, Object.assign({
+        url: 'data-original',
+        inline: true,
+        button: false,
+        container: this.$refs.main,
+        title: false,
+        minZoomRatio: 0.02,
+        maxZoomRatio: 10,
+        backdrop: false,
+        transition: true,
+        toolbar: {
+          zoomIn: true,
+          zoomOut: false,
+          oneToOne: false,
+          reset: false,
+          prev: false,
+          play: false,
+          next: false,
+          rotateLeft: false,
+          rotateRight: false,
+          flipHorizontal: false,
+          flipVertical: false
+        },
+        zIndex: 99999,
+        hidden: () => {
+          this.hide()
+        },
+        view: (event) => {
+          if (!this.viewReady) {
+            return
+          }
+          const { index } = event.detail
+          const nextValue = this.data[index] ? this.data[index].id : null
+          if (nextValue === this.value) {
+            return
+          }
+          this.changing = true
+          this.$emit('input', nextValue)
+          this.$nextTick(() => {
+            this.changing = false
+          })
+        }
+      }, options))
+      window.document.addEventListener('keydown', this.handleDocumentKeydown)
+      this.$emit('open', {
+        value: this.value
+      })
+      return this.viewer
+    },
+    view (id) {
+      return new Promise((resolve, reject) => {
+        this.$nextTick(() => {
+          if (!id) {
+            reject('[Viewer]不合法的查看id')
+            return
+          }
+          let index = -1
+          this.data.some((v, i) => {
+            if (v.id === id) {
+              index = i
+              return true
+            }
+          })
+          if (index >= 0) {
+            this.getViewer().view(index)
+            resolve()
+          } else {
+            reject('[Viewer]id不存在此图片')
+          }
+        })
+      })
+    },
+    update () {
+      return new Promise((resolve, reject) => {
+        this.$nextTick(() => {
+          if (!this.viewer) {
+            return reject('[Viewer] 缺少viewer实例')
+          }
+          this.viewReady = false
+          this.viewer.update()
+          this.$nextTick(() => {
+            this.viewReady = true
+            resolve()
+          })
+        })
+      })
+    },
+    bindKeyboard (event) {
+      if (!this.viewer) {
+        return
+      }
+      var options = this.viewer.options
+      switch (event.keyCode || event.which || event.charCode) {
+        case 27:
+          if (this.viewer.played) {
+            this.viewer.stop()
+          } else {
+            this.hide()
+          }
+          break
+        case 32:
+          if (this.viewer.played) {
+            this.viewer.stop()
+          }
+          break
+        case 37:
+          this.viewer.prev(options.loop)
+          break
+        case 38:
+          event.preventDefault() // Zoom in
+          this.viewer.zoom(options.zoomRatio, true)
+          break
+        case 39:
+          this.viewer.next(options.loop)
+          break
+        case 40:
+          event.preventDefault() // Zoom out
+          this.viewer.zoom(-options.zoomRatio, true)
+          break
+        case 48:
+        case 49:
+          if (event.ctrlKey) {
+            event.preventDefault()
+            this.viewer.toggle()
+          }
+          break
+      }
+    },
+    handleMainClick (evt) {
+      if (!this.viewer) {
+        return
+      }
+      if (closest(evt.target, this.viewer.navbar) || closest(evt.target, this.viewer.image)) {
+        return
+      }
+      this.hide()
+    },
+    handleRotateClick () {
+      if (!this.viewer) {
+        return
+      }
+      this.viewer.rotate(-90)
+    },
+    handleZoomOutClick () {
+      if (!this.viewer) {
+        return
+      }
+      this.viewer.zoom(-0.2)
+    },
+    handleZoomInClick () {
+      if (!this.viewer) {
+        return
+      }
+      this.viewer.zoom(0.2)
+    },
+    handleResetClick () {
+      if (!this.viewer) {
+        return
+      }
+      this.viewer.reset()
+    },
+    handleNextClick () {
+      if (!this.viewer || this.disabledNextBtn) {
+        return
+      }
+      this.viewer.next()
+    },
+    handlePrevClick () {
+      if (!this.viewer || this.disabledPrevBtn) {
+        return
+      }
+      this.viewer.prev()
+    },
+    handleCloseClick () {
+      if (!this.viewer) {
+        return
+      }
+      this.viewer.hidden()
+    },
+    handleDocumentKeydown (event) {
+      this.bindKeyboard(event)
+    },
+    handleDownloadClick () {
+      if (this.downloading) {
+        return
+      }
+      if (!this.currentItem) {
+        return
+      }
+      const downloadMethod = this.downloadMethod || getDownloadMethod()
+      if (!downloadMethod) {
+        return
+      }
+      const rs = downloadMethod(this.currentItem.src, this.currentItem)
+      if (rs && rs.then) {
+        this.downloading = true
+        rs.then(rs => {
+          if (rs && rs.data) {
+            downloadFile(rs.data, getNameByFileUrl(this.currentItem.src, true))
+          }
+        }).finally(() => {
+          this.downloading = false
+        })
+      }
+    },
+    handleThumbImageError (item, evt) {
+      const target = evt && evt.target
+      if (!target) {
+        return
+      }
+      const errorSrc = target.getAttribute('src') || target.currentSrc || target.src
+      if (this.thumbImageErrorMap[errorSrc]) {
+        return
+      }
+      this.thumbImageErrorMap[errorSrc] = true
+
+      const fallbackSrc = this.handleFormatSrc(item.src)
+      if (!fallbackSrc || fallbackSrc === errorSrc) {
+        return
+      }
+      target.src = fallbackSrc
+      this.update()
+    },
+    hide () {
+      this.changing = true
+      this.downloading = false
+      setViewerImageData([])
+      setViewerCurrentImage(null)
+      this.$emit('input', null)
+      this.$nextTick(() => {
+        this.changing = false
+      })
+      if (!this.viewer) {
+        return
+      }
+      this.viewer.destroy()
+      this.viewer = null
+      window.document.removeEventListener('keydown', this.handleDocumentKeydown)
+      this.$emit('close')
+    },
+    handleFormatSrc (src) {
+      if (!src) {
+        return
+      }
+      return formatOssPath(src)
+    }
+  },
+  beforeDestroy () {
+    this.$el.appendChild(this.$refs.inner)
+    this.viewer && this.viewer.destroy()
+    window.document.removeEventListener('keydown', this.handleDocumentKeydown)
+  }
+}
+</script>
+<style lang="less">
+.ac-viewer__title{
+  font-size: 16px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  .ui-icon{
+    vertical-align: top;
+    display: inline-block;
+    margin-right: 6px;
+    margin-top: 1px;
+  }
+}
+.ac-viewer__hidden{
+  display: none;
+}
+.ac-viewer__toolbar{
+  background-color: #181818;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: 32px;
+  line-height: 32px;
+  box-sizing: content-box;
+  padding: 14px 16px;
+}
+.ac-viewer__toolbar-left,
+.ac-viewer__toolbar-right{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-width: 0;
+}
+.ac-viewer__toolbar-item{
+  min-width: 0;
+}
+.ac-viewer__toolbar-line{
+  height: 24px;
+  width: 1px;
+  background-color: rgba(255,255,255,.2);
+  margin: 0 15px;
+}
+.ac-viewer__toolbar-group{
+  display: flex;
+  flex-direction: row;
+  .ac-viewer__toolbar-btn{
+    border: 1px solid rgba(255,255,255,.2);
+    border-radius: 0;
+    &:first-child{
+      border-top-left-radius: 3px;
+      border-bottom-left-radius: 3px;
+    }
+    &:last-child{
+      border-top-right-radius: 3px;
+      border-bottom-right-radius: 3px;
+    }
+  }
+}
+.ac-viewer__toolbar-btn{
+  border: 1px solid transparent;
+  margin-left: -1px;
+  padding: 0 12px;
+  text-align: center;
+  cursor: pointer;
+  border-radius: 3px;
+  height: 32px;
+  line-height: 32px;
+  box-sizing: content-box;
+  transition: background-color .3s;
+  &:hover{
+    background-color: rgba(255,255,255,.1);
+  }
+  &.is-compact{
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+  &.is-loading {
+    cursor: not-allowed;
+    opacity: .7;
+  }
+}
+.ac-viewer__inner{
+  display: flex;
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2000;
+  flex-direction: column;
+  color: #fff;
+  background-color: rgba(0,0,0,.85);
+}
+.ac-viewer__main{
+  flex: 1;
+  position: relative;
+  .viewer-backdrop{
+    background-color: rgba(0,0,0,.85);
+  }
+  .viewer-toolbar{
+    height: 80px;
+    box-sizing: content-box;
+    ul {
+      display: none;
+    }
+  }
+  .viewer-navbar{
+    background-color: rgba(0,0,0,.85);
+    padding: 12px 0;
+  }
+  .viewer-list{
+    height: 42px;
+    box-sizing: content-box;
+  }
+  .viewer-list > li{
+    width: 42px;
+    height: 42px;
+    box-sizing: content-box;
+    margin-left: 0;;
+    padding-left: 4px;
+    border-left: 3px solid transparent;
+    border-right: 3px solid transparent;
+  }
+}
+.ac-viewer__arrow-next,
+.ac-viewer__arrow-prev{
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 40;
+  margin-top: -80px;
+  padding: 12px 6px;
+  transition: background-color .3s;
+  border-radius: 3px;
+  cursor: pointer;
+  &:hover:not(.is-disabled){
+    background-color: rgba(0,0,0,.85);
+  }
+  &.is-disabled{
+    cursor: not-allowed;
+    opacity: .2;
+  }
+}
+.ac-viewer__arrow-prev{
+  left: 60px;
+}
+.ac-viewer__arrow-next{
+  right: 60px;
+}
+.ac-viewer__operate{
+  position: absolute;
+  bottom: 100px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: row;
+  z-index: 10;
+  padding: 6px 3px;
+  background-color: rgba(0,0,0,.85);
+  border-radius: 3px;
+}
+.ac-viewer__operate-item{
+  min-width: 24px;
+  height: 24px;
+  line-height: 24px;
+  box-sizing: content-box;
+  text-align: center;
+  padding: 8px;
+  transition: all .3s;
+  border-radius: 2px;
+  margin: 0 3px;
+  cursor: pointer;
+  &:hover{
+    background-color: rgba(255,255,255,.1);
+  }
+}
+</style>

package/common/viewer-pedestal/index.js

@@ -0,0 +1,3 @@
+import ViewerPedestal from './viewer-pedestal'
+
+export default ViewerPedestal

package/common/viewer-pedestal/viewer-pedestal.vue

@@ -0,0 +1,70 @@
+<template>
+  <ac-viewer 
+    v-if="viewerImageData && viewerImageData.length" 
+    :download-method="innerDownloadMethod" 
+    :data="viewerImageData" 
+    :value="viewerCurrentImage" 
+    @input="handleViewerCurrentChange"
+    @close="handleClose"
+    @open="handleOpen"
+  >
+    <template slot="addon">
+      <slot name="addon" :image-data="viewerImageData" :current-image-item="viewerCurrentImageItem"></slot>
+    </template>
+  </ac-viewer>
+</template>
+<script>
+import AcViewer, { getViewerImageData, getViewerCurrentImage, setViewerCurrentImage } from '../viewer'
+
+export default {
+  name: 'BiViewerPedestal',
+  components: {
+    AcViewer
+  },
+  props: {
+    downloadMethod: {
+      type: Function
+    }
+  },
+  computed: {
+    viewerImageData () {
+      return getViewerImageData()
+    },
+    viewerCurrentImage () {
+      return getViewerCurrentImage()
+    },
+    viewerCurrentImageItem () {
+      return (this.viewerImageData || []).find(v => v.id === this.viewerCurrentImage)
+    },
+    innerDownloadMethod () {
+      if (!this.downloadMethod) {
+        return
+      }
+      return (src, imageItem) => {
+        return this.downloadMethod({
+          src,
+          imageItem
+        })
+      }
+    }
+  },
+  methods: {
+    handleViewerCurrentChange (id) {
+      setViewerCurrentImage(id)
+      this.$emit('change', {
+        imageData: this.viewerImageData,
+        imageItem: this.viewerImageData.find(v => v.id === id)
+      })
+    },
+    handleClose () {
+      this.$emit('close')
+    },
+    handleOpen (evt) {
+      this.$emit('open', {
+        value: evt.value,
+        imageItem: (this.viewerImageData || []).find(v => v.id === evt.value)
+      })
+    }
+  }
+}
+</script>