227 lines
22 KiB
Vue
227 lines
22 KiB
Vue
<script setup lang="ts">
|
||
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
||
import type { FormInstance, FormRules } from 'element-plus'
|
||
import { Eye, Save } from '@lucide/vue'
|
||
import { TRUCK_APPOINTMENT_CURRENCIES, normalizeTruckAppointmentCurrency, type SaveTruckAppointmentRequest, type TruckAppointmentResource } from '../types'
|
||
import { listSuppliers, type Supplier } from '@/modules/suppliers'
|
||
import { getOceanBooking, listOceanBookings, type OceanBookingAllocatedContainer, type OceanBookingDocument, type OceanBookingResource } from '@/modules/ocean-bookings'
|
||
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
|
||
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
|
||
import { isIso6346ContainerNumber } from '../iso6346'
|
||
|
||
const props = defineProps<{ modelValue: SaveTruckAppointmentRequest; resource?: TruckAppointmentResource | null; readonly?: boolean; submitting?: boolean; submitBlocked?: boolean }>()
|
||
const emit = defineEmits<{ 'update:modelValue': [SaveTruckAppointmentRequest]; submit: []; attachments: [] }>()
|
||
const formRef = ref<FormInstance>()
|
||
const relationWarning = ref('')
|
||
const bookingContainersLoading = ref(false)
|
||
const bookingContainersError = ref<ApiErrorDetails | null>(null)
|
||
const bookingDocuments = ref<OceanBookingDocument[]>([])
|
||
const defaults: Partial<SaveTruckAppointmentRequest> = { expectedVersion: 0, currency: 'RMB', payableAmount: '0.00', packageCount: 0, palletCount: 0, transitMinutes: 0 }
|
||
function normalizeDraft(value: SaveTruckAppointmentRequest): SaveTruckAppointmentRequest { return { ...defaults, ...value, currency: normalizeTruckAppointmentCurrency(value.currency) } }
|
||
const draft = reactive<SaveTruckAppointmentRequest>(normalizeDraft(props.modelValue))
|
||
watch(() => props.modelValue, (value) => Object.assign(draft, normalizeDraft(value)), { deep: true })
|
||
watch(draft, (value) => emit('update:modelValue', { ...value }), { deep: true })
|
||
const nonNegative = (label: string, integer = false) => ({ validator: (_rule: unknown, value: unknown, callback: (error?: Error) => void) => {
|
||
if (value === null || value === undefined || value === '') return callback()
|
||
const text = String(value).trim(); const valid = integer ? /^\d+$/.test(text) : /^(?:\d+)(?:\.\d{1,3})?$/.test(text)
|
||
callback(valid ? undefined : new Error(`${label}请输入${integer ? '非负整数' : '非负数字'}`))
|
||
}, trigger: ['blur', 'change'] })
|
||
const phoneRule = (label: string) => ({ validator: (_rule: unknown, value: unknown, callback: (error?: Error) => void) => {
|
||
if (!value || /^[0-9+()\-\s]{6,32}$/.test(String(value).trim())) callback()
|
||
else callback(new Error(`${label}格式不正确`))
|
||
}, trigger: 'blur' })
|
||
const rules: FormRules = {
|
||
oceanBookingId: [{ required: true, message: '请选择已放舱订舱', trigger: 'change' }, { validator: (_rule, value, callback) => {
|
||
if (!(bookings.value.some((item) => item.id === String(value) && item.status === 'RELEASED') || selectedBookingFallback.value?.id === String(value))) return callback(new Error('请选择有效的已放舱订舱'))
|
||
if (bookingContainersError.value) return callback(new Error('订舱资料状态加载失败，请重试'))
|
||
if (!draft.billOfLadingNo?.trim()) return callback(new Error('所选订舱缺少有效提单号'))
|
||
return callback(bookingDocumentReady.value ? undefined : new Error('所选订舱缺少有效的订舱确认文件或提单文件'))
|
||
}, trigger: 'change' }],
|
||
containerBookingId: [{ required: true, message: '请选择该订舱下已录真实集装箱号的柜次', trigger: 'change' }, { validator: (_rule, value, callback) => callback(selectableContainers.value.some((item) => item.containerBookingId === String(value)) || (props.readonly && selectedContainerFallback.value?.id === String(value)) ? undefined : new Error('请选择该订舱下有效的真实柜号柜次')), trigger: 'change' }],
|
||
carrierId: [{ required: true, message: '请选择承运商', trigger: 'change' }, { validator: (_rule, value, callback) => callback(selectableCarriers.value.some((item) => String(item.id) === String(value)) ? undefined : new Error('请选择有效的合作中拖车供应商')), trigger: 'change' }],
|
||
plannedLoadingAt: [{ required: true, message: '请选择预计装箱时间', trigger: 'change' }],
|
||
fleetPhone: [phoneRule('车队电话')], driverPhone: [phoneRule('司机电话')], storePhone: [phoneRule('门店电话')],
|
||
packageCount: [nonNegative('件数', true)], palletCount: [nonNegative('托盘数量', true)], transitMinutes: [nonNegative('在途分钟', true)],
|
||
grossWeightKg: [nonNegative('毛重')], volumeCbm: [nonNegative('体积')], payableAmount: [nonNegative('应付拖车费')],
|
||
}
|
||
const carriers = ref<Supplier[]>([])
|
||
const containers = ref<OceanBookingAllocatedContainer[]>([])
|
||
const bookings = ref<OceanBookingResource[]>([])
|
||
const optionsLoading = ref(false)
|
||
const optionsError = ref('')
|
||
const selectableCarriers = computed(() => carriers.value.filter((item) => (
|
||
item.status === 'ACTIVE'
|
||
)))
|
||
const selectedReleasedBooking = computed(() => bookings.value.find((item) => item.id === draft.oceanBookingId && item.status === 'RELEASED') || null)
|
||
const bookingDocumentReady = computed(() => bookingDocuments.value.some((document) => document.valid && ['BOOKING_CONFIRMATION', 'BILL_OF_LADING'].includes(document.documentType)))
|
||
const selectableContainers = computed(() => containers.value.filter((item) => isIso6346ContainerNumber(item.containerNo)))
|
||
const selectedContainerFallback = computed(() => {
|
||
const id = draft.containerBookingId
|
||
const snapshot = props.resource
|
||
if (!id || selectableContainers.value.some((item) => String(item.containerBookingId) === String(id)) || String(snapshot?.containerBookingId) !== String(id)) return null
|
||
return {
|
||
id: String(id),
|
||
label: `柜次号：${snapshot?.cabinetNo || '待生成'} / 集装箱号：${snapshot?.containerNo || '待录入'}`,
|
||
}
|
||
})
|
||
const selectedBookingFallback = computed(() => {
|
||
const id = draft.oceanBookingId
|
||
const snapshot = props.resource
|
||
if (!id || bookings.value.some((item) => String(item.id) === String(id)) || String(snapshot?.oceanBookingId) !== String(id)) return null
|
||
return { id: String(id), label: snapshot?.oceanBookingNo || '订舱号缺失' }
|
||
})
|
||
function selectCarrier(carrierId: string) { const carrier = selectableCarriers.value.find((item) => String(item.id) === carrierId); draft.carrierId = carrier?.id || null; draft.carrierName = carrier?.name || null }
|
||
function selectContainer(containerId: string) {
|
||
const item = selectableContainers.value.find((entry) => entry.containerBookingId === containerId)
|
||
draft.containerBookingId = item?.containerBookingId || null
|
||
relationWarning.value = ''
|
||
if (!item) {
|
||
draft.loadingPlanId = null
|
||
return
|
||
}
|
||
draft.loadingPlanId = null
|
||
}
|
||
async function loadBookingContainers(bookingId: string) {
|
||
bookingContainersLoading.value = true
|
||
bookingContainersError.value = null
|
||
try {
|
||
const booking = await getOceanBooking(bookingId)
|
||
if (booking.status !== 'RELEASED') {
|
||
containers.value = []
|
||
bookingDocuments.value = []
|
||
draft.containerBookingId = null
|
||
draft.loadingPlanId = null
|
||
bookingContainersError.value = { message: '所选订舱尚未放舱，不能创建拖车预约' }
|
||
return
|
||
}
|
||
const bookingIndex = bookings.value.findIndex((item) => item.id === booking.id)
|
||
if (bookingIndex >= 0) bookings.value[bookingIndex] = booking
|
||
else bookings.value.push(booking)
|
||
draft.warehouseId = booking.warehouseId
|
||
draft.billOfLadingNo = booking.billOfLadingNo
|
||
containers.value = booking.containers || []
|
||
bookingDocuments.value = booking.documents || []
|
||
if (!selectableContainers.value.some((item) => item.containerBookingId === draft.containerBookingId)) {
|
||
draft.containerBookingId = null
|
||
draft.loadingPlanId = null
|
||
}
|
||
} catch (cause) {
|
||
containers.value = []
|
||
bookingDocuments.value = []
|
||
draft.containerBookingId = null
|
||
draft.loadingPlanId = null
|
||
bookingContainersError.value = getApiErrorDetails(cause, '该订舱柜次加载失败，请重试')
|
||
} finally {
|
||
bookingContainersLoading.value = false
|
||
}
|
||
}
|
||
async function selectBooking(bookingId: string) {
|
||
const item = bookings.value.find((entry) => entry.id === bookingId)
|
||
draft.oceanBookingId = item?.id || null
|
||
draft.containerBookingId = null
|
||
draft.loadingPlanId = null
|
||
containers.value = []
|
||
bookingDocuments.value = []
|
||
relationWarning.value = ''
|
||
if (!item) {
|
||
draft.warehouseId = null
|
||
draft.billOfLadingNo = null
|
||
return
|
||
}
|
||
draft.warehouseId = item.warehouseId
|
||
draft.billOfLadingNo = item.billOfLadingNo
|
||
await loadBookingContainers(item.id)
|
||
}
|
||
async function loadOptions() {
|
||
optionsLoading.value = true; optionsError.value = ''
|
||
const results = await Promise.allSettled([
|
||
listSuppliers({ page: 1, size: 200, category: 'TRUCKING', status: 'ACTIVE' }),
|
||
listOceanBookings({ page: 1, size: 200, status: 'RELEASED' }),
|
||
])
|
||
if (results[0].status === 'fulfilled') carriers.value = results[0].value.records.filter((item) => item.category === 'TRUCKING' && item.status === 'ACTIVE')
|
||
if (results[1].status === 'fulfilled') bookings.value = results[1].value.records.filter((item) => item.status === 'RELEASED')
|
||
const failed = ['承运商', '已放舱订舱'].filter((_, index) => results[index]?.status === 'rejected')
|
||
if (failed.length) optionsError.value = `${failed.join('、')}选项加载失败`
|
||
optionsLoading.value = false
|
||
if (draft.oceanBookingId) await loadBookingContainers(String(draft.oceanBookingId))
|
||
}
|
||
async function validate() { return formRef.value?.validate() }
|
||
async function submitForm() { if (props.submitting) return; if (await formRef.value?.validate()) emit('submit') }
|
||
defineExpose({ validate })
|
||
onMounted(() => { void loadOptions() })
|
||
watch(() => props.readonly, (readonly) => { if (!readonly && !bookings.value.length) void loadOptions() })
|
||
</script>
|
||
|
||
<template>
|
||
<el-form ref="formRef" :model="draft" :rules="rules" label-position="top" :disabled="readonly || submitting" class="truck-form">
|
||
<div class="relation-note"><span>拖车预约必须先选择已放舱订舱，再选择该订舱下已录入真实 ISO 集装箱号的柜次；仓库和提单号由订舱冻结资料带入，最终资格仍由服务端校验。</span><div v-if="$slots['relation-note-actions']" class="relation-note__actions"><slot name="relation-note-actions" /></div></div>
|
||
<el-alert v-if="relationWarning" type="warning" :closable="false" show-icon :title="relationWarning" class="relation-alert" />
|
||
<el-alert v-if="optionsError" type="warning" :closable="false" show-icon :title="optionsError" class="relation-alert"><el-button link type="warning" :loading="optionsLoading" @click="loadOptions">重新加载选项</el-button></el-alert>
|
||
<el-row :gutter="16">
|
||
<el-col :xs="24"><el-divider content-position="left">订舱与柜次（必填）</el-divider></el-col>
|
||
<el-col class="relation-column" :xs="24" :sm="12"><el-form-item label="订舱" prop="oceanBookingId"><el-select :model-value="draft.oceanBookingId" filterable placeholder="请先选择已放舱订舱" :loading="optionsLoading" no-data-text="暂无可用的已放舱订舱" style="width:100%" @update:model-value="selectBooking(String($event || ''))"><el-option v-if="selectedBookingFallback" :key="selectedBookingFallback.id" :label="selectedBookingFallback.label" :value="selectedBookingFallback.id" /><el-option v-for="item in bookings" :key="item.id" :label="`${item.bookingNo || '订舱号缺失'}${item.billOfLadingNo ? ` / 提单号：${item.billOfLadingNo}` : ''}`" :value="item.id" /></el-select></el-form-item></el-col>
|
||
<el-col class="relation-column" :xs="24" :sm="12"><el-form-item label="柜次（真实集装箱号）" prop="containerBookingId"><el-select :model-value="draft.containerBookingId" filterable :disabled="!draft.oceanBookingId || bookingContainersLoading" placeholder="请先选择订舱，再选择真实柜号柜次" :loading="bookingContainersLoading" :no-data-text="draft.oceanBookingId ? '该订舱暂无已录真实集装箱号的柜次' : '请先选择订舱'" style="width:100%" @update:model-value="selectContainer(String($event || ''))"><el-option v-if="selectedContainerFallback" :key="selectedContainerFallback.id" :label="selectedContainerFallback.label" :value="selectedContainerFallback.id" :disabled="!readonly" /><el-option v-for="item in selectableContainers" :key="item.containerBookingId" :label="`柜次号：${item.cabinetNo || '待生成'} / 集装箱号：${item.containerNo}`" :value="item.containerBookingId" /></el-select><div v-if="bookingContainersError" class="field-error"><span>{{ bookingContainersError.message }}</span><ApiErrorMeta :details="bookingContainersError" /><el-button link type="primary" :loading="bookingContainersLoading" @click="draft.oceanBookingId && loadBookingContainers(String(draft.oceanBookingId))">重新加载</el-button></div><div v-else-if="draft.oceanBookingId && !bookingContainersLoading && !selectableContainers.length" class="field-hint">只有已分配至该订舱且已录入真实 ISO 集装箱号的柜次可以预约拖车。</div></el-form-item></el-col>
|
||
<el-col :xs="24"><el-divider content-position="left">基本信息</el-divider></el-col>
|
||
<el-col v-if="draft.oceanBookingId && !bookingContainersLoading && !bookingContainersError && !draft.billOfLadingNo?.trim()" :xs="24"><el-alert title="所选订舱缺少有效提单号，暂不能创建或保存拖车预约" type="warning" :closable="false" show-icon /></el-col>
|
||
<el-col v-if="draft.oceanBookingId && !bookingContainersLoading && !bookingContainersError && !bookingDocumentReady" :xs="24"><el-alert title="所选订舱缺少有效的订舱确认文件或提单文件，暂不能创建或保存拖车预约" type="warning" :closable="false" show-icon /></el-col>
|
||
<el-col :xs="24" :sm="12"><el-form-item label="承运商" prop="carrierId"><el-select :model-value="draft.carrierId" filterable clearable placeholder="请选择承运商" :loading="optionsLoading" no-data-text="暂无可用拖车供应商" style="width:100%" @update:model-value="selectCarrier(String($event || ''))"><el-option v-if="draft.carrierId && !selectableCarriers.some((item) => String(item.id) === String(draft.carrierId))" :label="draft.carrierName || '当前承运商（需重新选择）'" :value="String(draft.carrierId)" disabled /><el-option v-for="item in selectableCarriers" :key="String(item.id)" :label="item.name" :value="String(item.id)" /></el-select></el-form-item></el-col>
|
||
<el-col :xs="24" :sm="12"><el-form-item label="预计装箱时间" prop="plannedLoadingAt"><el-date-picker v-model="draft.plannedLoadingAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="请选择预计装箱时间" style="width:100%" /></el-form-item></el-col>
|
||
<el-col :xs="24" :sm="12"><el-form-item label="提单号"><el-input :model-value="draft.billOfLadingNo || ''" disabled placeholder="选择订舱后自动带入" /><div v-if="selectedReleasedBooking" class="field-hint">已从放舱订舱冻结资料带入</div></el-form-item></el-col>
|
||
<el-col :xs="24" :sm="12"><el-form-item label="仓库"><el-input :model-value="selectedReleasedBooking?.warehouseName || resource?.warehouseName || ''" disabled placeholder="选择订舱后自动带入" /></el-form-item></el-col>
|
||
<el-col v-if="resource" :xs="24" :sm="12"><el-form-item label="派车单号"><el-input :model-value="resource.appointmentNo || ''" disabled /></el-form-item></el-col>
|
||
<el-col :xs="24"><el-divider content-position="left">运输与时间计划</el-divider></el-col>
|
||
<el-col :xs="24" :sm="12"><el-form-item label="车队联系人"><el-input v-model="draft.fleetContact" placeholder="请输入车队联系人" /></el-form-item></el-col>
|
||
<el-col :xs="24" :sm="12"><el-form-item label="车队电话" prop="fleetPhone"><el-input v-model="draft.fleetPhone" placeholder="请输入车队联系电话" maxlength="32" show-word-limit /></el-form-item></el-col>
|
||
<el-col :xs="24" :sm="12"><el-form-item label="司机"><el-input v-model="draft.driverName" placeholder="请输入司机姓名" /></el-form-item></el-col>
|
||
<el-col :xs="24" :sm="12"><el-form-item label="司机电话" prop="driverPhone"><el-input v-model="draft.driverPhone" placeholder="请输入司机联系电话" maxlength="32" show-word-limit /></el-form-item></el-col>
|
||
<el-col :xs="24" :sm="12"><el-form-item label="司机身份证号"><el-input v-model="draft.driverIdCard" placeholder="请输入司机身份证号" /></el-form-item></el-col>
|
||
<el-col :xs="24" :sm="12"><el-form-item label="车头号"><el-input v-model="draft.vehicleNo" placeholder="请输入车牌或车头号" /></el-form-item></el-col>
|
||
<el-col v-if="resource" :xs="24" :sm="12"><el-form-item label="实际装箱时间"><el-input :model-value="resource.actualLoadingAt || ''" disabled /></el-form-item></el-col>
|
||
<el-col :xs="24" :sm="8"><el-form-item label="件数" prop="packageCount"><el-input v-model="draft.packageCount" inputmode="numeric" placeholder="请输入件数" /></el-form-item></el-col>
|
||
<el-col :xs="24" :sm="8"><el-form-item label="毛重（kg）" prop="grossWeightKg"><el-input v-model="draft.grossWeightKg" inputmode="decimal" placeholder="请输入毛重" /></el-form-item></el-col>
|
||
<el-col :xs="24" :sm="8"><el-form-item label="体积（m³）" prop="volumeCbm"><el-input v-model="draft.volumeCbm" inputmode="decimal" placeholder="请输入体积" /></el-form-item></el-col>
|
||
<el-col :xs="24" :sm="8"><el-form-item label="托盘数量" prop="palletCount"><el-input v-model="draft.palletCount" inputmode="numeric" placeholder="请输入托盘数量" /></el-form-item></el-col>
|
||
<el-col :xs="24" :sm="8"><el-form-item label="在途分钟" prop="transitMinutes"><el-input v-model="draft.transitMinutes" inputmode="numeric" placeholder="请输入预计在途分钟" /></el-form-item></el-col>
|
||
<el-col :xs="24"><el-divider content-position="left">费用信息</el-divider></el-col>
|
||
<el-col :xs="24" :sm="12"><el-form-item label="应付拖车费" prop="payableAmount"><el-input v-model="draft.payableAmount" placeholder="请输入应付金额"><template #append>{{ draft.currency }}</template></el-input></el-form-item></el-col>
|
||
<el-col :xs="24" :sm="12"><el-form-item label="币种" prop="currency"><el-select v-model="draft.currency" aria-label="币种" placeholder="请选择币种" style="width:100%"><el-option v-for="currency in TRUCK_APPOINTMENT_CURRENCIES" :key="currency" :label="currency" :value="currency" /></el-select></el-form-item></el-col>
|
||
<el-col :xs="24"><el-divider content-position="left">门店信息与备注</el-divider></el-col>
|
||
<el-col :xs="24" :sm="12"><el-form-item label="门店名称"><el-input v-model="draft.storeName" placeholder="请输入目的门店名称" /></el-form-item></el-col>
|
||
<el-col class="wide-column" :xs="24" :sm="12"><el-form-item label="门店地址"><el-input v-model="draft.storeAddress" placeholder="请输入目的门店地址" /></el-form-item></el-col>
|
||
<el-col :xs="24" :sm="12"><el-form-item label="门店联系人"><el-input v-model="draft.storeContact" placeholder="请输入门店联系人" /></el-form-item></el-col>
|
||
<el-col :xs="24" :sm="12"><el-form-item label="门店电话" prop="storePhone"><el-input v-model="draft.storePhone" placeholder="请输入门店联系电话" maxlength="32" show-word-limit /></el-form-item></el-col>
|
||
<el-col :xs="24" :sm="12"><el-form-item label="城市"><el-input v-model="draft.storeCity" placeholder="请输入城市" /></el-form-item></el-col>
|
||
<el-col :xs="24" :sm="12"><el-form-item label="邮编"><el-input v-model="draft.storeZipcode" placeholder="请输入邮政编码" /></el-form-item></el-col>
|
||
<el-col class="wide-column" :xs="24" :sm="12"><el-form-item label="PO"><el-input v-model="draft.poNo" placeholder="请输入采购订单号（可选）" /></el-form-item></el-col>
|
||
<el-col :xs="24"><el-form-item label="备注"><el-input v-model="draft.remark" type="textarea" :rows="3" placeholder="请输入拖车预约备注（可选）" /></el-form-item></el-col>
|
||
</el-row>
|
||
<div class="form-actions"><el-button :disabled="submitting" @click="emit('attachments')"><Eye :size="16" />查看附件引用</el-button><el-button v-if="!readonly" type="primary" :loading="submitting" :disabled="submitBlocked" @click="submitForm"><Save :size="16" />保存</el-button></div>
|
||
</el-form>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.truck-form { padding-bottom: 4px; }
|
||
.relation-note { display:flex; min-height:40px; align-items:center; justify-content:space-between; gap:16px; margin:0 0 8px; padding:6px 8px 6px 10px; border-left:3px solid var(--cc-primary); background:var(--el-fill-color-extra-light); color:var(--cc-muted); font-size:12px; line-height:1.5; }
|
||
.relation-note > span { min-width:0; }
|
||
.relation-note__actions { display:flex; flex:0 0 auto; align-items:center; }
|
||
.relation-note__actions :deep(.el-button) { margin-left:0; }
|
||
.relation-alert { margin-bottom: 16px; }
|
||
.form-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
|
||
:deep(.el-divider) { margin: 14px 0 10px; }
|
||
:deep(.el-divider__text) { color: var(--el-text-color-primary); font-size: 14px; font-weight: 600; }
|
||
:deep(.el-input), :deep(.el-textarea), :deep(.el-date-editor) { max-width: 100%; }
|
||
:deep(.el-select__selected-item), :deep(.el-select-dropdown__item) { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||
.field-error,.field-hint { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;color:var(--cc-muted);font-size:12px;line-height:20px }.field-error{color:var(--el-color-danger)}
|
||
@media (min-width: 1200px) {
|
||
.truck-form :deep(.el-col-sm-12), .truck-form :deep(.el-col-sm-8) { max-width:25%; flex:0 0 25%; }
|
||
.truck-form :deep(.relation-column), .truck-form :deep(.wide-column) { max-width:50%; flex-basis:50%; }
|
||
}
|
||
@media (max-width: 480px) {
|
||
.truck-form { padding-inline: 2px; }
|
||
.relation-note { align-items:flex-start; flex-direction:column; }
|
||
.relation-note__actions { width:100%; }
|
||
.form-actions { position: sticky; bottom: 0; z-index: 2; margin: 8px -2px -4px; padding: 10px 2px; background: var(--el-bg-color); border-top: 1px solid var(--el-border-color-lighter); }
|
||
.form-actions :deep(.el-button) { flex: 1; min-height: 40px; }
|
||
}
|
||
</style>
|