Vue2_时间线-流程审批

效果图： 

 实现代码：

1、基于 element-ui 中，时间线样式进行改造

2、根据接口返回值进行条件渲染

        <el-tab-pane label="流转记录" name="second">
          <!-- 时间线 -->
          <div class="block" style="padding-top: 40px; padding-left: 200px">
            <el-timeline>
              <el-timeline-item v-for="(activity, index) in activities" :key="index" :color="colors(activity.nodeName)">
                <!-- 方案一 -->
                <el-card v-if="activity.nodeName != '提交申请'" style="width: 85%" shadow="hover">
                  <div class="content">
                    <span><b>办理人：</b>{{ activity.handlerName }}</span>
                    <span><b>流程：</b>{{ activity.nodeName }}</span>
                    <span><b>办理时间：</b>{{ activity.auditTime }}</span>
                    <span><b>耗时：</b> {{ activity.elapsedTime }} </span>
                  </div>
                  <hr color="#eee" />
                  <div style="margin-top: 8px">
                    状态：<el-button type="text" size="small" :style="fontstyle(activity.agree)" class="status">{{
                      activity.agree == 1 ? '通过' : '拒绝'
                    }}</el-button>
                    <div style="margin-bottom: 8px">
                      审批意见：<span>{{ activity.auditInfo }}</span>
                    </div>
                  </div>
                </el-card>
                <!-- 方案二 -->
                <el-card v-else style="width: 85%" shadow="hover">
                  <div class="content">
                    <span><b>申请人：</b>{{ activity.handlerName }}</span>
                    <span><b>申请流程：</b>{{ activity.nodeName }}</span>
                    <span><b>提交时间：</b>{{ activity.auditTime }}</span>
                  </div>
                  <hr color="#eee" />
                  <div style="margin-top: 8px">
                    状态：<el-button type="text" size="small" :style="fontstyle(activity.agree)" class="status">{{
                      activity.agree == 1 ? '通过' : '拒绝'
                    }}</el-button>
                  </div>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-tab-pane>

props: {
    // 接口需求参数
    detail: {
      type: Object,
      default: () => {
        return {};
      },
    },
 },
data() {
   return {
     activities: [],
  }
},
computed: {
    // 监听agree颜色变化
    fontstyle() {
      return (icontent) => {
        if (icontent == '1') {
          return { color: 'green' };
        } else {
          return { color: 'red' };
        }
      };
    },
  },
created() {
   this.getRecordApi();
},
methods:{
    // 流转记录圆点颜色
    colors(index) {
      if (index != null) {
        return '#2a9c4a';
      }
    },
    // 流转记录接口
    async getRecordApi() {
      if (get(this.detail, 'id', false)) {
        const res = await API.flowAudit.orderId({
          orderId: this.detail.orderId,
        });
        this.activities = res.datas;
        // 数组倒序
        let activities = this.activities.reverse();

        if (this.activities.length > 0) {
          for (let i = 0; i < this.activities.length; i++) {
            // 时间差计算
            console.log(this.activities[i].auditTime);
            console.log(
              (this.activities[i].elapsedTime = timediff(this.activities[i].auditTime, this.activities[0].auditTime))
            );
          }
        }

      }
    },
}

3、CSS样式 

<style scoped lang="scss" rel="stylesheet/scss">
.content {
  display: flex;
  justify-content: space-between;
  padding: 15px 0px;
  span {
    flex: 1;
  }
}
</style>