update

src/api/app.js

@@ -56,6 +56,30 @@ export function fileUpload(SecurityLevel, file) {
 }
 
 /**
+ * 下载文件
+ * @param {Object} data {FileID 文件ID}
+ * @returns
+ */
+export function FileDownload(FileID) {
+  const { token, isHas } = getToken();
+
+  let params = {
+    UserCode: isHas ? token.user_code : '',
+    UserType: isHas ? token.user_type : '',
+    SessionID: isHas ? token.session_id : '',
+    FileID
+  };
+
+  return request({
+    method: 'get',
+    url: '/GCLSFileServer/WebFileDownload',
+    timeout: 0,
+    responseType: 'blob',
+    params
+  });
+}
+
+/**
  * 得到文件存储信息
  * @param {Object} data { file_id 文件ID }
  */

src/api/course.js

@@ -316,3 +316,33 @@ export function ReleaseCourse(data) {
     data
   });
 }
+
+/**
+ * 添加学习资料到课节
+ * @param {Object} data
+ */
+export function AddLearningMaterialToCSItem(data) {
+  let params = getRequestParams('teaching-cs_item_manager-AddLearningMaterialToCSItem');
+
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_LearnWebSI,
+    params,
+    data
+  });
+}
+
+/**
+ * 填写任务执行信息（学员填写）
+ * @param {Object} data
+ */
+export function FillTaskExecuteInfo_Student(data) {
+  let params = getRequestParams('teaching-task_manager-FillTaskExecuteInfo_Student');
+
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_LearnWebSI,
+    params,
+    data
+  });
+}

src/router/index.js

@@ -107,6 +107,17 @@ const routes = [
       }
     ]
   },
+  // 任务详情
+  {
+    path: '/task_detail',
+    component: Layout,
+    children: [
+      {
+        path: '/task_detail/student/:id',
+        component: () => import('@/views/task_details/student')
+      }
+    ]
+  },
   // 课程列表 -> 学生列表
   {
     path: '/student_list',

src/views/course_details/index.vue

@@ -143,13 +143,7 @@
                         >
                           <span>{{ it.name }}</span>
                           <span>
-                            <span>
-                              <img src="../../assets/course_details/people.png" alt="" />
-                              姓名</span
-                            >
-                            <span class="gray" v-text="changeitTime(it.begin_time, it.end_time)">
-                              {{ it.begin_time }} ~ {{ it.end_time }}
-                            </span>
+                            <span class="gray">{{ it.begin_time }} ~ {{ it.end_time }}</span>
                             <span class="gray">···</span>
                           </span>
                         </div>
@@ -188,70 +182,6 @@
                           </div>
                         </div>
                       </el-collapse-item>
-                      <!-- <el-collapse-item style="margin-top: 16px" name="1-2">
-                        <div
-                          slot="title"
-                          :class="
-                            openList.indexOf('1-2') != -1
-                              ? 'contenttitle2'
-                              : 'contenttitle'
-                          "
-                        >
-                          <span>阅读</span>
-                          <span>
-                            <span>
-                              <img
-                                src="../../assets/course_details/people.png"
-                                alt=""
-                              />
-                              姓名</span
-                            >
-                            <span class="gray">08-21 06:00 ~ 11:00</span>
-                            <span class="gray">···</span>
-                          </span>
-                        </div>
-                        <div class="detail">
-                          <div>
-                            <span>说明</span>
-                            <p>
-                              You need to complete the online courseware task.
-                              Choose one of the attached articles to read aloud
-                              and record it and upload it.
-                            </p>
-                          </div>
-                          <div>
-                            <span>课件</span>
-                            <div>
-                              <div class="btn">
-                                <img
-                                  src="../../assets/course_details/file.png"
-                                  alt=""
-                                />
-                                <span> say the Chinese number </span>
-                              </div>
-                              <div class="btn">
-                                <img
-                                  src="../../assets/course_details/file.png"
-                                  alt=""
-                                />
-                                <span> say the Chinese number </span>
-                              </div>
-                            </div>
-                          </div>
-                          <div>
-                            <span>课件</span>
-                            <div>
-                              <div class="btn">
-                                <img
-                                  src="../../assets/course_details/fileType1.png"
-                                  alt=""
-                                />
-                                <span> The first class.doc </span>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </el-collapse-item> -->
                     </div>
                   </div>
                   <div class="tasks">
@@ -271,13 +201,7 @@
                         >
                           <span>{{ it.name }}</span>
                           <span>
-                            <span>
-                              <img src="../../assets/course_details/people.png" alt="" />
-                              姓名</span
-                            >
-                            <span class="gray" v-text="changeitTime(it.begin_time, it.end_time)">
-                              {{ it.begin_time }} ~ {{ it.end_time }}
-                            </span>
+                            <span class="gray">{{ it.begin_time }} ~ {{ it.end_time }}</span>
                             <span class="gray">···</span>
                           </span>
                         </div>
@@ -316,70 +240,6 @@
                           </div>
                         </div>
                       </el-collapse-item>
-                      <!-- <el-collapse-item style="margin-top: 16px" name="1-4">
-                        <div
-                          slot="title"
-                          :class="
-                            openList.indexOf('1-4') != -1
-                              ? 'contenttitle2'
-                              : 'contenttitle'
-                          "
-                        >
-                          <span>阅读</span>
-                          <span>
-                            <span>
-                              <img
-                                src="../../assets/course_details/people.png"
-                                alt=""
-                              />
-                              姓名</span
-                            >
-                            <span class="gray">08-21 06:00 ~ 11:00</span>
-                            <span class="gray">···</span>
-                          </span>
-                        </div>
-                        <div class="detail">
-                          <div>
-                            <span>说明</span>
-                            <p>
-                              You need to complete the online courseware task.
-                              Choose one of the attached articles to read aloud
-                              and record it and upload it.
-                            </p>
-                          </div>
-                          <div>
-                            <span>课件</span>
-                            <div>
-                              <div class="btn">
-                                <img
-                                  src="../../assets/course_details/file.png"
-                                  alt=""
-                                />
-                                <span> say the Chinese number </span>
-                              </div>
-                              <div class="btn">
-                                <img
-                                  src="../../assets/course_details/file.png"
-                                  alt=""
-                                />
-                                <span> say the Chinese number </span>
-                              </div>
-                            </div>
-                          </div>
-                          <div>
-                            <span>课件</span>
-                            <div>
-                              <div class="btn">
-                                <img
-                                  src="../../assets/course_details/fileType1.png"
-                                  alt=""
-                                />
-                                <span> The first class.doc </span>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </el-collapse-item> -->
                     </div>
                   </div>
                   <div v-if="item.after_task_list.length > 0" class="tasks">
@@ -399,13 +259,7 @@
                         >
                           <span>{{ it.name }}</span>
                           <span>
-                            <span>
-                              <img src="../../assets/course_details/people.png" alt="" />
-                              姓名</span
-                            >
-                            <span class="gray" v-text="changeitTime(it.begin_time, it.end_time)">
-                              {{ it.begin_time }} ~ {{ it.end_time }}
-                            </span>
+                            <span class="gray">{{ it.begin_time }} ~ {{ it.end_time }}</span>
                             <span class="gray">···</span>
                           </span>
                         </div>
@@ -444,70 +298,6 @@
                           </div>
                         </div>
                       </el-collapse-item>
-                      <!-- <el-collapse-item style="margin-top: 16px" name="1-6">
-                        <div
-                          slot="title"
-                          :class="
-                            openList.indexOf('1-6') != -1
-                              ? 'contenttitle2'
-                              : 'contenttitle'
-                          "
-                        >
-                          <span>阅读</span>
-                          <span>
-                            <span>
-                              <img
-                                src="../../assets/course_details/people.png"
-                                alt=""
-                              />
-                              姓名</span
-                            >
-                            <span class="gray">08-21 06:00 ~ 11:00</span>
-                            <span class="gray">···</span>
-                          </span>
-                        </div>
-                        <div class="detail">
-                          <div>
-                            <span>说明</span>
-                            <p>
-                              You need to complete the online courseware task.
-                              Choose one of the attached articles to read aloud
-                              and record it and upload it.
-                            </p>
-                          </div>
-                          <div>
-                            <span>课件</span>
-                            <div>
-                              <div class="btn">
-                                <img
-                                  src="../../assets/course_details/file.png"
-                                  alt=""
-                                />
-                                <span> say the Chinese number </span>
-                              </div>
-                              <div class="btn">
-                                <img
-                                  src="../../assets/course_details/file.png"
-                                  alt=""
-                                />
-                                <span> say the Chinese number </span>
-                              </div>
-                            </div>
-                          </div>
-                          <div>
-                            <span>课件</span>
-                            <div>
-                              <div class="btn">
-                                <img
-                                  src="../../assets/course_details/fileType1.png"
-                                  alt=""
-                                />
-                                <span> The first class.doc </span>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </el-collapse-item> -->
                     </div>
                   </div>
                 </div>
@@ -574,15 +364,6 @@ export default {
   },
   // 方法集合
   methods: {
-    // 小节时间处理
-    changeitTime(beginTime, endTime) {
-      let arr1 = beginTime.split(' ');
-      let arr2 = endTime.split(' ');
-      if (arr1[0] === arr2[0]) {
-        return arr1[0] + ' ' + arr1[1] + '~' + arr2[1];
-      }
-      return arr1[0] + ' ' + arr1[1] + '~' + arr2[0] + ' ' + arr2[1];
-    },
     // 课程任务的打开和关闭
     handleChange(val) {
       this.openList = val;
@@ -1003,12 +784,9 @@ export default {
 
               .contenttitle {
                 padding: 0 10px;
-                // margin-top: 16px;
                 width: 670px;
-                // height: 44px;
                 background: #fff;
                 border: 1px solid #e6e6e6;
-                box-sizing: border-box;
                 border-radius: 8px;
                 display: flex;
                 justify-content: space-between;
@@ -1031,40 +809,17 @@ export default {
               }
 
               .contenttitle2 {
-                padding: 0 10px;
-                // margin-top: 16px;
-                width: 670px;
-                // height: 44px;
-                background: #f9f9f9;
-                border: 1px solid #e6e6e6;
-                box-sizing: border-box;
-                border-top-left-radius: 8px;
-                border-top-right-radius: 8px;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                font-size: 16px;
-                cursor: pointer;
-
-                img {
-                  width: 16px;
-                  margin-left: 8px;
-                }
+                @extend .contenttitle;
 
-                span {
-                  margin-left: 16px;
-                }
-
-                .gray {
-                  opacity: 0.5;
-                }
+                background: #f9f9f9;
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
               }
 
               .detail {
-                width: 670px;
+                width: 599px;
                 background: #fff;
                 border: 1px solid #e7e7e7;
-                box-sizing: border-box;
                 border-bottom-left-radius: 8px;
                 border-bottom-right-radius: 8px;
                 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
@@ -1073,6 +828,7 @@ export default {
                 > div {
                   margin-top: 24px;
                   display: flex;
+                  align-items: center;
 
                   > :nth-child(1) {
                     width: 78px;
@@ -1093,7 +849,6 @@ export default {
                       height: 40px;
                       background: #fff;
                       border: 1px solid #dbdbdb;
-                      box-sizing: border-box;
                       border-radius: 4px;
                       display: flex;
                       align-items: center;
@@ -1218,7 +973,6 @@ export default {
 
   .el-collapse-item__header {
     border: none;
-    height: none;
 
     .l-collapse-item__arrow,
     .el-icon-arrow-right {

src/views/main/TaskList.vue

@@ -106,15 +106,18 @@ export default {
       }
     },
     taskLink(type, task_id) {
+      let userType = this.$store.state.user.user_type;
       if (type === 10) {
         CreateEnterLiveRoomSession({
           task_id
         }).then(({ live_room_sys_user_id, room_id, session_id, room_user_id }) => {
           this.$router.push({
-            path: `/live/${this.$store.state.user.user_type === 'TEACHER' ? 'teacher' : 'student'}`,
+            path: `/live/${userType === 'TEACHER' ? 'teacher' : 'student'}`,
             query: { live_room_sys_user_id, room_id, session_id, task_id, room_user_id }
           });
         });
+      } else if (userType === 'STUDENT') {
+        this.$router.push(`/task_detail/student/${task_id}`);
       } else {
         this.$message.warning('暂未实现');
       }

src/views/task_details/student/index.vue

@@ -0,0 +1,299 @@
+<template>
+  <div class="task-detail">
+    <div class="task-detail-top">
+      <div class="title">
+        <span class="title-name">{{ name }}</span>
+        <span class="title-time">{{ time_space_view_txt }}</span>
+      </div>
+      <div class="course_name">{{ course_name }}</div>
+      <div class="learning-material">
+        <div class="learning-material-title">学习资料</div>
+        <el-tag
+          v-for="item in learning_material_list"
+          :key="item.file_id"
+          color="#fff"
+          :title="item.file_name"
+        >
+          <span>{{ item.file_name }}</span>
+        </el-tag>
+      </div>
+    </div>
+    <div class="task-detail-main">
+      <div class="time-type">{{ timeType }}任务 {{ name }}</div>
+      <div class="time-interval">{{ time_space_view_txt }}</div>
+      <div class="task-require"><span class="label">任务要求</span>{{ content }}</div>
+      <div class="task-courseware">
+        <span class="label">课件任务</span>
+        <el-tag
+          v-for="item in courseware_list"
+          :key="item.courseware_id"
+          color="#fff"
+          :title="item.courseware_name"
+        >
+          <span>{{ item.courseware_name }}</span>
+        </el-tag>
+      </div>
+      <div class="accessory-list">
+        <span class="label">文档列表</span>
+        <el-tag
+          v-for="item in accessory_list"
+          :key="item.file_id"
+          color="#fff"
+          :title="item.file_name"
+        >
+          <span>{{ item.file_name }}</span>
+        </el-tag>
+      </div>
+      <div class="submit-homework">
+        <span class="label">提交作业</span>
+        <el-upload action="no" :http-request="upload" multiple :show-file-list="false" accept="*">
+          <el-button><svg-icon icon-class="upload" /> 上传文件</el-button>
+        </el-upload>
+      </div>
+      <div class="file-list">
+        <el-tag
+          v-for="(item, i) in file_list"
+          :key="item.file_id"
+          color="#fff"
+          closable
+          :title="item.file_name"
+          @close="deleteFile(i)"
+        >
+          <span>{{ item.file_name }}</span>
+        </el-tag>
+      </div>
+      <div class="leave-message">
+        <span class="label">给教师留言</span>
+        <el-input v-model="student_message" type="textarea" resize="none" :rows="6"></el-input>
+      </div>
+      <div class="submit-button">
+        <el-button type="primary" @click="fillTaskExecuteInfo_Student">完成任务</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { fileUpload, FileDownload } from '@/api/app';
+import { GetTaskInfo, FillTaskExecuteInfo_Student } from '@/api/course';
+
+export default {
+  data() {
+    return {
+      id: this.$route.params.id,
+      student_message: '',
+      name: '',
+      teaching_type: '',
+      time_type: '',
+      course_name: '',
+      content: '',
+      begin_time: '',
+      end_time: '',
+      task_mode: '',
+      time_space_view_txt: '',
+      courseware_list: [],
+      accessory_list: [],
+      learning_material_list: [],
+      file_list: []
+    };
+  },
+  computed: {
+    timeType() {
+      switch (this.time_type) {
+        case 0:
+          return '课前';
+        case 1:
+          return '课中';
+        case 2:
+          return '课后';
+        default:
+          return '';
+      }
+    }
+  },
+  created() {
+    GetTaskInfo({
+      id: this.id
+    }).then(
+      ({
+        name,
+        teaching_type,
+        time_type,
+        course_name,
+        begin_time,
+        end_time,
+        courseware_list,
+        accessory_list,
+        learning_material_list,
+        task_mode,
+        content,
+        time_space_view_txt
+      }) => {
+        this.name = name;
+        this.course_name = course_name;
+        this.content = content;
+        this.teaching_type = teaching_type;
+        this.time_type = time_type;
+        this.begin_time = begin_time;
+        this.end_time = end_time;
+        this.courseware_list = courseware_list;
+        this.accessory_list = accessory_list;
+        this.task_mode = task_mode;
+        this.learning_material_list = learning_material_list;
+        this.time_space_view_txt = time_space_view_txt;
+      }
+    );
+  },
+  methods: {
+    upload(file) {
+      fileUpload('Open', file).then(({ file_info_list }) => {
+        if (file_info_list.length > 0) {
+          let { file_id, file_name, file_url } = file_info_list[0];
+          this.file_list.push({ file_id, file_name, file_url });
+        }
+      });
+    },
+
+    deleteFile(i) {
+      this.file_list.splice(i, 1);
+    },
+
+    download(FileID) {
+      FileDownload(FileID).then(data => {
+        console.log(data);
+      });
+    },
+
+    fillTaskExecuteInfo_Student() {
+      let homework_file_id_list = [];
+      this.file_list.forEach(item => {
+        homework_file_id_list.push(item.file_id);
+      });
+      FillTaskExecuteInfo_Student({
+        task_id: this.id,
+        homework_file_id_list,
+        student_message: this.student_message,
+        is_finished: true
+      }).then(() => {
+        this.$message.success('任务完成成功');
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import '~@/styles/mixin.scss';
+$bor-color: #d9d9d9;
+
+.task-detail {
+  @include container;
+
+  .el-tag {
+    @include el-tag;
+
+    border-radius: 4px;
+    border-color: $bor-color;
+  }
+
+  &-top {
+    padding: 24px 32px;
+    background-color: #fff;
+    border-radius: 8px;
+
+    .title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      &-name {
+        font-size: 24px;
+        font-weight: 700;
+      }
+
+      &-time {
+        color: #737373;
+      }
+    }
+
+    .course_name {
+      margin: 8px 0 24px;
+    }
+
+    .learning-material {
+      border-top: 1px solid $bor-color;
+      padding-top: 24px;
+      margin-bottom: 16px;
+
+      &-title {
+        font-size: 18px;
+      }
+    }
+  }
+
+  &-main {
+    background-color: #fff;
+    border-radius: 8px;
+    margin-top: 16px;
+    padding: 24px 32px;
+
+    .time-type {
+      font-size: 20px;
+      font-weight: 500;
+    }
+
+    .time-interval {
+      color: #737373;
+      padding: 16px 0;
+    }
+
+    .submit-homework {
+      border-top: 1px solid $bor-color;
+      padding-top: 24px;
+      display: flex;
+      align-items: center;
+    }
+
+    .file-list {
+      padding-left: 105px;
+      margin-bottom: 16px;
+
+      > .el-tag {
+        color: #409eff;
+        padding: 0 10px;
+        border-color: #d9ecff;
+      }
+    }
+
+    .leave-message {
+      display: flex;
+      align-items: flex-start;
+
+      .label {
+        margin-top: 8px;
+      }
+
+      .el-textarea {
+        width: 1010px;
+      }
+    }
+
+    .task-require,
+    .task-courseware,
+    .accessory-list,
+    .submit-homework,
+    .leave-message {
+      margin-bottom: 16px;
+
+      .label {
+        display: inline-block;
+        width: 105px;
+      }
+    }
+
+    .submit-button {
+      padding-left: 105px;
+    }
+  }
+}
+</style>

src/views/teacher/create_course/step_table/CreateTask.vue

@@ -276,7 +276,27 @@
         <div class="learning-materials">
           <div class="title">学习资料</div>
           <div>
-            <el-button><svg-icon icon-class="upload" /> 上传文件</el-button>
+            <el-upload
+              action="no"
+              :http-request="upload"
+              multiple
+              :show-file-list="false"
+              accept="*"
+            >
+              <el-button><svg-icon icon-class="upload" /> 上传文件</el-button>
+            </el-upload>
+          </div>
+          <div class="tag-list">
+            <el-tag
+              v-for="(item, i) in itemInfoBox.learning_material_list"
+              :key="item.file_id"
+              color="#fff"
+              closable
+              :title="item.file_name"
+              @close="deleteMaterialFile(i)"
+            >
+              <span>{{ item.file_name }}</span>
+            </el-tag>
           </div>
         </div>
       </div>
@@ -297,8 +317,13 @@
 <script>
 import StepBar from '@/components/StepBar';
 import AddItem from './AddItem.vue';
-
-import { GetCourseInfo_ContainCSItem, GetCSItemInfoBox, DeleteCSItem } from '@/api/course';
+import { fileUpload } from '@/api/app';
+import {
+  GetCourseInfo_ContainCSItem,
+  GetCSItemInfoBox,
+  DeleteCSItem,
+  AddLearningMaterialToCSItem
+} from '@/api/course';
 
 export default {
   name: 'CreateTask',
@@ -404,16 +429,40 @@ export default {
 
     getCSItemInfoBox() {
       GetCSItemInfoBox({ id: this.curItemID }).then(
-        ({ name, begin_time, end_time, pre_task_list, mid_task_list, after_task_list }) => {
+        ({
+          name,
+          begin_time,
+          end_time,
+          pre_task_list,
+          mid_task_list,
+          after_task_list,
+          learning_material_list
+        }) => {
           this.itemInfoBox.name = name;
           this.itemInfoBox.date = [begin_time, end_time];
           this.itemInfoBox.pre_task_list = pre_task_list;
           this.itemInfoBox.mid_task_list = mid_task_list;
           this.itemInfoBox.after_task_list = after_task_list;
+          this.itemInfoBox.learning_material_list = learning_material_list;
         }
       );
     },
 
+    upload(file) {
+      fileUpload('Open', file).then(({ file_info_list }) => {
+        if (file_info_list.length > 0) {
+          AddLearningMaterialToCSItem({
+            cs_item_id: this.curItemID,
+            file_id: file_info_list[0].file_id
+          }).then(({ file_id, file_name, file_url }) => {
+            this.itemInfoBox.learning_material_list.push({ file_id, file_name, file_url });
+          });
+        }
+      });
+    },
+
+    deleteMaterialFile(i) {},
+
     // 任务处理
     newTask(time_type) {
       if (!this.curItemID) {
@@ -541,6 +590,7 @@ export default {
       background-color: #fff;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
 
+      // 学习资料
       .learning-materials {
         padding: 24px 32px;
 
@@ -549,6 +599,15 @@ export default {
           font-weight: 700;
           margin-bottom: 24px;
         }
+
+        .tag-list {
+          margin-top: 6px;
+
+          .el-tag {
+            margin-left: 8px;
+            margin-top: 6px;
+          }
+        }
       }
 
       .item-info {