cmc-oa/oa-ui-app/pages/components/flowNote.vue

<!--
 * @Author: ysh
 * @Date: 2025-03-17 10:04:51
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-03-18 10:45:52
-->
<template>
  <view>
    <uv-steps :current="currentNum">
      <uv-steps-item :error="item.comment && item.comment.type == '退回意见'" v-for="item, index in flowRecordList"
        :key="'f' + index" :title="item.taskName" :desc="item.finishTime"></uv-steps-item>
    </uv-steps>
    <view class="custom-block danger" v-if="isRetrun">
      <uni-title type="h3" title="任务被退回，请修改后重新提交" color="#900"></uni-title>
      <view>
        <p>退回意见：{{ reBackDescription }}</p>
        <p>办理人：{{ assigneeName }}</p>
      </view>
    </view>
    <uv-divider></uv-divider>
  </view>
</template>

<script>
import { flowRecord, flowRecordFull } from "@/api/flowable/finished";
export default {
  props: {
    taskForm: Object,
  },
  data() {
    return {
      flowRecordList: [],
      currentNum: 0,
      isRetrun: false,
      reBackDescription: '',
      assigneeName: ''
    }
  },
  created() {
    this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId);
  },
  methods: {
    /** 流程流转记录 */
    getFlowRecordList(procInsId, deployId) {
      const params = { procInsId: procInsId, deployId: deployId }
      flowRecordFull(params).then(res => {
        if (res.data.flowList.length > 1 && res.data.flowList[1].comment && res.data.flowList[1].comment.type == '退回意见') {
          this.reBackDescription = res.data.flowList[1].comment.comment
          this.assigneeName = res.data.flowList[1].assigneeName
          this.isRetrun = true
        } else {
          this.isRetrun = false
        }
        this.flowRecordList = res.data.flowList.reverse();
        this.currentNum = this.flowRecordList.length - 1;
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.custom-block {
  padding: 10px;
  border-left-width: 2px;
  border-left-style: solid;
  margin: 5px 0;
}

.danger {
  background-color: #ffe6e6;
  border-color: #c00;
  color: #4d0000;
}
</style>