eep_page/src/views/book/courseware/preview/index.vue

<template>
  <div class="preview">
    <div>
      <div v-for="{ id, name, nodes: children } in nodes" :key="id" class="catalogue">
        <div class="catalogue-title">{{ name }}</div>
        <template v-for="item in children">
          <div :key="item.id" :class="['catalogue-item', item.is_leaf_chapter === 'true' ? 'content' : 'subdirectory']">
            <span class="name">{{ item.name }}</span>
          </div>
          <div v-for="li in item.nodes" :key="li.id">
            <div :class="['catalogue-item', 'children', curChapterId === li.id ? 'active' : '']">
              <span class="name">{{ li?.name }}</span>
            </div>
          </div>
        </template>
      </div>
    </div>
    <div class="content-area">
      <div class="content-top">
        <el-button @click="goBack"><SvgIcon icon-class="quit" size="14" /> 退出预览</el-button>
      </div>
      <div
        class="content"
        :style="[
          {
            backgroundImage: data.background_image_url ? `url(${data.background_image_url})` : '',
            backgroundSize: data.background_image_url
              ? `${data.background_position.width}% ${data.background_position.height}%`
              : '',
            backgroundPosition: data.background_image_url
              ? `${data.background_position.left}% ${data.background_position.top}%`
              : '',
          },
        ]"
      >
        <div class="navigation">
          <span class="navigation-label"> <SvgIcon icon-class="navigation" size="14" />{{ getCatalogueName() }} </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  GetCoursewareContent,
  GetBookChapterStruct,
  GetCoursewareList_Chapter,
  GetCoursewareComponentContent_View,
} from '@/api/book';

export default {
  name: 'PreviewPage',
  data() {
    const { chapter_id } = this.$route.query;
    return {
      book_id: this.$route.params.book_id,
      chapter_id,
      curChapterId: chapter_id,
      data: {
        background_image_url: '',
        background_position: {
          width: 100,
          height: 100,
          top: 0,
          left: 0,
        },
        // 组件列表
        row_list: [],
      },
      nodes: [],
      curPosition: [],
      courseware_list: [],
    };
  },
  created() {
    GetBookChapterStruct({ book_id: this.book_id, node_deep_mode: 0 }).then(({ nodes }) => {
      this.nodes = nodes ?? [];
      this.setCurPosition(this.chapter_id);
    });
    this.getCoursewareList_Chapter(this.chapter_id);
    this.GetCoursewareComponentContent_View();
  },
  methods: {
    // 获取课件数据
    getCoursewareComponentContent_View() {
      GetCoursewareComponentContent_View({ courseware_id: this.coursewareId, component_id: this.componentId }).then(
        ({ content }) => {
          // if (content) this.file_list = JSON.parse(content).file_list;
        },
      );
    },

    goBack() {
      this.$router.push(`/chapter?chapter_id=${this.chapter_id}&book_id=${this.book_id}`);
    },
    /**
     * 根据节点id查找节点在nodes中的位置
     * @param {array} nodes 节点数组
     * @param {string} id 节点id
     * @param {array} position 节点位置
     */
    findNodeIndexById(nodes, id, position = []) {
      for (let i = 0; i < nodes.length; i++) {
        const node = nodes[i];
        if (node.id === id) {
          position.push(i);
          return position;
        }
        if (node.nodes && node.nodes.length > 0) {
          const childPosition = this.findNodeIndexById(node.nodes, id, [...position, i]);
          if (childPosition.length > 0) {
            return childPosition;
          }
        }
      }
      return [];
    },
    setCurPosition(id) {
      this.curPosition = this.findNodeIndexById(this.nodes, id);
    },
    getCoursewareList_Chapter(chapter_id) {
      GetCoursewareList_Chapter({ chapter_id }).then(({ courseware_list }) => {
        this.courseware_list = courseware_list ?? [];
      });
    },
    getCoursewareContent() {
      GetCoursewareContent({ id: this.courseware_id }).then(({ content }) => {
        if (content) this.data = JSON.parse(content);
      });
    },
    getNodeName(index) {
      let node = this.nodes;
      for (let i = 0; i <= index; i++) {
        node = i === 0 ? node[this.curPosition[i]] : node.nodes[this.curPosition[i]];
      }
      return node?.name;
    },
    getCatalogueName() {
      return this.curPosition.map((item, index) => this.getNodeName(index)).join(' / ');
    },
  },
};
</script>

<style lang="scss" scoped>
.preview {
  display: flex;
  height: calc(100vh - 66px);
  background-color: #ececec;

  .catalogue {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    background-color: #fff;

    &-title {
      padding: 8px 0;
      font-weight: bold;
      color: #000;
    }

    &-item {
      display: flex;
      column-gap: 8px;
      padding: 8px 32px 8px 16px;
      font-size: 14px;
      border-bottom: 1px solid #ebebeb;

      &:hover {
        background-color: #f3f3f3;
      }

      &.active {
        background-color: #f3f3f3;
      }

      &.subdirectory {
        .name {
          font-weight: bold;
        }
      }

      &.children {
        padding-left: 32px;
      }

      .name {
        flex: 1;
        color: #000;
      }

      .time,
      .edit {
        color: #929292;
      }

      .edit {
        margin-left: 24px;
        cursor: pointer;
      }
    }
  }

  .content-area {
    width: calc(100vw - 320px);
    margin: 18px 60px;

    .content-top {
      display: flex;
      justify-content: end;
      width: 100%;
      margin-bottom: 18px;
      font-size: 16px;
    }

    .content {
      display: flex;
      flex-direction: column;
      row-gap: 6px;
      width: 94%;
      min-height: calc(100% - 56px);
      padding: 24px;
      background-color: #fff;
      background-repeat: no-repeat;
      border: 3px solid #f44444;
      border-radius: 16px;

      .row {
        display: grid;
        row-gap: 16px;
        align-items: start;

        .col {
          display: grid;
        }
      }

      .navigation {
        margin: -10px 0 0 -24px;

        &-label {
          padding: 18px 24px;
          color: #fff;
          background-color: #f44444;
          border-radius: 16px 0;

          .svg-icon {
            margin: 0 22px 0 1px;
          }
        }
      }
    }
  }
}
</style>