山东大学软件学院项目实训weblab-11

前言

项目地址
本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。

任务

添加教师模块

教师主页面

可以添加课程、班级，邀请学生、查看学生作业等功能

<template>
  <el-header>
    <topmenu active-index="2" @on-index-change="onMenuIdxChange"></topmenu>
  </el-header>
  <el-main v-show="activeMenuIdx == '2'">
    <el-tabs v-model="activeTab" type="card" class="demo-tabs" @tab-click="handleTabClick">
      <el-tab-pane label="课程 & 班级" name="1">
        <el-button @click="AddCurriculum()">添加课程</el-button>
        <el-collapse v-model="activeCurrCollapse" @change="handleCurrCollapseChange">
          <el-collapse-item v-for="(curriculum, currIdx) in curriculumData" :title="curriculum.title"
            :name="curriculum.name">
            <el-button @click="AddClass(currIdx)">添加班级</el-button>
            <el-button @click="DeleteCurr(currIdx)">删除课程</el-button>
            <el-collapse v-model="activeClsCollapse" @change="handleClsCollapseChange">
              <el-collapse-item v-for="(cls, clsIdx) in curriculum.class" :title="cls.title" :name="cls.name">
                <el-button @click="ImportBatchStudent">批次导入学生</el-button>
                <el-button @click="ImportOneStudent">导入单个学生</el-button>
                <el-button @click="DeleteClass(currIdx, clsIdx)">删除班级</el-button>
                <el-table :data="cls.data" style="width: 100%">
                  <el-table-column label="时间" width="430">
                    <el-date-picker v-model="cls.data[0].time" type="datetimerange" range-separator="To"
                      start-placeholder="开始日期" end-placeholder="结束日期" />
                  </el-table-column>
                  <el-table-column label="具体描述" width="580">
                    <el-input v-model="cls.data[0].description" :rows="2" type="textarea" placeholder="请输入..." />
                  </el-table-column>
                  <el-table-column fixed="right" label="操作" width="100">
                    <el-button type="text" size="small" @click="">添加作业</el-button>
                    <el-button type="text" size="small" @click="">具体</el-button>
                  </el-table-column>
                </el-table>
              </el-collapse-item>
            </el-collapse>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>

      <el-tab-pane label="课程作业" name="2">
        <el-collapse v-model="activeHWCurrCollapse" @change="handleHWCurrCollapseChange">
          <el-collapse-item v-for="(curriculum, cuuIdx) in curriculumData" :title="curriculum.title"
            :name="curriculum.name">
            <el-collapse v-model="activeHWClsCollapse" @change="handleHWClsCollapseChange">
              <el-collapse-item v-for="(cls, clsIdx) in curriculum.class" :title="cls.title" :name="cls.name">
                <el-table :data="cls.student" style="width: 100%">
                  <el-table-column prop="name" label="Name" width="150" />
                  <el-table-column prop="email" label="Email" width="180" />
                  <el-table-column prop="message" label="Message" width="180" />
                  <el-table-column prop="score" label="Score" width="200">
                    <template #default="scope">
                      <el-rate v-model="scope.row.score" :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
                        show-text @change="onScoreChange(scope.row)" />
                    </template>
                  </el-table-column>
                  <el-table-column fixed="right" prop="Homework" label="Homework" width="170">
                    <el-button type="text" size="small" @click="DownloadHomework">下载</el-button>
                  </el-table-column>

                  <!-- <el-table-column fixed="right" label="Operations" width="120">
                    <el-button type="text" size="small" @click="handleClick">Detail</el-button>
                  </el-table-column> -->
                </el-table>
              </el-collapse-item>
            </el-collapse>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
    </el-tabs>
  </el-main>

</template>

<script lang="ts" setup>
import topmenu from "../layout/tmenu.vue";
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'

const activeMenuIdx = ref('2');
const activeTab = ref('1')
const activeCurrCollapse = ref();
const activeClsCollapse = ref();
const activeHWCurrCollapse = ref();
const activeHWClsCollapse = ref();
const totalCurrId = ref(1);
const totalClsId = ref(1);

interface StudentDataI {
  name: string,
  email: string,
  message: string,
  score: number
}
interface ClassDataI {
  title: string,
  name: string,
  data: [{
    time: any,
    description: string
  }],
  student: StudentDataI[]
}
interface CurriculumDataIf {
  title: string,
  name: string,
  class: ClassDataI[]
}
const curriculumData = ref<CurriculumDataIf[]>([]);

const AddCurriculum = () => {
  ElMessageBox.prompt('输入课程名称', '添加课程', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
  })
    .then(({ value }) => {

      curriculumData.value!.push({
        title: value,
        name: `${totalCurrId.value++}`,
        class: []
      })

    })
    .catch(() => {

    })
}
const DeleteCurr = (currIdx: number) => {
  ElMessageBox.confirm('将删除该课程，继续？', 'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    })
    .then(() => {
      curriculumData.value.splice(currIdx, 1);
    })
    .catch(() => {

    })
}
const AddClass = (currIdx: number) => {
  ElMessageBox.prompt('输入班级', '添加班级', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
  })
    .then(({ value }) => {

      curriculumData.value![currIdx].class.push({
        title: value,
        name: `${totalClsId.value++}`,
        data: [{
          time: '',
          description: ''
        }],
        student: [{
          name: '张三',
          email: '123@qq.com',
          message: '',
          score: 0
        }]
      })
    })
    .catch(() => {
    })
}
const DeleteClass = (currIdx: number, clsIdx: number) => {
  ElMessageBox.confirm('将删除该班级，继续？', 'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    })
    .then(() => {
      curriculumData.value[currIdx].class.splice(clsIdx, 1);
    })
    .catch(() => {

    })
}

const DownloadHomework = () => {

}
const ImportBatchStudent=()=>{

}
const ImportOneStudent=()=>{

}
const onMenuIdxChange = (idx: string) => {
  activeMenuIdx.value = idx;
}
const handleTabClick = (tab: TabsPaneContext, event: Event) => {

}
const handleCurrCollapseChange = (val: string[]) => {

}
const handleClsCollapseChange = (val: string[]) => {

}
const handleHWCurrCollapseChange = (val: string[]) => {

}
const handleHWClsCollapseChange = (val: string[]) => {

}
const onScoreChange = (val: any) => {

}
</script>

<style >
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>

效果