iov-pro-components 0.0.3

package/src/packages/preview/src/image-viewer.vue

@@ -0,0 +1,366 @@
+<template>
+  <transition name="viewer-fade">
+    <div
+      ref="el-image-viewer__wrapper"
+      tabindex="-1"
+      class="image-viewer el-image-viewer__wrapper"
+      :style="{ 'z-index': zIndex }"
+    >
+      <div class="el-image-viewer__mask" />
+      <!-- CLOSE -->
+      <span
+        class="el-image-viewer__btn el-image-viewer__close image-viewer__close"
+        @click="hide"
+      >
+        <i class="iov-icon-close" />
+      </span>
+      <!-- ARROW -->
+      <template v-if="!isSingle">
+        <span
+          class="el-image-viewer__btn el-image-viewer__prev"
+          :class="{ 'is-disabled': isFirst }"
+          @click="prev"
+        >
+          <i
+            :class="{ 'is-disabled-icon': isFirst }"
+            class="iov-icon-left"
+          />
+        </span>
+        <span
+          class="el-image-viewer__btn el-image-viewer__next"
+          :class="{ 'is-disabled': isLast }"
+          @click="next"
+        >
+          <i
+            :class="{ 'is-disabled-icon': isLast }"
+            class="iov-icon-left"
+          />
+        </span>
+      </template>
+      <!-- ACTIONS -->
+      <div class="el-image-viewer__btn el-image-viewer__actions">
+        <div class="el-image-viewer__actions__inner">
+          <i
+            class="el-icon-zoom-out"
+            @click="handleActions('zoomOut')"
+          />
+          <i
+            class="el-icon-zoom-in"
+            @click="handleActions('zoomIn')"
+          />
+          <i
+            :class="mode.icon"
+            @click="toggleMode"
+          />
+          <i
+            class="el-icon-refresh-left"
+            @click="handleActions('anticlocelise')"
+          />
+          <i
+            class="el-icon-refresh-right"
+            @click="handleActions('clocelise')"
+          />
+        </div>
+      </div>
+      <!-- CANVAS -->
+      <div class="el-image-viewer__canvas">
+        <template v-for="(item, i) in urlList">
+          <img
+            v-if="!item.url && i === index "
+            ref="img"
+            :key="item"
+            class="el-image-viewer__img"
+            :src="currentImg"
+            :style="imgStyle"
+            @load="handleImgLoad"
+            @error="handleImgError"
+            @mousedown="handleMouseDown"
+          >
+          <section
+            v-else
+            :key="item.id"
+          >
+            <img
+              v-if="i === index"
+              ref="img"
+              class="el-image-viewer__img"
+              :src="currentImg.url || item.url"
+              :style="imgStyle"
+              @load="handleImgLoad"
+              @error="handleImgError"
+              @mousedown="handleMouseDown"
+            >
+            <div
+              v-if="i === index"
+              class="el-image-view__tools"
+            >
+              <span>{{ item.label }}</span><span>|</span><span>{{ i + 1 }}/{{ urlList.length }}</span>
+            </div>
+          </section>
+        </template>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { on, off } from 'iov-design/src/utils/dom'
+import { rafThrottle, isFirefox } from 'iov-design/src/utils/util'
+
+const Mode = {
+  CONTAIN: {
+    name: 'contain',
+    icon: 'el-icon-full-screen'
+  },
+  ORIGINAL: {
+    name: 'original',
+    icon: 'el-icon-c-scale-to-original'
+  }
+}
+
+const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel'
+
+export default {
+  name: 'ElImageViewer',
+
+  props: {
+    urlList: {
+      type: Array,
+      default: () => []
+    },
+    zIndex: {
+      type: Number,
+      default: 2000
+    },
+    onSwitch: {
+      type: Function,
+      default: () => {}
+    },
+    onClose: {
+      type: Function,
+      default: () => {}
+    },
+    initialIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  data() {
+    return {
+      index: this.initialIndex,
+      isShow: false,
+      infinite: true,
+      loading: false,
+      mode: Mode.CONTAIN,
+      transform: {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: false
+      }
+    }
+  },
+  computed: {
+    isSingle() {
+      return this.urlList.length <= 1
+    },
+    isFirst() {
+      return this.index === 0
+    },
+    isLast() {
+      return this.index === this.urlList.length - 1
+    },
+    currentImg() {
+      return this.urlList[this.index]
+    },
+    imgStyle() {
+      const { scale, deg, offsetX, offsetY, enableTransition } = this.transform
+      const style = {
+        transform: `scale(${scale}) rotate(${deg}deg)`,
+        transition: enableTransition ? 'transform .3s' : '',
+        'margin-left': `${offsetX}px`,
+        'margin-top': `${offsetY}px`
+      }
+      if (this.mode === Mode.CONTAIN) {
+        style.maxWidth = style.maxHeight = '100%'
+      }
+      return style
+    }
+  },
+  watch: {
+    index: {
+      handler: function(val) {
+        this.reset()
+        this.onSwitch(val)
+      }
+    },
+    currentImg() {
+      this.$nextTick(() => {
+        const $img = this.$refs.img[0]
+        if (!$img.complete) {
+          this.loading = true
+        }
+      })
+    }
+  },
+  mounted() {
+    this.deviceSupportInstall()
+    // add tabindex then wrapper can be focusable via Javascript
+    // focus wrapper so arrow key can't cause inner scroll behavior underneath
+    this.$refs['el-image-viewer__wrapper'].focus()
+    document.body.appendChild(this.$el)
+    document.body.addEventListener('click', this.clickOther, false)
+  },
+  destroyed() {
+    document.body.removeChild(this.$el)
+    document.body.removeEventListener('click', this.clickOther, false)
+  },
+  methods: {
+    hide() {
+      this.deviceSupportUninstall()
+      this.onClose()
+    },
+    deviceSupportInstall() {
+      this._keyDownHandler = rafThrottle(e => {
+        const keyCode = e.keyCode
+        switch (keyCode) {
+          // ESC
+          case 27:
+            this.hide()
+            break
+          // SPACE
+          case 32:
+            this.toggleMode()
+            break
+          // LEFT_ARROW
+          case 37:
+            this.prev()
+            break
+          // UP_ARROW
+          case 38:
+            this.handleActions('zoomIn')
+            break
+          // RIGHT_ARROW
+          case 39:
+            this.next()
+            break
+          // DOWN_ARROW
+          case 40:
+            this.handleActions('zoomOut')
+            break
+        }
+      })
+      this._mouseWheelHandler = rafThrottle(e => {
+        const delta = e.wheelDelta ? e.wheelDelta : -e.detail
+        if (delta > 0) {
+          this.handleActions('zoomIn', {
+            zoomRate: 0.015,
+            enableTransition: false
+          })
+        } else {
+          this.handleActions('zoomOut', {
+            zoomRate: 0.015,
+            enableTransition: false
+          })
+        }
+      })
+      on(document, 'keydown', this._keyDownHandler)
+      on(document, mousewheelEventName, this._mouseWheelHandler)
+    },
+    deviceSupportUninstall() {
+      off(document, 'keydown', this._keyDownHandler)
+      off(document, mousewheelEventName, this._mouseWheelHandler)
+      this._keyDownHandler = null
+      this._mouseWheelHandler = null
+    },
+    handleImgLoad() {
+      this.loading = false
+    },
+    handleImgError(e) {
+      this.loading = false
+      e.target.alt = '加载失败'
+    },
+    handleMouseDown(e) {
+      if (this.loading || e.button !== 0) return
+
+      const { offsetX, offsetY } = this.transform
+      const startX = e.pageX
+      const startY = e.pageY
+      this._dragHandler = rafThrottle(ev => {
+        this.transform.offsetX = offsetX + ev.pageX - startX
+        this.transform.offsetY = offsetY + ev.pageY - startY
+      })
+      on(document, 'mousemove', this._dragHandler)
+      on(document, 'mouseup', () => {
+        off(document, 'mousemove', this._dragHandler)
+      })
+
+      e.preventDefault()
+    },
+    reset() {
+      this.transform = {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: false
+      }
+    },
+    toggleMode() {
+      if (this.loading) return
+
+      const modeNames = Object.keys(Mode)
+      const modeValues = Object.values(Mode)
+      const index = modeValues.indexOf(this.mode)
+      const nextIndex = (index + 1) % modeNames.length
+      this.mode = Mode[modeNames[nextIndex]]
+      this.reset()
+    },
+    prev() {
+      if (this.isFirst) return
+      const len = this.urlList.length
+      this.index = (this.index - 1 + len) % len
+    },
+    next() {
+      if (this.isLast) return
+      const len = this.urlList.length
+      this.index = (this.index + 1) % len
+    },
+    handleActions(action, options = {}) {
+      if (this.loading) return
+      const { zoomRate, rotateDeg, enableTransition } = {
+        zoomRate: 0.2,
+        rotateDeg: 90,
+        enableTransition: true,
+        ...options
+      }
+      const { transform } = this
+      switch (action) {
+        case 'zoomOut':
+          if (transform.scale > 0.2) {
+            transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3))
+          }
+          break
+        case 'zoomIn':
+          transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3))
+          break
+        case 'clocelise':
+          transform.deg += rotateDeg
+          break
+        case 'anticlocelise':
+          transform.deg -= rotateDeg
+          break
+      }
+      transform.enableTransition = enableTransition
+    },
+    // 全局预览增加点击遮罩关闭预览效果
+    clickOther(e) {
+      if (e.target.getAttribute('class') === 'el-image-viewer__mask') {
+        document.querySelector('.el-image-viewer__close').click()
+      }
+    }
+  }
+}
+</script>

package/src/packages/preview/src/main.vue

@@ -0,0 +1,97 @@
+<template>
+  <div
+    v-loading.fullscreen.lock="loading"
+    element-loading-spinner="page-loading"
+    class="iov-pro-preview"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+import { getComponentConfig } from '@/utils/config-center'
+import showImageViewer from './eval-image-viewer'
+
+export default {
+  name: 'IovProPreview',
+  provide() {
+    const pageThis = this
+    return {
+      preview: pageThis.onPreview
+    }
+  },
+  data() {
+    return {
+      cachedData: {},
+      params: {},
+      loading: false
+    }
+  },
+  methods: {
+    /**
+     * 预览文件
+     * @param  {Object} file 文件
+     * @time 2025-05-09 09:27:11
+     */
+    async onPreview(file) {
+      // 获取request对象
+      const {
+        request,
+        imageViewer,
+        cacheTime
+      } = getComponentConfig('preview')
+      // 取出文件名称，uuid以及是否私有
+      const { name, uuid, isPrivate } = file
+      // 取出文件链接
+      let { url } = file
+      // 如果是私有桶
+      if (isPrivate) {
+        try {
+          // 如果之前请求过接口，且未过期
+          if (this.cachedData[uuid] && this.cachedData[uuid].expiresTime > Date.now()) {
+            url = this.cachedData[uuid]
+          } else {
+            // 展示loading框
+            this.loading = true
+            // 获取最新链接
+            url = await request({ uuid })
+            // 记录当前url，如果设置了过期时效
+            if (cacheTime) {
+              // 记录当前url以及过期时间
+              this.cachedData[uuid] = {
+                url,
+                expiresTime: Date.now() + cacheTime
+              }
+            }
+            // 关闭loading框
+            this.loading = false
+          }
+        } catch (error) {
+          // 关闭loading框
+          this.loading = false
+          console.error(error)
+          this.$message.error('获取文件链接失败，请重试')
+          return
+        }
+      }
+      // 取出扩展名
+      const ext = name.substring(name.lastIndexOf('.') + 1).toLowerCase()
+      // 如果当前是图片
+      if (['png', 'jpg', 'jpeg', 'webp', 'gif'].includes(ext)) {
+        // 展示文件预览器
+        showImageViewer({
+          style: {
+            zIndex: 3000,
+            ...(imageViewer?.style || {})
+          },
+          urlList: [url],
+          initialIndex: 0
+        })
+      } else {
+        // 新开窗口下载
+        window.open(url)
+      }
+    }
+  }
+}
+</script>

package/src/packages/request/index.js

@@ -0,0 +1,7 @@
+import Request from './src/main.vue'
+
+Request.install = function(Vue) {
+  Vue.component(Request.name, Request)
+}
+
+export default Request

package/src/packages/request/src/main.vue

@@ -0,0 +1,125 @@
+<script>
+import isEqual from 'lodash/isEqual'
+import cloneDeep from 'lodash/cloneDeep'
+import debounce from 'lodash/debounce'
+
+// 是否是空
+const isNil = val => [null, undefined, ''].includes(val)
+
+export default {
+  name: 'IovProRequest',
+  props: {
+    // 在api文档中定义的接口
+    api: {
+      type: Function,
+      default: null
+    },
+    // 接口请求入参
+    params: {
+      type: Object,
+      default: () => ({})
+    },
+    // 当params发生变化，是否重新请求接口
+    reloadOnParamsChange: {
+      type: Boolean,
+      default: true
+    },
+    // 接口请求必须的字段
+    requiredFields: {
+      type: [Array, String],
+      default: null
+    },
+    // 接口请求的阈值间隔
+    threshold: {
+      type: Number,
+      default: 50
+    },
+    // 接口没有加载成功前的默认值
+    default: {
+      type: [Array, Object],
+      default: null
+    }
+  },
+  data() {
+    return {
+      // 上一次的请求
+      oldParams: {},
+      // 接口是否在loading
+      loading: false,
+      // 接口响应字段
+      respData: this.default
+    }
+  },
+  watch: {
+    /**
+     * 如果当前值发生改变时，重新请求接口
+     * @time 2024-10-29 16:16:32
+     */
+    params() {
+      // 如果入参发生变化后无需重新请求
+      if (!this.reloadOnParamsChange) {
+        return
+      }
+      // 如果对象的值相等，则无需重新请求
+      if (isEqual(this.oldParams, this.params)) {
+        return
+      }
+      // 重新发起请求
+      this.onReload()
+    }
+  },
+  created() {
+    this.onReload = debounce(this.load.bind(this), this.threshold)
+  },
+  mounted() {
+    // 发起请求
+    this.onReload()
+  },
+  methods: {
+    /**
+     * 重新加载接口
+     * @time 2024-10-29 15:59:51
+     */
+    async load() {
+      // 如果当前传入api
+      if (!this.api) {
+        console.warn('【iov-pro-request】请传入api字段')
+        return
+      }
+      // 如果必填参数不全，则不可请求接口
+      if (this.requiredFields && this.requiredFields.some(fieldKey => isNil(this.params[fieldKey]))) {
+        console.warn('【iov-pro-request】请填写必填参数')
+        return
+      }
+      // 标记当前正在加载新接口
+      this.loading = true
+      // 前拷贝当前入参数据
+      this.oldParams = cloneDeep(this.params)
+      try {
+        // 开始查询数据
+        this.respData = await this.api(this.params)
+        // 当接口请求完成后，触发loaded方法
+        this.$emit('loaded', this.respData)
+      } catch (error) {
+        console.error(error)
+      }
+      // 标记当前正在加载新接口
+      this.loading = false
+    }
+  },
+  render() {
+    // 如果有默认插槽
+    if (this.$slots.default) {
+      return this.$slots.default
+    }
+    // 如果有作用域插槽
+    if (this.$scopedSlots.default) {
+      return this.$scopedSlots.default({
+        data: this.respData,
+        loading: this.loading
+      })
+    }
+    return null
+  }
+}
+</script>

package/src/packages/search-table/index.js

@@ -0,0 +1,7 @@
+import SearchTable from './src/main.vue'
+
+SearchTable.install = function(Vue) {
+  Vue.component(SearchTable.name, SearchTable)
+}
+
+export default SearchTable