供应商比选材料 附件优化

master
Harry Yang 2023-01-03 17:16:14 +08:00
parent abc468c19d
commit d11e80011a
2 changed files with 68 additions and 29 deletions

View File

@ -297,11 +297,26 @@
<el-upload :file-list="scope.row.fileList"
:limit="10" size="mini" name="files[]" action="${base}/file/upload"
accept=".rar,.zip,.7z,.doc,.docx,.pdf,.xls,.xlsx,.png,.jpg,.jpeg,.gif,.bmp"
:before-upload="beforeUpload" :show-file-list="false"
:on-remove="(_, fileList) => handleSupplierMaterialRemove(scope, fileList)"
:before-remove="(file, fileList) => beforeSupplierMaterialRemove(scope, file, fileList)"
:on-success="(response, file, fileList) => handleSupplierMaterialFileUploaded(scope, response, file, fileList)"
:on-exceed="(files, fileList) => handleSupplierMaterialExceed(scope, files, fileList)">
<el-button size="small" type="text">上传附件</el-button>
<el-popover placement="top-end" title="已经上传的附件" width="200" trigger="hover">
<el-button size="small" type="text" slot="reference">上传附件</el-button>
<#--展示已经上传的文件-->
<div v-if="scope.row.attachment">
<el-tag size="small" v-for="attachment in scope.row.attachment"
@close="removeSupplierMaterialAttachment(scope, attachment)">
<a :href="attachment.uri">
<i class="el-icon-document"></i> {{attachment.name}}
</a>
</el-tag>
</div>
<span v-else>暂未上传</span>
</el-popover>
</el-upload>
</template>
@ -551,6 +566,7 @@
}
const methods = {
isNotEmpty,
changeMode(mode) {
this.mode = mode
},
@ -918,13 +934,6 @@
return ret
}
const mapAttachment = attachments => {
return attachments && JSON.stringify(attachments.map(file => ({
uri: file.response.data.url,
name: file.response.data.originName
})))
}
const form = {
...processForm,
processType,
@ -947,7 +956,7 @@
details: computePurchaseAmountDetail(detail.budgetCostId)
})),
supplierMaterials: supplierMaterialsForm.filter(hasProperties).map(item => ({
...item, attachment: mapAttachment(item.attachment)
...item, attachment: JSON.stringify(item.attachment)
})),
}
@ -1036,6 +1045,10 @@
scope.row['attachment'] = fileList
},
removeSupplierMaterialAttachment(scope, attachmentToRemove) {
scope.row['attachment'] = scope.row['attachment'].filter(item => item === attachmentToRemove)
},
handleSupplierMaterialExceed(scope, files, fileList) {
this.$message.warning("当前限制选择只能选择10个文件");
scope.row['attachment'] = fileList
@ -1051,7 +1064,17 @@
handleSupplierMaterialFileUploaded(scope, response, file, fileList) {
if (response.success) {
scope.row['attachment'] = fileList
let attachments = scope.row['attachment']
if (isEmpty(attachments)) {
attachments = []
scope.row['attachment'] = attachments
}
attachments.push({
uri: response.data.url,
name: file.name
})
this.$message.success("上传成功");
}
else {
this.$message.warning("上传失败");

View File

@ -409,19 +409,27 @@
</el-table-column>
<el-table-column prop="attachment" label="附件" align="center" width="150">
<template slot-scope="scope">
<el-tag size="small" v-if="scope.row.attachment">
<a :href="scope.row.attachment.uri">
<i class="el-icon-document"></i> {{scope.row.attachment.name}}
</a>
</el-tag>
<el-upload v-else :limit="10" size="mini" name="files[]" action="${base}/file/upload"
<el-upload :limit="10" size="mini" name="files[]" action="${base}/file/upload"
accept=".rar,.zip,.7z,.doc,.docx,.pdf,.xls,.xlsx,.png,.jpg,.jpeg,.gif,.bmp"
:before-upload="beforeUpload" :show-file-list="false"
:on-remove="(_, fileList) => handleSupplierMaterialRemove(scope, fileList)"
:before-remove="(file, fileList) => beforeSupplierMaterialRemove(scope, file, fileList)"
:on-success="(response, file, fileList) => handleSupplierMaterialFileUploaded(scope, response, file, fileList)"
:on-exceed="(files, fileList) => handleSupplierMaterialExceed(scope, files, fileList)"
>
<el-button size="small" type="text">上传附件</el-button>
:on-exceed="(files, fileList) => handleSupplierMaterialExceed(scope, files, fileList)">
<el-popover placement="top-end" title="已经上传的附件" width="200" trigger="hover">
<el-button size="small" type="text" slot="reference">上传附件</el-button>
<#--展示已经上传的文件-->
<div v-if="scope.row.attachment">
<el-tag size="small" v-for="attachment in scope.row.attachment"
@close="removeSupplierMaterialAttachment(scope, attachment)">
<a :href="attachment.uri">
<i class="el-icon-document"></i> {{attachment.name}}
</a>
</el-tag>
</div>
<span v-else>暂未上传</span>
</el-popover>
</el-upload>
</template>
@ -680,6 +688,7 @@
isEmpty,
isBlank,
hasText,
isNotEmpty,
changeMode(mode) {
this.mode = mode
},
@ -1094,12 +1103,6 @@
return ret
}
const mapAttachment = attachments => {
return attachments && JSON.stringify(attachments.map(file => ({
uri: file.response.data.url,
name: file.response.data.originName
})))
}
const form = {
...processForm,
processType,
@ -1120,7 +1123,7 @@
})),
// 剔除空行
supplierMaterials: supplierMaterialsForm.filter(hasProperties).map(item => ({
...item, attachment: mapAttachment(item.attachment)
...item, attachment: JSON.stringify(item.attachment) // 转化为 字符串
})),
}
const loading = this.$loading({
@ -1217,12 +1220,16 @@
},
handleSupplierMaterialRemove(scope, fileList) {
scope.row['fileList'] = fileList
scope.row['attachment'] = fileList
},
removeSupplierMaterialAttachment(scope, attachmentToRemove) {
scope.row['attachment'] = scope.row['attachment'].filter(item => item === attachmentToRemove)
},
handleSupplierMaterialExceed(scope, files, fileList) {
this.$message.warning("当前限制选择只能选择10个文件");
scope.row['fileList'] = fileList
scope.row['attachment'] = fileList
},
beforeSupplierMaterialRemove(scope, file, fileList) {
@ -1235,9 +1242,18 @@
handleSupplierMaterialFileUploaded(scope, response, file, fileList) {
if (response.success) {
scope.row['fileList'] = fileList
console.log(fileList)
let attachments = scope.row['attachment']
if (isEmpty(attachments)) {
attachments = []
scope.row['attachment'] = attachments
}
attachments.push({
uri: response.data.url,
name: file.name
})
this.fileListSupplierMaterial = fileList
this.$message.success("上传成功");
}
else {
this.$message.warning("上传失败");