83 lines
7.0 KiB
Vue
83 lines
7.0 KiB
Vue
<script setup lang="ts">
|
|
import '@/styles/adminWorkbench.css'
|
|
import '@/styles/adminDensity.css'
|
|
import { computed, ref } from 'vue'
|
|
import type { FormInstance } from 'element-plus'
|
|
import FormSection from '@/shared/components/FormSection.vue'
|
|
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 admin-density admin-workbench density-form" :model="model" :rules="rules" label-position="top" :disabled="disabled || submitting">
|
|
<slot name="customer" />
|
|
<FormSection class="density-form-section" title="运输信息">
|
|
<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="kind === 'truck' ? 'B点取货地' : '起运地'" prop="origin"><el-input v-model.trim="model.origin" maxlength="255" placeholder="城市 / 港口 / 州" /></el-form-item>
|
|
<el-form-item :label="kind === 'truck' ? 'C点送达地' : '目的地'" prop="destination"><el-input v-model.trim="model.destination" maxlength="255" placeholder="城市 / 州" /></el-form-item>
|
|
<el-form-item :label="kind === 'truck' ? 'B点联系人' : '起运地联系人'" prop="originContactName"><el-input v-model.trim="model.originContactName" maxlength="128" /></el-form-item>
|
|
<el-form-item :label="kind === 'truck' ? 'C点联系人' : '目的地联系人'" prop="destinationContactName"><el-input v-model.trim="model.destinationContactName" maxlength="128" /></el-form-item>
|
|
<el-form-item :label="kind === 'truck' ? 'B点联系电话' : '起运地联系电话'" prop="originContactPhone"><el-input v-model.trim="model.originContactPhone" type="tel" maxlength="128" /></el-form-item>
|
|
<el-form-item :label="kind === 'truck' ? 'C点联系电话' : '目的地联系电话'" prop="destinationContactPhone"><el-input v-model.trim="model.destinationContactPhone" type="tel" maxlength="128" /></el-form-item>
|
|
<el-form-item :label="kind === 'truck' ? 'B点取货地址' : '起运详细地址'"><el-input v-model.trim="model.originAddress" maxlength="500" /></el-form-item>
|
|
<el-form-item :label="kind === 'truck' ? 'C点送达地址' : '目的详细地址'"><el-input v-model.trim="model.destinationAddress" maxlength="500" /></el-form-item>
|
|
</div>
|
|
</FormSection>
|
|
<FormSection class="density-form-section" title="货物信息">
|
|
<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="estimatedPalletCount"><el-input-number v-model="model.estimatedPalletCount" :min="1" :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>
|
|
</FormSection>
|
|
<FormSection class="density-form-section" title="费用与时效">
|
|
<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="kind === 'truck' ? 'B点取货时间' : '取货时间'" 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="kind === 'truck' ? 'C点送达时间' : '送货时间'" 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>
|
|
</FormSection>
|
|
<footer class="transport-demand-actions density-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 { width: 100%; min-width: 0; margin: 0; }
|
|
.transport-demand-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--admin-space-6); }
|
|
.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; }
|
|
.transport-demand-budget { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) 100px; gap: var(--admin-space-3); }
|
|
.transport-demand-actions { justify-content: flex-end; flex-wrap: wrap; padding: var(--admin-space-5) 0; }
|
|
</style>
|