<template>
<div class="center">
<div class="top">
<Button type="info" @click="add()" :disabled="!this.addTree">新增目录</Button>
<Button type="success" @click="edits()">编辑目录</Button>
</div>
<div class="page_left">
<div>
<Tree ref="treeIns" :data="treeData" @on-select-change="treeSelectedHandler"></Tree>
</div>
<div class="page_center" v-if="addTree ==true">
<div>
<span style="color:red; padding-right:2px;">*</span>
<span class="show_span">名称</span>
<Input v-model="formNode.title" clearable style="width: 200px"/>
</div>
<div>
<span style="color:red; padding-right:2px;">*</span>
<span class="show_span">排序</span>
<Input v-model="formNode.index" clearable style="width: 200px"/>
</div>
<div>
<span style="color:red; padding-right:2px;position:relative; top:25px;">*</span>
<span style="position:relative; top:25px;" class="show_span">描述</span>
<Input v-model="formNode.desc" type="textarea" :rows="4" style="margin-left:60px;"/>
</div>
<Button :disabled="!currentNodeId || !formNode.title.trim()" type="info"
style="margin-left:5px; margin-top:25px;" shape="circle" @click="nodeSaveHandler">立即保存
</Button>
</div>
<div v-else="addTree ==false" class="page_center">
<div>
<span style="color:red; padding-right:2px;">*</span>
<span class="show_span">名称</span>
<Input v-model="formNode.retitle" clearable style="width: 200px" ref="inputReset"/>
</div>
<Button :disabled="!currentNodeId" type="info" shape="circle" style="margin-left:5px; margin-top:25px;" @click="nodeEditTree">立即保存</Button>
</div>
</div>
</div>
</template>
<script>
// let arr;
// let arrs;
import PreMapfrom './PreMap.vue'
import _Mapfrom '/src/page/content/Map.js';
// 引入树遍历的东西---封装好的
import crawl from "tree-crawl";
export default {
name:'center',
components: {
PreMap
},
data() {
return {
currentNodeId:"",
miaoshu:'',
name:'',
xuhao:'',
searchval:"黄陵",
row_list:1,
addTree:true,
formNode: {
title:"",
desc:"",
index:0,
retitle:""
},
treeData: [],
}
},
computed: {
// 父节点
currentParentNode() {
if (this.currentNodeId) {
return this._nodeParentMap.get(this.currentNodeId)
}else {
return "";
}
},
// 自己
currentNode() {
if (this.currentNodeId) {
return this._nodeMap.get(this.currentNodeId)
}else {
return "";
}
}
},
mounted() {
let m =this;
m.list(2)
// 返回的return的东西---赋值的操作
.then(data => {
if (!data)return;
// 数据给了list
let list = data.data;
// 开始遍历树的方法
crawl(
{children:list},
// node-点 ctx--
(node, ctx) => {
// 添加索引，避免重复查找时的繁琐
m._nodeMap.set(node.id, node);//找到自己的点
m._nodeParentMap.set(node.id, ctx.parent);//找到它的父节点
},
{
// 根据节点的不同找到不同的树
// getchildren是封装好的方法，用来调取节点
getChildren(node) {
// 这个地方不能更改
return node.children;
// return node
},
}
)
debugger
m.treeData =list;
m.listtotal = data.total;
})
;
// 维护索引
m._nodeMap =new Map();
m._nodeParentMap =new Map();
},
methods: {
list(page) {
let m =this;
console.log(m.addTree);
// return下面的所有数据
return m.$http.get('http://47.98.47.90:16666/layermanager/res/resources?', {
params: {
location:m.searchval,
classify:this.row_list,
page: page
}
}
).then(res => {
if (res.data !=null) {
return res.data;
}else {
m.$Message.error(res.data.msg);
}
}).catch(function (error) {
m.$Message.error("获取数据出错:" + error);
})
},
// 当前树节点被选中的时候
treeSelectedHandler([node]) {
if (node) {
// 如果树被选中
// node---树 node.id---id号
this.currentNodeId = node.id;
// 这个node是被选中的节点的内容
// console.log(node)
}else {
this.currentNodeId ="";
}
},
add(){
const m =this;
m.addTree =true;
},
nodeSaveHandler() {
this.addTree =true;
const m =this;
// node是当前输入的title
let node =Object.assign({},m.formNode);
// 得到子节点的内容
let children =this.currentNode;
// let children = m.currentParentNode.children;
node.index =parseInt(node.index);
if (isNaN(node.index) ||node.index <0 ) {
node.index =children.length;
}
// 添加进去
children.children.splice(node.index,0,node);
// 创建索引
m._nodeMap.set(node.id,node);
m._nodeParentMap.set(node.id,m.currentParentNode);
// 清空
Object.keys(m.formNode).map(key => {
m.formNode[key] ="";
})
// m.$set(m.currentParentNode, "selected", false);
// m.currentNodeId = "";
},
edits() {
this.formNode.retitle=this.currentNode.title
console.log(this.formNode.retitle)
// this.$refs.inputReset=this.currentNode
const m =this;
m.addTree =false;
},
nodeEditTree(node) {
const m =this;
if (m.currentNode) {
this.currentNode.title=m.formNode.retitle
console.log(this.currentNode.title)
}
Object.keys(m.formNode).map(key => {
m.formNode[key] ="";
})
this.addTree=true;
}
},
}
</script>
<style lang="less">
.center {
.top {
padding-bottom:12px;
button {
margin-right:6px;
}
.input {
margin-right:12px;
}
}
.page {
margin-top:24px;
}
}
.page_left {
display:flex;
flex-direction:row;
}
.page_center {
margin-left:300px;
.show_span {
font-size:15px;
margin-right:20px;
}
input {
width:200px;
height:40px;
}
}
.page_center >div:nth-child(1) {
margin-top:10px;
}
.page_center >div:nth-child(2) {
margin-top:30px;
}
.page_center >div:nth-child(3) {
margin-top:30px;
input {
height:200px;
width:300px;
}
span {
margin-bottom:160px;
}
}
</style>
