cmc-oa/oa-ui-app/pages/components/flowable/FlowRecord.vue

<template>
  <view class="box">
    <!-- <uni-steps :options="flowRecordList" active-color="#007AFF" :active="active" direction="column">
      <uni-card>
        <text>这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
      </uni-card>
    </uni-steps> -->
    <scroll-view scroll-y="true" class="scroll-box">
      <uv-steps :current="active" direction="column">
        <uv-steps-item v-for="item, index in flowRecordList" :key="'f' + index" :title="item.taskName">
          <!-- <template v-slot:icon>
            <uv-icon name="checkmark-circle-fill" color="#53c21d"></uv-icon>
          </template> -->
          <template v-slot:desc>
            <view class="desc">
              <view class="desc-item">
                <view class="item-label">办理人：</view>
                <view class="item-value">{{ item.assigneeName }}</view>
              </view>
              <view class="desc-item" v-if="item.candidate">
                <view class="item-label">候选办理：</view>
                <view class="item-value">{{ item.candidate }}</view>
              </view>
              <view class="desc-item">
                <view class="item-label">接收时间：</view>
                <view class="item-value">{{ item.createTime }}</view>
              </view>
              <view class="desc-item">
                <view class="item-label">处理时间：</view>
                <view class="item-value">{{ item.finishTime }}</view>
              </view>
              <view class="desc-item">
                <view class="item-label">耗时：</view>
                <view class="item-value">{{ item.duration }}</view>
              </view>
            </view>
          </template>
        </uv-steps-item>
      </uv-steps>
    </scroll-view>

  </view>
</template>

<script>
import { flowRecord } from "@/api/flowable/finished";
export default {
  props: {
    rows: Object
  },
  watch: {
    rows(newval) {
      console.log(newval);
      this.getFlowRecordList();
    }
  },
  created() {
    this.getFlowRecordList();
  },
  data() {
    return {
      flowRecordList: [], // 流程流转数据
      flowList: [],
      active: 0,
    }
  },
  methods: {
    setColor(val) {
      if (val) {
        return "#2bc418";
      } else {
        return "#b3bdbb";
      }
    },
    setIcon(val) {
      if (val) {
        return "el-icon-check";
      } else {
        return "el-icon-time";
      }
    },
    /** 获取流程变量内容 */
    processVariables() {
      if (this.rows.taskId) {
      }
    },
    /** 流程流转记录 */
    getFlowRecordList() {
      const params = { procInsId: this.rows.procInsId, deployId: this.rows.deployId }
      flowRecord(params).then(res => {
        this.flowRecordList = res.data.flowList.reverse();
        console.log(this.flowRecordList);
        this.active = this.flowRecordList[i].length - 1
        for (let i = 0; i < this.flowRecordList.length; i++) {
          if (!this.flowRecordList[i].finishTime) {
            this.active = i
          }
        }
      }).catch(res => {

      })
    },
  }
}
</script>

<style lang="scss" scoped>
.box {
  padding: 20px;
  height: 100%;
}

.scroll-box {
  height: 100%;
}

.desc {
  padding: 8px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  width: 100%;

  .desc-item {
    display: flex;
    border-bottom: 1px solid #eee;
    height: 30px;
    align-items: center;

    .item-label {
      width: 80px;
      text-align: right;
    }

    .item-value {
      // flex: 1;
    }
  }
}
</style>