36 lines
2.3 KiB
Vue
36 lines
2.3 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 { listAppointmentCancellationRecords, type AppointmentCancellationSummary } from './api'
|
||
const emit = defineEmits<{ view: [appointmentNo: string] }>()
|
||
const page=ref(1),size=ref(10),total=ref(0),rows=ref<AppointmentCancellationSummary[]>([])
|
||
const loading=ref(false),error=ref<ApiErrorDetails|null>(null)
|
||
let request=0
|
||
const columns: DataTableColumn[]=[
|
||
{key:'actions',label:'操作',slotName:'actions',width:90,fixed:'left'},
|
||
{prop:'appointmentNo',label:'预约单号',minWidth:220,singleLine:false},
|
||
{prop:'fbaWarehouseCode',label:'目的仓',width:100},
|
||
{prop:'selectedCount',label:'票数',width:80},
|
||
{prop:'cancelledAt',label:'取消时间（UTC）',slotName:'time',minWidth:180,singleLine:false},
|
||
{prop:'cancelReason',label:'取消原因',slotName:'reason',minWidth:240,singleLine:false},
|
||
]
|
||
async function load() {
|
||
const current=++request;loading.value=true;error.value=null
|
||
try {const result=await listAppointmentCancellationRecords(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="(row: object) => `${(row as AppointmentCancellationSummary).appointmentNo}:${(row as AppointmentCancellationSummary).version}`" @update:page="load" @update:page-size="page=1;load()">
|
||
<template #actions="{row}"><el-button @click="emit('view',row.appointmentNo)">查看</el-button></template>
|
||
<template #time="{row}">{{ row.cancelledAt?.replace('T',' ') || '—' }}</template>
|
||
<template #reason="{row}">{{ row.cancelReason || '历史原因未记录' }}</template>
|
||
</DataTable>
|
||
</template>
|