GCLS_Page_Learn/src/views/new_task_view/components/teacher/index.vue

<template>
  <div class="task">
    <div
      v-for="(
        {
          begin_time,
          duration_second,
          name,
          content,
          courseware_list,
          teaching_type,
          accessory_list,
          homework_list,
          message_list,
          child_task_list
        },
        taskIndex
      ) in taskList"
      :key="taskIndex"
    >
      <div class="task-title">
        <span class="task-title-index">{{ taskIndex + 1 }}</span>
        <span class="task-title-name">
          {{ previewDateTransform(begin_time, duration_second) }}
        </span>
      </div>
      <div :class="['task-content', `${taskType}-${taskIndex}`]">
        <div class="task-name">{{ name }}</div>
        <div v-html="content"></div>
        <div class="task-content-type">
          <template v-if="[taskClassify[1].teaching_type, taskClassify[4].teaching_type].includes(teaching_type)">
            <CoursewareView
              v-for="(data, i) in courseware_list"
              :key="`task-${i}`"
              :courseware-id="data.courseware_id"
              :group-id-selected-info="data.group_id_selected_info"
            />
          </template>
          <hr v-if="taskClassify[4].teaching_type === teaching_type" />
          <FileView
            v-if="[taskClassify[2].teaching_type, taskClassify[4].teaching_type].includes(teaching_type)"
            :accessory-list="accessory_list"
            :homework-list="homework_list"
          />
          <MessageView v-if="[taskClassify[3].teaching_type].includes(teaching_type)" :message-list="message_list" />
        </div>
        <!-- 子任务 -->
        <template v-if="child_task_list.length > 0">
          <hr />
          <div class="subtask-title">子任务：</div>
          <SubtaskItem
            v-for="(data, i) in child_task_list"
            :key="`subtask-${i}`"
            :class="[`${taskType}-${taskIndex}-${i}`]"
            :subtask-data="data"
          />
        </template>
      </div>
    </div>
    <ShowFile :visible="visible" :file-name="curFileName" :file-id="curFileId" @close="dialogShowFileClose" />
  </div>
</template>

<script>
export default {
  name: 'TeacherView'
};
</script>

<script setup>
import { inject } from 'vue';
import { useShowFile } from '@/common/show_file/index';
import { previewDateTransform } from '@/utils/course';
import { taskClassify } from '@/views/teacher/create_course/step_three/components/data/constant';

import ShowFile from '@/common/show_file/index.vue';
import FileView from '../common/FileView.vue';
import CoursewareView from '@/components/course/CoursewareView.vue';
import MessageView from '../common/MessageView.vue';
import SubtaskItem from '../common/SubtaskItem.vue';

let { visible, curFileId, curFileName, dialogShowFileClose } = useShowFile();

let taskList = inject('taskList');
let taskType = inject('taskType');
</script>

<style lang="scss" scoped>
.task {
  display: flex;
  flex-direction: column;
  row-gap: 48px;
  width: 830px;
  margin: 0 auto;

  & + .task {
    margin-top: 40px;
  }

  &-title {
    display: flex;

    &-index {
      width: 26px;
      height: 26px;
      margin-right: 8px;
      line-height: 26px;
      color: #fff;
      text-align: center;
      background-color: #5498ff;
      border-radius: 50%;
    }

    &-name {
      height: 26px;
      padding: 2px 12px;
      line-height: 22px;
      color: #fff;
      background-color: #666;
      border-radius: 19px;
    }
  }

  &-content {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    padding: 24px;
    margin-top: 8px;
    color: #2c2c2c;
    background-color: #fff;
    border: 1px solid $border-color;
    border-radius: 8px;
    box-shadow: 0 2px 4px $border-color;

    .task-name {
      font-size: 18px;
      font-weight: bold;
    }

    :deep hr {
      width: 100%;
      margin: 23px 0;
      border: 1px dashed $border-color;
    }

    .subtask-title {
      font-weight: bold;
    }
  }
}
</style>