<div v-if="type=='detail'||type=='todo'">
<sale-process ref="saleProcess" :rowData="row" :param="{ type: 'XS_INVOICE', biz_type: 'xs_invoice' ,id:dataForm.id}"></sale-process>
</div>
this.$nextTick(()=>{
this.$refs.saleProcess.init({
id: this.dataForm.id,
// process_instance_id: this.detailRes.process_instance_id
})
})
<template>
<div style="text-align: left;" v-if="flowData.length > 0">
<el-steps :space="250" style="overflow-x: auto;">
<el-step v-for="(n, i) in flowData" :key="i" style="min-width: 150px;max-width: 250px;">
<span slot="icon"><i class="el-icon el-icon-success" :style="{ color: n.created_time ? '#67c23a' : '#999' }"></i></span>
<span slot="title">
<div style="color: #333;">
{{ n.created_time ? n.statusName : '待审批' }}
<span v-if="n.progress">{{ n.progress }}</span>
<span style="font-size: 12px;">{{ n.created_time }}</span>
</div>
</span>
<span slot="description">
<div style="overflow: hidden;overflow-y: auto;max-height:60px">
<div style="color: #333;">{{ n.str_name }}</div>
<div style="color: #999;word-break: break-all;" class="" :title="n.remark">{{ n.remark }}</div>
</div>
<!-- <div style="color: #999;" v-if="n.created_time">{{ n.created_time }}</div> -->
</span>
</el-step>
</el-steps>
</div>
</template>
<script>
export default {
props: {
param:{
type:Object,
default:function(){
return {
type: 'BIZ_SALE',
biz_type: 'b_sale_workflow',
}
}
},
rowData:{
type:Object,default:()=>{return {}}
},
url:{default:'/leaderQuery/listBillStatus',type:String}
},
data() {
return {
flowData: []
}
},
methods: {
init(row) {
debugger
console.log(row)
this.flowData = [];
this.getFlowData(row);
},
getFlowData(row) {
this.$http({
url: this.$http.adornUrl(this.url),
method: 'post',
data: this.$http.adornData({
id: row.id,
process_instance_id:row.process_instance_id,
...this.param
})
}).then(({
data
}) => {
this.responseHandle(data,
() => {
let none={remark:'没有设置审批人',tell_name:[],list:[]},flowData=[];
flowData = data.list.map(n => {
if( n.opearte_type==30) n.statusName='分派'
if (n.list && n.list.length > 0) {
n.progress = [
n.list.filter(m => {
return m.is_check == 1;
}).length.toString(),
n.list.length.toString()
].join('/');
}
n.created_time = n.created_time ? n.created_time.substr(5, 11) : '';
let ch=(n.ch_name||'').split(','), mobile=(n.mobile||'').split(',')
n.str_name=ch.map((i,d)=>{return (i||'')+' '+(mobile[d]||'')}).join(',');
return n;
})
if(flowData[0]&&1<flowData[0].opearte_type&&flowData[0].opearte_type<3) flowData.unshift(none)
this.flowData=flowData.reverse();
}, false);
});
},
},
mounted() {
if(this.rowData&&this.rowData.id) this.init(this.rowData)
}
}
</script>
<style>
</style>
🍓结束语🏆
拿来即用,分享给需要的人