|
|
@@ -1,49 +1,70 @@
|
|
|
<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>
|
|
|
+ <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>
|
|
|
+ {{ 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";
|
|
|
@@ -53,177 +74,176 @@ import { Tree, Fold, Draggable } from "he-tree-vue";
|
|
|
import * as hp from "helper-js";
|
|
|
|
|
|
export default {
|
|
|
- components: {
|
|
|
- Tree: Tree.mixPlugins([Fold, Draggable]),
|
|
|
+ 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();
|
|
|
+ }
|
|
|
},
|
|
|
- props: ["changeId", "emptyQustion","bookId","tryFree"],
|
|
|
- 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.$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
|
|
|
- }
|
|
|
+ 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);
|
|
|
},
|
|
|
- created () {
|
|
|
- this.getList();
|
|
|
- console.log(this.bookId)
|
|
|
- //this.$refs.tree.foldAllAfterMounted = true;
|
|
|
+ // 返给父级当前高亮节点的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;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ height: 40px;
|
|
|
+ cursor: pointer;
|
|
|
+ .kuazhan {
|
|
|
+ font-size: 40px;
|
|
|
+ padding: 0 10px;
|
|
|
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 {
|
|
|
+ // 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_active,
|
|
|
+ .tree_box_leaf:hover {
|
|
|
+ color: #fff;
|
|
|
+ background: #ff9900;
|
|
|
+ > i {
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
- .tree_box_item_light {
|
|
|
- color: #ff9900;
|
|
|
- > i {
|
|
|
- color: #ff9900;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ 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;
|
|
|
- }
|
|
|
+ [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;
|
|
|
- }
|
|
|
+ .tree-node-back {
|
|
|
+ padding: 0 !important;
|
|
|
+ }
|
|
|
+ .tree_box_leaf {
|
|
|
+ // padding-left: 80px !important;
|
|
|
+ display: block;
|
|
|
+ width: 340px !important;
|
|
|
+ font-weight: normal !important;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
guanchunjie