odjbin/mosr-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 新增本地存储功能，暂存未提交的文件
- 优化文件删除逻辑，区分本地和服务器文件
- 添加提交按钮，将本地文件上传到服务器
- 调整标签切换时的文件列表显示逻辑
- 优化代码结构，提高可读性和可维护性
This commit is contained in:
dj
2025-05-22 16:45:58 +08:00
parent ee5fc2cba3
commit 673e4fa20a
1 changed files with 114 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
src/components/DetailComponent/ProjectAttachment.vue
View File

@@ -32,17 +32,23 @@
<!-- <el-button color="#DED0B2" @click="handleUpload">上传附件</el-button>-->
<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;">编辑
</el-button>
</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"
:data="otherAttachmentList" :isSettingCol="false" :pagination="false">
<template #empty>
<el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
</template>
</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"
:fileUrl="filePreviewParam.fileUrl"
:fileType="filePreviewParam.fileType"/>
@@ -132,7 +138,7 @@ const executeTableConfig = reactive({
<div>
<el-button type="primary" link onClick={() => handleDownload(row)}>下载</el-button>
{
uploadState.value ?
uploadState.value ?
<popover-delete name={row.originalFileName} type={'文件'} btnType={'danger'}
onDelete={() => deleteSingleFile(row)}/> : ''
}
@@ -166,18 +172,25 @@ const handleDownload = (row) => {
})
}
const deleteSingleFile = (row) => {
deleteFile(row.fileId).then(res => {
ElNotification({
title: '提示',
message: res.msg,
type: res.code === 1000 ? 'success' : 'error'
})
if (res.code === 1000) {
otherAttachmentList.value.splice(otherAttachmentList.value.findIndex((item) => item.fileId === row.fileId), 1);
getAttachmentList()
activeName.value = 'all'
}
});
console.log("🚀 ~ file: ", row)
deleteFile(row.fileId).then(res => {
ElNotification({
title: '提示',
message: res.msg,
type: res.code === 1000 ? 'success' : 'error'
})
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);
}
getAttachmentList()
activeName.value = 'all'
}
});
}
const changeTag = async () => {
@@ -188,7 +201,7 @@ const changeTag = async () => {
fileTag: fileParam.value.tagName,
projectId: route.query.projectId,
})
changeFileList(fileParam.value.tagName,true)
changeFileList(fileParam.value.tagName, true)
} else {
res = await addTag({
projectId: route.query.projectId,
@@ -207,7 +220,7 @@ const changeTag = async () => {
tagNameShow.value = false;
}
const tabRemove = async (val) => {
if(otherAttachmentList.value&&otherAttachmentList.value.length>0){
if (otherAttachmentList.value && otherAttachmentList.value.length > 0) {
ElNotification({
title: '提示',
message: '该标签下存在文件，不能删除标签。如需删除标签，请先删除该标签下的所有文件。',
@@ -234,7 +247,7 @@ const tabRemove = async (val) => {
}
const handleEditTag = () => {
fileParam.value.tagName = getTagName(activeName.value)
if(otherAttachmentList.value&&otherAttachmentList.value.length>0){
if (otherAttachmentList.value && otherAttachmentList.value.length > 0) {
ElNotification({
title: '提示',
message: '该标签下存在文件，不能编辑标签。如需编辑标签，请先删除该标签下的所有文件。',
@@ -254,11 +267,11 @@ const getTagName = (name) => {
return tagName
}
const handleTabClick = (item) => {
const defaultArray=tagsOption.value.filter(item1=>item1.tagId==item.props.name)
if(defaultArray&&defaultArray.length>0){
isDefault.value=defaultArray[0].isDefault==1
}else{
isDefault.value=false
const defaultArray = tagsOption.value.filter(item1 => item1.tagId == item.props.name)
if (defaultArray && defaultArray.length > 0) {
isDefault.value = defaultArray[0].isDefault == 1
} else {
isDefault.value = false
}
tagNameShow.value = item.props.name == 'plus';
if (item.props.name == 'plus') {
@@ -297,29 +310,46 @@ const getFile = (val) => {
console.log('上传文件', val)
let fileObj = compositeParam(val)
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) => {
let params = {
fileList: list,
projectId: route.query.projectId,
targetState: "30"
}
let res = await uploadFileList(params)
if (res.code !== 1000) {
const handleSubmit = async () => {
if (getLocalList().length == 0) {
ElNotification({
title: '提示',
message: res.msg,
type: 'error'
})
fileList.value=[]
}else{
list.forEach(item => {
otherAttachmentList.value.push(item)
message: '暂无文件可提交',
type: 'warning'
})
return;
} else {
let params = {
fileList: getLocalList(),
projectId: route.query.projectId,
targetState: "30"
}
let res = await uploadFileList(params)
if (res.code !== 1000) {
ElNotification({
title: '提示',
message: res.msg,
type: 'error'
})
fileList.value = []
} else {
ElNotification({
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) => {
filePreviewShow.value = false
@@ -332,37 +362,47 @@ const clickToPreview = (row) => {
filePreviewShow.value = true
})
}
const changeFileList = (tag,flag) => {
const changeFileList = (tag, flag) => {
let params = {}
if (tag == 'all') {
params = {
targetId: route.query.projectId,
targetState: "30",
}
otherAttachmentList.value = allFiles.value
// params = {
// targetId: route.query.projectId,
// targetState: "30",
// }
} else {
params = {
targetId: route.query.projectId,
targetState: "30",
tag: tag
}
otherAttachmentList.value = allFiles.value.filter(item1 => item1.tag == tag)
// params = {
// targetId: route.query.projectId,
// targetState: "30",
// tag: tag
// }
}
showAttachmentTable.value = false
searchImplementationFileList(params).then(res => {
if (res.code === 1000) {
if(tag == 'all'&&flag){
allFiles.value = res.data.fileList
}else{
otherAttachmentList.value = res.data.fileList
}
if(flag){
getTagsOption(flag)
}
nextTick(() => {
showAttachmentTable.value = true
})
}
// searchImplementationFileList(params).then(res => {
// if (res.code === 1000) {
// if(tag == 'all'&&flag){
// // allFiles.value = res.data.fileList
// }else{
// otherAttachmentList.value =res.data.fileList
// }
if (flag) {
getTagsOption(flag)
}
nextTick(() => {
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 loading = ElLoading.service({fullscreen: true})
@@ -373,11 +413,9 @@ const getAttachmentList = () => {
showAttachmentTable.value = false
searchImplementationFileList(params).then(res => {
if (res.code === 1000) {
// otherAttachmentList.value = res.data.fileList
otherAttachmentList.value = res.data.fileList
allFiles.value = res.data.fileList
otherAttachmentList.value = [...res.data.fileList, ...getLocalList()]
allFiles.value = [...res.data.fileList, ...getLocalList()]
uploadState.value = res.data.upload
getTagsOption()
nextTick(() => {
showAttachmentTable.value = true
@@ -399,22 +437,22 @@ const getTagsOption = (flag) => {
if (res.code === 1000) {
tagsOption.value = res.data.rows
let list=[]
if(flag){
let list = []
if (flag) {
list= allFiles.value
}else{
list=otherAttachmentList.value
list = allFiles.value
} else {
list = otherAttachmentList.value
}
tagsOption.value.forEach((tag, index) => {
// const filterArray = list.filter(item => tag.fileTag == item.tag)
// console.log("🚀 ~ file:filterArray ", filterArray)
tagsOption.value[index].isClose =1
tagsOption.value[index].isClose = 1
// tagsOption.value[index].isClose = filterArray.length > 0 ? 0 : 1
})
console.log("🚀 otherAttachmentList.value", allFiles.value)
console.log("🚀 ~ file:\tagsOption.value ", tagsOption.value)
let defaultArray=[
let defaultArray = [
{
tagId: 'd1',
fileTag: '合同(专项任务书)',
@@ -440,7 +478,7 @@ const getTagsOption = (flag) => {
isClose: 2
}
]
tagsOption.value=[...defaultArray,...tagsOption.value]
tagsOption.value = [...defaultArray, ...tagsOption.value]
// if (!res.data.rows || res.data.rows.length == 0) return;
// activeName.value=res.data.rows[0].tagId
} else {