|
|
@@ -2,7 +2,24 @@
|
|
|
<div class="common-preview">
|
|
|
<div class="common-preview__header" :class="[type && type !== 'personal' ? 'common-preview__header_org' : '']">
|
|
|
<div class="menu-container">
|
|
|
- {{ courseware_info.book_name }}
|
|
|
+ <el-popover placement="bottom" width="330" trigger="click" v-model="popoverShow">
|
|
|
+ <div class="courseware-tree">
|
|
|
+ <div
|
|
|
+ v-for="{ id: nodeId, name, deep, is_leaf_chapter } in node_list"
|
|
|
+ :key="nodeId"
|
|
|
+ :class="['menu-item', { active: curSelectId === nodeId }, { courseware: isTrue(is_leaf_chapter) }]"
|
|
|
+ :style="computedNameStyle(deep, isTrue(is_leaf_chapter))"
|
|
|
+ @click="selectChapterNode(nodeId, isTrue(is_leaf_chapter))"
|
|
|
+ >
|
|
|
+ <span class="name nowrap-ellipsis" :title="name">
|
|
|
+ {{ name }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span slot="reference" style="display: block; width: 360px; cursor: pointer">{{
|
|
|
+ courseware_info.book_name || courseware_info.name
|
|
|
+ }}</span>
|
|
|
+ </el-popover>
|
|
|
</div>
|
|
|
<div class="courseware">
|
|
|
<!-- <span class="name-path">{{ courseware_info.name_path }}</span> -->
|
|
|
@@ -21,7 +38,7 @@
|
|
|
<main :class="['preview-main', { 'no-audit': !isShowAudit }]">
|
|
|
<div class="preview-left"></div>
|
|
|
<CoursewarePreview
|
|
|
- v-if="courseware_info.book_name"
|
|
|
+ v-if="courseware_info.book_name || courseware_info.name"
|
|
|
ref="courserware"
|
|
|
:is-show-group="false"
|
|
|
:group-show-all="true"
|
|
|
@@ -50,6 +67,7 @@ import CoursewarePreview from '@/views/book/courseware/preview/CoursewarePreview
|
|
|
import { isTrue } from '@/utils/validate';
|
|
|
|
|
|
import { GetBookCoursewareInfo } from '@/api/project';
|
|
|
+import { GetTemplateChapterStructExpandList, GetTemplateInfo } from '@/api/template';
|
|
|
import { ContentGetCoursewareContent_View } from '@/api/book';
|
|
|
|
|
|
export default {
|
|
|
@@ -61,9 +79,11 @@ export default {
|
|
|
return {
|
|
|
getLang: () => this.lang,
|
|
|
getChinese: () => this.chinese,
|
|
|
+ getShowPinYin: () => this.showPinYin,
|
|
|
getLangList: () => this.langList,
|
|
|
convertText: this.convertText,
|
|
|
getTitleList: () => this.title_list,
|
|
|
+ getPermissionControl: () => this.permissionControl,
|
|
|
};
|
|
|
},
|
|
|
props: {
|
|
|
@@ -104,7 +124,6 @@ export default {
|
|
|
top: 0,
|
|
|
},
|
|
|
},
|
|
|
- node_list: [],
|
|
|
data: { row_list: [] },
|
|
|
component_list: [],
|
|
|
content_group_row_list: [],
|
|
|
@@ -118,19 +137,83 @@ export default {
|
|
|
cover_image_file_url: '', // 封面图片URL
|
|
|
},
|
|
|
title_list: [],
|
|
|
+ node_list: [],
|
|
|
+ permissionControl: {
|
|
|
+ can_answer: true, // 可作答
|
|
|
+ can_judge_correct: false, // 可判断对错（客观题）
|
|
|
+ can_show_answer: false, // 可查看答案
|
|
|
+ can_correct: false, // 可批改
|
|
|
+ can_check_correct: false, // 可查看批改
|
|
|
+ },
|
|
|
+ popoverShow: false,
|
|
|
};
|
|
|
},
|
|
|
computed: {},
|
|
|
watch: {},
|
|
|
created() {
|
|
|
if (this.id) {
|
|
|
- this.getBookCoursewareInfo(this.id);
|
|
|
- this.getCoursewareComponentContent_View(this.id);
|
|
|
+ this.getTemplateInfo(this.id);
|
|
|
+ // this.getBookCoursewareInfo(this.id);
|
|
|
+ // this.getCoursewareComponentContent_View(this.id);
|
|
|
}
|
|
|
},
|
|
|
mounted() {},
|
|
|
methods: {
|
|
|
/**
|
|
|
+ * 计算章节名称样式
|
|
|
+ * @param {number} deep - 节点深度
|
|
|
+ * @param {boolean} isLeaf - 是否是叶子节点
|
|
|
+ * @returns {Object} - 样式对象
|
|
|
+ */
|
|
|
+ computedNameStyle(deep, isLeaf) {
|
|
|
+ return {
|
|
|
+ 'padding-left': `${(deep - 1) * 8}px`,
|
|
|
+ cursor: isLeaf ? 'pointer' : 'auto',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 选择节点
|
|
|
+ * @param {string} nodeId - 节点ID
|
|
|
+ * @param {boolean} isLeaf - 是否是叶子节点
|
|
|
+ */
|
|
|
+ selectChapterNode(nodeId, isLeaf) {
|
|
|
+ if (!isLeaf) return;
|
|
|
+ if (this.curSelectId === nodeId) return;
|
|
|
+ this.curSelectId = nodeId;
|
|
|
+ this.getCoursewareComponentContent_View(nodeId);
|
|
|
+ this.popoverShow = false;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 得到模板信息
|
|
|
+ * @param {string} id - 模板ID
|
|
|
+ */
|
|
|
+ getTemplateInfo(id) {
|
|
|
+ GetTemplateInfo({ id }).then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.getTemplateChapterStructExpandList(this.id);
|
|
|
+ if (res.template_info.type === 0) {
|
|
|
+ this.getBookCoursewareInfo(this.id);
|
|
|
+ this.getCoursewareComponentContent_View(this.id);
|
|
|
+ this.curSelectId = this.id;
|
|
|
+ } else {
|
|
|
+ this.courseware_info = res.template_info;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 得到模板章节结构展开列表
|
|
|
+ * @param {string} template_id - 模板ID
|
|
|
+ */
|
|
|
+ getTemplateChapterStructExpandList(template_id) {
|
|
|
+ this.node_list = [];
|
|
|
+ GetTemplateChapterStructExpandList({ template_id, is_contain_root_node: 'true' }).then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.node_list = res.node_list;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
* 得到教材课件信息
|
|
|
* @param {string} id - 课件ID
|
|
|
*/
|
|
|
@@ -203,7 +286,7 @@ export default {
|
|
|
},
|
|
|
editTask() {
|
|
|
this.$router.push({
|
|
|
- path: `/personal_workbench/edit_task/edit/${this.id}`,
|
|
|
+ path: `/personal_workbench/edit_task/edit/${this.curSelectId}`,
|
|
|
query: { template_type: this.type },
|
|
|
});
|
|
|
},
|
|
|
@@ -485,54 +568,6 @@ $total-width: $courseware-width + $courseware-left-margin + $courseware-right-ma
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .courseware-tree {
|
|
|
- display: flex;
|
|
|
- flex: 1;
|
|
|
- flex-direction: column;
|
|
|
- row-gap: 8px;
|
|
|
- padding: 12px;
|
|
|
- margin-top: 12px;
|
|
|
- overflow: auto;
|
|
|
-
|
|
|
- .menu-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- &:not(.courseware) {
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- &.courseware {
|
|
|
- &:hover {
|
|
|
- .name {
|
|
|
- background-color: #f3f3f3;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .svg-icon {
|
|
|
- margin-left: 4px;
|
|
|
-
|
|
|
- &.my-edit-task {
|
|
|
- color: $right-color;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .name {
|
|
|
- flex: 1;
|
|
|
- padding: 4px 8px 4px 4px;
|
|
|
- border-radius: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- &.active {
|
|
|
- .name {
|
|
|
- font-weight: bold;
|
|
|
- color: #4095e5;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
.sidebar {
|
|
|
@@ -716,6 +751,53 @@ $total-width: $courseware-width + $courseware-left-margin + $courseware-right-ma
|
|
|
margin: 10px 0 0 !important;
|
|
|
background-color: #eee;
|
|
|
}
|
|
|
+
|
|
|
+.courseware-tree {
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ flex-direction: column;
|
|
|
+ row-gap: 8px;
|
|
|
+ max-height: calc(100vh - 200px);
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ .menu-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ &:not(.courseware) {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.courseware {
|
|
|
+ &:hover {
|
|
|
+ .name {
|
|
|
+ background-color: #f3f3f3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .svg-icon {
|
|
|
+ margin-left: 4px;
|
|
|
+
|
|
|
+ &.my-edit-task {
|
|
|
+ color: $right-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ flex: 1;
|
|
|
+ padding: 4px 8px 4px 4px;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ .name {
|
|
|
+ font-weight: bold;
|
|
|
+ color: #4095e5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
|
|
|
<style lang="scss">
|
dsy