110 lines
2.5 KiB
Vue
110 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<view class="each-department">
|
||
|
|
<view v-for="(item, key) in lists" :key="key">
|
||
|
|
<view class="box">
|
||
|
|
<view class="row" @click="handleOpenCollapse(item, key)">
|
||
|
|
<!-- <view><text v-for="i in (level - 1)" :key="i"> </text></view> -->
|
||
|
|
<!-- <u-checkbox-->
|
||
|
|
<!-- labelColor="#3c9cff"-->
|
||
|
|
<!-- :name="item.ID"-->
|
||
|
|
<!-- :key="item.ID"-->
|
||
|
|
<!-- :label="item.NAME"-->
|
||
|
|
<!-- type="dep"-->
|
||
|
|
<!-- ></u-checkbox>-->
|
||
|
|
<u-icon class="expand-icon" v-if="!item.isExpand" name="arrow-down" size="12"></u-icon>
|
||
|
|
<u-icon class="expand-icon" v-else name="arrow-up" size="12"></u-icon>
|
||
|
|
<text class="dep-name">{{item.NAME}}</text>
|
||
|
|
<!-- <u-icon class="expand-icon" v-if="!item.isExpand" name="arrow-down-fill" size="14"></u-icon>
|
||
|
|
<u-icon class="expand-icon" v-else name="arrow-up-fill" size="14"></u-icon> -->
|
||
|
|
</view>
|
||
|
|
<view class="sub-box" v-show="item.isExpand" v-if="item.departments || item.users">
|
||
|
|
<each-department :level="level + 1" :lists="item.departments" @expand="handleSubOpenCollapse"></each-department>
|
||
|
|
<view class="row" v-for="(o, u) in item.users" :key="u">
|
||
|
|
<!-- <view><text v-for="i in (level)" :key="i">——</text></view> -->
|
||
|
|
<u-checkbox :key="o.ID" :name="o.ID" :label="o.NAME"></u-checkbox>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'EachDepartment',
|
||
|
|
props: {
|
||
|
|
lists: {
|
||
|
|
type: Array,
|
||
|
|
default () {
|
||
|
|
return []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
level: {
|
||
|
|
type: Number
|
||
|
|
},
|
||
|
|
subKey: {
|
||
|
|
type: Number
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
checkboxValueAllForObj: [],
|
||
|
|
checkboxValueForObj: [],
|
||
|
|
checkboxValue: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleOpenCollapse(val) {
|
||
|
|
setTimeout(() => {
|
||
|
|
this.$forceUpdate()
|
||
|
|
}, 200)
|
||
|
|
this.$emit('expand', val)
|
||
|
|
},
|
||
|
|
handleSubOpenCollapse(val) {
|
||
|
|
setTimeout(() => {
|
||
|
|
this.$forceUpdate()
|
||
|
|
}, 200)
|
||
|
|
this.$emit('expand', val)
|
||
|
|
},
|
||
|
|
checkboxChange(e, n) {
|
||
|
|
this.$emit('check', {
|
||
|
|
[n]: e
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
handleClick() {
|
||
|
|
this.$emit('click', this.dataSource)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style scoped>
|
||
|
|
.each-department {}
|
||
|
|
|
||
|
|
.each-department .box {
|
||
|
|
margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.each-department .row {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.each-department .row .dep-name {
|
||
|
|
color: #3c9cff;
|
||
|
|
margin-right: 6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.each-department .expand-icon {
|
||
|
|
/* margin-left: 10px; */
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.each-department .sub-box {
|
||
|
|
overflow: hidden;
|
||
|
|
padding-left: 15px;
|
||
|
|
}
|
||
|
|
</style>
|