<template>
<div>
<div>
<span v-for="(o,i) in levelNum" :key="i"></span>
<i
v-if="item.list"
:class="open ? openClass : closeClass"
@click="showSub"
style="color: #00d6b2"
></i>
<span v-else></span>
<span>
<a @click="changeState">
<img
:src="require('@/assets/images/icon-camera-red.png')"
v-if="selectedState === 'all'"
width="15px"
height="15px"
/>
<img
:src="require('@/assets/images/icon-camera-yellow.png')"
v-if="selectedState === 'sub'"
width="15px"
height="15px"
/>
<img
:src="require('@/assets/images/icon-camera-blu.png')"
v-if="selectedState === 'null'"
width="15px"
height="15px"
/>
</a>
</span>
<span>{{item.name}}</span>
</div>
<component
v-show="open"
:is="node"
:item="o"
:state="stateSub"
v-for="o of item.list"
:key="o.key"
:level="levelNum"
v-on:changeToPar="changeBySub"
></component>
</div>
</template>
<script>
// 数据结构
// orgList:[
// {
// name:'11111',
// menuId: '1',
// list:[
// {name:'a11111',menuId: '11',}
// ]
// },
// {
// name:'222222',
// menuId: '2',
// list:[
// {name:'b22222',menuId: '22',}
// ]
// }
// ],
export default {
name: "wTree",
props: ["item", "level", "state"],
data() {
return {
open: false,
node: "wTree", // 控制菜单开关的
selected: false, // 选中的情况下
selectedState: "null", // 子组件被选中的情况下向上传递all/sub/null
originInfo: "create", // 组件信息源，create/parent/children/this
openClass: "el-icon-caret-bottom",
closeClass: "el-icon-caret-right",
selectClass: "el-icon-check",
selectBg: "#1c8de0",
list: [],
createSwitch: true
};
},
computed: {
levelNum() {
return this.level + 1;
},
stateSub() {
return {
selected: this.selected,
originInfo: this.originInfo
};
}
},
methods: {
showSub() {
this.open = !this.open;
},
changeState() {
if (this.selected) {
this.selected = false;
this.selectedState = "null";
this.originInfo = "this";
for (let o of this.list) {
o.selectedState = "null";
}
} else {
this.selected = true;
this.selectedState = "all";
this.originInfo = "this";
for (let o of this.list) {
o.selectedState = "all";
}
}
let data = {
id: this.item.menuId,
selectedState: this.selectedState,
originInfo: "parent"
};
this.$emit("changeToPar", data);
},
changeBySub(data) {
// 如果是父组件true,判断状态，未被选中，添加id到list，selectSub=true,通知父组件，添加store的数组中，选中通知父组件，this.list.length=this.length状态改为selected
// 修改自身状态，添加list
let temp = data;
if (data.originInfo === "create") {
this.list.push(data);
} else {
this.originInfo = "parent";
let stateNull = "null";
let stateAll = "all";
let stateSub = "sub";
for (let o of this.list) {
if (o.id === temp.id) {
o.selectedState = temp.selectedState;
}
if (o.selectedState !== "all") {
stateAll = null;
}
if (o.selectedState !== "null") {
stateNull = null;
}
}
if (stateNull) {
this.selectedState = stateNull;
this.selected = false;
} else if (stateAll) {
this.selectedState = stateAll;
this.selected = true;
} else {
this.selectedState = stateSub;
this.selected = true;
}
let data = {
id: this.item.menuId,
selectedState: this.selectedState,
originInfo: "parent"
};
this.$emit("changeToPar", data);
}
}
},
watch: {
selected() {
// 初始化
if (this.originInfo === "create") {
// 不改变值
} else {
// 改变值********
if (this.selected) {
// 添加值
this.$store.commit("PUSH_CHECK_LIST", this.item.menuId);
} else {
// 删除值
this.$store.commit("SPLICE_CHECK_LIST", this.item.menuId);
}
}
},
state() {
// 子组件得到通知，如果状态一直，不去改变，如果状态不一致改变
if (this.state.originInfo === "this") {
this.originInfo = "this";
}
if (this.originInfo === "create") {
this.originInfo = "children";
} else {
if (this.state.originInfo !== "parent") {
if (this.state.selected) {
this.selected = true;
this.selectedState = "all";
if (this.list !== []) {
for (let o of this.list) {
o.selectedState = "all";
}
}
} else {
this.selected = false;
this.selectedState = "null";
if (this.list !== []) {
for (let o of this.list) {
o.selectedState = "null";
}
}
}
}
}
},
list() {
// 初始化数组
if (this.list.length === this.item.list.length) {
let stateNull = "null";
let stateAll = "all";
let stateSub = "sub";
for (let o of this.list) {
if (o.selectedState !== "all") {
stateAll = null;
}
if (o.selectedState !== "null") {
stateNull = null;
}
}
if (stateNull) {
this.selectedState = stateNull;
this.selected = false;
} else if (stateAll) {
this.selectedState = stateAll;
this.selected = true;
} else {
this.selectedState = stateSub;
this.selected = true;
}
let data = {
id: this.item.menuId,
selectedState: this.selectedState,
originInfo: "create"
};
this.$emit("changeToPar", data);
}
}
},
created() {
// 初始化，把每个组件，从最底层添加到节点列表中，这样每个子组件都在list中了，就是originInfo=create的情况下添加数组，就不用判断数组长度，直接改变状态
if (this.createSwitch) {
let i = this.$store.state.checkList.indexOf(this.item.menuId);
console.log(!this.item.list);
console.log("-----------------------初始化");
if (!this.item.list) {
if (i > -1) {
this.selectedState = "all";
this.selected = true;
} else {
this.selectedState = "null";
this.selected = false;
}
let data = {
id: this.item.menuId,
selectedState: this.selectedState,
originInfo: "create"
};
this.$emit("changeToPar", data);
this.originInfo = "this";
}
this.createSwitch = false;
}
console.log(this.state);
console.log("----------------created");
},
updated() {
console.log("-------updated=======");
let i = this.$store.state.checkList.indexOf(this.item.menuId);
console.log(!this.item.list);
console.log("-----------------------初始化");
if (!this.item.list) {
if (i > -1) {
this.selectedState = "all";
this.selected = true;
} else {
this.selectedState = "null";
this.selected = false;
}
let data = {
id: this.item.menuId,
selectedState: this.selectedState,
originInfo: "parent"
};
this.$emit("changeToPar", data);
this.originInfo = "this";
}
},
mounted() {
console.log("=========mounted-----");
}
};
</script>
