feat(WorkOrderEdit): 添加作业周期选择功能并暴露表单数据方法

- 在基础信息组件中添加日期范围选择器
- 暴露getFormData方法供父组件获取表单数据
- 优化样式和代码结构

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>
+</style>

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());
 }