|
|
@ -1,48 +1,40 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="imui-center"> |
|
|
<div id="InstantMessage"> |
|
|
<lemon-imui |
|
|
<div class="imui-center"> |
|
|
v-show="showDialog" |
|
|
<lemon-imui |
|
|
ref="IMUI" |
|
|
v-show="showDialog" |
|
|
:user="currentUser" |
|
|
ref="IMUI" |
|
|
@send="handleSendMessage" |
|
|
:user="currentUser" |
|
|
@pull-messages="onPullMessages" |
|
|
@send="handleSendMessage" |
|
|
@change-menu="onChangeMenu" |
|
|
@pull-messages="onPullMessages" |
|
|
@change-contact="onChangeContract" |
|
|
@change-menu="onChangeMenu" |
|
|
@message-click="handleMessageClick" |
|
|
@change-contact="onChangeContract" |
|
|
@menu-avatar-click="handleMenuAvatarClick" |
|
|
@message-click="handleMessageClick" |
|
|
> |
|
|
@menu-avatar-click="handleMenuAvatarClick" |
|
|
<template #cover> |
|
|
/> |
|
|
<div class="cover"> |
|
|
</div> |
|
|
<i class="lemon-icon-message" /> |
|
|
|
|
|
<p><b>Lemon</b> IMUI</p> |
|
|
|
|
|
</div> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template #contact-title="contact"> |
|
|
|
|
|
<span>{{ contact.displayName }}</span> |
|
|
|
|
|
<small |
|
|
|
|
|
class="more" |
|
|
|
|
|
>…</small> |
|
|
|
|
|
</template> |
|
|
|
|
|
</lemon-imui> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script lang="ts"> |
|
|
<script lang="ts"> |
|
|
import EventBusMiXin from '@/mixins/EventBusMiXin' |
|
|
import EventBusMiXin from '@/mixins/EventBusMiXin' |
|
|
import Component, { mixins } from 'vue-class-component' |
|
|
import Component, { mixins } from 'vue-class-component' |
|
|
|
|
|
import AddFriend from './components/AddFriend.vue' |
|
|
|
|
|
|
|
|
import { abpPagerFormat } from '@/utils' |
|
|
import { abpPagerFormat } from '@/utils' |
|
|
|
|
|
|
|
|
import { UserModule } from '@/store/modules/user' |
|
|
import { UserModule } from '@/store/modules/user' |
|
|
|
|
|
|
|
|
import ImApiService, { |
|
|
import ImApiService, { |
|
|
MyFriendGetByPaged, |
|
|
MyFrientGetAll, |
|
|
UserMessageGetByPaged, |
|
|
UserMessageGetByPaged, |
|
|
|
|
|
GetUserLastMessage, |
|
|
UserFriend, |
|
|
UserFriend, |
|
|
ChatMessage |
|
|
ChatMessage |
|
|
} from '@/api/instant-message' |
|
|
} from '@/api/instant-message' |
|
|
|
|
|
|
|
|
import { HubConnection, HubConnectionBuilder, HubConnectionState } from '@microsoft/signalr' |
|
|
import { HubConnection, HubConnectionBuilder, HubConnectionState } from '@microsoft/signalr' |
|
|
|
|
|
import { User } from '@/api/users' |
|
|
|
|
|
|
|
|
class MyContract { |
|
|
class MyContract { |
|
|
id = '' |
|
|
id = '' |
|
|
@ -60,6 +52,7 @@ class ChatMenu { |
|
|
name = '' |
|
|
name = '' |
|
|
title = '' |
|
|
title = '' |
|
|
unread = 0 |
|
|
unread = 0 |
|
|
|
|
|
click?: Function |
|
|
render?: Function |
|
|
render?: Function |
|
|
renderContainer?: Function |
|
|
renderContainer?: Function |
|
|
isBottom = false |
|
|
isBottom = false |
|
|
@ -106,19 +99,24 @@ class Message { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@Component({ |
|
|
@Component({ |
|
|
name: 'InstantMessage' |
|
|
name: 'InstantMessage', |
|
|
|
|
|
components: { |
|
|
|
|
|
AddFriend |
|
|
|
|
|
} |
|
|
}) |
|
|
}) |
|
|
export default class InstantMessage extends mixins(EventBusMiXin) { |
|
|
export default class InstantMessage extends mixins(EventBusMiXin) { |
|
|
private showDialog = false |
|
|
private showDialog = false |
|
|
private dataFilter = new MyFriendGetByPaged() |
|
|
|
|
|
private myFriendCount = 0 |
|
|
private myFriendCount = 0 |
|
|
private myFriends = new Array<UserFriend>() |
|
|
private myFriends = new Array<UserFriend>() |
|
|
|
|
|
|
|
|
private connection!: HubConnection |
|
|
private connection!: HubConnection |
|
|
private chatMenus = new Array<ChatMenu>() |
|
|
private chatMenus = new Array<ChatMenu>() |
|
|
|
|
|
|
|
|
|
|
|
private getMyFriendFilter = new MyFrientGetAll() |
|
|
private getChatMessageFilter = new UserMessageGetByPaged() |
|
|
private getChatMessageFilter = new UserMessageGetByPaged() |
|
|
|
|
|
|
|
|
|
|
|
private showAddFriendDialog = false |
|
|
|
|
|
|
|
|
get currentUser() { |
|
|
get currentUser() { |
|
|
return { |
|
|
return { |
|
|
id: UserModule.id, |
|
|
id: UserModule.id, |
|
|
@ -130,6 +128,7 @@ export default class InstantMessage extends mixins(EventBusMiXin) { |
|
|
mounted() { |
|
|
mounted() { |
|
|
this.unSubscribeAll() |
|
|
this.unSubscribeAll() |
|
|
this.subscribe('onShowImDialog', this.onShowImDialog) |
|
|
this.subscribe('onShowImDialog', this.onShowImDialog) |
|
|
|
|
|
this.subscribe('onUserFriendAdded', this.onUserFriendAdded) |
|
|
this.handleInitDefaultMenus() |
|
|
this.handleInitDefaultMenus() |
|
|
this.handleStartConnection() |
|
|
this.handleStartConnection() |
|
|
} |
|
|
} |
|
|
@ -141,12 +140,16 @@ export default class InstantMessage extends mixins(EventBusMiXin) { |
|
|
private handleInitIMUI() { |
|
|
private handleInitIMUI() { |
|
|
const imui = this.$refs.IMUI as any |
|
|
const imui = this.$refs.IMUI as any |
|
|
ImApiService |
|
|
ImApiService |
|
|
.getMyFriends(this.dataFilter) |
|
|
.getMyAllFriends(this.getMyFriendFilter) |
|
|
.then(res => { |
|
|
.then(res => { |
|
|
this.myFriends = res.items |
|
|
this.myFriends = res.items |
|
|
this.myFriendCount = res.totalCount |
|
|
this.myFriendCount = res.items.length |
|
|
this.handleInitContracts(imui) |
|
|
this.handleInitContracts(imui) |
|
|
}) |
|
|
}) |
|
|
|
|
|
.finally(() => { |
|
|
|
|
|
imui.initMenus(this.chatMenus) |
|
|
|
|
|
this.handleInitLastContractMessages(imui) |
|
|
|
|
|
}) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
private handleInitContracts(imui: any) { |
|
|
private handleInitContracts(imui: any) { |
|
|
@ -157,19 +160,52 @@ export default class InstantMessage extends mixins(EventBusMiXin) { |
|
|
myContract.id = friend.friendId |
|
|
myContract.id = friend.friendId |
|
|
myContract.displayName = friend.remarkName ?? friend.userName |
|
|
myContract.displayName = friend.remarkName ?? friend.userName |
|
|
myContract.unread = 0 |
|
|
myContract.unread = 0 |
|
|
myContract.lastSendTime = new Date().getTime() |
|
|
|
|
|
myContract.lastContent = '1524545' |
|
|
|
|
|
myContract.type = 'many' |
|
|
myContract.type = 'many' |
|
|
myContracts.push(myContract) |
|
|
myContracts.push(myContract) |
|
|
}) |
|
|
}) |
|
|
imui.initContacts(myContracts) |
|
|
imui.initContacts(myContracts) |
|
|
imui.initMenus(this.chatMenus) |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
private handleInitLastContractMessages(imui: any) { |
|
|
|
|
|
const filter = new GetUserLastMessage() |
|
|
|
|
|
ImApiService |
|
|
|
|
|
.getMyLastMessages(filter) |
|
|
|
|
|
.then(res => { |
|
|
|
|
|
res.items |
|
|
|
|
|
.sort((now, next) => { // 如果一条消息是与同一个用户的发送与接收,会被分为两条消息返回,所以需要按照发送时间升序排序,历史消息才会准确 |
|
|
|
|
|
return next.sendTime < now.sendTime ? 1 : -1 |
|
|
|
|
|
}) |
|
|
|
|
|
.forEach(msg => { |
|
|
|
|
|
const imuiMsg = new Message() |
|
|
|
|
|
imuiMsg.fromChatMessage(msg) |
|
|
|
|
|
let contractId = msg.formUserId |
|
|
|
|
|
if (msg.formUserId === this.currentUser.id) { |
|
|
|
|
|
contractId = msg.toUserId |
|
|
|
|
|
} |
|
|
|
|
|
imui.updateContact(contractId, { |
|
|
|
|
|
lastSendTime: imuiMsg.sendTime, |
|
|
|
|
|
lastContent: imui.lastContentRender(imuiMsg) |
|
|
|
|
|
}) |
|
|
|
|
|
}) |
|
|
|
|
|
}) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
private handleInitDefaultMenus() { |
|
|
private handleInitDefaultMenus() { |
|
|
const lastMsgMenu = new ChatMenu('lastMessages', '历史消息') |
|
|
const lastMsgMenu = new ChatMenu('lastMessages', '历史消息') |
|
|
const contractsMenu = new ChatMenu('contacts', '联系人') |
|
|
const contractsMenu = new ChatMenu('contacts', '联系人') |
|
|
this.chatMenus.push(lastMsgMenu, contractsMenu) |
|
|
const addFriendMenu = new ChatMenu('addFriends', '添加朋友') |
|
|
|
|
|
addFriendMenu.isBottom = true |
|
|
|
|
|
addFriendMenu.render = () => { |
|
|
|
|
|
return this.$createElement('i', { class: 'lemon-icon-attah' }) |
|
|
|
|
|
} |
|
|
|
|
|
addFriendMenu.renderContainer = () => { |
|
|
|
|
|
return this.$createElement(AddFriend, { |
|
|
|
|
|
on: { |
|
|
|
|
|
onUserFriendAdded: this.onUserFriendAdded |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
this.chatMenus.push(lastMsgMenu, contractsMenu, addFriendMenu) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
private handleStartConnection() { |
|
|
private handleStartConnection() { |
|
|
@ -253,7 +289,7 @@ export default class InstantMessage extends mixins(EventBusMiXin) { |
|
|
const message = new Message() |
|
|
const message = new Message() |
|
|
message.fromChatMessage(chatMessage) |
|
|
message.fromChatMessage(chatMessage) |
|
|
const imui = this.$refs.IMUI as any |
|
|
const imui = this.$refs.IMUI as any |
|
|
imui.appendMessage(message) |
|
|
imui.appendMessage(message, chatMessage.formUserId) |
|
|
const currentContact = imui.currentContact |
|
|
const currentContact = imui.currentContact |
|
|
if (currentContact && currentContact.id === chatMessage.formUserId) { |
|
|
if (currentContact && currentContact.id === chatMessage.formUserId) { |
|
|
currentContact.lastContent = chatMessage.content |
|
|
currentContact.lastContent = chatMessage.content |
|
|
@ -297,6 +333,18 @@ export default class InstantMessage extends mixins(EventBusMiXin) { |
|
|
}) |
|
|
}) |
|
|
imui.closeDrawer() |
|
|
imui.closeDrawer() |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
private onUserFriendAdded(user: User) { |
|
|
|
|
|
if (UserModule.id && UserModule.userName) { |
|
|
|
|
|
const chatMessage = new ChatMessage() |
|
|
|
|
|
chatMessage.formUserId = UserModule.id |
|
|
|
|
|
chatMessage.formUserName = UserModule.userName |
|
|
|
|
|
chatMessage.toUserId = user.id |
|
|
|
|
|
chatMessage.content = '我已经添加你为好友,让我们一起聊天吧!' |
|
|
|
|
|
console.log(chatMessage) |
|
|
|
|
|
this.connection.invoke('SendMessage', chatMessage) |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
|
cKey
5 years ago