添加获取评价账号列表接口调用

src/api/step4Component.ts

@@ -0,0 +1,28 @@
+import request from '../utils/request.js'
+let teacherPrefix = import.meta.env.VITE_API_TEACHER_PRE 
+
+// 查询评价账号列表数据
+export const getReviewAccountListApi = (data:any) => {
+    return request({
+        url: `${teacherPrefix}/api/v1/account/queryEvaluationAccount`,
+        method: 'post',
+        data
+    })
+}
+
+// 生成评价码接口
+export const generateReviewCodeListApi = (data:any) => {
+    return request({
+        url: `${teacherPrefix}/api/v1/account/updateEvaluationAccount`,
+        method: 'post',
+        data
+    })
+}
+
+// 评价账号完成接口
+export const finishReviewAccountApi = (evaluationId:any) => {
+    return request({
+        url: `${teacherPrefix}/api/v1/account/finishAccount/${evaluationId}`,
+        method: 'get',
+    })
+}

src/views/reviewManagement/stepComponent/step4Component/Step4Component.vue

@@ -3,7 +3,10 @@
         <div class="page_search">
             <div class="search_content">
                 <div class="content_left">
-                    <el-checkbox v-model="isGenerateByGender" >按男女生成</el-checkbox>
+                    <el-checkbox v-model="isGenerateByGender"  
+                        @change="(val)=>GenerateAccountByGenderOrNot(val)" >
+                        按男女生成
+                    </el-checkbox>
                 </div>
                 <div class="content_right">
                     <el-button  class="delete_button_border_no_bg" @click="">全部清空</el-button>
@@ -22,8 +25,25 @@
             :totalNum="0"
             :hidePagination="true"
         >
-            <template v-for="item in 4" v-slot:[`num${item}`]="{row}">
-                {{ row[`num${item}`] }}
+            <template v-for="item in Object.values(originReviewAccount)" 
+                v-slot:[`class_${item.evaluationGradeId}`]="{row}" :key="item">
+                {{ row[`class_${item.evaluationGradeId}`]?.className }}
+            </template>
+
+            <template v-for="item in Object.values(originReviewAccount)" 
+                    v-slot:[`num_${item.evaluationGradeId}`]="{row}" :key="item">
+                    <!-- 没有班级的行不渲染 -->
+                <el-input v-if="row[`class_${item.evaluationGradeId}`]?.classId"  type="number"  v-model="row[`num_${item.evaluationGradeId}`]"   placeholder="请输入"/>
+            </template>
+
+            <template v-for="item in Object.values(originReviewAccount)" 
+                v-slot:[`male_${item.evaluationGradeId}`]="{row}" :key="item">
+                <el-input  v-if="row[`class_${item.evaluationGradeId}`]?.classId"  type="number"  v-model="row[`male_${item.evaluationGradeId}`]"   placeholder="请输入"/>
+            </template>
+
+            <template v-for="item in Object.values(originReviewAccount)" 
+                    v-slot:[`female_${item.evaluationGradeId}`]="{row}" :key="item">
+                <el-input v-if="row[`class_${item.evaluationGradeId}`]?.classId"   type="number"  v-model="row[`female_${item.evaluationGradeId}`]"   placeholder="请输入"/>
             </template>
         </Table>
 
@@ -32,8 +52,7 @@
             :visible="batchEditFormVisible" :defaultFormData="{}" 
             title="批量编辑" :submitLoading="batchEditFormLoading"
             @close="CloseBatchEditForm" 
-            @confirm="SaveBatchEditForm"
-            >
+            @confirm="SaveBatchEditForm">
 
             <template #form_pre>
                 <ul class="grade_form_item">
@@ -41,9 +60,9 @@
                         <div class="grade_name">{{ grade.gradeName }}</div>
                         <div class="class_list">
                             <el-checkbox
-                                :model-value="false"
-                                :indeterminate="false"
-                                @change="(val)=>{}"
+                                v-model="grade.isSelectAll"
+                                :indeterminate="grade.selectedClassList?.length < grade.classList?.length && grade.selectedClassList?.length !==0  ? true : false"
+                                @change="(val)=>HandleGradeSelectAllOrNot(grade,val)"
                             >
                                 全选
                             </el-checkbox>
@@ -54,6 +73,7 @@
                                 :key="checkItem.value"
                                 :label="checkItem.label"
                                 :value="checkItem.value"
+                                @change="(val)=>HandleGradeClassSelectChange(grade,val)"
                             />
                         </div>
                     </li>
@@ -62,9 +82,12 @@
 
 
             <template #footerRight="{formRef}">
-                <div class="batch_num">
-                    数量：
-                    <el-input  type="number"  v-model="batchAccountNum"   placeholder="请输入"/>
+                <div v-if="!isGenerateByGender" class="batch_num">
+                    <span>数量：<el-input  type="number"  v-model="batchAccountNum"   placeholder="请输入"/></span>
+                </div>
+                <div v-else class="group_batch_num">
+                    <span>男生：<el-input  type="number"  v-model="batchMaleNum"   placeholder="请输入"/></span>
+                    <span>女生：<el-input  type="number"  v-model="batchFemaleNum"   placeholder="请输入"/></span>
                 </div>
             </template>
         </FormDialog>
@@ -75,97 +98,150 @@
 
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
+
+import { useRoute } from 'vue-router';
+
 import Table from '@/baseComponents/Table.vue';
 import {tableColumns} from './table'
 import FormDialog from '@/baseComponents/FormDialog.vue';
 
-const isGenerateByGender = ref(false)  //所有单科统一模版
-
-// 生成 年级/班级 模拟数据
-const generateGradeClassTableData = () => {
-  const data = [];
-  for (let i = 1; i <= 3; i++) {
-    let row: any = {
-      grade1: ``,
-      class1:'',
-      num1:'',
-
-      grade2: ``,
-      class2:'',
-      num2:'',
-      
-
-      grade3: ``,
-      class3:'',
-      num3:'',
-
-      grade4: ``,
-      class4:'',
-      num4:'',
-      
-    };
-
-    if(i === 1){
-        row = {
-            grade1: `七年级`,
-            class1:'1班',
-            num1:'2',
-
-            grade2: `八年级`,
-            class2:'',
-            num2:'',
-            
-
-            grade3: ``,
-            class3:'',
-            num3:'',
-
-            grade4: ``,
-            class4:'',
-            num4:'4',
+import {
+    getReviewAccountListApi,generateReviewCodeListApi,finishReviewAccountApi,
+} from '@/api/step4Component'
+import { ElMessage } from 'element-plus';
+
+
+const route = useRoute()
+
+const isGenerateByGender = ref(false)  //按男女生成
+
+// 评价账号原始数据
+const originReviewAccount = ref({})
+// 渲染到表格中的评价账号数据
+const tableData = ref([]);
+// 表头初始赋值 和 表行初始赋值
+const GetReviewAccountList = async ()=>{
+    let params = {
+        evaluationId: route.query.id,
+        // "evaluationGradeId": 0,
+        // "evaluationClassId": 0,
+        // "gender": 0,
+        pageNum: 1,
+        pageSize: 20
+    }
+    let res = await getReviewAccountListApi(params)
+    if(res?.code == 200){
+        ElMessage.success(res?.msg)
+
+        let gradeMsg = res.data?.dataList || {}
+        originReviewAccount.value = gradeMsg || {}
+
+        //表头赋值
+        tableColumns.value = Object.values(gradeMsg)?.map(grade=>{
+            let gradeId =   grade.evaluationGradeId
+            return [
+                {
+                    name: `grade_${gradeId}`,
+                    label: '年级',
+                    width: '80',
+                    align: 'center',
+                    custom: false, 
+                    hidden: false,
+                },
+                {
+                    name: `class_${gradeId}`,
+                    label: '班级',
+                    width: '80',
+                    align: 'center',
+                    custom: true, 
+                    hidden: false,
+                },
+                {
+                    name: `num_${gradeId}`,
+                    label: '数量',
+                    width: '80',
+                    align: 'center',
+                    custom: true, 
+                    hidden: false,
+                },
+                {
+                    name: `male_${gradeId}`,
+                    label: '男生',
+                    width: '80',
+                    align: 'center',
+                    custom: true, 
+                    hidden: true,
+                },
+                {
+                    name: `female_${gradeId}`,
+                    label: '女生',
+                    width: '80',
+                    align: 'center',
+                    custom: true, 
+                    hidden: true,
+                },
+            ]
+        }).flat()
+
+        // 表行赋值
+        Object.values(gradeMsg)?.map(grade=>{
+            let gradeId =  grade.evaluationGradeId
+            let gradeName = grade.evaluationGradeName
+            let classDataList = grade.classData
             
-        }
-
+            classDataList.map((classItm,index)=>{
+                if(typeof tableData.value[index] !== 'object'){
+                    tableData.value[index] = {}
+                }
+                // 当前年级下的行赋值
+                tableData.value[index][`grade_${gradeId}`] = gradeName
+                tableData.value[index][`class_${gradeId}`] = {
+                    className:classItm.evaluationClassName,
+                    classId:classItm.evaluationClassId,
+                }
+                tableData.value[index][`num_${gradeId}`] = classItm.evaluationCount
+                tableData.value[index][`male_${gradeId}`] = classItm.boyCount
+                tableData.value[index][`female_${gradeId}`] = classItm.girlCount
+            })        
+        })
     }
-
-    data.push(row)
-
-  }
-
-  return data
-
 }
 
-// 生成模拟数据
-const tableData = ref(generateGradeClassTableData());
+// 打开/关闭 按男女生成
+const GenerateAccountByGenderOrNot = (val)=>{
+    if(val){
+        // 打开
+        tableColumns.value = tableColumns.value.map(item=>{
+            if(item?.name.startsWith('num_')){
+                item.hidden = true
+            }else if(item?.name.startsWith('male_') || item?.name.startsWith('female_')){
+                item.hidden = false
+            }
+            return item
+        })
+
+    }else{
+        // 关闭
+        tableColumns.value = tableColumns.value.map(item=>{
+            if(item?.name.startsWith('num_')){
+                item.hidden = false
+            }else if(item?.name.startsWith('male_') || item?.name.startsWith('female_')){
+                item.hidden = true
+            }
+            return item
+        })
+    }
+}
 
 
 
 // * 批量编辑弹窗操作
 const batchEditFormVisible = ref(false)
 const batchEditFormLoading = ref(false)
-const batchAccountNum = ref()
-const CloseBatchEditForm = ()=>{
-    batchEditFormVisible.value = false
-}
-const OpenBatchEditForm = ()=>{
-    batchEditFormVisible.value = true
-}
-const SaveBatchEditForm = (params:any)=>{
-    const {formData,formRef} = params
-    const batchData = batchEditGradeList.value.map(item=>{
-        return {
-            gradeName: item.gradeName,
-            gradeId: item.gradeId,
-            selectedClassList:item.selectedClassList
-        }
-    })
-    console.log('选中的批量数据--',batchData)
-    console.log('选中的批量数据-账号数量-',batchAccountNum)
-    // CloseBatchEditForm()
-}
-
+const batchAccountNum = ref()  //批量的所有数据
+const batchFemaleNum = ref()  //批量的女性数据
+const batchMaleNum = ref()  //批量的男性数据
 // 生成批量编辑弹窗模拟数据
 const batchEditGradeList = ref([
     {
@@ -185,7 +261,9 @@ const batchEditGradeList = ref([
             { label: '英语A2班', value: '7_9' },
             { label: '英语A2班', value: '7_10' }
         ],
-        selectedClassList:[]
+        selectedClassList:[],
+        isSelectAll:false
+
     },
     {
         gradeName: '八年级',
@@ -204,7 +282,8 @@ const batchEditGradeList = ref([
             { label: '英语A2班', value: '8_9' },
             { label: '英语A2班', value: '8_10' }
         ],
-        selectedClassList:[]
+        selectedClassList:[],
+        isSelectAll:false
     },
     {
         gradeName: '九年级',
@@ -223,9 +302,75 @@ const batchEditGradeList = ref([
             { label: '英语A2班', value: '9_9' },
             { label: '英语A2班', value: '9_10' }
         ],
-        selectedClassList:[]
+        selectedClassList:[],
+        isSelectAll:false
     }
 ]);
+// 关闭批量编辑弹窗
+const CloseBatchEditForm = ()=>{
+    batchEditFormVisible.value = false
+    batchAccountNum.value = null
+    batchMaleNum.value = null
+    batchFemaleNum.value = null
+}
+// 打开批量编辑弹窗
+const OpenBatchEditForm = ()=>{
+    batchEditFormVisible.value = true
+}
+
+// 保存批量编辑配置 —— 
+const SaveBatchEditForm = (params:any)=>{
+    const {formData,formRef} = params
+    const batchData = batchEditGradeList.value.map(item=>{
+        return {
+            gradeName: item.gradeName,
+            gradeId: item.gradeId,
+            selectedClassList:item.selectedClassList
+        }
+    })
+    console.log('选中的批量数据--',batchData)
+    console.log('选中的批量数据-账号数量-',batchAccountNum)
+    // CloseBatchEditForm()
+}
+
+// 年级全选/全不选
+const HandleGradeSelectAllOrNot = (grade,val)=>{
+    if(val){
+        // 全选
+        batchEditGradeList.value = batchEditGradeList.value.map(item=>{
+            if(item.gradeId == grade.gradeId){
+                item.selectedClassList = item.classList.map(classItm=>{
+                    return classItm.value
+                })
+            }
+            return item
+        })
+    }else{{
+        // 全不选
+         batchEditGradeList.value = batchEditGradeList.value.map(item=>{
+            if(item.gradeId == grade.gradeId){
+                item.selectedClassList = []
+            }
+            return item
+        })
+    }}
+}
+
+// 年级下 班级选择的变更
+const HandleGradeClassSelectChange = (grade,val)=>{
+    batchEditGradeList.value = batchEditGradeList.value.map(item=>{
+        if(item.gradeId == grade.gradeId){
+            item.isSelectAll = grade.selectedClassList?.length === grade.classList?.length && grade.selectedClassList?.length !==0 ? true : false
+        }
+        return item
+    })
+}
+
+
+onMounted(async ()=>{
+    await GetReviewAccountList()
+
+})
 
 </script>
 
@@ -252,11 +397,20 @@ const batchEditGradeList = ref([
 
 }
 
+.group_batch_num,
 .batch_num{
-    // border:solid red 1px;
     display: flex;
     align-items: center;
+    gap:20px;
     word-break: keep-all;
+
+    > span{
+        display: flex;
+        align-items: center;
+        word-break: keep-all;
+    }
 }
 
+
+
 </style>

src/views/reviewManagement/stepComponent/step4Component/table.ts

@@ -1,34 +1,4 @@
 import {ref} from 'vue'
 
-const mockColumnData = []
 
-for(let i = 1;i<7;i++){
-    mockColumnData.push(...[
-        {
-            name: `grade${i}`,
-            label: '年级',
-            width: '80',
-            align: 'center',
-            custom: false, 
-            hidden: false,
-        },
-        {
-            name: `class${i}`,
-            label: '班级',
-            width: '80',
-            align: 'center',
-            custom: false, 
-            hidden: false,
-        },
-        {
-            name: `num${i}`,
-            label: '数量',
-            width: '80',
-            align: 'left',
-            custom: true, // 需要渲染输入框/选择器 + 预览按钮
-            hidden: false,
-        },
-    ])
-}
-
-export const tableColumns = ref([...mockColumnData])
+export const tableColumns = ref([])