friend-list.vue
2.76 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<template>
<div class="list-container">
<div class="header-bar">
<el-input v-model="select" size="mini" placeholder="筛选昵称" prefix-icon="el-icon-search"/>
</div>
<el-collapse v-model="activeNames" class="friend-list-container">
<el-collapse-item title="用户组" name="user">
<friend-item v-for="friend in userList" :key="friend.ems_id" :friend="friend"/>
</el-collapse-item>
<el-collapse-item title="策划组" name="scheme">
<friend-item v-for="friend in schemeList" :key="friend.ems_id" :friend="friend"/>
</el-collapse-item>
<el-collapse-item title="管理组" name="admin">
<friend-item v-for="friend in adminList" :key="friend.ems_id" :friend="friend"/>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
import {mapState} from 'vuex'
import FriendItem from './friend-item.vue'
export default {
components: {
FriendItem,
},
computed: {
...mapState({
friendList: state => state.friend.friendList,
adminList(state) {
const list = state.friend.adminList || []
return this.select.length === 0 ? list : list.filter(item => item.name.indexOf(this.select) > -1)
},
userList(state) {
const list = state.friend.userList || []
return this.select.length === 0 ? list : list.filter(item => item.name.indexOf(this.select) > -1)
},
schemeList(state) {
const list = state.friend.schemeList || []
return this.select.length === 0 ? list : list.filter(item => item.name.indexOf(this.select) > -1)
}
}),
},
data() {
return {
activeNames: [],
select: ''
}
},
methods: {}
}
</script>
<style lang="stylus" scoped>
.list-container
height 100%
width 100%
display flex
flex-direction column
.friend-list-container
border-top: unset
border-bottom unset
padding 0 15px
overflow-y: scroll
height: 100%
>>> .el-collapse-item
justify-content: center
align-items: center
.el-collapse-item__header
background-color transparent !important
border-bottom: unset
color #f7f7f8
.el-collapse-item__wrap
background-color transparent !important
border-bottom: unset
.el-collapse-item__content
padding-bottom 0
.header-bar
display: flex;
flex-shrink 0
height 50px
border-bottom 1px solid $background-deep-dark
padding 10px 10px 10px 20px
>>> .el-input
width 100%
margin-right 10px
input
color $first
border none
border-radius 30px
background-color $deep-background !important
&::placeholder
color $font-dark
.el-icon-search
color $font-dark
&:hover
transform: rotate(360deg);
color $light-primary
</style>