订舱确认时间清空添加

subpkg/bookingConfirm/bookingConfirm.vue

@@ -23,8 +23,16 @@
 					<u-form-item prop="event_date" required label="订舱确认时间" labelWidth="35%" borderBottom>
 						<view @click="onVisibleDate('event_date')">
 							<u-input :disabledColor="'#ffffff'"  disabled border="none" readonly placeholder="请选择确认时间"
-								:value="convertTime(formData.event_date)" />
+								:value="convertTime(formData.event_date)" >
+								<!-- 使用 suffix 插槽添加清除图标 -->
+								<template #suffix>
+								  <view v-if="formData.event_date" @click.stop="clearDate('event_date')">
+								    <u-icon name="close-circle-fill" size="24" color="#909399" />
 								  </view>
+								</template>
+							</u-input>	
+						</view>
+						
 					</u-form-item>
 					
 				   <u-form-item prop="shipowner" required label="船公司" labelWidth="25%" borderBottom>
@@ -48,7 +56,14 @@
 					<u-form-item prop="etd" required label="预计开船时间" labelWidth="35%" borderBottom>
 						<view @click="onVisibleDate('etd')">
 							<u-input :disabledColor="'#ffffff'"  disabled border="none" readonly placeholder="请选择开船时间"
-								:value="convertTime(formData.etd)" />
+								:value="convertTime(formData.etd)" >
+								<!-- 使用 suffix 插槽添加清除图标 -->
+								<template #suffix>
+								  <view v-if="formData.etd" @click.stop="clearDate('etd')">
+								    <u-icon name="close-circle-fill" size="24" color="#909399" />
+								  </view>
+								</template>
+							</u-input>	
 						</view>
 					</u-form-item>
 					<u-form-item prop="destination_port_free_date" required label="目的港免箱期" labelWidth="35%" borderBottom>
@@ -60,37 +75,79 @@
 					<u-form-item prop="estimated_pack_time" required label="预计装箱时间" labelWidth="35%" borderBottom>
 						<view @click="onVisibleDate('estimated_pack_time')">
 							<u-input :disabledColor="'#ffffff'"  disabled border="none" readonly placeholder="请选择装箱时间"
-								:value="convertTime(formData.estimated_pack_time)" />
+								:value="convertTime(formData.estimated_pack_time)" >
+								<!-- 使用 suffix 插槽添加清除图标 -->
+								<template #suffix>
+								  <view v-if="formData.estimated_pack_time" @click.stop="clearDate('estimated_pack_time')">
+								    <u-icon name="close-circle-fill" size="24" color="#909399" />
+								  </view>
+								</template>
+							</u-input>	
 						</view>
 					</u-form-item>
 					<u-form-item prop="eta" required label="预计到港时间" labelWidth="35%" borderBottom>
 						<view @click="onVisibleDate('eta')">
 							<u-input :disabledColor="'#ffffff'"  disabled border="none" readonly placeholder="请选择到港时间"
-								:value="convertTime(formData.eta)" />
+								:value="convertTime(formData.eta)" >
+								<!-- 使用 suffix 插槽添加清除图标 -->
+								<template #suffix>
+								  <view v-if="formData.eta" @click.stop="clearDate('eta')">
+								    <u-icon name="close-circle-fill" size="24" color="#909399" />
+								  </view>
+								</template>
+							</u-input>	
 						</view>
 					</u-form-item>
 					<u-form-item prop="epo"  label="预计开港时间" labelWidth="35%" borderBottom>
                         <view @click="onVisibleDate('epo')">
 							<u-input :disabledColor="'#ffffff'"  disabled border="none" readonly placeholder="请选择开港时间"
-								:value="convertTime(formData.epo)" />
+								:value="convertTime(formData.epo)"  >
+								<!-- 使用 suffix 插槽添加清除图标 -->
+								<template #suffix>
+								  <view v-if="formData.epo" @click.stop="clearDate('epo')">
+								    <u-icon name="close-circle-fill" size="24" color="#909399" />
+								  </view>
+								</template>
+							</u-input>	
 						</view>
 					</u-form-item>
 					<u-form-item prop="epc"  label="预计截港时间" labelWidth="35%" borderBottom>
 						<view @click="onVisibleDate('epc')">
 							<u-input :disabledColor="'#ffffff'"  disabled border="none" readonly placeholder="请选择截港时间"
-								:value="convertTime(formData.epc)" />
+								:value="convertTime(formData.epc)" >
+								<!-- 使用 suffix 插槽添加清除图标 -->
+								<template #suffix>
+								  <view v-if="formData.epc" @click.stop="clearDate('epc')">
+								    <u-icon name="close-circle-fill" size="24" color="#909399" />
+								  </view>
+								</template>
+							</u-input>	
 						</view>
 					</u-form-item>
 					<u-form-item prop="f_etd"  label="驳船ETD" labelWidth="25%" borderBottom>
 						<view @click="onVisibleDate('f_etd')">
 							<u-input :disabledColor="'#ffffff'"  disabled border="none" readonly placeholder="请选择驳船ETD"
-								:value="convertTime(formData.f_etd)" />
+								:value="convertTime(formData.f_etd)" >
+								<!-- 使用 suffix 插槽添加清除图标 -->
+								<template #suffix>
+								  <view v-if="formData.f_etd" @click.stop="clearDate('f_etd')">
+								    <u-icon name="close-circle-fill" size="24" color="#909399" />
+								  </view>
+								</template>
+							</u-input>	
 						</view>
 					</u-form-item>
 					<u-form-item prop="f_eta"  label="驳船ETA" labelWidth="25%" borderBottom>
 						<view @click="onVisibleDate('f_eta')">
 							<u-input :disabledColor="'#ffffff'"  disabled border="none" readonly placeholder="请选择驳船ETA"
-								:value="convertTime(formData.f_eta)" />
+								:value="convertTime(formData.f_eta)" >
+								<!-- 使用 suffix 插槽添加清除图标 -->
+								<template #suffix>
+								  <view v-if="formData.f_eta" @click.stop="clearDate('f_eta')">
+								    <u-icon name="close-circle-fill" size="24" color="#909399" />
+								  </view>
+								</template>
+							</u-input>	
 						</view>
 					</u-form-item>
 					<u-form-item prop="multimodal_transport"  label="拖车运输方式" labelWidth="35%" borderBottom>
@@ -384,6 +441,10 @@
 					this.formData[key] = value
 				}
 			},
+			clearDate(key) {
+			    this.formData[key] = ''; // 清空对应字段
+			    this.$refs.myForm.clearValidate(key); // 清除表单验证状态（如果有）
+			},
 		}
 	}
 </script>