Рекурсивное дерево категорий

• создавать новые категории
• редактировать имеющиеся
• удалять категории
• сортировать перетаскиванием
• сворачивать и разворачивать
• передавать выбранную категорию наружу другим компонентам

Готовим таблицу товаров

<template>
    <div>Tree</div>
</template>

<script>
export default {
  name: 'CategoriesTree',
  props: {
    value: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    myValue: {
      get() {
        return this.value
      },
      set(newValue) {
        this.$emit('input', newValue)
      },
    },
  },
}
</script>

<template>
  <b-row no-gutters>
    <b-col lg="3" class="pr-lg-4">
      <categories-tree v-model="filters.category" />
    </b-col>
    <b-col lg="9">
      <vesp-table ...></vesp-table>
    </b-col>
  </b-row>
</template>

<script>
import CategoriesTree from '@/components/categories/tree.vue'

export default {
  name: 'ProductsPage',
  components: {CategoriesTree},
  // ...
  data() {
    return {
      // ...
      filters: {
        query: '',
        category: 0,
      },
    }
  },
}
</script>

    protected function beforeCount(Builder $c): Builder
    {
        if ($category = (int)$this->getProperty('category')) {
            $c->where(static function (Builder $c) use ($category) {
                $c->where('category_id', $category);
                $c->orWhereHas('productCategories', static function (Builder $c) use ($category) {
                    $c->where('category_id', $category);
                });
            });
        }
        // ...
    }

Дерево категорий

  data() {
    return {
      url: 'admin/categories',
      categories: [],
    }
  },
  async fetch() {
    try {
      const params = {parent: 0, limit: 0, sort: 'rank', dir: 'asc'}
      const {data} = await this.$axios.get(this.url, {params})
      this.total = data.total
      this.categories = this.buildTree(data.rows)
    } catch (e) {}
  },
  // ...
  methods: {
    buildTree(dataset) {
      const hashTable = {}
      dataset.forEach((item) => {
        hashTable[item.id] = {...item, children: []}
      })

      const dataTree = []
      dataset.forEach((item) => {
        if (item.parent_id && hashTable[item.parent_id]) {
          hashTable[item.parent_id].children.push(hashTable[item.id])
        } else {
          dataTree.push(hashTable[item.id])
        }
      })

      return dataTree
    },
  },
}

    <div v-for="category in categories" :key="category.id">
      <div class="pl-3">{{ $translate(category.translations) }}</div>
      <div v-if="category.children.length">
        <div v-for="subCategory in category.children" :key="subCategory.id">
          <div class="ml-5">{{ $translate(subCategory.translations) }}</div>
        </div>
      </div>
    </div>

Компонент категории

<template>
  <ul>
    <li>
      <div @click="onSelect">{{ $translate(node.translations) }}</div>
      <categories-node v-for="child in node.children" :key="child.id" v-model="myValue" :node="child" />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'CategoriesNode',
  props: {
    value: {
      type: Number,
      default: 0,
    },
    node: {
      type: Object,
      required: true,
    },
  },
  computed: {
    myValue: {
      get() {
        return this.value
      },
      set(newValue) {
        this.$emit('input', newValue)
      },
    },
  },
  methods: {
    onSelect() {
      this.myValue = this.node.id
    },
  },
}
</script>

<template>
  <div>
    <div class="font-weight-bold pb-3">Выбрана категория: {{ myValue }}</div>

    <categories-node v-for="category in categories" :key="category.id" v-model="myValue" :node="category" class="p-0" />
  </div>
</template>

<script>
import CategoriesNode from './node'

export default {
  name: 'CategoriesTree',
  components: {CategoriesNode},
  // ...
}
</script>

Сворачивание категорий

  data() {
    return {
      expanded: this.node.id === this.value && this.node.children.length > 0,
    }
  },

<template>
  <div>
    <div :class="nodeClass">
      <b-button v-if="node.children.length" variant="link" class="toggle" @click="toggleNode">
        <transition name="fade" mode="out-in">
          <fa v-if="expanded" key="minus" icon="minus" class="fa-fw" />
          <fa v-else key="plus" icon="plus" class="fa-fw" />
        </transition>
      </b-button>
      <div class="title" @click="onSelect">{{ $translate(node.translations) }}</div>
    </div>

    <b-collapse v-if="node.children.length" v-model="expanded" class="children">
      <categories-node v-for="child in node.children" :key="child.id" v-model="myValue" :node="child" />
    </b-collapse>
  </div>
</template>

Действия с категориями

<template>
  <div class="categories-tree">
    <div class="pb-3 mb-3 border-bottom">
      <b-button @click="createNode">
        <fa icon="plus" class="fa-fw" /> {{ $t('actions.create') }}
      </b-button>
    </div>

    <!-- ... -->

    <vesp-modal
      v-model="record"
      :url="url"
      :visible="modalVisible"
      :update-key="updateKey"
      :title="$t('models.category.title_one')"
      @hidden="modalVisible = false"
    >
      <template #form-fields>
        <form-category v-model="record" />
      </template>
    </vesp-modal>
  </div>
</template>

<script>
export default {
  // ...
  computed: {
      // ...
      updateKey() {
        return this.url.split('/').join('-')
      },  
  },
  mounted() {
    this.$root.$on(`app::${this.updateKey}::update`, this.$fetch)
  },
  methods: {
    // ...
    createNode() {
      this.record = {
        parent_id: this.myValue,
        alias: '',
        active: true,
        translations: [],
      }
      this.modalVisible = true
    },
  }
}
</script>

<template>
  <div>
    <div :class="nodeClass">
      <!-- -->
      <div class="title" @click="onSelect">{{ $translate(node.translations) }}</div>

      <!-- Вот и наш слот, он передаёт внутрь данные категории и состояние "разёрнутости" -->
      <div class="actions">
        <slot name="actions" v-bind="{node, expanded}" />
      </div>
    </div>

    <b-collapse v-if="node.children.length" v-model="expanded" class="children">
      <categories-node v-for="child in node.children" :key="child.id" v-model="myValue" :node="child">
        <!-- Прокидывание слота вложенным категориям -->
        <template v-for="slotName in Object.keys($scopedSlots)" #[slotName]="slotProps">
          <slot :name="slotName" v-bind="slotProps" />
        </template>
      </categories-node>
    </b-collapse>
  </div>
</template>

<template>
    <!-- -->
    <categories-node v-for="category in categories" :key="category.id" v-model="myValue" :node="category">
      <template #actions="{node}">
        <b-button variant="link" class="p-0" @click="editNode(node)">
          <b-spinner v-if="loading === node.id" small />
          <fa v-else icon="edit" class="fa-fw" />
        </b-button>
        <b-button variant="link" class="p-0 ml-1 text-danger" @click="deleteNode(node)">
          <fa icon="times" class="fa-fw" />
        </b-button>
      </template>
    </categories-node>
    <!-- -->
</template>

  data() {
    return {
      // ...
      loading: false,
    }
  },
  methods: {
    async editNode(node) {
      // Врубаем индикатор загрузки
      this.loading = node.id
      try {
        // Получаем данные категории
        const {data} = await this.$axios.get(url + '/' + node.id)
        this.record = data
        // И выводим модалку
        this.modalVisible = true
      } catch (e) {
      } finally {
        // При любом разрешении запросы индикатор останавливается
        this.loading = null
      }
    },
    async deleteNode(node) {
      // Используем функционал BootstrapVue для вывода окошка подтверждения действия
      const properties = {
        title: this.$t('components.confirm_delete_title'),
        okVariant: 'danger',
        okTitle: this.$t('components.confirm_yes'),
        cancelTitle: this.$t('components.confirm_no'),
        footerClass: 'justify-content-between',
        hideHeaderClose: false,
        autoFocusButton: 'ok',
        centered: true,
      }
      const res = await this.$bvModal.msgBoxConfirm(this.$t('components.confirm_delete_message'), properties)
      // Удаляем категорию в зависимости от ответа
      if (res) {
        try {
          await this.$axios.delete(url + '/' + node.id)
          // При удалении активной категории, обнуляем значение дерева
          if (this.myValue === node.id) {
            this.myValue = 0
          }
          // И генерируем событие на обновление дерева
          this.$root.$emit(`app::${this.updateKey}::update`)
        } catch (e) {}
      }
    },
  }

Сортировка перетаскиванием

<template>
    <!-- -->
      <div ref="roots" class="root-nodes" :data-id="0">
        <categories-node v-for="category in categories" :key="category.id" v-model="myValue" :node="category">
            <!-- -->
        </categories-node>
      </div>
    <!-- -->
</template>
<script>
import {Sortable} from 'sortablejs'
// ...
export default {
  data() {
    return {
      // ...
      sortOptions: {
        group: 'tree',
        fallbackOnBody: true,
        invertSwap: true,
        animation: 150,
      },
    },
  },
  mounted() {
    // ...
    new Sortable(this.$refs.roots.$el, {...this.sortOptions, onEnd: this.sortNodes})
  },
  methods: {
    async sortNodes({to, from, item, oldIndex, newIndex}) {
      const id = Number(item.dataset.id)
      const oldParent = Number(from.dataset.id)
      const newParent = Number(to.dataset.id)

      if (oldParent !== newParent || oldIndex !== newIndex) {
        await this.$axios.post(this.url + '/' + id, {parent: newParent, rank: newIndex})
        // Перезагружаем дерево напрямую, без события
        await this.$fetch()
      }
      // Чтобы отправить событие о сортировке нодам только после загрузки
      this.$root.$emit(`app::categories-tree::sort`)
    },
  },
// ...
}
</script>

    public function post(): ResponseInterface
    {
        $key = $this->getPrimaryKey();
        $rank = (int)$this->getProperty('rank', 0);
        $parentId = (int)$this->getProperty('parent', 0);
        /** @var Category $category */
        if (!$key || !$category = Category::query()->find($key)) {
            return $this->failure('Not Found', 404);
        }
        // Если указано перемещение в нового родителя - проверяем его наличие
        if ($parentId && Category::query()->where('id', $parentId)->count()) {
            $category->parent_id = $parentId;
        } else {
            $category->parent_id = null;
        }
        // Определяем направление сортировки, категорую перенесли выше или ниже
        $dir = $category->rank > $rank ? 'desc' : 'asc';
        // Сохраняем новый ранк
        $category->rank = $rank;
        $category->save();

        // Пересортировываем остальные категории в родителе
        $rows = Category::query()->orderBy('rank')->orderBy('updated_at', $dir);
        if ($parentId) {
            $rows->where('parent_id', $parentId);
        } else {
            $rows->whereNull('parent_id');
        }
        // При пересортировке не меняем updated_at!
        /** @var Category $row */
        foreach ($rows->cursor() as $idx => $row) {
            $row->update(['rank' => $idx, 'timestamps' => false]);
        }

        return $this->success();
    }

<script>
import {Sortable} from 'sortablejs'

export default {
  name: 'TreeNode',
  props: {
    // ...
    sortOptions: {
      type: Object,
      default() {
        return {}
      },
    },
    sortFunction: {
      type: Function,
      default() {},
    },
  },
  // ...
  data() {
    return {
      dragging: false,
      expanded: this.node.id === this.value && this.node.children.length > 0,
    }
  },
  mounted() {
    if (this.$refs.children) {
      new Sortable(this.$refs.children, {...this.sortOptions, onEnd: this.sortFunction})
    }
    // Слушаем событие о завершении сортировки, и сворачиваем ноду, если надо
    this.$root.$on(`app::categories-tree::sort`, () => {
      this.dragging = false
      if (this.expanded && !this.node.children.length) {
        this.expanded = false
      }
    })
  },
  methods: {
    // ...
    // Отмечаем, что эта категория сейчас перетаскивается
    onDragStart() {
      this.dragging = true
    },
    onDragEnd() {
      this.dragging = false
    },
    // Разворачиваем категорию при попытке что-то в неё перетащить 
    onDragEnter() {
      // Категория не реагирует сама на себя
      if (!this.dragging) {
        this.expanded = true
      }
    },
  }
  // ...
</script>

<div :class="{nodes: true, expanded}" @dragstart="onDragStart" @dragend="onDragEnd" @dragenter="onDragEnter">
    <!-- -->
    <b-collapse v-if="node.children.length" v-model="expanded" class="children">
      <div ref="children" class="children-nodes" :data-id="node.id">
        <categories-node
          v-for="child in node.children"
          :key="child.id"
          v-model="myValue"
          :node="child"
          :data-id="child.id"
          :sort-options="sortOptions"
          :sort-function="sortFunction"
        >
          <!-- -->
        </categories-node>
      </div>
    </b-collapse>
    <!-- -->
</div>

<template> 
    <!-- -->
    <div ref="roots" class="root-nodes" :data-id="0">
      <categories-node
        v-for="category in categories"
        :key="category.id"
        v-model="myValue"
        :node="category"
        :data-id="category.id"
        :sort-options="sortOptions"
        :sort-function="sortNodes"
      >
<!-- -->
</template>

Заключение