getgreen-backend/resources/js/components/Dashboard/Category/Index.vue

<template>
    <div class="row">
        <div class="col-12">
            <div
                class="card"
                style="
                    border-radius: 0;
                    box-shadow: 0 -1px 4px 0 rgb(0 0 0 / 15%);
                "
            >
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="">Категория</label>
                                <select
                                    v-model="category"
                                    @change="handleMainCategory"
                                    class="form-control"
                                >
                                    <option :value="null">---</option>
                                    <option
                                        v-for="category in mainCategories"
                                        :value="category"
                                    >
                                        {{ category.category }}
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="">Подкатегория</label>
                                <select
                                    v-model="subCategory"
                                    @change="handleSubCategory"
                                    class="form-control"
                                >
                                    <option :value="null">---</option>
                                    <option
                                        v-for="category in subCategories"
                                        :value="category"
                                    >
                                        {{ category.category }}
                                    </option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <Tree
                :data="categories"
                @change="Change"
                draggable="draggable"
                cross-tree="cross-tree"
            >
                <div slot-scope="{ data, store }">
                    <template v-if="!data.isDragPlaceHolder">
                        <div class="d-flex justify-content-start">
                            <b
                                v-if="data.children &amp;&amp; data.children.length"
                                @click="store.toggleOpen(data)"
                            >
                                <i
                                    :class="
                                        data.open
                                            ? 'fa fa-minus-square'
                                            : 'fa fa-plus-square'
                                    "
                                ></i>
                                &nbsp;
                            </b>
                            <span class="d-flex align-items-center">
                                <b>ID: {{ data.id }} </b>
                                <img v-if="data.image_url" :src="data.image_url" style="width: 30px; height: 30px; object-fit: cover; margin-left: 10px; border-radius: 4px;" alt="">
                                <span class="ml-1">{{ data.category }}</span>
                            </span>

                            <div class="ml-auto">
                                <a
                                    :href="
                                        '/dashboard/categories/update/' +
                                        data.id
                                    "
                                    class="btn-primary btn btn-icon btn-sm"
                                >
                                    <i class="fa fa-edit"></i>
                                </a>

                                <a
                                    :href="
                                        '/dashboard/categories/delete/' +
                                        data.id
                                    "
                                    onclick="return confirm('Вы действително хотите удалить')"
                                    class="btn-danger btn btn-icon btn-sm"
                                >
                                    <i class="fa fa-trash"></i>
                                </a>
                            </div>
                        </div>
                    </template>
                </div>
            </Tree>
            <div class="mt-2 mb-3">
                <button class="btn btn-primary" @click="SendForm">
                    <i class="fa fa-save"></i> Сохранить
                </button>
            </div>
        </div>
    </div>
</template>

<script>
import { DraggableTree } from "vue-draggable-nested-tree";

export default {
    props: {
        categoriesData: {},
    },

    components: {
        Tree: DraggableTree,
    },

    mounted() {
        console.log(this.categoriesData);
        this.Change();
    },

    data() {
        console.log(this.categoriesData);
        return {
            categories: this.categoriesData,
            mainCategories: this.categoriesData,
            subCategories: [],
            category: null,
            subCategory: null,
            currentParentId: null,
        };
    },

    methods: {
        async SendForm() {
            const { data } = await axios.post(
                "/dashboard/categories/position",
                {
                    categories: this.normalizeTree(this.categoriesData, null, 0),
                }
            );

            if (data.status) {
                window.location.reload();
            }
        },

        Change() {
            this.normalizeTree(this.categoriesData, null, 0);
        },

        normalizeTree(categories, parentId, level) {
            return categories.map((category, index) => {
                category.position = index + 1;
                category.parent_id = parentId;
                category.droppable = level < 2;

                const children = Array.isArray(category.children)
                    ? this.normalizeTree(category.children, category.id, level + 1)
                    : [];

                return {
                    id: category.id,
                    position: category.position,
                    parent_id: category.parent_id,
                    children,
                };
            });
        },

        handleMainCategory() {
            if (this.category) {
                this.categories = this.category.children;
                this.subCategories = this.category.children;
                this.currentParentId = this.category.id;
            } else {
                this.categories = this.categoriesData;
                this.subCategories = null;
                this.currentParentId = null;
            }
        },

        handleSubCategory() {
            if (this.subCategory) {
                this.categories = this.subCategory.children;
                this.currentParentId = this.subCategory.id;
            } else {
                this.categories = this.category.children;
                this.currentParentId = this.category ? this.category.id : null;
            }
        },
    },
};
</script>

<style scoped></style>