105 lines
3.6 KiB
Vue
105 lines
3.6 KiB
Vue
|
<template>
|
|||
|
|
<section class="expense-case-timeline" aria-label="费用事件时间线">
|
|||
|
|
<div class="expense-case-timeline-head">
|
|||
|
|
<div>
|
|||
|
|
<div class="expense-case-timeline-title-row">
|
|||
|
|
<h4>费用事件时间线</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>
|
|||
|
|
</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'"></i>
|
|||
|
|
<span>刷新</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="expense-case-timeline-body" aria-live="polite">
|
|||
|
|
<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>
|
|||
|
|
|
|||
|
|
<ol v-else-if="timeline" class="expense-case-event-list">
|
|||
|
|
<li
|
|||
|
|
v-for="event in timeline.events"
|
|||
|
|
:key="event.id"
|
|||
|
|
class="expense-case-event"
|
|||
|
|
:class="event.tone"
|
|||
|
|
>
|
|||
|
|
<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 class="expense-case-event-meta">
|
|||
|
|
<span><i class="mdi mdi-account-outline"></i>{{ event.actorLabel }}</span>
|
|||
|
|
<time :datetime="event.occurredAt || undefined">{{ event.occurredAtLabel }}</time>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ol>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { toRef } from 'vue'
|
|||
|
|
|
|||
|
|
import { useExpenseCaseTimeline } from '../../composables/requests/useExpenseCaseTimeline.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')
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped src="../../assets/styles/components/travel-request-expense-case-timeline.css"></style>
|