<template>
|
<view>
|
<view class="container">
|
<view class="name all" @click="back(all)">{{all.title}}</view>
|
</view>
|
<view class="container" v-for="(item,i) in tree" :key="i">
|
<view :class="item.key">
|
<view class="title" v-show="item.key == 'dept_id'" >
|
<view @click="back(item)">{{item.title}}</view>
|
<view @click="switchbtn(item)">
|
<uni-icons type="top" v-show="item.switch"></uni-icons>
|
<uni-icons type="bottom" v-show="!item.switch"></uni-icons>
|
</view>
|
</view>
|
<view class="name" v-show="item.key == 'user_id'" @click="back(item)">
|
<view>{{item.title}}</view>
|
</view>
|
<view class="sub1" v-for="sub in item.children" style="margin-left: 1em;" v-show="item.switch">
|
<view :class="sub.key" class="title sub-title" v-show="sub.key == 'dept_id'" >
|
<view @click="back(sub)">{{sub.title}}</view>
|
<view @click="switchbtn(sub)">
|
<!-- <uni-icons type="bottom"></uni-icons> -->
|
<uni-icons type="top" v-show="sub.switch"></uni-icons>
|
<uni-icons type="bottom" v-show="!sub.switch"></uni-icons>
|
</view>
|
</view>
|
|
<view :class="sub.key" class="name" v-show="sub.key == 'user_id'" >
|
<view @click="back(sub)">{{sub.title}}</view>
|
</view>
|
|
<view class="sub2" v-for="it in sub.children" style="margin-left: 1em;" v-show="sub.switch">
|
<view :class="it.key" class="title sub-title" v-show="it.key == 'dept_id'">{{it.title}}</view>
|
<view :class="it.key" class="name" v-show="it.key == 'user_id'" >
|
<view @click="back(it)">{{it.title}}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import user from '@/pages/api/user/user.js'
|
export default {
|
data() {
|
return {
|
tree: [{title: '超级管理员'}],
|
all: {}
|
}
|
},
|
onShow() {
|
this.getUserTree()
|
},
|
methods: {
|
async getUserTree() {
|
let res = await user.getUserTree()
|
if (res.code === 200) {
|
this.tree = []
|
this.all = []
|
|
console.log(res.data[0]);
|
// this.all = res.data[0]
|
if (res.data[0].children) {
|
for (let k of res.data[0].children) {
|
|
if (k.children && k.children.length > 0) {
|
for (let i of k.children) {
|
i['switch'] = true
|
// console.log(i);
|
}
|
}
|
// console.log(k);
|
k['switch'] = true
|
this.tree.push(k)
|
}
|
} else {
|
this.tree.push(res.data[0])
|
}
|
this.all = res.data[0]
|
} else if (res.code === 403) {
|
this.backLogin(res)
|
}
|
// console.log(this.tree);
|
},
|
switchbtn(item) {
|
console.log(item.switch);
|
item.switch = item.switch ? false : true
|
console.log(item.switch);
|
},
|
open(e) {
|
// console.log('open', e)
|
},
|
close(e) {
|
// console.log('close', e)
|
},
|
change(e) {
|
// console.log('change', e)
|
},
|
backLogin(res) {
|
uni.showToast({title: res.msg, icon: "none", position: 'top'})
|
setTimeout(() => {
|
uni.reLaunch({
|
url: '../login/login'
|
});
|
}, 1000);
|
},
|
back(it) {
|
uni.$emit('isRefresh', it)
|
uni.navigateBack({
|
|
})
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.all {
|
box-shadow: -4px 0px 0px #55aaff;
|
font-size: 15px;
|
font-weight: 700;
|
margin-left: 10rpx;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.container {
|
margin: 16rpx;
|
min-height: 35rpx;
|
background-color: #FFF;
|
padding: 16rpx;
|
}
|
.box1 {
|
background-color: aqua;
|
}
|
.title {
|
box-shadow: -3px 0px 0px #55aaff;
|
padding-left: 5px;
|
font-size: 15px;
|
font-weight: 700;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.sub-title {
|
margin: 16rpx;
|
box-shadow: -3px 0px 0px #55aa7f;
|
}
|
.name {
|
padding: 16rpx;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
</style>
|
