hookehuyr

feat(教师表单): 优化时间选择器交互并完善表单提交逻辑

重构时间选择器点击事件为独立函数,提高代码可维护性
扩展最大可选日期至2035年
移除未使用的活动和小组成员选择代码
完善表单提交数据格式,包含章节选择和日期格式化
File mode changed
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2025-01-20 10:00:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-06-23 11:38:17
* @LastEditTime: 2025-06-23 11:54:22
* @FilePath: /mlaj/src/views/teacher/formPage.vue
* @Description: 教师作业新增表单页面
-->
......@@ -78,7 +78,7 @@
<div class="time-item">
<van-icon name="calendar-o" class="time-icon" />
<span class="time-label">开始日期:</span>
<span class="time-value" @click="showStartTimePicker = true">
<span class="time-value" @click="openStartTimePicker">
{{ startTimeDisplay || '2025-05-13' }}
</span>
<van-icon name="arrow" class="arrow-icon" />
......@@ -88,7 +88,7 @@
<div class="time-item">
<van-icon name="calendar-o" class="time-icon" />
<span class="time-label">结束日期:</span>
<span class="time-value" @click="showEndTimePicker = true">
<span class="time-value" @click="openEndTimePicker">
{{ endTimeDisplay || '2025-06-13' }}
</span>
<van-icon name="arrow" class="arrow-icon" />
......@@ -132,7 +132,7 @@
<van-icon name="arrow" class="arrow-icon" @click="showChapterPicker = true" />
</div>
</div>
<div class="select-row">
<!-- <div class="select-row">
<div class="select-item">
<van-icon name="fire-o" class="select-icon" />
<span class="select-label">所在活动:</span>
......@@ -147,7 +147,7 @@
<span class="select-value" @click="showGroupPicker = true">{{ formData.group_name || '请选择小组' }}</span>
<van-icon name="arrow" class="arrow-icon" @click="showGroupPicker = true" />
</div>
</div>
</div> -->
</div>
<!-- 提交按钮 -->
......@@ -365,7 +365,7 @@ const showGroupPicker = ref(false);
const startDate = ref(['2024', '01', '01']);
const endDate = ref(['2024', '12', '31']);
const minDate = new Date(2020, 0, 1);
const maxDate = new Date(2030, 11, 31);
const maxDate = new Date(2035, 11, 31);
// 选项数据
const typeOptions = ref([
......@@ -573,6 +573,22 @@ const onFrequencyConfirm = (option) => {
};
/**
* 打开开始时间选择器
*/
const openStartTimePicker = () => {
// 同步当前的开始时间到选择器
if (formData.value.start_time) {
const date = new Date(formData.value.start_time);
startDate.value = [
date.getFullYear().toString(),
(date.getMonth() + 1).toString().padStart(2, '0'),
date.getDate().toString().padStart(2, '0')
];
}
showStartTimePicker.value = true;
};
/**
* 开始时间确认
*/
const onStartTimeConfirm = () => {
......@@ -582,6 +598,22 @@ const onStartTimeConfirm = () => {
};
/**
* 打开结束时间选择器
*/
const openEndTimePicker = () => {
// 同步当前的结束时间到选择器
if (formData.value.end_time) {
const date = new Date(formData.value.end_time);
endDate.value = [
date.getFullYear().toString(),
(date.getMonth() + 1).toString().padStart(2, '0'),
date.getDate().toString().padStart(2, '0')
];
}
showEndTimePicker.value = true;
};
/**
* 结束时间确认
*/
const onEndTimeConfirm = () => {
......@@ -813,8 +845,23 @@ const handleSubmit = async (values) => {
return;
}
// 准备提交的数据,包含课程章节选择和格式化的日期
const submitData = {
...formData.value,
// 格式化日期为YYYY-MM-DD格式
start_time: formatDateTime(formData.value.start_time),
end_time: formatDateTime(formData.value.end_time),
// 添加课程章节选择数据
selected_chapters: selectedChapters.value.map(chapter => ({
id: chapter.id,
name: chapter.name,
start_time: formatDateTime(chapter.startTime),
end_time: formatDateTime(chapter.endTime)
}))
};
// 这里可以调用API提交数据
console.log('提交的表单数据:', formData.value);
console.log('提交的表单数据:', submitData);
// 模拟API调用
await new Promise(resolve => setTimeout(resolve, 1000));
......@@ -822,7 +869,7 @@ const handleSubmit = async (values) => {
showToast('保存成功');
// 返回上一页或跳转到列表页
$router.back();
// $router.back();
} catch (error) {
console.error('提交失败:', error);
......