From ca9e281119a804260fea675260805a07bd71facd Mon Sep 17 00:00:00 2001
From: dj <1042039504@qq.com>
Date: Sat, 29 Mar 2025 20:24:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(project-manage):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E9=99=84=E4=BB=B6=E6=A0=87=E7=AD=BE=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/project-manage/index.js               |  29 ++
 .../DetailComponent/ProjectAttachment.vue     | 286 ++++++++++++------
 2 files changed, 215 insertions(+), 100 deletions(-)

diff --git a/src/api/project-manage/index.js b/src/api/project-manage/index.js
index 8faa1b3..6e6eeae 100644
--- a/src/api/project-manage/index.js
+++ b/src/api/project-manage/index.js
@@ -85,6 +85,35 @@ export const getTags = (projectId) => {
         method: "get"
     });
 };
+export const getTagList = (projectId) => {
+    return request({
+        url: `/workflow/mosr/file/tag/list`,
+        method: "get",
+        params:{
+            projectId: projectId
+        }
+    });
+};
+export const addTag = (data) => {
+    return request({
+        url: '/workflow/mosr/file/tag/add',
+        method: "post",
+        data:data
+    });
+};
+export const updateTag = (data) => {
+    return request({
+        url: '/workflow/mosr/file/tag/update',
+        method: "post",
+        data:data
+    });
+};
+export const delTag = (tageId) => {
+    return request({
+        url: `/workflow/mosr/file/tag/${tageId}`,
+        method: "delete"
+    });
+};
 export const getPhaseProcess = () => {
     return request({
         url: '/workflow/phase/change/process',
diff --git a/src/components/DetailComponent/ProjectAttachment.vue b/src/components/DetailComponent/ProjectAttachment.vue
index 43beee8..10e37b0 100644
--- a/src/components/DetailComponent/ProjectAttachment.vue
+++ b/src/components/DetailComponent/ProjectAttachment.vue
@@ -1,56 +1,64 @@
 <template>
-  <el-row >
+  <el-row>
     <el-col :span="24">
       <baseTitle :title="'项目附件'"></baseTitle>
     </el-col>
-      <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"
-                     :name="item.value">
-            <div class="tag-title">
-              <div></div>
-              {{item.label}}
-            </div>
-        </el-tab-pane>
-        <el-tab-pane name="plus" v-if="uploadState">
-          <template #label>
-            <div style="margin-top: 4px;">
-              <el-icon color="#BEA266">
-                <Plus/>
-              </el-icon>
-            </div>
-          </template>
-        </el-tab-pane>
-      </el-tabs>
+    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabClick" @tab-remove="tabRemove"
+             style="margin-left: 15px;margin-top: -10px">
+      <el-tab-pane name="all" :closable="false" label="全部">
+      </el-tab-pane>
+      <el-tab-pane v-for="item in tagsOption" :closable="item.isClose==1"
+                   :key="item.tagId"
+                   :label="item.fileTag"
+                   :name="item.tagId">
+        <div class="tag-title">
+          <div></div>
+          {{ item.fileTag }}
+        </div>
+      </el-tab-pane>
+
+      <el-tab-pane name="plus" v-if="uploadState" :closable="false">
+        <template #label>
+          <div style="margin-top: 4px;">
+            <el-icon color="#BEA266">
+              <Plus/>
+            </el-icon>
+          </div>
+        </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"   />
+    <!--      <el-button   color="#DED0B2" @click="handleUpload">上传附件</el-button>-->
+    <file-upload v-if="!isLineBtn&&uploadState" @getFile="getFile"/>
 
-<!--          <el-button  color="#DED0B2" @click="handleEditTag" style="margin-left: 10px;">编辑</el-button>-->
+    <el-button color="#DED0B2" @click="handleEditTag" v-if="activeName!='all'" 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">
-      <template #empty>
-        <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
-      </template>
-    </fvTable>
+  <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">
+    <template #empty>
+      <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
+    </template>
+  </fvTable>
   <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>
+  <el-dialog v-model="tagNameShow" center width="450" top="450px">
+    <div style="display: flex;align-items: center">标签：
+      <el-input v-model="fileParam.tagName" placeholder="请输入标签名称" style="width: 335px;" clearable/>
+    </div>
+
+    <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 {addTag, delTag, getTagList, getTags, updateTag} from "@/api/project-manage";
 import {ElLoading, ElMessageBox, ElNotification} from "element-plus";
 import {searchImplementationFileList, uploadFileList} from "@/api/project-manage/attachment";
 import {deleteFile} from "@/api/project-demand";
@@ -61,7 +69,7 @@ const attachmentParam = reactive({
   tag: ''
 })
 const fileParam = ref({
-  tagName:''
+  tagName: ''
 })
 const uploadState = ref(false)
 const tagNameShow = ref(false)
@@ -69,7 +77,7 @@ const tagsOption = ref([])
 const fileList = ref([])
 const allFiles = ref([])
 const showAttachmentTable = ref(true)
-const activeName = ref('测试2')
+const activeName = ref('all')
 
 const props = defineProps({
   fileNameTableWidth: {
@@ -119,9 +127,9 @@ const executeTableConfig = reactive({
             <div>
               <el-button type="primary" link onClick={() => handleDownload(row)}>下载</el-button>
               {
-                row.newFile?
+                row.newFile ?
                     <popover-delete name={row.originalFileName} type={'文件'} btnType={'danger'}
-                                    onDelete={() => deleteSingleFile(row)}/>  : ''
+                                    onDelete={() => deleteSingleFile(row)}/> : ''
               }
             </div>
         )
@@ -137,38 +145,98 @@ const filePreviewParam = ref({
   fileType: 'pdf'
 })
 const filePreviewShow = ref(false)
+const isEdit = ref(false)
+const isCloseByList = (index) => {
+  // otherAttachmentList.length>0?false:true
+  return otherAttachmentList.value.length == 0;
+}
 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);
-      }
-    });
+  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 changeTag = async () => {
+  let res = null
+  if (isEdit.value) {
+    res = await updateTag({
+      tagId: activeName.value,
+      fileTag: fileParam.value.tagName,
+      projectId: route.query.projectId,
+    })
+  } else {
+    res = await addTag({
+      projectId: route.query.projectId,
+      fileTag: fileParam.value.tagName
+    })
   }
+  ElNotification({
+    title: '提示',
+    message: res.msg,
+    type: res.code === 1000 ? 'success' : 'error'
+  })
+  getTagsOption()
+  // tagsOption.value.push({
+  //   value: fileParam.value.tagName,
+  //   label: fileParam.value.tagName
+  // })
+  tagNameShow.value = false;
+  fileParam.value.tagName = ''
+  activeName.value = 'all'
+}
+const tabRemove = async (val) => {
+  ElMessageBox.confirm(`确认删除名称为${getFileName(val)}的标签吗?`, '系统提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async () => {
+    let res = await delTag(val)
+    ElNotification({
+      title: '提示',
+      message: res.msg,
+      type: res.code === 1000 ? 'success' : 'error'
+    })
+    if (res.code === 1000) {
+      getTagsOption()
+    }
+  })
+}
+const handleEditTag = () => {
+  tagNameShow.value = true
+  fileParam.value.tagName = getFileName(activeName.value)
+  isEdit.value = true
+}
+const getFileName = (name) => {
+  const tagArray = tagsOption.value.filter((item1) => item1.tagId == name)
+  let tagName = ''
+  if (tagArray && tagArray.length > 0) {
+    tagName = tagArray[0].fileTag
+  }
+  return tagName
+}
+const handleTabClick = (item) => {
+  tagNameShow.value = item.props.name == 'plus';
+  if (item.props.name == 'plus') {
+    isEdit.value = false
+  }
+  if (item.props.name != 'plus') {
+    if (item.props.name == 'all') {
+      otherAttachmentList.value = allFiles.value
+    } else {
+      otherAttachmentList.value = allFiles.value.filter(item1 => item1.tag == getFileName(item.props.name))
+    }
+  }
+  showAttachmentTable.value = false
+  nextTick(() => {
+    showAttachmentTable.value = true
+  })
 }
 const compositeParam = (item) => {
   return {
@@ -190,17 +258,17 @@ const getFile = (val) => {
 }
 
 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'
-    // })
+  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
@@ -231,9 +299,11 @@ const handleSearch = () => {
     showAttachmentTable.value = false
     if (res.code === 1000) {
       // otherAttachmentList.value = res.data.fileList
-      otherAttachmentList.value= res.data.fileList.filter(item1=>item1.tag==activeName.value)
+      otherAttachmentList.value = res.data.fileList
       allFiles.value = res.data.fileList
       uploadState.value = res.data.upload
+
+      getTagsOption()
       nextTick(() => {
         showAttachmentTable.value = true
       })
@@ -250,10 +320,22 @@ const handleSearch = () => {
 }
 const getTagsOption = () => {
   if (!route.query.projectId) return
-  getTags(route.query.projectId).then(res => {
+  getTagList(route.query.projectId).then(res => {
     if (res.code === 1000) {
-      tagsOption.value = res.data
-      activeName.value=res.data[0].value
+      res.data.rows[0].isClose = 1
+      tagsOption.value = res.data.rows
+      otherAttachmentList.value.forEach(item => {
+        tagsOption.value.forEach(tag => {
+          // console.log(tag.fileTag,item.tag)
+          if (tag.fileTag == item.tag) {
+            tag.isClose = 0
+          } else {
+            tag.isClose = 1
+          }
+        })
+      })
+      if (!res.data.rows || res.data.rows.length == 0) return;
+      // activeName.value=res.data.rows[0].tagId
     } else {
       ElNotification({
         title: '提示',
@@ -274,10 +356,8 @@ const handleUpload = () => {
     }
   })
 }
-getTagsOption()
 handleSearch()
 onActivated(() => {
-  getTagsOption()
   handleSearch()
 })
 </script>
@@ -314,29 +394,35 @@ onActivated(() => {
 }
 </style>
 <style scoped lang="scss">
-:deep(.el-dialog__body){
-  padding: 0!important;
+:deep(.el-dialog__body) {
+  padding: 0 !important;
 }
-.tag-title{
+
+.tag-title {
   display: flex;
   align-items: center;
   margin-top: 15px;
->div{
-  margin-right: 5px;
-  width: 4px;
-  height: 20px;
-  background-color: #BEA266;
-}
+
+  > div {
+    margin-right: 5px;
+    width: 4px;
+    height: 20px;
+    background-color: #BEA266;
+  }
 }
+
 :deep(.el-table--fit ) {
   height: 311px !important;
 }
-:deep(.el-tabs__nav){
+
+:deep(.el-tabs__nav) {
   //width: 75vw;
 }
-:deep(.el-tabs__item){
-  flex: none!important;
+
+:deep(.el-tabs__item) {
+  flex: none !important;
 }
+
 :deep(.el-tabs__header) {
   margin-bottom: 0;
 }