xsx
11 months ago
|
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 7.6 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
Before Width: | Height: | Size: 5.6 KiB |
|
Before Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 7.7 KiB |
|
Before Width: | Height: | Size: 9.1 KiB |
|
Before Width: | Height: | Size: 8.4 KiB |
@ -1,174 +1,173 @@ |
|||||
<template> |
<template> |
||||
<el-dialog title="邀请好友" :visible.sync="show" width="620px" :before-close="close"> |
<el-dialog v-dialogDrag title="邀请好友" :visible.sync="show" width="620px" :before-close="close"> |
||||
<div class="agm-container"> |
<div class="add-group-member"> |
||||
<div class="agm-l-box"> |
<div class="left-box"> |
||||
<div class="search"> |
<div class="search"> |
||||
<el-input placeholder="搜索好友" v-model="searchText" size="small"> |
<el-input placeholder="搜索好友" v-model="searchText" size="small"> |
||||
<i class="el-icon-search el-input__icon" slot="suffix"> </i> |
<i class="el-icon-search el-input__icon" slot="suffix"> </i> |
||||
</el-input> |
</el-input> |
||||
</div> |
</div> |
||||
<el-scrollbar style="height:400px;"> |
<el-scrollbar style="height:400px;"> |
||||
<div v-for="friend in friends" :key="friend.id"> |
<div v-for="friend in friends" :key="friend.id"> |
||||
<friend-item v-show="friend.nickName.includes(searchText)" :showDelete="false" |
<friend-item v-show="friend.nickName.includes(searchText)" :showDelete="false" |
||||
@click.native="onSwitchCheck(friend)" :menu="false" :friend="friend" :active="false"> |
@click.native="onSwitchCheck(friend)" :menu="false" :friend="friend" :active="false"> |
||||
<el-checkbox :disabled="friend.disabled" @click.native.stop="" class="agm-friend-checkbox" |
<el-checkbox :disabled="friend.disabled" @click.native.stop="" class="friend-checkbox" |
||||
v-model="friend.isCheck" size="medium"></el-checkbox> |
v-model="friend.isCheck" size="medium"></el-checkbox> |
||||
</friend-item> |
</friend-item> |
||||
</div> |
</div> |
||||
</el-scrollbar> |
</el-scrollbar> |
||||
</div> |
</div> |
||||
<div class="agm-arrow el-icon-d-arrow-right"></div> |
<div class="arrow el-icon-d-arrow-right"></div> |
||||
<div class="agm-r-box"> |
<div class="right-box"> |
||||
<div class="agm-select-tip"> 已勾选{{ checkCount }}位好友</div> |
<div class="tip"> 已勾选{{ checkCount }}位好友</div> |
||||
<el-scrollbar style="height:400px;"> |
<el-scrollbar style="height:400px;"> |
||||
<div v-for="friend in friends" :key="friend.id"> |
<div v-for="friend in friends" :key="friend.id"> |
||||
<friend-item v-if="friend.isCheck && !friend.disabled" :friend="friend" :active="false" |
<friend-item v-if="friend.isCheck && !friend.disabled" :friend="friend" :active="false" |
||||
@del="onRemoveFriend(friend)" :menu="false"> |
@del="onRemoveFriend(friend)" :menu="false"> |
||||
</friend-item> |
</friend-item> |
||||
</div> |
</div> |
||||
</el-scrollbar> |
</el-scrollbar> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
<span slot="footer" class="dialog-footer"> |
<span slot="footer" class="dialog-footer"> |
||||
<el-button @click="close()">取 消</el-button> |
<el-button @click="close()">取 消</el-button> |
||||
<el-button type="primary" @click="onOk()">确 定</el-button> |
<el-button type="primary" @click="onOk()">确 定</el-button> |
||||
</span> |
</span> |
||||
</el-dialog> |
</el-dialog> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import FriendItem from '../friend/FriendItem.vue'; |
import FriendItem from '../friend/FriendItem.vue'; |
||||
|
|
||||
export default { |
export default { |
||||
name: "addGroupMember", |
name: "addGroupMember", |
||||
components: { |
components: { |
||||
FriendItem |
FriendItem |
||||
}, |
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
show: false, |
show: false, |
||||
searchText: "", |
searchText: "", |
||||
friends: [] |
friends: [] |
||||
} |
} |
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
open() { |
open() { |
||||
this.show = true; |
this.show = true; |
||||
this.friends = []; |
this.friends = []; |
||||
this.$store.state.friendStore.friends.forEach((f) => { |
this.$store.state.friendStore.friends.forEach((f) => { |
||||
if (f.deleted) { |
if (f.deleted) { |
||||
return; |
return; |
||||
} |
} |
||||
let friend = JSON.parse(JSON.stringify(f)) |
let friend = JSON.parse(JSON.stringify(f)) |
||||
let m = this.members.filter((m) => !m.quit) |
let m = this.members.filter((m) => !m.quit) |
||||
.find((m) => m.userId == f.id); |
.find((m) => m.userId == f.id); |
||||
if (m) { |
if (m) { |
||||
// 好友已经在群里 |
// 好友已经在群里 |
||||
friend.disabled = true; |
friend.disabled = true; |
||||
friend.isCheck = true |
friend.isCheck = true |
||||
} else { |
} else { |
||||
friend.disabled = false; |
friend.disabled = false; |
||||
friend.isCheck = false; |
friend.isCheck = false; |
||||
} |
} |
||||
this.friends.push(friend); |
this.friends.push(friend); |
||||
}) |
}) |
||||
}, |
}, |
||||
close() { |
close() { |
||||
this.show = false; |
this.show = false; |
||||
}, |
}, |
||||
onOk() { |
onOk() { |
||||
let inviteVO = { |
let inviteVO = { |
||||
groupId: this.groupId, |
groupId: this.groupId, |
||||
friendIds: [] |
friendIds: [] |
||||
} |
} |
||||
this.friends.forEach((f) => { |
this.friends.forEach((f) => { |
||||
if (f.isCheck && !f.disabled) { |
if (f.isCheck && !f.disabled) { |
||||
inviteVO.friendIds.push(f.id); |
inviteVO.friendIds.push(f.id); |
||||
} |
} |
||||
}) |
}) |
||||
if (inviteVO.friendIds.length > 0) { |
if (inviteVO.friendIds.length > 0) { |
||||
this.$http({ |
this.$http({ |
||||
url: "/group/invite", |
url: "/group/invite", |
||||
method: 'post', |
method: 'post', |
||||
data: inviteVO |
data: inviteVO |
||||
}).then(() => { |
}).then(() => { |
||||
this.$message.success("邀请成功"); |
this.$message.success("邀请成功"); |
||||
this.$emit("reload"); |
this.$emit("reload"); |
||||
this.close() |
this.close() |
||||
}) |
}) |
||||
} |
} |
||||
}, |
}, |
||||
onRemoveFriend(friend) { |
onRemoveFriend(friend) { |
||||
friend.isCheck = false; |
friend.isCheck = false; |
||||
}, |
}, |
||||
onSwitchCheck(friend) { |
onSwitchCheck(friend) { |
||||
if (!friend.disabled) { |
if (!friend.disabled) { |
||||
friend.isCheck = !friend.isCheck |
friend.isCheck = !friend.isCheck |
||||
} |
} |
||||
} |
} |
||||
}, |
}, |
||||
props: { |
props: { |
||||
groupId: { |
groupId: { |
||||
type: Number |
type: Number |
||||
}, |
}, |
||||
members: { |
members: { |
||||
type: Array |
type: Array |
||||
} |
} |
||||
}, |
}, |
||||
computed: { |
computed: { |
||||
checkCount() { |
checkCount() { |
||||
return this.friends.filter((f) => f.isCheck && !f.disabled).length; |
return this.friends.filter((f) => f.isCheck && !f.disabled).length; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss"> |
<style lang="scss" scoped> |
||||
.agm-container { |
.add-group-member { |
||||
display: flex; |
display: flex; |
||||
|
|
||||
.agm-l-box { |
.left-box { |
||||
flex: 1; |
flex: 1; |
||||
overflow: hidden; |
overflow: hidden; |
||||
border: var(--im-border); |
border: var(--im-border); |
||||
|
|
||||
.search { |
.search { |
||||
height: 40px; |
height: 40px; |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
|
|
||||
.el-input__inner { |
.el-input__inner { |
||||
border: unset; |
border: unset; |
||||
border-bottom: var(--im-border); |
border-bottom: var(--im-border); |
||||
} |
} |
||||
|
} |
||||
|
|
||||
} |
.friend-checkbox { |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
.agm-friend-checkbox { |
.arrow { |
||||
margin-right: 20px; |
display: flex; |
||||
} |
align-items: center; |
||||
} |
font-size: 18px; |
||||
|
padding: 10px; |
||||
|
font-weight: 600; |
||||
|
color: var(--im-color-primary); |
||||
|
} |
||||
|
|
||||
.agm-arrow { |
.right-box { |
||||
display: flex; |
flex: 1; |
||||
align-items: center; |
border: var(--im-border); |
||||
font-size: 18px; |
|
||||
padding: 10px; |
|
||||
font-weight: 600; |
|
||||
color: var(--im-color-primary); |
|
||||
} |
|
||||
|
|
||||
.agm-r-box { |
.tip { |
||||
flex: 1; |
text-align: left; |
||||
border: var(--im-border); |
height: 40px; |
||||
|
line-height: 40px; |
||||
.agm-select-tip { |
text-indent: 10px; |
||||
text-align: left; |
color: var(--im-text-color-light) |
||||
height: 40px; |
} |
||||
line-height: 40px; |
} |
||||
text-indent: 6px; |
|
||||
color: var(--im-text-color-light) |
|
||||
} |
|
||||
} |
|
||||
} |
} |
||||
</style> |
</style> |
||||