添加带选课任务的弹窗接口调用

src/api/questionnaireTaskListPage.ts

@@ -0,0 +1,12 @@
+import request from '../utils/request.ts'
+
+
+let studentPrefix = import.meta.env.VITE_API_STUDENT_PRE 
+
+// 查询选科数据
+export const getEvaluationSubjectApi = () => {
+  return request({
+    url: `${studentPrefix}/api/v1/assessment/center/evaluation/querySubject`,
+    method: 'get',
+  })
+}

src/components/subjectAndClassChooseDialog/SubjectAndClassChooseDialog.vue

@@ -4,6 +4,7 @@
         :submitLoading="formSubmitLoading"
         :title="formTitle" :visible="formVisible"
         :formItemList="formItemList"
+        @formItemChange="HandleFormChange"
         @close="CloseFormDialog"
         @confirm="ConfirmFormDialog"
         >
@@ -17,6 +18,21 @@ import { onMounted, ref } from 'vue';
 import FormDialog from '@/baseComponents/FormDialog.vue';
 import {formItemList} from './formDialog'
 
+import {getEvaluationSubjectApi} from '@/api/questionnaireTaskListPage'
+
+const emit = defineEmits(['confirm'])
+
+
+// 存储 获取到的选科 和教学班数据
+const electiveFormItm = ref()   // 选科 form项配置
+const noElectiveTeachingSubjectFormItms = ref([])   // 非选科 教学班form项配置
+const electiveSubjectClassData = ref([])   // 所有的选科教学班数据  ————后续动态过滤
+
+
+// 存储选中的 选科/班级   项目
+const selectedElectives = ref([])  // 选中的选科项
+const selectedTeachingClass = ref<Record<string,string[]>>({}) // 选中的教学班 班级项
+
 
 // 选择科目/班级弹窗
 const formVisible = defineModel('formVisible')
@@ -24,22 +40,147 @@ const defaultFormData = ref({})
 const formSubmitLoading = ref(false)
 const formTitle = ref('选择科目班级')
 
-const emit = defineEmits(['confirm'])
 const CloseFormDialog = ()=>{
     formVisible.value = false
 }
-
 const ConfirmFormDialog = (params)=>{
     const {formData,formRef} = params
     console.log('提交的表单信息---',formData)
     CloseFormDialog()
-
     // 处理问卷组合的选择
     emit('confirm')
 }
 
-onMounted(()=>{
+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)
+        }
+        // 动态的 选科 科目班级  配置（展示）项列表
+        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,
+            }
+        })
+        // 动态变更 教学班选项的显示隐藏
+        formItemList.value = electiveFormItm.value ? [
+            electiveFormItm.value,
+            ...noElectiveTeachingSubjectFormItms.value,
+            ...finalElectiveTeachingSubjectData
+        ] : noElectiveTeachingSubjectFormItms.value
+    }
+}
+
+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
+    }
+
 })
 
 </script>