GCLS_Page_Exercise/src/views/exercise_questions/create/index.vue

<template>
  <div class="exercise">
    <div class="list">
      <el-button icon="el-icon-back" @click="back">返回练习管理</el-button>
      <div class="list-title">课上练习</div>
      <div class="exercise-list">
        <ul>
          <li v-for="(item, i) in index_list" :key="i" :class="['exercise-item', { active: i === curIndex }]">
            <SvgIcon icon-class="child" :size="20" />
            <span class="item-name nowrap-ellipsis" @click="selectExerciseItem(i)">
              {{ i + 1 }}. {{ exerciseNames[item.type] }}
            </span>
            <SvgIcon icon-class="copy" class="pointer" :size="10" @click="copy(i, item.type)" />
          </li>
        </ul>
      </div>
      <div class="list-operate">
        <el-button type="primary">批量导入</el-button>
        <el-button type="primary" @click="addQuestionToExercise('select', 'single')">新建</el-button>
      </div>
    </div>

    <CreateMain
      ref="createMain"
      :cur-index="curIndex"
      :index-list="index_list"
      @selectExerciseItem="selectExerciseItem"
      @setUp="setUp"
      @setPreview="setPreview"
      @deleteQuestion="deleteQuestion"
      @addQuestionToExercise="addQuestionToExercise"
    />

    <div class="preview">
      <div class="preview-header">
        <span class="quick-preview">快捷预览：</span>
        <div class="preview-right">
          <template v-if="preview">
            <span class="preview-button plain" @click="getPreviewData">
              <SvgIcon icon-class="loop" size="14" /><span>刷新</span>
            </span>
            <span class="preview-button"><SvgIcon icon-class="eye" /><span>完整预览</span></span>
            <span class="preview-button plain" @click="setPreview"><SvgIcon icon-class="close" />关闭预览</span>
          </template>
          <template v-else>
            <span class="preview-button" @click="setPreview"><SvgIcon icon-class="eye" />预览</span>
          </template>
        </div>
      </div>
      <div class="preview-content">
        <component :is="curPreviewPage" v-if="preview" :data="previewData" />
      </div>
    </div>
  </div>
</template>

<script>
import { exerciseNames } from '../data/common';
import { AddQuestionToExercise, SaveQuestion, GetExerciseQuestionIndexList } from '@/api/exercise';

import CreateMain from './components/create.vue';
import SelectPreview from '@/views/exercise_questions/preview/SelectPreview.vue';

export default {
  name: 'CreateExercise',
  components: {
    CreateMain,
    SelectPreview
  },
  provide() {
    return {
      isSetUp: () => this.isSetUp
    };
  },
  data() {
    const { id } = this.$route.query;

    return {
      id, // 练习id
      curIndex: 0, // 当前练习索引
      index_list: [], // 练习列表
      exerciseNames, // 练习名称
      isSetUp: false, // 设置
      preview: false, // 预览显示
      previewData: {}, // 预览数据
      previewComponents: { select: SelectPreview }
    };
  },
  computed: {
    curPreviewPage() {
      if (this.index_list.length === 0) return '';
      return this.previewComponents[this.index_list[this.curIndex].type];
    }
  },
  created() {
    this.getExerciseQuestionIndexList();
  },
  methods: {
    // 返回练习管理
    back() {
      this.$router.push('/personal_question');
    },
    // 新建练习
    createExercise() {
      this.index_list.push({ type: 'select' });
    },
    /**
     * 添加题目到练习
     * @param {string} type
     * @param {string} additional_type
     */
    addQuestionToExercise(type, additional_type) {
      AddQuestionToExercise({
        exercise_id: this.id,
        type,
        additional_type,
        content: '',
        file_id_list: [],
        answer: '{}'
      })
        .then(() => {
          this.getExerciseQuestionIndexList();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /**
     * 获取练习题目索引列表
     */
    getExerciseQuestionIndexList() {
      GetExerciseQuestionIndexList({ exercise_id: this.id })
        .then(({ index_list }) => {
          this.index_list = index_list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /**
     * 复制练习
     * @param {Number} index 练习索引
     * @param {String} type 练习类型
     */
    copy(index, type) {
      // this.index_list.splice(index + 1, 0, { type });
      // TODO
    },
    /**
     * 选择练习
     * @param {Number} index 练习索引
     */
    selectExerciseItem(index, data) {
      if (index < 0 || index > this.index_list.length - 1) return;
      this.curIndex = index;
      this.$refs.createMain.saveQuestion(data);
    },
    // 设置
    setUp() {
      this.isSetUp = !this.isSetUp;
    },
    getPreviewData() {
      this.previewData = this.$refs.createMain.$refs.exercise?.[0].data || {};
    },
    // 预览
    setPreview() {
      this.preview = !this.preview;
      this.getPreviewData();
    },
    // 删除练习
    deleteQuestion() {}
  }
};
</script>

<style lang="scss" scoped>
.exercise {
  display: grid;
  grid-template: 1fr auto / 224px 1fr;
  height: 100%;

  .list {
    display: flex;
    flex-direction: column;
    grid-area: 1 / 1 / -1;
    row-gap: 16px;
    padding: 16px 8px;
    background-color: #fff;
    border-right: 1px solid $border-color;

    &-title {
      font-weight: bold;
    }

    .exercise-list {
      max-height: calc(100% - 130px);
      overflow-y: auto;

      .exercise-item {
        display: flex;
        column-gap: 8px;
        align-items: center;
        padding: 4px 8px;
        color: #333;
        cursor: pointer;
        border-radius: 2px;

        &.active {
          color: $main-color;
          background-color: #f4f8ff;
        }

        .item-name {
          flex: 1;
        }
      }
    }

    &-operate {
      display: flex;

      > .el-button {
        width: 50%;
      }
    }
  }

  .preview {
    position: relative;
    max-height: 450px;
    padding: 16px 24px;
    overflow: auto;
    background-color: #eff1f5;
    border-top: 1px solid $border-color;

    .preview-header {
      display: flex;
      justify-content: space-between;
      width: 100%;

      .quick-preview {
        font-weight: bold;
      }

      .preview-right {
        display: flex;
        column-gap: 18px;
        align-items: center;

        .preview-button {
          display: flex;
          column-gap: 8px;
          align-items: center;
          color: #175dff;
          cursor: pointer;

          &.plain {
            color: #2f3742;
          }
        }
      }
    }

    &-content {
      width: 100%;
      max-height: calc(100% - 24px);
      overflow: auto;
    }
  }
}
</style>