From 158a652db74012522ffb771dc4a6ac99974b8d6d Mon Sep 17 00:00:00 2001
From: liangbin <15536829364@163.com>
Date: Fri, 16 Jan 2026 14:06:19 +0800
Subject: [PATCH] =?UTF-8?q?feat(WorkOrderEdit):=20=E5=B0=86=E4=BD=9C?=
 =?UTF-8?q?=E4=B8=9A=E5=91=A8=E6=9C=9F=E9=80=89=E6=8B=A9=E6=94=B9=E4=B8=BA?=
 =?UTF-8?q?=E6=97=A5=E6=9C=9F=E8=8C=83=E5=9B=B4=E9=80=89=E6=8B=A9=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构日期选择组件，将单个日期输入改为开始和结束日期分开选择
添加日期范围验证逻辑，确保结束日期不小于开始日期
更新表单数据结构以支持日期范围存储
---
 .../WorkOrderEdit/compoents/BasicsInfo.vue    | 122 ++++++++++++++----
 1 file changed, 98 insertions(+), 24 deletions(-)

diff --git a/src/pages/WorkOrderEdit/compoents/BasicsInfo.vue b/src/pages/WorkOrderEdit/compoents/BasicsInfo.vue
index 29f25e5..9433b79 100644
--- a/src/pages/WorkOrderEdit/compoents/BasicsInfo.vue
+++ b/src/pages/WorkOrderEdit/compoents/BasicsInfo.vue
@@ -18,34 +18,65 @@
             <view class="FormItem">
                 <view class="FormLableBox mustBox">作业周期</view>
                 <view class="FormValueBox">
-                    <view class="date-picker-box">
-                        <u-input v-model="formData.period" placeholder="请选择作业周期" readonly @focus="showTimeBox = true"></u-input>
-                        <u-button style="margin-left: 5rpx;width: 80rpx;" type="primary" size="small" @click="showTimeBox = true">选择日期</u-button>
+                    <view class="date-range-box">
+                        <view class="date-item">
+                            <u-input v-model="startDateText" placeholder="开始日期" readonly>
+                                <template #suffix>
+                                    <u-button type="primary" size="small" @click="showStartDatePicker = true">选择日期</u-button>
+                                </template>
+                            </u-input>
+                            <up-datetime-picker :show="showStartDatePicker" v-model="startDate" mode="date"
+                                :minDate="minTimestamp" @confirm="HandleStartDateConfirm"
+                                @cancel="showStartDatePicker = false"></up-datetime-picker>
+                        </view>
+                        <view class="date-separator">至</view>
+                        <view class="date-item">
+                            <u-input v-model="endDateText" placeholder="结束日期" readonly>
+                                <template #suffix>
+                                    <u-button type="primary" size="small" @click="showEndDatePicker = true">选择日期</u-button>
+                                </template>
+                            </u-input>
+                            <up-datetime-picker :show="showEndDatePicker" v-model="endDate" mode="date"
+                                :minDate="minTimestamp" @confirm="HandleEndDateConfirm"
+                                @cancel="showEndDatePicker = false"></up-datetime-picker>
+                        </view>
                     </view>
-                    <u-calendar :show="showTimeBox" mode="range"  :minDate="minDate"
-                        @confirm="HandlePeriodConfirm" @close="HandleCloseTimeBox" ></u-calendar>
                 </view>
             </view>
         </view>
     </view>
 </template>
 <script setup>
-import { ref, onMounted, defineExpose } from "vue";
+import { ref, computed, onMounted, defineExpose } from "vue";
+import dayjs from 'dayjs';
 
 // 地图实例
 let mapEntity = null;
 // 当前标记点
 let currentMarker = null;
 
-const showTimeBox = ref(false); // 是否显示时间选择框
-const minDate = ref('1900-01-01'); // 最小可选日期（允许选择过去的日期）
+const showStartDatePicker = ref(false); // 是否显示开始日期选择器
+const showEndDatePicker = ref(false); // 是否显示结束日期选择器
+const startDate = ref(null); // 开始日期时间戳
+const endDate = ref(null); // 结束日期时间戳
+const startDateText = ref(''); // 开始日期显示文本
+const endDateText = ref(''); // 结束日期显示文本
+const minTimestamp = ref(dayjs('2020-01-01').valueOf()); // 最小可选日期时间戳
+
+// 结束日期的最小时间戳（不能小于开始日期）
+const endDateMinTimestamp = computed(() => {
+    if (startDate.value) {
+        return startDate.value;
+    }
+    return minTimestamp.value;
+});
 
 // 表单信息
 const formData = ref({
     ProjectName: "", // 项目名称
     Location: "", // 作业地点（经纬度）
     SpecificAddress: "", // 具体楼层或区域
-    period: "", // 作业周期
+    period: [], // 作业周期 [开始日期, 结束日期]
 });
 
 // 暴露方法给父组件调用
@@ -58,22 +89,56 @@ onMounted(() => {
     initTiandituMap();
 });
 
-// 处理周期确认事件
-const HandlePeriodConfirm = (dates) => {
-    console.log('选中的日期范围：', dates);
-    if (dates && dates.length > 0) {
-        const startDate = dates[0];
-        const endDate = dates[dates.length - 1] || dates[0];
-        formData.value.period = `${startDate} 至 ${endDate}`;
-        console.log('作业周期：', formData.value.period);
-    }
-    showTimeBox.value = false;
+// 处理开始日期确认事件
+const HandleStartDateConfirm = (e) => {
+    console.log('选中的开始日期：', e);
+    
+    // 如果没有选择日期，使用默认值
+    const selectedDate = (e.value && dayjs(e.value).isValid()) ? e.value : minTimestamp.value;
+    
+    startDateText.value = dayjs(selectedDate).format('YYYY-MM-DD');
+    startDate.value = selectedDate;
+    endDateText.value = '';
+    endDate.value = null;
+    showStartDatePicker.value = false;
+    UpdatePeriod();
 };
 
-// 处理关闭时间选择框事件
-const HandleCloseTimeBox = () => {
-    showTimeBox.value = false;
-    formData.value.period = "";
+// 处理结束日期确认事件
+const HandleEndDateConfirm = (e) => {
+    console.log('选中的结束日期：', e);
+    
+    // 如果没有选择日期，使用默认值
+    const selectedDate = (e.value && dayjs(e.value).isValid()) ? e.value : minTimestamp.value;
+    
+    // 检查是否选择了开始日期
+    if (startDate.value && dayjs(selectedDate).isBefore(dayjs(startDate.value))) {
+        uni.showToast({
+            title: '结束日期不能小于开始日期',
+            icon: 'none',
+            duration: 2000
+        });
+        return;
+    }
+    
+    endDateText.value = dayjs(selectedDate).format('YYYY-MM-DD');
+    endDate.value = selectedDate;
+    showEndDatePicker.value = false;
+    UpdatePeriod();
+};
+
+// 更新作业周期
+const UpdatePeriod = () => {
+    if (startDateText.value && endDateText.value) {
+        formData.value.period = [startDateText.value, endDateText.value];
+    } else if (startDateText.value) {
+        formData.value.period = [startDateText.value, ''];
+    } else if (endDateText.value) {
+        formData.value.period = ['', endDateText.value];
+    } else {
+        formData.value.period = [];
+    }
+    console.log('作业周期：', formData.value.period);
 };
 
 // 初始化天地图
@@ -167,11 +232,20 @@ const initTiandituMap = () => {
             font-size: 30rpx;
             margin-top: 20rpx;
 
-            .date-picker-box {
+            .date-range-box {
                 display: flex;
                 align-items: center;
                 gap: 20rpx;
                 flex: 1;
+
+                .date-item {
+                    flex: 1;
+                }
+
+                .date-separator {
+                    color: #999;
+                    font-size: 28rpx;
+                }
             }
         }
     }