feat(教师表单): 重构作业类型选择并添加提交频率设置
- 将硬编码的作业类型选项改为从接口获取的动态数据 - 添加每周期提交数量的设置功能 - 调整表单布局,优化用户体验
Showing
1 changed file
with
44 additions
and
7 deletions
| ... | @@ -46,15 +46,21 @@ | ... | @@ -46,15 +46,21 @@ |
| 46 | <div v-if="$route.query.type === 'homework'" class="mb-4"> | 46 | <div v-if="$route.query.type === 'homework'" class="mb-4"> |
| 47 | <label class="setting-label">作业类型</label> | 47 | <label class="setting-label">作业类型</label> |
| 48 | <van-checkbox-group v-model="formData.attachment_type" direction="horizontal" checked-color="#4caf50" icon-size="15px"> | 48 | <van-checkbox-group v-model="formData.attachment_type" direction="horizontal" checked-color="#4caf50" icon-size="15px"> |
| 49 | - <van-checkbox name="image" shape="square"><span class="text-sm">图文打卡</span></van-checkbox> | 49 | + <van-checkbox |
| 50 | - <van-checkbox name="video" shape="square"><span class="text-sm">视频打卡</span></van-checkbox> | 50 | + v-for="option in attachmentTypeOptions" |
| 51 | - <van-checkbox name="audio" shape="square"><span class="text-sm">音频打卡</span></van-checkbox> | 51 | + :key="option.name" |
| 52 | + :name="option.name" | ||
| 53 | + shape="square" | ||
| 54 | + > | ||
| 55 | + <span class="text-sm">{{ option.text }}</span> | ||
| 56 | + </van-checkbox> | ||
| 52 | </van-checkbox-group> | 57 | </van-checkbox-group> |
| 53 | </div> | 58 | </div> |
| 54 | 59 | ||
| 55 | - <van-row gutter="10"> | 60 | + <!-- 作业周期 --> |
| 56 | - <van-col span="12"> | 61 | + <van-row gutter="10" class="mb-4"> |
| 57 | - <label class="setting-label">{{ pageTitle === '设置作业' ? '作业' : '打卡' }}周期</label> | 62 | + <van-col span="24"> |
| 63 | + <label class="setting-label">{{ pageTitle === '设置作业' ? '作业' : '打卡' }}频次</label> | ||
| 58 | <van-field | 64 | <van-field |
| 59 | v-model="formData.cycle_text" | 65 | v-model="formData.cycle_text" |
| 60 | is-link | 66 | is-link |
| ... | @@ -66,6 +72,24 @@ | ... | @@ -66,6 +72,24 @@ |
| 66 | class="cycle-field" | 72 | class="cycle-field" |
| 67 | /> | 73 | /> |
| 68 | </van-col> | 74 | </van-col> |
| 75 | + </van-row> | ||
| 76 | + | ||
| 77 | + <!-- 每周期提交数量和目标总数 --> | ||
| 78 | + <van-row gutter="10"> | ||
| 79 | + <van-col span="12"> | ||
| 80 | + <label class="setting-label">每周期提交数量</label> | ||
| 81 | + <div class="target-count-container"> | ||
| 82 | + <van-stepper | ||
| 83 | + v-model="formData.frequency" | ||
| 84 | + min="1" | ||
| 85 | + max="100" | ||
| 86 | + integer | ||
| 87 | + button-size="24px" | ||
| 88 | + input-width="50%" | ||
| 89 | + /> | ||
| 90 | + <span class="target-unit">次</span> | ||
| 91 | + </div> | ||
| 92 | + </van-col> | ||
| 69 | <van-col span="12"> | 93 | <van-col span="12"> |
| 70 | <label class="setting-label">目标总数</label> | 94 | <label class="setting-label">目标总数</label> |
| 71 | <div class="target-count-container"> | 95 | <div class="target-count-container"> |
| ... | @@ -358,7 +382,8 @@ const formData = ref({ | ... | @@ -358,7 +382,8 @@ const formData = ref({ |
| 358 | class_name: '', | 382 | class_name: '', |
| 359 | class_id: '', | 383 | class_id: '', |
| 360 | // group_name: '' | 384 | // group_name: '' |
| 361 | - attachment_type: [] // 作品类型数组,用于设置作业时的多选 | 385 | + attachment_type: [], // 作品类型数组,用于设置作业时的多选 |
| 386 | + frequency: 1 // 每周期提交数量 | ||
| 362 | }); | 387 | }); |
| 363 | 388 | ||
| 364 | // 加载状态 | 389 | // 加载状态 |
| ... | @@ -384,6 +409,9 @@ const maxDate = new Date(2035, 11, 31); | ... | @@ -384,6 +409,9 @@ const maxDate = new Date(2035, 11, 31); |
| 384 | 409 | ||
| 385 | const cycleOptions = ref([]); | 410 | const cycleOptions = ref([]); |
| 386 | 411 | ||
| 412 | +// 作品类型选项 - 从接口获取 | ||
| 413 | +const attachmentTypeOptions = ref([]); | ||
| 414 | + | ||
| 387 | // 搜索值 | 415 | // 搜索值 |
| 388 | const courseSearchValue = ref(''); | 416 | const courseSearchValue = ref(''); |
| 389 | const chapterSearchValue = ref(''); | 417 | const chapterSearchValue = ref(''); |
| ... | @@ -852,6 +880,15 @@ onMounted(async () => { | ... | @@ -852,6 +880,15 @@ onMounted(async () => { |
| 852 | text, | 880 | text, |
| 853 | value: String(value) // 确保值为字符串类型 | 881 | value: String(value) // 确保值为字符串类型 |
| 854 | })); | 882 | })); |
| 883 | + | ||
| 884 | + // 处理作品类型数据 | ||
| 885 | + if (data.task_attachment_type) { | ||
| 886 | + attachmentTypeOptions.value = Object.entries(data.task_attachment_type).map(([key, value]) => ({ | ||
| 887 | + name: key, // 提交给后台的值 | ||
| 888 | + text: value // 显示的文本 | ||
| 889 | + })); | ||
| 890 | + } | ||
| 891 | + | ||
| 855 | grades.value = data.grade_list.map(grade => ({ | 892 | grades.value = data.grade_list.map(grade => ({ |
| 856 | name: grade.grade_name, | 893 | name: grade.grade_name, |
| 857 | id: String(grade.id) | 894 | id: String(grade.id) | ... | ... |
-
Please register or login to post a comment