初步完成了 创建课程的添加课节任务

src/api/course.js

@@ -104,3 +104,19 @@ export function DeleteCSItem(data) {
     data
   });
 }
+
+/**
+ * 添加任务到课节
+ * @param {Object} data
+ * @returns
+ */
+export function AddTaskToCSItem(data) {
+  let params = getRequestParams('teaching-task_manager-AddTaskToCSItem');
+
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_LearnWebSI,
+    params,
+    data
+  });
+}

src/api/select.js

@@ -0,0 +1,44 @@
+// 下拉选择列表
+import { request, getRequestParams } from '@/utils/request';
+
+/**
+ * 得到任务教学类型列表
+ */
+export function GetTaskTeachingTypeList() {
+  let params = getRequestParams('dict_manager-GetTaskTeachingTypeList');
+
+  return request({
+    type: 'post',
+    url: process.env.VUE_APP_FileServer,
+    params
+  });
+}
+
+/**
+ * 得到任务模式列表
+ */
+export function GetTaskModeList() {
+  let params = getRequestParams('dict_manager-GetTaskModeList');
+
+  return request({
+    type: 'post',
+    url: process.env.VUE_APP_FileServer,
+    params
+  });
+}
+
+/**
+ * 得到课程的授课列表
+ * @param {Object} data {course_id 课程id}
+ * @returns
+ */
+export function GetTeacherListByCourseID(data) {
+  let params = getRequestParams('teaching-course_manager-GetTeacherListByCourseID');
+
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_LearnWebSI,
+    params,
+    data
+  });
+}

src/components/SelectTeacher.vue

@@ -14,26 +14,7 @@
       <el-form-item label="真实姓名">
         <el-input v-model="searchForm.user_real_name" @keyup.enter.native="getTeacherUserList" />
       </el-form-item>
-      <el-form-item label="有效">
-        <el-select v-model="searchForm.is_valid" class="valid">
-          <el-option
-            v-for="item in typeList"
-            :key="item.label"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="已审核">
-        <el-select v-model="searchForm.is_audited" class="audited">
-          <el-option
-            v-for="item in typeList"
-            :key="item.label"
-            :label="item.name"
-            :value="item.value"
-          ></el-option>
-        </el-select>
-      </el-form-item>
+
       <el-form-item class="search-button">
         <el-button type="primary" @click="getTeacherUserList">
           <i class="el-icon-search" /> 搜索
@@ -51,17 +32,7 @@
       <el-table-column type="selection" width="55" />
       <el-table-column prop="user_name" label="用户名" width="120" />
       <el-table-column prop="user_real_name" label="真实姓名" width="120" />
-      <el-table-column prop="org_name" label="机构名" width="120" />
-      <el-table-column prop="is_valid" label="有效" width="60">
-        <template slot-scope="scope">
-          <span>{{ scope.row.is_valid === 'true' ? '√' : '' }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="is_valid" label="已审核">
-        <template slot-scope="scope">
-          <span>{{ scope.row.is_audited === 'true' ? '√' : '' }}</span>
-        </template>
-      </el-table-column>
+      <el-table-column prop="org_name" label="机构名" />
     </el-table>
 
     <el-pagination
@@ -108,27 +79,8 @@ export default {
       orgList: [],
       searchForm: {
         user_name: '',
-        user_real_name: '',
-        is_valid: '',
-        is_audited: ''
-      },
-      typeList: [
-        {
-          label: '全部',
-          name: '全部',
-          value: ''
-        },
-        {
-          label: '有效',
-          name: '已审核',
-          value: 'true'
-        },
-        {
-          label: '无效',
-          name: '未审核',
-          value: 'false'
-        }
-      ]
+        user_real_name: ''
+      }
     };
   },
   created() {
@@ -140,10 +92,10 @@ export default {
         org_id: this.orgId,
         user_name: this.searchForm.user_name,
         user_real_name: this.searchForm.user_real_name,
-        is_valid: this.searchForm.is_valid,
-        is_audited: this.searchForm.is_audited,
         page_capacity: this.page_capacity,
-        cur_page: this.cur_page
+        cur_page: this.cur_page,
+        is_valid: true,
+        is_audited: true
       };
 
       PageQueryOrgTeacherUserList(data).then(({ cur_page, total_count, org_teacher_user_list }) => {
@@ -184,14 +136,12 @@ export default {
     padding: 15px 20px 0;
   }
 
-  .el-input,
-  .el-select.valid,
-  .el-select.audited {
+  .el-input {
     width: 100px;
   }
 
-  .search-button .el-button {
-    margin-left: 120px;
+  .search-button {
+    float: right;
   }
 
   .el-pagination {

src/components/StepBar.vue

@@ -60,11 +60,12 @@ export default {
 <style lang="scss">
 .step {
   position: fixed;
-  top: $header-h + 1px;
+  top: $header-h;
   left: 0;
   z-index: 9;
   width: 100%;
   height: $step-h;
+  border-top: 1px solid #d9d9d9;
   background-color: #fff;
 
   &-container {

src/icons/svg/go-back.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 0H0V24H24V0Z" fill="white" fill-opacity="0.01"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22 20.4181C19.5535 17.4316 17.3808 15.7369 15.4822 15.3341C13.5835 14.9312 11.7759 14.8704 10.0591 15.1515V20.5L2 11.7726L10.0591 3.5V8.5835C13.2334 8.6086 15.9319 9.7474 18.1548 12C20.3777 14.2526 21.6594 17.0586 22 20.4181Z" stroke="#333333" stroke-width="1.5" stroke-linejoin="round"/>
+</svg>

src/router/index.js

@@ -80,6 +80,10 @@ const routes = [
       {
         path: '/create_course_step_table/create_task/:id',
         component: () => import('@/views/teacher/create_course/step_table/CreateTask')
+      },
+      {
+        path: '/create_course_step_table/new_task/:time_type/:id/:cs_item_id',
+        component: () => import('@/views/teacher/create_course/step_table/NewTask')
       }
     ]
   },

src/styles/element-ui.scss

@@ -34,3 +34,14 @@
   border-color: $basicColor;
   color: #fff;
 }
+
+.el-radio__input.is-checked {
+  .el-radio__inner {
+    background-color: $basicColor;
+    border-color: $basicColor;
+  }
+
+  & + .el-radio__label {
+    color: #444;
+  }
+}

src/styles/mixin.scss

@@ -2,7 +2,7 @@
   width: $basicWidth;
   min-width: $basicWidth;
   margin: 0 auto;
-  padding: 32px 0 4px;
+  padding: 32px 0 20px;
 }
 
 @mixin el-tag {

src/views/teacher/add_course/AddCourse.vue

@@ -163,8 +163,7 @@ export default {
       return isImage;
     },
     upload(file) {
-      fileUpload('Open', file).then(response => {
-        const { file_info_list } = response;
+      fileUpload('Open', file).then(({ file_info_list }) => {
         if (file_info_list.length > 0) {
           const { file_url, file_id } = file_info_list[0];
           this.form.imageUrl = file_url;

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

@@ -58,7 +58,7 @@
             closable
             @close="tagClose(item.id, i)"
           >
-            {{ item.user_name }}
+            {{ item.real_name }}
           </el-tag>
           <el-button class="teacher" icon="el-icon-plus" circle @click="selectTeacher" />
         </el-form-item>
@@ -237,7 +237,6 @@ export default {
   @include container;
 
   margin-top: $step-h;
-  margin-bottom: 20px;
 
   &-container {
     width: $basicWidth;

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

@@ -3,7 +3,7 @@
     <step-bar :step-number="2" />
     <!--课程基本信息-->
     <div class="task-course-info">
-      <div class="cover"><img :src="picture_url" alt="封面" /></div>
+      <div class="cover"><el-image fit="fill" :src="picture_url" alt="封面" /></div>
       <div class="info">
         <div class="name">{{ name }}</div>
         <div class="date">{{ begin_date }}<span>-</span>{{ end_date }}</div>
@@ -48,20 +48,193 @@
           <div class="title">课节信息</div>
           <div class="item-info-name">
             <div>课节名称</div>
-            <el-input />
+            <el-input v-model="itemInfoBox.name" readonly />
           </div>
           <div class="item-info-date">
             <div>时间</div>
             <el-date-picker
-              type="daterange"
+              v-model="itemInfoBox.date"
+              readonly
+              type="datetimerange"
               range-separator="~"
-              value-format="yyyy-MM-dd"
+              value-format="yyyy-MM-dd HH:mm:ss"
               unlink-panels
             />
           </div>
         </div>
         <div class="item-task">
-          <div class="title">课节任务</div>
+          <div class="title">
+            <span class="number-tag">{{ taskLength }}</span>
+            <span>课节任务</span>
+          </div>
+          <div class="item-task-pre task-container">
+            <!--课前任务-->
+            <div class="item-task-pre-title">
+              <span class="number-tag pre">{{ itemInfoBox.pre_task_list.length }}</span>
+              <span>课前任务</span>
+            </div>
+            <div class="item-task-pre-list item-task-list">
+              <el-card v-for="(item, i) in itemInfoBox.pre_task_list" :key="item.id">
+                <el-collapse>
+                  <el-collapse-item>
+                    <template slot="title">
+                      <div class="card-title">
+                        <div class="name">{{ i + 1 }}. {{ item.name }}</div>
+                        <div class="info">
+                          {{ item.time_space_view_txt }}
+                        </div>
+                      </div>
+                    </template>
+
+                    <div class="task-info">
+                      <div>
+                        <span class="label">要求</span>
+                        <div>{{ item.content }}</div>
+                      </div>
+                      <div>
+                        <span class="label">课件</span>
+                        <div>
+                          <el-tag
+                            v-for="li in item.courseware_list"
+                            :key="li.courseware_id"
+                            color="#fff"
+                          >
+                            {{ li.courseware_id }}
+                          </el-tag>
+                        </div>
+                      </div>
+                      <div>
+                        <span class="label">其他文件</span>
+                        <div>
+                          <el-tag v-for="li in item.accessory_list" :key="li.file_id" color="#fff">
+                            <a target="_blank" :href="li.file_url">
+                              {{ li.file_name }} {{ li.file_url }}
+                            </a>
+                          </el-tag>
+                        </div>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+              </el-card>
+              <el-button @click="newTask(0)"><i class="el-icon-plus" /> 新建任务</el-button>
+            </div>
+          </div>
+          <!--课中任务-->
+          <div class="item-task-mid task-container">
+            <div class="item-task-mid-title">
+              <span class="number-tag mid">{{ itemInfoBox.mid_task_list.length }}</span>
+              <span>课中任务</span>
+            </div>
+            <div class="item-task-mid-list item-task-list">
+              <el-card v-for="(item, i) in itemInfoBox.mid_task_list" :key="item.id">
+                <el-collapse>
+                  <el-collapse-item>
+                    <template slot="title">
+                      <div class="card-title">
+                        <div class="name">
+                          {{ itemInfoBox.pre_task_list.length + i + 1 }}. {{ item.name }}
+                        </div>
+                        <div class="info">
+                          {{ item.time_space_view_txt }}
+                        </div>
+                      </div>
+                    </template>
+
+                    <div class="task-info">
+                      <div>
+                        <span class="label">要求</span>
+                        <div>{{ item.content }}</div>
+                      </div>
+                      <div>
+                        <span class="label">课件</span>
+                        <div>
+                          <el-tag
+                            v-for="li in item.courseware_list"
+                            :key="li.courseware_id"
+                            color="#fff"
+                          >
+                            {{ li.courseware_id }}
+                          </el-tag>
+                        </div>
+                      </div>
+                      <div>
+                        <span class="label">其他文件</span>
+                        <div>
+                          <el-tag v-for="li in item.accessory_list" :key="li.file_id" color="#fff">
+                            <a target="_blank" :href="li.file_url">
+                              {{ li.file_name }} {{ li.file_url }}
+                            </a>
+                          </el-tag>
+                        </div>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+              </el-card>
+              <el-button @click="newTask(1)"><i class="el-icon-plus" /> 新建任务</el-button>
+            </div>
+          </div>
+          <!--课后任务-->
+          <div class="item-task-after task-container">
+            <div class="item-task-after-title">
+              <span class="number-tag after">{{ itemInfoBox.after_task_list.length }}</span>
+              <span>课后任务</span>
+            </div>
+            <div class="item-task-after-list item-task-list">
+              <el-card v-for="(item, i) in itemInfoBox.after_task_list" :key="item.id">
+                <el-collapse>
+                  <el-collapse-item>
+                    <template slot="title">
+                      <div class="card-title">
+                        <div class="name">
+                          {{
+                            itemInfoBox.pre_task_list.length +
+                            itemInfoBox.mid_task_list.length +
+                            i +
+                            1
+                          }}. {{ item.name }}
+                        </div>
+                        <div class="info">
+                          {{ item.time_space_view_txt }}
+                        </div>
+                      </div>
+                    </template>
+
+                    <div class="task-info">
+                      <div>
+                        <span class="label">要求</span>
+                        <div>{{ item.content }}</div>
+                      </div>
+                      <div>
+                        <span class="label">课件</span>
+                        <div>
+                          <el-tag
+                            v-for="li in item.courseware_list"
+                            :key="li.courseware_id"
+                            color="#fff"
+                          >
+                            {{ li.courseware_id }}
+                          </el-tag>
+                        </div>
+                      </div>
+                      <div>
+                        <span class="label">其他文件</span>
+                        <div>
+                          <el-tag v-for="li in item.accessory_list" :key="li.file_id" color="#fff">
+                            <a target="_blank" :href="li.file_url">
+                              {{ li.file_name }} {{ li.file_url }}
+                            </a>
+                          </el-tag>
+                        </div>
+                      </div>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+              </el-card>
+              <el-button @click="newTask(2)"><i class="el-icon-plus" /> 新建任务</el-button>
+            </div>
+          </div>
         </div>
         <div class="learning-materials">
           <div class="title">学习资料</div>
@@ -74,9 +247,10 @@
 
     <!--添加课节弹出页-->
     <el-dialog
+      v-loading="loading"
       :visible.sync="dialogVisible"
       title="课节信息"
-      width="490px"
+      width="525px"
       top="25vh"
       :close-on-click-modal="false"
       :show-close="false"
@@ -94,9 +268,9 @@
         <el-form-item label="课节周期" prop="date">
           <el-date-picker
             v-model="itemForm.date"
-            type="daterange"
+            type="datetimerange"
             range-separator="~"
-            value-format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd HH:mm:ss"
             unlink-panels
           />
         </el-form-item>
@@ -142,13 +316,28 @@ export default {
         date: { required: true, message: '课节周期不能为空', trigger: 'blur' }
       },
       itemInfoBox: {
-        name: ''
-      }
+        name: '',
+        date: [],
+        pre_task_list: [],
+        mid_task_list: [],
+        after_task_list: [],
+        learning_material_list: []
+      },
+      loading: false
     };
   },
+  computed: {
+    taskLength: function () {
+      return (
+        this.itemInfoBox.pre_task_list.length +
+        this.itemInfoBox.mid_task_list.length +
+        this.itemInfoBox.after_task_list.length
+      );
+    }
+  },
   watch: {
     curItemID: function () {
-      console.log(2);
+      this.getCSItemInfoBox();
     }
   },
   created() {
@@ -171,19 +360,41 @@ export default {
       this.$router.push({ path: `/create_course_step_table/select_book/${this.id}` });
     },
     addCSItem() {
-      let data = {
-        course_id: this.id,
-        name: this.itemForm.name,
-        begin_time: this.itemForm.date[0],
-        end_time: this.itemForm.date[1]
-      };
-      AddCSItemToCourse(data).then(() => {
-        this.dialogVisible = false;
-        this.getCourseInfo();
+      this.$refs.itemForm.validate(valid => {
+        if (valid) {
+          let data = {
+            course_id: this.id,
+            name: this.itemForm.name,
+            begin_time: this.itemForm.date[0],
+            end_time: this.itemForm.date[1]
+          };
+          this.loading = true;
+          AddCSItemToCourse(data)
+            .then(() => {
+              this.dialogVisible = false;
+              this.loading = false;
+              this.getCourseInfo();
+              // 重置itemForm
+              this.itemForm = { name: '', date: [] };
+            })
+            .catch(() => {
+              this.loading = false;
+            });
+        } else {
+          return false;
+        }
       });
     },
     getCSItemInfoBox() {
-      GetCSItemInfoBox({ id: this.curItemID }).then(res => {});
+      GetCSItemInfoBox({ id: this.curItemID }).then(
+        ({ name, begin_time, end_time, pre_task_list, mid_task_list, after_task_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;
+        }
+      );
     },
     deleteCSItem(id) {
       this.$confirm('您确定要删除该课节吗？', '提示', {
@@ -196,6 +407,11 @@ export default {
           this.getCourseInfo();
         });
       });
+    },
+    newTask(time_type) {
+      this.$router.push({
+        path: `/create_course_step_table/new_task/${time_type}/${this.id}/${this.curItemID}`
+      });
     }
   }
 };
@@ -222,7 +438,7 @@ export default {
       height: 100%;
       border-right: 1px solid #e5e5e5;
 
-      img {
+      .el-image {
         width: 100%;
         height: 100%;
       }
@@ -269,12 +485,11 @@ export default {
   // 下部的课节
   &-item {
     display: flex;
+    align-items: stretch;
     border-radius: 8px;
-    height: calc(100vh - #{$header-h} - #{$step-h} - 240px);
 
     &-list {
       flex: 3;
-      height: 100%;
       background-color: #eee;
 
       &-title {
@@ -302,13 +517,14 @@ export default {
     &-container {
       flex: 7;
       background-color: #fff;
-      box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.15);
+      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;
 
         .title {
-          font-size: 20px;
+          font-size: 18px;
+          font-weight: 700;
           margin-bottom: 24px;
         }
       }
@@ -335,17 +551,160 @@ export default {
         }
       }
 
+      // 课节任务
       .item-task {
         @extend .learning-materials;
 
         border-bottom: 1px solid #d9d9d9;
+
+        .title {
+          margin-bottom: 24px;
+        }
+
+        .number-tag {
+          display: inline-block;
+          vertical-align: bottom;
+          line-height: 0;
+          padding: 12px 9px;
+          margin-right: 8px;
+          font-size: 12px;
+          background-color: #000;
+          color: #fff;
+          border-radius: 50%;
+        }
+
+        .task-container {
+          .number-tag {
+            padding: 10px 7px;
+          }
+
+          .item-task-list {
+            .el-card {
+              border-radius: 8px;
+              margin-bottom: 16px;
+
+              .card-title {
+                display: flex;
+                justify-content: space-between;
+                width: calc(100% - 36px);
+
+                .name {
+                  font-weight: 600;
+                }
+
+                .info {
+                  color: #929292;
+                }
+              }
+            }
+
+            .el-card,
+            .el-collapse-item__wrap {
+              background-color: #f7f7f7;
+
+              .el-collapse-item__content {
+                padding: 15px 24px 9px;
+                background-color: #fff;
+                color: #000;
+
+                .task-info > div {
+                  display: flex;
+                  align-items: center;
+                  padding: 8px 0;
+
+                  span.label {
+                    width: 80px;
+                    margin-right: 16px;
+                  }
+
+                  .el-tag {
+                    border-color: #dbdbdb;
+                    margin-right: 16px;
+                    color: #000;
+                  }
+                }
+              }
+            }
+
+            .el-card.is-always-shadow,
+            .el-card.is-hover-shadow:focus,
+            .el-card.is-hover-shadow:hover {
+              box-shadow: 0 0;
+            }
+
+            .el-card__body {
+              padding: 0;
+              background-color: #f7f7f7;
+
+              .el-collapse-item__header {
+                height: 22px;
+                line-height: 22px;
+                background-color: #f9f9f9;
+                border-bottom-width: 0;
+
+                &.focusing:focus:not(:hover) {
+                  color: #000;
+                }
+              }
+
+              .el-collapse-item > div:first-child {
+                background-color: #f9f9f9;
+                border-bottom: 1px solid #e7e7e7;
+                padding: 10px 20px;
+              }
+            }
+          }
+        }
+
+        // 课前任务
+        &-pre {
+          &-title {
+            .pre {
+              background-color: #4a99ea;
+            }
+          }
+
+          &-list {
+            margin: 16px 9px;
+            border-left: 2px solid #4a99ea;
+            padding-left: 19px;
+          }
+        }
+        // 课中任务
+        &-mid {
+          &-title {
+            .mid {
+              background-color: $basicColor;
+            }
+          }
+
+          &-list {
+            margin: 16px 9px;
+            border-left: 2px solid $basicColor;
+            padding-left: 19px;
+          }
+        }
+        // 课后任务
+        &-after {
+          &-title {
+            .after {
+              background-color: #2ece5b;
+            }
+          }
+
+          &-list {
+            margin: 16px 9px;
+            border-left: 2px solid #2ece5b;
+            padding-left: 19px;
+          }
+        }
       }
     }
   }
 
   .el-dialog {
     .item-name {
-      width: 350px;
+      width: 400px;
     }
   }
 }

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

@@ -0,0 +1,350 @@
+<template>
+  <div class="new-task">
+    <div class="go-back">
+      <el-button @click="goBack"><svg-icon icon-class="go-back" /> 返回</el-button>
+    </div>
+    <div class="new-task-container">
+      <div class="title">新任务</div>
+      <el-form
+        ref="newTaskForm"
+        :model="form"
+        :rules="rules"
+        label-width="150px"
+        label-position="left"
+      >
+        <el-form-item label="任务名称" prop="name">
+          <el-input v-model="form.name" />
+        </el-form-item>
+
+        <el-form-item label="授课教师" prop="teacher_id">
+          <el-select v-model="form.teacher_id">
+            <el-option
+              v-for="item in teacher_list"
+              :key="item.teacher_id"
+              :label="item.teacher_name"
+              :value="item.teacher_id"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="时间">
+          <el-date-picker
+            v-model="form.date"
+            type="datetimerange"
+            range-separator="~"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            unlink-panels
+          />
+        </el-form-item>
+
+        <el-form-item label="任务说明">
+          <el-input v-model="form.content" type="textarea" rows="5" resize="none"></el-input>
+        </el-form-item>
+
+        <el-form-item label="任务模板">
+          <el-select v-model="form.teaching_type">
+            <el-option
+              v-for="item in type_list"
+              :key="item.type"
+              :label="item.name"
+              :value="item.type"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <!-- 任务模式 直播 -->
+          <div v-if="form.teaching_type === 10" class="task-template">
+            <el-form :model="liveForm" label-width="100px" label-position="left">
+              <el-form-item label="课件任务">
+                <el-button><i class="el-icon-plus" /> 添加课件</el-button>
+              </el-form-item>
+
+              <el-form-item label="上传文档">
+                <el-upload
+                  action="no"
+                  :http-request="upload"
+                  multiple
+                  :show-file-list="false"
+                  accept="*"
+                >
+                  <el-button><svg-icon icon-class="upload" /> 上传文档</el-button>
+                </el-upload>
+                <el-tag
+                  v-for="(item, i) in liveForm.file_info_list"
+                  :key="item.file_id"
+                  color="#fff"
+                  closable
+                  @close="closeFile(i, liveForm.file_info_list)"
+                >
+                  {{ item.file_name }}
+                </el-tag>
+              </el-form-item>
+
+              <el-form-item label="可见性">
+                <el-radio v-model="liveForm.is_visibility" :label="true">手动推送</el-radio>
+                <el-radio v-model="liveForm.is_visibility" :label="false">一直课件</el-radio>
+              </el-form-item>
+
+              <el-form-item label="直播录制">
+                <el-radio v-model="liveForm.recording" label="auto">自动开启</el-radio>
+                <el-radio v-model="liveForm.recording" label="manual">手动开启</el-radio>
+              </el-form-item>
+            </el-form>
+          </div>
+          <!-- 任务模式 课件 -->
+          <div v-else-if="form.teaching_type === 11" class="task-template">
+            <el-form :model="courseForm" label-width="100px" label-position="left">
+              <el-form-item label="课件任务">
+                <el-button><i class="el-icon-plus" /> 添加课件</el-button>
+              </el-form-item>
+
+              <el-form-item label="任务模式">
+                <el-radio
+                  v-for="item in mode_list"
+                  :key="item.code"
+                  v-model="courseForm.task_mode"
+                  :label="item.code"
+                  >{{ item.name }}</el-radio
+                >
+              </el-form-item>
+
+              <el-form-item label="留言功能">
+                <el-radio v-model="courseForm.leave_message" :label="true">开启</el-radio>
+                <el-radio v-model="courseForm.leave_message" :label="false">关闭</el-radio>
+              </el-form-item>
+            </el-form>
+          </div>
+          <!-- 任务模式 基础 -->
+          <div v-else-if="form.teaching_type === 12" class="task-template">
+            <el-form :model="basicForm" label-width="100px" label-position="left">
+              <el-form-item label="上传文档">
+                <el-upload
+                  action="no"
+                  :http-request="upload"
+                  multiple
+                  :show-file-list="false"
+                  accept="*"
+                >
+                  <el-button><svg-icon icon-class="upload" /> 上传文档</el-button>
+                </el-upload>
+                <el-tag
+                  v-for="(item, i) in basicForm.file_info_list"
+                  :key="item.file_id"
+                  color="#fff"
+                  closable
+                  @close="closeFile(i, basicForm.file_info_list)"
+                >
+                  {{ item.file_name }}
+                </el-tag>
+              </el-form-item>
+
+              <el-form-item label="提交作业">
+                <el-radio v-model="basicForm.is_submit" :label="true">开启</el-radio>
+                <el-radio v-model="basicForm.is_submit" :label="false">关闭</el-radio>
+              </el-form-item>
+
+              <el-form-item label="留言功能">
+                <el-radio v-model="basicForm.leave_message" :label="true">开启</el-radio>
+                <el-radio v-model="basicForm.leave_message" :label="false">关闭</el-radio>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button class="done" type="primary" @click="addTaskToCSItem">确定</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import { GetTaskTeachingTypeList, GetTaskModeList, GetTeacherListByCourseID } from '@/api/select';
+import { AddTaskToCSItem } from '@/api/course';
+import { fileUpload } from '@/api/app';
+
+export default {
+  name: 'NewTask',
+  data() {
+    return {
+      id: this.$route.params.id,
+      time_type: this.$route.params.time_type,
+      cs_item_id: this.$route.params.cs_item_id,
+      type_list: [],
+      teacher_list: [],
+      mode_list: [],
+      form: {
+        name: '',
+        teacher_id: '',
+        date: [],
+        teaching_type: 12,
+        content: ''
+      },
+      rules: {
+        name: { required: true, message: '任务名称不能为空', trigger: 'blur' },
+        teacher_id: { required: true, message: '授课教师不能为空', trigger: 'blur' }
+      },
+      liveForm: {
+        courseware_id_list: [],
+        file_info_list: [],
+        is_visibility: true,
+        recording: 'auto'
+      },
+      courseForm: {
+        courseware_id_list: [],
+        task_mode: 'PRACTICE',
+        leave_message: true
+      },
+      basicForm: {
+        file_info_list: [],
+        is_submit: true,
+        leave_message: true
+      }
+    };
+  },
+  created() {
+    this.getTaskTeachingTypeList();
+    this.getTeacherListByCourseID();
+    this.getTaskModeList();
+  },
+  methods: {
+    getTaskTeachingTypeList() {
+      GetTaskTeachingTypeList().then(({ type_list }) => {
+        this.type_list = type_list;
+      });
+    },
+    addTaskToCSItem() {
+      this.$refs.newTaskForm.validate(valid => {
+        if (valid) {
+          let teaching_type = this.form.teaching_type;
+
+          let data = {
+            cs_item_id: this.cs_item_id,
+            name: this.form.name,
+            time_type: Number(this.time_type),
+            teaching_type: teaching_type,
+            begin_time: this.form.date[0],
+            end_time: this.form.date[1],
+            teacher_id: this.form.teacher_id,
+            content: this.form.content
+          };
+
+          if (teaching_type === 10) {
+            data['courseware_id_list'] = this.liveForm.courseware_id_list;
+            let file_info_list = [];
+            this.liveForm.file_info_list.forEach(item => {
+              file_info_list.push(item.file_id);
+            });
+            data['file_id_list'] = file_info_list;
+          }
+
+          if (teaching_type === 11) {
+            data['courseware_id_list'] = this.courseForm.courseware_id_list;
+          }
+
+          if (teaching_type === 12) {
+            let file_info_list = [];
+            this.basicForm.file_info_list.forEach(item => {
+              file_info_list.push(item.file_id);
+            });
+            data['file_id_list'] = file_info_list;
+          }
+          AddTaskToCSItem(data).then(({ status }) => {
+            if (status === 1) {
+              this.goBack();
+            }
+          });
+        } else {
+          return false;
+        }
+      });
+    },
+    getTaskModeList() {
+      GetTaskModeList().then(({ mode_list }) => {
+        this.mode_list = mode_list;
+      });
+    },
+    getTeacherListByCourseID() {
+      GetTeacherListByCourseID({ course_id: this.id }).then(({ teacher_list }) => {
+        this.teacher_list = teacher_list;
+      });
+    },
+    goBack() {
+      this.$router.push({ path: `/create_course_step_table/create_task/${this.id}` });
+    },
+    upload(file) {
+      let type = this.form.teaching_type;
+      fileUpload('Open', file).then(({ file_info_list }) => {
+        if (type === 10) {
+          this.liveForm.file_info_list = this.liveForm.file_info_list.concat(file_info_list);
+          return;
+        }
+
+        if (type === 12) {
+          this.basicForm.file_info_list = this.basicForm.file_info_list.concat(file_info_list);
+        }
+      });
+    },
+    closeFile(i, arr) {
+      arr.splice(i, 1);
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import '~@/styles/mixin.scss';
+
+.new-task {
+  @include container;
+
+  .go-back {
+    margin-bottom: 16px;
+
+    .el-button {
+      width: 120px;
+    }
+  }
+
+  &-container {
+    background-color: #fff;
+    width: 100%;
+    padding: 24px 32px;
+
+    .title {
+      font-size: 18px;
+      font-weight: 700;
+      margin-bottom: 24px;
+    }
+
+    .el-form {
+      .el-input,
+      .el-textarea,
+      .task-template {
+        width: 640px;
+      }
+
+      .task-template {
+        background-color: #fbfbfb;
+        padding: 24px 32px;
+        border: 1px solid #d9d9d9;
+        border-radius: 8px;
+
+        .el-form-item:not(:first-child, :last-child) {
+          margin: 20px 0;
+        }
+      }
+
+      .el-button.done {
+        width: 120px;
+      }
+
+      .el-tag {
+        margin-right: 16px;
+      }
+    }
+  }
+}
+</style>

src/views/teacher/main/TaskList.vue

@@ -1,21 +1,21 @@
 <template>
-  <div class="task">
-    <div class="task-top">
+  <div class="tasks">
+    <div class="tasks-top">
       <el-calendar v-model="date" />
-      <div class="task-top-notification">
-        <div class="task-top-notification-title">
+      <div class="tasks-top-notification">
+        <div class="tasks-top-notification-title">
           <div>
-            <svg-icon icon-class="task-notification" />
+            <svg-icon icon-class="tasks-notification" />
             <span class="title">任务通知</span>
           </div>
           <div></div>
         </div>
-        <div class="task-top-notification-container"></div>
+        <div class="tasks-top-notification-container"></div>
       </div>
     </div>
-    <div class="task-container">
-      <div class="task-container-title">
-        <div class="task-container-title-left">
+    <div class="tasks-container">
+      <div class="tasks-container-title">
+        <div class="tasks-container-title-left">
           <svg-icon icon-class="clock" />
           <span class="title">时间轴</span>
           <span class="date">{{ dateTime }}</span>
@@ -26,19 +26,19 @@
           <el-select v-model="selected"></el-select>
         </div>
       </div>
-      <div class="task-container-main">
-        <div v-for="(item, i) in task_group_list" :key="i" class="task-group">
-          <div class="task-group-top">
-            <span class="task-group-top-time">{{ item.begin_time_view_text }}</span>
-            <span class="task-group-top-line"></span>
+      <div class="tasks-container-main">
+        <div v-for="(item, i) in task_group_list" :key="i" class="tasks-group">
+          <div class="tasks-group-top">
+            <span class="tasks-group-top-time">{{ item.begin_time_view_text }}</span>
+            <span class="tasks-group-top-line"></span>
           </div>
-          <div class="task-group-list">
-            <div v-for="list in item.task_list" :key="list.id" class="task-group-list-info">
-              <div class="task-group-list-info-name">
+          <div class="tasks-group-list">
+            <div v-for="list in item.task_list" :key="list.id" class="tasks-group-list-info">
+              <div class="tasks-group-list-info-name">
                 {{ timeType(list.time_type) }}任务：{{ list.name }}
               </div>
-              <div class="task-group-list-info-item-name">{{ list.cs_item_name }}</div>
-              <div class="task-group-list-info-time">{{ list.time_space_view_txt }}</div>
+              <div class="tasks-group-list-info-item-name">{{ list.cs_item_name }}</div>
+              <div class="tasks-group-list-info-time">{{ list.time_space_view_txt }}</div>
               <div></div>
             </div>
           </div>
@@ -106,7 +106,7 @@ export default {
 </script>
 
 <style lang="scss">
-.task {
+.tasks {
   &-top {
     display: flex;
     justify-content: space-between;
@@ -183,7 +183,7 @@ export default {
     &-main {
       margin: 0 24px 8px 40px;
 
-      .task-group {
+      .tasks-group {
         margin-top: 8px;
 
         &-top {