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

2025-03-29 20:24:53 +08:00
parent a1ed160445
commit ca9e281119
2 changed files with 215 additions and 100 deletions
--- 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',
--- 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;
 }