GCLS_Page_Book/src/components/inputModules/common/TreeView.vue

<template>
  <div
    class="he_tree_content he_tree_view"
    style="font-size: 14px"
    v-loading="loading"
  >
    <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",
    "currentTreeID",
  ],
  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: "",
      pidList: [],
      loading: false,
    };
  },
  watch: {
    // 监听预览页面翻页的变化 树组件做出相同的操作
    async currentTreeID(newval, oldval) {
      if (newval) {
        this.activeIndex = newval;
        this.pidList = [];
        await this.unfoldData(this.activeIndex, this.treeData);
        await this.unfoldFather(this.treeData);
      }
    },
  },
  methods: {
    // 递归找到当前节点的所有父节点
    unfoldData(activeIndex, data, index, child) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].id == activeIndex) {
          this.pidList.push(data[i].pid);
          if (Object.prototype.toString.call(index).indexOf("Number") != -1) {
            this.pidList.push(child.pid);
          }
          // return false
        } else if (data[i].children) {
          this.unfoldData(activeIndex, data[i].children, i, data[i]);
        }
      }
    },
    // 展示父节点
    unfoldFather(data) {
      for (let i = 0; i < data.length; i++) {
        if (this.pidList.indexOf(data[i].id) > -1) {
          data[i].$folded = false;
          if (data[i].children) {
            this.unfoldFather(data[i].children);
          }
          // return false
        } else if (data[i].children) {
          this.unfoldFather(data[i].children);
        }
      }
    },
    foldAll() {
      if (this.$refs.tree !== undefined) {
        this.$refs.tree.foldAll();
      }
    },

    getList() {
      let _this = this;
      this.loading = true;
      let MethodName = "book-book_manager-GetBookChapterStruct";
      let data = {
        book_id: this.bookId,
      };
      getContent(MethodName, data).then((res) => {
        this.loading = false;

        _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: #ff9900;
    > i {
      color: #ff9900;
    }
  }
  .tree_box_item_light {
    color: #ff9900;
    > i {
      color: #ff9900;
    }
  }
  .tree_box_item_active {
    color: #fff !important;
    background: #ff9900 !important;
    > i {
      color: #fff !important;
    }
  }
}
</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>