山东大学项目实训Web实验室（WebLab）（十二）教师端主界面

于 2022-06-02 22:18:30 发布
阅读量290 收藏
点赞数
分类专栏： WebLab 文章标签： 前端 vue.js javascript typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lollo_HA/article/details/125107716
版权
本文档展示了山东大学WebLab项目中教师端主界面的设计与实现，包括组织中心、发布中心和学生课程作业三个主要模块。界面包含添加、修改组织，发布作业和通知等功能，并使用了Element UI组件库进行布局和交互设计。代码中详细呈现了Vue.js组件结构和数据绑定，如表格、对话框和日期选择器等。
摘要由CSDN通过智能技术生成

山东大学项目实训Web实验室（WebLab）（十二）教师端主界面

前言

项目仓库
本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。
代码内容均为我和肖同学共同完成。

任务目标

设计并且编写主界面
主界面内容：

  • 学生界面
    • 项目中心
      • 课程任务
      • 课程通知
      • 我的项目
    • 上传中心
    • 编辑中心
    • 组织中心
  • 老师界面
    • 组织中心
    • 发布中心
    • 学生课程作业

我的任务

  • 页面外观与布局设计
  • 页面交互设计
  • 页面编写

展示内容

  • 教师端主界面

代码

view/teacher-home.vue

<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-dialog v-model="createCurrFormVisible" title="添加组织" width="30%">
          <el-form>
            <el-form-item label="课程名字" label-width="100px">
              <el-input v-model="createCurrForm.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="课序号" label-width="100px">
              <el-input v-model="createCurrForm.courseId" autocomplete="off" />
            </el-form-item>
            <el-form-item label="课称介绍" label-width="100px">
              <el-input v-model="createCurrForm.des" autocomplete="off" />
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="createCurrFormVisible = false">取消</el-button>
              <el-button type="primary" @click="ConfirmAddCurr">确认</el-button>
            </span>
          </template>
        </el-dialog>
        <el-dialog v-model="updateCurrFormVisible" title="修改信息" width="30%">
          <el-form>
            <el-form-item label="课程名字" label-width="100px">
              <el-input v-model="updateCurrForm.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="课序号" label-width="100px">
              <el-input v-model="updateCurrForm.courseId" autocomplete="off" />
            </el-form-item>
            <el-form-item label="课称介绍" label-width="100px">
              <el-input v-model="updateCurrForm.des" autocomplete="off" />
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="updateCurrFormVisible = false">取消</el-button>
              <el-button type="primary" @click="ConfirmUpdateCurr">确认</el-button>
            </span>
          </template>
        </el-dialog>
<!--        <el-dialog v-model="releaseHWFormVisible" title="发布作业" width="30%">-->
<!--          <el-form>-->
<!--            <el-form-item label="作业内容" label-width="100px">-->
<!--              <el-input v-model="releaseHWForm.content" autocomplete="off" />-->
<!--            </el-form-item>-->
<!--            <el-form-item label="截止日期" label-width="100px">-->
<!--              <el-date-picker v-model="releaseHWForm.ddl" type="date" />-->
<!--            </el-form-item>-->
<!--          </el-form>-->
<!--          <template #footer>-->
<!--            <span class="dialog-footer">-->
<!--              <el-button @click="releaseHWFormVisible = false">取消</el-button>-->
<!--              <el-button type="primary" @click="ConfirmReleaseHW">确认</el-button>-->
<!--            </span>-->
<!--          </template>-->
<!--        </el-dialog>-->
        <el-button @click="AddCurriculum">添加组织</el-button>
        <el-collapse>
          <el-collapse-item v-for="(curriculum, currIdx) in curriculumData"
            :title="curriculum.title + '（课序号：' + curriculum.data[0].courseId + '）'" :name="curriculum.id">
            <el-row>
              <el-col :span="2">
                <span>邀请码:{{ curriculum.data[0].code }}</span>
              </el-col>
              <el-col :span="3">
                <el-button @click="ImportBatchStudent">批次导入学生</el-button>
              </el-col>
              <el-col :span="3">
                <el-button @click="ImportOneStudent">导入单个学生</el-button>
              </el-col>
              <el-col :span="10"/>
              <el-col :span="3">
                <el-button @click="UpdateCurrInfo(currIdx)">修改信息</el-button>
              </el-col>
<!--              <el-col :span="1"/>-->
              <el-col :span="3">
                <el-button @click="DeleteCurr(currIdx)">删除组织</el-button>
              </el-col>
            </el-row>
            <el-table :data="stuData" style="width: 100%">
              <el-table-column
                  sortable
                  fixed
                  prop="id"
                  label="ID"
                  width="150"
                  :filters="[
                      { text: '20160503', value: '20160503' },
                      { text: '20160509', value: '20160509' },
                      ]"
                  :filter-method="filterHandler"
              />
              <el-table-column prop="name" label="Name" width="170" />
              <el-table-column prop="sex" label="Sex" width="170" />
              <el-table-column prop="age" label="Age" width="170" />
              <el-table-column prop="email" label="Email"  />
              <el-table-column fixed="right" label="Operations" width="120">
                 <el-button type="text" size="small" @click="">删除</el-button>
              </el-table-column>
            </el-table>
<!--            <el-table :data="curriculum.data" style="width: 100%">-->
<!--              <el-table-column label="时间" width="430">-->
<!--                <el-date-picker v-model="curriculum.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="curriculum.data[0].description" :rows="2" type="textarea" placeholder="请输入..." />-->
<!--              </el-table-column>-->
<!--&lt;!&ndash;              <el-table-column fixed="right" label="操作" width="200">&ndash;&gt;-->
<!--&lt;!&ndash;                <el-button type="text" size="large" @click="releaseHW(curriculum)">发布作业</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-button type="text" size="large" @click="releaseNotice(curriculum)">发布通知</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;              </el-table-column>&ndash;&gt;-->
<!--            </el-table>-->
          </el-collapse-item>
        </el-collapse>

      </el-tab-pane>
      <el-tab-pane label="发布中心" name="2">
        <el-dialog v-model="releaseHWFormVisible" title="发布作业" width="30%">
          <el-form>
            <el-form-item label="作业内容" label-width="100px">
              <el-input v-model="releaseHWForm.content" autocomplete="off" />
            </el-form-item>
            <el-form-item label="截止日期" label-width="100px">
              <el-date-picker v-model="releaseHWForm.ddl" type="date" />
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="releaseHWFormVisible = false">取消</el-button>
              <el-button type="primary" @click="ConfirmReleaseHW">确认</el-button>
            </span>
          </template>
        </el-dialog>
<!--        <el-button @click="AddCurriculum">添加组织</el-button>-->
<!--        <el-table :data="stuData" style="width: 100%">-->
<!--          <el-table-column v-for="(curriculum, currIdx) in curriculumData"-->
<!--                           label="课程"-->
<!--                           :data="curriculum.title + '（课序号：' + curriculum.data[0].courseId + '）'" :name="curriculum.id"-->
<!--          >-->
<!--          </el-table-column>-->

<!--          <el-table-column fixed="right" label="操作" width="200">-->
<!--            <el-button type="text" size="large" @click="releaseHW(curriculum)">发布作业</el-button>-->
<!--            <el-button type="text" size="large" @click="releaseNotice(curriculum)">发布通知</el-button>-->
<!--          </el-table-column>-->
<!--        </el-table>-->
        <el-collapse>
          <el-collapse-item v-for="(curriculum, currIdx) in curriculumData"
                            :title="curriculum.title + '（课序号：' + curriculum.data[0].courseId + '）'" :name="curriculum.id">
<!--            <el-table :data="curriculum.data" style="width: 100%">-->
<!--              <el-table-column label="时间" width="430">-->
<!--                <el-date-picker v-model="curriculum.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="curriculum.data[0].description" :rows="2" type="textarea" placeholder="请输入..." />-->
<!--              </el-table-column>-->
<!--              <el-table-column fixed="right" label="操作" width="200">-->
            <el-row>
              <el-col :span="3">
                <el-button   @click="releaseHW(curriculum)">发布作业</el-button>
              </el-col>
              <el-col :span="3">
                <el-button   @click="releaseNotice(curriculum)">发布通知</el-button>
              </el-col>
              <el-col :span="18"/>
            </el-row>
            <el-table :data="hwData" style="width: 100%">
              <el-table-column label="截止时间" width="180">
                <template #default="scope">
                  <div style="display: flex; align-items: center">
                    <el-icon><timer /></el-icon>
                    <span style="margin-left: 10px"></span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="作业内容" prop="name">
              </el-table-column>
              <el-table-column label="操作" width="180">
                <el-button type="text" size="large" @click="">删除作业</el-button>
              </el-table-column>
            </el-table>
            <el-table :data="tgData" style="width: 100%">
              <el-table-column label="通告内容" prop="name">
              </el-table-column>
              <el-table-column label="操作" width="180">
                <el-button type="text" size="large" @click="">删除通知</el-button>
              </el-table-column>
            </el-table>

<!--              </el-table-column>-->
<!--            </el-table>-->
          </el-collapse-item>
        </el-collapse>

      </el-tab-pane>
      <el-tab-pane label="学生课程作业" name="3">
        <el-collapse>
          <el-collapse-item v-for="(curriculum, cuuIdx) in curriculumData"
            :title="curriculum.title + '（课序号：' + curriculum.data[0].courseId + '）'" :name="curriculum.id">
            <el-collapse>
              <el-table :data="curriculum.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">gitee地址</el-button>
                </el-table-column>
              </el-table>

            </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, reactive } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'
import { request } from "@/network/request";
const activeMenuIdx = ref('2');
const onMenuIdxChange = (idx: string) => {
  activeMenuIdx.value = idx;
}
const activeTab = ref('1')
const handleTabClick = (tab: TabsPaneContext, event: Event) => {

}
const getFormDate = () => {
  const Dates = new Date();

  //年份
  const Year: number = Dates.getFullYear();

  //月份下标是0-11
  const Months: any = (Dates.getMonth() + 1) < 10 ? '0' + (Dates.getMonth() + 1) : (Dates.getMonth() + 1);

  //具体的天数
  const Day: any = Dates.getDate() < 10 ? '0' + Dates.getDate() : Dates.getDate();
  return Year + '-' + Months + '-' + Day;
}


//组织中心
interface StudentDataI {
  name: string,
  email: string,
  message: string,
  score: number
}
interface CurriculumDataIf {
  title: string,
  id: string,
  data: [{
    time: any,
    description: string,
    code: string,
    courseId: string
  }],
  student: StudentDataI[]
}

const curriculumData = ref<CurriculumDataIf[]>([]);
const createCurrFormVisible = ref(false);
const createCurrForm = reactive({
  name: '',
  courseId: '',
  des: ''
})
const updateCurrFormVisible = ref(false);
const updateCurrForm = reactive({
  name: '',
  courseId: '',
  des: '',
  idx: -1
})
const releaseHWFormVisible = ref(false);
const releaseHWForm = reactive({
  content: '',
  ddl: new Date(),
  curr:{}
})
const AddCurriculum = () => {
  createCurrForm.name = '';
  createCurrForm.courseId = '';
  createCurrForm.des = '';

  createCurrFormVisible.value = true;
}
const ConfirmAddCurr = () => {
  let param = new FormData();
  param.append('name', createCurrForm.name);
  param.append('desc', createCurrForm.des);
  param.append('courseId', createCurrForm.courseId);
  request('/weblab/organization/createOrg', param)
    .then(res => {
      let createData = res.data;
      let code = '';
      let getMessageParam = new FormData();
      getMessageParam.append('orgId', createData.pkg);
      request('/weblab/organization/getOrgMessageById', param)
        .then(res => {
          code = res.data.pkg.code;
        })
        .catch(error => {
          console.log(error);
        })


      curriculumData.value!.push({
        title: createCurrForm.name,
        id: `${createData.pkg}`,
        student: [
          {
            name: '张三',
            email: '123@126.com',
            message: '这是张三同学这是张三同学这是张三同学这是张三同学这是张三同学',
            score: 0,
          }
        ],
        data: [{
          time: ['Wed May 18 2022 00:00:00 GMT+0800 (香港标准时间)', 'Wed May 18 2022 01:01:02 GMT+0800 (香港标准时间)'],
          code: code,
          courseId: createCurrForm.courseId,
          description: createCurrForm.des
        }]
      })
      createCurrFormVisible.value = false;
    })
    .catch(error => {
      console.log(error)
    })

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

    })
}
const UpdateCurrInfo = (currIdx: number) => {
  updateCurrForm.name = '';
  updateCurrForm.courseId = '';
  updateCurrForm.des = '';
  updateCurrForm.idx = currIdx;
  updateCurrFormVisible.value = true;
}
const ConfirmUpdateCurr = () => {
  let param = new FormData();
  const currData = curriculumData.value[updateCurrForm.idx];
  param.append('id', currData.id);
  param.append('name', updateCurrForm.name);
  param.append('desc', updateCurrForm.des);
  param.append('courseId', updateCurrForm.courseId);
  request('/weblab/organization/updateOrg', param)
    .then(res => {
      currData.title = updateCurrForm.name;
      currData.data[0].courseId = updateCurrForm.courseId;
      currData.data[0].description = updateCurrForm.des;
    })
  updateCurrFormVisible.value = false;
}
const ImportBatchStudent = () => {

}
const ImportOneStudent = () => {

}
const releaseHW = (curr: CurriculumDataIf) => {
  releaseHWForm.content='';
  releaseHWForm.curr=curr;
  releaseHWFormVisible.value = true;
}
const ConfirmReleaseHW = () => {
  releaseHWFormVisible.value = false;
  const date=releaseHWForm.ddl;

  console.log(date.getFullYear() ,date.getMonth()+1,date.getDate())
}

const releaseNotice = (curr: CurriculumDataIf) => {
  ElMessageBox.prompt('输入通知内容', '发布通知', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
  })
    .then(({ value }) => {
      ElMessage({
        type: 'success',
        message: `通知发布成功！`,
      })
    })
    .catch(() => {

    })
}

const stuData = [
  {
    id: '20160503',
    name: 'Tom',
  },
  {
    id: '20160509',
    name: 'Tom',
  },
]
const hwData = [
  {
    name: '这是作业内容',
  },

]
const tgData = [
  {
    name: '这是通告内容',
  },

]
//作业中心
const onScoreChange = (val: any) => {
  console.log(val)
}
const DownloadHomework = () => {

}
</script>

<style >
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
Lollo_HA
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值