qqflowengine-frontend/src/views/analysis/StuckInstanceTable.vue

<template>
  <el-card shadow="hover" class="detail-card" v-loading="loading">
    <template #header>
      <div class="detail-header">
        <span>流程明细</span>
        <div class="detail-actions">
          <el-select v-model="localQuery.processDefinitionId" placeholder="流程名称" clearable style="width: 160px;" @change="onProcessChange">
            <el-option v-for="def in definitionList" :key="def.id" :label="def.name" :value="def.id" />
          </el-select>
          <el-input v-model="localQuery.applicantName" placeholder="归属用户" clearable style="width: 140px; margin-left: 8px;" @change="onSearch" />
          <el-select v-model="localQuery.currentNodeId" placeholder="当前节点" clearable style="width: 140px; margin-left: 8px;" @change="onSearch">
            <el-option v-for="node in currentNodeOptions" :key="node.id" :label="node.name" :value="node.id" />
          </el-select>
          <el-button type="primary" @click="onSearch" style="margin-left: 8px;">查询</el-button>
        </div>
      </div>
    </template>

    <el-table :data="instanceList" stripe>
      <el-table-column prop="definitionName" label="流程名称" min-width="140" show-overflow-tooltip />
      <el-table-column label="业务编号" min-width="140">
        <template #default="{ row }">
          {{ row.bizValue || row.instanceNo || '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="applicantName" label="发起人" min-width="100" />
      <el-table-column prop="status" label="状态" min-width="90">
        <template #default="{ row }">
          <el-tag :type="instanceStatusTagType(row.status)">{{ instanceStatusText(row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="currentNodeName" label="当前节点" min-width="120">
        <template #default="{ row }">
          {{ row.currentNodeName || row.currentNode || '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="发起时间" min-width="160" />
      <el-table-column label="操作" min-width="80" fixed="right">
        <template #default="{ row }">
          <el-button link type="primary" size="small" @click="emit('detail', row.id)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="localQuery.pageNum"
      v-model:page-size="localQuery.pageSize"
      :total="instanceTotal"
      :page-sizes="[10, 20, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      class="pagination"
      @size-change="onPageChange"
      @current-change="onPageChange"
    />
  </el-card>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue'
import { instanceStatusText, instanceStatusTagType } from '@/utils/flow'
import type { FlowInstance, FlowDefinition } from '@/types/flow'

const props = defineProps<{
  instanceList: FlowInstance[]
  instanceTotal: number
  loading: boolean
  query: {
    pageNum: number
    pageSize: number
    processDefinitionId?: number
    processName: string
    applicantName: string
    currentNodeId: string
  }
  definitionList: FlowDefinition[]
  currentNodeOptions: { id: string; name: string }[]
}>()

const emit = defineEmits<{
  'update:query': [typeof props.query]
  'process-change': []
  'search': []
  'detail': [number]
}>()

const localQuery = reactive({ ...props.query })

watch(
  () => props.query,
  (val) => {
    Object.assign(localQuery, val)
  },
  { deep: true, immediate: true }
)

function updateQuery() {
  emit('update:query', { ...localQuery })
}

function onProcessChange() {
  const def = props.definitionList.find((d) => d.id === localQuery.processDefinitionId)
  localQuery.processName = def?.name || ''
  localQuery.pageNum = 1
  updateQuery()
  emit('process-change')
}

function onSearch() {
  localQuery.pageNum = 1
  updateQuery()
  emit('search')
}

function onPageChange() {
  updateQuery()
  emit('search')
}
</script>

<style scoped>
.detail-card {
  margin-bottom: 16px;
}
.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.el-pagination {
  margin-top: 16px;
  justify-content: flex-end;
}
</style>