<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: {
// 父節(jié)點(diǎn)
? ? ? ? ? ? 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;
// 數(shù)據(jù)給了list
? ? ? ? ? ? ? ? ? ? let list = data.data;
// 開始遍歷樹的方法
? ? ? ? ? ? ? ? ? ? crawl(
{children:list},
// node-點(diǎn)? ctx--
? ? ? ? ? ? ? ? ? ? ? ? (node, ctx) => {
// 添加索引，避免重復(fù)查找時的繁瑣
? ? ? ? ? ? ? ? ? ? ? ? ? ? m._nodeMap.set(node.id, node);//找到自己的點(diǎn)
? ? ? ? ? ? ? ? ? ? ? ? ? ? m._nodeParentMap.set(node.id, ctx.parent);//找到它的父節(jié)點(diǎn)
? ? ? ? ? ? ? ? ? ? ? ? },
{
// 根據(jù)節(jié)點(diǎn)的不同找到不同的樹
// getchildren是封裝好的方法蔚龙，用來調(diào)取節(jié)點(diǎn)
? ? ? ? ? ? ? ? ? ? ? ? ? ? getChildren(node) {
// 這個地方不能更改
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return node.children;
// return node
? ? ? ? ? ? ? ? ? ? ? ? ? ? },
}
)
debugger
? ? ? ? ? ? ? ? ? ? m.treeData =list;
m.listtotal = data.total;
})
;
// 維護(hù)索引
? ? ? ? ? ? m._nodeMap =new Map();
m._nodeParentMap =new Map();
},
methods: {
list(page) {
let m =this;
console.log(m.addTree);
// return下面的所有數(shù)據(jù)
? ? ? ? ? ? ? ? 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("獲取數(shù)據(jù)出錯:" + error);
})
},
// 當(dāng)前樹節(jié)點(diǎn)被選中的時候
? ? ? ? ? ? treeSelectedHandler([node]) {
if (node) {
// 如果樹被選中
// node---樹 node.id---id號
? ? ? ? ? ? ? ? ? ? this.currentNodeId = node.id;
// 這個node是被選中的節(jié)點(diǎn)的內(nèi)容
// console.log(node)
? ? ? ? ? ? ? ? }else {
this.currentNodeId ="";
}
},
add(){
const m =this;
m.addTree =true;
},
nodeSaveHandler() {
this.addTree =true;
const m =this;
// node是當(dāng)前輸入的title
? ? ? ? ? ? ? ? let node =Object.assign({},m.formNode);
// 得到子節(jié)點(diǎn)的內(nèi)容
? ? ? ? ? ? ? ? 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;
}
// 添加進(jìn)去
? ? ? ? ? ? ? ? children.children.splice(node.index,0,node);
// 創(chuàng)建索引
? ? ? ? ? ? ? ? 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>
