Files
zkxw/web-admin/src/components/oa-approval/OaPrintRelatedTree.vue
T
zlwuandCursor 600adfb6d8 feat(web-admin): print relatedApproval as recursive multi-line blocks
PDF export fetches summaries and renders up to three nested levels with
dedupe, instead of dumping raw instance ids.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-22 23:04:06 +08:00

68 lines
1.5 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!-- 关联审批单打印树(递归,最多 3 层由组装器保证) -->
<template>
<div class="oa-print-related">
<div
v-for="(b, bi) in blocks"
:key="`blk-${b.indexLabel}-${bi}`"
class="oa-print-related__block"
>
<div class="oa-print-related__title">{{ b.indexLabel }}. {{ b.title }}</div>
<div
v-for="(line, li) in b.lines || []"
:key="`ln-${bi}-${li}`"
class="oa-print-related__line"
>
<span class="oa-print-related__k">{{ line.label }}</span>
<span class="oa-print-related__v">{{ line.value }}</span>
</div>
<div v-if="b.children?.length" class="oa-print-related__children">
<OaPrintRelatedTree :blocks="b.children" />
</div>
</div>
</div>
</template>
<script setup lang="ts">
import type { RelatedPrintBlock } from '@/utils/oa-approval-print-related'
defineOptions({ name: 'OaPrintRelatedTree' })
defineProps<{
blocks: RelatedPrintBlock[]
}>()
</script>
<style scoped lang="scss">
.oa-print-related__block {
margin: 0 0 8px;
}
.oa-print-related__title {
margin-bottom: 2px;
font-weight: 600;
}
.oa-print-related__line {
display: flex;
gap: 8px;
font-size: 12px;
line-height: 1.5;
}
.oa-print-related__k {
flex: 0 0 auto;
color: #64748b;
}
.oa-print-related__v {
color: #334155;
word-break: break-all;
}
.oa-print-related__children {
margin: 4px 0 0 14px;
padding-left: 8px;
border-left: 2px solid #cbd5e1;
}
</style>