mula
/
fourcal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化详情界面 重构文件上传，以及展示

master
Harry Yang 2023-01-05 11:30:26 +08:00
parent c7372b37a4
commit 2cbe6902ed
4 changed files with 311 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/main/java/cn/palmte/work/controller/backend/ProcessController.java
View File

@ -180,7 +180,7 @@ public class ProcessController {
public String detail(@PathVariable int id, Model model, @RequestParam(defaultValue = "false") boolean forAudit) {
model.addAttribute("processId", id);
ProjectProcess process = repository.findOne(id);
ProjectProcess process = obtainProjectProcess(id);
model.addAttribute("process", process);
Project project = projectRepository.findById(process.getProjectId());
@ -200,7 +200,7 @@ public class ProcessController {
else {
model.addAttribute("forAudit", forAudit);
}
if (process.getProcessType() != null) {
switch (process.getProcessType()) {
case sale_contract: {
@ -378,6 +378,7 @@ public class ProcessController {
procurementDetails = processService.getProcurementDetails(project.getId(), id);
}
detail.setIsPrepaid(isPrepaid(project));
detail.setContract(contract);
detail.setIncomeDetails(incomeDetails);
detail.setSupplierMaterials(supplierMaterials);

158
src/main/resources/templates/admin/business/process-detail.ftl
View File

@ -54,7 +54,11 @@
<el-descriptions title="${process.processType.description}详情" v-cloak>
<el-descriptions-item label="项目编号">{{process.projectNo}}</el-descriptions-item>
<el-descriptions-item label="标题">{{process.projectTitle}}</el-descriptions-item>
<el-descriptions-item label="标题">
<el-popover placement="top-start" title="标题" width="400" trigger="hover" :content="process.projectTitle">
<span slot="reference">{{process.projectTitle|ellipsis(28)}}</span>
</el-popover>
</el-descriptions-item>
<el-descriptions-item label="申请时间">{{process.applyDate}}</el-descriptions-item>
<el-descriptions-item label="项目类型">${projectType}</el-descriptions-item>
<el-descriptions-item label="合作类型">${cooperationType}</el-descriptions-item>
@ -74,7 +78,7 @@
<span slot="reference">{{process.contractName|ellipsis}}</span>
</el-popover>
</el-descriptions-item>
<el-descriptions-item label="合同金额">{{project.contractAmount}}</el-descriptions-item>
<el-descriptions-item label="合同金额">{{project.contractAmount}}元</el-descriptions-item>
<el-descriptions-item label="客户名称" v-if="isSaleContract">
<el-popover placement="top-start" title="备客户名称注" width="400" trigger="hover" :content="contract.clientName">
@ -85,14 +89,31 @@
<el-descriptions-item label="最终用户名称">{{project.terminalCustomer}}</el-descriptions-item>
<el-descriptions-item label="用印类型">
<div style="overflow-x: auto;max-width: 400px; display:flex;">
<#list process.sealTypes.list as item>
<el-tag size="small">${item.description}</el-tag>
</#list>
</div>
<#assign sealTypes = process.sealTypes.list>
<#if sealTypes?size==1>
<el-tag size="small">${sealTypes[0].description}</el-tag>
<#elseif sealTypes?size gt 1>
<el-popover placement="top-start" title="用印类型" width="150" trigger="hover">
<a slot="reference">查看用印类型</a>
<#--展示已经上传的文件-->
<div style="margin-top: 10px">
<ul class="el-upload-list el-upload-list--text">
<#list sealTypes as item>
<li class="el-upload-list__item is-success">
<el-tag size="small">${item.description}</el-tag>
</li>
</#list>
</ul>
</div>
</el-popover>
<#else>
<strong>没有用印类型</strong>
</#if>
</el-descriptions-item>
<el-descriptions-item label="税率">{{process.taxRate}}%</el-descriptions-item>
<el-descriptions-item label="税率" v-if="process.taxRate">{{process.taxRate}}%</el-descriptions-item>
<el-descriptions-item label="税率" v-else></el-descriptions-item>
<el-descriptions-item label="是否垫资">${isPrepaid}</el-descriptions-item>
<el-descriptions-item label="垫资金额" v-if="isPrepaid==='是'">${repaidAmount}元</el-descriptions-item>
@ -117,11 +138,31 @@
</el-popover>
</el-descriptions-item>
<el-descriptions-item label="附件">
<el-tag size="small" v-for="attachment in attachments">
<a :href="attachment.uri" target="_blank">
<i class="el-icon-document"></i> {{attachment.name}}
<span v-if="isNotEmpty(attachments) && attachments.length===1" title="点击查看或下载">
<a :href="attachments[0].uri" target="_blank">
<el-tag size="small">
<i class="el-icon-document"></i>{{attachments[0].name|ellipsis(50)}}
</el-tag>
</a>
</el-tag>
</span>
<el-popover v-if="isNotEmpty(attachments) && attachments.length > 1"
placement="top-start" title="上传的附件" width="380" trigger="hover">
<a slot="reference">查看附件列表</a>
<#--展示已经上传的文件-->
<div style="margin-top: 10px">
<ul class="el-upload-list el-upload-list--text">
<li class="el-upload-list__item is-success" v-for="attachment in attachments"
:key="attachment.name" title="点击查看或下载">
<a class="el-upload-list__item-name" :href="attachment.uri" target="_blank">
<i class="el-icon-document"></i>{{attachment.name|ellipsis(50)}}
</a>
</li>
</ul>
</div>
</el-popover>
<span v-if="isEmpty(attachments)"><strong>没有上传附件</strong></span>
</el-descriptions-item>
</el-descriptions>
@ -164,11 +205,23 @@
<el-table-column prop="remark" label="备注" align="center"></el-table-column>
<el-table-column prop="attachment" label="附件" align="center" width="150">
<template slot-scope="scope">
<el-tag size="small" v-for="attachment in scope.row.attachment">
<a :href="attachment.uri" target="_blank">
<i class="el-icon-document"></i> {{attachment.name}}
</a>
</el-tag>
<el-popover v-if="isNotEmpty(scope.row.attachment)" placement="top-end" title="上传的附件" width="380" trigger="hover">
<el-button size="small" type="text" slot="reference">附件查看</el-button>
<#--展示已经上传的文件-->
<div style="margin-top: 10px">
<ul class="el-upload-list el-upload-list--text">
<li class="el-upload-list__item is-success" v-for="attachment in scope.row.attachment"
:key="attachment.name" title="点击查看或下载">
<a class="el-upload-list__item-name" :href="attachment.uri" target="_blank">
<i class="el-icon-document"></i>{{attachment.name|ellipsis(50)}}
</a>
</li>
</ul>
</div>
</el-popover>
<span v-else><strong>没有上传附件</strong></span>
</template>
</el-table-column>
@ -180,7 +233,7 @@
<div v-if="isProcurementContract">
<el-alert title="采购清单" type="success" center :closable="false"></el-alert>
<el-table border :data="procurementDetails" empty-text="暂无">
<el-table border :data="procurementDetails" empty-text="暂无" row-key="rowKey" default-expand-all>
<el-table-column type="index" :index="1" label="序号" fixed></el-table-column>
<el-table-column prop="feeType" label="费用项目" fixed width="80"></el-table-column>
<el-table-column prop="name" label="产品名称" fixed></el-table-column>
@ -257,7 +310,14 @@
<script>
const isEmpty = (obj) => {
return !obj || (obj.length && obj.length === 0)
if (!obj) {
return true
}
if (obj.hasOwnProperty('length')) {
return obj.length === 0
}
return false
}
const isNotEmpty = (obj) => {
@ -304,6 +364,10 @@
}
const methods = {
isBlank,
hasText,
isEmpty,
isNotEmpty,
backLastPage() {
window.history.back();
},
@ -335,11 +399,17 @@
default: return '未知'
}
}
// @formatter:on
const computeFeeType = (type) => {
switch (type) {
case 1: return '设备'
case 2: return '施工'
case 3: return '服务'
case 4: return '其他'
default: return '未知'
}
}
this.incomeDetails = incomeDetails.map(detail => ({
...detail, type: computeType(detail.type)
}))
// @formatter:on
const mapAttachment = attachment => {
if (hasText(attachment)) {
@ -368,7 +438,47 @@
this.supplierMaterials = supplierMaterials && supplierMaterials.map(item => ({
...item, attachment: mapAttachment(item.attachment)
}))
this.procurementDetails = procurementDetails
const convertCommon = detail => {
return {
rowKey: rowKey++, feeType: computeFeeType(detail.type),
totalTaxInclude_: detail.totalTaxInclude, // 存在相同字段转换一下
}
}
let rowKey = 0
const computeProcurementDetails = procurementDetails => {
const ret = []
for (let detail of procurementDetails || []) {
//父级数据
const parent = {
...detail, ...convertCommon(detail),
}
// mapChildren
let { purchaseDetails } = parent
if (isNotEmpty(purchaseDetails)) {
// 先取出第一个合并
const first = purchaseDetails.shift();
// 再处理剩余的子元素
purchaseDetails = purchaseDetails.map(purchase => ({
...purchase, rowKey: rowKey++, parent, newRow: true
}))
// 合并第一行到父级
Object.assign(parent, first)
delete parent['parent']
delete parent['purchaseDetails']
parent['children'] = purchaseDetails
}
ret.push(parent)
}
return ret
}
this.procurementDetails = computeProcurementDetails(procurementDetails)
this.incomeDetails = incomeDetails.map(detail => ({
...detail, type: computeType(detail.type)
}))
this.attachments = attachments.map(item => ({
...item, isImage: isImage(item.name)

193
src/main/resources/templates/admin/business/process-edit.ftl
View File

@ -106,14 +106,7 @@
<el-form-item label="申请部门" :rules="[{ required: true, message: '申请部门不能为空'}]" prop="applyDeptId">
<el-cascader :options="applyDeptSectorOptions" clearable v-model="processForm.applyDeptId"
:props="{ expandTrigger: 'hover', label:'name', value: 'id'}" @change="applyDeptSelected">
<template slot-scope="{ node, data }">
<span>{{ data.name }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
</el-cascader>
:props="{ expandTrigger: 'hover', label:'name', value: 'id'}" @change="applyDeptSelected"></el-cascader>
</el-form-item>
<el-form-item label="申请人">
@ -148,7 +141,7 @@
</el-form-item>
<el-form-item label="合同金额">
<span>{{processForm.contractAmount}}元</span>
<span>{{project.contractAmount}}元</span>
</el-form-item>
</div>
@ -163,7 +156,7 @@
</el-form-item>
<el-form-item label="最终用户名称">
<span>{{processForm.terminalCustomer}}</span>
<span>{{project.terminalCustomer}}</span>
</el-form-item>
</div>
@ -192,11 +185,11 @@
</el-form-item>
<el-form-item label="垫资金额" v-if="processForm.isPrepaid!=='否'">
<span>{{processForm.repaidAmount}}</span>
<span>{{processForm.repaidAmount}}元</span>
</el-form-item>
<el-form-item label="预算毛利率">
<span>{{processForm.budgetGrossMargin}}</span>
<span>{{processForm.budgetGrossMargin}}%</span>
</el-form-item>
</div>
@ -224,19 +217,27 @@
<div>
<el-form-item label="上传附件" :rules="[{ required: true, message: '未上传附件'}]">
<el-upload class="upload-demo"
action="${base}/file/upload"
name="files[]"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:before-upload="beforeUpload"
:on-success="handleFileUploaded"
:limit="10" :file-list="fileList"
:on-exceed="handleExceed"
<el-upload class="upload-demo" action="${base}/file/upload" name="files[]"
:before-upload="file => beforeUpload(attachments, file)"
:on-success="handleFileUploaded" :show-file-list="false"
accept=".rar,.zip,.7z,.doc,.docx,.pdf,.xls,.xlsx,.png,.jpg,.jpeg,.gif,.bmp,.webp">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传PDF、excel、word、图片、压缩包，且不超过50MB</div>
</el-upload>
<#--已经上传的文件列表-->
<div v-if="isNotEmpty(attachments)" style="margin-top: 10px">
<ul class="el-upload-list el-upload-list--text">
<li class="el-upload-list__item is-success" title="点击查看或下载"
v-for="attachment in attachments" :key="attachment.name">
<a class="el-upload-list__item-name" :href="attachment.uri" target="_blank">
<i class="el-icon-document"></i>{{attachment.name|ellipsis}}
</a>
<i class="el-icon-close" @click="removeAttachment(attachment)"></i>
</li>
</ul>
</div>
</el-form-item>
</div>
@ -294,25 +295,25 @@
</el-table-column>
<el-table-column prop="attachment" label="附件" align="center" width="150">
<template slot-scope="scope">
<el-upload :file-list="scope.row.fileList"
:limit="10" size="mini" name="files[]" action="${base}/file/upload"
<el-upload :show-file-list="false"
size="mini" name="files[]" action="${base}/file/upload"
accept=".rar,.zip,.7z,.doc,.docx,.pdf,.xls,.xlsx,.png,.jpg,.jpeg,.gif,.bmp,.webp"
: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)">
:before-upload="file => beforeUpload(scope.row.attachment, file)"
:on-success="(response, file, fileList) => handleSupplierMaterialFileUploaded(scope, response, file, fileList)">
<el-popover placement="top-end" title="已经上传的附件" width="380" trigger="hover">
<el-button size="small" type="text" slot="reference">上传附件</el-button>
<#--展示已经上传的文件-->
<div>只能上传PDF、excel、word、图片、压缩包，且不超过50MB</div>
<div v-if="isNotEmpty(scope.row.attachment)" style="margin-top: 10px">
<el-tag size="small" v-for="attachment in scope.row.attachment" closable :key="attachment.name"
@close="removeSupplierMaterialAttachment(scope, attachment)">
<a :href="attachment.uri" target="_blank">
<i class="el-icon-document"></i> {{attachment.name|ellipsis}}
</a>
</el-tag>
<ul class="el-upload-list el-upload-list--text">
<li class="el-upload-list__item is-success" title="点击查看或下载"
v-for="attachment in scope.row.attachment" :key="attachment.name">
<a class="el-upload-list__item-name" :href="attachment.uri" target="_blank">
<i class="el-icon-document"></i>{{attachment.name|ellipsis}}
</a>
<i class="el-icon-close" @click="removeSupplierMaterialAttachment(scope, attachment)"></i>
</li>
</ul>
</div>
<span v-else style="margin-top: 10px;text-align: center"><strong>暂未上传</strong></span>
</el-popover>
@ -503,6 +504,14 @@
"procurementAmount"
]
const fileUploadSuffix = [
".pdf",
".doc", ".docx",
".xls", ".xlsx",
".rar", ".zip", ".7z",
".png", ".jpg", ".jpeg", ".gif", ".bmp", ".webp"
]
const isEmpty = (obj) => {
if (!obj) {
return true
@ -545,6 +554,17 @@
return isNotEmpty(Object.keys(obj));
}
const attachmentMapper = file => {
return {
uri: file.response.data.url,
name: file.name
}
}
const isEmptyObject = obj => {
return isEmpty(Object.keys(obj));
}
const data = () => {
return {
mode: "btn", // btn
@ -555,7 +575,7 @@
processType: '',
projectSelected: false,
applyDeptSectorOptions: [],
fileList: [],
attachments: [], // 附件列表
// 销售合同收入明细
incomeDetails: [],
supplierMaterialsForm: [],
@ -668,7 +688,8 @@
resetForm() {
this.initForm({})
this.fileList = []
this.project = []
this.attachments = []
this.rowKeyCounter = 0
this.incomeDetails = []
this.projectSelected = false
@ -693,7 +714,7 @@
.then(parseJSON)
.then(data => {
const {
incomeDetails, process, supplierMaterials,
incomeDetails, process, supplierMaterials, project,
contract, procurementDetails, attachments, ...form
} = data
// 转换数据
@ -726,9 +747,8 @@
...detail, type: computeType(detail.type), index: indexCounter++ // 用于记录序号，展示或者定位
}))
this.fileList = attachments.map(item => ({
name: item.name, url: item.uri
}))
this.project = project
this.attachments = attachments
const mapAttachment = attachment => {
if (hasText(attachment)) {
@ -825,7 +845,7 @@
},
submit(needValid) {
const fileList = this.fileList
const attachments = this.attachments
const processForm = this.processForm
const processType = this.processType
const supplierMaterialsForm = this.supplierMaterialsForm
@ -836,7 +856,7 @@
this.$refs["contractProcessForm"].validate((valid) => {
if (valid) {
if (fileList && fileList.length === 0) {
if (attachments && attachments.length === 0) {
this.$message.error("未上传附件");
return false
}
@ -947,12 +967,7 @@
...processForm,
processType,
applyDeptId: processForm.applyDeptId?.join(','), // (逗号分割),
attachments: fileList.map(file => {
if (file.url) {
return { uri: file.url, name: file.name }
}
return { uri: file.response.data.url, name: file.name }
}),
attachments: attachments,
incomeDetails: this.incomeDetails.map(detail => ({
id: detail.id, expirationDate: detail.expirationDate
})),
@ -1013,23 +1028,6 @@
this.goToSaleContractProcess()
},
handleRemove(file, fileList) {
this.fileList = fileList
},
handleExceed(files, fileList) {
this.$message.warning("当前限制选择只能选择10个文件");
this.fileList = fileList
},
beforeRemove(file, fileList) {
if (this.isExtensionFailed(file) || this.isUploadFileSizeExceed(file)) {
// beforeUpload 阻断上传后 会调用该方法 上传文件大小不能超过 50MB
return true;
}
return this.$confirm("确定移除 " + file.name + "？");
},
isUploadFileSizeExceed(file) {
return file.size > 50 * 1024 * 1024
},
@ -1039,7 +1037,12 @@
return isEmpty(fileUploadSuffix.filter(suffix => name.endsWith(suffix)))
},
beforeUpload(file) {
beforeUpload(attachments, file) {
if (attachments.length === 10) {
this.$message.warning("当前限制选择只能选择10个文件");
return false
}
if (this.isExtensionFailed(file)) {
this.$message.warning("只能上传PDF、Excel、Word、图片、压缩包");
return false;
@ -1050,40 +1053,32 @@
}
},
removeAttachment(file) {
this.$confirm("确定移除 " + file.name + "？")
.then(re => {
this.attachments = this.attachments.filter(item => item !== file)
})
},
handleFileUploaded(response, file, fileList) {
if (response.success) {
this.fileList = fileList
this.attachments.push({
uri: response.data.url,
name: file.name
})
this.attachments = this.filterFiles(this.attachments)
this.$message.success("上传成功");
}
else {
this.$message.warning("上传失败");
}
},
handleSupplierMaterialRemove(scope, fileList) {
scope.row['attachment'] = fileList.map(file => ({
uri: file.response.data.url,
name: file.name
}))
},
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.map(file => ({
uri: file.response.data.url,
name: file.name
}))
},
beforeSupplierMaterialRemove(scope, file, fileList) {
if (this.isExtensionFailed(file) || this.isUploadFileSizeExceed(file)) {
// beforeUpload 阻断上传后 会调用该方法 上传文件大小不能超过 50MB
return true;
}
return this.$confirm("确定移除 " + file.name + "？");
this.$confirm("确定移除 " + attachmentToRemove.name + "？")
.then(r => {
scope.row['attachment'] = scope.row['attachment'].filter(item => item !== attachmentToRemove)
})
},
handleSupplierMaterialFileUploaded(scope, response, file, fileList) {
@ -1096,8 +1091,7 @@
uri: response.data.url,
name: file.name
})
scope.row.attachment = attachments
scope.row.attachment = this.filterFiles(attachments)
this.$message.success("上传成功");
}
else {
@ -1105,6 +1099,19 @@
}
},
/**
* 将名字相同的过滤掉
* @param fileList 要过滤的文件列表 必须含有 name 字段
* @returns {any[]}
*/
filterFiles(fileList) {
const map = new Map()
fileList.forEach(item => {
map.set(item.name, item)
})
return Array.from(map.values())
},
indexMethod(index) {
return index * 1;
},

144
src/main/resources/templates/admin/business/process-new.ftl
View File

@ -310,7 +310,7 @@
</el-form-item>
<el-form-item label="预算毛利率">
<span v-if="projectSelected">{{processForm.budgetGrossMargin}}</span>
<span v-if="projectSelected">{{processForm.budgetGrossMargin}}%</span>
<span v-else>未选择项目</span>
</el-form-item>
@ -339,20 +339,27 @@
<div>
<el-form-item label="上传附件" :rules="[{ required: true, message: '未上传附件'}]">
<el-upload class="upload-demo"
action="${base}/file/upload"
name="files[]"
:limit="10"
<el-upload :show-file-list="false"
class="upload-demo" action="${base}/file/upload" name="files[]"
accept=".rar,.zip,.7z,.doc,.docx,.pdf,.xls,.xlsx,.png,.jpg,.jpeg,.gif,.bmp,.webp"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:before-upload="beforeUpload"
:before-remove="beforeRemove"
:on-success="handleFileUploaded">
:before-upload="file => beforeUpload(attachments, file)" :on-success="handleFileUploaded">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传PDF、excel、word、图片、压缩包，且不超过50MB</div>
</el-upload>
<#--已经上传的文件列表-->
<div v-if="isNotEmpty(attachments)" style="margin-top: 10px">
<ul class="el-upload-list el-upload-list--text">
<li class="el-upload-list__item is-success" title="点击查看或下载"
v-for="attachment in attachments" :key="attachment.name">
<a class="el-upload-list__item-name" :href="attachment.uri" target="_blank">
<i class="el-icon-document"></i>{{attachment.name|ellipsis}}
</a>
<i class="el-icon-close" @click="removeAttachment(attachment)"></i>
</li>
</ul>
</div>
</el-form-item>
</div>
<div>
@ -405,24 +412,25 @@
</el-table-column>
<el-table-column prop="attachment" label="附件" align="center" width="150">
<template slot-scope="scope">
<el-upload :limit="10" size="mini" name="files[]" action="${base}/file/upload"
<el-upload size="mini" name="files[]" action="${base}/file/upload"
accept=".rar,.zip,.7z,.doc,.docx,.pdf,.xls,.xlsx,.png,.jpg,.jpeg,.gif,.bmp,.webp"
: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)">
:before-upload="file => beforeUpload(scope.row.attachment, file)"
:show-file-list="false"
:on-success="(response, file, fileList) => handleSupplierMaterialFileUploaded(scope, response, file, fileList)">
<el-popover placement="top-end" title="已经上传的附件" width="380" trigger="hover">
<el-button size="small" type="text" slot="reference">上传附件</el-button>
<#--展示已经上传的文件-->
<div>只能上传PDF、excel、word、图片、压缩包，且不超过50MB</div>
<div v-if="isNotEmpty(scope.row.attachment)" style="margin-top: 10px">
<el-tag size="small" v-for="attachment in scope.row.attachment" closable :key="attachment.name"
@close="removeSupplierMaterialAttachment(scope, attachment)">
<a :href="attachment.uri" target="_blank">
<i class="el-icon-document"></i> {{attachment.name|ellipsis}}
</a>
</el-tag>
<ul class="el-upload-list el-upload-list--text">
<li class="el-upload-list__item is-success" title="点击查看或下载"
v-for="attachment in scope.row.attachment" :key="attachment.name">
<a class="el-upload-list__item-name" :href="attachment.uri" target="_blank">
<i class="el-icon-document"></i>{{attachment.name|ellipsis}}
</a>
<i class="el-icon-close" @click="removeSupplierMaterialAttachment(scope, attachment)"></i>
</li>
</ul>
</div>
<span v-else style="margin-top: 10px;text-align: center"><strong>暂未上传</strong></span>
</el-popover>
@ -674,10 +682,10 @@
processForm: {
sealTypes: [],
},
attachments: [],
supplierMaterialsForm: [],
projectSelected: false,
applyDeptSectorOptions: [],
fileList: [],
// 销售合同收入明细
incomeDetails: [],
procurementDetails: [],
@ -838,7 +846,7 @@
resetForm() {
this.initForm({})
this.fileList = []
this.attachments = []
this.rowKeyCounter = 0
this.incomeDetails = []
this.projectSelected = false
@ -989,7 +997,7 @@
},
async submit(needValid) {
const fileList = this.fileList
const attachments = this.attachments
const processForm = this.processForm
const processType = this.processType
const supplierMaterialsForm = this.supplierMaterialsForm
@ -1004,7 +1012,7 @@
this.$refs["contractProcessForm"].validate((valid) => {
if (valid) {
if (fileList && fileList.length === 0) {
if (attachments && attachments.length === 0) {
this.$message.error("未上传附件");
return false
}
@ -1050,6 +1058,12 @@
return false
}
}
else if (value instanceof Array) {
if (value.length === 0) {
this.$message.error("供应商比选材料第'" + idx + "'行有数据未填写,请检查表单")
return false
}
}
}
else {
// 没有值
@ -1116,10 +1130,7 @@
...processForm,
processType,
applyDeptId: processForm.applyDeptId?.join(','),// (逗号分割),
attachments: fileList.map(file => ({
uri: file.response.data.url,
name: file.response.data.originName
})),
attachments: attachments,
incomeDetails: this.incomeDetails.map(detail => ({
id: detail.id, expirationDate: detail.expirationDate
})),
@ -1202,15 +1213,6 @@
this.goToSaleContractProcess()
},
handleRemove(file, fileList) {
this.fileList = fileList
},
handleExceed(files, fileList) {
this.$message.warning("当前限制选择只能选择10个文件");
this.fileList = fileList
},
isUploadFileSizeExceed(file) {
return file.size > 50 * 1024 * 1024
},
@ -1220,15 +1222,12 @@
return isEmpty(fileUploadSuffix.filter(suffix => name.endsWith(suffix)))
},
beforeRemove(file, fileList) {
if (this.isExtensionFailed(file) || this.isUploadFileSizeExceed(file)) {
// beforeUpload 阻断上传后 会调用该方法 上传文件大小不能超过 50MB
return true;
beforeUpload(attachments, file) {
if (attachments.length === 10) {
this.$message.warning("当前限制选择只能选择10个文件");
return false
}
return this.$confirm("确定移除 " + file.name + "？");
},
beforeUpload(file) {
if (this.isExtensionFailed(file)) {
this.$message.warning("只能上传PDF、Excel、Word、图片、压缩包");
return false;
@ -1239,40 +1238,45 @@
}
},
/**
* 将名字相同的过滤掉
* @param fileList 要过滤的文件列表 必须含有 name 字段
* @returns {any[]}
*/
filterFiles(fileList) {
const map = new Map()
fileList.forEach(item => {
map.set(item.name, item)
})
return Array.from(map.values())
},
handleFileUploaded(response, file, fileList) {
if (response.success) {
this.fileList = fileList
this.attachments.push({
uri: response.data.url,
name: file.name
})
this.attachments = this.filterFiles(this.attachments)
this.$message.success("上传成功");
}
else {
this.$message.warning("上传失败");
}
},
handleSupplierMaterialRemove(scope, fileList) {
scope.row['attachment'] = fileList.map(file => ({
uri: file.response.data.url,
name: file.name
}))
removeAttachment(file) {
this.$confirm("确定移除 " + file.name + "？")
.then(re => {
this.attachments = this.attachments.filter(item => item !== file)
})
},
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.map(file => ({
uri: file.response.data.url,
name: file.name
}))
},
beforeSupplierMaterialRemove(scope, file, fileList) {
if (this.isExtensionFailed(file) || this.isUploadFileSizeExceed(file)) {
// beforeUpload 阻断上传后 会调用该方法 上传文件大小不能超过 50MB
return true;
}
return this.$confirm("确定移除 " + file.name + "？");
this.$confirm("确定移除 " + attachmentToRemove.name + "？")
.then(r => {
scope.row['attachment'] = scope.row['attachment'].filter(item => item !== attachmentToRemove)
})
},
handleSupplierMaterialFileUploaded(scope, response, file, fileList) {
@ -1286,7 +1290,7 @@
name: file.name
})
scope.row.attachment = attachments
scope.row.attachment = this.filterFiles(attachments)
this.$message.success("上传成功");
}
else {