308 lines
12 KiB
Vue
Executable File
308 lines
12 KiB
Vue
Executable File
<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 && data.children.length"
|
|
@click="store.toggleOpen(data)"
|
|
>
|
|
<i
|
|
:class="
|
|
data.open
|
|
? 'fa fa-minus-square'
|
|
: 'fa fa-plus-square'
|
|
"
|
|
></i>
|
|
|
|
</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,
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
async SendForm() {
|
|
const formData = new FormData();
|
|
for (var i = 0; i < this.categories.length; i++) {
|
|
formData.append(
|
|
"categories[" + i + "][id]",
|
|
this.categories[i].id
|
|
);
|
|
formData.append(
|
|
"categories[" + i + "][position]",
|
|
this.categories[i].position
|
|
);
|
|
formData.append(
|
|
"categories[" + i + "][parent_id]",
|
|
this.categories[i].parent_id
|
|
);
|
|
if (this.categories[i].children.length > 0) {
|
|
for (
|
|
var c = 0;
|
|
c < this.categories[i].children.length;
|
|
c++
|
|
) {
|
|
formData.append(
|
|
"categories[" + i + "][children][" + c + "][id]",
|
|
this.categories[i].children[c].id
|
|
);
|
|
formData.append(
|
|
"categories[" +
|
|
i +
|
|
"][children][" +
|
|
c +
|
|
"][position]",
|
|
this.categories[i].children[c].position
|
|
);
|
|
formData.append(
|
|
"categories[" +
|
|
i +
|
|
"][children][" +
|
|
c +
|
|
"][parent_id]",
|
|
this.categories[i].children[c].parent_id
|
|
);
|
|
if (
|
|
this.categories[i].children[c].children.length > 0
|
|
) {
|
|
for (
|
|
var w = 0;
|
|
w <
|
|
this.categories[i].children[c].children.length;
|
|
w++
|
|
) {
|
|
formData.append(
|
|
"categories[" +
|
|
i +
|
|
"][children][" +
|
|
c +
|
|
"][children][" +
|
|
w +
|
|
"][id]",
|
|
this.categories[i].children[c].children[w]
|
|
.id
|
|
);
|
|
formData.append(
|
|
"categories[" +
|
|
i +
|
|
"][children][" +
|
|
c +
|
|
"][children][" +
|
|
w +
|
|
"][position]",
|
|
this.categories[i].children[c].children[w]
|
|
.position
|
|
);
|
|
formData.append(
|
|
"categories[" +
|
|
i +
|
|
"][children][" +
|
|
c +
|
|
"][children][" +
|
|
w +
|
|
"][parent_id]",
|
|
this.categories[i].children[c].children[w]
|
|
.parent_id
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
const { data } = await axios.post(
|
|
"/dashboard/categories/position",
|
|
formData
|
|
);
|
|
|
|
if (data.status) {
|
|
// window.location.href = "/dashboard/categories";
|
|
}
|
|
},
|
|
|
|
Change() {
|
|
for (var i = 0; i < this.categories.length; i++) {
|
|
var num = i + 1;
|
|
|
|
this.categories[i].position = num;
|
|
this.categories[i].droppable = true;
|
|
|
|
if (this.categories[i].children.length > 0) {
|
|
for (
|
|
var c = 0;
|
|
c < this.categories[i].children.length;
|
|
c++
|
|
) {
|
|
var numm = c + 1;
|
|
this.categories[i].children[c].position = numm;
|
|
this.categories[i].children[c].parent_id =
|
|
this.categories[i].id;
|
|
this.categories[i].children[c].droppable = true;
|
|
|
|
if (
|
|
this.categories[i].children[c].children.length > 0
|
|
) {
|
|
for (
|
|
var w = 0;
|
|
w <
|
|
this.categories[i].children[c].children.length;
|
|
w++
|
|
) {
|
|
var nummm = w + 1;
|
|
|
|
this.categories[i].children[c].children[
|
|
w
|
|
].position = nummm;
|
|
this.categories[i].children[c].children[
|
|
w
|
|
].parent_id = this.categories[i].children[c].id;
|
|
this.categories[i].children[c].children[
|
|
w
|
|
].droppable = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
handleMainCategory() {
|
|
if (this.category) {
|
|
this.categories = this.category.children;
|
|
this.subCategories = this.category.children;
|
|
} else {
|
|
this.categories = this.categoriesData;
|
|
this.subCategories = null;
|
|
}
|
|
},
|
|
|
|
handleSubCategory() {
|
|
if (this.subCategory) this.categories = this.subCategory.children;
|
|
else this.categories = this.category.children;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped></style>
|