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="contain" :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="handleCSItem">
              <i class="el-icon-more"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item class="dropdown-menu" :command="{ id: item.id, type: 'edit' }">
                  <span>编辑</span><svg-icon icon-class="edit" />
                </el-dropdown-item>
                <el-dropdown-item class="dropdown-menu" :command="{ id: item.id, type: 'delete ' }">
                  <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 }}
                          <!-- 任务下拉框 -->
                          <el-dropdown placement="bottom" @command="handleTask">
                            <i class="el-icon-more"></i>
                            <el-dropdown-menu slot="dropdown">
                              <el-dropdown-item
                                class="dropdown-menu"
                                :command="{ id: item.id, type: 'edit', time_type: 0 }"
                              >
                                <span>编辑</span><svg-icon icon-class="edit" />
                              </el-dropdown-item>
                            </el-dropdown-menu>
                          </el-dropdown>
                        </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 }}
                          <el-dropdown placement="bottom" @command="handleTask">
                            <i class="el-icon-more"></i>
                            <el-dropdown-menu slot="dropdown">
                              <el-dropdown-item
                                class="dropdown-menu"
                                :command="{ id: item.id, type: 'edit', time_type: 1 }"
                              >
                                <span>编辑</span><svg-icon icon-class="edit" />
                              </el-dropdown-item>
                            </el-dropdown-menu>
                          </el-dropdown>
                        </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 }}
                          <el-dropdown placement="bottom" @command="handleTask">
                            <i class="el-icon-more"></i>
                            <el-dropdown-menu slot="dropdown">
                              <el-dropdown-item
                                class="dropdown-menu"
                                :command="{ id: item.id, type: 'edit', time_type: 2 }"
                              >
                                <span>编辑</span><svg-icon icon-class="edit" />
                              </el-dropdown-item>
                            </el-dropdown-menu>
                          </el-dropdown>
                        </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>

    <!-- 课节弹出页 -->
    <add-item
      :id="itemId"
      :course-id="id"
      :type="type"
      :dialog-visible="dialogVisible"
      @dialogClose="dialogClose"
      @dialogConfirm="dialogConfirm"
    />
  </div>
</template>

<script>
import StepBar from '@/components/StepBar';
import AddItem from './AddItem.vue';

import { GetCourseInfo_ContainCSItem, GetCSItemInfoBox, DeleteCSItem } from '@/api/course';

export default {
  name: 'CreateTask',
  components: {
    StepBar,
    AddItem
  },
  data() {
    return {
      id: this.$route.params.id,
      name: '',
      picture_url: '',
      begin_date: '',
      end_date: '',
      cs_item_list: [],
      curItemID: '',
      dialogVisible: false,
      type: 'add',
      itemId: '',
      itemInfoBox: {
        name: '',
        date: [],
        pre_task_list: [],
        mid_task_list: [],
        after_task_list: [],
        learning_material_list: []
      }
    };
  },
  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}` });
    },

    // 课节处理
    handleCSItem({ id, type }) {
      if (type === 'delete') {
        this.$confirm('您确定要删除该课节吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          DeleteCSItem({ id }).then(() => {
            this.$message.success('删除课节成功！');
            this.getCourseInfo();
          });
        });
      }

      if (type === 'edit') {
        this.dialogVisible = true;
        this.itemId = id;
        this.type = 'edit';
      }
    },

    dialogConfirm(type) {
      this.dialogVisible = false;
      this.type = 'add';
      if (type === 'add') {
        this.getCourseInfo();
      } else {
        this.getCSItemInfoBox();
      }
    },

    dialogClose() {
      this.dialogVisible = false;
      this.type = 'add';
    },

    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;
        }
      );
    },

    // 任务处理
    newTask(time_type) {
      if (!this.curItemID) {
        this.$message.warning('请先创建新课节');
        return;
      }
      this.$router.push({
        path: `/create_course_step_table/new_task/${time_type}/${this.id}/${this.curItemID}`
      });
    },

    handleTask({ id, type, time_type }) {
      if (type === 'edit') {
        this.$router.push({
          path: `/create_course_step_table/new_task/${time_type}/${this.id}/${this.curItemID}`,
          query: {
            task_id: id
          }
        });
      }
    }
  }
};
</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: 100%;

                .name {
                  font-weight: 600;
                }

                .info {
                  color: #929292;

                  .el-dropdown {
                    margin-left: 16px;
                  }
                }
              }
            }

            .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;
                    min-width: 80px;
                    margin-right: 16px;
                  }

                  .el-tag {
                    max-width: 275px;
                    border-color: #dbdbdb;
                    margin-right: 16px;
                    color: #000;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }
                }
              }
            }

            .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;

                .el-collapse-item__arrow {
                  display: none;
                }

                &.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-dropdown-menu {
  padding: 1px;

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