审核流程图 实现流程逻辑

<template>
  <div>
    <el-dialog title="进度" :visible.sync="dialogVisible" width="85%" top="100px" :modal="model" :before-close="cancel">
      <!-- {{approval_list}} -->
      <!-- <Steps :stepInfo="stepInfo"></Steps> -->

      <div style="overflow: hidden;" class="all_box" v-loading="loading">
        <div class="approval_box" v-for="(item,index) in approval_list" :key="item.id" :style="{marginRight:(Math.ceil((index+1)/5)%2==0&&(index)%5==0)?'8.5%':'0px',width:((index+1)%5==0)?'calc(19% - 60px)':'calc(19% )'}">
          <div v-if="index==(approval_list.length-1)?'':Math.ceil((index+1)/5)%2==0&&(index+1)%5!=0">
            <img src="../../../static/approval/left_progress.png">
          </div>

          <div :style="{'border': item.status==-1?'1px solid #A5BEFF':
          (item.status==1?'1px solid #88C97C':
          (item.status==2?'1px solid #F18D8D':
          (item.status==3?'1px solid #F2F290':''))),
          'background': item.status==-1?'white':
          (item.status==1?'#F0FBEE':
          (item.status==2?'#FFECEC':
          (item.status==3?' #F2F290':''))),
          width:(((index+1)%5==0)?'100%':'calc(100% - 60px )')
          }" class="one_list"
          v-show="item['type']!='res'"
          >
            <div style="align-self: center;">
              <img src="../../../static/approval/approval_ing.png" alt="" v-show="item.status==-1">
              <img src="../../../static/approval/approval_success.png" alt="" v-show="item.status==1">
              <img src="../../../static/approval/approval_fail.png" alt="" v-show="item.status==2">

            </div>
            <div style="padding-top: 20px;margin-left: 20px;">
              <div style="font-size: 16px;font-weight: bold;">{{item.verifyPerName}}</div>
              <div style="font-size: 12px;margin: 5px 0;">{{item.typeName}}</div>
              <div style="font-size: 12px;margin: 5px 0;">
                <span v-show="item.recordType===0">预审</span>
                <span v-show="item.status==-1">待审批</span>
                <span v-show="item.status==1">审批通过</span>
                <span v-show="item.status==2">审批否决</span>
                <span v-show="item.status==3">审批撤销</span>
              </div>
              <div style="color: #666666;font-size: 12px;" >
               {{item.verifyTime}}
              </div>
            </div>
          </div>
          <div v-show="item['type']=='res'" class="result" :style="{background:item.statusAll=='通过'?'#61B661':(item.statusAll=='否决'?'#E15353':'white')}">
            <div>
              <img src="../../../static/approval/resSuccess.png" alt="" v-show="item.statusAll=='通过'">
              <img src="../../../static/approval/resFail.png"  v-show="item.statusAll=='否决'">
              <div style="width: 100%;text-align: center;margin-top: 10px;">
                {{item.statusAll}}
              </div>
            </div>
          </div>
<!-- ((index+1)%5==0?false:true)  写在index==approval_list.length-1后 -->
          <div style="display: block;width: 100%;text-align: center;margin-top: 15px;" v-if="approval_list.length==1?false:index==(approval_list.length-1)?'':((index+1)%5==0)?true:false">
            <img src="../../../static/approval/bottom_approval.png" alt="">
          </div>
          <div v-if="index==(approval_list.length-1)?'':Math.ceil((index+1)/5)%2!=0 &&(index+1)%5!=0">
            <img src="../../../static/approval/right_progress.png">
          </div>
        </div>
      </div>


     <!-- <div class="box">
        <div class="list after"
          :style="{'--pseudoElementColor':item.status==-1?colorIng:(item.status==1?colorCan:(item.status==2?colorEnd:colorCan))}"
          v-for="(item,index) in approval_list" :key="item.id">
          <div class="list_left">
            <div>
              <div
                :style='{borderColor:item.status==-1?colorIng:(item.status==1?colorCan:(item.status==2)?colorEnd:colorCan),color:item.status==-1?colorIng:(item.status==1?colorCan:(item.status==2)?colorEnd:colorCan)}'>
                {{index+1}}
              </div>
            </div>
            <div>
              <div
                :style="{fontWeight: 'bold',fontSize: '16px',color:item.status==-1?colorIng:(item.status==1?colorCan:(item.status==2)?colorEnd:colorCan)}">
                {{item.verifyPerName}}
              </div>
              <div
                :style="{fontSize: '12px',color:item.status==-1?colorIng:(item.status==1?colorCan:(item.status==2)?colorEnd:colorCan)}">
                {{item.typeName}}-
                <span v-show="item.recordType===0">预审</span>
                <span v-show="item.status==-1">待审</span>
                <span v-show="item.status==1">通过</span>
                <span v-show="item.status==2">拒绝</span>
                <span v-show="item.status==3">撤销</span>
              </div>
            </div>
          </div>
          <div :style="{color:item.status==-1?colorIng:(item.status==1?colorCan:(item.status==2)?colorEnd:colorCan)}">
            {{item.verifyTime}}
          </div>
        </div>
      </div> -->
      <div style="clear: both;"></div>
      <div style="width: 95%;text-align: right;margin: 20px auto;padding-right: 20px;">
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  // import Steps from './Steps'
  import {
    getList
  } from '@/api/process/process.js'
  import {
    mapGetters
  } from "vuex";
  export default {
    components: {
      // Steps
    },
    props: {
      dialogVisible: Boolean,
      process_data: Object,
      model: {
        default: true,
        type: Boolean
      }
    },
    data() {
      return {
        approval_list: [],
        stepInfo: {
          list: [{
              status: '1',
            },
            {
              status: '2',
            },
            {
              status: '3',
            },
            {
              status: '4',
            },
            {
              status: '5',
            },
            {
              status: '6',
            },
            {
              status: '7',
            },
            {
              status: '8',
            },
          ],
          step: 7
        },
        submitLoading: false,
        active: -1,
        pseudoElementColor: '#87898C',
        colorCan: '#67C23A',
        colorIng: '#87898C',
        colorEnd: '#F56C6C',
        statusAll:''
      }
    },
    computed: {
      ...mapGetters(["permission"]),
      ...mapGetters(["userInfo"]),
    },
    watch: {
      dialogVisible(val, oldVal) {

        if (val) {

          var data = new FormData()
          data.append('commonId', this.process_data.id)
          data.append('type', this.process_data.type)
          this.loading=true
          getList(data).then((res) => {
            this.approval_list = res.data.data.flowList
            var index = ''
            for (var i = 0; i < this.approval_list.length; i++) {

              if (this.approval_list[i].status == 3) {
                index = i
              }
              if (this.approval_list[i].status == '0' || this.approval_list[i].status == '2') {
                this.active = i
                break;
              }
            }
            // <span v-show="item.status==-1">待审</span>
            // <span v-show="item.status==1">通过</span>
            // <span v-show="item.status==2">拒绝</span>
            // <span v-show="item.status==3">撤销</span>
            var success= true
            for (var i = 0; i < this.approval_list.length; i++) {
              if(this.approval_list[i].status!=1){
                success=false
                this.statusAll = ''
              }
              if(this.approval_list[i].status==2){

                this.statusAll = '否决'
                break;
              }
              if(this.approval_list[i].status==3){

                this.statusAll = '撤销'
                break;
              }

            }
            console.log(success,'success')

            if (index) {
              var zancun = JSON.parse(JSON.stringify(this.approval_list[index]))
              this.approval_list.splice(index, 1)
              this.approval_list.push(zancun)
            }

            if (this.active == -1) {
              this.active = this.approval_list.length
            }
            if(success){
              this.statusAll = '通过'

            }
            if(this.statusAll){
              this.approval_list.push({
                statusAll:this.statusAll,
                type:'res'
              })
            }
            this.loading=false
            this.$nextTick((e)=>{

              var doms = document.getElementsByClassName('approval_box')
              console.log(doms,'foms')
              var length = Math.ceil(doms.length/5)
              for(var i=1;i<=doms.length;i++){
                if(Math.ceil(i/5)%2==0){
                  // 双数行
                  console.log(i,'双数')
                  doms[i-1].style.float="right"
                }else{
                  console.log(i,'单数')
                  doms[i-1].style.float="left"
                }
              }


            })

          }, () => {})
        } else {
          this.active = -1
        }
      }
    },
    methods: {
      async getListPerson() {
        var result = await orderPersonList()

        this.approval_Options = result.data.data.records
      },
      cancel() {
        this.approvalListForm = ''
        this.$emit('cancel')
      },
    }
  }
</script>

<style scoped>
  .list {
    width: 90%;
    margin: 0 auto;
    height: 75px;
    display: flex;
    justify-content: space-between;
    position: relative;
  }

  .list_left {
    display: flex;

  }

  .list_left>div:first-child {
    margin-right: 10px;

  }

  .list_left>div:first-child>div:first-child {
    border: solid;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    display: flex;
    line-height: 20px;
    /* align-items: center; */
    justify-content: center;
    font-weight: bold;

  }

  .list_left>div:last-child>div:first-child {
    margin-bottom: 10px;
  }

  .after:after {
    background-color: #87898C;
    background-color: var(--pseudoElementColor);
    width: 3px;
    display: block;
    content: '';
    position: absolute;
    left: 11.5px;
    height: 50px;
    top: 25px;
  }

  .box>.list:last-child::after {
    display: none;
  }
/*  .all_box{
    &>div:nth-child(){

    }
  } */
  .one_list {
    width: calc(100% - 60px);

    height: 120px;
    border: solid;
    border-radius: 5px;
    padding-left: 25px;
    box-sizing: border-box;
    display: flex;
  }

  .approval_box {
    width: 275px;
    display: inline-block;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
  }
  .result{
    width: 120px;
    height: 120px;
    border-radius: 100px;
    background-color: red;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-wrap: wrap;
  }
</style>