ocr上传修改

jero-web/src/components/OcrAddForm/index.vue

@@ -169,33 +169,13 @@
                 <span class="title-text-text">{{item.db_field_txt}}</span>
               </div>
               <a-form-model-item class="itemModel" :prop="item.db_field_name">
-                <a-upload
+                <uploadFile ref="uploadFile" :accept="accept" :disabled="disabled" @uploadSuccess="uploadSuccess"></uploadFile>
-                  name="file"
+<!--                <a-button type="primary" class="button-text"-->
-                  :accept='accept'
+<!--                          @click="clickButtonToUpload(item.db_field_name)">-->
-                  :list-type="listType"
+<!--                  {{ (formInline[item.db_field_name] === 'null' || formInline[item.db_field_name] === '' ||-->
-                  :file-list="myfileList"
+<!--                  formInline[item.db_field_name] == null) ? $t('clickUpload') : $t('viewUploadedFiles')-->
-                  :multiple="false"
+<!--                  }}-->
-                  :action="uploadAction+'?state='+state"
+<!--                </a-button>-->
-                  :headers="headers"
-                  :before-upload="beforeUpload"
-                  @change="handleChange"
-                >
-                  <a-button @click="clickButtonToUpload(item.db_field_name)">
-                    <a-icon type="upload"/>
-                    {{$t('UploadFile')}}
-                  </a-button>
-                </a-upload>
-
-
-                <!--                <a-button v-if="formInline[item.db_field_name] === 'null' || formInline[item.db_field_name] === '' ||-->
-                <!--                  formInline[item.db_field_name] == null" type="primary" class="button-text"-->
-                <!--                          @click="clickButtonToUpload(item.db_field_name)">-->
-                <!--                  {{ (formInline[item.db_field_name] === 'null' || formInline[item.db_field_name] === '' ||-->
-                <!--                  formInline[item.db_field_name] == null) ? $t('clickUpload') : $t('viewUploadedFiles')-->
-                <!--                  }}-->
-                <!--                </a-button>-->
-                <!--                <span v-if="!(formInline[item.db_field_name] === 'null' || formInline[item.db_field_name] === '' ||-->
-                <!--                  formInline[item.db_field_name] == null)">{{fileName[item.db_field_name]}}</span>-->
               </a-form-model-item>
             </div>
           </a-col>
@@ -230,25 +210,23 @@
           </a-col>
         </div>
       </a-row>
-      <!--      <uploadFile ref="uploadFile" :accept="accept" :disabled="disabled" @uploadSuccess="uploadSuccess"></uploadFile>-->
+
     </a-form-model>
   </a-spin>
 </template>
 
 <script>
-  // import uploadFile from '@/components/OcrUpload/index'
+  import uploadFile from '@/components/OcrUpload/index'
   import PersonnelSelection from '@/components/PersonnelSelection/index'
   import Standardselection from '@/components/Standardselection/index'
   import { getAction, postAction } from '@/api/manage'
   import eventBUs from '../../common/event'
   import moment from 'moment'
-  import Vue from 'vue'
-  import { ACCESS_TOKEN } from '@/store/mutation-types'
 
   export default {
     name: 'ocrAddForm',
     components: {
-      // uploadFile,
+      uploadFile,
       Standardselection,
       PersonnelSelection
     },
@@ -264,17 +242,14 @@
       disabled: {
         type: Boolean,
         default: false
-      }
+      },
+      // accept:{
+      //   type:String,
+      // }
     },
     data() {
       return {
-        uploadAction: window._CONFIG['domianURL'] + '/sys/common/upload',
-        listType: 'text',
-        accept: 'application/pdf',
-        state: undefined,
         formInline: {},
-        myfileList: [],
-        headers: {},
         isFormInline: false,
         rules: {},
         labelCol: {
@@ -289,126 +264,16 @@
         ruleList: [],
         validatorRules: {},
         confirmLoading: false,
-        uploadName: '',
+        uploadName: 'attId',
-        fileName: {}
+        accept:'application/pdf',
-
       }
     },
     mounted() {
-      const token = Vue.ls.get(ACCESS_TOKEN)
-      this.headers = { 'X-Access-Token': token }
       this.getForm()
     },
     methods: {
-      handleChange(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)
-                }
-              })
-              this.formInline[this.uploadName] = ''
-              // 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)
-                // console.log('fileList111',this.myfileList)
-                let attIdList = []
-                this.fileList.map(item => {
-                    attIdList.push(item.id)
-                  })
-                  /** 赋值给当前对应的表单文件 */
-                  this.formInline[this.uploadName] = attIdList.join(',')
-
-
-                // this.formInline.attId=this.myfileList[0].response.result.id
-                this.$message.destroy()
-                this.$message.success(`${info.file.name} 文件上传成功。`);
-                this.$refs.ruleForm1.clearValidate()
-              }
-            } else if (status === 'uploading') {
-              this.myfileList = info.fileList;
-              // this.$emit('uploadSuccess')
-              // this.$message.success(`${info.file.name} 文件上传成功。`);
-            }
-          }
-        }else{
-          this.$message.warning('不支持上传该类型的文件!')
-        }
-
-      },
-      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限制, 请压缩或降低文件质量!'
-          }
-        }
-      },
       sumber() {
-        console.log('vilidate', this.formInline)
+        // console.log('vilidate',this.formInline)
         this.$refs.ruleForm1.validate(valid => {
           if (valid) {
             let url = ''
@@ -432,37 +297,28 @@
         })
       },
       clickButtonToUpload(current) {
-        // this.$refs.uploadFile.visible = true
+        this.$refs.uploadFile.visible = true
-        this.uploadName = current
+        // this.uploadName = current
       },
       /** 上传文件的回调 */
       uploadSuccess(data) {
         // console.log(data)
         let attIdList = []
-        let attNameList = []
+        if(data && data.length>0){
-        if (data && data.length > 0) {
           data.map(item => {
             attIdList.push(item.id || data.name)
-            attNameList.push(item.fileName)
           })
           /** 赋值给当前对应的表单文件 */
           this.formInline[this.uploadName] = attIdList.join(',')
-          this.fileName[this.uploadName] = attNameList.join(',')
           this.formInline = { ...this.formInline }
-          this.$refs.uploadFile.visible = false
           // console.log('form',this.formInline)
-        } else {
+        }else{
-          this.formInline[this.uploadName] = ''
+          this.formInline[this.uploadName]=''
-          this.fileName[this.uploadName] = ''
           this.formInline = { ...this.formInline }
           // console.log('form',this.formInline)
 
         }
       },
-      //关闭上传弹框
-      closeUpload() {
-        // this.fileVisible = false
-      },
       handleInput(value) {
         this.$nextTick(() => {
           this.formInline = { ...this.formInline }
@@ -479,15 +335,15 @@
               rule.push({
                 required: true,
                 message: res.db_field_txt + '不能为空',
-                trigger: 'change'
+                trigger: 'blur'
               })
-              if (res.db_field_name == 'standNumber') {
+              if(res.db_field_name=='standNumber'){
                 rule.push(
-                  { min: 1, max: 200, message: this.$t('cantExeed') + '200' + this.$t('characters'), trigger: 'blur' }
+                  { min:1, max: 200, message: this.$t('cantExeed')+'200'+this.$t('characters'), trigger: 'blur' },
                 )
-              } else if (res.db_field_name == 'standName') {
+              }else if(res.db_field_name=='standName'){
                 rule.push(
-                  { min: 1, max: 200, message: this.$t('cantExeed') + '200' + this.$t('characters'), trigger: 'blur' }
+                  { min:1, max: 200, message: this.$t('cantExeed')+'200'+this.$t('characters'), trigger: 'blur' },
                 )
               }
 
@@ -516,12 +372,11 @@
                 message: res.db_field_txt + '不能为空',
                 trigger: 'change'
               })
-            } else if (res.field_show_type === '7') {
+            }else if (res.field_show_type === '7') {
               rule.push({
                 required: true,
                 message: res.db_field_txt + '不能为空',
-                type:'string',
+                trigger: 'change',
-                trigger: 'blur'
               })
             }
           }
@@ -562,7 +417,7 @@
           }
         })
       },
-      add() {
+      add(){
         this.formInline = {}
       }
     }

jero-web/src/components/OcrUpload/index.vue

@@ -1,24 +1,24 @@
 <template>
-    <div class="ocr-upload">
+  <div class="ocr-upload">
-      <a-modal v-model="visible" :maskClosable="false" :footer="[]" :title="title" class="ocr-upload-modal">
+<!--    <a-modal v-model="visible" :maskClosable="false" :footer="[]" :title="title" class="ocr-upload-modal">-->
-        <a-upload-dragger
+      <a-upload
-          :accept='accept'
+        :accept='accept'
-          :disabled="disabled"
+        :disabled="disabled"
-          class="ant-upload-list"
+        class="ant-upload-list"
-          name="file"
+        name="file"
-          :list-type="listType"
+        :list-type="listType"
-          :file-list="myfileList"
+        :file-list="myfileList"
-          :multiple="false"
+        :multiple="false"
-          :action = 'uploadAction'
+        :action = 'uploadAction'
-          :headers="headers"
+        :headers="headers"
-          :before-upload="beforeUpload"
+        :before-upload="beforeUpload"
-          :remove='remove'
+        :remove='remove'
-          @change="handleChange">
+        @change="handleChange">
-          <p><a-icon style="font-size: 67px;color: #c0c4cc;" type="cloud-upload" /></p>
+<!--        <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-button  type="primary" ghost class="ant-upload-text" style="font-size: 14px;line-height: 30px">{{$t('clickUpload')}}</a-button>
-        </a-upload-dragger>
+      </a-upload>
-      </a-modal>
+<!--    </a-modal>-->
-    </div>
+  </div>
 </template>
 
 <script>
@@ -26,7 +26,7 @@
   import { ACCESS_TOKEN } from "@/store/mutation-types"
   export default {
     name: 'ocrUpload',
-    props:['disableds','disabled','thisFileUploadUrl','readonly','thisFileType','accept','listType'],
+    props:['disableds','disabled','thisFileUploadUrl','readonly','thisFileType','accept','title','listType'],
     data(){
       return{
         visible:false,
@@ -36,14 +36,12 @@
         fileList:[],
         fileTypeSatus:false,
         headers:{},
-        title:this.$t('UploadFile'),
       }
     },
     created(){
       const token = Vue.ls.get(ACCESS_TOKEN);
       this.headers = {"X-Access-Token":token};
       this.containerId = 'container-ty-'+new Date().getTime();
-      // console.log('title',this.title)
     },
     mounted(){
       // console.log(this.thisFileType,this.thisFileSize,this.thisFileUploadUrl);
@@ -77,18 +75,37 @@
             info.fileList.splice(index,1)
           }
         })
-          if (this.fileTypeSatus) {
+        if (this.fileTypeSatus) {
-            if (file.size > 100000000) {
+          if (file.size > 100000000) {
-              this.$message.error(this.errorMessage)
+            this.$message.error(this.errorMessage)
-              return
+            return
-            }else {
+          }else {
-              if (status === 'error') {
+            if (status === 'error') {
-                this.$emit('uploadSuccess', this.fileList)
+              this.$emit('uploadSuccess', this.fileList)
-                this.$message.destroy()
+              this.$message.destroy()
-                this.$message.error(`${info.file.name} 文件上传失败。`);
+              this.$message.error(`${info.file.name} 文件上传失败。`);
-              } else if (status === 'removed') {
+            } else if (status === 'removed') {
-                this.myfileList = info.fileList;
+              this.myfileList = info.fileList;
-                this.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)
@@ -96,57 +113,36 @@
                     this.fileList.push(res)
                   }
                 })
-                // console.log('remove',this.fileList)
+                // console.log('file1111',this.fileList)
                 this.$emit('uploadSuccess', this.fileList)
                 this.$message.destroy()
-                this.$message.success(`${info.file.name} 删除成功。`);
+                this.$message.error('最多只能上传一个文件');
-              } else if (status === 'done') {
+                return
-                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)
-                  // console.log('fileList111',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} 文件上传成功。`);
               }
+              // 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('不支持上传该类型的文件!')
           }
+        }else{
+          this.$message.warning('不支持上传该类型的文件!')
+        }
       },
     }
   }