<template>
|
<ElDialog
|
:model-value="visible"
|
width="80%"
|
top="6vh"
|
destroy-on-close
|
title="流程步骤"
|
@update:model-value="emit('update:visible', $event)"
|
>
|
<div class="flex flex-col gap-4">
|
<div class="rounded-xl border border-[var(--el-border-color-lighter)] bg-[var(--el-fill-color-blank)] px-4 py-3">
|
<div class="text-sm text-[var(--art-gray-500)]">当前任务</div>
|
<div class="mt-1 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-[var(--art-gray-900)]">
|
<span>任务号：{{ taskRow?.taskCode || '--' }}</span>
|
<span>任务状态：{{ taskRow?.taskStatusLabel || '--' }}</span>
|
<span>任务类型：{{ taskRow?.taskTypeLabel || '--' }}</span>
|
</div>
|
</div>
|
|
<ArtTable
|
:loading="loading"
|
:data="rows"
|
:columns="columns"
|
:pagination="pagination"
|
@pagination:size-change="handleSizeChange"
|
@pagination:current-change="handleCurrentChange"
|
/>
|
</div>
|
</ElDialog>
|
</template>
|
|
<script setup>
|
import { computed, reactive, ref, watch } from 'vue'
|
import { guardRequestWithMessage } from '@/utils/sys/requestGuard'
|
import { fetchFlowStepInstancePage } from '@/api/flow-step-instance'
|
import { normalizeFlowStepInstanceRow } from '@/views/system/flow-step-instance/flowStepInstancePage.helpers'
|
|
const props = defineProps({
|
visible: {
|
type: Boolean,
|
default: false
|
},
|
taskRow: {
|
type: Object,
|
default: () => ({})
|
}
|
})
|
|
const emit = defineEmits(['update:visible'])
|
|
const loading = ref(false)
|
const rows = ref([])
|
const pagination = reactive({
|
current: 1,
|
size: 20,
|
total: 0
|
})
|
|
const columns = computed(() => [
|
{
|
type: 'globalIndex',
|
label: '序号',
|
width: 72,
|
align: 'center'
|
},
|
{
|
prop: 'flowInstanceNo',
|
label: '流程实例号',
|
minWidth: 160,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'stepCode',
|
label: '步骤编码',
|
minWidth: 140,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'stepName',
|
label: '步骤名称',
|
minWidth: 180,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'stepType',
|
label: '步骤类型',
|
minWidth: 140,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'executeResult',
|
label: '执行结果',
|
minWidth: 140,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'statusText',
|
label: '状态',
|
width: 120,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'startTimeText',
|
label: '开始时间',
|
minWidth: 180,
|
showOverflowTooltip: true
|
},
|
{
|
prop: 'endTimeText',
|
label: '结束时间',
|
minWidth: 180,
|
showOverflowTooltip: true
|
}
|
])
|
|
function updatePaginationState(response) {
|
pagination.total = Number(response?.total || 0)
|
pagination.current = Number(response?.current || pagination.current || 1)
|
pagination.size = Number(response?.size || pagination.size || 20)
|
}
|
|
async function loadRows() {
|
if (!props.visible || !props.taskRow?.taskCode) {
|
return
|
}
|
|
loading.value = true
|
try {
|
const response = await guardRequestWithMessage(
|
fetchFlowStepInstancePage({
|
taskNo: props.taskRow.taskCode,
|
current: pagination.current,
|
pageSize: pagination.size
|
}),
|
{
|
records: [],
|
total: 0,
|
current: pagination.current,
|
size: pagination.size
|
},
|
{ timeoutMessage: '流程步骤加载超时，已停止等待' }
|
)
|
rows.value = Array.isArray(response?.records)
|
? response.records.map((record) => normalizeFlowStepInstanceRow(record))
|
: []
|
updatePaginationState(response)
|
} finally {
|
loading.value = false
|
}
|
}
|
|
function handleSizeChange(size) {
|
pagination.size = size
|
pagination.current = 1
|
void loadRows()
|
}
|
|
function handleCurrentChange(current) {
|
pagination.current = current
|
void loadRows()
|
}
|
|
watch(
|
() => [props.visible, props.taskRow?.taskCode],
|
([visible]) => {
|
if (!visible) {
|
rows.value = []
|
pagination.current = 1
|
return
|
}
|
pagination.current = 1
|
void loadRows()
|
}
|
)
|
</script>
|
