hookehuyr

feat(teacher/formPage): 添加作业类型选择并调整频次为周期

- 新增 VanCheckboxGroup 组件支持
- 在作业设置中添加作品类型多选框
- 将频次相关字段和逻辑改为周期
- 更新样式类名以匹配周期字段
......@@ -39,6 +39,7 @@ declare module 'vue' {
VanCell: typeof import('vant/es')['Cell']
VanCellGroup: typeof import('vant/es')['CellGroup']
VanCheckbox: typeof import('vant/es')['Checkbox']
VanCheckboxGroup: typeof import('vant/es')['CheckboxGroup']
VanCircle: typeof import('vant/es')['Circle']
VanCol: typeof import('vant/es')['Col']
VanConfigProvider: typeof import('vant/es')['ConfigProvider']
......
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2025-01-20 10:00:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-06-25 16:27:12
* @LastEditTime: 2025-09-30 15:46:22
* @FilePath: /mlaj/src/views/teacher/formPage.vue
* @Description: 教师作业新增表单页面
-->
......@@ -41,18 +41,29 @@
<!-- 作业设置 -->
<div class="mb-6">
<h3 class="section-title">{{ pageTitle }}</h3>
<!-- 作品类型选择 - 只在设置作业时显示 -->
<div v-if="$route.query.type === 'homework'" class="mb-4">
<label class="setting-label">作业类型</label>
<van-checkbox-group v-model="formData.attachment_type" direction="horizontal" checked-color="#4caf50" icon-size="15px">
<van-checkbox name="image" shape="square"><span class="text-sm">图文打卡</span></van-checkbox>
<van-checkbox name="video" shape="square"><span class="text-sm">视频打卡</span></van-checkbox>
<van-checkbox name="audio" shape="square"><span class="text-sm">音频打卡</span></van-checkbox>
</van-checkbox-group>
</div>
<van-row gutter="10">
<van-col span="12">
<label class="setting-label">{{ pageTitle === '设置作业' ? '作业' : '打卡' }}频次</label>
<label class="setting-label">{{ pageTitle === '设置作业' ? '作业' : '打卡' }}周期</label>
<van-field
v-model="formData.frequency_text"
v-model="formData.cycle_text"
is-link
readonly
name="frequency_text"
placeholder="请选择频次"
name="cycle_text"
placeholder="请选择周期"
:border="false"
@click="showFrequencyPicker = true"
class="frequency-field"
@click="showCyclePicker = true"
class="cycle-field"
/>
</van-col>
<van-col span="12">
......@@ -170,9 +181,9 @@
</div>
</div>
<!-- 频次选择器 -->
<van-popup v-model:show="showFrequencyPicker" position="bottom">
<van-picker :columns="frequencyOptions" @confirm="onFrequencyConfirm" @cancel="showFrequencyPicker = false" />
<!-- 周期选择器 -->
<van-popup v-model:show="showCyclePicker" position="bottom">
<van-picker :columns="cycleOptions" @confirm="onCycleConfirm" @cancel="showCyclePicker = false" />
</van-popup>
<!-- 开始时间选择器 -->
......@@ -333,8 +344,8 @@ const formData = ref({
title: '',
note: '',
task_type: $route.query.type === 'homework' ? 'upload' : 'checkin',
frequency_text: '',
frequency: '',
cycle_text: '',
cycle: '',
target_number: 1,
start_time: new Date(),
end_time: new Date(),
......@@ -347,13 +358,14 @@ const formData = ref({
class_name: '',
class_id: '',
// group_name: ''
attachment_type: [] // 作品类型数组,用于设置作业时的多选
});
// 加载状态
const loading = ref(false);
// 弹窗显示状态
const showFrequencyPicker = ref(false);
const showCyclePicker = ref(false);
const showStartTimePicker = ref(false);
const showEndTimePicker = ref(false);
const showCoursePicker = ref(false);
......@@ -370,7 +382,7 @@ const endDate = ref(['2024', '12', '31']);
const minDate = new Date(2020, 0, 1);
const maxDate = new Date(2035, 11, 31);
const frequencyOptions = ref([]);
const cycleOptions = ref([]);
// 搜索值
const courseSearchValue = ref('');
......@@ -505,13 +517,13 @@ const formatDateTime = (date) => {
};
/**
* 频次选择确认
* 周期选择确认
* @param {Object} option - 选中的选项
*/
const onFrequencyConfirm = (option) => {
formData.value.frequency_text = option.selectedOptions[0].text;
formData.value.frequency = option.selectedOptions[0].value;
showFrequencyPicker.value = false;
const onCycleConfirm = (option) => {
formData.value.cycle_text = option.selectedOptions[0].text;
formData.value.cycle = option.selectedOptions[0].value;
showCyclePicker.value = false;
};
/**
......@@ -836,7 +848,7 @@ onMounted(async () => {
// 这里可以调用API获取课程、活动、年级、班级、小组等数据
const { code, data } = await getTeacherFindSettingsAPI();
if (code) {
frequencyOptions.value = Object.entries(data.task_frequency).map(([value, text]) => ({
cycleOptions.value = Object.entries(data.task_cycle).map(([value, text]) => ({
text,
value: String(value) // 确保值为字符串类型
}));
......@@ -920,14 +932,14 @@ onMounted(async () => {
margin-bottom: 8px;
}
/* 频次选择 */
.frequency-field {
/* 周期选择 */
.cycle-field {
background: #f5f5f5;
border-radius: 8px;
padding: 2px 0;
}
:deep(.frequency-field .van-field__control) {
:deep(.cycle-field .van-field__control) {
/* padding: 2px; */
text-align: center;
}
......