124 lines
2.5 KiB
Vue
124 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<view class="each-department">
|
||
|
|
<u-checkbox-group
|
||
|
|
:value="newChecked"
|
||
|
|
placement="column"
|
||
|
|
@change="e => checkboxChange(e, level)"
|
||
|
|
>
|
||
|
|
<view v-for="(item, key) in lists" :key="key">
|
||
|
|
<view class="box">
|
||
|
|
<view class="row">
|
||
|
|
<view><text v-for="i in (level - 1)" :key="i">——</text></view>
|
||
|
|
<u-checkbox
|
||
|
|
:name="item.ID"
|
||
|
|
:key="item.ID"
|
||
|
|
></u-checkbox>
|
||
|
|
<text class="dep-name" @click="handleOpenCollapse(item, key)">{{item.NAME}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="sub-box" :style="{height: item.isExpand ? 'auto' : 0}" v-if="item.departments || item.users">
|
||
|
|
<each-department
|
||
|
|
:level="level + 1"
|
||
|
|
:lists="item.departments"
|
||
|
|
:checkboxValueAll="checkboxValueAll"
|
||
|
|
@check="handleCheckAll"
|
||
|
|
@expand="handleSubOpenCollapse"></each-department>
|
||
|
|
<view class="row" v-for="(o, u) in item.users">
|
||
|
|
<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>
|
||
|
|
</u-checkbox-group>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'EachDepartment',
|
||
|
|
props: {
|
||
|
|
lists: {
|
||
|
|
type: Array,
|
||
|
|
default() {
|
||
|
|
return []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
level: {
|
||
|
|
type: Number
|
||
|
|
},
|
||
|
|
checkboxValueAll: {
|
||
|
|
type: Object,
|
||
|
|
default() {
|
||
|
|
return {}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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})
|
||
|
|
},
|
||
|
|
handleCheckAll(res) {
|
||
|
|
this.$emit('check', res)
|
||
|
|
},
|
||
|
|
|
||
|
|
handleClick() {
|
||
|
|
this.$emit('click', this.dataSource)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
newChecked() {
|
||
|
|
const a = Object.keys(this.checkboxValueAll).map(i => this.checkboxValueAll[i])
|
||
|
|
let c = []
|
||
|
|
a.forEach(i => {c = c.concat(i)})
|
||
|
|
return c
|
||
|
|
},
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
// checkboxValueAll(newVal, oldVal) {
|
||
|
|
// return newVal
|
||
|
|
// },
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style scoped>
|
||
|
|
.each-department {
|
||
|
|
|
||
|
|
}
|
||
|
|
.each-department .row {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
.each-department .row .dep-name {
|
||
|
|
color: #3c9cff;
|
||
|
|
}
|
||
|
|
.each-department .sub-box {
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
</style>
|