33 lines
2.6 KiB
Vue
33 lines
2.6 KiB
Vue
<script setup lang="ts">
|
||
import { onMounted, ref, onBeforeUnmount } from 'vue'
|
||
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
|
||
import LoadErrorState from '@/shared/components/LoadErrorState.vue'
|
||
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
|
||
import { listAppointmentCancellations, type AppointmentCancellation } from './api'
|
||
const props = defineProps<{ appointmentNo: string }>()
|
||
const page = ref(1), size = ref(10), total = ref(0), rows = ref<AppointmentCancellation[]>([])
|
||
const loading = ref(false), error = ref<ApiErrorDetails | null>(null)
|
||
let request = 0
|
||
const columns: DataTableColumn[] = [
|
||
{prop:'cancelledAt',label:'取消时间（UTC）',slotName:'time',minWidth:170,singleLine:false},
|
||
{prop:'cancelReason',label:'取消原因',slotName:'reason',minWidth:220,singleLine:false},
|
||
{key:'snapshot',label:'取消时记录',slotName:'snapshot',minWidth:260,singleLine:false},
|
||
]
|
||
async function load() {
|
||
const current = ++request; loading.value = true; error.value = null
|
||
try { const result = await listAppointmentCancellations(props.appointmentNo,page.value,size.value); if(current===request) {rows.value=result.records;total.value=result.total} }
|
||
catch(cause) { if(current===request) error.value=getApiErrorDetails(cause,'取消历史加载失败') }
|
||
finally { if(current===request) loading.value=false }
|
||
}
|
||
onMounted(load)
|
||
onBeforeUnmount(()=>++request)
|
||
</script>
|
||
<template>
|
||
<LoadErrorState v-if="error" title="取消历史加载失败" :message="error.message" @retry="load" />
|
||
<DataTable v-model:page="page" v-model:page-size="size" :data="rows" :columns="columns" :total="total" :loading="loading" :results-visible="!error" row-key="version" @update:page="load" @update:page-size="page=1;load()">
|
||
<template #time="{row}">{{ row.cancelledAt?.replace('T',' ') || '—' }}</template>
|
||
<template #reason="{row}">{{ row.cancelReason || '历史原因未记录' }}</template>
|
||
<template #snapshot="{row}"><details><summary>{{ row.snapshot.fbaWarehouseCode }} · {{ row.snapshot.selectedCount }} 票 · 查看取消时记录</summary><p>原业务备注：{{ row.snapshot.appointmentRemark || '—' }}</p><p>原计划：{{ row.snapshot.plannedAt || row.snapshot.plannedDate || '待定' }}<span v-if="row.snapshot.plannedEndAt"> — {{ row.snapshot.plannedEndAt }}</span></p><p>原确认：{{ row.snapshot.appointmentAt || '未确认' }}<span v-if="row.snapshot.appointmentEndAt"> — {{ row.snapshot.appointmentEndAt }}</span> · {{ row.snapshot.timezone || '时区待核实' }}</p><p>外部确认号：{{ row.snapshot.confirmationNo || '—' }}</p></details></template>
|
||
</DataTable>
|
||
</template>
|