|
|
@@ -11,8 +11,8 @@
|
|
|
<span>选择模板</span>
|
|
|
</div>
|
|
|
<div class="operator">
|
|
|
- <span class="link" @click="insertTemplate">插入模板内容</span>
|
|
|
- <span class="link" @click="useTemplate">替换模板内容</span>
|
|
|
+ <span class="link" @click="insertTemplate()">插入模板内容</span>
|
|
|
+ <span class="link" @click="useTemplate()">替换模板内容</span>
|
|
|
</div>
|
|
|
</header>
|
|
|
|
|
|
@@ -44,6 +44,22 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="courseware-preview">
|
|
|
+ <el-popover placement="bottom-start" width="300" trigger="click" :disabled="curType === 0">
|
|
|
+ <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>
|
|
|
+ <el-button slot="reference" class="courseware-name">{{ coursewareName }}</el-button>
|
|
|
+ </el-popover>
|
|
|
<CoursewarePreview
|
|
|
v-if="coursewareData.row_list.length > 0"
|
|
|
ref="courserware"
|
|
|
@@ -67,6 +83,8 @@ import { unified_attrib } from '@/common/data';
|
|
|
import { getRandomNumber } from '@/utils/index';
|
|
|
import { PageQueryTemplateList_EditBookSelect } from '@/api/list';
|
|
|
import { ContentGetCoursewareContent_View, ContentGetCoursewareContent } from '@/api/book';
|
|
|
+import { GetTemplateChapterStructExpandList } from '@/api/template';
|
|
|
+import { isTrue } from '@/utils/validate';
|
|
|
|
|
|
import PaginationPage from '@/components/PaginationPage.vue';
|
|
|
import CoursewarePreview from '@/views/book/courseware/preview/CoursewarePreview.vue';
|
|
|
@@ -80,6 +98,8 @@ export default {
|
|
|
provide() {
|
|
|
return {
|
|
|
getTitleList: () => this.title_list,
|
|
|
+ getPermissionControl: () => this.permissionControl,
|
|
|
+ getShowPinYin: () => true,
|
|
|
};
|
|
|
},
|
|
|
inject: ['processHtmlString'],
|
|
|
@@ -91,6 +111,7 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ isTrue,
|
|
|
loading: false,
|
|
|
template_list: [],
|
|
|
total: 0,
|
|
|
@@ -111,6 +132,7 @@ export default {
|
|
|
component_list: [],
|
|
|
content_group_row_list: [],
|
|
|
curSelectId: '',
|
|
|
+ curType: 0,
|
|
|
data: {
|
|
|
background_image_url: '',
|
|
|
background_position: {
|
|
|
@@ -126,16 +148,54 @@ export default {
|
|
|
},
|
|
|
data_content_group_row_list: [],
|
|
|
title_list: [],
|
|
|
+ permissionControl: {
|
|
|
+ can_answer: false, // 可作答
|
|
|
+ can_judge_correct: false, // 可判断对错（客观题）
|
|
|
+ can_show_answer: false, // 可查看答案
|
|
|
+ can_correct: false, // 可批改
|
|
|
+ can_check_correct: false, // 可查看批改
|
|
|
+ },
|
|
|
+ node_list: [],
|
|
|
};
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ coursewareName() {
|
|
|
+ if (!this.curSelectId) return '选择课件';
|
|
|
+ if (this.curType === 0) {
|
|
|
+ const courseware = this.template_list.find((x) => x.id === this.curSelectId);
|
|
|
+ return courseware ? courseware.name : '选择课件';
|
|
|
+ }
|
|
|
+ const node = this.node_list.find((x) => x.id === this.curSelectId);
|
|
|
+ return node ? node.name : '选择章节';
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ curSelectId(newVal) {
|
|
|
+ if (newVal.length > 0) {
|
|
|
+ this.getCoursewareComponentContent_View(newVal);
|
|
|
+ this.getCoursewareContent(newVal);
|
|
|
+ } else {
|
|
|
+ this.coursewareData = { row_list: [] };
|
|
|
+ this.component_list = [];
|
|
|
+ this.content_group_row_list = [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
methods: {
|
|
|
dialogClose() {
|
|
|
this.$emit('update:visible', false);
|
|
|
},
|
|
|
- selectCourseware({ courseware_id }) {
|
|
|
- this.curSelectId = courseware_id;
|
|
|
- this.getCoursewareComponentContent_View(courseware_id);
|
|
|
- this.getCoursewareContent(courseware_id);
|
|
|
+ selectCourseware({ type, courseware_id, id }) {
|
|
|
+ this.curType = type;
|
|
|
+ if (type === 0) {
|
|
|
+ this.curSelectId = courseware_id;
|
|
|
+ this.node_list = [];
|
|
|
+ } else {
|
|
|
+ this.curSelectId = '';
|
|
|
+ GetTemplateChapterStructExpandList({ template_id: id, is_contain_root_node: 'true' }).then(({ node_list }) => {
|
|
|
+ this.node_list = node_list || [];
|
|
|
+ });
|
|
|
+ }
|
|
|
},
|
|
|
searchTemplateList() {
|
|
|
this.$refs.pagination.getList();
|
|
|
@@ -308,6 +368,28 @@ export default {
|
|
|
});
|
|
|
this.dialogClose();
|
|
|
},
|
|
|
+ /**
|
|
|
+ * 计算章节名称样式
|
|
|
+ * @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;
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -345,6 +427,71 @@ export default {
|
|
|
.courseware-preview {
|
|
|
flex: 1;
|
|
|
overflow: auto;
|
|
|
+
|
|
|
+ .courseware-name {
|
|
|
+ margin: 2px 0 0 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.courseware-tree {
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ flex-direction: column;
|
|
|
+ row-gap: 8px;
|
|
|
+ height: 540px;
|
|
|
+ padding: 12px;
|
|
|
+ margin-top: 12px;
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ .menu-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ &:not(.courseware) {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.courseware {
|
|
|
+ &:hover {
|
|
|
+ .name,
|
|
|
+ .status {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status {
|
|
|
+ height: 32px;
|
|
|
+ padding: 4px 8px 4px 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #f00004;
|
|
|
+ border-radius: 4px;
|
|
|
+ border-top-left-radius: 0;
|
|
|
+ border-bottom-left-radius: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ .name {
|
|
|
+ font-weight: bold;
|
|
|
+ color: #4095e5;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
dsy
