Browse Source

客服转接完善

master
La123123 8 hours ago
parent
commit
6a09bab520
  1. 4
      im-platform/src/main/java/com/bx/implatform/service/impl/FriendServiceImpl.java
  2. 2
      im-platform/src/main/java/com/bx/implatform/service/impl/PrivateMessageServiceImpl.java
  3. 134
      im-web/src/components/chat/ChangeCustomer.vue
  4. 29
      im-web/src/components/chat/ChatBox.vue

4
im-platform/src/main/java/com/bx/implatform/service/impl/FriendServiceImpl.java

@ -162,8 +162,8 @@ public class FriendServiceImpl extends ServiceImpl<FriendMapper, Friend> impleme
Friend friend = this.getOne(wrapper);
LambdaQueryWrapper<Friend> wrapperAnother = Wrappers.lambdaQuery();
wrapper.eq(Friend::getUserId, userId);
wrapper.eq(Friend::getFriendId, customerId);
wrapperAnother.eq(Friend::getUserId, userId);
wrapperAnother.eq(Friend::getFriendId, customerId);
Friend friendAnother = this.getOne(wrapperAnother);
if (Objects.isNull(friend) || Objects.isNull(friendAnother)) {

2
im-platform/src/main/java/com/bx/implatform/service/impl/PrivateMessageServiceImpl.java

@ -248,7 +248,7 @@ public class PrivateMessageServiceImpl extends ServiceImpl<PrivateMessageMapper,
//获取原有消息记录
LambdaQueryWrapper<PrivateMessage> wrapperAnother = new LambdaQueryWrapper<>();
wrapper.eq(PrivateMessage::getSendId, userId).eq(PrivateMessage::getRecvId, customerId);
wrapperAnother.eq(PrivateMessage::getSendId, userId).eq(PrivateMessage::getRecvId, customerId);
List<PrivateMessage> messages2 = this.list(wrapperAnother);
//修改接收对象
if(!messages2.isEmpty()) {

134
im-web/src/components/chat/ChangeCustomer.vue

@ -0,0 +1,134 @@
<template>
<el-drawer title="转接客服" size="400px" :visible="visible" direction="rtl" :before-close="onClose">
<div class="change-customer">
<div class="select-customer">
<el-select v-model="selectedCustomer" placeholder="请选择要转接的客服" style="width: 100%; margin-bottom: 20px;">
<el-option
v-for="item in customerList"
:key="item.id"
:label="item.nickName"
:value="item.id">
</el-option>
</el-select>
<el-button
type="primary"
@click="transfer"
:disabled="!selectedCustomer"
style="width: 100%;">
转接
</el-button>
</div>
<div class="transfer-info" v-if="currentUserInfo">
<h4>当前对话信息</h4>
<p>当前用户{{ currentUserInfo.nickName }}</p>
<p>用户ID{{ currentUserInfo.id }}</p>
</div>
</div>
</el-drawer>
</template>
<script>
export default {
name: 'ChangeCustomer',
props: {
visible: {
type: Boolean,
default: false
},
// ID
targetUserId: {
type: Number,
required: true
}
},
data() {
return {
customerList: [],
selectedCustomer: null,
currentUserInfo: null
}
},
methods: {
onClose() {
this.selectedCustomer = null;
this.$emit('close');
},
loadCustomers() {
this.$http({
url: '/user/getEnableChangeCustomer',
method: 'post'
}).then(customers => {
this.customerList = customers;
}).catch(error => {
this.$message.error('获取客服列表失败');
console.error(error);
});
},
transfer() {
if (!this.selectedCustomer) {
this.$message.warning('请选择要转接的客服');
return;
}
const params = {
targetId: this.selectedCustomer,
userId: this.targetUserId
};
this.$http({
url: '/user/changeCustomer',
method: 'post',
data: params
}).then(res => {
this.$message.success('转接成功');
this.$emit('transfer-success');
this.onClose();
}).catch(error => {
this.$message.error('转接失败');
console.error(error);
});
},
open(targetUserId) {
this.currentUserInfo = { id: targetUserId };
this.loadCustomers();
}
},
watch: {
visible(newVal) {
if (newVal) {
this.loadCustomers();
} else {
this.selectedCustomer = null;
}
}
}
}
</script>
<style lang="scss" scoped>
.change-customer {
padding: 20px;
.select-customer {
margin-bottom: 30px;
}
.transfer-info {
h4 {
margin-top: 0;
color: #333;
}
p {
margin: 10px 0;
color: #666;
}
}
}
</style>

29
im-web/src/components/chat/ChatBox.vue

@ -56,6 +56,7 @@
@click="showPrivateVideo('video')">
</div> -->
<div title="聊天记录" class="el-icon-chat-dot-round" @click="showHistoryBox()"></div>
<div title="转接客服" class="el-icon-service" @click="showChangeCustomerBox()" v-if="isPrivate"></div>
</div>
<div class="send-content-area">
<ChatInput :ownerId="group.ownerId" ref="chatInputEditor" :group-members="groupMembers"
@ -79,6 +80,8 @@
<rtc-group-join ref="rtcJoin" :groupId="group.id"></rtc-group-join>
<chat-history :visible="showHistory" :chat="chat" :friend="friend" :group="group"
:groupMembers="groupMembers" @close="closeHistoryBox"></chat-history>
<change-customer :visible="showChangeCustomer" :target-user-id="targetUserId"
@close="closeChangeCustomerBox" @transfer-success="onTransferSuccess"></change-customer>
</el-container>
</div>
</template>
@ -94,7 +97,7 @@ import ChatAtBox from "./ChatAtBox.vue"
import GroupMemberSelector from "../group/GroupMemberSelector.vue"
import RtcGroupJoin from "../rtc/RtcGroupJoin.vue"
import ChatInput from "./ChatInput";
import ChangeCustomer from "./ChangeCustomer.vue";
export default {
name: "chatPrivate",
@ -108,7 +111,8 @@ export default {
ChatHistory,
ChatAtBox,
GroupMemberSelector,
RtcGroupJoin
RtcGroupJoin,
ChangeCustomer
},
props: {
chat: {
@ -127,6 +131,7 @@ export default {
showRecord: false, //
showSide: false, //
showHistory: false, //
showChangeCustomer: false, //
lockMessage: false, //
showMinIdx: 0, // showMinIdx
reqQueue: [], //
@ -750,7 +755,17 @@ export default {
}
this.maxTmpId = id;
return id;
}
},
showChangeCustomerBox() {
this.showChangeCustomer = true;
},
closeChangeCustomerBox() {
this.showChangeCustomer = false;
},
onTransferSuccess() {
this.$message.success('已成功转接客服');
//
},
},
computed: {
mine() {
@ -800,6 +815,14 @@ export default {
},
loading() {
return this.chatStore.loading;
},
targetUserId() {
if (this.chat.type === 'PRIVATE') {
return this.chat.targetId;
} else if (this.chat.type === 'GROUP') {
return this.group.id;
}
return 0;
}
},
watch: {

Loading…
Cancel
Save