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

<template>
  <div class="task">
    <step-bar :step-number="2" />
    <!--课程基本信息-->
    <div class="task-course-info">
      <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>
      </div>
    </div>
    <!--按钮-->
    <div class="task-button">
      <el-button class="prev-step" @click="preStep"><i class="el-icon-back" />选择教材</el-button>
      <el-button><router-link to="/create_course">关闭</router-link></el-button>
    </div>
    <!--任务课节-->
    <div class="task-item">
      <!--课节列表-->
      <div class="task-item-list">
        <template v-if="cs_item_list.length > 0">
          <div
            v-for="item in cs_item_list"
            :key="item.id"
            :class="['task-item-list-title', { selected: item.id === curItemID }]"
            @click="curItemID = item.id"
          >
            <span>{{ item.name }}</span>
            <el-dropdown placement="bottom" trigger="click" @command="deleteCSItem">
              <i class="el-icon-more"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item class="delete-menu" :command="item.id">
                  <span>删除</span><svg-icon icon-class="delete" />
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </template>
        <div v-else class="task-item-list-title">新课节</div>
        <el-button class="create-item selected" type="primary" @click="dialogVisible = true">
          <svg-icon icon-class="create-white" /> 创建新课节
        </el-button>
      </div>
      <!--课节信息-->
      <div class="task-item-container">
        <div class="item-info">
          <div class="title">课节信息</div>
          <div class="item-info-name">
            <div>课节名称</div>
            <el-input v-model="itemInfoBox.name" readonly />
          </div>
          <div class="item-info-date">
            <div>时间</div>
            <el-date-picker
              v-model="itemInfoBox.date"
              readonly
              type="datetimerange"
              range-separator="~"
              value-format="yyyy-MM-dd HH:mm:ss"
              unlink-panels
            />
          </div>
        </div>
        <div class="item-task">
          <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_name }}
                          </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_name }}
                          </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_name }}
                          </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>
          <div>
            <el-button><svg-icon icon-class="upload" /> 上传文件</el-button>
          </div>
        </div>
      </div>
    </div>

    <!--添加课节弹出页-->
    <el-dialog
      v-loading="loading"
      :visible.sync="dialogVisible"
      title="课节信息"
      width="525px"
      top="25vh"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <el-form
        ref="itemForm"
        :model="itemForm"
        :rules="itemRules"
        label-width="90px"
        label-position="left"
      >
        <el-form-item label="课节名称" prop="name">
          <el-input v-model="itemForm.name" class="item-name" />
        </el-form-item>
        <el-form-item label="课节周期" prop="date">
          <el-date-picker
            v-model="itemForm.date"
            type="datetimerange"
            range-separator="~"
            value-format="yyyy-MM-dd HH:mm:ss"
            unlink-panels
          />
        </el-form-item>
        <el-form-item>
          <el-button class="cancel" @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addCSItem">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import StepBar from '@/components/StepBar';
import {
  GetCourseInfo_ContainCSItem,
  AddCSItemToCourse,
  GetCSItemInfoBox,
  DeleteCSItem
} from '@/api/course';

export default {
  name: 'CreateTask',
  components: {
    StepBar
  },
  data() {
    return {
      id: this.$route.params.id,
      name: '',
      picture_url: '',
      begin_date: '',
      end_date: '',
      cs_item_list: [],
      curItemID: '',
      dialogVisible: false,
      itemForm: {
        name: '',
        date: []
      },
      itemRules: {
        name: { required: true, message: '课节名称不能为空', trigger: 'blur' },
        date: { required: true, message: '课节周期不能为空', trigger: 'blur' }
      },
      itemInfoBox: {
        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 () {
      this.getCSItemInfoBox();
    }
  },
  created() {
    this.getCourseInfo();
  },
  methods: {
    getCourseInfo() {
      GetCourseInfo_ContainCSItem({ id: this.id }).then(
        ({ name, picture_url, begin_date, end_date, cs_item_list }) => {
          this.name = name;
          this.picture_url = picture_url;
          this.begin_date = begin_date;
          this.end_date = end_date;
          this.cs_item_list = cs_item_list;
          if (cs_item_list.length > 0) {
            this.curItemID = cs_item_list[cs_item_list.length - 1].id;
          }
        }
      );
    },
    preStep() {
      this.$router.push({ path: `/create_course_step_table/select_book/${this.id}` });
    },
    addCSItem() {
      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(
        ({ 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('您确定要删除该课节吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteCSItem({ id }).then(() => {
          this.$message.success('删除课节成功！');
          this.getCourseInfo();
        });
      });
    },
    newTask(time_type) {
      this.$router.push({
        path: `/create_course_step_table/new_task/${time_type}/${this.id}/${this.curItemID}`
      });
    }
  }
};
</script>

<style lang="scss">
@import '~@/styles/mixin.scss';

.task {
  @include container;

  margin-top: $step-h;

  // 上部的课程信息
  &-course-info {
    display: flex;
    width: 100%;
    height: 120px;
    background-color: #fff;
    border-radius: 8px;

    .cover {
      width: 192px;
      height: 100%;
      border-right: 1px solid #e5e5e5;

      .el-image {
        width: 100%;
        height: 100%;
      }
    }

    .info {
      padding: 26px 32px;

      .name {
        font-size: 24px;
      }

      .date {
        color: #6b6b6b;
        font-size: 14px;
        margin-top: 16px;

        span {
          margin: 0 24px;
        }
      }
    }
  }

  // 中间的按钮
  &-button {
    margin: 16px 0;
    display: flex;
    justify-content: flex-end;

    .el-button + .el-button {
      margin-left: 16px;
    }

    .prev-step .el-icon-back {
      margin-right: 12px;
    }

    .preserve .svg-icon {
      margin-right: 8px;
    }
  }

  // 下部的课节
  &-item {
    display: flex;
    align-items: stretch;
    border-radius: 8px;

    &-list {
      flex: 3;
      background-color: #eee;

      &-title {
        display: flex;
        justify-content: space-between;
        padding: 16px 24px;
        height: 56px;
        line-height: 24px;
        background-color: #eee;
        cursor: pointer;

        &.selected {
          background-color: #fff;
        }
      }

      .create-item {
        margin: 24px;
        font-size: 16px;
        padding: 11px 20px;
        width: calc(100% - 48px);
      }
    }

    &-container {
      flex: 7;
      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;

        .title {
          font-size: 18px;
          font-weight: 700;
          margin-bottom: 24px;
        }
      }

      .item-info {
        @extend .learning-materials;

        border-bottom: 1px solid #d9d9d9;

        &-name,
        &-date {
          display: flex;
          margin-top: 16px;

          > :first-child {
            width: 110px;
            min-width: 120px;
            line-height: 40px;
          }

          .el-input {
            width: 600px;
          }
        }
      }

      // 课节任务
      .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: 400px;
    }
  }
}

.el-dropdown-menu {
  padding: 1px;

  .delete-menu {
    width: 128px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>