88 lines
7.0 KiB
Vue
88 lines
7.0 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
import type { FormInstance } from 'element-plus'
|
|
import { transportDemandRules, type TransportDemandForm, type TransportDemandKind } from '../transportDemandForm'
|
|
|
|
const props = withDefaults(defineProps<{
|
|
model: TransportDemandForm
|
|
kind: TransportDemandKind
|
|
disabled?: boolean
|
|
submitting?: boolean
|
|
canSubmit?: boolean
|
|
editing?: boolean
|
|
}>(), { disabled: false, submitting: false, canSubmit: true, editing: false })
|
|
const emit = defineEmits<{ submit: []; cancel: [] }>()
|
|
const formRef = ref<FormInstance>()
|
|
const rules = computed(() => transportDemandRules(props.kind, props.model))
|
|
defineExpose({
|
|
validate: () => formRef.value?.validate() ?? Promise.resolve(false),
|
|
clearValidate: (fields?: string | string[]) => formRef.value?.clearValidate(fields),
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<el-form ref="formRef" class="transport-demand-form" :model="model" :rules="rules" label-position="top" :disabled="disabled || submitting">
|
|
<slot name="customer" />
|
|
<section class="transport-demand-section">
|
|
<h3>运输信息</h3>
|
|
<div class="transport-demand-grid">
|
|
<el-form-item v-if="kind === 'truck'" class="transport-demand-wide" label="车辆类型" prop="vehicleType">
|
|
<el-select v-model="model.vehicleType" placeholder="请选择车辆类型"><el-option label="15拖" value="PALLET_15" /><el-option label="30拖" value="PALLET_30" /></el-select>
|
|
</el-form-item>
|
|
<el-form-item label="起运地" prop="origin"><el-input v-model.trim="model.origin" maxlength="255" placeholder="城市 / 港口 / 州" /></el-form-item>
|
|
<el-form-item label="目的地" prop="destination"><el-input v-model.trim="model.destination" maxlength="255" placeholder="城市 / 州" /></el-form-item>
|
|
<el-form-item label="起运地联系人" prop="originContactName"><el-input v-model.trim="model.originContactName" maxlength="128" /></el-form-item>
|
|
<el-form-item label="目的地联系人" prop="destinationContactName"><el-input v-model.trim="model.destinationContactName" maxlength="128" /></el-form-item>
|
|
<el-form-item label="起运地联系电话" prop="originContactPhone"><el-input v-model.trim="model.originContactPhone" type="tel" maxlength="128" /></el-form-item>
|
|
<el-form-item label="目的地联系电话" prop="destinationContactPhone"><el-input v-model.trim="model.destinationContactPhone" type="tel" maxlength="128" /></el-form-item>
|
|
<el-form-item label="起运详细地址"><el-input v-model.trim="model.originAddress" maxlength="500" /></el-form-item>
|
|
<el-form-item label="目的详细地址"><el-input v-model.trim="model.destinationAddress" maxlength="500" /></el-form-item>
|
|
</div>
|
|
</section>
|
|
<section class="transport-demand-section">
|
|
<h3>货物信息</h3>
|
|
<div class="transport-demand-grid" :class="kind === 'looseboard' ? 'transport-demand-cargo-four' : 'transport-demand-cargo-three'">
|
|
<el-form-item v-if="kind === 'looseboard'" label="商品名称"><el-input v-model.trim="model.productName" maxlength="255" /></el-form-item>
|
|
<el-form-item v-if="kind === 'looseboard'" label="预计托数" prop="estimatedPalletCount"><el-input-number v-model="model.estimatedPalletCount" :min="0" :precision="0" controls-position="right" /></el-form-item>
|
|
<el-form-item v-if="kind === 'truck'" label="件数" prop="packageCount"><el-input-number v-model="model.packageCount" :min="0" :precision="0" controls-position="right" /></el-form-item>
|
|
<el-form-item label="总重量 (kg)" prop="totalWeightKg"><el-input-number v-model="model.totalWeightKg" :min="0" :precision="3" controls-position="right" /></el-form-item>
|
|
<el-form-item label="总体积 (m³)" prop="totalVolumeCbm"><el-input-number v-model="model.totalVolumeCbm" :min="0" :precision="6" controls-position="right" /></el-form-item>
|
|
<el-form-item v-if="kind === 'looseboard'" label="件数" prop="packageCount"><el-input-number v-model="model.packageCount" :min="0" :precision="0" controls-position="right" /></el-form-item>
|
|
</div>
|
|
</section>
|
|
<section class="transport-demand-section">
|
|
<h3>费用与时效</h3>
|
|
<div class="transport-demand-grid">
|
|
<el-form-item label="预算总价" prop="budgetAmount"><div class="transport-demand-budget">
|
|
<el-input-number v-model="model.budgetAmount" :min="0" :precision="2" controls-position="right" />
|
|
<el-select v-model="model.currency" aria-label="预算币种" placeholder="请选择预算币种"><el-option label="USD" value="USD" /><el-option label="CNY" value="CNY" /></el-select>
|
|
</div></el-form-item>
|
|
<div />
|
|
<el-form-item label="取货时间" prop="pickupAt"><el-date-picker v-model="model.pickupAt" type="datetime" format="YYYY-MM-DD HH:mm" time-format="HH:mm" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="请选择取货日期和时间" @change="formRef?.validateField('deliveryAt').catch(() => undefined)" /></el-form-item>
|
|
<el-form-item label="送货时间" prop="deliveryAt"><el-date-picker v-model="model.deliveryAt" type="datetime" format="YYYY-MM-DD HH:mm" time-format="HH:mm" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="请选择送货日期和时间" /></el-form-item>
|
|
<el-form-item class="transport-demand-wide" label="备注"><el-input v-model="model.remark" type="textarea" :rows="3" maxlength="1000" show-word-limit /></el-form-item>
|
|
</div>
|
|
</section>
|
|
<footer class="transport-demand-actions">
|
|
<el-button :disabled="submitting" @click="emit('cancel')">取消</el-button>
|
|
<el-button v-if="canSubmit" type="primary" :loading="submitting" :disabled="disabled" @click="emit('submit')">{{ editing ? '保存修改' : '提交订单' }}</el-button>
|
|
</footer>
|
|
</el-form>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.transport-demand-form { --el-component-size: 36px; width: 100%; max-width: 1180px; margin: 0; background: #fff; }
|
|
.transport-demand-section { padding: 20px 24px 0; border-bottom: 1px solid #e7ebf1; }
|
|
.transport-demand-section h3 { margin: 0 0 16px; color: #27364d; font-size: 14px; font-weight: 600; }
|
|
.transport-demand-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
|
|
.transport-demand-cargo-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.transport-demand-cargo-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
|
.transport-demand-wide { grid-column: 1 / -1; }
|
|
.transport-demand-form :deep(.el-form-item) { min-width: 0; margin-bottom: 18px; }
|
|
.transport-demand-form :deep(.el-form-item__label) { height: auto; padding-bottom: 6px; font-size: 13px; line-height: 20px; }
|
|
.transport-demand-form :deep(.el-input), .transport-demand-form :deep(.el-input-number), .transport-demand-form :deep(.el-select), .transport-demand-form :deep(.el-date-editor) { width: 100%; }
|
|
.transport-demand-budget { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) 100px; gap: 10px; }
|
|
.transport-demand-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px; }
|
|
.transport-demand-actions :deep(.el-button + .el-button) { margin-left: 0; }
|
|
</style>
|