bonus-ui/src/views/business/components/ApproveDialog.vue

<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" width="800px">
      <div v-if="processConfig && processConfig.nodeList" class="approval-progress" v-loading="loading">
        <div class="section-header">审批进度</div>
        <el-timeline>
          <el-timeline-item
            v-for="node in processConfig.nodeList"
            :key="node.id"
            :timestamp="getNodeRecord(node) ? getNodeRecord(node).approveTime : ''"
            placement="top"
            :type="getNodeTagType(node)"
          >
            <div class="timeline-content">
              <div class="node-title">
                <span class="node-name">节点{{ node.nodeOrder }}：{{ node.nodeName }}</span>
                <el-tag :type="getNodeTagType(node)">
                  {{ getNodeStatusLabel(node) }}
                </el-tag>
              </div>
              <div class="node-info">
                <div v-if="getNodeRecord(node)">
                  <div>审批人：{{ getNodeRecord(node).approverName }}</div>
                  <div>审批结果：{{ getNodeRecord(node).approveResult === '1' ? '通过' : '驳回' }}</div>
                  <div>审批意见：{{ getNodeRecord(node).approveOpinion }}</div>
                  <div>审批时间：{{ getNodeRecord(node).approveTime }}</div>
                </div>
                <div v-else-if="node.nodeOrder === approvalInstance.currentNodeOrder">
                  <div>待审批人：{{ getApproverNames(node) }}</div>
                  <div>状态：待审批</div>
                </div>
                <div v-else>
                  <div>待审批人：{{ getApproverNames(node) }}</div>
                  <div>状态：等待上一节点审批</div>
                </div>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getApprovalInstanceByBusiness, getApprovalDetail, getProcessConfig } from '@/api/approval'
export default {
  name: 'ApproveDialog',
  data() {
    return {
      visible: false,
      title: '审批详情',
      loading: false,
      approvalInstance: {},
      processConfig: { nodeList: [] },
    }
  },
  methods: {
    // 获取节点标签类型
    getNodeTagType(node) {
      const record = this.getNodeRecord(node)
      if (record) {
        return record.approveResult === '1' ? 'success' : 'danger'
      }
      if (node.id === this.approvalInstance.currentNodeId) {
        return 'warning'
      }
      return 'info'
    },
    // 获取节点记录
    getNodeRecord(node) {
      if (!this.approvalInstance.recordList) {
        return null
      }
      return this.approvalInstance.recordList.find((record) => record.nodeId === node.id)
    },
    // 获取节点状态标签
    getNodeStatusLabel(node) {
      const record = this.getNodeRecord(node)
      if (record) {
        return record.approveResult === '1' ? '已通过' : '已驳回'
      }
      if (node.id === this.approvalInstance.currentNodeId) {
        return '审批中'
      }
      return '未开始'
    },
    // 获取待审批人名称
    getApproverNames(node) {
      if (!node.approverIds) {
        return '未配置'
      }
      // approverIds 是逗号分隔的ID字符串，这里直接显示
      // 如果需要显示用户名，需要从后端获取用户信息
      return node.approverIds
    },
    async getInfo(id, type) {
      try {
        this.loading = true
        const businessId = id

        if (!businessId) {
          return
        }

        const instanceRes = await getApprovalInstanceByBusiness(type, businessId)

        if (!instanceRes || !instanceRes.data) {
          return
        }

        const instanceId = instanceRes.data.id
        const processId = instanceRes.data.processId

        if (!instanceId || !processId) {
          return
        }
        const approvalRes = await getApprovalDetail(instanceId)
        this.approvalInstance = approvalRes.data || {}
        if (!approvalRes.data) return
        const res = await getProcessConfig(processId)
        this.processConfig = res.data || { nodeList: [] }
      } catch (error) {
        console.log('🚀 ~ error:', error)
      } finally {
        this.loading = false
      }
    },
    openDialog(id, type) {
      this.getInfo(id, type)
      this.visible = true
    },
  },
}
</script>

<style lang="scss" scoped>
.approval-progress {
  ::v-deep .el-timeline-item__wrapper {
    padding-left: 30px;
  }

  .timeline-content {
    .node-title {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;

      .node-name {
        font-weight: 600;
        font-size: 14px;
      }
    }

    .node-info {
      font-size: 12px;
      color: #606266;
      line-height: 1.8;
    }
  }
}
</style>