eep_page/src/components/CommonPreview.vue

<template>
  <div class="common-preview">
    <div class="common-preview__header">
      <div class="menu-container">
        <MenuPopover :id="id" :node-list="node_list" :book-name="courseware_info.book_name" @selectNode="selectNode" />
      </div>
      <div class="courseware">
        <span class="name-path">{{ courseware_info.name_path }}</span>
        <span class="flow-nodename">{{ courseware_info.cur_audit_flow_node_name }}</span>
        <slot name="middle" :courseware="courseware_info"></slot>
        <div class="group">
          <el-checkbox v-model="isShowGroup">显示分组</el-checkbox>
          <el-checkbox v-model="groupShowAll">分组显示全部</el-checkbox>
        </div>
        <span class="link">
          <el-select v-model="lang" placeholder="请选择语言" size="mini" class="lang-select">
            <el-option v-for="item in langList" :key="item.type" :label="item.name" :value="item.type" />
          </el-select>
        </span>
        <div class="operator">
          <slot name="operator" :courseware="courseware_info"></slot>
        </div>
      </div>
    </div>

    <div class="audit-content">
      <div ref="previewMain" class="main-container">
        <main :class="['preview-main', { 'no-audit': !isShowAudit }]">
          <span class="title">
            <SvgIcon icon-class="menu-2" size="24" />
            <span>{{ courseware_info.name_path }}</span>
          </span>
          <CoursewarePreview
            v-if="courseware_info.book_name"
            ref="courserware"
            :is-show-group="isShowGroup"
            :group-show-all="groupShowAll"
            :group-row-list="content_group_row_list"
            :data="data"
            :component-list="component_list"
            :background="background"
            :can-remark="isTrue(courseware_info.is_my_audit_task) && isTrue(courseware_info.is_can_add_audit_remark)"
            :show-remark="isShowAudit"
            :component-remark-obj="remark_list_obj"
            @computeScroll="computeScroll"
            @addRemark="addRemark"
          />
        </main>
      </div>
      <div v-if="isShowAudit" class="remark-list">
        <h5>审校批注</h5>
        <ul v-if="remark_list.length > 0">
          <li v-for="{ id: remarkId, content, remark_person_name, remark_time } in remark_list" :key="remarkId">
            <!-- eslint-disable-next-line vue/no-v-html -->
            <p v-html="content"></p>
            <div v-if="isAudit" class="remark-bottom">
              <span>{{ remark_person_name + ':' + remark_time }}</span>
              <el-button type="text" class="delete-btn" @click="deleteRemarks(remarkId)">删除</el-button>
            </div>
          </li>
        </ul>
        <p v-else style="text-align: center">暂无批注</p>
      </div>
      <div ref="sidebarMenu" class="sidebar">
        <div
          v-for="{ icon, title, handle, param } in sidebarIconList"
          :key="icon"
          :title="title"
          class="sidebar-icon"
          @click="handleSidebarClick(handle, param)"
        >
          <SvgIcon :icon-class="`sidebar-${icon}`" size="24" />
        </div>
      </div>
      <el-drawer
        custom-class="custom-drawer"
        :visible="drawerType.length > 0"
        :with-header="false"
        :modal="false"
        size="25%"
        :style="drawerStyle"
      >
        <div class="infinite-list-wrapper" style="overflow: auto">
          <ul v-infinite-scroll="loadMore" class="scroll-container" infinite-scroll-disabled="disabled">
            <li
              v-for="(item, index) in file_list"
              :key="index"
              class="list-item"
              @click="handleFileClick(item?.courseware_id, item?.component_id)"
            >
              <template v-if="parseInt(drawerType) === 0">
                <el-image :src="item.file_url" fit="contain" />
                <span class="text-box">{{ item.file_name.slice(0, item.file_name.lastIndexOf('.')) }}</span>
              </template>
              <template v-else-if="parseInt(drawerType) === 1">
                <AudioPlay
                  view-size="middle"
                  :file-id="item.file_id"
                  :file-name="item.file_name.slice(0, item.file_name.lastIndexOf('.'))"
                  :show-slider="true"
                  :audio-index="index"
                />
              </template>
              <template v-else-if="parseInt(drawerType) === 2">
                <VideoPlay view-size="big" :file-id="item.file_id" :video-index="index" />
                <span class="text-box">{{ item.file_name.slice(0, item.file_name.lastIndexOf('.')) }}</span>
              </template>
            </li>
          </ul>
          <p v-if="loading">加载中...</p>
          <p v-if="noMore">没有更多了</p>
        </div>
      </el-drawer>
    </div>

    <el-dialog
      title="添加课件审校批注"
      :visible="visible"
      width="680px"
      :close-on-click-modal="false"
      class="audit-dialog"
      @close="dialogClose('')"
    >
      <RichText
        v-model="remark_content"
        toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
        :wordlimit-num="false"
        :height="240"
        page-from="audit"
      />
      <div slot="footer">
        <el-button @click="dialogClose">取消</el-button>
        <el-button type="primary" :loading="submit_loading" @click="addCoursewareAuditRemark(select_node)">
          确定
        </el-button>
      </div>
    </el-dialog>

    <el-dialog title="" :visible="visibleMindMap" width="1100px" class="audit-dialog" @close="dialogClose('MindMap')">
      <MindMap
        v-if="isChildDataLoad"
        ref="mindMapRef"
        :project-id="projectId"
        :mind-map-json-data="mindMapJsonData"
        @child-click="handleNodeClick"
      />
    </el-dialog>
  </div>
</template>

<script>
import CoursewarePreview from '@/views/book/courseware/preview/CoursewarePreview.vue';
import MenuPopover from '@/views/personal_workbench/common/MenuPopover.vue';
import RichText from '@/components/RichText.vue';
import { isTrue } from '@/utils/validate';
import MindMap from '@/components/MindMap.vue';
import VideoPlay from '@/views/book/courseware/preview/components/common/VideoPlay.vue';
import AudioPlay from '@/views/book/courseware/preview/components/common/AudioPlay.vue';
import * as OpenCC from 'opencc-js';

import {
  GetBookCoursewareInfo,
  GetProjectBaseInfo,
  GetCoursewareAuditRemarkList,
  AddCoursewareAuditRemark,
  DeleteCoursewareAuditRemarkList,
} from '@/api/project';
import {
  ContentGetCoursewareContent_View,
  ChapterGetBookChapterStructExpandList,
  GetBookBaseInfo,
  MangerGetBookMindMap,
  PageQueryBookResourceList,
  GetLanguageTypeList,
} from '@/api/book';

export default {
  name: 'CommonPreview',
  components: {
    CoursewarePreview,
    MenuPopover,
    RichText,
    MindMap,
    AudioPlay,
    VideoPlay,
  },
  provide() {
    return {
      getLang: () => this.lang,
      getChinese: () => this.chinese,
      getLangList: () => this.langList,
      convertText: this.convertText,
    };
  },
  props: {
    projectId: {
      type: String,
      required: true,
    },
    id: {
      type: String,
      default: '',
    },
    // 是否是审校页面
    isAudit: {
      type: Boolean,
      default: false,
    },
    isShowAudit: {
      type: Boolean,
      default: true,
    },
    isBook: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      select_node: this.id,
      courseware_info: {
        book_name: '',
        is_can_start_edit: 'false',
        is_can_submit_audit: 'false',
        is_can_audit_pass: 'false',
        is_can_audit_reject: 'false',
        is_can_add_audit_remark: 'false',
        is_can_finish_audit: 'false',
        is_can_request_shangjia_book: 'false',
        is_can_request_rollback_project: 'false',
        is_can_shangjia_book: 'false',
        is_can_rollback_project: 'false',
      },
      background: {
        background_image_url: '',
        background_position: {
          left: 0,
          top: 0,
        },
      },
      node_list: [],
      data: { row_list: [] },
      component_list: [],
      content_group_row_list: [],
      remark_list: [],
      remark_list_obj: {}, // 存放以组件为对象的数组
      visible: false,
      remark_content: '',
      submit_loading: false,
      isTrue,
      menuPosition: {
        x: -1,
        y: -1,
        componentId: 'WHOLE',
      },
      sidebarIconList: [
        { icon: 'search', title: '搜索', handle: '', param: {} },
        { icon: 'mindmap', title: '思维导图', handle: 'openMindMap', param: {} },
        { icon: 'connect', title: '连接', handle: '', param: {} },
        { icon: 'audio', title: '音频', handle: 'openDrawer', param: { type: '1' } },
        { icon: 'image', title: '图片', handle: 'openDrawer', param: { type: '0' } },
        { icon: 'video', title: '视频', handle: 'openDrawer', param: { type: '2' } },
        { icon: 'text', title: '文本', handle: '', param: {} },
        { icon: 'file', title: '文件', handle: '', param: {} },
        { icon: 'collect', title: '收藏', handle: '', param: {} },
        { icon: 'setting', title: '设置', handle: '', param: {} },
      ],
      visibleMindMap: false,
      isChildDataLoad: false,
      mindMapJsonData: {}, // 思维导图json数据
      drawerType: '', // 抽屉类型
      drawerStyle: {
        top: '0',
        height: '0',
        right: '0',
      },
      page_capacity: 10,
      cur_page: 1,
      file_list: [],
      total_count: 0,
      loading: false,
      isShowGroup: false,
      groupShowAll: true,
      opencc: OpenCC.Converter({ from: 'cn', to: 'tw' }),
      langList: [],
      lang: 'ZH',
      chinese: 'zh-Hans',
    };
  },
  computed: {
    disabled() {
      return this.loading || this.noMore;
    },
    noMore() {
      return this.file_list.length >= this.total_count && this.total_count > 0;
    },
  },
  created() {
    if (this.id) {
      this.getBookCoursewareInfo(this.id);
      this.getCoursewareComponentContent_View(this.id);
      this.getCoursewareAuditRemarkList(this.id);
    } else {
      this.isBook ? this.getBookBaseInfo() : this.getProjectBaseInfo();
    }
    this.getBookChapterStructExpandList();
  },
  mounted() {
    this.calcDrawerPosition();
  },
  methods: {
    getProjectBaseInfo() {
      GetProjectBaseInfo({ id: this.projectId }).then(({ project_info }) => {
        this.courseware_info = { ...project_info, book_name: project_info.name };
      });
    },

    getBookBaseInfo() {
      GetBookBaseInfo({ id: this.projectId }).then(({ book_info }) => {
        this.courseware_info = { ...this.courseware_info, ...book_info, book_name: book_info.name };
      });
    },

    /**
     * 得到教材课件信息
     * @param {string} id - 课件ID
     */
    getBookCoursewareInfo(id) {
      GetBookCoursewareInfo({ id, is_contain_producer: 'true', is_contain_auditor: 'true' }).then(
        ({ courseware_info }) => {
          this.courseware_info = { ...this.courseware_info, ...courseware_info };
          this.getLangList();
        },
      );
    },
    /**
     * 得到课件内容（展示内容）
     * @param {string} id - 课件ID
     */
    getCoursewareComponentContent_View(id) {
      ContentGetCoursewareContent_View({ id }).then(({ content, component_list, content_group_row_list }) => {
        if (content) {
          const _content = JSON.parse(content);
          this.data = _content;
          this.background = {
            background_image_url: _content.background_image_url,
            background_position: _content.background_position,
          };
        } else {
          this.data = { row_list: [] };
        }

        if (component_list) this.component_list = component_list;
        if (content_group_row_list) this.content_group_row_list = JSON.parse(content_group_row_list) || [];
      });
    },

    getLangList() {
      GetLanguageTypeList({ book_id: this.courseware_info.book_id, is_contain_zh: 'true' }).then(
        ({ language_type_list }) => {
          this.langList = language_type_list;
        },
      );
    },

    /**
     * 得到教材章节结构展开列表
     */
    getBookChapterStructExpandList() {
      ChapterGetBookChapterStructExpandList({
        book_id: this.projectId,
        node_deep_mode: 0,
        is_contain_producer: 'true',
        is_contain_auditor: 'true',
      }).then(({ node_list }) => {
        this.node_list = node_list;
      });
    },
    /**
     * 选择节点
     * @param {string} nodeId - 节点ID
     */
    selectNode(nodeId) {
      this.getCoursewareComponentContent_View(nodeId);
      this.getBookCoursewareInfo(nodeId);
      this.getCoursewareAuditRemarkList(nodeId);
      this.select_node = nodeId;
    },
    // 审校批注列表
    getCoursewareAuditRemarkList(id) {
      this.remark_list = [];
      let remarkListObj = {};
      GetCoursewareAuditRemarkList({
        courseware_id: id,
      }).then(({ remark_list }) => {
        this.remark_list = remark_list;
        if (!remark_list) return;
        remarkListObj = remark_list.reduce((acc, item) => {
          if (!acc[item.component_id]) {
            acc[item.component_id] = [];
          }
          acc[item.component_id].push(item);
          return acc;
        }, {});

        this.remark_list_obj = remarkListObj;
      });
    },
    addRemark(selectNode, x, y, componentId) {
      this.remark_content = '';
      this.visible = true;
      if (selectNode) {
        this.menuPosition = {
          x,
          y,
          componentId,
        };
      } else {
        this.menuPosition = {
          x: -1,
          y: -1,
          componentId: 'WHOLE',
        };
      }
    },
    dialogClose(type) {
      this[`visible${type}`] = false;
    },
    // 添加审校批注
    addCoursewareAuditRemark(id) {
      this.submit_loading = true;
      AddCoursewareAuditRemark({
        courseware_id: id || this.id,
        content: this.remark_content,
        component_id: this.menuPosition.componentId,
        position_x: this.menuPosition.x,
        position_y: this.menuPosition.y,
      })
        .then(() => {
          this.submit_loading = false;
          this.visible = false;
          this.getCoursewareAuditRemarkList(id || this.id);
        })
        .catch(() => {
          this.submit_loading = false;
        });
    },
    // 删除批注
    deleteRemarks(id) {
      this.$confirm('确定要删除此条批注吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          DeleteCoursewareAuditRemarkList({ id }).then(() => {
            this.getCoursewareAuditRemarkList(this.select_node ? this.select_node : this.id);
            this.$message.success('删除成功!');
          });
        })
        .catch(() => {});
    },
    // 计算previewMain滑动距离
    computeScroll() {
      this.$refs.courserware.handleResult(
        this.$refs.previewMain.scrollTop,
        this.$refs.previewMain.scrollLeft,
        this.select_node,
      );
    },
    /**
     * 处理侧边栏图标点击事件
     * @param {string} handle - 处理函数名
     * @param {any} param - 处理函数参数
     */
    handleSidebarClick(handle, param) {
      if (typeof handle === 'string' && handle && typeof this[handle] === 'function') {
        this[handle](param);
      }
    },

    openMindMap() {
      MangerGetBookMindMap({ book_id: this.projectId }).then(({ content }) => {
        if (content) {
          this.mindMapJsonData = JSON.parse(content);
          this.isChildDataLoad = true;
        }
      });
      this.visibleMindMap = true;
    },

    async handleNodeClick(data) {
      let [nodeId, componentId] = data.split('#');
      if (nodeId) this.selectNode(nodeId);
      if (componentId) {
        let node = await this.$refs.courserware.findChildComponentByKey(componentId);
        if (node) {
          await this.$nextTick();
          this.$refs.previewMain.scrollTo({
            top: node.offsetTop - 50,
            left: node.offsetLeft - 50,
            behavior: 'smooth',
          });
        }
      }
      this.visibleMindMap = false;
    },

    // 计算抽屉滑出位置
    calcDrawerPosition() {
      const menu = this.$refs.sidebarMenu;
      if (menu) {
        const rect = menu.getBoundingClientRect();
        this.drawerStyle = {
          top: `${rect.top}px`,
          height: `${rect.height}px`,
          right: `${window.innerWidth - rect.left + 1}px`,
        };
      }
    },
    /**
     * 打开抽屉并初始化加载
     * @param {Object} param - 抽屉参数
     * @param {string} param.type - 抽屉类型（0: 图片, 1: 音频, 2: 视频）
     */
    openDrawer({ type }) {
      if (this.drawerType === type) {
        this.drawerType = '';
        return;
      }
      this.drawerType = type;
      this.drawerVisible = true;
      this.$nextTick(() => {
        this.cur_page = 1;
        this.file_list = [];
        this.loadMore();
      });
    },
    // 加载更多数据
    loadMore() {
      if (this.disabled) return;
      this.loading = true;
      const params = {
        page_capacity: this.page_capacity,
        cur_page: this.cur_page,
        book_id: this.projectId,
        type: parseInt(this.drawerType),
      };
      PageQueryBookResourceList(params)
        .then(({ total_count, resource_list }) => {
          this.total_count = total_count;
          this.file_list = this.cur_page === 1 ? resource_list : [...this.file_list, ...resource_list];
          this.cur_page += this.cur_page;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    async handleFileClick(courseware_id, component_id) {
      if (courseware_id) this.selectNode(courseware_id);
      if (component_id) {
        let node = await this.$refs.courserware.findChildComponentByKey(component_id);
        if (node) {
          await this.$nextTick();
          this.$refs.previewMain.scrollTo({
            top: node.offsetTop - 50,
            left: node.offsetLeft - 50,
            behavior: 'smooth',
          });
        }
      }
    },
    /**
     * 文本转换
     * @param {string} text - 要转换的文本
     * @returns {string} - 转换后的文本
     */
    convertText(text) {
      if (this.chinese === 'zh-Hant' && this.opencc) {
        return this.opencc(text);
      }
      return text;
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.common-preview {
  &__header {
    position: sticky;
    top: 56px;
    left: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    height: 40px;
    padding: 6px 4px;
    margin-bottom: 5px;
    background-color: #fff;
    border-top: $border;
    border-bottom: $border;

    > .menu-container {
      display: flex;
      justify-content: space-between;
      width: 360px;
      padding: 4px 8px;
      border-right: $border;
    }

    > .courseware {
      display: flex;
      flex-grow: 1;
      column-gap: 16px;
      align-items: center;
      justify-content: space-between;
      height: 40px;

      .name-path {
        min-width: 200px;
        height: 40px;
        padding: 4px 8px;
        font-size: 14px;
        line-height: 32px;
        border-right: $border;
      }

      .lang-select {
        :deep .el-input {
          width: 100px;
        }

        :deep .el-input__inner {
          height: 24px;
          line-height: 24px;
          background-color: #fff;
        }

        :deep .el-input__icon {
          line-height: 24px;
        }
      }

      .flow-nodename {
        flex: 1;
      }

      .group {
        display: flex;
        align-items: center;
      }

      .operator {
        display: flex;
        column-gap: 8px;
        align-items: center;

        .link {
          + .link {
            margin-left: 0;

            &::before {
              margin-right: 8px;
              color: #999;
              content: '|';
            }
          }
        }
      }
    }
  }

  .main-container {
    flex: 1;
    min-width: 1110px;
    overflow: auto;
  }

  main.preview-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    row-gap: 5px;
    width: 1100px;
    min-width: 1100px;
    min-height: 100%;
    padding: 5px;
    margin: 0 5px;
    background-color: #fff;
    border: 3px solid #f44444;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 10%);

    &.no-audit {
      margin: 0 auto;
    }

    .title {
      display: inline-flex;
      column-gap: 24px;
      align-items: center;
      width: 100%;
      min-width: 280px;
      height: 64px;
      padding: 18px 24px;
      font-size: 20px;
      color: #fff;
      background-color: #f44444;
      border-top-left-radius: 12px;
      border-bottom-right-radius: 16px;
    }
  }

  .audit-content {
    display: flex;
    min-width: 1400px;
    height: calc(100vh - 175px);

    .remark-list {
      width: 300px;
      margin-left: 20px;
      overflow: auto;
      border: 1px solid #e5e5e5;

      h5 {
        padding: 0 5px;
        margin: 0;
        font-size: 18px;
        line-height: 40px;
        background: #f2f3f5;
      }

      .delete-btn {
        padding-left: 10px;
        color: #f44444;
        border-left: 1px solid #e5e5e5;
      }

      ul {
        height: calc(100% - 40px);
        overflow: auto;

        li {
          border-bottom: 1px solid #e5e5e5;

          > p {
            padding: 5px;
          }

          :deep p {
            margin: 0;
          }

          .remark-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 5px;
            font-size: 14px;
            color: #555;
            border-top: 1px solid #e5e5e5;
          }
        }
      }
    }

    .sidebar {
      display: flex;
      flex-direction: column;
      row-gap: 16px;
      align-items: center;
      height: 100%;
      padding: 12px 8px;
      margin-left: 8px;
      box-shadow: -4px 0 4px rgba(0, 0, 0, 10%);

      &-icon {
        cursor: pointer;
      }
    }

    .el-drawer__body {
      .scroll-container {
        display: flex;
        flex-direction: column;
        row-gap: 8px;
        margin: 6px;

        .list-item {
          display: flex;
          align-items: center;
          cursor: pointer;
          border: 1px solid #ccc;
          border-radius: 8px;

          :deep .el-slider {
            .el-slider__runway {
              background-color: #eee;
            }
          }

          :deep .audio-middle {
            width: calc(25vw - 40px);
            border: none;
            border-radius: 8px;
          }

          .el-image {
            display: flex;
            width: 30%;
            min-width: 30%;
            height: 90px;
            margin: 6px;
            background-color: #ccc;
            border-radius: 8px;
          }

          .video-play {
            width: 30%;
            min-width: 30%;
            margin: 6px;
          }

          .text-box {
            word-break: break-word;
          }
        }
      }

      p {
        color: #999;
        text-align: center;
      }
    }
  }
}

:deep .audit-dialog {
  .el-dialog__body {
    height: calc(100vh - 260px);
    padding: 5px 20px;
  }

  .mind-map-container .mind-map {
    height: calc(100vh - 310px);
  }
}
</style>

<style lang="scss">
.tox-tinymce-aux {
  z-index: 9999 !important;
}
</style>