feat(ProjectAttachment): 优化项目附件组件功能和布局

- 移除了不必要的搜索和上传按钮
- 添加了文件上传功能和单个文件删除功能
- 优化了标签页切换逻辑
-调整了样式和布局

src/components/DetailComponent/ProjectAttachment.vue

@@ -1,10 +1,9 @@
 <template>
-  <el-row style="padding-bottom: 20px">
+  <el-row >
     <el-col :span="24">
       <baseTitle :title="'项目附件'"></baseTitle>
     </el-col>
-<!--    <div class="file-tag">-->
-      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="margin-left: 15px;margin-top: -10px">
+      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabClick" style="margin-left: 15px;margin-top: -10px">
         <el-tab-pane v-for="item in tagsOption"
                      :key="item.value"
                      :label="item.label"
@@ -14,7 +13,7 @@
               {{item.label}}
             </div>
         </el-tab-pane>
-        <el-tab-pane  name="plus">
+        <el-tab-pane name="plus" v-if="uploadState">
           <template #label>
             <div style="margin-top: 4px;">
               <el-icon color="#BEA266">
@@ -24,33 +23,13 @@
           </template>
         </el-tab-pane>
       </el-tabs>
+  </el-row>
+  <div style="margin-top:10px;margin-bottom: 8px;margin-left: 15px;display: flex">
+<!--      <el-button   color="#DED0B2" @click="handleUpload">上传附件</el-button>-->
+    <file-upload v-if="!isLineBtn&&uploadState" @getFile="getFile"   />
 
-<!--    </div>-->
-    <!--    <el-form :model="attachmentParam" inline style="margin-left: 15px">-->
-    <!--      <el-form-item label="标签" prop="tag">-->
-    <!--        <el-select v-model="attachmentParam.tag" placeholder="请选择标签" clearable filterable style="width: 300px">-->
-    <!--          <el-option-->
-    <!--              v-for="item in tagsOption"-->
-    <!--              :key="item.value"-->
-    <!--              :label="item.label"-->
-    <!--              :value="item.value"-->
-    <!--          />-->
-    <!--        </el-select>-->
-    <!--      </el-form-item>-->
-    <!--      <el-form-item>-->
-    <!--        <el-button @click="handleSearch" color="#DED0B2">搜索</el-button>-->
-    <!--        <el-button v-if="uploadState&&isLineBtn" color="#DED0B2" @click="handleUpload">上传附件</el-button>-->
-    <!--      </el-form-item>-->
-    <!--    </el-form>-->
-  </el-row>
-  <el-row style="margin-top:-15px;margin-bottom: 8px;margin-left: 15px">
-    <el-col v-if="!isLineBtn" :span="2" style="margin-right: -10px">
-      <el-button v-if="uploadState" color="#DED0B2" @click="handleUpload">上传附件</el-button>
-    </el-col>
-    <el-col :span="2" >
-      <el-button  color="#DED0B2" @click="handleEditTag">编辑</el-button>
-    </el-col>
-  </el-row>
+<!--          <el-button  color="#DED0B2" @click="handleEditTag" style="margin-left: 10px;">编辑</el-button>-->
+  </div>
     <fvTable style="width: 100%;min-height:311px;max-height: 311px" v-if="showAttachmentTable" height="311"
              :tableConfig="executeTableConfig" class="execute-apply-table"
              :data="otherAttachmentList" :isSettingCol="false" :pagination="false">
@@ -61,20 +40,34 @@
   <file-preview ref="filePreviewRef" :fullscreen="false" v-if="filePreviewShow" :fileName="filePreviewParam.fileName"
                 :fileUrl="filePreviewParam.fileUrl"
                 :fileType="filePreviewParam.fileType"/>
+<el-dialog v-model="tagNameShow"  center width="450" top="450px">
+  标签：<el-input v-model="fileParam.tagName" placeholder="请输入标签名称" style="width: 335px;" clearable/>
+  <div class="oper" style="display: flex;justify-content: flex-end;margin-top: 10px">
+    <el-button color="#DED0B2" @click="changeTag()">确定</el-button>
+    <el-button @click="tagNameShow=false">取消</el-button>
+  </div>
+</el-dialog>
 </template>
 
 <script setup lang="jsx">
 import {getTags} from "@/api/project-manage";
-import {ElLoading, ElNotification} from "element-plus";
-import {searchImplementationFileList} from "@/api/project-manage/attachment";
+import {ElLoading, ElMessageBox, ElNotification} from "element-plus";
+import {searchImplementationFileList, uploadFileList} from "@/api/project-manage/attachment";
+import {deleteFile} from "@/api/project-demand";
 
 const router = useRouter()
 const route = useRoute()
 const attachmentParam = reactive({
   tag: ''
 })
+const fileParam = ref({
+  tagName:''
+})
 const uploadState = ref(false)
+const tagNameShow = ref(false)
 const tagsOption = ref([])
+const fileList = ref([])
+const allFiles = ref([])
 const showAttachmentTable = ref(true)
 const activeName = ref('测试2')
 
@@ -125,6 +118,11 @@ const executeTableConfig = reactive({
         return (
             <div>
               <el-button type="primary" link onClick={() => handleDownload(row)}>下载</el-button>
+              {
+                row.newFile?
+                    <popover-delete name={row.originalFileName} type={'文件'} btnType={'danger'}
+                                    onDelete={() => deleteSingleFile(row)}/>  : ''
+              }
             </div>
         )
       }
@@ -139,6 +137,71 @@ const filePreviewParam = ref({
   fileType: 'pdf'
 })
 const filePreviewShow = ref(false)
+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);
+      }
+    });
+}
+
+const changeTag=()=>{
+  tagsOption.value.push({
+    value: fileParam.value.tagName,
+    label: fileParam.value.tagName
+  })
+  tagNameShow.value=false;
+  fileParam.value.tagName=''
+}
+const handleTabClick=(item)=>{
+  console.log('item.props.name',item.props.name)
+  tagNameShow.value = item.props.name == 'plus';
+  if(item.props.name!='plus'){
+    console.log()
+    otherAttachmentList.value=allFiles.value.filter(item1=>item1.tag==item.props.name)
+    showAttachmentTable.value = false
+      nextTick(() => {
+        showAttachmentTable.value = true
+      })
+  }
+}
+const compositeParam = (item) => {
+  return {
+    fileId: item.id,
+    size: item.size,
+    originalFileName: item.originalFilename,
+    fileType: item.fileType,
+    url: item.url,
+    newFile: true,
+    tag: activeName.value,
+  }
+}
+const getFile = (val) => {
+  // console.log('上传文件', val)
+  let fileObj = compositeParam(val)
+  fileList.value.push(fileObj)
+  otherAttachmentList.value.push(fileObj)
+  handleSubmit(fileList.value)
+}
+
+const handleSubmit = async (list) => {
+    let params = {
+      fileList: list,
+      projectId: route.query.projectId,
+      targetState: "30"
+    }
+    let res = await uploadFileList(params)
+    // ElNotification({
+    //   title: '提示',
+    //   message: res.msg,
+    //   type: res.code === 1000 ? 'success' : 'error'
+    // })
+}
 const clickToPreview = (row) => {
   filePreviewShow.value = false
   filePreviewParam.value = {
@@ -167,7 +230,9 @@ const handleSearch = () => {
   searchImplementationFileList(params).then(res => {
     showAttachmentTable.value = false
     if (res.code === 1000) {
-      otherAttachmentList.value = res.data.fileList
+      // otherAttachmentList.value = res.data.fileList
+      otherAttachmentList.value= res.data.fileList.filter(item1=>item1.tag==activeName.value)
+      allFiles.value = res.data.fileList
       uploadState.value = res.data.upload
       nextTick(() => {
         showAttachmentTable.value = true
@@ -209,11 +274,11 @@ const handleUpload = () => {
     }
   })
 }
-handleSearch()
 getTagsOption()
+handleSearch()
 onActivated(() => {
-  handleSearch()
   getTagsOption()
+  handleSearch()
 })
 </script>
 <style lang="scss">
@@ -249,14 +314,16 @@ onActivated(() => {
 }
 </style>
 <style scoped lang="scss">
+:deep(.el-dialog__body){
+  padding: 0!important;
+}
 .tag-title{
   display: flex;
   align-items: center;
-  margin: 10px 0;
   margin-top: 15px;
 >div{
   margin-right: 5px;
-width: 4px;
+  width: 4px;
   height: 20px;
   background-color: #BEA266;
 }
@@ -265,7 +332,7 @@ width: 4px;
   height: 311px !important;
 }
 :deep(.el-tabs__nav){
-  width: 1308px;
+  //width: 75vw;
 }
 :deep(.el-tabs__item){
   flex: none!important;