WL/laws_weilai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ocr上传修改

Browse Source
This commit is contained in:
caoyang
2022-03-24 21:25:43 +08:00
parent 36a6e1e842
commit 94adb25d21
2 changed files with 107 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files
jero-web/src/components/OcrAddForm/index.vue
+30 -175
View File
@@ -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
name="file"
:accept='accept'
:list-type="listType"
:file-list="myfileList"
:multiple="false"
:action="uploadAction+'?state='+state"
: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>-->
<uploadFile ref="uploadFile" :accept="accept" :disabled="disabled" @uploadSuccess="uploadSuccess"></uploadFile>
<!-- <a-button 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>-->
</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: '',
fileName: {}
uploadName: 'attId',
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.uploadName = current
this.$refs.uploadFile.visible = true
// 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 {
this.formInline[this.uploadName] = ''
this.fileName[this.uploadName] = ''
}else{
this.formInline[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: 'blur'
trigger: 'change',
})
}
}
@@ -562,7 +417,7 @@
}
})
},
add() {
add(){
this.formInline = {}
}
}
jero-web/src/components/OcrUpload/index.vue
+77 -81
View File
@@ -1,24 +1,24 @@
<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>
<div class="ocr-upload">
<!-- <a-modal v-model="visible" :maskClosable="false" :footer="[]" :title="title" class="ocr-upload-modal">-->
<a-upload
: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>-->
<a-button type="primary" ghost class="ant-upload-text" style="font-size: 14px;line-height: 30px">{{$t('clickUpload')}}</a-button>
</a-upload>
<!-- </a-modal>-->
</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 (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 = []
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)
@@ -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} 删除成功。`);
} 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.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} 文件上传成功。`);
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('不支持上传该类型的文件!')
}
}else{
this.$message.warning('不支持上传该类型的文件!')
}
},
}
}