添加授课关系静态页面

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

@@ -0,0 +1,436 @@
+<template>
+
+    <div class="page_item content_container page_search">
+
+        <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>
+        </div>
+        <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>
+            </div>
+            <div class="content_right">
+              <el-button class="delete_button_border">清空授课</el-button>
+              <el-button class="button_refresh">批量导出</el-button>
+              <el-button class="button_refresh">批量导入</el-button>
+              <el-button class="button_background">完成</el-button>
+            </div>
+          </div>
+
+          <div class="page_jg_20"></div>
+
+          <div class="search_content">
+            <div class="content_left">
+              <TabSearch 
+                tabType="line" 
+              :tabList="tabList" 
+              :defaultTabKey="'xingzeng'"
+              @tabChange="HandleTabChange"> </TabSearch>
+            </div>
+             <div class="content_right">
+               <el-switch v-model="isConfigMode" 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>
+                    </template>
+                    <template v-else>
+                      <span class="placeholder_text" @click="HandleAddTeacher(scope.row, subject.key)">请选择教师</span>
+                    </template>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-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';
+
+const tabList = ref([
+  {
+    label:'行政班',
+    key:'xingzeng',
+  },
+  {
+    label:'教学班',
+    key:'teach',
+  },
+]);
+
+// 搜索列表配置
+const searchList = ref([
+  {
+    key: 'searchKey',
+    type: 'input',
+    placeholder: '教师姓名、账号',
+  }
+]);
+
+// 年级切换
+const activeGrade = ref('八年级');
+// 标签切换
+const activeTabKey = ref('xingzeng');
+// 配置模式开关
+const isConfigMode = ref(true);
+// 选中的教师ID
+const selectedTeacherId = ref('11113');
+
+// 教师列表数据
+const teacherList = ref([
+  { id: '7467222312', account: '7467222312', name: '王老七' },
+  { id: '11112', account: '11112', name: '王骞' },
+  { id: '11113', account: '11113', name: '蔡永博' },
+  { id: '11114', account: '11114', name: '孙永哲' },
+  { id: 'AAA', account: 'AAA', name: '杨康' },
+  { id: 'AAAB', account: 'AAAB', name: '赵文华' },
+  { id: 'BUHG', account: 'BUHG', name: '赵兆' },
+  { id: '11111', account: '11111', name: '王老七' },
+  { 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++) {
+    const row: any = {
+      className: `${i}班`,
+      headTeacher: null,
+      chinese: null,
+      math: null,
+      english: null,
+      physics: null,
+      chemistry: null,
+      biology: null,
+    };
+
+    // 模拟部分已分配的数据
+    if (i === 1) {
+      row.chinese = [{ id: 'AAAB', name: '赵文华' }];
+      row.physics = [{ id: 'teacher_phy', name: '物理理' }];
+    } else if (i === 2) {
+      row.headTeacher = [
+        { id: 'AAA', name: '杨凯' },
+        { id: 'AAA', name: '杨凯' },
+        { id: 'AAA', name: '杨凯' }
+      ];
+      row.chinese = [
+        { id: 'AAAB', name: '赵文华' },
+        { id: 'AAAB', name: '赵文华' }
+      ];
+      row.math = [
+        { id: 'AAAB', name: '赵文华' },
+        { id: 'AAAB', name: '赵文华' }
+      ];
+      row.english = [{ id: 'AAA', name: '杨凯' }];
+      row.chemistry = [{ id: 'AAAB', name: '赵文华' }];
+      row.biology = [{ id: 'AAAB', name: '赵文华' }];
+      row.chinese = [{ id: 'AAAB', name: '赵文华' }];
+    } else if (i === 3) {
+       row.headTeacher = [{ id: 'AAA', name: '杨凯' }];
+       row.chinese = [{ id: 'AAA', name: '杨凯' }];
+       row.english = [{ id: 'AAA', name: '杨凯' }];
+       row.physics = [{ id: 'AAA', name: '杨凯' }];
+    } else if (i === 4) {
+       row.math = [{ id: 'AAA', name: '杨凯' }];
+       row.chinese = [{ id: 'AAAB', name: '赵文华' }];
+       row.physics = [{ id: 'AAA', name: '杨凯' }];
+       row.chemistry = [{ id: 'AAAB', name: '赵文华' }];
+       row.biology = [{ id: 'AAAB', name: '赵文华' }];
+       row.math = [{ id: 'AAAB', name: '赵文华' }];
+    } else if (i === 5) {
+       row.chinese = [{ id: 'AAAB', name: '赵文华' }];
+       row.math = [{ id: 'AAA', name: '杨凯' }];
+       row.chinese = [{ id: 'AAAB', name: '赵文华' }];
+       row.physics = [{ id: 'AAA', name: '杨凯' }];
+    } else if (i === 6) {
+       row.headTeacher = [{ id: 'AAA', name: '杨凯' }];
+       row.chinese = [{ id: 'AAAB', name: '赵文华' }];
+       row.math = [{ id: 'AAA', name: '杨凯' }];
+       row.chinese = [{ id: 'AAA', name: '杨凯' }];
+       row.physics = [{ id: 'AAA', name: '杨凯' }];
+    } else if (i === 7) {
+       row.chinese = [{ id: 'AAAB', name: '赵文华' }];
+    } else if (i === 8) {
+       row.headTeacher = [{ id: 'AAAB', name: '赵文华' }];
+       row.chinese = [{ id: 'AAAB', name: '赵文华' }];
+       row.chinese = [{ id: 'AAAB', name: '赵文华' }];
+    } else if (i === 9) {
+       row.chinese = [{ id: 'AAAB', name: '赵文华' }];
+    }
+    data.push(row);
+  }
+  return data;
+};
+
+const classData = ref(generateClassData());
+
+// 搜索变化处理
+const HandleSearchChange = (params) => {
+  console.log('搜索参数', params);
+};
+
+// 标签切换处理
+const HandleTabChange = (key) => {
+  activeTabKey.value = key;
+};
+
+// 选择教师
+const HandleSelectTeacher = (teacher) => {
+  selectedTeacherId.value = teacher.id;
+};
+
+// 添加教师
+const HandleAddTeacher = (row, field) => {
+  if (!isConfigMode.value) return;
+  
+  const selectedTeacher = teacherList.value.find(t => t.id === selectedTeacherId.value);
+  if (!selectedTeacher) return;
+
+  if (!row[field]) {
+    row[field] = [];
+  }
+  row[field].push({ id: selectedTeacher.id, name: selectedTeacher.name });
+};
+
+// 移除教师
+const HandleRemoveTeacher = (row, field, index) => {
+  if (!isConfigMode.value) return;
+  row[field].splice(index, 1);
+};
+
+</script>
+
+
+
+<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);
+  height: calc(100%);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: stretch;
+  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;
+        }
+      }
+    }
+  }
+
+  .container_right {
+    width: calc(100% - 200px);
+    height: 100%;
+    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;
+    }
+
+    .table_wrapper {
+      flex: 1;
+      overflow: auto;
+      border: 1px solid $border_color;
+      border-radius: 4px;
+    }
+  }
+}
+
+/* 单元格内部组件样式 */
+.slot_cell_container {
+  min-height: 40px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 4px 0;
+  align-items: center;
+
+  .placeholder_text {
+    color: #c0c4cc;
+    font-size: 13px;
+    cursor: pointer;
+    
+    &:hover {
+      color: $primary_color;
+    }
+  }
+
+  .teacher_tag {
+    display: inline-flex;
+    align-items: center;
+    background-color: #e6f1fc;
+    color: $primary_color;
+    padding: 4px 8px;
+    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;
+      }
+    }
+  }
+}
+</style>
+