three-trees-ui 1.1.0 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "three-trees-ui",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "publicPath": "/ui",
   "author": "hotent",
   "private": false,
@@ -33,6 +33,7 @@
   ],
   "dependencies": {
     "element-resize-detector": "^1.2.3",
+    "v-viewer": "1.6.4",
     "vee-validate": "2.1.7"
   },
   "peerDependencies": {
@@ -62,9 +63,9 @@
   },
   "devDependencies": {
     "@babel/core": "^7.19.0",
-    "@babel/runtime-corejs3": "^7.19.0",
     "@babel/plugin-transform-runtime": "^7.18.10",
     "@babel/preset-env": "^7.19.0",
+    "@babel/runtime-corejs3": "^7.19.0",
     "@vue/cli-plugin-babel": "^3.8.0",
     "@vue/cli-plugin-eslint": "^3.8.0",
     "@vue/cli-plugin-unit-jest": "^4.0.5",

package/packages/File/src/main.vue

@@ -96,9 +96,29 @@
       @remove="removeFile"
       @sort="handleSort"
     />
+    <!-- 图片预览组件 -->
+    <el-image
+      v-if="!isMobile"
+      v-show="false"
+      ref="previewImage"
+      :preview-src-list="[imgPreviewUrl]"
+    ></el-image>
+    <!-- 移动端图片 -->
+    <viewer
+      v-if="isMobile"
+      ref="viewerRef"
+      class="images"
+      :options="viewerOptions"
+      :images="imgList"
+      @inited="inited"
+    >
+      <img v-for="src in imgList" v-show="false" :key="src" :src="src" />
+    </viewer>
   </div>
 </template>
 <script>
+  import { component as viewer } from 'v-viewer'
+  import 'viewerjs/dist/viewer.css'
   import utils from '@/utils.js'
   import permission from '@/mixins/permission.js'
   import inputName from '@/mixins/inputName.js'
@@ -115,13 +135,20 @@
 
   export default {
     name: 'HtFile',
-    components: { HtFieldTail, FileUpload, FileTable, FileList, FileCard },
+    components: {
+      HtFieldTail,
+      FileUpload,
+      FileTable,
+      FileList,
+      FileCard,
+      viewer,
+    },
     mixins: [Locale, permission, inputName, form, mobileMode],
     props: {
       type: {
         type: String,
         default: 'table',
-        validator: function (value) {
+        validator: function(value) {
           return ['table', 'list', 'card'].indexOf(value) !== -1
         },
       },
@@ -223,6 +250,27 @@
     },
     data() {
       return {
+        $viewer: null, // viewer组件实例对象
+        viewerOptions: {
+          backdrop: true, // 是否启用播放模态背景[布尔值/字符串：默认true](不启用时，点击空白处不会退出播放，仅点击右上角关闭按钮才会退出播放)
+          inline: false, // 启用inline模式[布尔值：默认false]
+          button: true, // 显示右上角关闭按钮[布尔值：默认true]
+          navbar: false, // 显示缩略图导航[布尔值/数字：默认true]
+          title: false, // 显示当前图片的标题(显示alt属性或从URL解析出的图片名称)[布尔值/数字/方法/数组：默认true]
+          toolbar: true, // 显示工具栏、自定义工具栏[布尔值/数字/对象：默认true]
+          tooltip: true, // 显示缩放百分比[布尔值：默认true]
+          movable: true, // 图片是否可移动[布尔值：默认true]
+          zoomable: true, // 图片是否可缩放[布尔值：默认true]
+          rotatable: true, // 图片是否可旋转[布尔值：默认true]
+          scalable: true, // 图片是否可翻转[布尔值：默认true]
+          transition: true, // 使用CSS3过渡[布尔值：默认true]
+          fullscreen: true, // 播放时是否全屏[布尔值/全屏配置：默认true]
+          keyboard: true, // 是否支持键盘[布尔值：默认true]
+          url: 'src', // 播放时图片地址 URL 来源。[字符串/方法：默认src](如果是字符串，则应该是每个图像元素的属性之一。 如果是方法，则应该返回一个有效的图像URL)
+        },
+        index: null,
+        imgList: [],
+        imgPreviewUrl: '',
         writeable: true,
         temp: null,
         refreshFileUploadDebounce: _.debounce(this.refreshFileUpload, 200),
@@ -230,7 +278,7 @@
       }
     },
     computed: {
-      typeVal: function () {
+      typeVal: function() {
         return this.isSimple || this.simplicity ? 'list' : this.type
       },
       inputsContainerWidth() {
@@ -238,7 +286,7 @@
           ? { width: 'auto' }
           : {}
       },
-      actionUrlVal: function () {
+      actionUrlVal: function() {
         return this.actionUrl
           ? this.actionUrl
           : this.$requestConfig.uploadUrl
@@ -262,14 +310,14 @@
         }
         return baseUrl
       },
-      headerVal: function () {
+      headerVal: function() {
         return this.header
           ? this.header
           : this.$requestConfig.header
           ? this.$requestConfig.header()
           : null
       },
-      acceptType: function () {
+      acceptType: function() {
         if (this.accept) {
           const ary = []
           this.accept.split(',').forEach((m) => {
@@ -283,10 +331,10 @@
         }
         return null
       },
-      previewableVal: function () {
+      previewableVal: function() {
         return (this.inputWriteable && this.previewable) || this.allowPreview
       },
-      downloadableVal: function () {
+      downloadableVal: function() {
         return (this.inputWriteable && this.downloadable) || this.allowDownload
       },
     },
@@ -311,7 +359,14 @@
         this.inputVal = JSON.parse(this.value)
       }
     },
+    mounted() {},
     methods: {
+      /**
+       * 组件初始化完成，获取组件实例对象
+       */
+      inited(viewer) {
+        this.$viewer = viewer
+      },
       // 上传前做校验
       beforeUploadMethod(file) {
         if (
@@ -466,6 +521,49 @@
             })
         }
       },
+      customPreviewImg(fileId) {
+        this.$requestConfig
+          .request({
+            url: `${window.context.portal}/system/file/v1/preview?fileId=${fileId}`,
+            method: 'get',
+            responseType: 'blob',
+          })
+          .then((response) => {
+            if (response.size > 0) {
+              var blob = response
+              var reader = new FileReader()
+              let that = this
+              reader.readAsDataURL(blob)
+              reader.onload = function(e) {
+                that.imgPreviewUrl = e.target.result
+                if (that.isMobile) {
+                  that.imgList = [that.imgPreviewUrl]
+                  // 2、通过ref获取到对应节点，再通过$viewer属性获取对应的元素信息对象，继而调用方法显示
+                  that.$refs.viewerRef.$viewer.show()
+                  return
+                }
+                that.$refs.previewImage.clickHandler()
+              }
+            }
+          })
+      },
+      isImgFile(fileName) {
+        let fileType = fileName.split('.')[fileName.split('.').length - 1]
+        return [
+          'gif',
+          'jpg',
+          'jpeg',
+          'png',
+          'webp',
+          'svg',
+          'GIF',
+          'JPG',
+          'JPEG',
+          'PNG',
+          'WEBP',
+          'SVG',
+        ].includes(fileType)
+      },
       preview(file) {
         if (file.status !== 'success') {
           this.$message.warning(this.t('ht.file.forbiddenPreview'))
@@ -475,11 +573,21 @@
           // 当前组件未添加preview事件监听 并且 设置了全局预览方法
           if (!this._events.preview && this.$preview) {
             if (this.isMobile) {
-              this.$preview(file)
+              if (this.isImgFile(file.response.fileName)) {
+                this.customPreviewImg(file.response.fileId)
+              } else {
+                this.$preview(file)
+              }
             } else {
-              let token = this.$requestConfig.getToken().replace('Bearer ', '')
-              let url = `${window.context.front}/previewFile/${file.response.fileId}/${file.response.fileName}?token=${token}`
-              window.open(url, '_blank')
+              if (this.isImgFile(file.response.fileName)) {
+                this.customPreviewImg(file.response.fileId)
+              } else {
+                let token = this.$requestConfig
+                  .getToken()
+                  .replace('Bearer ', '')
+                let url = `${window.context.front}/previewFile/${file.response.fileId}/${file.response.fileName}?token=${token}`
+                window.open(url, '_blank')
+              }
             }
           } else {
             this.$emit('preview', file, this.inputVal)

package/packages/Preview/src/FrameViewer.vue

@@ -6,11 +6,10 @@
         v-else-if="contentType.indexOf('image') > -1"
         class="frame-viewer__img"
       >
-        <el-image
-          style="width: 100px; height: 100px"
+        <img
           :src="dataSrc"
-          :preview-src-list="[dataSrc]"
-        ></el-image>
+          :style="{ height: utils.isMobile() ? 'auto' : '100%' }"
+        />
       </div>
       <iframe
         v-else
@@ -125,12 +124,12 @@
           return
         }
         if (iframe.attachEvent) {
-          iframe.attachEvent('onload', function () {
+          iframe.attachEvent('onload', function() {
             that.setFrameBody(this.contentWindow.document)
             that.watermarkRender()
           })
         } else {
-          iframe.onload = function () {
+          iframe.onload = function() {
             that.setFrameBody(this.contentWindow.document)
             that.watermarkRender()
           }