feat(project-manage): 新增项目附件标签功能

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',

src/components/DetailComponent/ProjectAttachment.vue

@@ -3,17 +3,21 @@
     <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-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabClick" @tab-remove="tabRemove"
-        <el-tab-pane v-for="item in tagsOption"
+             style="margin-left: 15px;margin-top: -10px">
-                     :key="item.value"
+      <el-tab-pane name="all" :closable="false" label="全部">
-                     :label="item.label"
+      </el-tab-pane>
-                     :name="item.value">
+      <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.label}}
+          {{ item.fileTag }}
         </div>
       </el-tab-pane>
-        <el-tab-pane name="plus" v-if="uploadState">
+
+      <el-tab-pane name="plus" v-if="uploadState" :closable="false">
         <template #label>
           <div style="margin-top: 4px;">
             <el-icon color="#BEA266">
@@ -28,7 +32,8 @@
     <!--      <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"
@@ -41,7 +46,10 @@
                 :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 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>
@@ -50,7 +58,7 @@
 </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";
@@ -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: {
@@ -137,6 +145,11 @@ 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({
@@ -150,26 +163,81 @@ const deleteSingleFile = (row) => {
   });
 }
 
-const changeTag=()=>{
+const changeTag = async () => {
-  tagsOption.value.push({
+  let res = null
-    value: fileParam.value.tagName,
+  if (isEdit.value) {
-    label: fileParam.value.tagName
+    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) => {
-  console.log('item.props.name',item.props.name)
   tagNameShow.value = item.props.name == 'plus';
+  if (item.props.name == 'plus') {
+    isEdit.value = false
+  }
   if (item.props.name != 'plus') {
-    console.log()
+    if (item.props.name == 'all') {
-    otherAttachmentList.value=allFiles.value.filter(item1=>item1.tag==item.props.name)
+      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 {
     fileId: item.id,
@@ -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
+      res.data.rows[0].isClose = 1
-      activeName.value=res.data[0].value
+      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>
@@ -317,10 +397,12 @@ onActivated(() => {
 :deep(.el-dialog__body) {
   padding: 0 !important;
 }
+
 .tag-title {
   display: flex;
   align-items: center;
   margin-top: 15px;
+
   > div {
     margin-right: 5px;
     width: 4px;
@@ -328,15 +410,19 @@ onActivated(() => {
     background-color: #BEA266;
   }
 }
+
 :deep(.el-table--fit ) {
   height: 311px !important;
 }
+
 :deep(.el-tabs__nav) {
   //width: 75vw;
 }
+
 :deep(.el-tabs__item) {
   flex: none !important;
 }
+
 :deep(.el-tabs__header) {
   margin-bottom: 0;
 }