You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
331 lines
8.5 KiB
331 lines
8.5 KiB
<script setup> |
|
|
|
|
|
import {getListByName,getHomeVo} from "@/api/report/index"; |
|
import {timeFormat} from "@/utils/util"; |
|
//项目列表 |
|
const projectList = ref([]) |
|
//项目id |
|
let reportId = ref(null) |
|
const router = useRouter(); |
|
|
|
const cardList = ref([ |
|
{ |
|
icon: 'Document', |
|
iconTitle: null, |
|
node:'review', |
|
title: '报审填报', |
|
one: false, |
|
oneText:null, |
|
time: null |
|
}, |
|
{ |
|
icon: null, |
|
iconTitle: '1', |
|
node:'first', |
|
title: '一审作业', |
|
one: false, |
|
oneText:null, |
|
time: null |
|
}, |
|
{ |
|
icon: null, |
|
iconTitle: '2', |
|
title: '二审作业', |
|
node:'second', |
|
one: false, |
|
oneText:null, |
|
time: null |
|
}, |
|
{ |
|
icon: null, |
|
iconTitle: '3', |
|
title: '三审作业', |
|
node:'third', |
|
one: false, |
|
oneText:null, |
|
time: null |
|
}, |
|
{ |
|
icon: 'Avatar', |
|
iconTitle: null, |
|
title: '领导审批', |
|
node:'Lead', |
|
one: false, |
|
oneText:null, |
|
time: null |
|
}, |
|
{ |
|
icon: 'Tickets', |
|
iconTitle: null, |
|
title: '定案表', |
|
node:'original', |
|
one: false, |
|
oneText:null, |
|
time: null |
|
}, |
|
{ |
|
icon: "List", |
|
iconTitle: null, |
|
title: '审计报告', |
|
one: false, |
|
node:'audit', |
|
oneText:null, |
|
time: null |
|
}, |
|
]) |
|
const query =ref({ |
|
name:null |
|
}) |
|
const reportHomeVo =ref({}) |
|
const loading = ref(false) |
|
const getHomeVoFun = async(val)=>{ |
|
loading.value=true; |
|
const res = await getHomeVo(val) |
|
reportHomeVo.value=res; |
|
cardList.value.forEach((s)=>{ |
|
s.one=false; |
|
s.oneText=null; |
|
s.time=null; |
|
}) |
|
if(res.node !== "initial"){ |
|
cardList.value[0].node = 'review' |
|
cardList.value.forEach(s=>{ |
|
let data= res.flows.filter(x=>s.node === x.reportLink) |
|
if(data.length > 0){ |
|
data =data[0] |
|
s.one=true; |
|
s.oneText=data.approverState?(data.approverState==="start"?'开始':'结束'):"已编辑"; |
|
s.time=data.approverState==="start"? timeFormat(data.areportTime):timeFormat(data.applicantTime); |
|
} |
|
}) |
|
}else{ |
|
cardList.value[0].node = 'initial' |
|
cardList.value[0].one=true; |
|
cardList.value[0].oneText="已编辑"; |
|
cardList.value[0].time=timeFormat(res.applicantTime); |
|
} |
|
loading.value=false |
|
} |
|
|
|
const pushControl = (id=null,node = null) => { |
|
if(id && node){ |
|
if(reportHomeVo.value.reportType === "结算项目"){ |
|
router.push({ |
|
path:`/report/edit/controlPrice`, |
|
query: { |
|
isEnd:true, |
|
id:id, |
|
node:node, |
|
backPath:"/report/reportProject" |
|
} |
|
}); |
|
}else{ |
|
router.push({ |
|
path:`/report/edit/controlPrice`, |
|
query: { |
|
isEnd:false, |
|
id:id, |
|
node:node, |
|
backPath:"/report/reportProject" |
|
} |
|
}); |
|
} |
|
}else{ |
|
router.push({ |
|
path:`/report/edit/controlPrice`, |
|
query: { |
|
isEnd:false, |
|
backPath:"report/reportProject" |
|
} |
|
}); |
|
} |
|
} |
|
|
|
const pushEndControl = (id=null,node = null) => { |
|
router.push({ |
|
path:`/report/edit/controlPrice`, |
|
query: { |
|
isEnd:true, |
|
backPath:"report/reportProject" |
|
} |
|
}); |
|
} |
|
|
|
|
|
const getListByNameFun = async()=>{ |
|
projectList.value=await getListByName(query.value) |
|
} |
|
const inputGetList = async (val)=>{ |
|
projectList.value=await getListByName({"name":val}) |
|
} |
|
|
|
|
|
watch(()=>reportId.value,(val)=>{ |
|
if(val){ |
|
getHomeVoFun(val) |
|
} |
|
},{deep:true,immediate:true}) |
|
|
|
getListByNameFun(); |
|
</script> |
|
|
|
<template> |
|
<el-header> |
|
<div> |
|
<el-row :gutter="20" class="mt-20" style="margin-left: 20px"> |
|
<el-button type="primary" @click="pushControl">控制价项目报审</el-button> |
|
<el-button type="primary" @click="pushEndControl">结算项目报审</el-button> |
|
</el-row> |
|
<el-row :gutter="20"> |
|
<el-col :span="20"> |
|
<el-form label-width="80" class="mt-10"> |
|
<el-form-item label="项目名称"> |
|
<el-select remote :remote-method="inputGetList" filterable placeholder="请输入项目名称" v-model="reportId" clearable> |
|
<template #header> |
|
<el-row :gutter="20"> |
|
<el-col :span="8"> |
|
<span class="truncate-text" title="项目名称">项目名称</span> |
|
</el-col> |
|
<el-col :span="4">项目类别</el-col> |
|
<el-col :span="6"> |
|
<span class="truncate-text" title="审计单位名称">审计单位</span> |
|
</el-col> |
|
<el-col :span="6">项目单位</el-col> |
|
</el-row> |
|
</template> |
|
|
|
<el-option v-for="item in projectList" :value="item.id" :label="item.reportName"> |
|
<el-row :gutter="20"> |
|
<el-col :span="8" class="truncate-cell" :title="item.reportName">{{item.reportName}}</el-col> |
|
<el-col :span="4">{{item.reportType}}</el-col> |
|
<el-col :span="6" class="truncate-cell" :title="item.auditUnit">{{item.auditUnit}}</el-col> |
|
<el-col :span="6" class="truncate-cell" :title="item.projectUnit">{{item.projectUnit}}</el-col> |
|
</el-row> |
|
</el-option> |
|
</el-select> |
|
</el-form-item> |
|
</el-form> |
|
</el-col> |
|
<el-col :span="4"> |
|
<el-button type="primary" @click="getListByNameFun"> |
|
<template #icon> |
|
<icon name="el-icon-Search" |
|
/> |
|
</template> |
|
查询 |
|
</el-button> |
|
<el-button>重置</el-button> |
|
</el-col> |
|
</el-row> |
|
</div> |
|
</el-header> |
|
<el-main> |
|
<div style="padding-top: 20px" v-loading="loading"> |
|
<hr style="border-color: rgba(232,232,232,0.67);opacity: 0.2"> |
|
<div class="flex v-center" style="height:30px;margin-bottom: 10px"> |
|
<h3>项目整体要求</h3> |
|
</div> |
|
<el-row style="font-size: 12px"> |
|
<el-col :span="6" class="text-center"> |
|
<span class="mr-20" style="color: gray">项目名称</span>{{reportHomeVo.reportName}} |
|
</el-col> |
|
<el-col :span="6"> |
|
<span class="mr-20" style="color: gray">项目类型</span>{{ reportHomeVo.projectType }} |
|
</el-col> |
|
<el-col :span="6"> |
|
<span class="mr-20" style="color: gray">送审金额</span>{{reportHomeVo.reportMoney}}元 |
|
</el-col> |
|
<el-col :span="6"> |
|
<span class="mr-20" style="color: gray">日期</span>{{timeFormat(reportHomeVo.applicantTime)}} |
|
</el-col> |
|
</el-row> |
|
<hr style="border-color: rgba(232,232,232,0.67);opacity: 0.2"> |
|
</div> |
|
<div style="width: 96%;margin:0 auto" v-loading="loading"> |
|
<el-card class="content-card" v-for="(item,index) in cardList" :key="index" @click="pushControl(reportId,item.node)"> |
|
<el-row :gutter="20"> |
|
<el-col :span="4"> |
|
<div class="flex"> |
|
<div class="card_icon"> |
|
<el-icon :color="'#5C5C97'" style="font-size: 30px;text-align: center"> |
|
<component v-if="item.icon" :is="item.icon"/> |
|
<span v-else>{{ item.iconTitle }}</span> |
|
</el-icon> |
|
</div> |
|
<div style="padding-left: 10px;font-size: 13px;line-height: 40px">{{ item.title }}</div> |
|
</div> |
|
</el-col> |
|
<el-col :span="10"> |
|
<div :class="item.one?'card_div_succeed':'card_div'">{{ item.oneText }}</div> |
|
</el-col> |
|
<el-col :span="10"> |
|
<div :class="'card_div'">{{ item.time }}</div> |
|
</el-col> |
|
</el-row> |
|
</el-card> |
|
</div> |
|
<p>控制价项目、结算项目报审，在选择项目以后，可以查看报审进展情况</p> |
|
</el-main> |
|
</template> |
|
|
|
<style scoped lang="scss"> |
|
.content-card { |
|
height: 90px; |
|
margin-top: 20px; |
|
margin-bottom: 20px; |
|
} |
|
|
|
.clearfix::after { |
|
content: ""; |
|
display: table; |
|
clear: both; |
|
} |
|
|
|
.card_div_succeed { |
|
width: 100%; |
|
height: 50px; |
|
border-radius: 10px; |
|
background-color: red; |
|
line-height: 50px; |
|
text-align: center; |
|
font-size: 16px; |
|
color: white; |
|
} |
|
|
|
.card_div { |
|
width: 100%; |
|
height: 50px; |
|
border-radius: 10px; |
|
background-color: #E8E8E8; |
|
line-height: 50px; |
|
text-align: center; |
|
font-size: 16px; |
|
} |
|
|
|
.card_icon { |
|
background-color: #EAEDF7; |
|
border-radius: 50%; |
|
height: 50px; |
|
width: 50px; |
|
display: flex; |
|
justify-content: center; |
|
place-items: center; |
|
color: 19257D; |
|
|
|
} |
|
|
|
.truncate-text { |
|
display: inline-block; |
|
max-width: 100%; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
white-space: nowrap; |
|
} |
|
|
|
.truncate-cell { |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
white-space: nowrap; |
|
} |
|
</style>
|
|
|