feat(ProjectAttachment): 优化文件上传和管理功能

- 新增本地存储功能,暂存未提交的文件
- 优化文件删除逻辑,区分本地和服务器文件
- 添加提交按钮,将本地文件上传到服务器
- 调整标签切换时的文件列表显示逻辑
- 优化代码结构,提高可读性和可维护性
This commit is contained in:
dj
2025-05-22 16:45:58 +08:00
parent ee5fc2cba3
commit 673e4fa20a

View File

@@ -32,17 +32,23 @@
<!-- <el-button color="#DED0B2" @click="handleUpload">上传附件</el-button>--> <!-- <el-button color="#DED0B2" @click="handleUpload">上传附件</el-button>-->
<file-upload v-if="!isLineBtn&&uploadState&&activeName!='plus'&&activeName!='all'" @getFile="getFile"/> <file-upload v-if="!isLineBtn&&uploadState&&activeName!='plus'&&activeName!='all'" @getFile="getFile"/>
<el-button color="#DED0B2" @click="handleEditTag" v-if="activeName!='all'&&activeName!='plus'&&uploadState&&!isDefault" <el-button color="#DED0B2" @click="handleEditTag"
v-if="activeName!='all'&&activeName!='plus'&&uploadState&&!isDefault"
style="margin-left: 10px;">编辑 style="margin-left: 10px;">编辑
</el-button> </el-button>
</div> </div>
<fvTable style="width: 100%;min-height:311px;max-height: 311px" v-if="showAttachmentTable" height="311" :scrollbar-always-on="true" <fvTable style="width: 100%;min-height:311px;max-height: 311px" v-if="showAttachmentTable" height="311"
:scrollbar-always-on="true"
:tableConfig="executeTableConfig" class="execute-apply-table" :tableConfig="executeTableConfig" class="execute-apply-table"
:data="otherAttachmentList" :isSettingCol="false" :pagination="false"> :data="otherAttachmentList" :isSettingCol="false" :pagination="false">
<template #empty> <template #empty>
<el-empty :image-size="90" description="暂无数据" style="padding: 0"/> <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
</template> </template>
</fvTable> </fvTable>
<div class="oper-page-btn" style="margin-right: 90px" v-if="uploadState">
<el-button color="#DED0B2" @click="handleSubmit()">提交</el-button>
</div>
<file-preview ref="filePreviewRef" :fullscreen="false" v-if="filePreviewShow" :fileName="filePreviewParam.fileName" <file-preview ref="filePreviewRef" :fullscreen="false" v-if="filePreviewShow" :fileName="filePreviewParam.fileName"
:fileUrl="filePreviewParam.fileUrl" :fileUrl="filePreviewParam.fileUrl"
:fileType="filePreviewParam.fileType"/> :fileType="filePreviewParam.fileType"/>
@@ -166,6 +172,7 @@ const handleDownload = (row) => {
}) })
} }
const deleteSingleFile = (row) => { const deleteSingleFile = (row) => {
console.log("🚀 ~ file: ", row)
deleteFile(row.fileId).then(res => { deleteFile(row.fileId).then(res => {
ElNotification({ ElNotification({
title: '提示', title: '提示',
@@ -173,7 +180,13 @@ const deleteSingleFile = (row) => {
type: res.code === 1000 ? 'success' : 'error' type: res.code === 1000 ? 'success' : 'error'
}) })
if (res.code === 1000) { if (res.code === 1000) {
if (row.newFile) {
const finalList = getLocalList().filter(item => item.fileId !== row.fileId);
localStorage.setItem(`implementAllFileList-${route.query.projectId}`, JSON.stringify(finalList))
}else{
otherAttachmentList.value.splice(otherAttachmentList.value.findIndex((item) => item.fileId === row.fileId), 1); otherAttachmentList.value.splice(otherAttachmentList.value.findIndex((item) => item.fileId === row.fileId), 1);
}
getAttachmentList() getAttachmentList()
activeName.value = 'all' activeName.value = 'all'
} }
@@ -297,12 +310,22 @@ const getFile = (val) => {
console.log('上传文件', val) console.log('上传文件', val)
let fileObj = compositeParam(val) let fileObj = compositeParam(val)
fileList.value.push(fileObj) fileList.value.push(fileObj)
handleSubmit([fileObj]) localStorage.setItem(`implementAllFileList-${route.query.projectId}`, JSON.stringify(fileList.value))
otherAttachmentList.value.push(fileObj)
// handleSubmit([fileObj])
} }
const handleSubmit = async (list) => { const handleSubmit = async () => {
if (getLocalList().length == 0) {
ElNotification({
title: '提示',
message: '暂无文件可提交',
type: 'warning'
})
return;
} else {
let params = { let params = {
fileList: list, fileList: getLocalList(),
projectId: route.query.projectId, projectId: route.query.projectId,
targetState: "30" targetState: "30"
} }
@@ -315,11 +338,18 @@ const handleSubmit = async (list) => {
}) })
fileList.value = [] fileList.value = []
} else { } else {
list.forEach(item => { ElNotification({
otherAttachmentList.value.push(item) title: '提示',
message: res.msg,
type: 'success'
}) })
localStorage.removeItem(`implementAllFileList-${route.query.projectId}`)
// list.forEach(item => {
// otherAttachmentList.value.push(item)
// })
}
// changeFileList('all',true)
} }
changeFileList('all',true)
} }
const clickToPreview = (row) => { const clickToPreview = (row) => {
filePreviewShow.value = false filePreviewShow.value = false
@@ -335,34 +365,44 @@ const clickToPreview = (row) => {
const changeFileList = (tag, flag) => { const changeFileList = (tag, flag) => {
let params = {} let params = {}
if (tag == 'all') { if (tag == 'all') {
params = { otherAttachmentList.value = allFiles.value
targetId: route.query.projectId, // params = {
targetState: "30", // targetId: route.query.projectId,
} // targetState: "30",
// }
} else { } else {
params = { otherAttachmentList.value = allFiles.value.filter(item1 => item1.tag == tag)
targetId: route.query.projectId, // params = {
targetState: "30", // targetId: route.query.projectId,
tag: tag // targetState: "30",
} // tag: tag
// }
} }
showAttachmentTable.value = false showAttachmentTable.value = false
searchImplementationFileList(params).then(res => { // searchImplementationFileList(params).then(res => {
if (res.code === 1000) { // if (res.code === 1000) {
if(tag == 'all'&&flag){ // if(tag == 'all'&&flag){
allFiles.value = res.data.fileList // // allFiles.value = res.data.fileList
}else{ // }else{
otherAttachmentList.value = res.data.fileList // otherAttachmentList.value =res.data.fileList
} // }
if (flag) { if (flag) {
getTagsOption(flag) getTagsOption(flag)
} }
nextTick(() => { nextTick(() => {
showAttachmentTable.value = true showAttachmentTable.value = true
}) })
// }
// })
}
const getLocalList = () => {
if (localStorage.getItem(`implementAllFileList-${route.query.projectId}`) && JSON.parse(localStorage.getItem(`implementAllFileList-${route.query.projectId}`))) {
const list = JSON.parse(localStorage.getItem(`implementAllFileList-${route.query.projectId}`))
return list
} else {
return []
} }
})
} }
const getAttachmentList = () => { const getAttachmentList = () => {
const loading = ElLoading.service({fullscreen: true}) const loading = ElLoading.service({fullscreen: true})
@@ -373,11 +413,9 @@ const getAttachmentList = () => {
showAttachmentTable.value = false showAttachmentTable.value = false
searchImplementationFileList(params).then(res => { searchImplementationFileList(params).then(res => {
if (res.code === 1000) { if (res.code === 1000) {
// otherAttachmentList.value = res.data.fileList otherAttachmentList.value = [...res.data.fileList, ...getLocalList()]
otherAttachmentList.value = res.data.fileList allFiles.value = [...res.data.fileList, ...getLocalList()]
allFiles.value = res.data.fileList
uploadState.value = res.data.upload uploadState.value = res.data.upload
getTagsOption() getTagsOption()
nextTick(() => { nextTick(() => {
showAttachmentTable.value = true showAttachmentTable.value = true