odjbin/mosr-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
dj
2025-03-29 20:24:53 +08:00
parent a1ed160445
commit ca9e281119
2 changed files with 215 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/api/project-manage/index.js
View File

@@ -85,6 +85,35 @@ export const getTags = (projectId) => {
method: "get" 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 = () => { export const getPhaseProcess = () => {
return request({ return request({
url: '/workflow/phase/change/process', url: '/workflow/phase/change/process',

286
src/components/DetailComponent/ProjectAttachment.vue
View File

@@ -1,56 +1,64 @@
<template> <template>
<el-row > <el-row>
<el-col :span="24"> <el-col :span="24">
<baseTitle :title="'项目附件'"></baseTitle> <baseTitle :title="'项目附件'"></baseTitle>
</el-col> </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"
<div class="tag-title"> :key="item.tagId"
<div></div> :label="item.fileTag"
{{item.label}} :name="item.tagId">
</div> <div class="tag-title">
</el-tab-pane> <div></div>
<el-tab-pane name="plus" v-if="uploadState"> {{ item.fileTag }}
<template #label> </div>
<div style="margin-top: 4px;"> </el-tab-pane>
<el-icon color="#BEA266">
<Plus/> <el-tab-pane name="plus" v-if="uploadState" :closable="false">
</el-icon> <template #label>
</div> <div style="margin-top: 4px;">
</template> <el-icon color="#BEA266">
</el-tab-pane> <Plus/>
</el-tabs> </el-icon>
</div>
</template>
</el-tab-pane>
</el-tabs>
</el-row> </el-row>
<div style="margin-top:10px;margin-bottom: 8px;margin-left: 15px;display: flex"> <div style="margin-top:10px;margin-bottom: 8px;margin-left: 15px;display: flex">
<!-- <el-button color="#DED0B2" @click="handleUpload">上传附件</el-button>--> <!-- <el-button color="#DED0B2" @click="handleUpload">上传附件</el-button>-->
<file-upload v-if="!isLineBtn&&uploadState" @getFile="getFile" /> <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> </div>
<fvTable style="width: 100%;min-height:311px;max-height: 311px" v-if="showAttachmentTable" height="311" <fvTable style="width: 100%;min-height:311px;max-height: 311px" v-if="showAttachmentTable" height="311"
:tableConfig="executeTableConfig" class="execute-apply-table" :tableConfig="executeTableConfig" class="execute-apply-table"
:data="otherAttachmentList" :isSettingCol="false" :pagination="false"> :data="otherAttachmentList" :isSettingCol="false" :pagination="false">
<template #empty> <template #empty>
<el-empty :image-size="90" description="暂无数据" style="padding: 0"/> <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
</template> </template>
</fvTable> </fvTable>
<file-preview ref="filePreviewRef" :fullscreen="false" v-if="filePreviewShow" :fileName="filePreviewParam.fileName" <file-preview ref="filePreviewRef" :fullscreen="false" v-if="filePreviewShow" :fileName="filePreviewParam.fileName"
:fileUrl="filePreviewParam.fileUrl" :fileUrl="filePreviewParam.fileUrl"
:fileType="filePreviewParam.fileType"/> :fileType="filePreviewParam.fileType"/>
<el-dialog v-model="tagNameShow" center width="450" top="450px"> <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">标签：
<div class="oper" style="display: flex;justify-content: flex-end;margin-top: 10px"> <el-input v-model="fileParam.tagName" placeholder="请输入标签名称" style="width: 335px;" clearable/>
<el-button color="#DED0B2" @click="changeTag()">确定</el-button> </div>
<el-button @click="tagNameShow=false">取消</el-button>
</div> <div class="oper" style="display: flex;justify-content: flex-end;margin-top: 10px">
</el-dialog> <el-button color="#DED0B2" @click="changeTag()">确定</el-button>
<el-button @click="tagNameShow=false">取消</el-button>
</div>
</el-dialog>
</template> </template>
<script setup lang="jsx"> <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 {ElLoading, ElMessageBox, ElNotification} from "element-plus";
import {searchImplementationFileList, uploadFileList} from "@/api/project-manage/attachment"; import {searchImplementationFileList, uploadFileList} from "@/api/project-manage/attachment";
import {deleteFile} from "@/api/project-demand"; import {deleteFile} from "@/api/project-demand";
@@ -61,7 +69,7 @@ const attachmentParam = reactive({
tag: '' tag: ''
}) })
const fileParam = ref({ const fileParam = ref({
tagName:'' tagName: ''
}) })
const uploadState = ref(false) const uploadState = ref(false)
const tagNameShow = ref(false) const tagNameShow = ref(false)
@@ -69,7 +77,7 @@ const tagsOption = ref([])
const fileList = ref([]) const fileList = ref([])
const allFiles = ref([]) const allFiles = ref([])
const showAttachmentTable = ref(true) const showAttachmentTable = ref(true)
const activeName = ref('测试2') const activeName = ref('all')
const props = defineProps({ const props = defineProps({
fileNameTableWidth: { fileNameTableWidth: {
@@ -119,9 +127,9 @@ const executeTableConfig = reactive({
<div> <div>
<el-button type="primary" link onClick={() => handleDownload(row)}>下载</el-button> <el-button type="primary" link onClick={() => handleDownload(row)}>下载</el-button>
{ {
row.newFile? row.newFile ?
<popover-delete name={row.originalFileName} type={'文件'} btnType={'danger'} <popover-delete name={row.originalFileName} type={'文件'} btnType={'danger'}
onDelete={() => deleteSingleFile(row)}/> : '' onDelete={() => deleteSingleFile(row)}/> : ''
} }
</div> </div>
) )
@@ -137,38 +145,98 @@ const filePreviewParam = ref({
fileType: 'pdf' fileType: 'pdf'
}) })
const filePreviewShow = ref(false) const filePreviewShow = ref(false)
const isEdit = ref(false)
const isCloseByList = (index) => {
// otherAttachmentList.length>0?false:true
return otherAttachmentList.value.length == 0;
}
const deleteSingleFile = (row) => { const deleteSingleFile = (row) => {
deleteFile(row.fileId).then(res => { deleteFile(row.fileId).then(res => {
ElNotification({ ElNotification({
title: '提示', title: '提示',
message: res.msg, message: res.msg,
type: res.code === 1000 ? 'success' : 'error' type: res.code === 1000 ? 'success' : 'error'
}) })
if (res.code === 1000) { if (res.code === 1000) {
otherAttachmentList.value.splice(otherAttachmentList.value.findIndex((item) => item.fileId === row.fileId), 1); otherAttachmentList.value.splice(otherAttachmentList.value.findIndex((item) => item.fileId === row.fileId), 1);
} }
}); });
} }
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,
tagNameShow.value=false; fileTag: fileParam.value.tagName,
fileParam.value.tagName='' projectId: route.query.projectId,
} })
const handleTabClick=(item)=>{ } else {
console.log('item.props.name',item.props.name) res = await addTag({
tagNameShow.value = item.props.name == 'plus'; projectId: route.query.projectId,
if(item.props.name!='plus'){ fileTag: fileParam.value.tagName
console.log() })
otherAttachmentList.value=allFiles.value.filter(item1=>item1.tag==item.props.name)
showAttachmentTable.value = false
nextTick(() => {
showAttachmentTable.value = true
})
} }
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) => { const compositeParam = (item) => {
return { return {
@@ -190,17 +258,17 @@ const getFile = (val) => {
} }
const handleSubmit = async (list) => { const handleSubmit = async (list) => {
let params = { let params = {
fileList: list, fileList: list,
projectId: route.query.projectId, projectId: route.query.projectId,
targetState: "30" targetState: "30"
} }
let res = await uploadFileList(params) let res = await uploadFileList(params)
// ElNotification({ // ElNotification({
// title: '提示', // title: '提示',
// message: res.msg, // message: res.msg,
// type: res.code === 1000 ? 'success' : 'error' // type: res.code === 1000 ? 'success' : 'error'
// }) // })
} }
const clickToPreview = (row) => { const clickToPreview = (row) => {
filePreviewShow.value = false filePreviewShow.value = false
@@ -231,9 +299,11 @@ const handleSearch = () => {
showAttachmentTable.value = false showAttachmentTable.value = false
if (res.code === 1000) { 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) otherAttachmentList.value = res.data.fileList
allFiles.value = res.data.fileList allFiles.value = res.data.fileList
uploadState.value = res.data.upload uploadState.value = res.data.upload
getTagsOption()
nextTick(() => { nextTick(() => {
showAttachmentTable.value = true showAttachmentTable.value = true
}) })
@@ -250,10 +320,22 @@ const handleSearch = () => {
} }
const getTagsOption = () => { const getTagsOption = () => {
if (!route.query.projectId) return if (!route.query.projectId) return
getTags(route.query.projectId).then(res => { getTagList(route.query.projectId).then(res => {
if (res.code === 1000) { 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 { } else {
ElNotification({ ElNotification({
title: '提示', title: '提示',
@@ -274,10 +356,8 @@ const handleUpload = () => {
} }
}) })
} }
getTagsOption()
handleSearch() handleSearch()
onActivated(() => { onActivated(() => {
getTagsOption()
handleSearch() handleSearch()
}) })
</script> </script>
@@ -314,29 +394,35 @@ onActivated(() => {
} }
</style> </style>
<style scoped lang="scss"> <style scoped lang="scss">
:deep(.el-dialog__body){ :deep(.el-dialog__body) {
padding: 0!important; padding: 0 !important;
} }
.tag-title{
.tag-title {
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 15px; margin-top: 15px;
>div{
margin-right: 5px; > div {
width: 4px; margin-right: 5px;
height: 20px; width: 4px;
background-color: #BEA266; height: 20px;
} background-color: #BEA266;
}
} }
:deep(.el-table--fit ) { :deep(.el-table--fit ) {
height: 311px !important; height: 311px !important;
} }
:deep(.el-tabs__nav){
:deep(.el-tabs__nav) {
//width: 75vw; //width: 75vw;
} }
:deep(.el-tabs__item){
flex: none!important; :deep(.el-tabs__item) {
flex: none !important;
} }
:deep(.el-tabs__header) { :deep(.el-tabs__header) {
margin-bottom: 0; margin-bottom: 0;
} }