feat(WorkOrderEdit): 将作业周期选择改为日期范围选择器
重构日期选择组件，将单个日期输入改为开始和结束日期分开选择 添加日期范围验证逻辑，确保结束日期不小于开始日期 更新表单数据结构以支持日期范围存储
This commit is contained in:
parent
7d1b906aae
commit
158a652db7
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue