<template>
|
<div class="process-container">
|
<div class="flow">
|
<div class="content" >
|
<div class="content-middle">
|
<div class="project-title">
|
<span>项目</span>
|
<span>阶段</span>
|
</div>
|
<div v-for="item in menuList" :key="item.id" style="flex: 1" :class="{choose: item.status === 1 || item.status === 2}">
|
<div class="header-item" @click="clickMenu(item)">
|
<div class="item-content">
|
<img v-if="item.status === 0" :src="status0Png">
|
<img v-else-if="item.status === 1" :src="status1Png">
|
<img v-else :src="status2Png">
|
<span class="text-eclipse" style="margin-left: 5px">{{item.name}}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="middle" :style="'height:' + middleHeight + 'px'">
|
<el-card>
|
<div class="card-header">{{selectedObj.id}}- {{selectedObj.name}}</div>
|
<div class="card-content">
|
<div :style="'height:' + middleContentHeight + 'px'" style="overflow-y: scroll;">
|
<basic-info ref="basicRef" v-if="selectedObj.id === 1" :projectId="projectId" @getNextStatus="getNextStatus"></basic-info>
|
<expert ref="expertRef" v-if="selectedObj.id === 2" :projectId="projectId" @getNextStatus="getNextStatus"></expert>
|
<approval ref="approvalRef" v-if="selectedObj.id === 3" :projectId="projectId" @getNextStatus="getNextStatus"></approval>
|
<archive ref="archiveRef" v-if="selectedObj.id === 4" :projectId="projectId" @getNextStatus="getNextStatus"></archive>
|
|
</div>
|
<div style="display: flex;align-items: center;justify-content: center;margin-bottom: -30px;margin-top: 10px">
|
<el-button type="primary" v-if="selectedObj.id !== 1" style="width: 80px" @click="back">上一步</el-button>
|
<el-button type="warning" style="width: 80px" v-if="(projectStatus === 'add' || projectStatus === 'edit') && selectedObj.status ===1 && selectedObj.id !==4 && selectedObj.id !==3 && newProgress !== 4" @click="save">保存</el-button>
|
<el-button type="warning" style="width: 110px" v-if="(projectStatus === 'add' || projectStatus === 'edit') && selectedObj.id !==4 && selectedObj.id ===3 && newProgress !== 4" @click="confirmApproval">确认生成审批单</el-button>
|
<el-button type="warning" style="width: 80px" v-if="(projectStatus === 'add' || projectStatus === 'edit') && selectedObj.status !==1 && selectedObj.id !==3 && newProgress !== 4 " @click="clickEdit">变更</el-button>
|
<el-button type="warning" style="width: 80px" v-if="selectedObj.id === 4 && selectedObj.status === 1 && newProgress !== 4" @click="confirm">确认完结</el-button>
|
<el-button type="primary" style="width: 80px" v-if="selectedObj.id !== 4" @click="next">下一步</el-button>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
</div>
|
</template>
|
|
|
<script setup>
|
import {onMounted, ref} from "vue";
|
import status0Png from '@/assets/images/status0.png'
|
import status1Png from '@/assets/images/status1.png'
|
import status2Png from '@/assets/images/status2.png'
|
import { useRoute } from 'vue-router'
|
import basicInfo from './components/basicInfo.vue'
|
import expert from './components/chooseExpert.vue'
|
import approval from './components/projectApproval.vue'
|
import archive from './components/projectArchive.vue'
|
import {ElMessage} from "element-plus";
|
import {get} from "@vueuse/core";
|
|
const selectedObj = ref({})
|
const nextObj = ref({})
|
const middleHeight = ref(0)
|
const middleContentHeight = ref(0)
|
const projectStatus = ref()
|
const projectId = ref()
|
const route = useRoute()
|
const basicRef = ref()
|
const expertRef = ref()
|
const approvalRef = ref()
|
const archiveRef = ref()
|
const newProgress = ref()
|
|
|
onMounted(() => {
|
middleHeight.value = window.innerHeight - 250;
|
middleContentHeight.value = window.innerHeight - 385;
|
// 监听浏览器高度变化
|
window.onresize = () => {
|
middleHeight.value = window.innerHeight - 250;
|
middleContentHeight.value = window.innerHeight - 385;
|
};
|
if(route.query.type !== 'add'){
|
//编辑or查看
|
projectStatus.value = route.query.type;
|
projectId.value = route.query.id;
|
console.log('projectId.valu',projectId.value)
|
// toPath.value = route.query.toPath;
|
newProgress.value = route.query.process;
|
getStatus(projectId.value)
|
}else {
|
//新增
|
projectStatus.value = route.query.type;
|
selectedObj.value = {
|
id: 1,
|
name: '基本信息',
|
status: 1
|
}
|
}
|
});
|
|
const menuList = ref([
|
{
|
id: 1,
|
name: '基本信息',
|
status: 1 ,
|
},
|
{
|
id: 2,
|
name: '专家选用',
|
status: 0 ,
|
},
|
{
|
id: 3,
|
name: '项目审批',
|
status: 0 ,
|
},
|
{
|
id: 4,
|
name: '项目归档',
|
status: 0 ,
|
},
|
])
|
|
const save = () => {
|
goRouter(selectedObj.value.id,'add')
|
}
|
const confirmApproval = () => {
|
goRouter(selectedObj.value.id,'confirmApproval')
|
}
|
|
|
const goRouter = (selectId,type) => {
|
switch (selectId){
|
case 1:
|
if(type === 'add' || type === 'clickEdit'){
|
basicRef.value.riskOpen(type,projectId.value);
|
}else if(projectStatus.value === 'view' || projectStatus.value === 'edit' || projectStatus.value === 'add'){
|
basicRef.value.riskOpen('detail',projectId.value);
|
}
|
break;
|
case 2:
|
if(type === 'add' || type === 'clickEdit'){
|
expertRef.value.riskOpen(type,projectId.value);
|
}else if(projectStatus.value === 'view' || projectStatus.value === 'edit' || projectStatus.value === 'add'){
|
expertRef.value.riskOpen('detail',projectId.value);
|
}
|
break;
|
case 3:
|
if(type === 'add' || type === 'clickEdit' || 'confirmApproval'){
|
approvalRef.value.riskOpen(type,projectId.value);
|
}else if(projectStatus.value === 'view' || projectStatus.value === 'edit' || projectStatus.value === 'add'){
|
if(projectStatus.value === 'view'){
|
approvalRef.value.riskOpen('view',projectId.value);
|
}else{
|
approvalRef.value.riskOpen('detail',projectId.value);
|
}
|
}
|
break;
|
case 4:
|
if(type === 'add' || type === 'clickEdit' || type === 'confirm'){
|
archiveRef.value.riskOpen(type,projectId.value);
|
} else if(projectStatus.value === 'view' || projectStatus.value === 'edit' || projectStatus.value === 'add'){
|
if(projectStatus.value === 'view'){
|
archiveRef.value.riskOpen('view',projectId.value);
|
}else{
|
archiveRef.value.riskOpen('detail',projectId.value);
|
}
|
}
|
break;
|
}
|
}
|
|
const getStatus = (id) => {
|
//projectId 项目id，根据id获取当前状态
|
projectId.value = Number(id)
|
//调接口
|
const res = projectId.value
|
//当前项目状态，编辑、查看的时候定位到最新状态
|
newProgress.value = res
|
menuList.value.forEach(item => {
|
if(projectStatus.value === 'edit'){
|
if(item.id <= res){
|
item.status = 2
|
}
|
if(item.id == res){
|
selectedObj.value =item
|
setTimeout(() => {
|
goRouter(selectedObj.value.id)
|
}, 10)
|
}
|
if(item.id == res +1){
|
item.status = 1
|
}
|
}else if(projectStatus.value === 'view'){
|
if(item.id <= res){
|
item.status = 2
|
}
|
if(item.id == res){
|
selectedObj.value =item
|
setTimeout(() => {
|
goRouter(selectedObj.value.id)
|
}, 10)
|
}
|
}
|
if(res == 4 && item.id == 4){
|
item.status = 2
|
selectedObj.value =item
|
setTimeout(() => {
|
goRouter(selectedObj.value.id)
|
}, 10)
|
}
|
})
|
console.log('menuList.value',menuList.value)
|
}
|
const getNextStatus = (id) => {
|
//projectId 项目id，根据id获取当前状态
|
projectId.value = Number(id)
|
//调接口
|
const res = projectId.value
|
newProgress.value = res
|
//定位到下一步状态
|
menuList.value.forEach(item => {
|
if(item.id <= res){
|
item.status = 2
|
}else if(item.id == res + 1){
|
item.status = 1
|
selectedObj.value =item
|
}
|
|
if(res == 4 && item.id == 4){
|
item.status = 2
|
selectedObj.value =item
|
}
|
})
|
}
|
|
const confirm = () => {
|
goRouter(selectedObj.value.id,'confirm')
|
}
|
const back = () => {
|
backMenu()
|
}
|
const backMenu = () => {
|
let nextItem = {}
|
menuList.value.forEach(item => {
|
if(item.id === selectedObj.value.id - 1){
|
nextItem = item
|
}
|
})
|
chooseSubMenu(nextItem);
|
}
|
|
const next = () => {
|
let nextObj = {}
|
if(projectStatus.value == 'view'){
|
menuList.value.forEach(item => {
|
if(item.id == selectedObj.value.id +1){
|
nextObj = item
|
}
|
})
|
}
|
if(selectedObj.value.status != 2 || (projectStatus.value == 'view' && nextObj.status == 0) ){
|
ElMessage({
|
type: 'warning',
|
message: '请按顺序操作，未完成步骤无法查看！'
|
});
|
} else {
|
nextMenu()
|
}
|
}
|
const nextMenu = () => {
|
let nextItem = {}
|
menuList.value.forEach(item => {
|
if(item.id === selectedObj.value.id + 1){
|
nextItem = item
|
}
|
})
|
chooseSubMenu(nextItem);
|
}
|
const chooseSubMenu = (val) => {
|
selectedObj.value = val;
|
if(val.status == 2){
|
setTimeout(() => {
|
goRouter(selectedObj.value.id)
|
}, 10)
|
}
|
}
|
const clickEdit = () => {
|
goRouter(selectedObj.value.id,'clickEdit')
|
}
|
const clickMenu = (item) => {
|
if(item.status == 0){
|
setTimeout(() => {
|
ElMessage({
|
type: 'warning',
|
message: '请按顺序操作，未完成步骤无法查看！'
|
});
|
}, 10)
|
} else {
|
chooseSubMenu(item)
|
|
}
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
.process-container{
|
height: 100%;
|
.flow{
|
position: relative;
|
height: 85px;
|
background: transparent;
|
.content{
|
z-index: 10;
|
top: 0;
|
left: 0;
|
right: 0;
|
min-height: 85px;
|
max-height: 85px;
|
cursor: pointer;
|
background-color: hsla(0,0%,100%,.97);
|
//background-image: url(../../../assets/images/bg2.png);
|
background-repeat: no-repeat;
|
background-size: 100% 84px;
|
overflow: hidden;
|
transition: max-height .3s linear;
|
position: absolute;
|
.content-bottom{
|
position: relative;
|
height: 18px;
|
text-align: center;
|
background-color: transparent;
|
pointer-events: none;
|
}
|
.content-bottom:after {
|
content: " ";
|
cursor: pointer;
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
left: 50%;
|
pointer-events: auto;
|
transform: translateX(-50%);
|
width: 118px;
|
background-image: url(../../../assets/images/back1.png);
|
}
|
.choose .header-item{
|
color: #fff;
|
background-image: url(../../../assets/images/choosed.png);
|
}
|
}
|
.show{
|
cursor: default;
|
max-height: 600px;
|
}
|
.content-middle{
|
padding-left: 37px;
|
padding-right: 27px;
|
display: flex;
|
flex-direction: row;
|
box-shadow: 0 0 18px 3px rgba(145,146,171,.2);
|
.project-title{
|
margin-right: 20px;
|
height: 85px;
|
display: flex;
|
align-items: center;
|
flex-shrink: 1;
|
flex-direction: column;
|
justify-content: center;
|
font-size: 20px;
|
font-weight: 700;
|
color: rgb(255, 140, 138);
|
}
|
}
|
.header-item{
|
position: relative;
|
height: 83px;
|
color: #5d6c8e;
|
flex: 1;
|
margin-left: -2%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
background-image: url(../../../assets/images/header.png);
|
cursor: pointer;
|
.item-content{
|
width: 80%;
|
padding: 0 20px;
|
display: flex;
|
align-items: center;
|
margin-left: 8%;
|
margin-bottom: 2px;
|
font-size: 20px;
|
font-weight: 400;
|
}
|
}
|
.down-item{
|
height: 47px;
|
margin: 30px auto 10px auto;
|
font-size: 19px;
|
color: #626c8b;
|
border: 1px solid #fff;
|
background: rgba(233 223 211 / 20%);
|
border-radius: 8px;
|
display: flex;
|
align-items: center;
|
width: 80%;
|
padding-left: 20px;
|
padding-right: 15px;
|
cursor: pointer;
|
.item-icon-status0{
|
width: 21px;
|
height: 21px;
|
color: #fff;
|
font-size: 16px;
|
line-height: 20px;
|
text-align: center;
|
border-radius: 50%;
|
background: #f3ccb0;
|
margin-right: 10px;
|
min-width: 21px;
|
min-height: 21px;
|
}
|
.item-icon-status1{
|
color: #f17235;
|
background: #fff;
|
}
|
.item-icon-status2{
|
background: transparent;
|
}
|
.item-icon-status4{
|
background: #0cca8f;
|
}
|
}
|
.itemActive{
|
cursor: pointer;
|
color: #fff;
|
border: 1px solid #c6e6ff;
|
background: linear-gradient(90deg,rgb(239, 186, 141),rgb(255, 140, 138));
|
}
|
.itemPrev{
|
cursor: pointer;
|
color: #f38323;
|
border: 1px solid #f5e4cf;
|
background: rgb(249 210 170 / 40%);
|
}
|
.itemPrev:hover{
|
transform: scale(1.1);
|
-webkit-transform: scale(1.1);
|
-moz-transform: scale(1.1);
|
-o-transform: scale(1.1);
|
-ms-transform: scale(1.1);
|
}
|
}
|
.middle{
|
padding: 10px;
|
.card-header{
|
height: 50px;
|
line-height: 26px;
|
font-weight: 700;
|
padding: 12px 56px;
|
font-size: 18px;
|
color: #fff;
|
background-image: url(../../../assets/images/cardHeader2.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
margin: -20px;
|
}
|
.card-content{
|
padding: 20px 60px;
|
margin-top: 20px;
|
}
|
::-webkit-scrollbar {
|
display: none;
|
}
|
}
|
}
|
</style>
|
