<template>
|
<div class="wraper">
|
<p class="time-title">贷款申请进度</p>
|
<!-- 另一种展现方式，暂时保留代码 -->
|
<!-- <div class="item-list" v-for="(item, index) in list" :key="index">
|
<p>{{item.dealdate}}</p>
|
<el-timeline>
|
<el-timeline-item
|
v-for="(subItem, subIndex) in item.queryFlowNodeRspList"
|
:key="subIndex"
|
:timestamp="subItem.dealtime"
|
:type="index === parentCurrIndex && subIndex === childrenCurrIndex ? 'primary' : ''"
|
:reverse="true"
|
:hide-timestamp="true"
|
>
|
<div class="time-content">
|
<p class="time-item">{{subItem.dealtime}}</p>
|
<p>{{subItem.phasename}}</p>
|
<p>{{subItem.username}}</p>
|
</div>
|
</el-timeline-item>
|
</el-timeline>
|
</div>-->
|
|
<el-timeline v-loading="loading">
|
<el-timeline-item
|
v-for="(item, subIndex) in concatList"
|
:key="subIndex"
|
:timestamp="item.dealtime"
|
:color="item.color"
|
:reverse="true"
|
:hide-timestamp="true"
|
:class="{parent: item.isParent}"
|
>
|
<div class="time-content">
|
<p class="time-item">{{item.dealtime}}</p>
|
<p>{{item.phasename}}</p>
|
<p>{{item.username}}</p>
|
</div>
|
</el-timeline-item>
|
</el-timeline>
|
</div>
|
</template>
|
<script>
|
// 顶部进度流程弹窗数据
|
import { queryFlowNodeList } from '@comprehensive/serve/public'
|
import { colors } from '@comprehensive/utils/comm'
|
|
export default {
|
props: {
|
// 申请编号
|
serialNo: {
|
type: String,
|
required: true
|
},
|
objectType: {
|
type: String,
|
default: ''
|
}
|
},
|
data() {
|
return {
|
list: [],
|
loading: false,
|
parentCurrIndex: -1,
|
childrenCurrIndex: -1
|
}
|
},
|
created() {
|
this.init()
|
},
|
methods: {
|
init() {
|
this.queryFlowNodeList()
|
},
|
|
// 查询右边流程节点列表
|
async queryFlowNodeList() {
|
this.loading = true
|
const { serialNo, objectType } = this
|
const res = await queryFlowNodeList({
|
objectno: serialNo,
|
objecttype: objectType
|
})
|
this.loading = false
|
const { result } = res
|
this.list = result
|
this.setIndex()
|
},
|
|
// 设置节点信息
|
setIndex() {
|
let { list } = this
|
list.forEach(({ queryFlowNodeRspList }, index) => {
|
let currIndex = queryFlowNodeRspList.findIndex(
|
({ currentnode }, subIndex) => currentnode === 'Y'
|
)
|
if (currIndex > -1) {
|
this.childrenCurrIndex = currIndex
|
this.parentCurrIndex = index
|
}
|
})
|
}
|
},
|
computed: {
|
// 一位数组时间线处理
|
concatList() {
|
const { list } = this
|
const { done, current, info } = colors
|
let isDone = true
|
return list.reduce((pre, curr) => {
|
const { dealdate, queryFlowNodeRspList } = curr
|
pre.push({
|
dealtime: dealdate,
|
color: info,
|
isParent: true
|
})
|
queryFlowNodeRspList.forEach(item => {
|
let { currentnode } = item
|
let tempColor = isDone ? info : info
|
|
if (currentnode === 'Y') {
|
tempColor = current
|
isDone = false
|
}
|
pre.push({
|
...item,
|
color: tempColor,
|
isParent: false
|
})
|
})
|
return pre
|
}, [])
|
}
|
},
|
watch: {
|
serialNo() {
|
this.init()
|
}
|
}
|
}
|
</script>
|
|
<style lang="postcss" scoped>
|
.time-content {
|
& p {
|
margin: 0;
|
padding: 0;
|
line-height: 1.6em;
|
}
|
& .time-item {
|
color: rgba(170, 170, 170, 1);
|
}
|
}
|
.wraper {
|
padding-left: 2px;
|
}
|
.time-title {
|
font-size: 14px;
|
font-weight: 500;
|
color: rgba(34, 34, 34, 1);
|
line-height: 20px;
|
text-align: center;
|
margin-bottom: 16px;
|
}
|
.parent >>> .el-timeline-item__node {
|
opacity: 0;
|
}
|
</style>
|
