Mediation-Frontend/src/views/caseManagement/components/mediationCaseDetails.vue

<template>
    <div>
        <el-dialog title="案件流程" :visible="processVisable" @close="cancel" center :distroy-on-close="true">
            <div>
                <!-- <el-steps class="steps" :active="caseStatus">
                    <el-step :title="item.caseNodeName || item.content" v-for="(item,index) in pageData.allCasenode" :key="index" :description="(item.createNickName || '') + (item.caseNodeTime || '')+(item.nextRoleName || '')"></el-step>
                   
                </el-steps> -->
                <el-steps :active="finishCasenode.length">
                    <el-step :title="item.content"  v-for="(item,index) in finishCasenode" :key="index"></el-step>
                    <el-step :title="item.content" v-for="(item,index) in inCasenode" :key="index"></el-step>
                    <el-step :title="item.content"  v-for="(item,index) in nextCasenode" :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:[],
            inCasenode:[],
            nextCasenode:[]
            
        };
    },
    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=>{
                this.finishCasenode = res.data.data.finishCasenode
                this.inCasenode = res.data.data.inCasenode
                this.nextCasenode = res.data.data.nextCasenode
                
            })
        }
    },
};
</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;
    }
</style>