|
|
@@ -1,17 +1,179 @@
|
|
|
<template>
|
|
|
- <GlobalHeader/>
|
|
|
- <p style="text-align: center; font-weight: bolder; font-size: xxx-large">教师/HR页</p>
|
|
|
- <img alt="err" src="@/assets/managePage.png" style="width: 100%">
|
|
|
+ <div class="page">
|
|
|
+ <GlobalHeader/>
|
|
|
+ <div class="container">
|
|
|
+ <div class="header">
|
|
|
+ <span class="title">课程列表</span>
|
|
|
+ <div>
|
|
|
+ <el-select v-model="value" class="m-2" placeholder="Select">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-button plain type="primary ml-16" @click="dialogVisible=true">新增课程</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="courseList">
|
|
|
+ <div v-for="(index) in 8" :key="index" class="cItem">
|
|
|
+ <CourseItem></CourseItem>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="pagination">
|
|
|
+ <el-pagination :total="1000" background layout="prev, pager, next">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-dialog
|
|
|
+ v-model="dialogVisible"
|
|
|
+ title="新增课程"
|
|
|
+ width="50%"
|
|
|
+ >
|
|
|
+ <div class="createCourseCard">
|
|
|
+ <div class="newCourseInfo">
|
|
|
+ <div class="mb-16 flex-around">
|
|
|
+ <span>课程名称</span>
|
|
|
+ <el-input v-model="courseInfo.name" placeholder="课程名称"/>
|
|
|
+ </div>
|
|
|
+ <div class="mb-16 flex-around">
|
|
|
+ <span>任课教师</span>
|
|
|
+ <el-input v-model="courseInfo.teacher" placeholder="任课教师"/>
|
|
|
+ </div>
|
|
|
+ <div class="mb-16 flex-around">
|
|
|
+ <span>所属学期</span>
|
|
|
+ <el-input v-model="courseInfo.semester" placeholder="所属学期"/>
|
|
|
+ </div>
|
|
|
+ <div class="mb-16 flex-around">
|
|
|
+ <span>开课时间</span>
|
|
|
+ <el-date-picker v-model="courseInfo.startTime" placeholder="Pick a day" type="date">
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ <div class="mb-16 flex-around">
|
|
|
+ <span>邀请码 </span>
|
|
|
+ <el-input v-model="courseInfo.code" placeholder="邀请码"/>
|
|
|
+ </div>
|
|
|
+ <div class="mb-16 flex-around">
|
|
|
+ <span>外部链接</span>
|
|
|
+ <div class="checkBoxContainer">
|
|
|
+ <el-checkbox
|
|
|
+ v-model="selectMooc"
|
|
|
+ border
|
|
|
+ label="Mooc"
|
|
|
+ size="large"
|
|
|
+ ></el-checkbox>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="selectMooc" class="mb-16 flex-around">
|
|
|
+ <span>    </span>
|
|
|
+ <el-input v-model="courseInfo.moocLink" placeholder="Mooc Link"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="newCoursePic">
|
|
|
+ <div class="upLoad">
|
|
|
+ <el-upload
|
|
|
+ :before-upload="beforeAvatarUpload"
|
|
|
+ :on-success="handleAvatarSuccess"
|
|
|
+ :show-file-list="false"
|
|
|
+ action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
+ class="avatar-uploader"
|
|
|
+ >
|
|
|
+ <img v-if="courseInfo.imgUrl" :src="courseInfo.imgUrl" class="avatar"/>
|
|
|
+ <el-icon v-else class="avatar-uploader-icon">
|
|
|
+ <plus/>
|
|
|
+ </el-icon>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ <div class="mt-16">
|
|
|
+ <span style="display: block;margin-bottom: 4px">添加简介</span>
|
|
|
+ <el-input
|
|
|
+ v-model="courseInfo.description"
|
|
|
+ :rows="4"
|
|
|
+ placeholder="课程简介"
|
|
|
+ type="textarea"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex-center">
|
|
|
+ <div class="saveNewCourse">
|
|
|
+ <el-button type="primary">保存</el-button>
|
|
|
+ <el-button type="danger" @click="dialogVisible=false">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
+<script setup>
|
|
|
import GlobalHeader from "@/components/GlobalHeader";
|
|
|
-export default {
|
|
|
- name: "ManagePage",
|
|
|
- components: { GlobalHeader }
|
|
|
-};
|
|
|
+import CourseItem from "@/components/CourseItem";
|
|
|
+import {Plus} from "@element-plus/icons";
|
|
|
+import {reactive, ref} from "vue";
|
|
|
+
|
|
|
+
|
|
|
+const dialogVisible = ref(false);
|
|
|
+const selectMooc = ref(false);
|
|
|
+let courseInfo = reactive({
|
|
|
+ name: "",
|
|
|
+ teacher: "",
|
|
|
+ semester: "",
|
|
|
+ startTime: "",
|
|
|
+ code: "",
|
|
|
+ moocLink: "",
|
|
|
+ imgUrl: "",
|
|
|
+ description: ""
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+@import "managePage.css";
|
|
|
+
|
|
|
+.el-input {
|
|
|
+ width: 200px;
|
|
|
+}
|
|
|
+
|
|
|
+.flex-around :deep(.el-date-editor.el-input) {
|
|
|
+ width: 200px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.upLoad :deep(.avatar-uploader .el-upload) {
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 100%;
|
|
|
+ background-color: whitesmoke;
|
|
|
+}
|
|
|
+
|
|
|
+.upLoad :deep(.avatar-uploader .el-upload:hover) {
|
|
|
+ border-color: #409eff;
|
|
|
+}
|
|
|
+
|
|
|
+.upLoad :deep(.avatar-uploader-icon ) {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 178px;
|
|
|
+}
|
|
|
+
|
|
|
+.upLoad :deep(.avatar) {
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
|
|
|
-</style>
|
|
|
+.saveNewCourse .el-button {
|
|
|
+ width: 88px;
|
|
|
+}
|
|
|
+</style>
|
茫茫燃