DEMO/government-demo-web/src/components/workflow/ProcessTraceList.vue

<template>
  <el-timeline>
    <el-timeline-item
      v-for="activity in props.trace.activities"
      :key="activity.activityId"
      :timestamp="displayTime(activity.completeTime)"
      :hide-timestamp="!displayTime(activity.completeTime)"
    >
      <div>
        <el-tag :effect="activity.nodeType === 'VIRTUAL' ? 'plain' : 'light'">
          <el-icon><component :is="getIcon(activity.nodeType)" /></el-icon>
          {{ activity.nodeName }}
        </el-tag>

        <div style="margin-top: 10px">
          <el-table :data="activity.assignments" border stripe row-key="assignId">
            <el-table-column prop="receiverName" label="审批人" :width="120">
              <template #default="scope">
                <span :title="scope.row.receiverFullPath">{{ scope.row.receiverName }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="operateTime" label="审批时间" :width="120">
              <template #default="scope">{{ displayTime(scope.row.operateTime) }}</template>
            </el-table-column>
            <el-table-column prop="operateStatus" label="操作" :width="120">
              <template #default="scope">
                <el-tag v-if="scope.row.operateStatus && scope.row.operateStatus !== 'NONE'" :type="getNodeStatusType(scope.row.operateStatus)">
                  {{ getNodeStatusName(scope.row.operateStatus) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="comments" label="审批意见" show-overflow-tooltip :width="120"></el-table-column>
            <el-table-column prop="accessoryList" label="意见附件" :width="120">
              <template #default="scope">
                <accessory-uploader :modelValue="scope.row.accessoryList" category="workflow" readonly />
              </template>
            </el-table-column>
            <el-table-column :width="80">
              <template #default="scope">
                <el-button v-if="activity.nodeType === 'BRANCH'" @click="onTraceChild(scope.row.assignId)">
                  <el-icon title="查看子流程"><ZoomIn /></el-icon>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-timeline-item>
  </el-timeline>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import type { TagProps } from 'element-plus'

import type { TraceInfo, NodeDescriptorType, OperateStatus } from '@cacp/ui'

import AccessoryUploader from '@/components/accessory/AccessoryUploader.vue'

type TagType = TagProps['type']

const props = defineProps<{
  trace?: TraceInfo
}>()
const emits = defineEmits<{
  (e: 'on-trace-child', assignId: string): void
}>()

function displayTime(dt: string) {
  return dt ? dayjs(dt).format('YYYY-MM-DD HH:mm') : ''
}

function getIcon(nodeType: NodeDescriptorType) {
  if (nodeType === 'START') {
    return 'VideoPlay'
  } else if (nodeType === 'END') {
    return 'CircleCheck'
  } else if (nodeType === 'BRANCH') {
    return 'FolderAdd'
  } else {
    return 'Memo'
  }
}

function getNodeStatusType(status: OperateStatus): TagType | undefined {
  if (status === 'AGREE') {
    return 'primary'
  } else if (status === 'BACK') {
    return 'warning'
  } else if (status === 'REJECT') {
    return 'danger'
  } else if (status === 'REVOKE') {
    return 'info'
  }
}

function getNodeStatusName(status: OperateStatus) {
  if (status === 'AGREE') {
    return '流转'
  } else if (status === 'BACK') {
    return '退回'
  } else if (status === 'REJECT') {
    return '驳回'
  } else if (status === 'REVOKE') {
    return '撤回'
  } else {
    return ''
  }
}

function onTraceChild(assignId: string) {
  emits('on-trace-child', assignId)
}
</script>