feat:add timeline component to course page

src/global/register-element.js

@@ -19,11 +19,20 @@ import {
   ElMessage,
   ElRadioButton,
   ElRadioGroup,
-  ElPopover, ElCarousel, ElCarouselItem, ElOption, ElTable, ElTableColumn, ElDescriptionsItem, ElDescriptions,
+  ElPopover,
+  ElCarousel,
+  ElCarouselItem,
+  ElOption,
+  ElTable,
+  ElTableColumn,
+  ElDescriptionsItem,
+  ElDescriptions,
   ElCard,
   ElRow,
   ElCol,
-  ElTag
+  ElTag,
+  ElTimeline,
+  ElTimelineItem,
 } from "element-plus";
 
 // NOTE 使用到的组件列表，请确保 import 和 component 的一致性
@@ -59,7 +68,9 @@ const components = [
   ElCard,
   ElRow,
   ElCol,
-  ElTag
+  ElTag,
+  ElTimeline,
+  ElTimelineItem,
 ];
 
 export default function (app) {

src/views/CoursePage/CourseDetail.vue

@@ -27,8 +27,8 @@
       <el-divider></el-divider>
       <div class="course-tabs">
         <el-radio-group v-model="tabName" size="large">
+          <el-radio-button label="tasks">任务时间轴</el-radio-button>
           <el-radio-button label="notice">通知栏</el-radio-button>
-          <el-radio-button label="tasks">任务列表</el-radio-button>
           <el-radio-button label="courseware">课件列表</el-radio-button>
         </el-radio-group>
         <!--        <el-button v-teacher-permission="{role:'teacher'}" plain type="warning">添加发布</el-button>-->
@@ -62,16 +62,41 @@
             </el-button>
           </template>
         </el-popover>
-        <el-button v-if="tabName==='courseware'" v-teacher-permission="{role:'teacher'}" plain type="primary">上传课件
-        </el-button>
+        <el-upload
+            v-if="tabName==='courseware'"
+            v-teacher-permission="{role:'teacher'}"
+            :action="actionUrl"
+            :http-request="handleFileUploading"
+            :on-success="handFileUploadSuccess"
+            :show-file-list="false"
+            class="upload-demo width-100"
+            method="put"
+        >
+          <el-button plain type="primary">上传课件</el-button>
+        </el-upload>
       </div>
       <div class="course-tab-content">
-        <div v-if="tabName==='notice'" class="tab-notice">
-          <NoticeItem v-for="(item,index) in noticeInfoList" :key="index" :notice-info="item"></NoticeItem>
+        <div v-if="tabName==='tasks'" class="tab-tasks">
+          <el-timeline>
+            <el-timeline-item
+                v-for="(task, index) in tasks"
+                :key="index"
+                :timestamp="task.timestamp"
+            >
+              {{ task.content }}
+            </el-timeline-item>
+          </el-timeline>
         </div>
-        <div v-else-if="tabName==='tasks'" class="tab-tasks">
+        <div v-else-if="tabName==='notice'" class="tab-notice">
+          <NoticeItem v-for="(item,index) in noticeInfoList" :key="index" :notice-info="item"></NoticeItem>
         </div>
         <div v-else-if="tabName==='courseware'" class="tab-courseware">
+          <div class="entry-header">
+            <span class="name">文件名</span>
+            <span class="size">文件大小</span>
+            <span class="uploadTime">上传时间</span>
+            <span class="operation">操作</span>
+          </div>
           <FileEntry v-for="(entry,index) in fileEntryList"
                      :key="index"
                      :file-entry-info="entry"
@@ -153,7 +178,7 @@ const noticeTypeMap = {
   test: {type: "考试", title: "发布考试", color: themeColor.red}
 };
 
-const tabName = ref("notice");
+const tabName = ref("tasks");
 const showPopover = ref(false);
 
 const selAndInitNotice = (noticeType) => {
@@ -233,9 +258,35 @@ const fileEntryList = reactive([
   }
 ]);
 
+//新增上传文件相关
+const handleFileUploading = function () {
+
+};
+const handFileUploadSuccess = function () {
+
+};
+
 const handleDownloadFileIconClick = function (url) {
   window.open(url);
 };
+
+
+//新增任务时间轴相关
+const tasks = reactive([
+      {
+        content: "软工二大作业迭代一",
+        timestamp: "2018-04-15",
+      },
+      {
+        content: "代码题提交",
+        timestamp: "2018-03-11",
+      },
+      {
+        content: "Eval评测题目提交",
+        timestamp: "2018-02-28",
+      },
+    ]
+);
 </script>
 
 <style scoped>

src/views/CoursePage/components/FileEntry.vue

@@ -45,13 +45,14 @@ const downloadIconClick = function () {
 
 
 .file-entry {
+  font-size: 14px;
+  display: flex;
+  justify-content: space-between;
   height: 50px;
   transition: all 0.2s ease-in-out;
-  font-size: 12px;
   box-sizing: border-box;
   padding: 0 16px;
   color: #5F6368;
-  display: flex;
   align-items: center;
   border: none;
   border-bottom: 1px solid #F0F0F0;
@@ -73,16 +74,14 @@ const downloadIconClick = function () {
 
 .upload-time {
   width: 230px;
-  text-align: left;
 }
 
 .size {
   width: 232px;
-  text-align: left;
 }
 
 .operation {
-  width: fit-content;
+  width: 32px;
   text-align: right;
 }
 

src/views/CoursePage/style/CourseDetail.css

@@ -187,3 +187,29 @@
     justify-content: center;
     margin-top: 32px;
 }
+
+
+.entry-header {
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0 16px;
+    margin-bottom: 16px;
+}
+
+.entry-header .name {
+    width: 278px;
+}
+
+.entry-header .size {
+    width: 232px;
+}
+
+.entry-header .uploadTime {
+    width: 230px;
+}
+
+.entry-header .operation {
+    width: fit-content;
+    text-align: right;
+}