refactor(teacher): 清理无用代码并优化日期处理函数
移除任务图片相关的mock数据和注释 将函数声明改为箭头函数保持风格一致 提取日期格式化工具函数到文件顶部 简化描述性注释,保持代码简洁
Showing
1 changed file
with
38 additions
and
61 deletions
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-11-19 21:00:00 | 2 | * @Date: 2025-11-19 21:00:00 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-12-13 21:24:23 | 4 | + * @LastEditTime: 2025-12-13 22:36:05 |
| 5 | * @FilePath: /mlaj/src/views/teacher/taskHomePage.vue | 5 | * @FilePath: /mlaj/src/views/teacher/taskHomePage.vue |
| 6 | - * @Description: 教师端作业主页(头部介绍、统计、日历与学生完成情况;数据Mock) | 6 | + * @Description: 教师端作业主页(头部介绍、统计、日历与学生完成情况) |
| 7 | --> | 7 | --> |
| 8 | <template> | 8 | <template> |
| 9 | <div class="TaskHomePage"> | 9 | <div class="TaskHomePage"> |
| 10 | - <!-- 头部卡片:名称、介绍、细项(参考图片1结构) --> | 10 | + <!-- 头部卡片:名称、介绍、细项 --> |
| 11 | <div class="headCard bg-white rounded-lg shadow px-4 py-4"> | 11 | <div class="headCard bg-white rounded-lg shadow px-4 py-4"> |
| 12 | <div class="flex justify-between items-start mb-2"> | 12 | <div class="flex justify-between items-start mb-2"> |
| 13 | <div class="title text-2xl font-bold text-gray-900 mr-2">{{ task_title }}</div> | 13 | <div class="title text-2xl font-bold text-gray-900 mr-2">{{ task_title }}</div> |
| ... | @@ -19,11 +19,6 @@ | ... | @@ -19,11 +19,6 @@ |
| 19 | </div> | 19 | </div> |
| 20 | <div class="text-sm font-bold text-gray-700">{{ current_subtask_name }}</div> | 20 | <div class="text-sm font-bold text-gray-700">{{ current_subtask_name }}</div> |
| 21 | <div class="intro text-base text-gray-700 leading-relaxed mb-3" v-html="task_intro"></div> | 21 | <div class="intro text-base text-gray-700 leading-relaxed mb-3" v-html="task_intro"></div> |
| 22 | - <!-- 三图展示(可选),使用CDN示例地址并加压缩参数 --> | ||
| 23 | - <!-- <div class="images grid grid-cols-3 gap-3 mb-3"> | ||
| 24 | - <img v-for="(img, idx) in task_images" :key="idx" :src="img" | ||
| 25 | - class="rounded-md object-cover w-full h-24" /> | ||
| 26 | - </div> --> | ||
| 27 | <div class="details text-sm text-gray-600" v-if="!subtask_list.length || selectedSubtaskId"> | 22 | <div class="details text-sm text-gray-600" v-if="!subtask_list.length || selectedSubtaskId"> |
| 28 | <div class="detailItem">周期:{{ task_details.cycle }}</div> | 23 | <div class="detailItem">周期:{{ task_details.cycle }}</div> |
| 29 | <div class="detailItem">频次:{{ task_details.frequency }}</div> | 24 | <div class="detailItem">频次:{{ task_details.frequency }}</div> |
| ... | @@ -35,7 +30,7 @@ | ... | @@ -35,7 +30,7 @@ |
| 35 | </div> | 30 | </div> |
| 36 | </div> | 31 | </div> |
| 37 | 32 | ||
| 38 | - <!-- 统计数据(参考 myClassPage.vue 出勤率/任务完成) --> | 33 | + <!-- 统计数据 --> |
| 39 | <div class="statsCard bg-white rounded-lg shadow px-4 py-4 mt-4"> | 34 | <div class="statsCard bg-white rounded-lg shadow px-4 py-4 mt-4"> |
| 40 | <van-row gutter="16"> | 35 | <van-row gutter="16"> |
| 41 | <!-- 出勤率 --> | 36 | <!-- 出勤率 --> |
| ... | @@ -100,7 +95,7 @@ | ... | @@ -100,7 +95,7 @@ |
| 100 | show-toolbar title="选择作业" /> | 95 | show-toolbar title="选择作业" /> |
| 101 | </van-popup> | 96 | </van-popup> |
| 102 | 97 | ||
| 103 | - <!-- 学生完成情况(参考图片2样式) --> | 98 | + <!-- 学生完成情况 --> |
| 104 | <div class="studentsCard bg-white rounded-lg shadow px-4 py-4 mt-4"> | 99 | <div class="studentsCard bg-white rounded-lg shadow px-4 py-4 mt-4"> |
| 105 | <div class="flex items-center justify-between mb-3"> | 100 | <div class="flex items-center justify-between mb-3"> |
| 106 | <div class="text-base font-semibold text-gray-800">完成情况({{ completed_count }}/{{ user_list.length }}) | 101 | <div class="text-base font-semibold text-gray-800">完成情况({{ completed_count }}/{{ user_list.length }}) |
| ... | @@ -150,10 +145,36 @@ const selected_mode = ref('today') | ... | @@ -150,10 +145,36 @@ const selected_mode = ref('today') |
| 150 | const specific_label = ref('特定日期') | 145 | const specific_label = ref('特定日期') |
| 151 | 146 | ||
| 152 | /** | 147 | /** |
| 148 | + * 将日期对象格式化为 YYYY-MM-DD | ||
| 149 | + * @param {Date} d - 日期对象 | ||
| 150 | + * @returns {string} 格式化后的日期字符串 | ||
| 151 | + * 注释:补零并返回标准格式,便于与完成记录匹配。 | ||
| 152 | + */ | ||
| 153 | +const format_date = (d) => { | ||
| 154 | + const y = d.getFullYear() | ||
| 155 | + const m = String(d.getMonth() + 1).padStart(2, '0') | ||
| 156 | + const day = String(d.getDate()).padStart(2, '0') | ||
| 157 | + return `${y}-${m}-${day}` | ||
| 158 | +} | ||
| 159 | + | ||
| 160 | +/** | ||
| 161 | + * 字符串转日期对象(YYYY-MM-DD -> Date) | ||
| 162 | + * @param {string} s - 日期字符串 | ||
| 163 | + * @returns {Date} 日期对象 | ||
| 164 | + */ | ||
| 165 | +const parse_date_text = (s) => { | ||
| 166 | + const parts = String(s).split('-') | ||
| 167 | + const y = Number(parts[0]) || new Date().getFullYear() | ||
| 168 | + const m = Number(parts[1]) || (new Date().getMonth() + 1) | ||
| 169 | + const d = Number(parts[2]) || new Date().getDate() | ||
| 170 | + return new Date(y, m - 1, d) | ||
| 171 | +} | ||
| 172 | + | ||
| 173 | +/** | ||
| 153 | * 选择“今日”,设置为今日日期,并触发查询逻辑 | 174 | * 选择“今日”,设置为今日日期,并触发查询逻辑 |
| 154 | * @returns {void} | 175 | * @returns {void} |
| 155 | */ | 176 | */ |
| 156 | -function select_today() { | 177 | +const select_today = () => { |
| 157 | const now = new Date() | 178 | const now = new Date() |
| 158 | selected_date.value = format_date(now) | 179 | selected_date.value = format_date(now) |
| 159 | selected_mode.value = 'today' | 180 | selected_mode.value = 'today' |
| ... | @@ -166,7 +187,7 @@ function select_today() { | ... | @@ -166,7 +187,7 @@ function select_today() { |
| 166 | * 选择“昨日”,设置为昨日日期,并触发查询逻辑 | 187 | * 选择“昨日”,设置为昨日日期,并触发查询逻辑 |
| 167 | * @returns {void} | 188 | * @returns {void} |
| 168 | */ | 189 | */ |
| 169 | -function select_yesterday() { | 190 | +const select_yesterday = () => { |
| 170 | const y = new Date(Date.now() - 24 * 60 * 60 * 1000) | 191 | const y = new Date(Date.now() - 24 * 60 * 60 * 1000) |
| 171 | selected_date.value = format_date(y) | 192 | selected_date.value = format_date(y) |
| 172 | selected_mode.value = 'yesterday' | 193 | selected_mode.value = 'yesterday' |
| ... | @@ -224,22 +245,14 @@ const formatter = (day) => { | ... | @@ -224,22 +245,14 @@ const formatter = (day) => { |
| 224 | * 打开“某个日期”选择器弹窗 | 245 | * 打开“某个日期”选择器弹窗 |
| 225 | * @returns {void} | 246 | * @returns {void} |
| 226 | */ | 247 | */ |
| 227 | -function open_specific_date_picker() { | 248 | +const open_specific_date_picker = () => { |
| 228 | show_calendar_popup.value = true | 249 | show_calendar_popup.value = true |
| 229 | } | 250 | } |
| 230 | 251 | ||
| 231 | -// | ||
| 232 | // API 数据状态 | 252 | // API 数据状态 |
| 233 | -// | ||
| 234 | const task_id = $route.params.id | 253 | const task_id = $route.params.id |
| 235 | const task_title = ref('') | 254 | const task_title = ref('') |
| 236 | const task_intro = ref('') | 255 | const task_intro = ref('') |
| 237 | -// 图片暂时保留 Mock 或从 API 扩展字段获取(当前 API 未返回图片列表,暂时保留为空或 Mock) | ||
| 238 | -const task_images = ref([ | ||
| 239 | - 'https://cdn.ipadbiz.cn/mlaj/demo-task-1.png?imageMogr2/thumbnail/200x/strip/quality/70', | ||
| 240 | - 'https://cdn.ipadbiz.cn/mlaj/demo-task-2.png?imageMogr2/thumbnail/200x/strip/quality/70', | ||
| 241 | - 'https://cdn.ipadbiz.cn/mlaj/demo-task-3.png?imageMogr2/thumbnail/200x/strip/quality/70' | ||
| 242 | -]) | ||
| 243 | const task_details = ref({ | 256 | const task_details = ref({ |
| 244 | cycle: '', | 257 | cycle: '', |
| 245 | frequency: '', | 258 | frequency: '', |
| ... | @@ -247,17 +260,13 @@ const task_details = ref({ | ... | @@ -247,17 +260,13 @@ const task_details = ref({ |
| 247 | attachment_type: '' | 260 | attachment_type: '' |
| 248 | }) | 261 | }) |
| 249 | 262 | ||
| 250 | -// | ||
| 251 | // 统计数据 | 263 | // 统计数据 |
| 252 | -// | ||
| 253 | const checkin_count = ref(0) | 264 | const checkin_count = ref(0) |
| 254 | const upload_count = ref(0) | 265 | const upload_count = ref(0) |
| 255 | const checkin_text = computed(() => `${checkin_count.value}%`) | 266 | const checkin_text = computed(() => `${checkin_count.value}%`) |
| 256 | const upload_text = computed(() => `${upload_count.value}%`) | 267 | const upload_text = computed(() => `${upload_count.value}%`) |
| 257 | 268 | ||
| 258 | -// | ||
| 259 | // 学生与完成记录 | 269 | // 学生与完成记录 |
| 260 | -// | ||
| 261 | const today = new Date() | 270 | const today = new Date() |
| 262 | const selected_date = ref(format_date(today)) | 271 | const selected_date = ref(format_date(today)) |
| 263 | const user_list = ref([]) | 272 | const user_list = ref([]) |
| ... | @@ -288,7 +297,7 @@ const on_confirm_subtask = ({ selectedOptions }) => { | ... | @@ -288,7 +297,7 @@ const on_confirm_subtask = ({ selectedOptions }) => { |
| 288 | /** | 297 | /** |
| 289 | * 获取作业详情和学生完成情况 | 298 | * 获取作业详情和学生完成情况 |
| 290 | */ | 299 | */ |
| 291 | -async function fetchData() { | 300 | +const fetchData = async () => { |
| 292 | try { | 301 | try { |
| 293 | const res = await getTeacherTaskDetailAPI({ | 302 | const res = await getTeacherTaskDetailAPI({ |
| 294 | id: task_id, | 303 | id: task_id, |
| ... | @@ -377,43 +386,11 @@ onMounted(() => { | ... | @@ -377,43 +386,11 @@ onMounted(() => { |
| 377 | }) | 386 | }) |
| 378 | 387 | ||
| 379 | /** | 388 | /** |
| 380 | - * 将日期对象格式化为 YYYY-MM-DD | ||
| 381 | - * @param {Date} d - 日期对象 | ||
| 382 | - * @returns {string} 格式化后的日期字符串 | ||
| 383 | - * 注释:补零并返回标准格式,便于与完成记录匹配。 | ||
| 384 | - */ | ||
| 385 | -function format_date(d) { | ||
| 386 | - const y = d.getFullYear() | ||
| 387 | - const m = String(d.getMonth() + 1).padStart(2, '0') | ||
| 388 | - const day = String(d.getDate()).padStart(2, '0') | ||
| 389 | - return `${y}-${m}-${day}` | ||
| 390 | -} | ||
| 391 | - | ||
| 392 | -/** | ||
| 393 | - * 处理日历选择事件 | ||
| 394 | - * @param {any} date - 选中的日期对象 | ||
| 395 | - * @returns {void} | ||
| 396 | - * 注释:更新选中日期,并联动学生完成情况。 | ||
| 397 | - */ | ||
| 398 | -/** | ||
| 399 | - * 字符串转日期对象(YYYY-MM-DD -> Date) | ||
| 400 | - * @param {string} s - 日期字符串 | ||
| 401 | - * @returns {Date} 日期对象 | ||
| 402 | - */ | ||
| 403 | -function parse_date_text(s) { | ||
| 404 | - const parts = String(s).split('-') | ||
| 405 | - const y = Number(parts[0]) || new Date().getFullYear() | ||
| 406 | - const m = Number(parts[1]) || (new Date().getMonth() + 1) | ||
| 407 | - const d = Number(parts[2]) || new Date().getDate() | ||
| 408 | - return new Date(y, m - 1, d) | ||
| 409 | -} | ||
| 410 | - | ||
| 411 | -/** | ||
| 412 | * 处理日历选择事件(兼容字符串与Date对象) | 389 | * 处理日历选择事件(兼容字符串与Date对象) |
| 413 | * @param {string|Date} val - 选中的日期 | 390 | * @param {string|Date} val - 选中的日期 |
| 414 | * @returns {void} | 391 | * @returns {void} |
| 415 | */ | 392 | */ |
| 416 | -function on_date_select(val) { | 393 | +const on_date_select = (val) => { |
| 417 | const is_date_obj = val instanceof Date | 394 | const is_date_obj = val instanceof Date |
| 418 | const text = is_date_obj ? format_date(val) : String(val) | 395 | const text = is_date_obj ? format_date(val) : String(val) |
| 419 | selected_date.value = text | 396 | selected_date.value = text |
| ... | @@ -456,11 +433,11 @@ const completed_count = computed(() => students_status.value.filter(s => s.compl | ... | @@ -456,11 +433,11 @@ const completed_count = computed(() => students_status.value.filter(s => s.compl |
| 456 | const current_date_text = computed(() => selected_date.value) | 433 | const current_date_text = computed(() => selected_date.value) |
| 457 | 434 | ||
| 458 | /** | 435 | /** |
| 459 | - * 跳转至学员作业记录页面(固定ID的示例页面) | 436 | + * 跳转至学员作业记录页面 |
| 460 | * @param {{id:string,name:string,completed:boolean}} stu - 学员对象 | 437 | * @param {{id:string,name:string,completed:boolean}} stu - 学员对象 |
| 461 | * @returns {void} | 438 | * @returns {void} |
| 462 | */ | 439 | */ |
| 463 | -function go_student_record(stu) { | 440 | +const go_student_record = (stu) => { |
| 464 | if (task_type.value === 'checkin') { | 441 | if (task_type.value === 'checkin') { |
| 465 | return | 442 | return |
| 466 | } | 443 | } | ... | ... |
-
Please register or login to post a comment