125 lines
4.5 KiB
Vue
125 lines
4.5 KiB
Vue
<template>
|
||
<section class="expense-case-timeline" aria-labelledby="expense-case-timeline-title">
|
||
<div class="expense-case-timeline-head">
|
||
<div>
|
||
<div class="expense-case-timeline-title-row">
|
||
<h4 id="expense-case-timeline-title">费用操作记录</h4>
|
||
<span v-if="timeline" class="expense-case-stage">{{ timeline.stageLabel }}</span>
|
||
</div>
|
||
<p v-if="timeline" class="expense-case-meta">
|
||
<span>{{ timeline.caseNo || '统一费用事件' }}</span>
|
||
<span>已串联 {{ timeline.linkCount }} 张业务单据</span>
|
||
<span v-if="displayedEvents.length">共 {{ displayedEvents.length }} 条记录</span>
|
||
<span v-if="displayedEvents.length">最新优先</span>
|
||
</p>
|
||
<p v-else>记录费用从申请、审批、报销到付款的真实办理轨迹。</p>
|
||
</div>
|
||
<button
|
||
class="expense-case-refresh"
|
||
type="button"
|
||
:disabled="loading"
|
||
aria-label="刷新费用事件时间线"
|
||
@click="refreshExpenseCaseTimeline"
|
||
>
|
||
<i :class="loading ? 'mdi mdi-loading mdi-spin' : 'mdi mdi-refresh'" aria-hidden="true"></i>
|
||
<span>刷新</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="expense-case-timeline-body" :aria-busy="loading">
|
||
<div v-if="loading && !timeline" class="expense-case-state loading">
|
||
<i class="mdi mdi-loading mdi-spin"></i>
|
||
<span>正在同步真实费用事件</span>
|
||
</div>
|
||
|
||
<div v-else-if="errorMessage" class="expense-case-state error">
|
||
<i class="mdi mdi-alert-circle-outline"></i>
|
||
<div>
|
||
<strong>费用事件加载失败</strong>
|
||
<span>{{ errorMessage }}</span>
|
||
</div>
|
||
<button type="button" @click="refreshExpenseCaseTimeline">重新加载</button>
|
||
</div>
|
||
|
||
<div v-else-if="notAvailable" class="expense-case-state empty">
|
||
<i class="mdi mdi-timeline-alert-outline"></i>
|
||
<div>
|
||
<strong>当前单据尚未纳入统一费用事件</strong>
|
||
<span>上方进度仍可正常使用，后续业务动作写入后将自动展示办理记录。</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else-if="timeline && !timeline.events.length" class="expense-case-state empty">
|
||
<i class="mdi mdi-timeline-clock-outline"></i>
|
||
<div>
|
||
<strong>统一费用事件已建立</strong>
|
||
<span>暂无可展示的办理记录。</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else-if="timeline" class="expense-case-event-table">
|
||
<div class="expense-case-event-columns" aria-hidden="true">
|
||
<span>发生时间</span>
|
||
<span>事件</span>
|
||
<span>操作人</span>
|
||
</div>
|
||
<ol class="expense-case-event-list">
|
||
<li
|
||
v-for="event in displayedEvents"
|
||
:key="event.id"
|
||
class="expense-case-event"
|
||
:class="event.tone"
|
||
>
|
||
<time
|
||
class="expense-case-event-time"
|
||
:datetime="event.occurredAt || undefined"
|
||
>
|
||
{{ event.occurredAtLabel }}
|
||
</time>
|
||
<div class="expense-case-event-main">
|
||
<span class="expense-case-event-icon" aria-hidden="true">
|
||
<i :class="event.icon"></i>
|
||
</span>
|
||
<div class="expense-case-event-copy">
|
||
<strong>{{ event.label }}</strong>
|
||
<p>{{ event.summary }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="expense-case-event-actor" :title="event.actorLabel">
|
||
<i class="mdi mdi-account-outline" aria-hidden="true"></i>
|
||
<span>{{ event.actorLabel }}</span>
|
||
</div>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, toRef } from 'vue'
|
||
|
||
import { useExpenseCaseTimeline } from '../../composables/requests/useExpenseCaseTimeline.js'
|
||
import { orderExpenseCaseEventsForDisplay } from '../../utils/expenseCaseTimeline.js'
|
||
|
||
const props = defineProps({
|
||
claimId: { type: String, default: '' },
|
||
refreshKey: { type: String, default: '' }
|
||
})
|
||
|
||
const {
|
||
timeline,
|
||
loading,
|
||
errorMessage,
|
||
notAvailable,
|
||
refreshExpenseCaseTimeline
|
||
} = useExpenseCaseTimeline({
|
||
claimId: toRef(props, 'claimId'),
|
||
refreshKey: toRef(props, 'refreshKey')
|
||
})
|
||
|
||
const displayedEvents = computed(() => orderExpenseCaseEventsForDisplay(timeline.value?.events))
|
||
</script>
|
||
|
||
<style scoped src="../../assets/styles/components/travel-request-expense-case-timeline.css"></style>
|