修改bug

2022-03-18 14:09:42 +08:00
parent 109c2db9a2
commit 3279309a01
25 changed files with 87 additions and 168 deletions
@@ -0,0 +1,163 @@
+<template>
+    <div class="ocr-upload">
+      <a-modal v-model="visible" :maskClosable="false" :footer="[]" :title="title" class="ocr-upload-modal">
+        <a-upload-dragger
+          :accept='accept'
+          :disabled="disabled"
+          class="ant-upload-list"
+          name="file"
+          :list-type="listType"
+          :file-list="myfileList"
+          :multiple="false"
+          :action = 'uploadAction'
+          :headers="headers"
+          :before-upload="beforeUpload"
+          :remove='remove'
+          @change="handleChange">
+          <p><a-icon style="font-size: 67px;color: #c0c4cc;" type="cloud-upload" /></p>
+          <p class="ant-upload-text" style="font-size: 14px;line-height: 30px">{{$t('clickUpload')}}</p>
+        </a-upload-dragger>
+      </a-modal>
+    </div>
+</template>
+
+<script>
+  import Vue from 'vue'
+  import { ACCESS_TOKEN } from "@/store/mutation-types"
+  export default {
+    name: 'ocrUpload',
+    props:['disableds','disabled','thisFileUploadUrl','readonly','thisFileType','accept','title','listType'],
+    data(){
+      return{
+        visible:false,
+        uploadAction:window._CONFIG['domianURL']+"/sys/common/upload",
+        downLoadFileUrl:window._CONFIG['domianURL']+'/sys/common/static',
+        myfileList:[],
+        fileList:[],
+        fileTypeSatus:false,
+        headers:{},
+      }
+    },
+    created(){
+      const token = Vue.ls.get(ACCESS_TOKEN);
+      this.headers = {"X-Access-Token":token};
+      this.containerId = 'container-ty-'+new Date().getTime();
+    },
+    mounted(){
+      // console.log(this.thisFileType,this.thisFileSize,this.thisFileUploadUrl);
+    },
+    methods:{
+      beforeUpload(file,fileList) {
+        if(this.myfileList&&this.myfileList.length>=1){
+          this.$message.warning('只能上传一个文件')
+          return false
+        }else{
+          // let thisFileType = this.thisFileType.replace(/\s+/g, "");
+          if(file.type==this.accept){
+            this.fileTypeSatus = true;
+            this.$message.destroy()
+            // 207M.doc文件大小超出100MB限制, 请压缩或降低文件质量!
+            this.errorMessage = file.name + "文件大小超出100MB限制, 请压缩或降低文件质量!";
+          }
+        }
+      },
+      remove(){
+        this.fileTypeSatus = true;
+        // console.log('rrr',this.myfileList)
+      },
+      handleChange(info) {
+        // console.log('info',info)
+        let { file } = info;
+        const status = info.file.status;
+        info.fileList.forEach((val,index)=>{
+          if(val.response && !val.response.result){
+            this.$message.error(val.response.message);
+            info.fileList.splice(index,1)
+          }
+        })
+          if (this.fileTypeSatus) {
+            if (file.size > 100000000) {
+              this.$message.error(this.errorMessage)
+              return
+            }else {
+              if (status === 'error') {
+                this.$emit('uploadSuccess', this.fileList)
+                this.$message.destroy()
+                this.$message.error(`${info.file.name} 文件上传失败。`);
+              } else if (status === 'removed') {
+                this.myfileList = info.fileList;
+                this.fileList = []
+                this.myfileList.forEach((res) => {
+                  if (res.response) {
+                    this.fileList.push(res.response.result)
+                  } else {
+                    this.fileList.push(res)
+                  }
+                })
+                // console.log('remove',this.fileList)
+                this.$emit('uploadSuccess', this.fileList)
+                this.$message.destroy()
+                this.$message.success(`${info.file.name} 删除成功。`);
+              } else if (status === 'done') {
+                this.fileList = []
+                this.myfileList = info.fileList;
+                // console.log('file3333',info.fileList)
+                if (info.fileList.length > 1) {
+                  info.fileList.splice(1)
+                  // this.myfileList = info.fileList;
+
+                  this.myfileList.forEach((res) => {
+                    if (res.response) {
+                      this.fileList.push(res.response.result)
+                    } else {
+                      this.fileList.push(res)
+                    }
+                  })
+                  // console.log('file1111',this.fileList)
+                  this.$emit('uploadSuccess', this.fileList)
+                  this.$message.destroy()
+                  this.$message.error('最多只能上传一个文件');
+                  return
+                }
+                // console.log('my222',this.myfileList)
+                this.myfileList.forEach((res) => {
+                  if (res.response) {
+                    this.fileList.push(res.response.result)
+                    // console.log('flist',res.response)
+                  } else {
+                    this.fileList.push(res)
+                  }
+                })
+
+                if(this.myfileList.length > 0){
+                  this.$emit('uploadSuccess', this.fileList)
+                  this.$message.destroy()
+                  this.$message.success(`${info.file.name} 文件上传成功。`);
+                }
+              } else if (status === 'uploading') {
+                this.myfileList = info.fileList;
+                this.$emit('uploadSuccess')
+                // this.$message.success(`${info.file.name} 文件上传成功。`);
+              }
+            }
+          }else{
+            this.$message.warning('不支持上传该类型的文件!')
+          }
+      },
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+
+</style>
+
+
+<style lang="less">
+  .ocr-upload-modal{
+    .ant-modal-wrap{
+      z-index: 1002;
+    }
+  }
+
+</style>