125 lines
3.0 KiB
Vue
125 lines
3.0 KiB
Vue
|
<template>
|
||
|
|
<div class="member">
|
||
|
|
<div class="member__head">
|
||
|
|
<div class="member__head--title"> 成员列表</div>
|
||
|
|
<div class="member__head--notes"> {{ members.length }}/{{ room.totalNum }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="member__container">
|
||
|
|
<el-input v-model="filterText" :placeholder="this.$t('global.enterNameToFilter')" clearable />
|
||
|
|
<el-scrollbar class="member__container--list" wrap-class="scrollbar-wrapper" :style="{height: treeHeight+'px'}">
|
||
|
|
<el-tree
|
||
|
|
ref="tree"
|
||
|
|
:data="filterMembers"
|
||
|
|
:filter-node-method="handleFilterNode"
|
||
|
|
:lazy="false"
|
||
|
|
:props="defaultProps"
|
||
|
|
@node-contextmenu="handleShowContextMenu"
|
||
|
|
>
|
||
|
|
<span slot-scope="{ node, data }">
|
||
|
|
<span v-if="node.data.inRoom" style="color: green;">{{ data.nickName }}</span>
|
||
|
|
<span v-else style="color: #ccc;">{{ data.nickName }}</span>
|
||
|
|
</span>
|
||
|
|
</el-tree>
|
||
|
|
</el-scrollbar>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { DeviceMenu } from '@/scripts/ConstDic';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
room: {
|
||
|
|
type: Object,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
members: {
|
||
|
|
type: Array,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
height: {
|
||
|
|
type: Number,
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
filterText: ''
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
defaultProps() {
|
||
|
|
return { label: 'nickName' };
|
||
|
|
},
|
||
|
|
treeHeight() {
|
||
|
|
return this.height - 40;
|
||
|
|
},
|
||
|
|
filterMembers() {
|
||
|
|
return this.members.filter(e =>{ return e.nickName.includes(this.filterText); });
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleFilterNode(value, data) {
|
||
|
|
if (!value) return true;
|
||
|
|
return data.name.indexOf(value) !== -1;
|
||
|
|
},
|
||
|
|
handleShowContextMenu(e, obj, node, vueElem) {
|
||
|
|
e.preventDefault();
|
||
|
|
this.point = {
|
||
|
|
x: e.clientX,
|
||
|
|
y: e.clientY
|
||
|
|
};
|
||
|
|
if (this.userId == this.room.creatorId) {
|
||
|
|
this.clickUserId = obj.id;
|
||
|
|
this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: DeviceMenu.JointRoom });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.member {
|
||
|
|
background: #f0f0f0;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
|
||
|
|
&__head {
|
||
|
|
height: 30px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 0 10px;
|
||
|
|
border-bottom: 1px solid #ccc;
|
||
|
|
|
||
|
|
&--title {
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
&--notes {
|
||
|
|
font-size: 16px;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-end;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&__container {
|
||
|
|
flex-grow: 1;
|
||
|
|
&--list {
|
||
|
|
background: #fff;
|
||
|
|
height: auto;
|
||
|
|
min-height: calc(100%-200px);
|
||
|
|
max-height: calc(100%-200px);
|
||
|
|
|
||
|
|
&::-webkit-scrollbar {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|