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

- 新增本地存储功能，暂存未提交的文件
- 优化文件删除逻辑，区分本地和服务器文件
- 添加提交按钮，将本地文件上传到服务器
- 调整标签切换时的文件列表显示逻辑
- 优化代码结构，提高可读性和可维护性

src/components/DetailComponent/ProjectAttachment.vue

@@ -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 => {
+  console.log("🚀 ~ file: ", row)
-    ElNotification({
+    deleteFile(row.fileId).then(res => {
-      title: '提示',
+      ElNotification({
-      message: res.msg,
+        title: '提示',
-      type: res.code === 1000 ? 'success' : 'error'
+        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);
+      if (res.code === 1000) {
-      getAttachmentList()
+        if (row.newFile) {
-      activeName.value = 'all'
+          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)
+  const defaultArray = tagsOption.value.filter(item1 => item1.tagId == item.props.name)
-  if(defaultArray&&defaultArray.length>0){
+  if (defaultArray && defaultArray.length > 0) {
-    isDefault.value=defaultArray[0].isDefault==1
+    isDefault.value = defaultArray[0].isDefault == 1
-  }else{
+  } else {
-    isDefault.value=false
+    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) => {
+const handleSubmit = async () => {
-  let params = {
+  if (getLocalList().length == 0) {
-    fileList: list,
-    projectId: route.query.projectId,
-    targetState: "30"
-  }
-  let res = await uploadFileList(params)
-  if (res.code !== 1000) {
     ElNotification({
       title: '提示',
-      message: res.msg,
+      message: '暂无文件可提交',
-      type: 'error'
+      type: 'warning'
-    })
-    fileList.value=[]
-  }else{
-    list.forEach(item => {
-      otherAttachmentList.value.push(item)
     })
+    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 = {
+    otherAttachmentList.value = allFiles.value
-      targetId: route.query.projectId,
+    // params = {
-      targetState: "30",
+    //   targetId: route.query.projectId,
-    }
+    //   targetState: "30",
+    // }
   } 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
 
-  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 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, ...getLocalList()]
-      otherAttachmentList.value = res.data.fileList
+      allFiles.value = [...res.data.fileList, ...getLocalList()]
-      allFiles.value = res.data.fileList
       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=[]
+      let list = []
-      if(flag){
+      if (flag) {
 
-        list= allFiles.value
+        list = allFiles.value
-      }else{
+      } else {
-        list=otherAttachmentList.value
+        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 {