93 lines
2.7 KiB
Vue
93 lines
2.7 KiB
Vue
<template>
|
|
<div>
|
|
<el-dialog title="案件流程" :visible="processVisable" @close="cancel" center :distroy-on-close="true">
|
|
<div class="loading" v-if="flagLoading">
|
|
<i class="el-icon-loading"></i>
|
|
</div>
|
|
<div v-else>
|
|
<el-steps class="steps" :active="finishCasenode.length">
|
|
<el-step :title="item.content" :description="(item.createNickName || '') + (item.caseNodeTime || '')+(item.nextRoleName || '')" v-for="(item,index) in stepNumber" :key="index"></el-step>
|
|
</el-steps>
|
|
</div>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="cancel" class="endbutton1"><span>取 消</span></el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {selectCaseProgress} from '@/api/caseManagement/caseManagement.js'
|
|
export default {
|
|
props: ["processVisable","processData","caseFlowNumber"],
|
|
data() {
|
|
return {
|
|
processId:null,
|
|
pageData:{},
|
|
caseStatus:0,
|
|
finishCasenode:[],
|
|
stepNumber:[],
|
|
flagLoading:true
|
|
|
|
};
|
|
},
|
|
watch: {
|
|
processVisable(val){
|
|
if(val){
|
|
this.processId = this.caseFlowNumber.id;
|
|
this.selectCaseProgressFn({caseId:this.processId});
|
|
|
|
}
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
cancel() {
|
|
this.$emit("cancelViewProcess");
|
|
},
|
|
selectCaseProgressFn(data){
|
|
selectCaseProgress(data).then(res=>{
|
|
let finishCasenode = res.data.data.finishCasenode;;
|
|
this.finishCasenode = finishCasenode;
|
|
let inCasenode = res.data.data.inCasenode;
|
|
let nextCasenode = res.data.data.nextCasenode;
|
|
this.stepNumber= [...finishCasenode,...inCasenode,...nextCasenode];
|
|
this.flagLoading =false
|
|
|
|
})
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.steps{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
::v-deep .el-step{
|
|
// width: 150px;
|
|
flex-basis:25% !important;
|
|
margin-right: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
::v-deep .el-dialog__body {
|
|
height: 500px !important;
|
|
overflow: auto !important;
|
|
}
|
|
::v-deep .el-dialog {
|
|
width: 800px;
|
|
background: #ffffff;
|
|
border-radius: 20px;
|
|
}
|
|
.loading {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.el-icon-loading {
|
|
font-size: 50px;
|
|
}
|
|
}
|
|
</style> |