|
|
@@ -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>
|
guanchunjie