Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
6240992e 1 parent f68a37eb

feat(打卡): 添加计数打卡类型功能 

在打卡详情页新增计数打卡类型相关UI和逻辑
- 添加计数对象选择组件
- 添加计数次数调整组件
- 实现新增计数对象功能
- 通过路由参数传递打卡类型
Inline Side-by-side
Showing 2 changed files with 122 additions and 2 deletions
......@@ -37,6 +37,73 @@
/>
</van-popup>
</div>
<!-- 计数对象 -->
<div v-if="checkinType === 'count'" class="mb-4">
<div class="flex justify-between items-center mb-2 mx-2">
<div class="text-sm font-bold text-gray-700">计数对象</div>
<van-button size="small" type="primary" plain icon="plus" @click="showAddTargetDialog = true" class="!h-7">添加</van-button>
</div>
<div class="bg-gray-50 rounded-lg p-2 max-h-48 overflow-y-auto">
<van-checkbox-group v-model="selectedTargets">
<template v-if="targetList.length > 0">
<div
v-for="(item, index) in targetList"
:key="index"
class="flex items-center justify-between p-3 mb-2 bg-white rounded border border-gray-100 last:mb-0"
@click="toggleTarget(index)"
>
<div class="flex-1">
<div class="font-medium text-gray-800">{{ item.name }}</div>
<div class="text-xs text-gray-500 mt-0.5">{{ item.city }} | {{ item.school }}</div>
</div>
<van-checkbox
:name="item"
:ref="el => setCheckboxRef(el, index)"
@click.stop
/>
</div>
</template>
<div v-else class="text-center py-4 text-gray-400 text-sm">
暂无计数对象，请点击上方添加按钮
</div>
</van-checkbox-group>
</div>
</div>
<!-- 计数次数 -->
<div v-if="checkinType === 'count'" class="mb-4 flex items-center justify-between bg-gray-50 p-3 rounded-lg">
<div class="text-sm font-bold text-gray-700">计数次数</div>
<van-stepper v-model="countValue" min="1" integer input-width="80px" button-size="28px" />
</div>
<!-- 新增计数对象弹框 -->
<van-dialog v-model:show="showAddTargetDialog" title="添加计数对象" show-cancel-button confirmButtonColor="#4caf50" @confirm="confirmAddTarget">
<div class="p-4">
<van-field
v-model="newTargetForm.name"
label="姓名"
placeholder="请输入姓名"
class="border-b border-gray-100"
/>
<van-field
v-model="newTargetForm.city"
label="城市"
placeholder="请输入所在城市"
class="border-b border-gray-100"
/>
<van-field
v-model="newTargetForm.school"
label="学校"
rows="2"
autosize
type="textarea"
maxlength="50"
placeholder="请输入所在学校"
/>
</div>
</van-dialog>
<!-- 文本输入区域 -->
<div class="text-input-area">
<van-field v-model="message" rows="6" autosize type="textarea"
......@@ -146,7 +213,7 @@
</template>
<script setup>
import { ref, computed, onMounted, nextTick } from 'vue'
import { ref, computed, onMounted, nextTick, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getTaskDetailAPI, getUploadTaskInfoAPI } from "@/api/checkin"
import { getTeacherFindSettingsAPI } from '@/api/teacher'
......@@ -182,6 +249,9 @@ const {
// 任务详情数据
const taskDetail = ref({})
// 打卡类型
const checkinType = computed(() => route.query.type)
// 作业选择相关
const showTaskPicker = ref(false)
const selectedTaskText = ref('')
......@@ -199,6 +269,53 @@ const onConfirmTask = ({ selectedOptions }) => {
showTaskPicker.value = false
}
// 计数打卡相关逻辑
const countValue = ref(1)
const selectedTargets = ref([])
// Mock 老师数据
const targetList = ref([
{ name: '张老师', city: '北京', school: '北京大学' },
{ name: '李老师', city: '上海', school: '复旦大学' }
])
const showAddTargetDialog = ref(false)
const newTargetForm = reactive({
name: '',
city: '',
school: ''
})
const checkboxRefs = ref([])
const setCheckboxRef = (el, index) => {
if (el) {
checkboxRefs.value[index] = el
}
}
const toggleTarget = (index) => {
const checkbox = checkboxRefs.value[index]
if (checkbox) {
checkbox.toggle()
}
}
const confirmAddTarget = () => {
if (!newTargetForm.name || !newTargetForm.city || !newTargetForm.school) {
showToast('请完整填写信息')
return
}
// 打印录入信息
console.log('新增计数对象信息:', { ...newTargetForm })
// 添加到列表
targetList.value.push({ ...newTargetForm })
// 重置表单
newTargetForm.name = ''
newTargetForm.city = ''
newTargetForm.school = ''
}
// 作品类型选项
const attachmentTypeOptions = ref([])
......
<!--
* @Date: 2025-05-29 15:34:17
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-12-10 21:32:42
* @LastEditTime: 2025-12-11 10:32:47
* @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue
* @Description: 文件描述
-->
......@@ -584,6 +584,8 @@ const handleCheckinTypeClick = (type) => {
/**
* 跳转到打卡详情页面
* taskDetail.task_type: 打卡类型, [upload 上传附件, count 计数]
* 业务逻辑调整, 需要把打卡类型带到下一页判断
*/
const goToCheckinDetailPage = () => {
const current_date = route.query.date || dayjs().format('YYYY-MM-DD');
......@@ -593,6 +595,7 @@ const goToCheckinDetailPage = () => {
id: route.query.id,
date: current_date,
is_patch: isPatchCheckin.value ? '1' : '0',
type: taskDetail.value.task_type,
}
})
}
......