From 5dd867091ec36521b54b291454da228ad17e4452 Mon Sep 17 00:00:00 2001
From: yaoyanan <794433246@qq.com>
Date: Fri, 9 Apr 2021 09:29:45 +0800
Subject: [PATCH] =?UTF-8?q?JImageupload=EF=BC=8CJUpload=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=88=90kkFileView=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 jero-web/src/components/jero/JImageUpload.vue |  17 +-
 jero-web/src/components/jero/JUpload.vue      | 163 ++----------------
 2 files changed, 22 insertions(+), 158 deletions(-)

diff --git a/jero-web/src/components/jero/JImageUpload.vue b/jero-web/src/components/jero/JImageUpload.vue
index afe163b9..b26e6889 100644
--- a/jero-web/src/components/jero/JImageUpload.vue
+++ b/jero-web/src/components/jero/JImageUpload.vue
@@ -25,9 +25,6 @@
           <div class="ant-upload-text">{{ text }}</div>
         </div>
       </div>
-      <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel()">
-        <img alt="example" style="width: 100%" :src="previewImage"/>
-      </a-modal>
     </a-upload>
   </div>
 </template>
@@ -36,6 +33,7 @@
   import Vue from 'vue'
   import { ACCESS_TOKEN } from "@/store/mutation-types"
   import { getFileAccessHttpUrl } from '@/api/manage'
+  const Base64 = require('js-base64').Base64
 
   const uidGenerator=()=>{
     return '-'+parseInt(Math.random()*10000+1,10);
@@ -50,7 +48,6 @@
         headers:{},
         fileList: [],
         previewImage:"",
-        previewVisible: false,
       }
     },
     props:{
@@ -109,12 +106,13 @@
     },
     methods:{
       initFileList(paths){
+        debugger
         if(!paths || paths.length === 0){
           this.fileList = [];
           return;
         }
         this.picUrl = true;
-        let arr = paths.join(",")
+        let arr = paths.split(",")
         for(var a=0;a<arr.length;a++){
           this.fileList.forEach((item)=>{
             if (item.url === arr[a]){
@@ -161,9 +159,12 @@
         }
       },
       // 预览
-      handlePreview (file) {
-        this.previewImage = file.url || file.thumbUrl
-        this.previewVisible = true
+      handlePreview(file) {
+        if (file && file.url) {
+          var fileFullUrl = `${window._CONFIG['domianWebSocketURL']}/sys/common/download/${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.name}`
+          let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}`
+          window.open(url)
+        }
       },
       getAvatarView(){
         if(this.fileList.length>0){
diff --git a/jero-web/src/components/jero/JUpload.vue b/jero-web/src/components/jero/JUpload.vue
index fb6f9733..5dabbd5e 100644
--- a/jero-web/src/components/jero/JUpload.vue
+++ b/jero-web/src/components/jero/JUpload.vue
@@ -1,15 +1,5 @@
 <template>
   <div :id="containerId" style="position: relative">
-
-    <!--  ---------------------------- begin 图片左右换位置 ------------------------------------- -->
-    <div class="movety-container" :style="{top:top+'px',left:left+'px',display:moveDisplay}" style="padding:0 8px;position: absolute;z-index: 91;height: 32px;width: 104px;text-align: center;">
-      <div :id="containerId+'-mover'" :class="showMoverTask?'uploadty-mover-mask':'movety-opt'" style="margin-top: 12px">
-        <a @click="moveLast" style="margin: 0 5px;"><a-icon type="arrow-left" style="color: #fff;font-size: 16px"/></a>
-        <a @click="moveNext" style="margin: 0 5px;"><a-icon type="arrow-right" style="color: #fff;font-size: 16px"/></a>
-      </div>
-    </div>
-    <!--  ---------------------------- end 图片左右换位置 ------------------------------------- -->
-
     <a-upload
       name="file"
       :action="uploadAction"
@@ -35,9 +25,6 @@
         </a-button>
       </template>
     </a-upload>
-    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
-      <img alt="example" style="width: 100%" :src="previewImage" />
-    </a-modal>
   </div>
 </template>
 
@@ -63,17 +50,6 @@
         fileList: [],
         newFileList: [],
         uploadGoOn:true,
-        previewVisible: false,
-        //---------------------------- begin 图片左右换位置 -------------------------------------
-        previewImage: '',
-        containerId:'',
-        top:'',
-        left:'',
-        moveDisplay:'none',
-        showMoverTask:false,
-        moverHold:false,
-        currentImg:''
-        //---------------------------- end 图片左右换位置 -------------------------------------
       }
     },
     props:{
@@ -282,118 +258,14 @@
         console.log(file)
       },
       handlePreview(file) {
-        if(this.fileType === FILE_TYPE_IMG){
-          this.previewImage = file.url || file.thumbUrl;
-          this.previewVisible = true;
-        }else{
-          if (file && file.url) {
-            var fileFullUrl = `${window._CONFIG['domianWebSocketURL']}/sys/common/download/${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.name}`
-            let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}`
-            window.open(url)
-          }
+        if (file && file.url) {
+          var fileFullUrl = `${window._CONFIG['domianWebSocketURL']}/sys/common/download/${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.name}`
+          let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}`
+          window.open(url)
         }
       },
-      handleCancel(){
-        this.previewVisible = false;
-      },
-      //---------------------------- begin 图片左右换位置 -------------------------------------
-      moveLast(){
-        let index = this.getIndexByUrl();
-        if(index == 0){
-          this.$message.warn('未知的操作')
-        }else{
-          let curr = this.fileList[index].url;
-          let last = this.fileList[index-1].url;
-          let arr =[]
-          for(let i=0;i<this.fileList.length;i++){
-            if(i == index-1){
-              arr.push(curr)
-            }else if(i == index){
-              arr.push(last)
-            }else{
-              arr.push(this.fileList[i].url)
-            }
-          }
-          this.currentImg = last
-          this.$emit('file-change',arr.join(','))
-        }
-      },
-      moveNext(){
-        let index = this.getIndexByUrl();
-        if(index == this.fileList.length-1){
-          this.$message.warn('已到最后~')
-        }else{
-          let curr = this.fileList[index].url;
-          let next = this.fileList[index+1].url;
-          let arr =[]
-          for(let i=0;i<this.fileList.length;i++){
-            if(i === index+1){
-              arr.push(curr)
-            }else if(i == index){
-              arr.push(next)
-            }else{
-              arr.push(this.fileList[i].url)
-            }
-          }
-          this.currentImg = next
-          this.$emit('file-change',arr.join(','))
-        }
-      },
-      getIndexByUrl(){
-        for(let i=0;i<this.fileList.length;i++){
-          if(this.fileList[i].url == this.currentImg || encodeURI(this.fileList[i].url) == this.currentImg){
-            return i;
-          }
-        }
-        return -1;
-      }
-    },
-    mounted(){
-      const moverObj = document.getElementById(this.containerId+'-mover');
-      if(moverObj){
-        moverObj.addEventListener('mouseover',()=>{
-          this.moverHold = true
-          this.moveDisplay = 'block';
-        });
-        moverObj.addEventListener('mouseout',()=>{
-          this.moverHold = false
-          this.moveDisplay = 'none';
-        });
-      }
-      let picList = document.getElementById(this.containerId)?document.getElementById(this.containerId).getElementsByClassName('ant-upload-list-picture-card'):[];
-      if(picList && picList.length>0){
-        picList[0].addEventListener('mouseover',(ev)=>{
-          ev = ev || window.event;
-          let target = ev.target || ev.srcElement;
-          if('ant-upload-list-item-info' === target.className){
-            this.showMoverTask=false
-            let item = target.parentElement
-            this.left = item.offsetLeft
-            this.top=item.offsetTop+item.offsetHeight-50;
-            this.moveDisplay = 'block';
-            this.currentImg = target.getElementsByTagName('img')[0].src
-          }
-
-        });
-
-        picList[0].addEventListener('mouseout',(ev)=>{
-          ev = ev || window.event;
-          let target = ev.target || ev.srcElement;
-          //console.log('移除',target)
-          if('ant-upload-list-item-info' === target.className){
-            this.showMoverTask=true
-            setTimeout(()=>{
-              if(this.moverHold === false)
-                this.moveDisplay = 'none';
-            },100)
-          }
-          if('ant-upload-list-item ant-upload-list-item-done' === target.className || 'ant-upload-list ant-upload-list-picture-card'=== target.className){
-            this.moveDisplay = 'none';
-          }
-        })
-        //---------------------------- end 图片左右换位置 -------------------------------------
-      }
     },
+    mounted(){},
     model: {
       prop: 'value',
       event: 'file-change'
@@ -402,23 +274,14 @@
 </script>
 
 <style lang="less">
-.uploadty-disabled{
-  .ant-upload-list-item {
-    .anticon-close{
-      display: none;
-    }
-    .anticon-delete{
-      display: none;
+  .uploadty-disabled{
+    .ant-upload-list-item {
+      .anticon-close{
+        display: none;
+      }
+      .anticon-delete{
+        display: none;
+      }
     }
   }
-}
-  //---------------------------- begin 图片左右换位置 -------------------------------------
-  .uploadty-mover-mask{
-    background-color: rgba(0, 0, 0, 0.5);
-    opacity: .8;
-    color: #fff;
-    height: 28px;
-    line-height: 28px;
-  }
-  //---------------------------- end 图片左右换位置 -------------------------------------
 </style>
\ No newline at end of file