<template>
|
<div class="site-service">
|
<el-container
|
:style="{
|
height: this.documentClientHeight + 'px',
|
border: '1px solid #eee',
|
}"
|
>
|
<el-aside width="400px" style="background-color: rgb(238, 241, 246)">
|
<!-- 左侧-搜索 -->
|
<el-form :inline="true" :model="dataForm">
|
<el-form-item label="">
|
<el-input
|
v-model="dataForm.search"
|
style="width: 292px"
|
placeholder="Search"
|
clearable
|
></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
type="primary"
|
icon="el-icon-search"
|
size="small"
|
@click="
|
createNewAdminOnlineChatAction({ partyId: dataForm.search })
|
"
|
>查询</el-button
|
>
|
</el-form-item>
|
</el-form>
|
<!-- 左侧-聊天列表 -->
|
<el-card class="box-card">
|
<div
|
v-for="(item, index) in chatUserList"
|
:key="index"
|
class="text item cursor-pointer"
|
@click="openChat(item)"
|
>
|
{{ item ? item.username : "" }}
|
</div>
|
</el-card>
|
</el-aside>
|
<!-- 具体聊天区域 -->
|
<el-container>
|
<el-header style="font-size: 12px; height: 100px">
|
<div style="height: 50px">
|
<span>{{ this.openChatData.username }} </span>
|
<span> UID:{{ this.openChatData.usercode }} </span>
|
<span
|
>账户类型:{{ this.getRoleName(this.openChatData.role_name) }}
|
</span>
|
<span>推荐人:{{ this.openChatData.recom_parent_name }} </span>
|
<span>登录IP:{{ this.openChatData.login_ip }} </span>
|
<el-dropdown style="text-align: right; margin-right: 15px">
|
<i class="el-icon-setting" style="margin-right: 15px"></i>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item>查看</el-dropdown-item>
|
<el-dropdown-item>新增</el-dropdown-item>
|
<el-dropdown-item>删除</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
<div style="height: 50px">
|
<span style="margin-top: 0px"
|
>注册时间:{{ this.openChatData.create_time }}
|
</span>
|
<span style="margin-top: 0px"
|
>最后登录时间:{{ this.openChatData.last_login_time }}
|
</span>
|
</div>
|
</el-header>
|
|
<!-- 聊天内容 -->
|
<el-main>
|
<ul
|
class="infinite-list ulstyle"
|
v-infinite-scroll="load"
|
style="overflow: auto"
|
>
|
<li
|
v-for="(item, index) in tableData"
|
:key="index"
|
class="infinite-list-item ulstyle"
|
>
|
<div>
|
{{ index }}
|
</div>
|
</li>
|
</ul>
|
</el-main>
|
|
<div class="el-main-1">
|
<el-form
|
:model="dataForm"
|
@keyup.enter.native="getDataList(this.page)"
|
>
|
<el-form-item style="width: auto">
|
<el-input
|
type="textarea"
|
placeholder="请输入内容"
|
v-model="dataForm.textarea"
|
maxlength="500"
|
:autosize="{ minRows: 4, maxRows: 4 }"
|
show-word-limit
|
>
|
</el-input>
|
</el-form-item>
|
<el-form-item :inline="true">
|
<el-upload
|
class="upload-demo inline-block"
|
action="https://jsonplaceholder.typicode.com/posts/"
|
:on-preview="handlePreview"
|
:on-remove="handleRemove"
|
:file-list="fileList"
|
list-type="picture"
|
>
|
<el-button size="small" type="primary">点击上传</el-button>
|
</el-upload>
|
|
<el-button
|
@click="clearDatas()"
|
style="margin-left: 10px"
|
size="small"
|
>清空</el-button
|
>
|
<el-button
|
type="primary"
|
icon="el-icon-search"
|
size="small"
|
@click="
|
sendNewAdminOnlineChatAction({
|
type: 'text',
|
content: dataForm.textarea,
|
partyid: openChatData.partyid,
|
send_time_stmp: new Date().getTime(),
|
})
|
"
|
>发送</el-button
|
>
|
</el-form-item>
|
</el-form>
|
</div>
|
</el-container>
|
</el-container>
|
</div>
|
<!-- </main> -->
|
</template>
|
|
<script>
|
import { tableOption } from "@/crud/sys/dapp_change";
|
export default {
|
data() {
|
const item = {
|
date: "2016-05-02",
|
name: "王小虎",
|
address: "上海市普陀区金沙江路 1518 弄",
|
};
|
return {
|
fileList: [],
|
imageUrl: "",
|
dataForm: {},
|
dateRange: [],
|
dataList: [],
|
dataListLoading: false,
|
dataListSelections: [],
|
addOrUpdateVisible: false,
|
tableOption: tableOption,
|
page: {
|
total: 0, // 总页数
|
currentPage: 1, // 当前页数
|
pageSize: 10, // 每页显示多少条1
|
},
|
tableData: [], //Array(20).fill(item),
|
chatUserList: [], //聊天列表
|
openChatData: { username: "123" }, //聊天界面数据
|
};
|
},
|
created() {
|
this.userlistNewAdminOnlineChatAction({});
|
//this.createNewAdminOnlineChatAction({partyId: "test002"})//19b2dbf9f043962a01666f6b64231ce4
|
},
|
components: {
|
// AddOrUpdate
|
},
|
computed: {
|
documentClientHeight: {
|
get() {
|
return this.$store.state.common.documentClientHeight;
|
},
|
set(val) {
|
this.$store.commit("common/updateDocumentClientHeight", val);
|
},
|
},
|
},
|
mounted() {
|
this.resetDocumentClientHeight();
|
},
|
methods: {
|
// 获取数据列表
|
getDataList(page, params, done) {
|
let obj = {
|
current: this.pageIndex,
|
size: this.pageSize,
|
};
|
|
this.dataListLoading = true;
|
this.$http({
|
url: this.$http.adornUrl("/dAppLog/list"),
|
method: "post",
|
data: this.$http.adornData(
|
Object.assign(
|
{
|
current: page == null ? this.page.currentPage : page.currentPage,
|
size: page == null ? this.page.pageSize : page.pageSize,
|
},
|
params
|
)
|
),
|
}).then(({ data }) => {
|
this.dataList = data.data.records;
|
this.page.total = data.total;
|
this.dataListLoading = false;
|
if (done) {
|
done();
|
}
|
});
|
},
|
// 条件查询
|
searchChange(params, done) {
|
this.getDataList(this.page, params, done);
|
},
|
// 多选变化
|
selectionChange(val) {
|
this.dataListSelections = val;
|
},
|
// 新增 / 修改
|
addOrUpdateHandle(id) {
|
this.addOrUpdateVisible = true;
|
this.$nextTick(() => {
|
this.$refs.addOrUpdate.init(id);
|
});
|
},
|
// 删除
|
deleteHandle(id) {
|
var ids = id
|
? [id]
|
: this.dataListSelections.map((item) => {
|
return item.roleId;
|
});
|
this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
this.$http({
|
url: this.$http.adornUrl("/sys/role"),
|
method: "delete",
|
data: this.$http.adornData(ids, false),
|
}).then(({ data }) => {
|
this.$message({
|
message: "操作成功",
|
type: "success",
|
duration: 1500,
|
onClose: () => {
|
this.getDataList();
|
},
|
});
|
});
|
})
|
.catch(() => {});
|
},
|
// 重置窗口可视高度
|
resetDocumentClientHeight() {
|
this.documentClientHeight = document.documentElement["clientHeight"] - 80;
|
window.onresize = () => {
|
this.documentClientHeight =
|
document.documentElement["clientHeight"] - 80;
|
};
|
document.documentElement.clientHeight;
|
},
|
handleAvatarSuccess(res, file) {
|
this.imageUrl = URL.createObjectURL(file.raw);
|
},
|
beforeAvatarUpload(file) {
|
const isJPG = file.type === "image/jpeg";
|
const isLt2M = file.size / 1024 / 1024 < 10;
|
|
if (!isJPG) {
|
this.$message.error("上传头像图片只能是 JPG 格式!");
|
}
|
if (!isLt2M) {
|
this.$message.error("上传头像图片大小不能超过 2MB!");
|
}
|
return isJPG && isLt2M;
|
},
|
handleRemove(file, fileList) {
|
console.log(file, fileList);
|
},
|
handlePreview(file) {
|
console.log(file);
|
},
|
//创建新用户消息列表 /public/newAdminOnlineChatAction!create.action
|
createNewAdminOnlineChatAction(params) {
|
//
|
this.$http({
|
url: this.$http.adornUrl(
|
"/public/newAdminOnlineChatAction!create.action"
|
),
|
method: "get",
|
params: this.$http.adornParams(Object.assign({}, params)),
|
data: this.$http.adornData(Object.assign({}, params)),
|
}).then(({ data }) => {
|
console.log("create data = " + JSON.stringify(data));
|
//this.getUserInfoNewAdminOnlineChatAction({partyId: data.data||""})
|
this.userlistNewAdminOnlineChatAction({});
|
});
|
//
|
},
|
//在线聊天-人员列表 /public/newAdminOnlineChatAction!userlist.action
|
userlistNewAdminOnlineChatAction(params) {
|
//
|
this.$http({
|
url: this.$http.adornUrl(
|
"/public/newAdminOnlineChatAction!userlist.action"
|
),
|
method: "get",
|
params: this.$http.adornParams(Object.assign({}, params)),
|
data: this.$http.adornData(Object.assign({}, params)),
|
}).then(({ data }) => {
|
console.log("openChatData = " + JSON.stringify(data));
|
this.chatUserList = data.data;
|
});
|
//
|
},
|
//聊天记录列表 /public/newAdminOnlineChatAction!list.action
|
listNewAdminOnlineChatAction(params) {
|
//
|
this.$http({
|
url: this.$http.adornUrl(
|
"/public/newAdminOnlineChatAction!list.action"
|
),
|
method: "get",
|
params: this.$http.adornParams(Object.assign({}, params)),
|
data: this.$http.adornData(Object.assign({}, params)),
|
}).then(({ data }) => {
|
console.log("listNewAdminOnlineChatAction = " + JSON.stringify(data));
|
this.tableData = data.data;
|
// listNewAdminOnlineChatAction = {"code":"0","msg":null,"data":
|
// [{"createtime":"04-28 22:37","delete_status":0,"id":"1651958812074172418","type":"text",
|
// "content":"123","send_receive":"receive"}]}
|
});
|
//
|
},
|
//获取用户信息 /public/newAdminOnlineChatAction!getUserInfo.action
|
getUserInfoNewAdminOnlineChatAction(params) {
|
//
|
this.$http({
|
url: this.$http.adornUrl(
|
"/public/newAdminOnlineChatAction!getUserInfo.action"
|
),
|
method: "get",
|
params: this.$http.adornParams(Object.assign({}, params)),
|
data: this.$http.adornData(Object.assign({}, params)),
|
}).then(({ data }) => {
|
console.log("openChatData = " + JSON.stringify(data));
|
this.openChatData = data.data;
|
// $(".t_bz").html(remarks);
|
// $(".usercode").html(res.data.usercode);
|
// $(".recom_parent_name").html(res.data.recom_parent_name);
|
// $(".login_ip").html(res.data.login_ip);
|
// $(".last_login_time").html(res.data.last_login_time);
|
// $(".create_time").html(res.data.create_time);
|
// var role_name = "";
|
// if(!res.data.role_name){
|
// role_name = "游客"
|
// }
|
// if(res.data.role_name=="MEMBER"){
|
// role_name = "正式用户"
|
// }
|
// if(res.data.role_name=="GUEST"){
|
// role_name = "演示用户"
|
// }
|
// if(res.data.role_name=="AGENT"){
|
// role_name = "代理商"
|
// }
|
// if(res.data.role_name=="AGENTLOW"){
|
// role_name = "代理商"
|
// }
|
// $(".role_name").html(role_name);
|
});
|
//
|
},
|
//发送消息 /public/newAdminOnlineChatAction!send.action
|
sendNewAdminOnlineChatAction(params) {
|
this.$http({
|
url: this.$http.adornUrl(
|
"/public/newAdminOnlineChatAction!send.action"
|
),
|
method: "post",
|
params: this.$http.adornParams(Object.assign({}, params)),
|
data: this.$http.adornData(Object.assign({}, params)),
|
}).then(({ data }) => {
|
console.log("sendNewAdminOnlineChatAction = " + JSON.stringify(data));
|
|
this.listNewAdminOnlineChatAction({
|
message_id: "",
|
partyid: params.partyid,
|
show_img: true,
|
});
|
});
|
//
|
},
|
//查询未读消息 /public/newAdminOnlineChatAction!unread.action
|
unreadNewAdminOnlineChatAction() {
|
//
|
this.$http({
|
url: this.$http.adornUrl(
|
"/public/newAdminOnlineChatAction!unread.action"
|
),
|
method: "get",
|
params: this.$http.adornParams(Object.assign({}, params)),
|
data: this.$http.adornData(Object.assign({}, params)),
|
}).then(({ data }) => {
|
console.log("data = " + JSON.stringify(data));
|
});
|
//
|
},
|
//删除聊天会话 /public/newAdminOnlineChatAction!del.action
|
delNewAdminOnlineChatAction() {
|
//
|
this.$http({
|
url: this.$http.adornUrl("/public/newAdminOnlineChatAction!del.action"),
|
method: "get",
|
params: this.$http.adornParams(Object.assign({}, params)),
|
data: this.$http.adornData(Object.assign({}, params)),
|
}).then(({ data }) => {
|
console.log("data = " + JSON.stringify(data));
|
});
|
//
|
},
|
//后台客服撤回消息操作 /public/newAdminOnlineChatAction!deleteOnlineChatMessage.action
|
deleteOnlineChatMessageNewAdminOnlineChatAction() {
|
//
|
this.$http({
|
url: this.$http.adornUrl(
|
"/public/newAdminOnlineChatAction!deleteOnlineChatMessage.action"
|
),
|
method: "get",
|
params: this.$http.adornParams(Object.assign({}, params)),
|
data: this.$http.adornData(Object.assign({}, params)),
|
}).then(({ data }) => {
|
console.log("data = " + JSON.stringify(data));
|
});
|
//
|
},
|
//设置用户备注 /public/newAdminOnlineChatAction!resetRemarks.action
|
resetRemarksNewAdminOnlineChatAction() {
|
//
|
this.$http({
|
url: this.$http.adornUrl(
|
"/public/newAdminOnlineChatAction!resetRemarks.action"
|
),
|
method: "get",
|
params: this.$http.adornParams(Object.assign({}, params)),
|
data: this.$http.adornData(Object.assign({}, params)),
|
}).then(({ data }) => {
|
console.log("data = " + JSON.stringify(data));
|
});
|
//
|
},
|
//打开界面
|
openChat(item) {
|
console.log("openChat = " + JSON.stringify(item));
|
this.openChatData = item;
|
|
this.listNewAdminOnlineChatAction({
|
message_id: "",
|
partyid: this.openChatData.partyid,
|
show_img: true,
|
});
|
|
// {
|
// "code": "0",
|
// "msg": null,
|
// "data": [{
|
// "uid": "3987708",
|
// "order_updatetime": "2023-04-28 11:49:15",
|
// "id": "1651617518311227393",
|
// "partyid": "19b2dbf9f043962a01666f6b64231ce4",
|
// "updatetime": "04-28 11:49",
|
// "remarks": null,
|
// "content": "",
|
// "username": "test002",
|
// "unreadmsg": null
|
// }]
|
// }
|
},
|
getRoleName(name) {
|
let role_name = "游客";
|
if (name == "MEMBER") {
|
role_name = "正式用户";
|
}
|
if (name == "GUEST") {
|
role_name = "演示用户";
|
}
|
if (name == "AGENT") {
|
role_name = "代理商";
|
}
|
if (name == "AGENTLOW") {
|
role_name = "代理商";
|
}
|
return role_name;
|
},
|
load() {
|
this.count += 2;
|
},
|
},
|
};
|
</script>
|
|
<style>
|
.site-service {
|
position: relative;
|
padding: 15px;
|
}
|
|
.el-header {
|
background-color: #b3c0d1;
|
color: #333;
|
line-height: 60px;
|
}
|
|
.el-aside {
|
color: #333;
|
}
|
|
.el-main-0 {
|
}
|
|
.el-main-1 {
|
display: block;
|
-webkit-box-flex: 1;
|
-ms-flex: 1;
|
flex: 1;
|
-ms-flex-preferred-size: auto;
|
/* flex-basis:auto; */
|
/* overflow:auto; */
|
/* box-sizing:border-box; */
|
padding-top: 10px;
|
padding-left: 20px;
|
}
|
|
.avatar-uploader .el-upload {
|
border: 1px dashed #d9d9d9;
|
border-radius: 6px;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
}
|
.avatar-uploader .el-upload:hover {
|
border-color: #409eff;
|
}
|
.avatar-uploader-icon {
|
font-size: 28px;
|
color: #8c939d;
|
width: 78px;
|
height: 78px;
|
line-height: 78px;
|
text-align: center;
|
}
|
.avatar {
|
width: 78px;
|
height: 78px;
|
display: block;
|
}
|
|
.inline-block {
|
display: inline-block;
|
}
|
|
.text {
|
font-size: 14px;
|
}
|
|
.item {
|
padding: 18px 0;
|
}
|
|
.box-card {
|
width: 480px;
|
}
|
|
.cursor-pointer {
|
cursor: pointer;
|
}
|
|
.ulstyle ul {
|
list-style: none;
|
}
|
</style>
|
