Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
da8e5509 1 parent 54ed8a14

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

- 在打卡页面添加顶部间距并区分打卡和作业按钮功能
- 重构表单页面，根据类型动态显示标题并简化代码结构
- 移除不必要的类型选择字段，默认根据路由参数设置类型
Inline Side-by-side
Showing 2 changed files with 56 additions and 208 deletions
1 <!-- 1 <!--
2 * @Date: 2025-05-29 15:34:17 2 * @Date: 2025-05-29 15:34:17
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-06-20 10:40:58 4 + * @LastEditTime: 2025-06-20 10:56:22
5 * @FilePath: /mlaj/src/views/teacher/checkinPage.vue 5 * @FilePath: /mlaj/src/views/teacher/checkinPage.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -21,13 +21,13 @@ ...@@ -21,13 +21,13 @@
21 @select="onSelectDay" 21 @select="onSelectDay"
22 @click-subtitle="onClickSubtitle"> 22 @click-subtitle="onClickSubtitle">
23 </van-calendar> 23 </van-calendar>
24 - <div style="padding: 0 1rem;"> 24 + <div style="padding: 0 1rem; margin-top: 1rem;">
25 <van-row gutter="15"> 25 <van-row gutter="15">
26 <van-col span="12"> 26 <van-col span="12">
27 - <van-button type="primary" block icon="photo" @click="handleAdd">安排打卡</van-button> 27 + <van-button type="primary" block icon="photo" @click="handleAdd('checkin')">安排打卡</van-button>
28 </van-col> 28 </van-col>
29 <van-col span="12"> 29 <van-col span="12">
30 - <van-button type="primary" block icon="video">设置作业</van-button> 30 + <van-button type="primary" block icon="video" @click="handleAdd('homework')">设置作业</van-button>
31 </van-col> 31 </van-col>
32 </van-row> 32 </van-row>
33 </div> 33 </div>
...@@ -817,12 +817,12 @@ const formatData = (data) => { ...@@ -817,12 +817,12 @@ const formatData = (data) => {
817 return formattedData; 817 return formattedData;
818 } 818 }
819 819
820 -const handleAdd = () => { 820 +const handleAdd = (type) => {
821 router.push({ 821 router.push({
822 path: '/teacher/form', 822 path: '/teacher/form',
823 query: { 823 query: {
824 post_id: route.query.id, 824 post_id: route.query.id,
825 - type: 'image', 825 + type: type,
826 status: 'add', 826 status: 'add',
827 } 827 }
828 }) 828 })
......
...@@ -2,12 +2,12 @@ ...@@ -2,12 +2,12 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2025-01-20 10:00:00 3 * @Date: 2025-01-20 10:00:00
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2025-06-18 11:43:03 5 + * @LastEditTime: 2025-06-20 10:58:03
6 * @FilePath: /mlaj/src/views/teacher/formPage.vue 6 * @FilePath: /mlaj/src/views/teacher/formPage.vue
7 * @Description: 教师作业新增表单页面 7 * @Description: 教师作业新增表单页面
8 --> 8 -->
9 <template> 9 <template>
10 - <AppLayout title="新增作业"> 10 + <AppLayout>
11 <div class="bg-gradient-to-br from-green-50 via-green-100/30 to-blue-50/30 min-h-screen"> 11 <div class="bg-gradient-to-br from-green-50 via-green-100/30 to-blue-50/30 min-h-screen">
12 <div class="px-4 py-6"> 12 <div class="px-4 py-6">
13 <FrostedGlass class="rounded-xl overflow-hidden"> 13 <FrostedGlass class="rounded-xl overflow-hidden">
...@@ -15,18 +15,11 @@ ...@@ -15,18 +15,11 @@
15 <van-form @submit="handleSubmit"> 15 <van-form @submit="handleSubmit">
16 <van-cell-group inset> 16 <van-cell-group inset>
17 <!-- 作业名称 --> 17 <!-- 作业名称 -->
18 - <van-field 18 + <van-field v-model="formData.homework_name" name="homework_name" label="作业名称" placeholder="请输入作业名称"
19 - v-model="formData.homework_name" 19 + required :border="false" :rules="[{ required: true, message: '请输入作业名称' }]" />
20 - name="homework_name"
21 - label="作业名称"
22 - placeholder="请输入作业名称"
23 - required
24 - :border="false"
25 - :rules="[{ required: true, message: '请输入作业名称' }]"
26 - />
27 20
28 <!-- 类型 --> 21 <!-- 类型 -->
29 - <van-field 22 + <!-- <van-field
30 v-model="formData.type" 23 v-model="formData.type"
31 is-link 24 is-link
32 readonly 25 readonly
...@@ -35,125 +28,48 @@ ...@@ -35,125 +28,48 @@
35 placeholder="请选择类型" 28 placeholder="请选择类型"
36 :border="false" 29 :border="false"
37 @click="showTypePicker = true" 30 @click="showTypePicker = true"
38 - /> 31 + /> -->
39 32
40 <!-- 频次 --> 33 <!-- 频次 -->
41 - <van-field 34 + <van-field v-model="formData.frequency" is-link readonly name="frequency" label="频次" placeholder="请选择频次"
42 - v-model="formData.frequency" 35 + :border="false" @click="showFrequencyPicker = true" />
43 - is-link
44 - readonly
45 - name="frequency"
46 - label="频次"
47 - placeholder="请选择频次"
48 - :border="false"
49 - @click="showFrequencyPicker = true"
50 - />
51 36
52 <!-- 目标总数 --> 37 <!-- 目标总数 -->
53 - <van-field 38 + <van-field v-model="formData.target_count" type="number" name="target_count" label="目标总数"
54 - v-model="formData.target_count" 39 + :border="false" placeholder="请输入目标数量" />
55 - type="number"
56 - name="target_count"
57 - label="目标总数"
58 - :border="false"
59 - placeholder="请输入目标数量"
60 - />
61 40
62 <!-- 开始时间 --> 41 <!-- 开始时间 -->
63 - <van-field 42 + <van-field v-model="startTimeDisplay" is-link readonly name="start_time" label="开始时间"
64 - v-model="startTimeDisplay" 43 + placeholder="请选择开始时间" :border="false" @click="showStartTimePicker = true" />
65 - is-link
66 - readonly
67 - name="start_time"
68 - label="开始时间"
69 - placeholder="请选择开始时间"
70 - :border="false"
71 - @click="showStartTimePicker = true"
72 - />
73 44
74 <!-- 结束时间 --> 45 <!-- 结束时间 -->
75 - <van-field 46 + <van-field v-model="endTimeDisplay" is-link readonly name="end_time" label="结束时间" placeholder="请选择结束时间"
76 - v-model="endTimeDisplay" 47 + :border="false" @click="showEndTimePicker = true" />
77 - is-link
78 - readonly
79 - name="end_time"
80 - label="结束时间"
81 - placeholder="请选择结束时间"
82 - :border="false"
83 - @click="showEndTimePicker = true"
84 - />
85 48
86 <!-- 课程 --> 49 <!-- 课程 -->
87 - <van-field 50 + <van-field v-model="formData.course" is-link readonly name="course" label="课程" placeholder="请选择课程"
88 - v-model="formData.course" 51 + :border="false" @click="showCoursePicker = true" />
89 - is-link
90 - readonly
91 - name="course"
92 - label="课程"
93 - placeholder="请选择课程"
94 - :border="false"
95 - @click="showCoursePicker = true"
96 - />
97 52
98 <!-- 活动 --> 53 <!-- 活动 -->
99 - <van-field 54 + <van-field v-model="formData.activity" is-link readonly name="activity" label="活动" placeholder="请选择活动"
100 - v-model="formData.activity" 55 + :border="false" @click="showActivityPicker = true" />
101 - is-link
102 - readonly
103 - name="activity"
104 - label="活动"
105 - placeholder="请选择活动"
106 - :border="false"
107 - @click="showActivityPicker = true"
108 - />
109 56
110 <!-- 年级 --> 57 <!-- 年级 -->
111 - <van-field 58 + <van-field v-model="formData.grade" is-link readonly name="grade" label="年级" placeholder="请选择年级"
112 - v-model="formData.grade" 59 + :border="false" @click="showGradePicker = true" />
113 - is-link
114 - readonly
115 - name="grade"
116 - label="年级"
117 - placeholder="请选择年级"
118 - :border="false"
119 - @click="showGradePicker = true"
120 - />
121 60
122 <!-- 班级 --> 61 <!-- 班级 -->
123 - <van-field 62 + <van-field v-model="formData.class_name" is-link readonly name="class_name" label="班级"
124 - v-model="formData.class_name" 63 + placeholder="请选择班级" :border="false" @click="showClassPicker = true" />
125 - is-link
126 - readonly
127 - name="class_name"
128 - label="班级"
129 - placeholder="请选择班级"
130 - :border="false"
131 - @click="showClassPicker = true"
132 - />
133 64
134 <!-- 小组 --> 65 <!-- 小组 -->
135 - <van-field 66 + <van-field v-model="formData.group_name" is-link readonly name="group_name" label="小组"
136 - v-model="formData.group_name" 67 + placeholder="请选择小组" :border="false" @click="showGroupPicker = true" />
137 - is-link
138 - readonly
139 - name="group_name"
140 - label="小组"
141 - placeholder="请选择小组"
142 - :border="false"
143 - @click="showGroupPicker = true"
144 - />
145 </van-cell-group> 68 </van-cell-group>
146 69
147 <!-- 提交按钮 --> 70 <!-- 提交按钮 -->
148 <div style="margin: 16px;"> 71 <div style="margin: 16px;">
149 - <van-button 72 + <van-button native-type="submit" type="primary" block round :loading="loading">
150 - native-type="submit"
151 - type="primary"
152 - block
153 - round
154 - :loading="loading"
155 - class="bg-green-500 hover:bg-green-600 transition-colors"
156 - >
157 确认并保存 73 确认并保存
158 </van-button> 74 </van-button>
159 </div> 75 </div>
...@@ -165,63 +81,33 @@ ...@@ -165,63 +81,33 @@
165 81
166 <!-- 类型选择器 --> 82 <!-- 类型选择器 -->
167 <van-popup v-model:show="showTypePicker" position="bottom"> 83 <van-popup v-model:show="showTypePicker" position="bottom">
168 - <van-picker 84 + <van-picker :columns="typeOptions" @confirm="onTypeConfirm" @cancel="showTypePicker = false" />
169 - :columns="typeOptions"
170 - @confirm="onTypeConfirm"
171 - @cancel="showTypePicker = false"
172 - />
173 </van-popup> 85 </van-popup>
174 86
175 <!-- 频次选择器 --> 87 <!-- 频次选择器 -->
176 <van-popup v-model:show="showFrequencyPicker" position="bottom"> 88 <van-popup v-model:show="showFrequencyPicker" position="bottom">
177 - <van-picker 89 + <van-picker :columns="frequencyOptions" @confirm="onFrequencyConfirm" @cancel="showFrequencyPicker = false" />
178 - :columns="frequencyOptions"
179 - @confirm="onFrequencyConfirm"
180 - @cancel="showFrequencyPicker = false"
181 - />
182 </van-popup> 90 </van-popup>
183 91
184 <!-- 开始时间选择器 --> 92 <!-- 开始时间选择器 -->
185 <van-popup v-model:show="showStartTimePicker" position="bottom"> 93 <van-popup v-model:show="showStartTimePicker" position="bottom">
186 - <van-date-picker 94 + <van-date-picker v-model="startDate" title="选择开始时间" :min-date="minDate" :max-date="maxDate"
187 - v-model="startDate" 95 + @confirm="onStartTimeConfirm" @cancel="showStartTimePicker = false" />
188 - title="选择开始时间"
189 - :min-date="minDate"
190 - :max-date="maxDate"
191 - @confirm="onStartTimeConfirm"
192 - @cancel="showStartTimePicker = false"
193 - />
194 </van-popup> 96 </van-popup>
195 97
196 <!-- 结束时间选择器 --> 98 <!-- 结束时间选择器 -->
197 <van-popup v-model:show="showEndTimePicker" position="bottom"> 99 <van-popup v-model:show="showEndTimePicker" position="bottom">
198 - <van-date-picker 100 + <van-date-picker v-model="endDate" title="选择结束时间" :min-date="minDate" :max-date="maxDate"
199 - v-model="endDate" 101 + @confirm="onEndTimeConfirm" @cancel="showEndTimePicker = false" />
200 - title="选择结束时间"
201 - :min-date="minDate"
202 - :max-date="maxDate"
203 - @confirm="onEndTimeConfirm"
204 - @cancel="showEndTimePicker = false"
205 - />
206 </van-popup> 102 </van-popup>
207 103
208 <!-- 课程选择器 --> 104 <!-- 课程选择器 -->
209 <van-popup v-model:show="showCoursePicker" position="bottom"> 105 <van-popup v-model:show="showCoursePicker" position="bottom">
210 <div class="p-4"> 106 <div class="p-4">
211 - <van-search 107 + <van-search v-model="courseSearchValue" placeholder="搜索课程" @search="searchCourse" />
212 - v-model="courseSearchValue"
213 - placeholder="搜索课程"
214 - @search="searchCourse"
215 - />
216 <van-list> 108 <van-list>
217 - <van-cell 109 + <van-cell v-for="course in filteredCourses" :key="course.id" :title="course.name" is-link :border="false"
218 - v-for="course in filteredCourses" 110 + @click="onCourseSelect(course)" />
219 - :key="course.id"
220 - :title="course.name"
221 - is-link
222 - :border="false"
223 - @click="onCourseSelect(course)"
224 - />
225 </van-list> 111 </van-list>
226 </div> 112 </div>
227 </van-popup> 113 </van-popup>
...@@ -229,20 +115,10 @@ ...@@ -229,20 +115,10 @@
229 <!-- 活动选择器 --> 115 <!-- 活动选择器 -->
230 <van-popup v-model:show="showActivityPicker" position="bottom"> 116 <van-popup v-model:show="showActivityPicker" position="bottom">
231 <div class="p-4"> 117 <div class="p-4">
232 - <van-search 118 + <van-search v-model="activitySearchValue" placeholder="搜索活动" @search="searchActivity" />
233 - v-model="activitySearchValue"
234 - placeholder="搜索活动"
235 - @search="searchActivity"
236 - />
237 <van-list> 119 <van-list>
238 - <van-cell 120 + <van-cell v-for="activity in filteredActivities" :key="activity.id" :title="activity.name" is-link
239 - v-for="activity in filteredActivities" 121 + :border="false" @click="onActivitySelect(activity)" />
240 - :key="activity.id"
241 - :title="activity.name"
242 - is-link
243 - :border="false"
244 - @click="onActivitySelect(activity)"
245 - />
246 </van-list> 122 </van-list>
247 </div> 123 </div>
248 </van-popup> 124 </van-popup>
...@@ -250,20 +126,10 @@ ...@@ -250,20 +126,10 @@
250 <!-- 年级选择器 --> 126 <!-- 年级选择器 -->
251 <van-popup v-model:show="showGradePicker" position="bottom"> 127 <van-popup v-model:show="showGradePicker" position="bottom">
252 <div class="p-4"> 128 <div class="p-4">
253 - <van-search 129 + <van-search v-model="gradeSearchValue" placeholder="搜索年级" @search="searchGrade" />
254 - v-model="gradeSearchValue"
255 - placeholder="搜索年级"
256 - @search="searchGrade"
257 - />
258 <van-list> 130 <van-list>
259 - <van-cell 131 + <van-cell v-for="grade in filteredGrades" :key="grade.id" :title="grade.name" is-link :border="false"
260 - v-for="grade in filteredGrades" 132 + @click="onGradeSelect(grade)" />
261 - :key="grade.id"
262 - :title="grade.name"
263 - is-link
264 - :border="false"
265 - @click="onGradeSelect(grade)"
266 - />
267 </van-list> 133 </van-list>
268 </div> 134 </div>
269 </van-popup> 135 </van-popup>
...@@ -271,20 +137,10 @@ ...@@ -271,20 +137,10 @@
271 <!-- 班级选择器 --> 137 <!-- 班级选择器 -->
272 <van-popup v-model:show="showClassPicker" position="bottom"> 138 <van-popup v-model:show="showClassPicker" position="bottom">
273 <div class="p-4"> 139 <div class="p-4">
274 - <van-search 140 + <van-search v-model="classSearchValue" placeholder="搜索班级" @search="searchClass" />
275 - v-model="classSearchValue"
276 - placeholder="搜索班级"
277 - @search="searchClass"
278 - />
279 <van-list> 141 <van-list>
280 - <van-cell 142 + <van-cell v-for="classItem in filteredClasses" :key="classItem.id" :title="classItem.name" is-link
281 - v-for="classItem in filteredClasses" 143 + :border="false" @click="onClassSelect(classItem)" />
282 - :key="classItem.id"
283 - :title="classItem.name"
284 - is-link
285 - :border="false"
286 - @click="onClassSelect(classItem)"
287 - />
288 </van-list> 144 </van-list>
289 </div> 145 </div>
290 </van-popup> 146 </van-popup>
...@@ -292,20 +148,10 @@ ...@@ -292,20 +148,10 @@
292 <!-- 小组选择器 --> 148 <!-- 小组选择器 -->
293 <van-popup v-model:show="showGroupPicker" position="bottom"> 149 <van-popup v-model:show="showGroupPicker" position="bottom">
294 <div class="p-4"> 150 <div class="p-4">
295 - <van-search 151 + <van-search v-model="groupSearchValue" placeholder="搜索小组" @search="searchGroup" />
296 - v-model="groupSearchValue"
297 - placeholder="搜索小组"
298 - @search="searchGroup"
299 - />
300 <van-list> 152 <van-list>
301 - <van-cell 153 + <van-cell v-for="group in filteredGroups" :key="group.id" :title="group.name" is-link :border="false"
302 - v-for="group in filteredGroups" 154 + @click="onGroupSelect(group)" />
303 - :key="group.id"
304 - :title="group.name"
305 - is-link
306 - :border="false"
307 - @click="onGroupSelect(group)"
308 - />
309 </van-list> 155 </van-list>
310 </div> 156 </div>
311 </van-popup> 157 </van-popup>
...@@ -322,12 +168,14 @@ import { useTitle } from '@vueuse/core'; ...@@ -322,12 +168,14 @@ import { useTitle } from '@vueuse/core';
322 168
323 const $route = useRoute(); 169 const $route = useRoute();
324 const $router = useRouter(); 170 const $router = useRouter();
325 -useTitle($route.meta.title || '新增作业'); 171 +useTitle($route.query.type === 'homework' ? '设置作业' : '安排打卡');
172 +
173 +const type = ref('');
326 174
327 // 表单数据 175 // 表单数据
328 const formData = ref({ 176 const formData = ref({
329 homework_name: '', 177 homework_name: '',
330 - type: '', 178 + type: $route.query.type === 'homework' ? '上传附件' : '签到',
331 frequency: '', 179 frequency: '',
332 target_count: '', 180 target_count: '',
333 start_time: new Date(), 181 start_time: new Date(),
......