添加教学班教师授课关系交互

src/api/step2Component.ts

@@ -0,0 +1,45 @@
+import request from '../utils/request.js'
+let teacherPrefix = import.meta.env.VITE_API_TEACHER_PRE 
+
+// 查询授课关系表格数据
+export const getTeachingRelationshipTableDataApi = (evaluationGradeId:any) => {
+    return request({
+        url: `${teacherPrefix}/api/v1/teacherRelation/queryTeachingRelationData/${evaluationGradeId}`,
+        method: 'get',
+    })
+}
+
+// 查询教师列表 数据
+export const getTeacherListDataApi = (data:any) => {
+    return request({
+        url: `${teacherPrefix}/api/v1/teacherRelation/queryTableTeacher`,
+        method: 'post',
+        data
+    })
+}
+
+// 保存授课关系
+export const saveTeachingRelationshipApi = (data:any) => {
+    return request({
+        url: `${teacherPrefix}/api/v1/teacherRelation/saveTeachingRelation`,
+        method: 'post',
+        data
+    })
+}
+
+// 删除授课关系
+export const deleteTeachingRelationshipApi = (id:any) => {
+    return request({
+        url: `${teacherPrefix}/api/v1/teacherRelation/deleteTeachingRelation/${id}`,
+        method: 'get',
+    })
+}
+
+
+// 授课关系完成操作
+export const finishTeachingRelationshipApi = () => {
+    return request({
+        url: `${teacherPrefix}/api/v1/teacherRelation/finishTeachingRelationMuti`,
+        method: 'get',
+    })
+}

src/views/reviewManagement/stepComponent/step2Component/Step2Component.vue

@@ -17,10 +17,12 @@
         <div class="container_right">
           <div class="search_content">
             <div class="content_left">
-              <el-radio-group v-model="activeGrade" size="default">
-                <el-radio-button label="七年级">七年级</el-radio-button>
-                <el-radio-button label="八年级">八年级</el-radio-button>
-                <el-radio-button label="九年级">九年级</el-radio-button>
+              <el-radio-group 
+                @change="reloadData"
+                v-model="searchParmams.gradeId" size="default">
+                <el-radio-button 
+                  v-for="grade in gradeList" :key="grade.value" 
+                  :label="grade.label" :value="grade.value" >{{grade.label}}</el-radio-button>
               </el-radio-group>
             </div>
             <div class="content_right">
@@ -38,7 +40,7 @@
               <TabSearch 
                 tabType="line" 
                 :tabList="tabList" 
-                :defaultTabKey="'xingzeng'"
+                :defaultTabKey="searchParmams.classType"
                 @tabChange="HandleTabChange"> </TabSearch>
             </div>
              <div class="content_right">
@@ -55,13 +57,15 @@
           <div class="page_jg_20"></div>
 
           <div class="end_item">
-            <Table  :currentPage="1" :pageSize="20"
+
+            <!-- 行政班渲染表数据 -->
+            <Table v-if="searchParmams.classType === 'xingzeng'"  :currentPage="1" :pageSize="20"
                 :tableColumns="administrativeClassTableColumns" 
-                :tableData="classData" 
+                :tableData="administrativeClassData" 
                 :totalNum="0">
                 <template v-for="column in administrativeClassTableColumns" :key="column.name"   v-slot:[column.name]="{row}"> 
                   
-                  <div class="cell_container" @click="HandleAddTeacher(row, column.name)">
+                  <div class="cell_container" @click="HandleAddTeacher(row, column.name,'administrative')">
                     <template v-if="row?.[column.name] && row?.[column.name]?.length > 0">
                       <div v-for="(teacher, idx) in row?.[column.name]" :key="idx">
                         <el-tooltip
@@ -71,7 +75,7 @@
                         >
                           <div v-if="isConfigMode" class="teacher_tag">
                             <span :title="teacher.name">{{ teacher.name }}</span>
-                            <el-icon class="delete_icon" @click.stop="HandleRemoveTeacher(row, column.name, idx)"><Close /></el-icon>
+                            <el-icon class="delete_icon" @click.stop="HandleRemoveTeacher(row, column.name, idx,'administrative')"><Close /></el-icon>
                           </div>
                           <div v-else class="disabled_teacher">
                             <span :title="teacher.name">{{ teacher.name }}</span>
@@ -86,6 +90,46 @@
                   </div>
                 </template>
             </Table>
+
+
+            <!-- 教学班渲染表数据 -->
+            <Table v-else-if="searchParmams.classType === 'teach'"  
+                  :currentPage="1" :pageSize="20"
+                :tableColumns="teachingClassTableColumns" 
+                :tableData="teachingClassData" 
+                :totalNum="0">
+
+                <template v-for="column in teachingClassTableColumns" :key="column.name"   v-slot:[column.name]="{row}"> 
+                  <div class="cell_container teaching_cell_container" @click="HandleAddTeacher(row, column.name,'teach')">
+                    <div class="class_name">
+                      {{ row?.[column.name]?.name }}
+                    </div>
+                    <div class="teaching_teacher_list" v-if="row?.[column.name]?.name && row?.[column.name]?.teacherList?.length > 0"> 
+                      <div v-for="(teacher, idx) in row?.[column.name]?.teacherList" :key="idx">
+                        <el-tooltip
+                          effect="dark"
+                          :content="`${teacher.name} ${teacher.account}`"
+                          placement="top-start"
+                        >
+                          <div v-if="isConfigMode" class="teacher_tag">
+                            <span :title="teacher.name">{{ teacher.name }}</span>
+                            <el-icon class="delete_icon" @click.stop="HandleRemoveTeacher(row, column.name, idx,'teach')"><Close /></el-icon>
+                          </div>
+                          <div v-else class="disabled_teacher">
+                            <span :title="teacher.name">{{ teacher.name }}</span>
+                          </div>
+                        </el-tooltip>
+                      </div>
+                    </div>
+
+                    <template v-else-if="row?.[column.name]?.name">
+                      <span v-if="isConfigMode" class="placeholder_text" >请选择教师</span>
+                      <span v-else>-</span>
+                    </template>
+                  </div>
+                </template>
+            </Table>
+
           </div>
         </div>
   </div>
@@ -93,15 +137,26 @@
 
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue';
+import { ref, reactive, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
 
 import { Close } from '@element-plus/icons-vue';
 import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
 import Table from '@/baseComponents/Table.vue';
 import TabSearch from '@/baseComponents/TabSearch.vue';
+import {
+  getTeachingRelationshipTableDataApi,  getTeacherListDataApi,  
+  saveTeachingRelationshipApi,  deleteTeachingRelationshipApi,  
+  finishTeachingRelationshipApi,  
+} from '@/api/step2Component'
+
+import {getEvaluationDataDetailApi} from '@/api/step1Component'
+
+import {administrativeClassTableColumns,teacherTableColumns,teachingClassTableColumns} from './table'
 
-import {administrativeClassTableColumns,teacherTableColumns} from './table'
+const route = useRoute()
 
+// 1. 查询参数 列表 配置
 const tabList = ref([
   {
     label:'行政班',
@@ -112,7 +167,6 @@ const tabList = ref([
     key:'teach',
   },
 ]);
-
 // 搜索列表配置
 const searchList = ref([
   {
@@ -121,24 +175,29 @@ const searchList = ref([
     placeholder: '教师姓名、账号',
   }
 ]);
+// 查询参数
+const searchParmams = ref({
+  gradeId:'',
+  classType:'teach',
+  queryStr:''
+})
+const gradeList = ref([
+  {
+    label:'七年级',
+    value:'七年级'
+  },
+  {
+    label:'八年级',
+    value:'八年级'
+  },
+  {
+    label:'九年级',
+    value:'九年级'
+  },
 
-// 年级切换
-const activeGrade = ref('八年级');
-// 标签切换
-const activeTabKey = ref('xingzeng');
-// 配置模式开关
-const isConfigMode = ref(true);
-// 选中的教师ID
-const selectedTeacher = ref()
-
-const tableRowClassName = ({row,rowIndex})=>{
-  if(row.id == selectedTeacher.value?.id){
-    return 'active_row'
-  }
-
-}
+])
 
-// 教师列表数据
+// 2. 教师列表数据
 const teacherList = ref([
   { id: '7467222312', account: '7467222312', name: '王老七' },
   { id: '11112', account: '11112', name: '王骞' },
@@ -152,8 +211,22 @@ const teacherList = ref([
 ]);
 
 
-// 生成班级数据
-const generateClassData = () => {
+// 配置模式开关
+const isConfigMode = ref(true);
+// 选中的教师ID
+const selectedTeacher = ref()
+
+const tableRowClassName = ({row,rowIndex})=>{
+  if(row.id == selectedTeacher.value?.id){
+    return 'active_row'
+  }
+
+}
+
+
+
+// 生成行政班模拟数据
+const generateAdministrativeClassData = () => {
   const data = [];
   for (let i = 1; i <= 3; i++) {
     const row: any = {
@@ -226,7 +299,36 @@ const generateClassData = () => {
   return data;
 };
 
-const classData = ref(generateClassData());
+// 生成教学班 模拟数据
+const generateTeachingClassData = ()=>{
+  const data = [];
+  for (let i = 1; i <= 8; i++) {
+    const row: any = {
+      chemistry: null,
+      biology: null,
+    };
+    if(i=== 1){
+      row.chemistry = {
+        name:'教学1班',
+        teacherList:[
+          { id: 'AAA', name: '杨凯' },
+          { id: 'AAA', name: '杨凯' },
+          { id: 'AAA', name: '杨凯' }
+        ]
+      }
+    }else if(i === 2){
+      row.biology = {
+        name:'教学1班',
+        teacherList:[]
+      }
+    }
+    data.push(row);
+  }
+  return data
+}
+
+const administrativeClassData = ref(generateAdministrativeClassData());
+const teachingClassData = ref(generateTeachingClassData())
 
 // 搜索变化处理
 const HandleSearchChange = (params) => {
@@ -235,7 +337,12 @@ const HandleSearchChange = (params) => {
 
 // 标签切换处理
 const HandleTabChange = (key) => {
-  activeTabKey.value = key;
+  searchParmams.value.classType = key
+
+  console.log('当前选中的tab',key)
+
+
+
 };
 
 // 选择教师
@@ -249,21 +356,101 @@ const HandleSelectTeacher = (teacher) => {
 };
 
 // 添加教师
-const HandleAddTeacher = (row, cell) => {
-  if (!isConfigMode.value) return;
-  if (!selectedTeacher.value) return;
-  if (!row[cell]) {
-    row[cell] = [];
+const HandleAddTeacher = (row, cell,type) => {
+  switch(type){
+    case 'administrative':{
+      // 行政班
+      if (!isConfigMode.value) return;
+      if (!selectedTeacher.value) return;
+      if (!row[cell]) {
+        row[cell] = [];
+      }
+      row[cell].push({ id: selectedTeacher.value?.id, name: selectedTeacher.value?.name,account:selectedTeacher.value?.account });
+      break
+    }
+    case 'teach':{
+      if (!isConfigMode.value) return;
+      if (!selectedTeacher.value) return;
+      if (row?.[cell]?.name && !row?.[cell]?.teacherList) {
+        row[cell] = {
+          name:row?.[cell]?.name,
+          teacherList:[]
+        }
+      }else{
+        row[cell].teacherList.push({ id: selectedTeacher.value?.id, name: selectedTeacher.value?.name,account:selectedTeacher.value?.account });
+      }
+      break
+    }
   }
-  row[cell].push({ id: selectedTeacher.value?.id, name: selectedTeacher.value?.name,account:selectedTeacher.value?.account });
 };
 
 // 移除教师
-const HandleRemoveTeacher = (row, cell, index) => {
+const HandleRemoveTeacher = (row, cell, index,type) => {
   if (!isConfigMode.value) return;
-  row[cell].splice(index, 1);
+  switch(type){
+    case 'teach':{
+      row[cell].teacherList.splice(index, 1);
+      break
+    }
+    case 'administrative':{
+      row[cell].splice(index, 1);
+      break
+    }
+  }
 };
 
+// 获取年级列表信息
+const GetGradeList = async()=>{
+  let id = route.query.id
+  let res = await getEvaluationDataDetailApi(id)
+  if(res?.code == 200){
+    gradeList.value = res?.data.map(item=>{
+      return {
+        label:item.gradeName,
+        value:item.id
+      }
+    }) || []
+    searchParmams.value.gradeId = gradeList.value[0].value
+  }
+}
+// 获取教师列表数据
+const GetTeacherTableData = async ()=>{
+  let params = {
+    evaluationId: route.query.id,
+    evaluationGradeId: searchParmams.value.gradeId,
+    teacherName: ""
+  }
+  let res = await getTeacherListDataApi(params)
+  if(res?.code == 200){
+
+  }
+}
+
+// 获取表格授课关系配置数据
+const GetTeachingRelationshipData = async ()=>{
+  let res = await getTeachingRelationshipTableDataApi(searchParmams.value.gradeId)
+  if(res?.code == 200){
+    const {administrativeClassData, teachingClassData} = res.data
+    
+
+
+  }
+
+}
+
+
+// 重新加载页面数据
+const reloadData =async ()=>{
+   await GetTeacherTableData()
+   await GetTeachingRelationshipData()
+
+}
+
+onMounted( async ()=>{
+  await GetGradeList()
+  await reloadData()
+})
+
 </script>
 
 
@@ -314,12 +501,26 @@ const HandleRemoveTeacher = (row, cell, index) => {
 .cell_container {
   text-align: center;
   display: flex;
-  justify-content: center;
+  justify-content: flex-start;
   flex-wrap: wrap;
   align-items: center;
   padding: 8px;
   gap: 8px;
 
+  &.teaching_cell_container{
+    flex-wrap: nowrap;
+    .class_name{
+      word-break: keep-all;
+    }
+  }
+
+  .teaching_teacher_list{
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+  }
 
   .disabled_teacher,
   .placeholder_text {

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

@@ -52,6 +52,11 @@ export const administrativeClassTableColumns = ref([
         hidden: false,
         align:'center',
     },
+    
+]);
+
+// 教学班表列配置
+export const  teachingClassTableColumns = ref([
     {
         name: 'chemistry',
         label: '化学',
@@ -68,32 +73,11 @@ export const administrativeClassTableColumns = ref([
         hidden: false,
         align:'center',
     },
-    {
-        name: 'biology',
-        label: '生物',
-        width: '140',
-        custom: true,
-        hidden: false,
-        align:'center',
-    },
-    {
-        name: 'biology',
-        label: '生物',
-        width: '140',
-        custom: true,
-        hidden: false,
-        align:'center',
-    }
-]);
-
-// 教学班表列配置
-export const  teachingClassTableColumns = ref([
-    {
-        
-    }
+    
 ])
 
 
+// 教师账号信息列表配置
 export const teacherTableColumns = ref([
     {
         name: 'account',