|
|
@@ -0,0 +1,303 @@
|
|
|
+<template>
|
|
|
+ <div class="app_container">
|
|
|
+ <!-- 顶部科目选择区域 -->
|
|
|
+ <div class="section">
|
|
|
+ <div class="section_title">选择科目 (6选3):</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"/>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 动态渲染的班级列表区域 -->
|
|
|
+ <template v-for="sub in selectedSubjectDetail" :key="sub.id">
|
|
|
+ <div class="section">
|
|
|
+ <div class=" section_title">{{ sub.name }}班级:</div>
|
|
|
+ <!-- 模拟数据：每个科目生成多个班级选项 -->
|
|
|
+ <el-radio-group
|
|
|
+ v-model="selected_classes[sub.id]"
|
|
|
+ class="radio_group_list">
|
|
|
+ <el-radio v-for="n in 10" :key="n" :value="n">
|
|
|
+ {{ sub.name }}{{ n }}班
|
|
|
+ </el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 底部确认按钮 -->
|
|
|
+ <div class="bottom_action_bar">
|
|
|
+ <el-button class="button_background" @click="handle_confirm">确认</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { onMounted, ref,computed } from 'vue';
|
|
|
+
|
|
|
+import {getEvaluationSubjectApi} from '@/api/questionnaireTaskListPage'
|
|
|
+
|
|
|
+
|
|
|
+// 存储 获取到的选科 和教学班数据
|
|
|
+const electiveFormItm = ref() // 选科 form项配置
|
|
|
+const noElectiveTeachingSubjectFormItms = ref([]) // 非选科 教学班form项配置
|
|
|
+const electiveSubjectClassData = ref([]) // 所有的选科教学班数据 ————后续动态过滤
|
|
|
+
|
|
|
+
|
|
|
+// 存储选中的 选科/班级 项目
|
|
|
+const selectedElectives = ref([]) // 选中的选科项
|
|
|
+const selectedTeachingClass = ref<Record<string,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 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 },
|
|
|
+]);
|
|
|
+
|
|
|
+// 存储已选科目的班级ID，结构如: { phy: 1, chem: 2 }
|
|
|
+const selected_classes = ref({});
|
|
|
+
|
|
|
+// 获取当前已选中的科目列表
|
|
|
+const selectedSubjects = ref([])
|
|
|
+
|
|
|
+const selectedSubjectDetail = computed(()=>{
|
|
|
+ return subjectList.value.filter(subject=>{
|
|
|
+ return selectedSubjects.value?.includes(subject.id)
|
|
|
+ })
|
|
|
+})
|
|
|
+
|
|
|
+// 切换科目选中状态
|
|
|
+const handleSelectChange = ()=>{
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// 点击确认
|
|
|
+const handle_confirm = () => {
|
|
|
+ console.log('选科结果:', selectedSubjects.value);
|
|
|
+ console.log('班级选择:', selected_classes.value);
|
|
|
+ // 这里可以添加校验逻辑，例如必须为每个选中的科目选择班级
|
|
|
+ alert('提交成功，请查看控制台输出');
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.app_container {
|
|
|
+ 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)); /* 为底部按钮留出空间 */
|
|
|
+}
|
|
|
+
|
|
|
+.section{
|
|
|
+ .section_title {
|
|
|
+ font-weight: 600;
|
|
|
+ color: #000000;
|
|
|
+ font-size: calc(16 * var(--app-rpx));
|
|
|
+ margin-bottom: calc(16 * var(--app-rpx));
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.check_group_btn_list{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap:calc(16 * var(--app-rpx));
|
|
|
+
|
|
|
+ :deep(.el-checkbox-button){
|
|
|
+ .el-checkbox-button__inner{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 4px;
|
|
|
+ border:solid #dcdfe6 1px;
|
|
|
+ width: calc(72 * var(--app-rpx));
|
|
|
+ height: calc( 40 * var(--app-rpx));
|
|
|
+ font-size:calc( 16 * var(--app-rpx));
|
|
|
+ &:hover {
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.is-focus{
|
|
|
+ .el-checkbox-button__inner{
|
|
|
+ border:solid #dcdfe6 1px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.is-checked{
|
|
|
+ .el-checkbox-button__inner{
|
|
|
+ background: #2E64FA;
|
|
|
+ border: 1px solid #2E64FA;
|
|
|
+ color: #fff;
|
|
|
+ &:hover {
|
|
|
+ background: #2E64FA;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.radio_group_list{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap:calc(12 * var(--app-rpx));
|
|
|
+ :deep(.el-radio){
|
|
|
+ margin:0;
|
|
|
+ .el-radio__inner{
|
|
|
+ width: calc(14 * var(--app-rpx));
|
|
|
+ height: calc(14 * var(--app-rpx));
|
|
|
+ &::after{
|
|
|
+ width: calc(4 * var(--app-rpx));
|
|
|
+ height: calc(4 * var(--app-rpx));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-radio__label{
|
|
|
+ min-width: calc(80 * var(--app-rpx));
|
|
|
+ font-size:calc(14 * var(--app-rpx));
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/* --- 底部按钮 --- */
|
|
|
+.bottom_action_bar {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: calc(20 * var(--app-rpx));
|
|
|
+ z-index: 100;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .button_background {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(44 * var(--app-rpx));
|
|
|
+ border-radius: calc(4 * var(--app-rpx));
|
|
|
+ font-size: calc(16 * var(--app-rpx));
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
lm