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

<template>
  <div class="new-task">
    <div class="go-back">
      <el-button @click="goBack">
        <div class="go-back-button"><svg-icon icon-class="go-back" /><span>返回</span></div>
      </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 v-if="!is_template" 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.begin_date" type="date" value-format="yyyy-MM-dd" />&nbsp;
          <el-select v-model="form.begin_date_hour" class="date-hour">
            <el-option v-for="item in hourArr" :key="item" :label="item" :value="item" />
          </el-select>
          <span> : </span>
          <el-select v-model="form.begin_date_minute" class="date-minute">
            <el-option v-for="item in minuteArr" :key="item" :label="item" :value="item" />
          </el-select>
          <span> ~ </span>
          <el-date-picker v-model="form.end_date" type="date" value-format="yyyy-MM-dd" />&nbsp;
          <el-select v-model="form.end_date_hour" class="date-hour">
            <el-option v-for="item in hourArr" :key="item" :label="item" :value="item" />
          </el-select>
          <span> : </span>
          <el-select v-model="form.end_date_minute" class="date-minute">
            <el-option v-for="item in minuteArr" :key="item" :label="item" :value="item" />
          </el-select>
        </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 @click="dialogVisible = true">
                  <i class="el-icon-plus" /> 添加课件
                </el-button>
                <div>
                  <el-tag
                    v-for="(item, i) in liveForm.coursewareInfo"
                    :key="item.courseware_id"
                    color="#fff"
                    closable
                    :title="item.courseware_name"
                    @close="closeCourse(i, 'live')"
                  >
                    <span>{{ item.courseware_name }}</span>
                  </el-tag>
                </div>
              </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
                  :title="item.file_name"
                  @close="closeFile(i, liveForm.file_info_list)"
                >
                  <span>{{ item.file_name }}</span>
                </el-tag>
              </el-form-item>

              <el-form-item label="可见性">
                <el-radio v-model="liveForm.courseware_visible_mode" :label="21">
                  手动推送
                </el-radio>
                <el-radio v-model="liveForm.courseware_visible_mode" :label="22">
                  一直可见
                </el-radio>
              </el-form-item>

              <el-form-item label="直播录制">
                <el-radio v-model="liveForm.zhibo_record_mode" :label="31">自动开启</el-radio>
                <el-radio v-model="liveForm.zhibo_record_mode" :label="32">手动开启</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 @click="dialogVisible = true">
                  <i class="el-icon-plus" /> 添加课件
                </el-button>
                <div>
                  <el-tag
                    v-for="(item, i) in courseForm.coursewareInfo"
                    :key="item.courseware_id"
                    color="#fff"
                    closable
                    :title="item.courseware_name"
                    @close="closeCourse(i, 'course')"
                  >
                    <span>{{ item.courseware_name }}</span>
                  </el-tag>
                </div>
              </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.is_enable_message" :label="true">开启</el-radio>
                <el-radio v-model="courseForm.is_enable_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
                  :title="item.file_name"
                  @close="closeFile(i, basicForm.file_info_list)"
                >
                  <span>{{ item.file_name }}</span>
                </el-tag>
              </el-form-item>

              <el-form-item label="提交作业">
                <el-radio v-model="basicForm.is_enable_homework" :label="true">开启</el-radio>
                <el-radio v-model="basicForm.is_enable_homework" :label="false">关闭</el-radio>
              </el-form-item>

              <el-form-item label="留言功能">
                <el-radio v-model="basicForm.is_enable_message" :label="true">开启</el-radio>
                <el-radio v-model="basicForm.is_enable_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>

    <!--选择课件-->
    <select-course
      :id="cs_item_id"
      :dialog-visible="dialogVisible"
      @selectCourse="selectCourse"
      @dialogClose="dialogClose"
    />
  </div>
</template>

<script>
import SelectCourse from '@/components/select/SelectCourse.vue';
import { GetTaskTeachingTypeList, GetTaskModeList, GetTeacherListByCourseID } from '@/api/select';
import {
  AddTaskToCSItem,
  GetTreeNodeInfo_BookChapterStruct,
  GetTaskInfo,
  UpdateTask
} from '@/api/course';
import { fileUpload } from '@/api/app';

export default {
  name: 'NewTask',
  components: { SelectCourse },
  data() {
    const validateTeacher = (rule, value, callback) => {
      if (this.form.teaching_type === 10 && !this.form.teacher_id && !this.is_template) {
        callback(new Error('授课教师不能为空'));
      } else {
        callback();
      }
    };

    return {
      id: this.$route.params.id,
      task_id: this.$route.query.task_id,
      time_type: this.$route.params.time_type,
      cs_item_id: this.$route.params.cs_item_id,
      is_template:
        'is_template' in this.$route.query ? JSON.parse(this.$route.query.is_template) : false,
      dialogVisible: false,
      type_list: [],
      teacher_list: [],
      mode_list: [],
      form: {
        name: '',
        teacher_id: '',
        begin_date: '',
        begin_date_hour: '00',
        begin_date_minute: '00',
        end_date: '',
        end_date_hour: '00',
        end_date_minute: '00',
        teaching_type: 12,
        content: ''
      },
      hourArr: [],
      minuteArr: [],
      rules: {
        name: { required: true, message: '任务名称不能为空', trigger: 'blur' },
        teacher_id: { trigger: 'blur', validator: validateTeacher }
      },
      liveForm: {
        coursewareInfo: [],
        file_info_list: [],
        courseware_visible_mode: 21,
        zhibo_record_mode: 31
      },
      courseForm: {
        coursewareInfo: [],
        task_mode: 'PRACTICE',
        is_enable_message: true
      },
      basicForm: {
        file_info_list: [],
        is_enable_homework: true,
        is_enable_message: true
      }
    };
  },
  created() {
    for (let i = 0; i < 60; i++) {
      let item = String(i);
      if (i < 10) item = '0' + item;
      if (i < 24) this.hourArr.push(item);
      this.minuteArr.push(item);
    }

    this.getPageNeedPage();
    if (this.task_id) {
      this.getTaskInfo();
    }
  },
  methods: {
    getPageNeedPage() {
      GetTaskTeachingTypeList().then(({ type_list }) => {
        this.type_list = type_list;
      });
      if (!this.is_template) {
        GetTeacherListByCourseID({ course_id: this.id }).then(({ teacher_list }) => {
          this.teacher_list = teacher_list;
        });
      }
      GetTaskModeList().then(({ mode_list }) => {
        this.mode_list = mode_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.begin_date} ${this.form.begin_date_hour}:${this.form.begin_date_minute}`,
            end_time: `${this.form.end_date} ${this.form.end_date_hour}:${this.form.end_date_minute}`,
            teacher_id: this.form.teacher_id,
            content: this.form.content
          };

          if (teaching_type === 10) {
            let courseware_id_list = [];
            this.liveForm.coursewareInfo.forEach(item => {
              courseware_id_list.push(item.courseware_id);
            });
            data['courseware_id_list'] = 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;
            data['courseware_visible_mode'] = this.liveForm.courseware_visible_mode;
            data['zhibo_record_mode'] = this.liveForm.zhibo_record_mode;
          }

          if (teaching_type === 11) {
            let courseware_id_list = [];
            this.courseForm.coursewareInfo.forEach(item => {
              courseware_id_list.push(item.courseware_id);
            });
            data['courseware_id_list'] = courseware_id_list;
            data['task_mode'] = this.courseForm.task_mode;
            data['is_enable_message'] = this.courseForm.is_enable_message;
          }

          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;
            data['is_enable_homework'] = this.basicForm.is_enable_homework;
            data['is_enable_message'] = this.basicForm.is_enable_message;
          }
          if (this.task_id) {
            data['id'] = this.task_id;
            UpdateTask(data).then(() => {
              this.goBack();
            });
          } else {
            AddTaskToCSItem(data).then(() => {
              this.goBack();
            });
          }
        } else {
          return false;
        }
      });
    },

    goBack() {
      this.$router.push({
        path: `/create_course_step_table/create_task/${this.id}?is_template=${this.is_template}`
      });
    },

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

    // 选择课件
    dialogClose() {
      this.dialogVisible = false;
    },

    selectCourse(course_id) {
      if (course_id.length === 0) {
        this.$message.warning('请选择课件');
        return;
      }
      let type = this.form.teaching_type;
      if (type === 10) {
        this.getTreeNodeInfo_BookChapterStruct(course_id, 'live');
      }

      if (type === 11) {
        this.getTreeNodeInfo_BookChapterStruct(course_id, 'course');
      }
      this.dialogVisible = false;
    },

    getTreeNodeInfo_BookChapterStruct(id, type) {
      GetTreeNodeInfo_BookChapterStruct({ id }).then(({ name, id }) => {
        if (type === 'live') {
          this.liveForm.coursewareInfo.push({ courseware_id: id, courseware_name: name });
        }
        if (type === 'course') {
          this.courseForm.coursewareInfo.push({ courseware_id: id, courseware_name: name });
        }
      });
    },

    closeCourse(i, type) {
      let courseInfo =
        type === 'live' ? this.liveForm.coursewareInfo : this.courseForm.coursewareInfo;
      courseInfo.splice(i, 1);
    },

    getTaskInfo() {
      GetTaskInfo({ id: this.task_id }).then(
        ({
          begin_time,
          end_time,
          time_type,
          teaching_type,
          name,
          teacher_id,
          content,
          courseware_list,
          accessory_list,
          task_mode,
          is_enable_homework,
          is_enable_message,
          courseware_visible_mode,
          zhibo_record_mode
        }) => {
          if (begin_time.length > 0) {
            let begin = begin_time.split(' ');
            this.form.begin_date = begin[0];
            let bTime = begin[1].split(':');
            this.form.begin_date_hour = bTime[0];
            this.form.begin_date_minute = bTime[1];
          }
          if (end_time.length > 0) {
            let end = end_time.split(' ');
            this.form.end_date = end[0];
            let eTime = end[1].split(':');
            this.form.end_date_hour = eTime[0];
            this.form.end_date_minute = eTime[1];
          }

          this.time_type = time_type;
          this.form.teaching_type = teaching_type;
          this.form.name = name;
          this.form.teacher_id = teacher_id;
          this.form.content = content;
          if (teaching_type === 10) {
            this.liveForm.coursewareInfo = courseware_list;
            this.liveForm.file_info_list = accessory_list;
            this.liveForm.courseware_visible_mode = courseware_visible_mode;
            this.liveForm.zhibo_record_mode = zhibo_record_mode;
          }

          if (teaching_type === 11) {
            this.courseForm.coursewareInfo = courseware_list;
            this.courseForm.task_mode = task_mode;
          }

          if (teaching_type === 12) {
            this.basicForm.file_info_list = accessory_list;
            this.basicForm.is_enable_homework = is_enable_homework === 'true';
            this.basicForm.is_enable_message = is_enable_message === 'true';
          }
        }
      );
    }
  }
};
</script>

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

.new-task {
  @include container;

  .go-back {
    margin-bottom: 16px;

    &-button {
      width: 78px;
      display: flex;
      justify-content: space-between;
    }
  }

  &-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;
      }

      .date-minute,
      .date-hour {
        width: 78px;

        > .el-input {
          width: 100%;
        }
      }

      .el-date-editor.el-input {
        width: 140px;
      }

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

        > span {
          display: inline-block;
          vertical-align: bottom;
          max-width: 200px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>