<template>
|
<ElDrawer
|
:model-value="visible"
|
title="流程图查看"
|
size="900px"
|
destroy-on-close
|
@update:model-value="handleVisibleChange"
|
>
|
<ElScrollbar class="h-[calc(100vh-180px)] pr-1">
|
<div v-if="loading" class="py-6">
|
<ElSkeleton :rows="10" animated />
|
</div>
|
<div v-else class="space-y-4">
|
<ElCard shadow="never" class="art-table-card">
|
<template #header>
|
<div class="flex items-center justify-between gap-3">
|
<div>
|
<h3 class="m-0 text-base font-semibold">模板流程快照</h3>
|
<p class="m-0 text-sm text-[var(--art-text-secondary)]">
|
这里展示的是后端模板字段组合出的真实流程信息，不做额外假数据推演。
|
</p>
|
</div>
|
<ElTag :type="detail.statusType || 'info'" effect="light">
|
{{ detail.statusText || '--' }}
|
</ElTag>
|
</div>
|
</template>
|
|
<div class="grid gap-3 md:grid-cols-4">
|
<div
|
v-for="item in flowSnapshot"
|
:key="item.key"
|
class="rounded-lg border border-[var(--art-border-color)] bg-[var(--art-main-bg-color)] p-4"
|
>
|
<div class="text-sm text-[var(--art-text-secondary)]">{{ item.title }}</div>
|
<div class="mt-2 text-base font-semibold text-[var(--art-text-primary)]">
|
{{ item.value }}
|
</div>
|
</div>
|
</div>
|
</ElCard>
|
|
<ElDescriptions title="流程依据" :column="2" border>
|
<ElDescriptionsItem label="模板编码">{{ detail.templateCode || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem label="模板名称">{{ detail.templateName || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem label="起点类型">{{ detail.sourceType || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem label="终点类型">{{ detail.targetType || '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem label="步序长度">{{ detail.stepSize ?? '--' }}</ElDescriptionsItem>
|
<ElDescriptionsItem label="优先级">{{ detail.priority ?? '--' }}</ElDescriptionsItem>
|
</ElDescriptions>
|
</div>
|
</ElScrollbar>
|
</ElDrawer>
|
</template>
|
|
<script setup>
|
import { computed } from 'vue'
|
import { buildTaskPathTemplateFlowSnapshot } from '../taskPathTemplatePage.helpers'
|
|
const props = defineProps({
|
visible: { type: Boolean, default: false },
|
loading: { type: Boolean, default: false },
|
detail: { type: Object, default: () => ({}) }
|
})
|
|
const emit = defineEmits(['update:visible'])
|
|
const visible = computed({
|
get: () => props.visible,
|
set: (value) => emit('update:visible', value)
|
})
|
|
const flowSnapshot = computed(() => buildTaskPathTemplateFlowSnapshot(props.detail))
|
|
function handleVisibleChange(value) {
|
visible.value = value
|
}
|
</script>
|
