<template>
<div class="hello">
<div class="core">
<div class="abs-zone" v-if="editZoneDisplayBoolean">
<div class="box">
<Input
placeholder="Enter something..."
style="width:200px"
v-model="beforeSubmitNodeTitleString"
/>
<Button type="success" :style="{marginLeft:'5px'}" @click="submitNameEditFunc(1)">
<Icon type="md-checkmark" />
</Button>
<Button type="error" :style="{marginLeft:'5px'}" @click="submitNameEditFunc(0)">
<Icon type="md-close" />
</Button>
</div>
</div>
<Tree :data="treedata" :render="renderContent"></Tree>
</div>
</div>
</template>
<script>
import { categoryTree, categoryChild } from "@/api/categorytree.js";
import { parseJson } from "@/libs/public.js";
export default {
data() {
return {
root: null,
editZoneDisplayBoolean: false,
beforeSubmitNodeTitleString: "",
edit_root: null,
edit_node: null,
edit_data: null,
treedata: [
{
title: "parent 1",
expand: true,
render: (h, { root, node, data }) => {
return h(
"span",
{
style: {
display: "inline-block",
width: "100%"
}
},
[
h("span", [
h("Icon", {
props: {
type: "ios-folder-outline"
},
style: {
marginRight: "8px"
}
}),
h("span", data.title)
]),
h(
"span",
{
style: {
display: "inline-block",
float: "right",
marginRight: "32px"
}
},
[
h("Button", {
props: Object.assign({}, this.buttonProps, {
icon: "ios-add",
type: "primary"
}),
style: {
width: "135px"
},
on: {
click: () => {
this.append(data);
}
}
})
]
)
]
);
},
children: [
{
title: "child 1-1",
expand: true,
children: [
{
title: "leaf 1-1-1",
expand: true
},
{
title: "leaf 1-1-2",
expand: true
}
]
},
{
title: "child 1-2",
expand: true,
children: [
{
title: "leaf 1-2-1",
expand: true
},
{
title: "leaf 1-2-2",
expand: true
}
]
}
]
}
],
buttonProps: {
type: "default",
size: "small"
}
};
},
created() {
this._categoryTree();
// this._categoryChild();
},
methods: {
// 所有類目樹
_categoryTree() {
let data = {
parentId: "" //類目id,不傳查詢所有
};
categoryTree(data).then(res => {
if (res.data.code == 200) {
let data = res.data.data || [];
console.log(data);
// this.treedata = data.map(org => this.mapTree(org));
console.log("this.treedata", this.treedata);
}
});
},
//循環修改tree Key 值
mapTree(org) {
const haveChildren =
Array.isArray(org.childCategories) && org.childCategories.length > 0;
return {
//分別將我們查詢出來的值做出改變他的key
title: org.category,
isParent: org.isParent,
id: org.id,
parentId: org.parentId,
// expand: org.isParent, //父級是否默認展開
// data: { ...org }, //是否生成所有
//判斷它是否存在子集，若果存在就進行再次進行遍歷操作，知道不存在子集便對其他的元素進行操作
children: haveChildren
? org.childCategories.map(i => this.mapTree(i))
: []
};
},
//異步加載數據
// loadData(item, callback) {
// setTimeout(() => {
// const data = [
// {
// title: "children",
// loading: false,
// children: []
// },
// {
// title: "children",
// loading: false,
// children: []
// }
// ];
// callback(data);
// }, 1000);
// },
// 獲取下一級類目列表
_categoryChild() {
let data = {
parentId: "" //類目id,不傳則查詢根目錄
};
categoryChild().then(res => {
console.log("res", res);
});
},
renderContent(h, { root, node, data }) {
return h(
"span",
{
style: {
display: "inline-block",
width: "100%"
}
},
[
h("span", [
h("Icon", {
props: {
type: "ios-paper-outline"
},
style: {
marginRight: "8px"
}
}),
h("span", data.title)
]),
h(
"span",
{
style: {
display: "inline-block",
float: "right",
marginRight: "32px"
}
},
[
// h("Button", {
// props: Object.assign({}, this.buttonProps, {
// icon: "ios-add"
// }),
// style: {
// marginRight: "8px"
// },
// on: {
// click: () => {
// console.log(222);
// // this.append(data);
// }
// }
// }),
h(
"Button",
{
props: {
type: "primary",
size: "small"
},
// props: Object.assign({}, this.buttonProps, {
// // icon: "ios-add"
// }),
style: {
marginRight: "5px"
},
on: {
click: () => {
console.log(222);
this.append(data);
}
}
},
"添加"
),
h(
"Button",
{
props: Object.assign({}, this.buttonProps, {
// icon: "ios-remove"
}),
style: {
marginRight: "8px"
},
on: {
click: () => {
this.remove(root, node, data);
}
}
},
"刪除"
),
h(
"Button",
{
props: Object.assign({}, this.buttonProps, {
// icon: "ios-create"
}),
style: {
marginRight: "8px"
},
on: {
click: () => {
this.openEditName(root, node, data);
}
}
},
"編輯"
)
// h("Button", {
// props: Object.assign({}, this.buttonProps, {
// icon: "ios-arrow-round-up"
// }),
// on: {
// click: () => {
// this.toUp(root, node, data);
// }
// }
// })
]
)
]
);
},
append(data) {
const children = data.children || [];
children.push({
title: "appended node",
expand: true
});
this.$set(data, "children", children);
},
remove(root, node, data) {
const parentKey = root.find(el => el === node).parent;
const parent = root.find(el => el.nodeKey === parentKey).node;
const index = parent.children.indexOf(data);
parent.children.splice(index, 1);
},
toUp(root, node, data) {
const parentKey = root.find(el => el === node).parent;
const parent = root.find(el => el.nodeKey === parentKey).node;
const index = parent.children.indexOf(data);
const children = parent.children;
children.unshift({
...data
});
children.pop();
this.$set(parent, "children", children);
},
openEditName(root, node, data) {
this.editZoneDisplayBoolean = true;
this.edit_root = root;
this.edit_node = node;
this.edit_data = data;
this.beforeSubmitNodeTitleString = this.edit_node.node.title;
},
submitNameEditFunc(x) {
if (!x) {
this.editZoneDisplayBoolean = false;
return;
} else {
this.edit_node.node.title = this.beforeSubmitNodeTitleString;
this.editZoneDisplayBoolean = false;
return;
}
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@edit-zone-height: 32px;
.core {
width: 500px;
height: 400px;
border: 1px solid #979797;
border-radius: 5px;
padding: 10px;
overflow: hidden;
position: relative;
.abs-zone {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(255, 255, 255, 0.8);
z-index: 1;
.box {
position: absolute;
width: 100%;
top: 50%;
left: 0;
margin-top: -@edit-zone-height;
text-align: center;
}
}
}
</style>
