审批组件

<template>
  <ul class="xx-step">
    <li v-for="(item, index) in list" :key="index" :class="{'primary': item.isclassA}">
      <div>
        <span :class="getStatusClass(item, index)">{{getStatusTitle(index)}}</span>
        <section v-if="item.avatarUrl">
          <em v-for="(img, i) in item.avatarUrl.split(',')" :key="i" :class="{moreImg: item.avatarUrl.split(',').length >1}">
            <img v-if="i < 2" :src="img" alt="">
          </em>
        </section>
        <img v-else :src="srcimg" alt="">
        <p>{{item.userInfo}}</p>
      </div>
    </li>
  </ul>
</template>
<script>
export default {
  name: 'myStep',
  props: {
    list: { // { status: 'primary info warning error' },
      type: Array,
      default: () => []
    },
    allStep: { // 所有步骤
      type: Number,
      default: 1
    },
    currentStep: { // 当前步骤
      type: Number,
      default: 1
    }
  },
  data () {
    return {
      srcimg: require('@/assets/navtop_imgs/headportrait.png'),
      isclassA: false
    }
  },
  mounted () {
    this.list.map(one => {
      one.isclassA = false
      return one
    })
    console.log(this.list)
  },
  computed: {
  },
  methods: {
    getStatusTitle (index) {
      if (index === 0) {
        return '提交'
      } else if (index === this.list.length - 1) {
        return '终审'
      }
      return '审核'
    },
    getStatusClass (item, index) {
      if (this.currentStep === index) { // 当前操作点为红色
        // if (item.isOperation === 0) { // 能操作
        return 'error'
        // }
        //  else {
        //   this.isclassA = true
        //   return 'primary'
        // }
      } else if (this.currentStep !== index) { // 不是 当前操作点
        if (item.isOperation === 1) { // 能操作
          return 'info'
        } else { // 不操作分2类 操作过了 与还没操作
          if (this.currentStep >= index) {
            this.$set(this.list[index], 'isclassA', true)
            return 'primary'
          } else {
            this.$set(this.list[index], 'isclassA', false)
            return 'info'
          }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.xx-step {
  display: flex;
  justify-content: space-between;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 auto;
  width: 100% !important;
  li {
    position: relative;
    flex: 1;
    min-width: 250px;
    > div {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 200px;
      > span {
        width: 51px;
        height: 30px;
        border-radius: 2px;
        text-align: center;
        line-height: 30px;
        background-color: #00d000;
        color: #fff;
        font-size: 13px;
        margin-bottom: 10px;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          bottom: -4px;
          left: 44%;
          width: 8px;
          height: 8px;
          transform: rotate(45deg);
          background-color: #00d000;
        }
        &.info {
          background-color: #909399;
          &::after {
            background-color: #909399;
          }
        }
        &.primary {
          background-color: #00d000;
          &::after {
            background-color: #00d000;
          }
        }
        &.warning {
          background-color: #ffa800;
          &::after {
            background-color: #ffa800;
          }
        }
        &.error {
          background-color: red;
          &::after {
            background-color: red;
          }
        }
      }
      > img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
      }
      section {
        height: 46px;
        margin-bottom: 10px;
        em {
          &.moreImg:nth-of-type(1) {
            img {
              margin-right: -10px;
            }
          }
          &.moreImg:nth-of-type(2) {
            img {
              margin-left: -10px;
            }
          }
          img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
          }
        }
      }
      p {
        font-size: 14px;
        color: #595959;
      }
    }
    &:last-of-type {
      // flex-shrink: 0;
      // flex-grow: 0;
      // flex-basis: auto!important;
      flex: 0;
      &::after {
        display: none;
      }
    }
    &::after {
      content: "";
      position: absolute;
      left: 200px;
      top: 50%;
      width: calc(100% - 200px);
      height: 7px;
      border-radius: 7px;
      background-color: #e6e6e6;
    }
    &.primary {
      &::after {
        background-color: #00d000;
      }
    }
  }
}
</style>