<template>
|
<el-dialog v-model="props.modelValue" width="640px" :close-on-click-modal="false" draggable @closed="handClose">
|
<div class="chatSession">
|
<el-row>
|
<el-col :span="6">
|
<h1>会话列表</h1>
|
<div class="sessionlist" v-if="sessionList.length > 0">
|
<el-badge
|
:value="item.unReadCount"
|
:max="99"
|
:hidden="item.unReadCount == 0"
|
v-for="(item, index) in sessionList"
|
:key="index"
|
@click="setupSession(item)"
|
>
|
<el-tag :key="item.sessionName" closable :type="sessionObj.id == item.id ? '' : 'info'" @close="removeSession(item)">
|
{{ item.sessionName }}
|
</el-tag>
|
</el-badge>
|
</div>
|
<div v-if="isOpenSessionList" style="text-align: center">
|
<el-button link type="primary" @click="loadSessionList">更多会话</el-button>
|
</div>
|
</el-col>
|
<el-col :span="18" v-show="sessionObj.id">
|
<h1>{{ sessionObj.sessionName }}</h1>
|
<div class="msglist" id="msgScroll" ref="msglistRef">
|
<div style="padding: 5px; width: 100%" v-for="(item, index) in msgList" :key="index">
|
<div class="right" v-if="userStore.userId == item.fromUserId">
|
<div class="content">{{ item.content }}</div>
|
:
|
<div class="acl">我</div>
|
</div>
|
<div class="left" v-else>
|
<div class="acl">{{ item.fromUserName.charAt(0) }}</div>
|
:
|
<div class="content">{{ item.content }}</div>
|
</div>
|
<div class="center" v-if="index % 20 == 0">
|
{{ item.createTime }}
|
</div>
|
</div>
|
</div>
|
<div style="margin-top: 5px">
|
<el-input v-model="content" type="textarea" :row="2" resize="none" @keyup.enter.native="send"></el-input>
|
<div style="float: right; padding-top: 5px">
|
<el-button @click="send" type="primary" plain>发送</el-button>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<!--可建立会话连接列表 -->
|
<el-dialog title="可建立会话列表" v-model="isLoadDialog" width="640px" append-to-body>
|
<el-table v-loading="tableOption.loading" :data="tableOption.dataTable" @cell-dblclick="addSession">
|
<el-table-column label="昵称" align="center" key="nickName" prop="nickName"></el-table-column>
|
</el-table>
|
<pagination
|
v-show="tableOption.total > 0"
|
:total="tableOption.total"
|
v-model:page="tableOption.pageNum"
|
v-model:limit="tableOption.pageSize"
|
@pagination="loadSessionList"
|
/>
|
</el-dialog>
|
</el-dialog>
|
</template>
|
<script setup lang="ts">
|
import { canSessionList } from "@/api/login";
|
import useUserStore from "@/store/modules/user";
|
import useWebSockStore from "@/store/modules/websock";
|
import useType, { webSockHelper } from "@/utils/websock/webSockHelper";
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
const useSockStore = useWebSockStore();
|
const { msgList, sessionList, sessionObj, isopen } = toRefs(useSockStore);
|
const userStore = useUserStore();
|
const { userId } = toRefs(userStore);
|
const props = defineProps({
|
modelValue: {
|
type: Boolean,
|
default: false,
|
},
|
});
|
|
const emits = defineEmits(["update:modelValue"]);
|
const content = ref("");
|
// console.log("userid================>", import.meta.env.VITE_APP_BASE_API);
|
let sockUrl = import.meta.env.VITE_APP_BASE_API == "/dev-api" ? "192.168.1.122:8089" : "main.mantanghui.com:8089";
|
// let sockUrl = import.meta.env.VITE_APP_BASE;
|
let websock = reactive(new webSockHelper(useType.LCON, sockUrl, userId.value));
|
const msglistRef = ref();
|
|
const isOpenSessionList = ref(userId.value == "2");
|
|
watch(
|
() => props.modelValue,
|
(newval, oldval) => {
|
// console.log("props.modelValue", newval);
|
isopen.value = newval;
|
if (newval) {
|
/**重新加载会话列表 */
|
websock.updataSessions().then((data) => {
|
if (data.length == 1) {
|
useSockStore.sessionObj = data[0];
|
websock.sessionObj = data[0];
|
websock.init(useType.WEB);
|
websock.pageNum = 1;
|
msgList.value = [];
|
/**重新加载消息列表 */
|
websock.updataMessages();
|
}
|
});
|
} else {
|
websock = new webSockHelper(useType.LCON, sockUrl, userId.value);
|
}
|
}
|
);
|
|
/**
|
* 关闭
|
* @param fun
|
*/
|
const handClose = () => {
|
emits("update:modelValue", false);
|
};
|
|
/**
|
* 发送消息
|
*/
|
const send = () => {
|
websock.sendMsg(content.value).then(() => {
|
// console.log("list====>", useSockStore.msgList);
|
content.value = "";
|
});
|
};
|
/**
|
* 建立session
|
*/
|
const setupSession = (e: any) => {
|
if (e.userId == sessionObj.value.toUserId) {
|
return;
|
}
|
useSockStore.msgList = [];
|
websock.pageNum = 1;
|
sessionObj.value = { ...e };
|
websock.sessionObj = { ...e };
|
websock.init(useType.WEB, websock.updataMessages);
|
// mountNextPage();
|
};
|
|
const isLoadDialog = ref(false);
|
|
const tableOption = reactive({
|
loading: false,
|
dataTable: [] as any[],
|
total: 0,
|
pageNum: 1,
|
pageSize: 10,
|
});
|
|
/**
|
* 客服加载可建立会话列表
|
*/
|
const loadSessionList = () => {
|
tableOption.loading = true;
|
canSessionList({ pageNum: tableOption.pageNum, pageSize: tableOption.pageSize }).then((res) => {
|
if (res.code == 200) {
|
tableOption.loading = false;
|
tableOption.dataTable = res.rows;
|
tableOption.total = res.total;
|
isLoadDialog.value = true;
|
}
|
});
|
};
|
|
/**
|
* 添加会话连接
|
*/
|
const addSession = (e: any) => {
|
if (e.userId == sessionObj.value.userId) {
|
proxy.$modal.msgWarning("会话已存在");
|
return;
|
}
|
websock
|
.addSession({
|
sessionName: e.nickName,
|
toUserId: e.userId,
|
unReadCount: 0,
|
userId: userId.value,
|
})
|
.then((res) => {
|
websock.updataSessions().then((data) => {
|
console.log("data================>", data);
|
let _item = data.find((f: any) => f.userId == e.userId);
|
useSockStore.sessionObj = _item;
|
websock.sessionObj = _item;
|
websock.init(useType.WEB);
|
websock.pageNum = 1;
|
msgList.value = [];
|
});
|
isLoadDialog.value = false;
|
});
|
};
|
|
/**
|
* 移除会话
|
* @param e
|
*/
|
const removeSession = (e: any) => {
|
websock.removeSession(e.id).then((res) => {
|
websock.updataSessions();
|
});
|
};
|
|
// /**
|
// * 建立连接
|
// */
|
// const addSession = (row: any) => {
|
// useSockStore.sessionObj.userId = '2';
|
// websock.sessionObj.userId = '2';
|
// websock.init(useType.WEB);
|
// };
|
</script>
|
<style lang="scss" scoped>
|
@import "@/assets/styles/variables.module.scss";
|
h1 {
|
width: 100%;
|
text-align: center;
|
}
|
|
.sessionlist {
|
}
|
|
$colors: #15cae4;
|
.chatSession {
|
display: flex;
|
flex-direction: column;
|
// height: 600px;
|
width: 600px;
|
// border: 1px solid #ccc;
|
border-radius: 8px;
|
|
.sessionlist {
|
width: 100%;
|
height: 500px;
|
display: flex;
|
flex-direction: column;
|
overflow-y: auto;
|
padding: 10px 0px;
|
|
.sessionitem {
|
padding: 10px 0px;
|
width: 100%;
|
text-align: center;
|
border-bottom: 1px solid #ecf6f8;
|
}
|
.sessionitem:hover {
|
background-color: #ecf6f8;
|
}
|
.btn {
|
background-color: #ecf6f8;
|
color: #15cae4;
|
}
|
|
.el-badge {
|
width: 90% !important;
|
// margin: 0px auto;
|
}
|
|
.el-tag {
|
width: 100% !important;
|
margin-bottom: 2px;
|
justify-content: space-between !important;
|
}
|
}
|
|
.msglist {
|
width: 100%;
|
height: 400px;
|
overflow-y: auto;
|
display: flex;
|
flex-direction: column;
|
padding: 5px;
|
background-color: #f8f8f8;
|
.left {
|
display: flex;
|
width: 100%;
|
justify-content: flex-start;
|
align-items: center;
|
.acl {
|
width: 30px;
|
height: 30px;
|
background-color: #ccc;
|
text-align: center;
|
line-height: 30px;
|
margin-right: 8px;
|
border-radius: 8px;
|
}
|
.content {
|
padding: 5px 10px;
|
border: 1px solid #ccc;
|
border-radius: 5px;
|
}
|
}
|
.right {
|
@extend .left;
|
justify-content: flex-end;
|
.acl {
|
margin-left: 8px;
|
}
|
}
|
.center {
|
width: 100%;
|
text-align: center;
|
}
|
}
|
}
|
</style>
|
