【fix bug】67874 预览更改为viewer.js

jero-web/package.json

@@ -32,6 +32,7 @@
     "moment": "^2.29.4",
     "nprogress": "^0.2.0",
     "tinymce": "5.4.1",
+    "v-viewer": "^1.6.4",
     "viser-vue": "^2.4.8",
     "vue": "^2.6.10",
     "vue-area-linkage": "^5.1.0",

jero-web/src/components/jero/JImageUpload.vue

@@ -10,22 +10,21 @@
       :fileList="fileList"
       :beforeUpload="beforeUpload"
       :disabled="disabled"
-      :isMultiple="isMultiple"
-      :showUploadList="isMultiple"
       v-bind="$attrs"
+      :accept="accept"
       v-on="childListeners"
       @change="handleChange"
       @preview="handlePreview"
-      :class="!isMultiple?'imgupload':''">
+      :class="[!isMultiple?'imgupload':'', (!isMultiple && picUrl)?'image-upload-single-over':'' ]">
-      <div :style="{'width':(!isMultiple?'104px':'auto'),'height':(!isMultiple?'104px':'auto')}">
+      <div>
-        <img v-if="!isMultiple && picUrl" :src="getAvatarView()" style="width:100%;height:100%"/>
+        <!--<img v-if="!isMultiple && picUrl" :src="getAvatarView()" style="width:100%;height:100%"/>-->
-        <!--<img v-if="!isMultiple && picUrl" src="http://localhost:3000/jero-boot/sys/common/download/1379989167782797313?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MTc4NTA1OTgsInVzZXJuYW1lIjoiYWRtaW4ifQ.1xRpivI0TzTqAnISJICNm-PoMxSDUITH5uaEcvwheIQ&fullfilename=3.jpeg" style="width:100%;height:100%"/>-->
+        <div class="iconp">
-        <div v-else class="iconp">
           <a-icon :type="uploadLoading ? 'loading' : 'plus'" />
           <div class="ant-upload-text">{{ text }}</div>
         </div>
       </div>
     </a-upload>
+    <j-image-preview-modal ref="JImagePreviewModal"></j-image-preview-modal>
   </div>
 </template>
 
@@ -33,14 +32,15 @@
 import Vue from 'vue'
 import { ACCESS_TOKEN } from '@/store/mutation-types'
 import { getFileAccessHttpUrl } from '@/api/manage'
-
+import JImagePreviewModal from './modal/JImagePreviewModal'
 // const Base64 = require('js-base64').Base64
 
 const uidGenerator = () => {
-  return '-' + parseInt(Math.random() * 10000 + 1, 10)
+  return '-' + parseInt(Math.random() * 10000 + 1 + '', 10)
 }
 export default {
   name: 'JImageUpload',
+  components: { JImagePreviewModal },
   data () {
     return {
       uploadAction: window._CONFIG.domianURL + '/sys/common/upload',
@@ -48,6 +48,7 @@ export default {
       picUrl: false,
       headers: {},
       fileList: [],
+      accept: 'image/png, image/jpeg',
       previewImage: ''
     }
   },
@@ -88,7 +89,6 @@ export default {
   computed: {
     // 透传给下级组件的事件，需要排除本组件使用的change事件
     childListeners () {
-      // const vm = this
       const result = Object.assign({},
         this.$listeners
       )
@@ -123,15 +123,23 @@ export default {
         return
       }
       this.picUrl = true
+      const fileList = []
       const arr = paths.split(',')
       for (let a = 0; a < arr.length; a++) {
-        this.fileList.forEach((item) => {
+        const url = getFileAccessHttpUrl(arr[a])
-          if (item.url === arr[a]) {
+        fileList.push({
-            item.uid = uidGenerator()
+          uid: uidGenerator(),
-            item.response.status = 'history'
+          name: arr[a],
+          status: 'done',
+          url: url,
+          response: {
+            status: 'history',
+            message: arr[a]
           }
         })
       }
+
+      this.fileList = fileList
     },
     beforeUpload: function (file) {
       const fileType = file.type
@@ -144,7 +152,7 @@ export default {
       this.picUrl = false
       let fileList = info.fileList
       // update-begin-author:wangshuai date:20201022 for:LOWCOD-969 判断number是否大于0和是否多选，返回选定的元素。
-      if (this.number > 0 && this.isMultiple) {
+      if (this.number > 0) {
         fileList = fileList.slice(-this.number)
       }
       // update-end-author:wangshuai date:20201022 for:LOWCOD-969 判断number是否大于0和是否多选，返回选定的元素。
@@ -153,7 +161,7 @@ export default {
           this.picUrl = true
           fileList = fileList.map((file) => {
             if (file.response) {
-              file.url = `${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.response.result.fileName}`
+              file.url = `${file.response.result.id}`
             }
             return file
           })
@@ -172,9 +180,11 @@ export default {
     // 预览
     handlePreview (file) {
       if (file && file.url) {
-        const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/download/${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.name}`
+        console.log(file)
-        const url = `${window._CONFIG.onlinePreviewDomainURL}?url=${encodeURIComponent(fileFullUrl)}`
+        // const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/${file.url}`
-        window.open(url)
+        // const url = `${window._CONFIG.onlinePreviewDomainURL}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}`
+        // window.open(url)
+        this.$refs.JImagePreviewModal.open(file)
       }
     },
     getAvatarView () {
@@ -190,7 +200,7 @@ export default {
         path = ''
       }
       const arr = []
-      if (!this.isMultiple) {
+      if (!this.isMultiple && uploadFiles && uploadFiles.length > 0) {
         arr.push(uploadFiles[uploadFiles.length - 1].url)
       } else {
         for (let a = 0; a < uploadFiles.length; a++) {

jero-web/src/components/jero/modal/JImagePreviewModal.vue

@@ -7,36 +7,42 @@
     :footer="null"
     @cancel="close"
     cancelText="关闭">
-    <img class="img-container" :src="imgUrl" alt="">
+    <viewer>
+      <img :src="imageUrl" style="width: 200px;height: 200px">
+    </viewer>
   </a-modal>
 </template>
 
 <script>
+import { getFileAccessHttpUrl } from '../../../api/manage'
+
 export default {
   name: 'JImagePreviewModal',
   data () {
     return {
-      modalWidth: '60%',
+      modalWidth: 600,
       visible: false,
       confirmLoading: false,
-      imgUrl: ''
+      imageUrl: null
     }
   },
   methods: {
-    open (imgUrl) {
+    open (file) {
-      this.imgUrl = imgUrl
       this.visible = true
+      this.imageUrl = getFileAccessHttpUrl(file.name)
     },
     close () {
       this.visible = false
-      this.imgUrl = ''
     }
   }
 }
 </script>
 
 <style scoped>
-.img-container {
+/deep/.ant-modal-body{
-  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
 }
 </style>

jero-web/src/main.js

@@ -20,6 +20,8 @@ import '@/utils/filter' // base filtermybatis-plus
 import Print from 'vue-print-nb-jeecg'
 import preview from 'vue-photo-preview'
 import 'vue-photo-preview/dist/skin.css'
+import Viewer from 'v-viewer'
+import 'viewerjs/dist/viewer.css'
 import SSO from '@/cas/sso.js'
 import {
   ACCESS_TOKEN,
@@ -63,6 +65,12 @@ Vue.use(preview)
 Vue.use(vueBus)
 Vue.use(JeroComponents)
 Vue.use(VueAreaLinkage)
+Vue.use(Viewer)
+Viewer.setDefaults({
+  // 需要配置的属性 注意属性并没有引号
+  title: false,
+  toolbar: false
+})
 
 SSO.init(() => {
   main()