<el-form-item label="合同扫描件" prop="files" ref="upload-file">
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:auto-upload="false"
:on-change="handleStatus"
:on-exceed="handleExceed"
:show-file-list="false"
:http-request="uploadFile"
accept=".pdf,.ofd"
:file-list="fileList">
<el-button size="small" type="primary">+点击上传</el-button>
<div slot="tip" class="el-upload__tip"><i>*</i>仅支持上传一个合同扫描件,支持ofd及pdf格式文件</div>
</el-upload>
<el-table :data="attachments" border style="width: 650px">
<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
<el-table-column prop="name" label="合同名称" align="center"></el-table-column>
<el-table-column label="操作" width="100" align="center">
<template slot-scope="scope">
<el-button type="text" size="small" @click="handlePreview(scope.row)">查看</el-button>
<el-button type="text" size="small" @click="handleDel(scope.row,scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
data
上传,删除等fan
handleRemove(file, fileList) {
this.attachments = fileList
},
handleExceed(files, fileList) {
// this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }?`);
},
/** 浏览*/
handlePreview(row) {
//hasOwnProperty方法返回一个布尔值,判断自身属性是否存在,循环的是那个列表
if(row.hasOwnProperty('raw')){
let pdfUrl = URL.createObjectURL(row.raw)
window.open(pdfUrl);
}else{
getContractPreview(row).then(response => {
window.open(response.data.data);
});
}
},
/* 文件必传验证 */
handleStatus(file, fileList){
let patrn = /^[^`!@#$%^&*<>]+$/
if (!patrn.test(file.name)) {// 如果包含特殊字符返回false
this.msgSuccess('文件名称不能有特殊字符');
return false;
}
if (fileList.length > 1) {
fileList.splice(0, 1);
}
// 替换文件
// for(let i = 0; i<this.attachments.length; i++){
// // if(file.name === this.attachments[i].name){
// // this.msgSuccess('替换' + file.name);
// this.ruleForm.files = this.attachments[i];
// // return
// // }
// }
// this.attachments.push(file)
this.attachments = fileList
this.ruleForm.files = this.attachments;
this.isChange = false
},
uploadFile(file){
// console.log(file.file)
},
handleDel(params,index){
if(params.hasOwnProperty('fileId')){
this.delLocalFile.push(params.fileId)
}
this.attachments.splice(index,1)
this.ruleForm.files = this.attachments
},
提交方法中
目前此方法只能上传一个附件,再保存前附件没有上传到服务器,保存之后附件上传到服务器,保存前只是再本地的表格中进行增删改查,保存后后台返回的附件带有id,若有id的删除后把id存起来传给后台