From a871898de60facef926cfd5fd8c7d3ee5907bfad Mon Sep 17 00:00:00 2001
From: fengachen <373943794@qq.com>
Date: Wed, 25 Aug 2021 17:40:31 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/jero/JUpload.vue | 295 ++++++++++++++++++++++++++++++++
 1 file changed, 295 insertions(+)
 create mode 100644 src/components/jero/JUpload.vue

diff --git a/src/components/jero/JUpload.vue b/src/components/jero/JUpload.vue
new file mode 100644
index 0000000..7631f7c
--- /dev/null
+++ b/src/components/jero/JUpload.vue
@@ -0,0 +1,295 @@
+<template>
+  <div :id="containerId" style="position: relative">
+    <a-upload
+      name="file"
+      :action="uploadAction"
+      :headers="headers"
+      :data="{'biz':bizPath}"
+      :fileList="fileList"
+      :beforeUpload="beforeUpload"
+      @change="handleChange"
+      :disabled="disabled"
+      :returnUrl="returnUrl"
+      :listType="complistType"
+      @preview="handlePreview"
+      v-bind="$attrs"
+      v-on="childListeners"
+      :class="{'uploadty-disabled':disabled}">
+      <template>
+        <div v-if="isImageComp">
+          <a-icon type="plus" />
+          <div class="ant-upload-text">{{ text }}</div>
+        </div>
+        <a-button v-else-if="buttonVisible">
+         <a-icon type="upload" />{{ text }}
+        </a-button>
+      </template>
+    </a-upload>
+  </div>
+</template>
+
+<script>
+
+  import Vue from 'vue'
+  import { ACCESS_TOKEN } from "@/store/mutation-types"
+  import { getFileAccessHttpUrl } from '@/api/manage';
+  const Base64 = require('js-base64').Base64
+
+  const FILE_TYPE_ALL = "all"
+  const FILE_TYPE_IMG = "image"
+  const FILE_TYPE_TXT = "file"
+  const uidGenerator=()=>{
+    return '-'+parseInt(Math.random()*10000+1,10);
+  }
+  export default {
+    name: 'JUpload',
+    data(){
+      return {
+        uploadAction:window._CONFIG['domianURL']+"/sys/common/upload",
+        headers:{},
+        fileList: [],
+        newFileList: [],
+        uploadGoOn:true,
+      }
+    },
+    props:{
+      text:{
+        type:String,
+        required:false,
+        default:"点击上传"
+      },
+      fileType:{
+        type:String,
+        required:false,
+        default:FILE_TYPE_ALL
+      },
+      /*这个属性用于控制文件上传的业务路径*/
+      bizPath:{
+        type:String,
+        required:false,
+        default:"temp"
+      },
+      value:{
+        type:[String,Array],
+        required:false
+      },
+      // update-begin- --- author:wangshuai ------ date:20190929 ---- for:Jupload组件增加是否能够点击
+      disabled:{
+        type:Boolean,
+        required:false,
+        default: false
+      },
+      // update-end- --- author:wangshuai ------ date:20190929 ---- for:Jupload组件增加是否能够点击
+      //此属性被废弃了
+      triggerChange:{
+        type: Boolean,
+        required: false,
+        default: false
+      },
+      /**
+       * update -- author:lvdandan -- date:20190219 -- for:Jupload组件增加是否返回url，
+       * true：仅返回url
+       * false：返回fileName filePath fileSize
+       */
+      returnUrl:{
+        type:Boolean,
+        required:false,
+        default: true
+      },
+      number:{
+        type:Number,
+        required:false,
+        default: 0
+      },
+      buttonVisible:{
+        type:Boolean,
+        required:false,
+        default: true
+      },
+    },
+    watch:{
+      value:{
+        immediate: true,
+        handler() {
+          let val = this.value
+          if (val instanceof Array) {
+            if(this.returnUrl){
+              this.initFileList(val.join(','))
+            }else{
+              this.initFileListArr(val);
+            }
+          } else {
+            this.initFileList(val)
+          }
+        }
+      }
+    },
+    computed:{
+      //透传给下级组件的事件，需要排除本组件使用的change事件
+      childListeners() {
+        const vm = this;
+        let result = Object.assign({},
+          this.$listeners,
+        )
+        delete result.change;
+        return result;
+      },
+      isImageComp(){
+        return this.fileType === FILE_TYPE_IMG
+      },
+      complistType(){
+        return this.fileType === FILE_TYPE_IMG?'picture-card':'text'
+      },
+    },
+    created(){
+      const token = Vue.ls.get(ACCESS_TOKEN);
+      //---------------------------- begin 图片左右换位置 -------------------------------------
+      this.headers = {"X-Access-Token":token};
+      this.containerId = 'container-ty-'+new Date().getTime();
+      //---------------------------- end 图片左右换位置 -------------------------------------
+    },
+    methods:{
+      initFileListArr(val){
+        if(!val || val.length==0){
+          this.fileList = [];
+          return;
+        }
+        for(var a=0;a<val.length;a++){
+          this.fileList.forEach((item)=>{
+            if (item.url === val[a]){
+              item.uid = uidGenerator()
+              item.response.status = 'done'
+            }
+          })
+        }
+      },
+      initFileList(paths){
+        if(!paths || paths.length==0){
+          this.fileList = [];
+          return;
+        }
+        let arr = paths.split(",")
+        for(var a=0;a<arr.length;a++){
+          this.fileList.forEach((item)=>{
+            if (item.url === arr[a]){
+              item.uid = uidGenerator()
+              item.response.status = 'history'
+            }
+          })
+        }
+      },
+      handlePathChange(){
+        let uploadFiles = this.fileList
+        let path = ''
+        if(!uploadFiles || uploadFiles.length==0){
+          path = ''
+        }
+        let arr = [];
+
+        for(var a=0;a<uploadFiles.length;a++){
+          if(uploadFiles[a].status === 'done' ) {
+            arr.push(uploadFiles[a].url)
+          }else{
+            return;
+          }
+        }
+        if(arr.length>0){
+          path = arr.join(",")
+        }
+        this.$emit('change', path);
+      },
+      beforeUpload(file){
+        this.uploadGoOn=true
+        var fileType = file.type;
+        if(this.fileType===FILE_TYPE_IMG){
+          if(fileType.indexOf('image')<0){
+            this.$message.warning('请上传图片');
+            this.uploadGoOn=false
+            return false;
+          }
+        }
+        //TODO 扩展功能验证文件大小
+        return true
+      },
+      handleChange(info) {
+        if(!info.file.status && this.uploadGoOn === false){
+          info.fileList.pop();
+        }
+        let fileList = info.fileList
+        if(info.file.status==='done'){
+          if(this.number>0){
+            fileList = fileList.slice(-this.number);
+          }
+          if(info.file.response.success){
+            fileList = fileList.map((file) => {
+              if (file.response) {
+                let reUrl = `${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.response.result.fileName}`;
+                file.url = getFileAccessHttpUrl(reUrl);
+              }
+              return file;
+            });
+          }
+          //this.$message.success(`${info.file.name} 上传成功!`);
+        }else if (info.file.status === 'error') {
+          this.$message.error(`${info.file.name} 上传失败.`);
+        }else if(info.file.status === 'removed'){
+          this.handleDelete(info.file)
+        }
+        this.fileList = fileList
+        if(info.file.status==='done' || info.file.status === 'removed'){
+          //returnUrl为true时仅返回文件路径
+          if(this.returnUrl){
+            this.handlePathChange()
+          }else{
+            //returnUrl为false时返回文件名称、文件路径及文件大小
+            this.newFileList = [];
+            for(var a=0;a<fileList.length;a++){
+              // update-begin-author:lvdandan date:20200603 for:【TESTA-514】【开源issue】多个文件同时上传时，控制台报错
+              if(fileList[a].status === 'done' ) {
+                var fileJson = {
+                  fileName:fileList[a].name,
+                  filePath:fileList[a].url,
+                  fileSize:fileList[a].size
+                };
+                this.newFileList.push(fileJson);
+              }else{
+                return;
+              }
+              // update-end-author:lvdandan date:20200603 for:【TESTA-514】【开源issue】多个文件同时上传时，控制台报错
+            }
+            this.$emit('change', this.newFileList);
+          }
+        }
+      },
+      handleDelete(file){
+        //如有需要新增 删除逻辑
+        console.log(file)
+      },
+      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)
+        }
+      },
+    },
+    mounted(){},
+    model: {
+      prop: 'value',
+      event: 'change'
+    }
+  }
+</script>
+
+<style lang="less">
+  .uploadty-disabled{
+    .ant-upload-list-item {
+      .anticon-close{
+        display: none;
+      }
+      .anticon-delete{
+        display: none;
+      }
+    }
+  }
+</style>
\ No newline at end of file