<template>
|
<div class="my-process">
|
<div class="my-pro-header">
|
<el-steps :space="260" :active="active" finish-status="success">
|
<el-step
|
v-for="item in list"
|
:title="item.name"
|
:key="item.title"
|
></el-step>
|
</el-steps>
|
</div>
|
<div class="my-pro-main">
|
<div class="pro-step-ver" v-for="(item, index) in list" :key="item.title">
|
<div
|
:class="[
|
'pro-step-name',
|
active === index
|
? 'in-process'
|
: active > index
|
? 'finish-name'
|
: 'wait',
|
]"
|
>
|
{{ item.name }}
|
</div>
|
<div class="pro-step-top">
|
<div
|
:class="[
|
'circle',
|
active === index
|
? 'in-process__circle'
|
: active > index
|
? 'finish'
|
: 'wait',
|
]"
|
></div>
|
<div
|
:class="['line', active > index ? 'finish-line' : '']"
|
v-if="index < list.length - 1 ? true : false"
|
></div>
|
</div>
|
<div
|
:class="[
|
'desc',
|
active === index
|
? 'in-process'
|
: active > index
|
? 'finish-name'
|
: 'wait',
|
]"
|
>
|
<div class="desc-title">
|
环节用时:{{
|
item.disposeRecords.length !== 0
|
? item.disposeRecords[0].linkTime
|
: ""
|
}}
|
</div>
|
<div class="desc-content" v-if="active > index">
|
<div class="desc-content-message">
|
{{
|
(item.disposeRecords[0] && item.disposeRecords[0].result) || ""
|
}}
|
</div>
|
<div class="desc-content-endtime">
|
{{
|
item.disposeRecords.length !== 0
|
? filterTime(item.disposeRecords[0].endTime)
|
: ""
|
}}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import helper from "@/utils/mydate";
|
export default {
|
data() {
|
return {
|
active: 0,
|
list: [],
|
};
|
},
|
props: ["handlePassVo", "baseCase"],
|
created() {
|
const {
|
handlePassVo: { workflowConfigSteps: mylist },
|
baseCase: { state: mystate },
|
} = this;
|
if (mystate === 6) {
|
this.active = 1;
|
} else if (mystate === 7) {
|
this.active = 2;
|
} else if (mystate === 8) {
|
this.active = 3;
|
} else if (mystate === 9) {
|
this.active = 4;
|
} else {
|
this.active = 0;
|
}
|
this.list = mylist;
|
},
|
methods: {
|
filterTime(time) {
|
if (time) {
|
return helper(time);
|
}
|
return;
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.my-process {
|
padding-top: 50px;
|
.my-pro-header {
|
padding: 0 30px;
|
line-height: 1;
|
|
.pro-step {
|
flex: 1;
|
|
.pro-step-top {
|
display: flex;
|
align-items: center;
|
|
.line {
|
flex: 1;
|
height: 2px;
|
}
|
}
|
|
.pro-step-name {
|
line-height: 20px;
|
}
|
}
|
}
|
|
.my-pro-main {
|
margin-top: 30px;
|
margin-left: -50px;
|
.pro-step-ver {
|
display: flex;
|
align-items: flex-start;
|
.line {
|
width: 2px;
|
height: 100px;
|
}
|
}
|
.pro-step-top {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
.pro-step-name {
|
width: 120px;
|
line-height: 24px;
|
margin-right: 10px;
|
text-align: right;
|
}
|
.desc {
|
flex: 1;
|
line-height: 24px;
|
margin-left: 10px;
|
// color: #4b9bb7;
|
.desc-content-endtime {
|
display: flex;
|
justify-content: flex-end;
|
padding-right: 50px;
|
}
|
}
|
}
|
|
.circle {
|
width: 24px;
|
height: 24px;
|
border-radius: 50%;
|
background-color: #fff;
|
border: 2px solid #808080;
|
}
|
|
.line {
|
background-color: #c0c4cc;
|
}
|
.in-process {
|
color: #0079fe;
|
}
|
.in-process__circle {
|
border: 2px solid #0079fe;
|
}
|
.finish-line {
|
background-color: #0079fe;
|
}
|
.finish {
|
border: 2px solid #4b9bb7;
|
}
|
.finish-name {
|
color: #4b9bb7;
|
}
|
.desc-content-message {
|
color: #666;
|
}
|
}
|
</style>
|
