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 @click="$router.push(closeLink)">
        关闭
      </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 class="nowrap-ellipsis task-item-name" :title="item.name">{{ item.name }}</span>
            <!-- 课节下拉框 -->
            <el-dropdown placement="bottom" trigger="click" @command="handleCSItem">
              <i class="el-icon-more" />
              <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="daterange"
              range-separator="~"
            />
          </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" />
                            <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-item
                                class="dropdown-menu"
                                :command="{ id: item.id, type: 'delete', time_type: 0 }"
                              >
                                <span>删除</span><svg-icon icon-class="delete" />
                              </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 }}
                            </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" />
                            <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-item
                                class="dropdown-menu"
                                :command="{ id: item.id, type: 'delete', time_type: 1 }"
                              >
                                <span>删除</span><svg-icon icon-class="delete" />
                              </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 }}
                            </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" />
                            <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-item
                                class="dropdown-menu"
                                :command="{ id: item.id, type: 'delete', time_type: 2 }"
                              >
                                <span>删除</span><svg-icon icon-class="delete" />
                              </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 }}
                            </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-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, item.file_id)"
            >
              <span>{{ item.file_name }}</span>
            </el-tag>
          </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.vue';
import AddItem from './AddItem.vue';
import { fileUpload } from '@/api/app';
import {
  GetCourseInfo_ContainCSItem,
  GetCSItemInfoBox,
  DeleteCSItem,
  AddLearningMaterialToCSItem,
  DeleteLearningMaterialFromCSItem,
  DeleteTask
} from '@/api/course';

export default {
  name: 'CreateTask',
  components: {
    StepBar,
    AddItem
  },
  data() {
    let is_template = 'is_template' in this.$route.query ? this.$route.query.is_template === 'true' : false;

    return {
      id: this.$route.params.id,
      is_template,
      name: '',
      closeLink: JSON.parse(is_template) ? '/main?tab=TemplateList' : '/create_course',
      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() {
      return (
        this.itemInfoBox.pre_task_list.length +
        this.itemInfoBox.mid_task_list.length +
        this.itemInfoBox.after_task_list.length
      );
    }
  },
  watch: {
    curItemID() {
      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}?is_template=${this.is_template}`
      });
    },

    // 课节处理
    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, learning_material_list }) => {
          this.itemInfoBox.name = name;
          this.itemInfoBox.date = [begin_time.split(' ')[0], end_time.split(' ')[0]];
          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, file_id) {
      this.$confirm('您确定要删除这个文件吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteLearningMaterialFromCSItem({ cs_item_id: this.curItemID, file_id }).then(() => {
          this.$message.success('删除文件成功');
          this.itemInfoBox.learning_material_list.splice(i, 1);
        });
      });
    },

    // 任务处理
    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}?is_template=${this.is_template}`
      });
    },

    handleTask({ id, type, time_type }) {
      if (type === 'edit') {
        this.$router.push({
          path: `/create_course_step_table/new_task/${time_type}/${this.id}/${this.curItemID}?is_template=${this.is_template}`,
          query: {
            task_id: id
          }
        });
      }
      if (type === 'delete') {
        DeleteTask({ id }).then(() => {
          this.$message.success('删除任务成功');
          this.getCSItemInfoBox();
        });
      }
    }
  }
};
</script>

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

.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 {
        margin-top: 16px;
        font-size: 14px;
        color: #6b6b6b;

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

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

    .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;
        height: 56px;
        padding: 16px 24px;
        line-height: 24px;
        cursor: pointer;
        background-color: #eee;

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

        > .task-item-name {
          width: 275px;
        }
      }

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

    &-container {
      flex: 7;
      background-color: #fff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 12%), 0 0 6px rgba(0, 0, 0, 4%);

      // 学习资料
      %learning-materials,
      .learning-materials {
        padding: 24px 32px;

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

        .tag-list {
          margin-top: 6px;

          .el-tag {
            margin-top: 6px;
            margin-right: 8px;
          }
        }
      }

      .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;
          padding: 12px 9px;
          margin-right: 8px;
          font-size: 12px;
          line-height: 0;
          color: #fff;
          vertical-align: bottom;
          background-color: #000;
          border-radius: 50%;
        }

        .task-container {
          .number-tag {
            padding: 10px 7px;
          }
        }

        // 课前任务
        &-pre {
          &-title {
            .pre {
              background-color: #4a99ea;
            }
          }

          &-list {
            padding-left: 19px;
            margin: 16px 9px;
            border-left: 2px solid #4a99ea;
          }
        }

        // 课中任务
        &-mid {
          &-title {
            .mid {
              background-color: $basic-color;
            }
          }

          &-list {
            padding-left: 19px;
            margin: 16px 9px;
            border-left: 2px solid $basic-color;
          }
        }

        // 课后任务
        &-after {
          &-title {
            .after {
              background-color: #2ece5b;
            }
          }

          &-list {
            padding-left: 19px;
            margin: 16px 9px;
            border-left: 2px solid #2ece5b;
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
// 任务列表
.item-task-list {
  .el-card {
    margin-bottom: 16px;
    border-radius: 8px;

    .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;
      color: #000;
      background-color: #fff;

      .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;
          margin-right: 16px;
          overflow: hidden;
          color: #000;
          text-overflow: ellipsis;
          white-space: nowrap;
          border-color: #dbdbdb;
        }
      }
    }
  }

  .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 {
      padding: 10px 20px;
      background-color: #f9f9f9;
      border-bottom: 1px solid #e7e7e7;
    }
  }
}

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

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