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

fix : 优化需求征集详情页面

Browse Source
This commit is contained in:
odjbin
2024-06-04 16:41:28 +08:00
parent 6597506435
commit 1d66c44edb
16 changed files with 162 additions and 429 deletions
Download Patch File Download Diff File Expand all files Collapse all files

333
src/views/project-demand/requirement/detail.vue
View File

@@ -1,229 +1,45 @@
<template>
<div class="detail-block" v-loading="loading">
<el-form :model="formData" ref="demandForm" label-width="auto" :rules="rules">
<baseTitle title="需求征集详情"></baseTitle>
<el-row>
<el-col :span="12">
<el-form-item label="名称">
<span>{{ formData.requirementName }}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属公司">
<span>{{ formData.companyIds }}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="征集类型">
<span>{{ formData.collectType }}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="截止时间">
<span>{{ formData.deadline }}</span>
</el-form-item>
</el-col>
<el-col :span="24" v-if="formData.isSpecialFund">
<el-form-item label="专项资金">
<span>{{ formData.specialFund }}</span>
</el-form-item>
</el-col>
<baseTitle title="征集说明"></baseTitle>
<el-col :span="24">
<el-form-item>
<el-card style="width: 100%">
<div v-html="formData.collectExplain">
</div>
</el-card>
</el-form-item>
</el-col>
<baseTitle v-if="fileListShow === 'READ' || fileListShow === 'EDIT'" title="附件列表"></baseTitle>
<el-col :span="24" v-if="fileListShow === 'READ' || fileListShow === 'EDIT'">
<el-form-item>
<file-upload v-if="fileListShow === 'EDIT'" @getFile="getFile"/>
<fvTable style="width: 100%;max-height: 600px;height: 600px" v-if="showTable" :tableConfig="tableConfig"
:data="formData.fileList" :isSettingCol="false"
:pagination="false">
<template #empty>
<el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
</template>
</fvTable>
</el-form-item>
</el-col>
<el-col :span="24">
<div class="approval-record">
<baseTitle title="审批记录"></baseTitle>
<div class="process">
<operation-render v-if="processDiagramViewer" :operation-list="processInstanceData.operationList"
:state="processInstanceData.state"/>
<process-diagram-viewer v-if="processDiagramViewer"/>
</div>
</div>
</el-col>
<el-col :span="24">
<div v-if="processInstanceData.taskId">
<baseTitle title="审核意见"></baseTitle>
<el-form-item prop="auditOpinion">
<el-input
v-model="formData.auditOpinion"
:rows="3"
type="textarea"
placeholder="请输入审核意见"
/>
</el-form-item>
</div>
</el-col>
</el-row>
</el-form>
<div class="oper-page-btn" v-if="processInstanceData.state === '1' && processInstanceData.taskId">
<el-button type="danger" @click="handleReject(demandForm)">驳回</el-button>
<el-button color="#DED0B2" @click="handleSubmit">同意</el-button>
</div>
</div>
<baseTitle title="需求征集详情"></baseTitle>
<collection-detail :formData="collectData.formData" :data="collectData" type="singleDetail"
:fileListShow="fileListShow"
:processViewer="processViewer" :loading="loading"/>
<opinion v-if="collectData.taskId" :formData="formData" :taskId="collectData.taskId"></opinion>
</template>
<script setup lang="jsx">
import OperationRender from '@/views/workflow/common/OperationRender.vue'
import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue'
import {useProcessStore} from '@/stores/processStore.js';
import {getInfo, agreeTask, rejectTask,
deleteFile,downloadFile} from "@/api/project-demand/index.js";
import {getSubCompOpt} from '@/api/user/user.js'
import {ElMessage, ElMessageBox, ElNotification} from "element-plus";
import {useProcessStore} from '@/stores/processStore.js'
import {getInfo} from "@/api/project-demand/index.js";
import {ElNotification} from "element-plus";
import {useTagsView} from '@/stores/tagsview.js'
import {matterTree} from '@/utils/matterTree.js';
import {getFundOption} from "@/api/special-fund";
import {getSubCompOpt} from "@/api/user/user";
import {matterTree} from "@/utils/matterTree";
const tagsViewStore = useTagsView()
const router = useRouter()
const route = useRoute()
const form = ref();
const loading = ref(false)
const demandForm = ref()
const processStore = useProcessStore()
const companyOption = ref([])
const specialFundOption = ref([])
const processInstanceData = ref({})
const fileListShow = ref("READ")
const showTable = ref(false)
const processDiagramViewer = ref(false)
const processViewer = ref(false)
const processTree = ref()
const companyNameArray = ref([])
const collectData = ref([])
const formData = ref({})
const rules = reactive({
auditOpinion: [{required: true, message: '请输入审核意见', trigger: 'blur'}],
})
const tableConfig = reactive({
columns: [
{
prop: 'index',
type: 'index',
label: '序号',
align: 'center',
width: '80',
},
{
prop: 'originalFileName',
label: '文件名',
align: 'center',
},
{
prop: 'tag',
label: '标签',
align: 'center'
},
{
prop: 'size',
label: '文件大小',
align: 'center',
currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
},
{
prop: 'oper',
label: '操作',
align: 'center',
showOverflowTooltip: false,
currentRender: ({row, index}) => {
let btn = []
btn.push({label: '下载', func: () => handleDownload(row), type: 'primary'})
if (row.newFile){
btn.push({label: '删除', func: () => handleDelete(row), type: 'primary'})
}
return (
<div style={{width: '100%'}}>
{
btn.map(item => (
<el-button
type={item.type}
onClick={() => item.func()}
link
>
{item.label}
</el-button>
))
}
</div>
)
}
}
]
})
const handleSubmit = () => {
let approve = {
taskId: processInstanceData.value.taskId,
auditOpinion: formData.value.auditOpinion,
formData: formData.value
}
agreeTask(approve).then(res => {
ElNotification({
title: '提示',
message: res.msg,
type: res.code === 1000 ? 'success' : 'error'
})
if (res.code === 1000) {
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
router.push({
name: 'Requirement'
})
}
})
}
const handleReject = (instance) => {
if (!instance) return
instance.validate(async (valid) => {
if (!valid) return
let approve = {
taskId: processInstanceData.value.taskId,
auditOpinion: formData.value.auditOpinion,
}
rejectTask(approve).then(res => {
ElNotification({
title: '提示',
message: res.msg,
type: res.code === 1000 ? 'success' : 'error'
})
if (res.code === 1000) {
tagsViewStore.delVisitedViews(router.currentRoute.value.path)
router.push({
name: 'Requirement'
})
}
})
})
}
const getCompanyOption = async () => {
const res = await getSubCompOpt()
companyOption.value = res.data
}
const companyOption = ref([])
const companyNameArray = ref([])
const getFundOptions = async () => {
const res = await getFundOption()
specialFundOption.value = res.data
}
const getCompanyOption = async () => {
const res = await getSubCompOpt()
companyOption.value = res.data
}
const getCompanyOptionItem = (val) => {
if (val !== undefined) {
val.forEach(item => {
@@ -232,20 +48,10 @@ const getCompanyOptionItem = (val) => {
}
return companyNameArray.value.join('，');
}
const handleDownload = (row) => {
downloadFile(row.fileId).then(res => {
const blob = new Blob([res])
let a = document.createElement('a')
a.href = URL.createObjectURL(blob)
a.download = row.originalFileName
a.click()
})
}
const init = async () => {
if (!route.query.id) return;
await getCompanyOption()
await getFundOptions()
await getCompanyOption()
getInfo(route.query.id).then(res => {
if (res.code !== 1000) {
ElNotification({
@@ -256,8 +62,9 @@ const init = async () => {
}
loading.value = false
let data = res.data
formData.value = data.formData;
data.formData.companyIds = getCompanyOptionItem(data.formData.companyIds)
collectData.value = data
formData.value = data.formData;
if (data.formData.specialFund) {
specialFundOption.value.forEach(item => {
if (data.formData.specialFund == item.value) {
@@ -273,7 +80,7 @@ const init = async () => {
processStore.refuseList.value = data.refuseList;
processStore.passList.value = data.passList;
nextTick(() => {
processDiagramViewer.value = true
processViewer.value = true
showTable.value = true
if (data.formPermMap["fileList"]) {
fileListShow.value = data.formPermMap["fileList"].perm
@@ -285,55 +92,6 @@ onMounted(async () => {
loading.value = true
await init()
})
const getFile = (val) => {
showTable.value = false
let fileObj = compositeParam(val)
formData.value.fileList.push(fileObj)
nextTick(() => {
showTable.value = true
})
}
const compositeParam = (item) => {
let tag = ''
if (!formData.value.collectType && routerName.value === 'Requirement/add') {
tag = '需求征集'
}else if(!formData.value.collectType &&routerName.value === 'Requirement/edit'){
tag = '需求征集'
}if (formData.value.collectType) {
tag = formData.value.collectType
}
return {
fileId: item.id,
size: item.size,
originalFileName: item.originalFilename,
fileType: item.fileType,
url: item.url,
processNodeTag: null,
newFile: true,
tag: tag,
}
}
const handleDelete = (row) => {
ElMessageBox.confirm(`确认删除名称为${row.originalFileName}的表格吗?`, '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteFile(row.fileId).then(res => {
if (res.code === 1000) {
ElMessage.success("删除成功");
formData.value.fileList.splice(formData.value.fileList.findIndex((item) => item.id === row.fileId), 1);
}
});
}).catch(() => {
ElMessage.warning("用户取消删除! ");
})
}
</script>
<style lang="scss" scoped>
@@ -344,34 +102,35 @@ const handleDelete = (row) => {
:deep(.el-table--fit ) {
height: 300px !important;
}
.detail-block {
overflow: hidden;
padding-right: 10px;
.info {
display: flex;
flex-wrap: wrap;
//.info {
// display: flex;
// flex-wrap: wrap;
//
// > div {
// width: 350px;
// margin-bottom: 15px;
// margin-right: 10px;
//
// > span:first-child {
// color: black;
// font-size: 16px;
// font-weight: bold;
// }
// }
//}
> div {
width: 350px;
margin-bottom: 15px;
margin-right: 10px;
> span:first-child {
color: black;
font-size: 16px;
font-weight: bold;
}
}
}
.approval-record {
padding-bottom: 30px;
.process {
position: relative;
}
}
//.approval-record {
// padding-bottom: 30px;
//
// .process {
// position: relative;
// }
//}
}
</style>

6
src/views/project-demand/requirement/index.vue
View File

@@ -18,11 +18,11 @@ const authStore = useAuthStore()
const router = useRouter()
const searchConfig = reactive([
{
label: '需求名称',
label: '征集名称',
prop: 'requirementName',
component: 'el-input',
props: {
placeholder: '请输入需求名称查询',
placeholder: '请输入征集名称查询',
clearable: true,
filterable: true,
checkStrictly: true
@@ -60,7 +60,7 @@ const tableConfig = reactive({
},
{
prop: 'requirementName',
label: '需求名称',
label: '征集名称',
align: 'center'
},
{

3
src/views/project-demand/summary/add.vue
View File

@@ -417,7 +417,7 @@ const handleSubmit = debounce(async (instance) => {
// }
let params = {
...formData.value,
isSpecialFund: formData.value.isSpecialFund ? formData.value.isSpecialFund : false,
isSpecialFund: formData.value.isSpecialFund? formData.value.isSpecialFund : false,
deploymentId: deploymentId.value,
fileList: otherFiles,
singleFile: singleFile,
@@ -472,6 +472,7 @@ const handleResubmit = debounce(() => {
//todo requirementId
let params = {
...formData.value,
isSpecialFund: formData.value.isSpecialFund? formData.value.isSpecialFund : false,
deploymentId: deploymentId.value,
fileList: otherFiles,
singleFile: singleFile,

12
src/views/project-demand/summary/detail.vue
View File

@@ -2,7 +2,7 @@
<steps :active="route.query.id==='-1'?0:1" @setDetail="setDetail" @stepChange="stepChange" :reportType="route.query.id==='-1'?'direct':''">
<template #content>
<collection-detail v-show="showActive == '00'" :formData="summaryData.formData" :data="summaryData"
:processViewer="summaryProcessViewer" :loading="loading"/>
:processViewer="summaryProcessViewer" :loading="loading" :fileListShow="fileListShow"/>
<summary-detail v-show="showActive == '10'" :formData="summaryData.formData" :data="summaryData"
:processViewer="summaryProcessViewer" :loading="loading" :fileListShow="fileListShow"/>
<ApprovalDetail v-show="showActive == '20'" :formData="summaryData.formData" :data="summaryData"
@@ -32,11 +32,11 @@ const processStore = useProcessStore()
const active = ref(route.query.state)
const showActive = ref()
const getInfo = async (state) => {
fileListShow.value='READ'
const projectId = route.query.projectId
summaryProcessViewer.value = false
loading.value = true
const {code, data,msg} = await getMapProjectStateInfo(projectId, state)
if(data===undefined)return;
if(code===1000){
summaryData.value = data;
loading.value = false
@@ -58,6 +58,10 @@ const getInfo = async (state) => {
message: msg,
type: 'error'
})
if(msg==='查询结果为空'){
summaryData.value=[]
}
loading.value = false
}
}
@@ -71,7 +75,3 @@ const stepChange = (data) => {
getInfo(data.active)
}
</script>
<style scoped>
</style>