<template>
<p>
<p >
<span v-
for
=
"o in levelNum"
> </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=
"./../assets/selectedAll.png"
v-
if
=
"selectedState === 'all'"
width=
"15px"
height=
"15px"
/>
<img src=
"./../assets/selectedSub.png"
v-
if
=
"selectedState === 'sub'"
width=
"15px"
height=
"15px"
/>
<img src=
"./../assets/selectedNull.png"
v-
if
=
"selectedState === 'null'"
width=
"15px"
height=
"15px"
/>
</a>
</span>
<span>{{item.name}}</span>
</p>
<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>
</p>
</template>
<script>
export
default
{
name:
'wTree'
,
props: [
'item'
,
'level'
,
'state'
],
data () {
return
{
open: true,
node:
'wTree'
,
selected: false,
selectedState:
'null'
,
originInfo:
'create'
,
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) {
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 () {
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>