hookehuyr

refactor(CheckinDetailPage): 优化作业选择和目标添加逻辑

移除未使用的selectedTaskValue绑定,改为直接使用作业ID
将添加按钮点击事件提取为独立方法openAddTargetDialog
调整计数对象加载时机,在作业确认时直接加载
......@@ -31,7 +31,7 @@
<van-field v-model="selectedTaskText" is-link readonly label="选择作业" placeholder="请选择本次打卡的作业"
@click="showTaskPicker = true" class="rounded-lg border border-gray-100" />
<van-popup v-model:show="showTaskPicker" round position="bottom">
<van-picker v-model="selectedTaskValue" :columns="taskOptions" @cancel="showTaskPicker = false"
<van-picker :columns="taskOptions" @cancel="showTaskPicker = false"
@confirm="onConfirmTask" />
</van-popup>
</template>
......@@ -41,7 +41,7 @@
<div class="flex justify-between items-center mb-2 mx-2">
<div class="text-sm font-bold text-gray-700">{{ dynamicFieldText }}对象</div>
<van-button size="small" type="primary" plain icon="plus"
@click="showAddTargetDialog = true" class="!h-7">添加</van-button>
@click="openAddTargetDialog" class="!h-7">添加</van-button>
</div>
<div class="bg-gray-50 rounded-lg p-2">
......@@ -242,7 +242,7 @@ const taskType = computed(() => route.query.task_type)
const showTaskPicker = ref(false)
const taskOptions = ref([])
// TODO: 模拟任务选项数据
// TODO: 模拟任务选项数据, 不同作业有不同的计数对象, 这里根据作业ID模拟不同的计数对象
const mockData = {
'task1': [
{ name: '张老师', city: '北京', school: '北京大学' },
......@@ -269,6 +269,7 @@ const fetchTargetList = async (subTaskId) => {
}, 500)
}
// 确认作业选择
const onConfirmTask = ({ selectedOptions }) => {
const option = selectedOptions[0]
selectedTaskText.value = option.text
......@@ -282,12 +283,13 @@ const onConfirmTask = ({ selectedOptions }) => {
}
}
// 监听作业选择变化
watch(selectedTaskValue, (newVal) => {
if (taskType.value === 'count' && newVal && newVal.length > 0) {
fetchTargetList(newVal[0])
}
})
// 监听作业选择变化, 当选中的作业ID变化时, 查询对应的计数对象
// watch(selectedTaskValue, (newVal) => {
// if (taskType.value === 'count' && newVal && newVal.length > 0) {
// // fetchTargetList(newVal[0])
// console.warn('选中的作业ID:', newVal[0]);
// }
// })
/********* TODO: *******/
......@@ -298,7 +300,7 @@ const selectedTargets = ref([])
const targetList = ref([])
const showAddTargetDialog = ref(false)
// 动态表单字段 Mock 数据
// TODO: 动态表单字段 Mock 数据
const dynamicFormFields = ref([
{ id: 'name', label: '姓名', type: 'text', required: true },
{ id: 'city', label: '城市', type: 'text', required: true },
......@@ -315,6 +317,10 @@ const toggleTarget = (item) => {
}
}
const openAddTargetDialog = () => {
showAddTargetDialog.value = true;
}
/**
* 确认添加对象
* @param {Object} formData - 表单数据
......@@ -322,6 +328,8 @@ const toggleTarget = (item) => {
const confirmAddTarget = (formData) => {
console.log(`新增${dynamicFieldText.value}对象信息:`, formData)
// TODO: 这里根据实际情况调整动态字段的处理逻辑, 暂时没有正式数据, 要等一等.
// 添加到列表(适配原有的数据结构)
targetList.value.push({
name: formData.name,
......@@ -808,7 +816,7 @@ onMounted(async () => {
}
// 初始化选中的子任务ID
selectedTaskValue.value = [+route.query.subtask_id]
selectedTaskValue.value = route.query.subtask_id ? [+route.query.subtask_id] : []
// 获取小作业列表
const subtask_list = await getSubtaskListAPI({ task_id: route.query.task_id, date: current_date })
......@@ -828,6 +836,11 @@ onMounted(async () => {
selectedTaskText.value = option.text
isMakeup.value = !!option.is_makeup
}
// 如果是计数打卡,根据选中的作业ID查询计数对象
if (taskType.value === 'count') {
fetchTargetList(option.value)
}
}
// 初始化编辑数据
......