hookehuyr

feat(teacher): 优化教师打卡和作业表单页面

- 在打卡页面添加顶部间距并区分打卡和作业按钮功能
- 重构表单页面,根据类型动态显示标题并简化代码结构
- 移除不必要的类型选择字段,默认根据路由参数设置类型
<!--
* @Date: 2025-05-29 15:34:17
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-06-20 10:40:58
* @LastEditTime: 2025-06-20 10:56:22
* @FilePath: /mlaj/src/views/teacher/checkinPage.vue
* @Description: 文件描述
-->
......@@ -21,13 +21,13 @@
@select="onSelectDay"
@click-subtitle="onClickSubtitle">
</van-calendar>
<div style="padding: 0 1rem;">
<div style="padding: 0 1rem; margin-top: 1rem;">
<van-row gutter="15">
<van-col span="12">
<van-button type="primary" block icon="photo" @click="handleAdd">安排打卡</van-button>
<van-button type="primary" block icon="photo" @click="handleAdd('checkin')">安排打卡</van-button>
</van-col>
<van-col span="12">
<van-button type="primary" block icon="video">设置作业</van-button>
<van-button type="primary" block icon="video" @click="handleAdd('homework')">设置作业</van-button>
</van-col>
</van-row>
</div>
......@@ -817,12 +817,12 @@ const formatData = (data) => {
return formattedData;
}
const handleAdd = () => {
const handleAdd = (type) => {
router.push({
path: '/teacher/form',
query: {
post_id: route.query.id,
type: 'image',
type: type,
status: 'add',
}
})
......
......@@ -2,12 +2,12 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2025-01-20 10:00:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-06-18 11:43:03
* @LastEditTime: 2025-06-20 10:58:03
* @FilePath: /mlaj/src/views/teacher/formPage.vue
* @Description: 教师作业新增表单页面
-->
<template>
<AppLayout title="新增作业">
<AppLayout>
<div class="bg-gradient-to-br from-green-50 via-green-100/30 to-blue-50/30 min-h-screen">
<div class="px-4 py-6">
<FrostedGlass class="rounded-xl overflow-hidden">
......@@ -15,18 +15,11 @@
<van-form @submit="handleSubmit">
<van-cell-group inset>
<!-- 作业名称 -->
<van-field
v-model="formData.homework_name"
name="homework_name"
label="作业名称"
placeholder="请输入作业名称"
required
:border="false"
:rules="[{ required: true, message: '请输入作业名称' }]"
/>
<van-field v-model="formData.homework_name" name="homework_name" label="作业名称" placeholder="请输入作业名称"
required :border="false" :rules="[{ required: true, message: '请输入作业名称' }]" />
<!-- 类型 -->
<van-field
<!-- <van-field
v-model="formData.type"
is-link
readonly
......@@ -35,125 +28,48 @@
placeholder="请选择类型"
:border="false"
@click="showTypePicker = true"
/>
/> -->
<!-- 频次 -->
<van-field
v-model="formData.frequency"
is-link
readonly
name="frequency"
label="频次"
placeholder="请选择频次"
:border="false"
@click="showFrequencyPicker = true"
/>
<van-field v-model="formData.frequency" is-link readonly name="frequency" label="频次" placeholder="请选择频次"
:border="false" @click="showFrequencyPicker = true" />
<!-- 目标总数 -->
<van-field
v-model="formData.target_count"
type="number"
name="target_count"
label="目标总数"
:border="false"
placeholder="请输入目标数量"
/>
<van-field v-model="formData.target_count" type="number" name="target_count" label="目标总数"
:border="false" placeholder="请输入目标数量" />
<!-- 开始时间 -->
<van-field
v-model="startTimeDisplay"
is-link
readonly
name="start_time"
label="开始时间"
placeholder="请选择开始时间"
:border="false"
@click="showStartTimePicker = true"
/>
<van-field v-model="startTimeDisplay" is-link readonly name="start_time" label="开始时间"
placeholder="请选择开始时间" :border="false" @click="showStartTimePicker = true" />
<!-- 结束时间 -->
<van-field
v-model="endTimeDisplay"
is-link
readonly
name="end_time"
label="结束时间"
placeholder="请选择结束时间"
:border="false"
@click="showEndTimePicker = true"
/>
<van-field v-model="endTimeDisplay" is-link readonly name="end_time" label="结束时间" placeholder="请选择结束时间"
:border="false" @click="showEndTimePicker = true" />
<!-- 课程 -->
<van-field
v-model="formData.course"
is-link
readonly
name="course"
label="课程"
placeholder="请选择课程"
:border="false"
@click="showCoursePicker = true"
/>
<van-field v-model="formData.course" is-link readonly name="course" label="课程" placeholder="请选择课程"
:border="false" @click="showCoursePicker = true" />
<!-- 活动 -->
<van-field
v-model="formData.activity"
is-link
readonly
name="activity"
label="活动"
placeholder="请选择活动"
:border="false"
@click="showActivityPicker = true"
/>
<van-field v-model="formData.activity" is-link readonly name="activity" label="活动" placeholder="请选择活动"
:border="false" @click="showActivityPicker = true" />
<!-- 年级 -->
<van-field
v-model="formData.grade"
is-link
readonly
name="grade"
label="年级"
placeholder="请选择年级"
:border="false"
@click="showGradePicker = true"
/>
<van-field v-model="formData.grade" is-link readonly name="grade" label="年级" placeholder="请选择年级"
:border="false" @click="showGradePicker = true" />
<!-- 班级 -->
<van-field
v-model="formData.class_name"
is-link
readonly
name="class_name"
label="班级"
placeholder="请选择班级"
:border="false"
@click="showClassPicker = true"
/>
<van-field v-model="formData.class_name" is-link readonly name="class_name" label="班级"
placeholder="请选择班级" :border="false" @click="showClassPicker = true" />
<!-- 小组 -->
<van-field
v-model="formData.group_name"
is-link
readonly
name="group_name"
label="小组"
placeholder="请选择小组"
:border="false"
@click="showGroupPicker = true"
/>
<van-field v-model="formData.group_name" is-link readonly name="group_name" label="小组"
placeholder="请选择小组" :border="false" @click="showGroupPicker = true" />
</van-cell-group>
<!-- 提交按钮 -->
<div style="margin: 16px;">
<van-button
native-type="submit"
type="primary"
block
round
:loading="loading"
class="bg-green-500 hover:bg-green-600 transition-colors"
>
<van-button native-type="submit" type="primary" block round :loading="loading">
确认并保存
</van-button>
</div>
......@@ -165,63 +81,33 @@
<!-- 类型选择器 -->
<van-popup v-model:show="showTypePicker" position="bottom">
<van-picker
:columns="typeOptions"
@confirm="onTypeConfirm"
@cancel="showTypePicker = false"
/>
<van-picker :columns="typeOptions" @confirm="onTypeConfirm" @cancel="showTypePicker = false" />
</van-popup>
<!-- 频次选择器 -->
<van-popup v-model:show="showFrequencyPicker" position="bottom">
<van-picker
:columns="frequencyOptions"
@confirm="onFrequencyConfirm"
@cancel="showFrequencyPicker = false"
/>
<van-picker :columns="frequencyOptions" @confirm="onFrequencyConfirm" @cancel="showFrequencyPicker = false" />
</van-popup>
<!-- 开始时间选择器 -->
<van-popup v-model:show="showStartTimePicker" position="bottom">
<van-date-picker
v-model="startDate"
title="选择开始时间"
:min-date="minDate"
:max-date="maxDate"
@confirm="onStartTimeConfirm"
@cancel="showStartTimePicker = false"
/>
<van-date-picker v-model="startDate" title="选择开始时间" :min-date="minDate" :max-date="maxDate"
@confirm="onStartTimeConfirm" @cancel="showStartTimePicker = false" />
</van-popup>
<!-- 结束时间选择器 -->
<van-popup v-model:show="showEndTimePicker" position="bottom">
<van-date-picker
v-model="endDate"
title="选择结束时间"
:min-date="minDate"
:max-date="maxDate"
@confirm="onEndTimeConfirm"
@cancel="showEndTimePicker = false"
/>
<van-date-picker v-model="endDate" title="选择结束时间" :min-date="minDate" :max-date="maxDate"
@confirm="onEndTimeConfirm" @cancel="showEndTimePicker = false" />
</van-popup>
<!-- 课程选择器 -->
<van-popup v-model:show="showCoursePicker" position="bottom">
<div class="p-4">
<van-search
v-model="courseSearchValue"
placeholder="搜索课程"
@search="searchCourse"
/>
<van-search v-model="courseSearchValue" placeholder="搜索课程" @search="searchCourse" />
<van-list>
<van-cell
v-for="course in filteredCourses"
:key="course.id"
:title="course.name"
is-link
:border="false"
@click="onCourseSelect(course)"
/>
<van-cell v-for="course in filteredCourses" :key="course.id" :title="course.name" is-link :border="false"
@click="onCourseSelect(course)" />
</van-list>
</div>
</van-popup>
......@@ -229,20 +115,10 @@
<!-- 活动选择器 -->
<van-popup v-model:show="showActivityPicker" position="bottom">
<div class="p-4">
<van-search
v-model="activitySearchValue"
placeholder="搜索活动"
@search="searchActivity"
/>
<van-search v-model="activitySearchValue" placeholder="搜索活动" @search="searchActivity" />
<van-list>
<van-cell
v-for="activity in filteredActivities"
:key="activity.id"
:title="activity.name"
is-link
:border="false"
@click="onActivitySelect(activity)"
/>
<van-cell v-for="activity in filteredActivities" :key="activity.id" :title="activity.name" is-link
:border="false" @click="onActivitySelect(activity)" />
</van-list>
</div>
</van-popup>
......@@ -250,20 +126,10 @@
<!-- 年级选择器 -->
<van-popup v-model:show="showGradePicker" position="bottom">
<div class="p-4">
<van-search
v-model="gradeSearchValue"
placeholder="搜索年级"
@search="searchGrade"
/>
<van-search v-model="gradeSearchValue" placeholder="搜索年级" @search="searchGrade" />
<van-list>
<van-cell
v-for="grade in filteredGrades"
:key="grade.id"
:title="grade.name"
is-link
:border="false"
@click="onGradeSelect(grade)"
/>
<van-cell v-for="grade in filteredGrades" :key="grade.id" :title="grade.name" is-link :border="false"
@click="onGradeSelect(grade)" />
</van-list>
</div>
</van-popup>
......@@ -271,20 +137,10 @@
<!-- 班级选择器 -->
<van-popup v-model:show="showClassPicker" position="bottom">
<div class="p-4">
<van-search
v-model="classSearchValue"
placeholder="搜索班级"
@search="searchClass"
/>
<van-search v-model="classSearchValue" placeholder="搜索班级" @search="searchClass" />
<van-list>
<van-cell
v-for="classItem in filteredClasses"
:key="classItem.id"
:title="classItem.name"
is-link
:border="false"
@click="onClassSelect(classItem)"
/>
<van-cell v-for="classItem in filteredClasses" :key="classItem.id" :title="classItem.name" is-link
:border="false" @click="onClassSelect(classItem)" />
</van-list>
</div>
</van-popup>
......@@ -292,20 +148,10 @@
<!-- 小组选择器 -->
<van-popup v-model:show="showGroupPicker" position="bottom">
<div class="p-4">
<van-search
v-model="groupSearchValue"
placeholder="搜索小组"
@search="searchGroup"
/>
<van-search v-model="groupSearchValue" placeholder="搜索小组" @search="searchGroup" />
<van-list>
<van-cell
v-for="group in filteredGroups"
:key="group.id"
:title="group.name"
is-link
:border="false"
@click="onGroupSelect(group)"
/>
<van-cell v-for="group in filteredGroups" :key="group.id" :title="group.name" is-link :border="false"
@click="onGroupSelect(group)" />
</van-list>
</div>
</van-popup>
......@@ -322,12 +168,14 @@ import { useTitle } from '@vueuse/core';
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title || '新增作业');
useTitle($route.query.type === 'homework' ? '设置作业' : '安排打卡');
const type = ref('');
// 表单数据
const formData = ref({
homework_name: '',
type: '',
type: $route.query.type === 'homework' ? '上传附件' : '签到',
frequency: '',
target_count: '',
start_time: new Date(),
......