模板预览

src/views/personal_workbench/template_list/preview/CommonPreview.vue

@@ -2,7 +2,22 @@
   <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="300" trigger="click">
+          <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">{{ courseware_info.book_name || courseware_info.name }}</span>
+        </el-popover>
       </div>
       <div class="courseware">
         <!-- <span class="name-path">{{ courseware_info.name_path }}</span> -->
@@ -62,9 +77,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: {
@@ -105,7 +122,6 @@ export default {
           top: 0,
         },
       },
-      node_list: [],
       data: { row_list: [] },
       component_list: [],
       content_group_row_list: [],
@@ -120,6 +136,13 @@ export default {
       },
       title_list: [],
       node_list: [],
+      permissionControl: {
+        can_answer: true, // 可作答
+        can_judge_correct: false, // 可判断对错（客观题）
+        can_show_answer: false, // 可查看答案
+        can_correct: false, // 可批改
+        can_check_correct: false, // 可查看批改
+      },
     };
   },
   computed: {},
@@ -134,16 +157,42 @@ export default {
   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);
+    },
+    /**
      * 得到模板信息
      * @param {string} id - 模板ID
      */
     getTemplateInfo(id) {
-      this.node_list = [];
       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;
           }
         }
       });
@@ -157,7 +206,6 @@ export default {
       GetTemplateChapterStructExpandList({ template_id, is_contain_root_node: 'true' }).then((res) => {
         if (res.status === 1) {
           this.node_list = res.node_list;
-          console.log(this.node_list);
         }
       });
     },
@@ -234,7 +282,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 },
       });
     },
@@ -516,54 +564,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 {
@@ -747,6 +747,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">