添加问卷选科接口调用

src/api/questionnaireTaskListPage.ts

@@ -9,4 +9,14 @@ export const getEvaluationSubjectApi = () => {
     url: `${studentPrefix}/api/v1/assessment/center/evaluation/querySubject`,
     method: 'get',
   })
+}
+
+
+// 保存选科数据
+export const saveEvaluationSubjectApi = (data:any) => {
+  return request({
+    url: `${studentPrefix}/api/v1/assessment/center/evaluation/saveSelectSubject`,
+    method: 'post',
+    data
+  })
 }

src/components/subjectAndClassChooseDialog/SubjectAndClassChooseDialog.vue

@@ -18,17 +18,18 @@ import { onMounted, ref } from 'vue';
 import FormDialog from '@/baseComponents/FormDialog.vue';
 import {formItemList} from './formDialog'
 
-import {getEvaluationSubjectApi} from '@/api/questionnaireTaskListPage'
+import {getEvaluationSubjectApi,saveEvaluationSubjectApi} from '@/api/questionnaireTaskListPage'
 
 const emit = defineEmits(['confirm'])
 
 
 // 存储 获取到的选科 和教学班数据
 const electiveFormItm = ref()   // 选科 form项配置
+const electiveNeedCount = ref(0)   //选科必选数量
+
 const noElectiveTeachingSubjectFormItms = ref([])   // 非选科 教学班form项配置
 const electiveSubjectClassData = ref([])   // 所有的选科教学班数据  ————后续动态过滤
 
-
 // 存储选中的 选科/班级   项目
 const selectedElectives = ref([])  // 选中的选科项
 const selectedTeachingClass = ref<Record<string,string[]>>({}) // 选中的教学班 班级项
@@ -43,22 +44,41 @@ const formTitle = ref('选择科目班级')
 const CloseFormDialog = ()=>{
     formVisible.value = false
 }
-const ConfirmFormDialog = (params)=>{
+const ConfirmFormDialog = async (params)=>{
+    formSubmitLoading.value = true
     const {formData,formRef} = params
     console.log('提交的表单信息---',formData)
-    CloseFormDialog()
-    // 处理问卷组合的选择
-    emit('confirm')
+   
+    // 保存表单信息
+    let subjectClassObj = {...formData}
+    delete subjectClassObj.electiveSubject
+    let evaluationSubjectIds = formData.electiveSubject
+    let evaluationClassIds = Object.values(subjectClassObj)
+    let transferParams = {
+        evaluationSubjectIds,
+        evaluationClassIds
+    }
+    let res = undefined
+    try{
+        res = await saveEvaluationSubjectApi(transferParams)
+    }catch{}
+    if(res?.code == 200){
+        CloseFormDialog()
+        emit('confirm')
+    }
+    formSubmitLoading.value = false
 }
 
 const HandleFormChange = (params)=>{
     const {key,val,formData} = params
     if(key == 'electiveSubject'){
         console.log('触发的变化',key,val)
+
+        // 数量不定
         // 先要限制科目数量
-        if(val.length >2){
-            formData[key].splice(0, val.length- 2)
-        }
+        // if(val.length > electiveNeedCount.value){
+        //     formData[key].splice(0, val.length- electiveNeedCount.value)
+        // }
         // 动态的 选科 科目班级  配置（展示）项列表
         let finalElectiveTeachingSubjectData = electiveSubjectClassData.value.filter(item=>{
             return val.includes(item.evaluationSubjectId)
@@ -88,6 +108,22 @@ const HandleFormChange = (params)=>{
     }
 }
 
+// 数组长度校验
+const validateArrayLength = (limitLength:number)=> (rule, value, callback) => {
+    // value 即为绑定的数组
+    if (!value || value.length === 0) {
+        return callback(new Error('请至少选择一项'));
+    }
+    if (value.length < limitLength) {
+        return callback(new Error(`最少需要选择${limitLength}项`));
+    }
+    if (value.length > limitLength) {
+        return callback(new Error(`最多只能选择${limitLength}项`));
+    }
+    // 校验通过
+    callback();
+};
+
 onMounted( async()=>{
     console.log('加载了')
     let res = await getEvaluationSubjectApi()
@@ -107,8 +143,8 @@ onMounted( async()=>{
             return itm.id
         })
 
-
         // 选科表单项配置
+        electiveNeedCount.value = needCount
         // selectionStatus 选科状态，0-未勾选，1-已勾选
         if(selectionStatus == 1){
             electiveFormItm.value = {
@@ -116,7 +152,8 @@ onMounted( async()=>{
                 label: `选择科目（${selectionCount}选${needCount}）`,
                 type:'checkboxButton',
                 rules:[
-                    {required:true,trigger:'blur',message:'请选择'}
+                    {required:true,trigger:'change',message:'请选择'},
+                    { validator: validateArrayLength(needCount), trigger: 'change' }     // 长度校验
                 ],
                 hidden:false,
                 custom:false,

src/components/subjectAndClassChooseDialog/formDialog.ts

@@ -1,101 +1,2 @@
 import { ref } from "vue";
-
-
-export const formItemList = ref([
-    {
-        key: 'subject',
-        label: '选择科目（6选3）',
-        type:'checkboxButton',
-        rules:[
-            {required:true,trigger:'blur',message:'请选择'}
-        ],
-        hidden:false,
-        custom:false,
-        style:{},
-        selectList:[
-            {
-                label:'物理',
-                value:'1'
-            },
-            {
-                label:'化学',
-                value:'2'
-            },
-            {
-                label:'生物',
-                value:'3'
-            },
-            {
-                label:'政治',
-                value:'4'
-            },
-            {
-                label:'历史',
-                value:'5'
-            },
-            {
-                label:'地理',
-                value:'6'
-            },
-             {
-                label:'英语',
-                value:'7'
-            },
-            {
-                label:'语文',
-                value:'8'
-            },
-
-        ],
-    },
-
-    {
-        key: 'subject1',
-        label: '不定向科目',
-        type:'radio',
-        rules:[
-            {required:true,trigger:'blur',message:'请选择'}
-        ],
-        hidden:false,
-        custom:false,
-        style:{},
-        selectList:[
-            {
-                label:'物理3班',
-                value:'1'
-            },
-            {
-                label:'物理3班',
-                value:'2'
-            },
-            {
-                label:'物理3班',
-                value:'3'
-            },
-            {
-                label:'物理3班',
-                value:'4'
-            },
-            {
-                label:'物理3班',
-                value:'5'
-            },
-            {
-                label:'物理3班',
-                value:'6'
-            },
-            {
-                label:'物理3班',
-                value:'7'
-            },
-            {
-                label:'物理3班',
-                value:'8'
-            },
-            {
-                label:'物理3班',
-                value:'9'
-            },
-        ],
-    },
-])
+export const formItemList = ref([])

src/views/appView/QuestionnaireElectiveSubject.vue

@@ -1,35 +1,49 @@
 <template>
      <div class="app_container">
         <!-- 顶部科目选择区域 -->
-        <div class="section">
-            <div class="section_title">选择科目 (6选3):</div>
+        <div class="section" v-if="electiveFormItm?.label">
+            <div class="section_title">{{electiveFormItm?.label}}:</div>
             <el-checkbox-group  
                 v-model="selectedSubjects"
                 class="check_group_btn_list"
                 @change="(val)=>handleSelectChange(val)">
                 <el-checkbox-button 
-                    v-for="checkItem in subjectList" 
-                    :key="checkItem.id"
-                    :label="checkItem.name"
-                    :value="checkItem.id"/>
+                    v-for="checkItem in electiveFormItm?.selectList" 
+                    :key="checkItem.value"
+                    :label="checkItem.label"
+                    :value="checkItem.value"/>
             </el-checkbox-group>
         </div>
 
-        <!-- 动态渲染的班级列表区域 -->
-        <template v-for="sub in selectedSubjectDetail" :key="sub.id">
+        <!-- 非选科班级列表 -->
+        <template v-for="sub in noElectiveTeachingSubjectFormItms" :key="sub.key">
             <div class="section">
-                <div class=" section_title">{{ sub.name }}班级:</div>
-                <!-- 模拟数据：每个科目生成多个班级选项 -->
+                <div class=" section_title">{{ sub.label }}:</div>
                 <el-radio-group 
-                    v-model="selected_classes[sub.id]" 
+                    v-model="selectedSubjectClasses[sub.key]" 
                     class="radio_group_list">
-                    <el-radio v-for="n in 10" :key="n" :value="n">
-                        {{ sub.name }}{{ n }}班
+                    <el-radio v-for="classItm in sub.selectList" :key="classItm.value" :value="classItm.value">
+                        {{ classItm.label }}
                     </el-radio>
                 </el-radio-group>
             </div>
         </template>
 
+        <!-- 动态渲染选科的班级列表区域 -->
+        <template v-for="sub in electiveTeachingSubjectFormItms" :key="sub.key">
+            <div class="section">
+                <div class=" section_title">{{ sub.label }}:</div>
+                <el-radio-group 
+                    v-model="selectedSubjectClasses[sub.key]" 
+                    class="radio_group_list">
+                    <el-radio v-for="classItm in sub.selectList" 
+                            :key="classItm.value" 
+                            :value="classItm.value">
+                        {{ classItm.label }}
+                    </el-radio>
+                </el-radio-group>
+            </div>
+        </template>
         <!-- 底部确认按钮 -->
         <div class="bottom_action_bar">
             <el-button class="button_background" @click="handle_confirm">确认</el-button>
@@ -41,159 +55,210 @@
 
 <script setup lang="ts">
 import { onMounted, ref,computed } from 'vue';
+import { useRouter } from 'vue-router';
+import {getEvaluationSubjectApi, saveEvaluationSubjectApi} from '@/api/questionnaireTaskListPage'
+import { ElMessage } from 'element-plus';
+
+
+interface FormItm  {
+    key: String,
+    label: String,
+    type?:string,
+    rules?: any[],
+    hidden?: Boolean,
+    custom:Boolean,
+    style: Record<string, any>,
+    selectList?: { label: string, value: any }[] | [],
+}
 
-import {getEvaluationSubjectApi} from '@/api/questionnaireTaskListPage'
 
+const router = useRouter()
 
 // 存储 获取到的选科 和教学班数据
-const electiveFormItm = ref()   // 选科 form项配置
-const noElectiveTeachingSubjectFormItms = ref([])   // 非选科 教学班form项配置
+const electiveFormItm = ref<FormItm|null>({})   // 选科 form项配置
+const noElectiveTeachingSubjectFormItms = ref<FormItm[]>([])   // 非选科 教学班form项配置
 const electiveSubjectClassData = ref([])   // 所有的选科教学班数据  ————后续动态过滤
+const electiveTeachingSubjectFormItms = ref<FormItm[]>([])   // 选科 教学班form项配置 _动态变量
 
+const electiveNeedCount = ref(0)  //选科的必选数量
 
 // 存储选中的 选科/班级   项目
 const selectedElectives = ref([])  // 选中的选科项
 const selectedTeachingClass = ref<Record<string,string[]>>({}) // 选中的教学班 班级项
 
+// 选中的信息
+const selectedSubjectClasses = ref<Record<string,string>>({});  // 已选科目的班级id 列表
+const selectedSubjects = ref<string[]>([]) // 已选中的科目列表
 
-onMounted( async()=>{
-    // console.log('加载了')
-    // let res = await getEvaluationSubjectApi()
-    // if(res?.code == 200){
-    //     const {classData, subjectData,needCount,selectionCount,selectionStatus } = res.data
-
-    //     // 1.  选科数据 配置项
-    //     let electiveSubjectOptions = subjectData?.map(item=>{
-    //         return {
-    //             label:item.name,
-    //             value:item.id
-    //         }
-    //     }) || []
-    //     selectedElectives.value = subjectData?.filter(subject=>{
-    //         return subject.usedStatus    // 是否选中，false-否，true-是
-    //     }).map(itm=>{
-    //         return itm.id
-    //     })
-
-
-    //     // 选科表单项配置
-    //     // selectionStatus 选科状态，0-未勾选，1-已勾选
-    //     if(selectionStatus == 1){
-    //         electiveFormItm.value = {
-    //             key: 'electiveSubject',
-    //             label: `选择科目（${selectionCount}选${needCount}）`,
-    //             type:'checkboxButton',
-    //             rules:[
-    //                 {required:true,trigger:'blur',message:'请选择'}
-    //             ],
-    //             hidden:false,
-    //             custom:false,
-    //             style:{},
-    //             selectList:electiveSubjectOptions,
-    //         }
-    //     }else{
-    //         electiveFormItm.value = null
-    //     }
-
-
-    //     // 2. 教学班数据
-    //     // 分为在选科中的和不在选科中的
-    //     // （1）非选科的 科目教学班数据
-    //     const noElectiveSubjectClassData = classData.filter(item=>{
-    //         return item.subjectStatus === 0
-    //     })
-    //      // 非选科的 科目教学班配置项列表
-    //     noElectiveTeachingSubjectFormItms.value = noElectiveSubjectClassData.map(subjectMsg=>{
-    //         let classOpts = subjectMsg?.classData?.map(classItm=>{
-    //             return {label:classItm.name, value:classItm.id}
-    //         }) || []
-
-    //         return {
-    //             key: subjectMsg.evaluationSubjectId,
-    //             label: subjectMsg.subjectName,
-    //             type:'radio',
-    //             rules:[
-    //                 {required:true,trigger:'blur',message:'请选择'}
-    //             ],
-    //             hidden:false,
-    //             custom:false,
-    //             style:{},
-    //             selectList:classOpts,
-    //         }
-    //     })
-
-
-    //     // （2）选科 的科目教学班数据
-    //     electiveSubjectClassData.value = classData?.filter(item=>{
-    //         return item.subjectStatus === 1
-    //     }) || []
-
-
-    //     //（3） 每个科目的默认选中班级赋值
-    //     classData?.map(subjectClass=>{
-    //         let selectedClass = subjectClass.classData.filter(classItm=>{
-    //             return classItm.usedStatus
-    //         }).map(itm=>{
-    //             return  itm.id
-    //         })
-    //         selectedTeachingClass.value[subjectClass.evaluationSubjectId] = selectedClass
-    //     })
-
-       
-
-    //     // 3. 最终的教学班配置项列表
-    //     // 默认只显示 非选科中的科目教学班数据
-    //     // formItemList.value =electiveFormItm.value ? [
-    //     //     electiveFormItm.value,
-    //     //     ...noElectiveTeachingSubjectFormItms.value
-    //     // ] : noElectiveTeachingSubjectFormItms.value
+
+
+// 切换科目选中状态
+const handleSelectChange = (val)=>{
+    // 先要限制科目数量
+    // if(val.length >2){
+    //     selectedSubjects.value.splice(0, val.length- 2)
     // }
 
-})
+    // 选中状态也需要更新
+    let exitstSelectedKeys = Object.keys(selectedSubjectClasses.value)
+    let fixedKeys= noElectiveTeachingSubjectFormItms.value?.map(item=>item.key)
+    let deleteKeys = exitstSelectedKeys.filter(key=>{
+        !(fixedKeys.includes(key) || val.includes(key))
+    })
+    // 删除不在页面上展示的已选中班级项
+    deleteKeys.map(item=>{
+        delete selectedSubjectClasses.value[item]
+    })
 
 
-// ======================================
+    // 动态的 选科 科目班级  配置（展示）项列表
+    let finalElectiveTeachingSubjectData = electiveSubjectClassData.value.filter(item=>{
+        return val.includes(item.evaluationSubjectId)
+    })?.map(subjectMsg=>{
+        let classOpts = subjectMsg?.classData?.map(classItm=>{
+            return {label:classItm.name, value:classItm.id}
+        }) || []
+        return {
+            key: subjectMsg.evaluationSubjectId,
+            label: subjectMsg.subjectName,
+            type:'radio',
+            rules:[
+                {required:true,trigger:'blur',message:'请选择'}
+            ],
+            hidden:false,
+            custom:false,
+            style:{},
+            selectList:classOpts,
+        }
+    })
+    // // 动态变更 教学班选项的信息
+    electiveTeachingSubjectFormItms.value = finalElectiveTeachingSubjectData
+}
 
 
 
+// 点击确认
+const handle_confirm = async () => {
+    let evaluationSubjectIds = selectedSubjects.value
 
-// 初始化科目数据
-const subjectList = ref([
-    { id: 'phy', name: '物理', is_selected: true },
-    { id: 'chem', name: '化学', is_selected: true },
-    { id: 'bio', name: '生物', is_selected: true },
-    { id: 'pol', name: '政治', is_selected: false },
-    { id: 'his', name: '历史', is_selected: false },
-    { id: 'geo', name: '地理', is_selected: false },
-]);
+    let subjectClassObj = {...selectedSubjectClasses.value}
 
-// 存储已选科目的班级ID，结构如: { phy: 1, chem: 2 }
-const selected_classes = ref({});
 
-// 获取当前已选中的科目列表
-const selectedSubjects = ref([])
+    // 最终提交只保留 展示的项
+    let evaluationClassIds = Object.values(subjectClassObj)
 
-const selectedSubjectDetail = computed(()=>{
-    return subjectList.value.filter(subject=>{
-        return selectedSubjects.value?.includes(subject.id)
-    })
-})
 
-// 切换科目选中状态
-const handleSelectChange = ()=>{
+    if(evaluationSubjectIds.length > electiveNeedCount.value){
+        ElMessage.warning(`选科数量最多为${electiveNeedCount.value}个`)
+        return
+    }else if(evaluationSubjectIds.length < electiveNeedCount.value){
+        ElMessage.warning(`选科数量最少为${electiveNeedCount.value}个`)
+        return 
+    }
+    if(evaluationClassIds.length < (noElectiveTeachingSubjectFormItms.value.length + electiveTeachingSubjectFormItms.value.length)){
+        ElMessage.warning('请确保选科班级填写完整')
+        return
+    }
+    
+    let transferParams = {
+        evaluationSubjectIds,
+        evaluationClassIds
+    }
+    let res = undefined
+    try{
+        res = await saveEvaluationSubjectApi(transferParams)
+    }catch{}
+    if(res?.code == 200){
+        router.push('/app/selfQuestionnaireProcess')
+    }
+};
 
-}
 
+onMounted( async()=>{
+    console.log('加载了')
+    let res = await getEvaluationSubjectApi()
+    if(res?.code == 200){
+        const {classData, subjectData,needCount,selectionCount,selectionStatus } = res.data
+
+        // 1.  选科数据 配置项
+        let electiveSubjectOptions = subjectData?.map(item=>{
+            return {
+                label:item.name,
+                value:item.id
+            }
+        }) || []
+        selectedElectives.value = subjectData?.filter(subject=>{
+            return subject.usedStatus    // 是否选中，false-否，true-是
+        }).map(itm=>{
+            return itm.id
+        })
+
+
+        // 选科表单项配置
+        electiveNeedCount.value = needCount
+        // selectionStatus 选科状态，0-未勾选，1-已勾选
+        if(selectionStatus == 1){
+            electiveFormItm.value = {
+                key: 'electiveSubject',
+                label: `选择科目（${selectionCount}选${needCount}）`,
+                type:'checkboxButton',
+                rules:[
+                    {required:true,trigger:'blur',message:'请选择'}
+                ],
+                hidden:false,
+                custom:false,
+                style:{},
+                selectList:electiveSubjectOptions,
+            }
+        }else{
+            electiveFormItm.value = null
+        }
 
 
+        // 2. 教学班数据
+        // 分为在选科中的和不在选科中的
+        // （1）非选科的 科目教学班数据
+        const noElectiveSubjectClassData = classData.filter(item=>{
+            return item.subjectStatus === 0
+        })
+         // 非选科的 科目教学班配置项列表
+        noElectiveTeachingSubjectFormItms.value = noElectiveSubjectClassData.map(subjectMsg=>{
+            let classOpts = subjectMsg?.classData?.map(classItm=>{
+                return {label:classItm.name, value:classItm.id}
+            }) || []
+
+            return {
+                key: subjectMsg.evaluationSubjectId,
+                label: subjectMsg.subjectName,
+                type:'radio',
+                rules:[
+                    {required:true,trigger:'blur',message:'请选择'}
+                ],
+                hidden:false,
+                custom:false,
+                style:{},
+                selectList:classOpts,
+            }
+        })
+
+
+        // （2）选科 的科目教学班数据
+        electiveSubjectClassData.value = classData?.filter(item=>{
+            return item.subjectStatus === 1
+        }) || []
 
-// 点击确认
-const handle_confirm = () => {
-    console.log('选科结果:', selectedSubjects.value);
-    console.log('班级选择:', selected_classes.value);
-    // 这里可以添加校验逻辑，例如必须为每个选中的科目选择班级
-    alert('提交成功，请查看控制台输出');
-};
+
+        //（3） 每个科目的默认选中班级赋值
+        classData?.map(subjectClass=>{
+            let selectedClass = subjectClass.classData.filter(classItm=>{
+                return classItm.usedStatus
+            }).map(itm=>{
+                return  itm.id
+            })
+            selectedTeachingClass.value[subjectClass.evaluationSubjectId] = selectedClass
+        })
+    }
+})
 
 
 </script>
@@ -205,11 +270,18 @@ const handle_confirm = () => {
     display: flex;
     flex-direction: column;
     gap:calc(32 * var(--app-rpx));
+    
     overflow: auto;
     width: 100%;
     min-height: 100vh;
     background-color: #ffffff;
-    padding:calc(30 * var(--app-rpx)) calc(19 * var(--app-rpx)) calc(104 * var(--app-rpx)); /* 为底部按钮留出空间 */
+    
+    // 44px塌陷 ___原因未找到———— 待完善
+    padding:calc(30 * var(--app-rpx)) calc(19 * var(--app-rpx)) calc((84 + 20 + 44) * var(--app-rpx)); /* 为底部按钮留出空间 */
+
+    > * {
+        flex-shrink: 0;
+    }
 }
 
 .section{

src/views/questionnaireTaskListPage/QuestionnaireTaskListPage.vue

@@ -55,7 +55,8 @@ const formVisible = ref(false)
 const OpenFormDialog = ()=>{
     formVisible.value = true
 }
-const ConfirmFormDialog = (params)=>{
+// 表单提交后的后续逻辑
+const ConfirmFormDialog = ()=>{
     router.push('/main/selfQuestionnaireProcess')
 }