search_ui/components/search/SearchMyVueTreeList.vue

<template>
  <div>
    <!-- <button @click="addNode">Add Node</button> -->
    <vue-tree-list
      class="vue-tree-list"
      @click="onClick"
      @change-name="onChangeName"
      @delete-node="onDel"
      @add-node="onAddNode"
      :model="rootTreeItems"
      default-tree-node-name="new node"
      default-leaf-node-name="new leaf"
      v-bind:default-expanded="false"
      ref="treee"
    >
      <!-- <template v-slot:leafNameDisplay="slotProps">
        <span>
          {{ slotProps.model.name }}
          <span class="muted">#{{ slotProps.model.id }}</span>
        </span>
      </template> -->
      <!-- <span class="icon" slot="addTreeNodeIcon">📂</span>
      <span class="icon" slot="addLeafNodeIcon">＋</span>
      <span class="icon" slot="editNodeIcon">📃</span>
      <span class="icon" slot="delNodeIcon">✂️</span>
      <span class="icon" slot="leafNodeIcon">🍃</span>
      <span class="icon" slot="treeNodeIcon">🌲</span> -->
      <span class="icon1" slot="treeNodeIcon">
        <div
          style="
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: black;
          "
        ></div>
      </span>
    </vue-tree-list>
    <!-- <button @click="getNewTree">Get new tree</button>
    <pre>
      {{ newTree }}
    </pre> -->
  </div>
</template>

<script>
import { VueTreeList, Tree, TreeNode } from "vue-tree-list";

/**
 * @vue-prop {Array} [treeItems=[]] - آیتم‌های درخت
 *
 * @vue-data {Object} [dicTreePath={}] -  مسیر درخت
 * @vue-data {Tree} [rootTreeItems=new Tree(this.treeItems)] - درخت داده
 * @vue-data {String} [classId=""] - شناسه کلاس
 */

export default {
  props: {
    treeItems: {
      default() {
        return [];
      },
    },
    openIds: {
      default() {
        return [];
      },
    },
  },
  components: {
    VueTreeList,
  },
  data() {
    return {
      // newTree: {},
      dicTreePath: {},
      rootTreeItems: new Tree(this.treeItems),
      classId: "",
    };
  },
  mounted() {
    // data= new Tree(this.treeItems);
  },
  watch: {
    treeItems(newVal) {
      this.dicTreePath = {};
      this.rootTreeItems.children = newVal;
      // this.rootTreeItems.children.forEach((element) => {
      //   this.dicTreePath[element.keyId] = "" + element.index;
      // });
    },
  },
  methods: {
    /**
     * حذف یک نود.
     * این متد یک نود را حذف می‌کند.
     *
     * @param {HTMLElement} node - نودی که قرار است حذف شود
     */
    onDel(node) {
      node.remove();
    },

    /**
     * تغییر نام.
     * این متد نام یک مورد را تغییر می‌دهد.
     *
     * @param {object} params - پارامترهای مورد نیاز
     */
    onChangeName(params) {
      console.log(params);
    },

    /**
     * افزودن یک نود جدید.
     *
     * @param {object} params - پارامترهای مورد نیاز
     */
    onAddNode(params) {
      console.log(params);
    },

    /**
     * رویداد کلیک.
     * این متد وظیفه اعمال تغییرات پس از کلیک را دارد.
     *
     * @param {object} params - پارامترهای مورد نیاز
     */
    onClick(params) {
      if (this.classId !== "") {
        let id = document.getElementById(this.classId);
        if (id) id.classList.remove("selected");
        const element = document.getElementById(params.id);
        if (element) element.classList.add("selected");
      } else {
        const element = document.getElementById(params.id);
        if (element) element.classList.add("selected");
      }
      this.classId = structuredClone(params.id);
      this.$emit("on-click", params);
    },

    /**
     * اضافه کردن یک نود جدید.
     *
     * @param {object} item - مورد جدید برای افزودن
     */
    addNode(item) {
      var node = new TreeNode({ item: item, isLeaf: false });
      if (!this.rootTreeItems.children) this.rootTreeItems.children = [];
      this.rootTreeItems.addChildren(node);
    },

    /**
     * به‌روزرسانی فرزندان.
     * این متد فرزندان یک المان را به‌روزرسانی می‌کند.
     *
     * @param {object} element - المانی که فرزندانش باید به‌روز شود
     * @param {array} childs - فرزندان جدید
     */
    updateChildren(element, childs) {
      var parent = this.rootTreeItems;
      if (element.parent != null) parent = element.parent;

      const index = parent.children.findIndex(
        (item) => item.keyId === element.keyId
      );
      if (index !== -1) {
        parent.children[index].children = childs;
      }
    },
    /**
     * دریافت درخت جدید.
     * این متد یک درخت جدید از داده‌های فعلی دریافت می‌کند.
     */
    getNewTree() {
      var vm = this;
      function _dfs(oldNode) {
        var newNode = {};

        for (var k in oldNode) {
          if (k !== "children" && k !== "parent") {
            newNode[k] = oldNode[k];
          }
        }

        if (oldNode.children && oldNode.children.length > 0) {
          newNode.children = [];
          for (var i = 0, len = oldNode.children.length; i < len; i++) {
            newNode.children.push(_dfs(oldNode.children[i]));
          }
        }
        return newNode;
      }

      vm.newTree = _dfs(vm.rootTreeItems);
    },
  },
};
</script>

<!-- <style lang="scss">
.selected {
  background-color: var(--active-color);
}
.vtl-node-main {
  padding: 5px 1rem 5px 0 !important;

  .vtl-node-content {
    margin-right: 7px;
  }

  &.vtl-drag-disabled {
    // background-color: #d0cfcf;
    background-color: inherit !important;
  }

  &:hover {
    cursor: pointer;
    background-color: var(--hover-color) !important;
  }

  .vtl-caret {
    margin-left: 0;
    margin-right: -1rem;
    margin-top: 8px;
    transform: rotateY(180deg);
  }
}

.vtl-tree-margin {
  margin-right: 2em;
  margin-left: auto;
}

.vtl {
  // .vtl-leaf-node{
  //   background-color: red;

  // }
  .vtl-drag-disabled {
    background-color: #d0cfcf;

    &:hover {
      background-color: #d0cfcf;
    }
  }

  .vtl-disabled {
    background-color: #d0cfcf;
  }
}

.vtl {
}
</style>

<style lang="scss" scoped>
.icon {
  &:hover {
    cursor: pointer;
  }
}

.muted {
  color: gray;
  font-size: 80%;
}
// .homeP{
//   div{
//     div:active{
//       background-color: red;

//     }
//   }
// }
</style> -->