2026-08-08 13:32:27 +08:00
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { reactive, ref } from 'vue'
|
|
|
|
|
import { useRouter } from 'vue-router'
|
|
|
|
|
import { ElMessage } from 'element-plus'
|
|
|
|
|
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
|
|
|
|
|
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
|
|
|
|
|
import TruckAppointmentForm from '../components/TruckAppointmentForm.vue'
|
|
|
|
|
import TruckAttachmentDialog from '../components/TruckAttachmentDialog.vue'
|
|
|
|
|
import { createTruckAppointment } from '../api/platformTrucking'
|
2026-08-08 14:13:32 +08:00
|
|
|
import type { SaveTruckAppointmentRequest } from '../types'
|
2026-08-08 21:14:45 +08:00
|
|
|
const router = useRouter(); const saving = ref(false); const attachmentOpen = ref(false); const error = ref<ApiErrorDetails | null>(null)
|
2026-08-08 14:13:32 +08:00
|
|
|
const form = reactive<SaveTruckAppointmentRequest>({ expectedVersion: 0, plannedLoadingAt: null, payableAmount: '0.00', receivableAmount: '0.00', currency: 'RMB' })
|
|
|
|
|
async function submit() { saving.value = true; error.value = null; try { await createTruckAppointment({ ...form }); ElMessage.success('拖车预约已创建'); router.push({ name: 'trucking' }) } catch (err) { error.value = getApiErrorDetails(err, '创建失败，请稍后重试') } finally { saving.value = false } }
|
2026-08-08 13:32:27 +08:00
|
|
|
</script>
|
2026-08-08 21:14:45 +08:00
|
|
|
<template><main class="business-page truck-editor-page"><div class="editor-actions"><el-button @click="router.push({ name: 'trucking' })">返回列表</el-button></div><section v-if="error" class="surface-panel editor-error"><ApiErrorMeta :details="error" /><span>{{ error.message }}</span></section><section class="surface-panel form-panel"><TruckAppointmentForm v-model="form" :submitting="saving" @submit="submit" @attachments="attachmentOpen = true" /></section><TruckAttachmentDialog v-model="attachmentOpen" :attachments="[]" /></main></template>
|
|
|
|
|
<style scoped>.truck-editor-page { min-width: 0; }.editor-actions { display:flex; justify-content:flex-end; }.form-panel { padding:24px; }.editor-error { display:flex; align-items:center; gap:12px; padding:14px 18px; color:#b42318; }.editor-error :deep(.api-error-meta) { margin-top:0; order:2; } @media (max-width:720px) { .form-panel { padding:16px; } }</style>
|
