<template>
|
<div class="sovle-problem">
|
<div class="sovle-header">
|
<div class="sovle-limit">
|
处理时间:{{ dispatchInfo.createTime }}
|
</div>
|
<div class="sovle-limit">
|
剩余时间:{{ getRestTime(dispatchInfo.disposeDate) || '未限制' }}
|
</div>
|
</div>
|
<div class="my-process">
|
<div class="my-pro-header">
|
<el-steps :space="260" :active="active" align-center>
|
<el-step v-for="item in list" :key="item.name">
|
<template slot="title">
|
<div>
|
【{{ item.name }}】
|
{{
|
item.disposeRecords &&
|
item.disposeRecords.length != 0
|
? item.disposeRecords[0].handlerText
|
: ''
|
}}
|
</div>
|
</template>
|
<template slot="description">
|
<div>
|
{{
|
item.disposeRecords &&
|
item.disposeRecords.length != 0
|
? item.disposeRecords[0].result
|
: ''
|
}}
|
</div>
|
</template>
|
</el-step>
|
</el-steps>
|
|
<!-- <el-timeline >
|
<el-timeline-item :color="mycolor" v-for="item in list" :key="item.id">
|
<div class="title">
|
<div class="title-left">【{{item.name}}】处理人: {{item.disposeRecords && item.disposeRecords.length
|
!= 0 ? item.disposeRecords[0].handlerText:''}}
|
</div>
|
<div class="title-right">{{item.disposeRecords.length !==0 ?
|
filterTime(item.disposeRecords[0].endTime):''}}
|
</div>
|
</div>
|
<div class="message">{{filterPerson(item.name)}} {{item.disposeRecords && item.disposeRecords.length !=0 ? item.disposeRecords[0].result:''}}</div>
|
</el-timeline-item>
|
</el-timeline> -->
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import helper from '@/utils/mydate'
|
import { computeTime } from '@/utils/helper'
|
export default {
|
data() {
|
return {
|
active: 0,
|
mycolor: '#02a7f0',
|
list: [],
|
dispatchInfo: {},
|
}
|
},
|
props: ['handlePassVo', 'baseCase'],
|
created() {
|
const { handlePassVo: mylist, baseCase } = this;
|
console.log(baseCase, mylist);
|
if (mylist) {
|
this.list = mylist.workflowConfigSteps;
|
}
|
if (baseCase.dispatchInfo) {
|
this.dispatchInfo = baseCase.dispatchInfo;
|
}
|
debugger
|
if (baseCase.state === 6) {
|
this.active = 1;
|
} else if (baseCase.state === 7) {
|
this.active = 2;
|
} else if (baseCase.state === 8) {
|
this.active = 3;
|
} else if (baseCase.state === 9) {
|
this.active = 4;
|
} else {
|
this.active = 0;
|
}
|
},
|
methods: {
|
// 获得意见
|
filterPerson(name) {
|
const { dispatchInfo } = this;
|
if (name === '调度') {
|
return '【派遣意见】'
|
} else if (name === '处理') {
|
return '【处理结果】'
|
} else if (name === '核查') {
|
return '【核查结果】'
|
} else if (name === '结案') {
|
return '【评定结果】'
|
}
|
return
|
},
|
// 处理时间
|
filterTime(time) {
|
if (time) {
|
return helper(time)
|
} else {
|
return
|
}
|
|
},
|
// 获得剩余时间
|
getRestTime(limitTime) {
|
if (limitTime) {
|
return computeTime(limitTime)
|
}
|
return
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.sovle-problem {
|
padding-top: 20px;
|
.sovle-header {
|
padding: 0 40px;
|
display: flex;
|
line-height: 60px;
|
justify-content: space-between;
|
}
|
|
.title {
|
display: flex;
|
justify-content: space-between;
|
line-height: 40px;
|
padding: 0 20px;
|
color: #4b9bb7;
|
font-size: 16px;
|
}
|
|
.message {
|
padding: 20px;
|
color: #666;
|
line-height: 20px;
|
font-size: 12px;
|
}
|
}
|
.my-process {
|
padding-top: 20px;
|
.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;
|
}
|
}
|
::v-deep .el-step__title {
|
font-size: 18px;
|
padding: 10px 0;
|
}
|
::v-deep .el-step__title.is-process {
|
color: #5388f1;
|
}
|
|
::v-deep .el-step__description {
|
font-size: 14px;
|
}
|
}
|
|
.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>
|
