完善行政班教师配置交互

src/baseComponents/Table.vue

@@ -6,6 +6,7 @@
           element-loading-spinner="el-icon-loading" element-loading-background="#ffffff"
           element-loading-custom-class="loading_icon"
           :row-class-name="props.tableRowClassName"
+          @row-click="(row,column)=> emit('rowClick',row)"
           :span-method="props.spanMethod">
             <!-- show-overflow-tooltip -->
             <template 
@@ -102,7 +103,7 @@ const props = defineProps({
     required:false
   }
 })
-const emit = defineEmits(['paginationChange'])
+const emit = defineEmits(['paginationChange','rowClick'])
 
 /*  
 //demo
@@ -129,6 +130,7 @@ const HandleTableRowClassName = ({row,rowIndex}) => {
 
 <style lang="scss" scoped>
 .page_table{
+  overflow: auto;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;

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

@@ -4,22 +4,15 @@
 
         <div class="container_left">
           <FormSearchGroup :searchList="searchList" @searchChange="HandleSearchChange"></FormSearchGroup>
-          <div class="teacher_list_header">
-            <span>账号</span>
-            <span>教师</span>
-          </div>
-          <div class="teacher_list_container">
-            <div 
-              v-for="(teacher, index) in teacherList" 
-              :key="index"
-              class="teacher_item"
-              :class="{ 'is_active': selectedTeacherId === teacher.id }"
-              @click="HandleSelectTeacher(teacher)"
-            >
-              <div class="col_account">{{ teacher.account }}</div>
-              <div class="col_name">{{ teacher.name }}</div>
-            </div>
-          </div>
+          
+          <Table 
+            class="teacher_table"
+            :currentPage="1" :totalNum="0" 
+            :pageSize="20" :tableColumns="teacherTableColumns" 
+            :tableData="teacherList"
+            :tableRowClassName="tableRowClassName"
+            @rowClick="HandleSelectTeacher"
+            ></Table>
         </div>
         <div class="container_right">
           <div class="search_content">
@@ -44,76 +37,71 @@
             <div class="content_left">
               <TabSearch 
                 tabType="line" 
-              :tabList="tabList" 
-              :defaultTabKey="'xingzeng'"
-              @tabChange="HandleTabChange"> </TabSearch>
+                :tabList="tabList" 
+                :defaultTabKey="'xingzeng'"
+                @tabChange="HandleTabChange"> </TabSearch>
             </div>
              <div class="content_right">
-               <el-switch v-model="isConfigMode" active-text="选中教师配置任课关系" />
+                <span v-if="isConfigMode" class="config_switch_desc">
+                  {{ selectedTeacher?.id ? `当前选中的教师：${selectedTeacher.name} ${selectedTeacher.account}` : '暂无选中的教师' }}
+                </span>
+               <el-switch v-model="isConfigMode" 
+               style="--el-switch-on-color: #2E64FA"
+               active-text="选中教师配置任课关系" />
              </div>
           </div>
 
-          <div class="table_wrapper">
-            <el-table
-              :data="classData"
-              stripe
-              style="width: 100%"
-              :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
-            >
-              <el-table-column prop="className" label="班级" width="100" fixed></el-table-column>
-              <el-table-column label="班主任" min-width="140">
-                <template #default="scope">
-                  <div class="slot_cell_container">
-                    <template v-if="scope.row.headTeacher && scope.row.headTeacher.length > 0">
-                      <div v-for="(teacher, idx) in scope.row.headTeacher" :key="idx" class="teacher_tag">
-                        <span class="tag_text">{{ teacher.name }}</span>
-                        <el-icon class="delete_icon" @click.stop="HandleRemoveTeacher(scope.row, 'headTeacher', idx)"><Close /></el-icon>
-                      </div>
-                    </template>
-                    <template v-else>
-                      <span class="placeholder_text" @click="HandleAddTeacher(scope.row, 'headTeacher')">请选择教师</span>
-                    </template>
-                  </div>
-                </template>
-              </el-table-column>
-              <el-table-column 
-                v-for="subject in subjectList" 
-                :key="subject.key" 
-                :label="subject.label" 
-                min-width="140"
-              >
-                <template #default="scope">
-                  <div class="slot_cell_container">
-                    <template v-if="scope.row[subject.key] && scope.row[subject.key].length > 0">
-                      <div v-for="(teacher, idx) in scope.row[subject.key]" :key="idx" class="teacher_tag">
-                        <span class="tag_text">{{ teacher.name }}</span>
-                        <el-icon class="delete_icon" @click.stop="HandleRemoveTeacher(scope.row, subject.key, idx)"><Close /></el-icon>
+          <div class="page_solid_line"></div>
+          <div class="page_jg_20"></div>
+
+          <div class="end_item">
+            <Table  :currentPage="1" :pageSize="20"
+                :tableColumns="administrativeClassTableColumns" 
+                :tableData="classData" 
+                :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)">
+                    <template v-if="row?.[column.name] && row?.[column.name]?.length > 0">
+                      <div v-for="(teacher, idx) in row?.[column.name]" :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)"><Close /></el-icon>
+                          </div>
+                          <div v-else class="disabled_teacher">
+                            <span :title="teacher.name">{{ teacher.name }}</span>
+                          </div>
+                        </el-tooltip>
                       </div>
                     </template>
                     <template v-else>
-                      <span class="placeholder_text" @click="HandleAddTeacher(scope.row, subject.key)">请选择教师</span>
+                      <span v-if="isConfigMode" class="placeholder_text" >请选择教师</span>
+                      <span v-else>-</span>
                     </template>
                   </div>
                 </template>
-              </el-table-column>
-            </el-table>
+            </Table>
           </div>
-
         </div>
-  
   </div>
 </template>
 
 
 <script setup lang="ts">
 import { ref, reactive } from 'vue';
-import { Search } from '@element-plus/icons-vue';
 
 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 {administrativeClassTableColumns,teacherTableColumns} from './table'
+
 const tabList = ref([
   {
     label:'行政班',
@@ -141,7 +129,14 @@ const activeTabKey = ref('xingzeng');
 // 配置模式开关
 const isConfigMode = ref(true);
 // 选中的教师ID
-const selectedTeacherId = ref('11113');
+const selectedTeacher = ref()
+
+const tableRowClassName = ({row,rowIndex})=>{
+  if(row.id == selectedTeacher.value?.id){
+    return 'active_row'
+  }
+
+}
 
 // 教师列表数据
 const teacherList = ref([
@@ -156,20 +151,11 @@ const teacherList = ref([
   { id: '11112_b', account: '11112', name: '王骞' },
 ]);
 
-// 科目列表
-const subjectList = [
-  { label: '语文', key: 'chinese' },
-  { label: '数学', key: 'math' },
-  { label: '英语', key: 'english' },
-  { label: '物理', key: 'physics' },
-  { label: '化学', key: 'chemistry' },
-  { label: '生物', key: 'biology' },
-];
 
 // 生成班级数据
 const generateClassData = () => {
   const data = [];
-  for (let i = 1; i <= 9; i++) {
+  for (let i = 1; i <= 3; i++) {
     const row: any = {
       className: `${i}班`,
       headTeacher: null,
@@ -254,26 +240,28 @@ const HandleTabChange = (key) => {
 
 // 选择教师
 const HandleSelectTeacher = (teacher) => {
-  selectedTeacherId.value = teacher.id;
+  selectedTeacher.value = {
+    id:teacher.id,
+    name:teacher.name,
+    account:teacher.account,
+  };
+
 };
 
 // 添加教师
-const HandleAddTeacher = (row, field) => {
+const HandleAddTeacher = (row, cell) => {
   if (!isConfigMode.value) return;
-  
-  const selectedTeacher = teacherList.value.find(t => t.id === selectedTeacherId.value);
-  if (!selectedTeacher) return;
-
-  if (!row[field]) {
-    row[field] = [];
+  if (!selectedTeacher.value) return;
+  if (!row[cell]) {
+    row[cell] = [];
   }
-  row[field].push({ id: selectedTeacher.id, name: selectedTeacher.name });
+  row[cell].push({ id: selectedTeacher.value?.id, name: selectedTeacher.value?.name,account:selectedTeacher.value?.account });
 };
 
 // 移除教师
-const HandleRemoveTeacher = (row, field, index) => {
+const HandleRemoveTeacher = (row, cell, index) => {
   if (!isConfigMode.value) return;
-  row[field].splice(index, 1);
+  row[cell].splice(index, 1);
 };
 
 </script>
@@ -281,13 +269,6 @@ const HandleRemoveTeacher = (row, field, index) => {
 
 
 <style lang="scss" scoped>
-/* 变量定义 */
-$border_color: #e4e7ed;
-$primary_color: #2E64FA;
-$text_regular: #606266;
-$text_secondary: #909399;
-$bg_light: #f5f7fa;
-$hover_bg: #ecf5ff;
 
 .content_container {
   width: calc(100vw - 200px);
@@ -296,64 +277,20 @@ $hover_bg: #ecf5ff;
   flex-direction: row;
   justify-content: space-between;
   align-items: stretch;
+  gap:20px;
   overflow: hidden;
 
   .container_left {
     width: 200px;
-    height: 100%;
-    border-right: 1px solid $border_color;
-    display: flex;
-    flex-direction: column;
-    background-color: #fff;
-
-    .teacher_list_header {
-      display: flex;
-      padding: 12px 16px;
-      background-color: $bg_light;
-      border-bottom: 1px solid $border_color;
-      font-size: 14px;
-      color: $text_regular;
-      font-weight: bold;
-
-      span:first-child {
-        width: 80px;
-      }
-    }
-
-    .teacher_list_container {
-      flex: 1;
-      overflow-y: auto;
-
-      .teacher_item {
-        display: flex;
-        padding: 12px 16px;
-        cursor: pointer;
-        border-bottom: 1px solid #ebeef5;
-        transition: background-color 0.2s;
-        font-size: 14px;
-
-        &:hover {
-          background-color: $hover_bg;
-        }
-
-        &.is_active {
-          background-color: #e6f1fc;
-          color: $primary_color;
-        }
-
-        .col_account {
-          width: 80px;
-          color: $text_secondary;
-        }
-
-        .col_name {
-          flex: 1;
-          color: $text_regular;
-        }
-
-        &.is_active .col_name {
-          color: $primary_color;
-          font-weight: 500;
+    overflow-y: auto;
+    .teacher_table{
+      margin-top: 16px;
+      :deep(.el-table__body){
+        tr.active_row td
+        {
+          background-color: rgba(46, 100, 250,0.1) !important;
+          border:none;
+          color: #2e64fa;
         }
       }
     }
@@ -365,70 +302,62 @@ $hover_bg: #ecf5ff;
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    padding: 16px 20px;
-
-    .search_content {
-      .content_left {
-        display: flex;
-        align-items: center;
-        gap: 20px;
-      }
-    }
 
-    .page_jg_20 {
-      height: 20px;
-    }
+    .config_switch_desc{
+      font-size: 14px;
 
-    .table_wrapper {
-      flex: 1;
-      overflow: auto;
-      border: 1px solid $border_color;
-      border-radius: 4px;
     }
   }
 }
 
 /* 单元格内部组件样式 */
-.slot_cell_container {
-  min-height: 40px;
+.cell_container {
+  text-align: center;
   display: flex;
+  justify-content: center;
   flex-wrap: wrap;
-  gap: 6px;
-  padding: 4px 0;
   align-items: center;
+  padding: 8px;
+  gap: 8px;
+
 
+  .disabled_teacher,
   .placeholder_text {
-    color: #c0c4cc;
-    font-size: 13px;
+    width: 90px;
+    height: 36px;
+    font-weight: 400;
+    font-size: 14px;
+    color: #CCCCCC;
+    text-align: center;
+    line-height: 36px;
+    background-color: #f3f3f3;
+    border-radius: 4px;
     cursor: pointer;
-    
-    &:hover {
-      color: $primary_color;
-    }
+  }
+
+  .disabled_teacher{
+    color:#666666;
   }
 
   .teacher_tag {
-    display: inline-flex;
+    display: flex;
+    justify-content: space-between;
     align-items: center;
-    background-color: #e6f1fc;
-    color: $primary_color;
-    padding: 4px 8px;
+    padding: 0 8px;
+
+    min-width: 90px;
+    height: 36px;
+    font-weight: 400;
+    font-size: 14px;
+    color: #2E64FA;
+    text-align: center;
+    line-height: 36px;
+    background: rgba(46, 100, 250, 0.1);
     border-radius: 4px;
-    font-size: 13px;
-    margin-bottom: 4px;
-
-    .tag_text {
-      margin-right: 6px;
-    }
 
     .delete_icon {
       cursor: pointer;
       font-size: 12px;
-      opacity: 0.7;
-
-      &:hover {
-        opacity: 1;
-      }
     }
   }
 }

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

@@ -0,0 +1,112 @@
+import { ref } from "vue"
+
+// 行政班表列配置
+export const administrativeClassTableColumns = ref([
+    {
+        name: 'className',
+        label: '班级',
+        width: '140',
+        custom: false, 
+        fixed:'left',
+        hidden: false,
+        align:'center',
+    },
+    {
+        name: 'headTeacher',
+        label: '班主任',
+        width: '140',
+        custom: true, 
+        fixed:'left',
+        hidden: false,
+        align:'center',
+    },
+    {
+        name: 'chinese',
+        label: '语文',
+        width: '140',
+        custom: true, 
+        hidden: false,
+        align:'center',
+    },
+    {
+        name: 'math',
+        label: '数学',
+        width: '140',
+        custom: true,
+        hidden: false,
+        align:'center',
+    },
+    {
+        name: 'english',
+        label: '英语',
+        width: '140',
+        custom: true,
+        hidden: false,
+        align:'center',
+    },
+    {
+        name: 'physics',
+        label: '物理',
+        width: '140',
+        custom: true,
+        hidden: false,
+        align:'center',
+    },
+    {
+        name: 'chemistry',
+        label: '化学',
+        width: '140',
+        custom: true,
+        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',
+    },
+    {
+        name: 'biology',
+        label: '生物',
+        width: '140',
+        custom: true,
+        hidden: false,
+        align:'center',
+    }
+]);
+
+// 教学班表列配置
+export const  teachingClassTableColumns = ref([
+    {
+        
+    }
+])
+
+
+export const teacherTableColumns = ref([
+    {
+        name: 'account',
+        label: '账号',
+        width: '80',
+        custom: false, 
+        align:'center',
+    },
+    {
+        name: 'name',
+        label: '教师',
+        width: '80',
+        custom: false, 
+        align:'center',
+    },
+])