treeview

src/components/TreeView.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="he_tree_content he_tree_view" style="font-size: 14px">
+    <Tree :draggable="draggable" :value="treeData" ref="tree">
+      <div
+        :style="{
+          paddingLeft:
+            node.is_courseware === 'false'
+              ? node.nodexIndex * 22 + 8 + 'px'
+              : '0px',
+        }"
+        class="tree_box"
+        slot-scope="{ node, index, path, tree }"
+      >
+        <span
+          @click="tree.toggleFold(node, path)"
+          class="el-icon_box"
+          v-if="node.is_courseware === 'false'"
+        >
+          <template
+            v-if="
+              node.children && node.children.length > 0 && node.$folded == true
+            "
+          >
+            <img src="../assets/common/icon-tree-arrow-right.png" />
+          </template>
+          <template
+            v-else-if="
+              node.children && node.children.length > 0 && node.$folded == false
+            "
+          >
+            <img src="../assets/common/icon-tree-arrow-bottom.png" />
+          </template>
+        </span>
+        <span
+          :class="[
+            'tree_box_item',
+            'tree_box_' + node.nodexIndex,
+            activeIndex !== '' && JSON.stringify(node).indexOf(activeIndex) > -1
+              ? 'tree_box_item_light'
+              : '',
+          ]"
+          @click="tree.toggleFold(node, path)"
+          v-if="node.is_courseware === 'false'"
+        >
+          <!-- <template>
+                        <i class="el-icon-folder-add"></i>
+                    </template>-->
+          {{ node.name }}
+        </span>
+        <span
+          :class="[
+            'tree_box_item',
+            'tree_box_leaf',
+            activeIndex == node.id ? 'tree_box_item_active' : '',
+          ]"
+          :style="{ paddingLeft: node.nodexIndex * 22 + 12 + 'px' }"
+          @click="handleNodeClick(node, path)"
+          v-else
+        >
+          <template>
+            <i class="el-icon-document"></i>
+          </template>
+          {{ node.name }}
+        </span>
+      </div>
+    </Tree>
+  </div>
+</template>
+<script>
+import "he-tree-vue/dist/he-tree-vue.css";
+import { getContent } from "@/api/ajax";
+import Cookies from "js-cookie";
+import { Tree, Fold, Draggable } from "he-tree-vue";
+import * as hp from "helper-js";
+
+export default {
+  components: {
+    Tree: Tree.mixPlugins([Fold, Draggable]),
+  },
+  props: ["changeId", "emptyQustion", "bookId", "tryFree", "changeTreeData"],
+  data() {
+    return {
+      treeData: [],
+      draggable: false,
+      foldAllAfterMounted: true,
+      dialogFlag: false,
+      formDialog: {
+        name: "",
+        radio: "1",
+        is_courseware: "false",
+        children: [],
+      },
+      curNode: null,
+      curIndex: "",
+      ondragend: {},
+      oldLists: [], // 移动之前的数组
+      oldPid: "", // 移动节点的父id
+      oldId: "", // 移动节点的id
+      destId: "", // 目标节点id
+      destPosition: 0, // 目标位置0移动节点在前1后
+      is_coursewareFlag: "false", // 移动的是否是课件节点
+      activeIndex: "", // 高亮节点
+      nodeLevel: "", // 高亮节点的level
+      nodeName: "",
+    };
+  },
+  methods: {
+    foldAll() {
+      if (this.$refs.tree !== undefined) {
+        this.$refs.tree.foldAll();
+      }
+    },
+
+    getList() {
+      let _this = this;
+      let MethodName = "book-book_manager-GetBookChapterStruct";
+      let data = {
+        book_id: this.bookId,
+      };
+      getContent(MethodName, data).then((res) => {
+        _this.handleData(res, 0);
+        _this.treeData = res.nodes;
+        _this.changeTreeData(this.treeData);
+        _this.$nextTick(() => {
+          _this.foldAll();
+        });
+      });
+    },
+    // 递归
+    handleData(data, nodeIndex) {
+      if (data.nodes) {
+        data.nodes.forEach((item) => {
+          item.label = item.name;
+          item.pid = data.id;
+          item.nodexIndex = nodeIndex;
+          if (item.nodes) {
+            item.children = item.nodes;
+            item.lists = item.nodes;
+            this.handleData(item, nodeIndex + 1);
+          }
+        });
+      }
+    },
+    handleNodeClick(data) {
+      this.activeIndex = data.id;
+      this.nodeLevel = data.level_index;
+      this.nodeName = data.name;
+      this.changeId(data.id, data.name, data.is_free_trial);
+    },
+    // 返给父级当前高亮节点的index以及level
+    handleParentIndex() {
+      return this.activeIndex + "###" + this.nodeLevel + "###" + this.nodeName;
+    },
+  },
+  created() {
+    this.getList();
+    console.log(this.bookId);
+    //this.$refs.tree.foldAllAfterMounted = true;
+  },
+};
+</script>
+<style lang="scss" scoped>
+.tree_box {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  height: 40px;
+  cursor: pointer;
+  .kuazhan {
+    font-size: 40px;
+    padding: 0 10px;
+    cursor: pointer;
+  }
+  .tree_box_item {
+    // display: flex;
+    width: 100%;
+    padding-left: 4px;
+    color: #2c2c2c;
+    height: 100%;
+    align-items: center;
+    line-height: 44px;
+    padding-right: 60px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-weight: bold;
+  }
+  .tree_box_item:hover {
+    color: #ff9900;
+    > i {
+      color: #ff9900;
+    }
+  }
+  .tree_box_item_active,
+  .tree_box_leaf:hover {
+    color: #fff;
+    background: #ff9900;
+    > i {
+      color: #fff;
+    }
+  }
+  .tree_box_item_light {
+    color: #ff9900;
+    > i {
+      color: #ff9900;
+    }
+  }
+}
+</style>
+<style lang="scss">
+.he_tree_view .he-tree .tree-node {
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+.he_tree_content {
+  [class*=" el-icon-"],
+  [class^="el-icon-"] {
+    color: rgba(0, 0, 0, 0.27);
+    font-size: 16px;
+  }
+  .el-icon-plus {
+    font-weight: bold;
+  }
+  .el-dialog__body {
+    padding-right: 20px !important;
+  }
+  .el-icon_box {
+    width: 24px;
+    text-align: center;
+    font-size: 0;
+    > img {
+      width: 100%;
+      margin-top: 4px;
+    }
+  }
+}
+.he_tree_view {
+  .tree-node-back {
+    padding: 0 !important;
+  }
+  .tree_box_leaf {
+    // padding-left: 80px !important;
+    display: block;
+    width: 340px !important;
+    font-weight: normal !important;
+  }
+}
+</style>

src/views/courseView.vue

@@ -1,25 +1,25 @@
 <template>
   <div class="container">
     <Header />
-    <!-- <Nav nav-value="书籍预览" /> -->
     <div class="content">
       <div id="content-tree" class="content-tree">
-        <!-- <TreeView ref="treeView" :book-id="bookId" :change-id="changeId" /> -->
+        <TreeView
+          ref="treeView"
+          :book-id="bookId"
+          :change-id="changeId"
+          :changeTreeData="changeTreeData"
+        />
       </div>
       <div id="data-screen" class="inner">
         <!-- 显示答案按钮 -->
-        <a
-          v-if="chapterId"
-          :class="['answerShow', isAnswerShow ? 'answerShowTrue' : '']"
-          @click="handleAnswerShow"
-        >显示答案</a>
+        <!-- <a v-if="chapterId" :class="['answerShow',isAnswerShow?'answerShowTrue':'']" @click="handleAnswerShow">显示答案</a> -->
         <!-- <a class="edit-btn" @click="handleEdit">编辑</a> -->
         <div v-if="chapterId" class="title-box">
           <img
             v-if="!treeFlag"
             src="../assets/common/icon-treelist.png"
             @click="treeShow"
-          >
+          />
           <h2 class="title">{{ chapterName }}</h2>
           <el-switch
             v-if="!treeFlag"
@@ -29,38 +29,36 @@
             inactive-text="生词模式"
           />
         </div>
-        <!-- <Preview
-          v-if="chapterId && context"
-          ref="previewAnswer"
+        <Preview
           :context="context"
-          :bookAnswerContent="bookAnswerContent"
-          bookclientwidth="900"
-          :TaskModel="TaskModel"
-          @handleBookUserAnswer="handleBookUserAnswer"
-        /> -->
+          :que-index="queIndex"
+          :currentTreeID="chapterId"
+          :FatherTreeData="FatherTreeData"
+          :change-id="changeId"
+          :themeColor="themeColor"
+        />
       </div>
+      <a
+        v-if="chapterId && treeFlag"
+        class="screen-full"
+        @click="fullScreen()"
+      />
     </div>
-    <!-- <Preview :context="context" :queIndex="queIndex" /> -->
-
-    <a v-if="chapterId && treeFlag" class="screen-full" @click="fullScreen()" />
   </div>
 </template>
 
 <script>
-// import Header from '@/components/inputModules/common/Header'
-// import Nav from '@/components/inputModules/common/Nav'
-// import TreeView from '@/components/inputModules/common/TreeView'
+import Header from "@/components/Header.vue";
+import TreeView from "@/components/TreeView";
 import { getContent } from "@/api/ajax";
 import Cookies from "js-cookie";
-// import Preview from '@/componentsAnswer/PreviewAnswer.vue'
-// import Preview from '@/components/Preview'
+import Preview from "@/components/Adult/Preview.vue";
 export default {
   name: "CourseView",
   components: {
-    // Header,
-    // Nav,
-    // TreeView,
-    // Preview
+    Header,
+    TreeView,
+    Preview,
   },
   data() {
     return {
@@ -74,10 +72,11 @@ export default {
       treeFlag: true, // tree是否显示
       switchvalue: true, // 生词模式
       isAnswerShow: false, // 是否显示答案
-      bookAnswerContent: localStorage.getItem("exam_answer")
-        ? localStorage.getItem("exam_answer")
-        : "[]",
+      bookAnswerContent: "[[6],[],[9]]",
       TaskModel: "Task",
+      category: "",
+      FatherTreeData: null,
+      themeColor: "",
     };
   },
   created() {
@@ -85,6 +84,9 @@ export default {
     _this.bookId = this.$route.query.bookId;
   },
   methods: {
+    changeTreeData(val) {
+      this.FatherTreeData = JSON.parse(JSON.stringify(val));
+    },
     changeId(id, name) {
       const _this = this;
       _this.chapterId = id;
@@ -108,17 +110,23 @@ export default {
       const data = {
         id: _this.chapterId,
       };
-      getContent(MethodName, data).then(res => {
+      getContent(MethodName, data).then((res) => {
+        this.category = res.category;
+        this.themeColor = res.book_theme_color;
         if (res.content) {
           const _this = this;
-          _this.context = {
-            id: _this.chapterId,
-            ui_type: JSON.parse(res.content).question
-              ? JSON.parse(res.content).question.ui_type
-              : "",
-            sort_number: 1,
-            content: JSON.parse(res.content),
-          };
+          if (!this.category || this.category == "oc") {
+            _this.context = {
+              id: _this.chapterId,
+              ui_type: JSON.parse(res.content).question
+                ? JSON.parse(res.content).question.ui_type
+                : "",
+              sort_number: 1,
+              content: JSON.parse(res.content),
+            };
+          } else if (this.category == "NPC") {
+            _this.context = JSON.parse(res.content);
+          }
         } else {
           const _this = this;
           _this.context = null;
@@ -133,7 +141,7 @@ export default {
         Cookies.set("bookLevel", index[1]);
         Cookies.set("bookNodename", index[2]);
       }
-      this.$router.push("/adultInput?bookId=" + this.bookId);
+      this.$router.push("/input?bookId=" + this.bookId);
     },
     // 显示或隐藏答案
     handleAnswerShow() {