From 7d1b906aaedbf5cc4d022ec0efbcddccbf12e9e4 Mon Sep 17 00:00:00 2001
From: liangbin <15536829364@163.com>
Date: Fri, 16 Jan 2026 13:44:25 +0800
Subject: [PATCH] =?UTF-8?q?feat(WorkOrderEdit):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E4=BD=9C=E4=B8=9A=E5=91=A8=E6=9C=9F=E9=80=89=E6=8B=A9=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E5=B9=B6=E6=9A=B4=E9=9C=B2=E8=A1=A8=E5=8D=95=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=96=B9=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在基础信息组件中添加日期范围选择器
- 暴露getFormData方法供父组件获取表单数据
- 优化样式和代码结构
---
 .../WorkOrderEdit/compoents/BasicsInfo.vue    | 86 ++++++++++++++-----
 src/pages/WorkOrderEdit/index.vue             |  4 +-
 2 files changed, 65 insertions(+), 25 deletions(-)

diff --git a/src/pages/WorkOrderEdit/compoents/BasicsInfo.vue b/src/pages/WorkOrderEdit/compoents/BasicsInfo.vue
index dc3c7d8..29f25e5 100644
--- a/src/pages/WorkOrderEdit/compoents/BasicsInfo.vue
+++ b/src/pages/WorkOrderEdit/compoents/BasicsInfo.vue
@@ -10,49 +10,83 @@
             </view>
             <view class="FormItem">
                 <view class="FormLableBox mustBox">作业地点</view>
-                <view class="MapBox" id="tianditu-map">
-                </view>
+                <view class="MapBox" id="tianditu-map"> </view>
                 <view class="FormValueBox">
                     <u-input v-model="formData.SpecificAddress" placeholder="请输入具体楼层或区域"></u-input>
                 </view>
             </view>
+            <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>
+                    <u-calendar :show="showTimeBox" mode="range"  :minDate="minDate"
+                        @confirm="HandlePeriodConfirm" @close="HandleCloseTimeBox" ></u-calendar>
+                </view>
+            </view>
         </view>
     </view>
 </template>
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, defineExpose } from "vue";
 
 // 地图实例
 let mapEntity = null;
 // 当前标记点
 let currentMarker = null;
 
+const showTimeBox = ref(false); // 是否显示时间选择框
+const minDate = ref('1900-01-01'); // 最小可选日期（允许选择过去的日期）
+
 // 表单信息
 const formData = ref({
-    ProjectName: '', // 项目名称
-    Location: '', // 作业地点（经纬度）
-    SpecificAddress: '', // 具体楼层或区域
-})
+    ProjectName: "", // 项目名称
+    Location: "", // 作业地点（经纬度）
+    SpecificAddress: "", // 具体楼层或区域
+    period: "", // 作业周期
+});
+
+// 暴露方法给父组件调用
+defineExpose({
+    getFormData: () => formData.value,
+});
 
 // 初始化地图
 onMounted(() => {
-    // 确保 DOM 渲染完成后初始化地图
     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 HandleCloseTimeBox = () => {
+    showTimeBox.value = false;
+    formData.value.period = "";
+};
+
+// 初始化天地图
 const initTiandituMap = () => {
     try {
         // 1. 创建地图容器
-        const container = document.getElementById('tianditu-map');
+        const container = document.getElementById("tianditu-map");
         if (!container) {
-            console.error('地图容器未找到');
+            console.error("地图容器未找到");
             return;
         }
-
         // 2. 初始化地图（中心点设为北京，缩放级别12）
-        mapEntity = new T.Map('tianditu-map');
+        mapEntity = new T.Map("tianditu-map");
         const centerPoint = new T.LngLat(116.403874, 39.914885);
         mapEntity.centerAndZoom(centerPoint, 12);
 
@@ -61,13 +95,13 @@ const initTiandituMap = () => {
         mapEntity.enableScrollWheelZoom();
 
         // 4. 添加天地图图层（矢量图层 + 注记图层）
-        const vecLayer = new T.TileLayer('vec_w', { key: '你的天地图Key' });
-        const cvaLayer = new T.TileLayer('cva_w', { key: '你的天地图Key' });
+        const vecLayer = new T.TileLayer("vec_w", { key: "你的天地图Key" });
+        const cvaLayer = new T.TileLayer("cva_w", { key: "你的天地图Key" });
         const layerGroup = new T.LayerGroup([vecLayer, cvaLayer]);
         mapEntity.addLayer(layerGroup);
 
         // 5. 添加地图点击事件监听器
-        mapEntity.addEventListener('click', (e) => {
+        mapEntity.addEventListener("click", (e) => {
             const lng = e.lnglat.getLng();
             const lat = e.lnglat.getLat();
 
@@ -84,15 +118,14 @@ const initTiandituMap = () => {
             // 将经纬度存储到Location字段
             formData.value.Location = `${lng},${lat}`;
 
-            console.log('标记点位置：', lng, lat);
+            console.log("标记点位置：", lng, lat);
         });
 
-        console.log('天地图初始化成功');
+        console.log("天地图初始化成功");
     } catch (error) {
-        console.error('天地图初始化失败：', error);
+        console.error("天地图初始化失败：", error);
     }
-}
-
+};
 
 
 </script>
@@ -105,7 +138,7 @@ const initTiandituMap = () => {
 }
 
 .mustBox::after {
-    content: '*';
+    content: "*";
     color: red;
     font-size: 30rpx;
     margin-left: 10rpx;
@@ -133,7 +166,14 @@ const initTiandituMap = () => {
         .FormValueBox {
             font-size: 30rpx;
             margin-top: 20rpx;
+
+            .date-picker-box {
+                display: flex;
+                align-items: center;
+                gap: 20rpx;
+                flex: 1;
+            }
         }
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/pages/WorkOrderEdit/index.vue b/src/pages/WorkOrderEdit/index.vue
index ecf37b3..6c39978 100644
--- a/src/pages/WorkOrderEdit/index.vue
+++ b/src/pages/WorkOrderEdit/index.vue
@@ -15,7 +15,7 @@
             </view>
         </view>
         <view class="ContentBox">
-            <BasicsInfo :ref="basicsInfoRef"></BasicsInfo>
+            <BasicsInfo ref="basicsInfoRef"></BasicsInfo>
         </view>
         <view class="FootBox" v-for="item in stepList" :key="item.id">
             <u-button :text="item.PrevBtnName"  type="info"></u-button>
@@ -53,7 +53,7 @@ const stepList = ref([
 
 // 点击下一步
 const nextStep = () => {
-    console.log(basicsInfoRef.value);
+    console.log(basicsInfoRef.value.getFormData());
 }