<template>
|
<div class="groupCommunication">
|
<ul
|
v-show="visible"
|
:style="{ left: left + 'px', top: top + 'px' }"
|
class="contextmenu"
|
>
|
<li @click="deletemsg">删除</li>
|
</ul>
|
<div class="group-left">
|
<el-input v-model="filterText" class="inputleft" placeholder="请输入" suffix-icon="el-icon-search">
|
<!-- <el-button slot="append" icon="el-icon-search" style="width:10px;" @click="pick"></el-button> -->
|
</el-input>
|
<el-tree ref="tree" :data="treeData" :filter-node-method="filterNode" :props="treeProps"
|
@node-click="handleNodeClick"></el-tree>
|
</div>
|
<div class="group-right">
|
<div class="group-right-name">
|
{{ this.groupName }}
|
</div>
|
<div class="group-right-box">
|
<div class="group-right-left-seach">
|
<div class="group-right-left-seach-body">
|
<el-select v-model="queryInfo.status" placeholder="请选择">
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
<el-input v-model="queryInfo.select" placeholder="请输入成员或内容" style="margin-left: 5px"></el-input>
|
<el-button style="margin-left: 5px" type="primary" @click="search">搜索</el-button>
|
</div>
|
<div class="group-right-left-seach-body-box">
|
<ul id="container" class="group-right-left-seach-body-box-ul" style="overflow:auto;height: 558px">
|
<li v-for="messageOne in messageList" class="group-right-left-seach-body-box-li">
|
<div class="group-right-left-seach-body-box-imgmessage">
|
<img v-if="messageOne.flag =='0'" src="../../icons/userman.jpg" class="group-img"
|
>
|
<img v-else-if="messageOne.flag =='1'" class="group-img"
|
src="../../icons/userlady.jpg">
|
<img v-else class="group-img"
|
src="../../icons/7bedbaa41b1744fbfe0c55b507fd9e28.png">
|
<div style="margin-left: 10px">{{ messageOne.userName }} {{ messageOne.ctime }}</div>
|
</div>
|
<div
|
@contextmenu.prevent="openMenu($event,messageOne.messageId)"
|
:class="messageOne.remark!==null&&messageOne.remark!==undefined?'activemess':'group-right-left-seach-body-box-text' ">
|
{{ messageOne.text }}
|
</div>
|
</li>
|
</ul>
|
</div>
|
<div class="group-right-left-seach-body-box-reply">
|
<span style="margin-left: 15px">消息回复</span>
|
<el-input v-model="field103" :autosize="{ minRows: 4, maxRows: 8 }" :style="{ width: '100%' }"
|
placeholder="请输入回复信息" type="textarea">
|
|
</el-input>
|
<div style="text-align: right">
|
<el-button :disabled="sendBtn" size="mini" style="text-align: right" type="primary" @click="seedMessage">
|
发送
|
</el-button>
|
</div>
|
</div>
|
</div>
|
<div class="group-right-box-ul">
|
<ul class="group-right-box-ul-title" style="padding: 0 10px">
|
<div>
|
群公告
|
</div>
|
<li v-for="(item,index) in groupAnList" :key="index">
|
群公告： {{ item.text }}
|
</li>
|
</ul>
|
</div>
|
|
<div class="group-right-box-ul">
|
<ul class="group-right-box-ul-title" style="margin: 0">
|
<div
|
style="display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #ccc;padding: 0 10px">
|
<span>群成员</span>
|
<el-button icon="el-icon-turn-off-microphone" style="color: #0086b3;margin-right: 10px" type="text"
|
@click="allBanSpeech">全体禁言
|
</el-button>
|
</div>
|
<li v-for="(item,index) in tableData" :key="index" style="padding: 0 10px">
|
{{ item.userName }}
|
<el-button v-if="item.banSpeech==0" style="color: red" type="text"
|
@click="speech(item.userId, item.banSpeech, item.groupId)">禁言
|
</el-button>
|
<el-button v-if="item.banSpeech==1" style="color: green" type="text"
|
@click="speech(item.userId, item.banSpeech, item.groupId)">允许发言
|
</el-button>
|
</li>
|
</ul>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getName,
|
getAllMessage,
|
getAllNotice,
|
getAllUser,
|
setBanSpeech,
|
setAllowSpeech,
|
setBanSpeechAll,
|
getGroupMessage,
|
getGroupMessageContext,
|
seed, delmsg,
|
//saveSubject
|
} from '@/api/group'
|
import {Message} from 'element-ui';
|
import {getImgUrl} from '@/api/common'
|
|
export default {
|
name: "Group",
|
watch: {
|
filterText(val) {
|
this.$refs.tree.filter(val);
|
},
|
// 监听属性对象，newValue为新的值，也就是改变后的值
|
visible(newValue, oldValue) {
|
if (newValue) {
|
//菜单显示的时候
|
// document.body.addEventListener，document.body.removeEventListener它们都接受3个参数
|
// ("事件名" , "事件处理函数" , "布尔值");
|
// 在body上添加事件处理程序
|
document.body.addEventListener("click", this.closeMenu);
|
} else {
|
//菜单隐藏的时候
|
// 移除body上添加的事件处理程序
|
document.body.removeEventListener("click", this.closeMenu);
|
}
|
},
|
|
},
|
data() {
|
return {
|
delId:null,
|
visible: false,
|
top: 0,
|
left: 0,
|
groupIdlist: null,
|
timer: '',
|
userIdAll: 1,
|
count: 0,
|
sendBtn: true,
|
options: [
|
{
|
value: '0',
|
label: '成员'
|
},
|
{
|
value: '1',
|
label: '记录'
|
}
|
],
|
groupName: '群组',
|
filterText: '',
|
//群id
|
groupId: null,
|
//消息列表
|
messageList: [],
|
//群公告列表
|
groupAnList: [],
|
treeData: [{
|
groupName: '青羊区公安分局经侦大队',
|
children: []
|
}],
|
treeProps: {
|
children: 'children',
|
label: 'groupName'
|
},
|
field103: '',
|
queryInfo: {},
|
input: '',
|
//群成员列表
|
tableData: [],
|
}
|
},
|
created() {
|
this.init();
|
},
|
beforeDestroy() {
|
clearInterval(this.timer);
|
},
|
mounted() {
|
this.timer = setInterval(this.setHand, 5000)
|
},
|
|
methods: {
|
deletemsg(){
|
console.log('删除消息！')
|
let obj={
|
id:this.delId
|
}
|
delmsg(this.delId).then(res=>{
|
console.log(res)
|
this.$message.success(res)
|
this.handleNodeClick(this.groupIdlist)
|
})
|
},
|
//右击
|
openMenu(e,id) {
|
console.log(e,id)
|
clearInterval(this.timer);
|
this.delId = id
|
var x = e.pageX; //这个应该是相对于整个浏览器页面的x坐标，左上角为坐标原点（0,0）
|
var y = e.pageY; //这个应该是相对于整个浏览器页面的y坐标，左上角为坐标原点（0,0）
|
this.top = y;
|
this.left = x;
|
this.visible = true; //显示菜单
|
|
},
|
//关闭菜单
|
closeMenu() {
|
this.visible = false; //关闭菜单
|
this.timer = setInterval(this.setHand, 5000)
|
},
|
load() {
|
|
this.count += 2
|
},
|
|
//群组名称
|
init() {
|
getName().then(
|
res => {
|
this.treeData[0].children = res;
|
}
|
)
|
var params = window.location.href.split("id=")
|
if (params.length != 1) {
|
var param = {id: params[1]}
|
this.handleNodeClick(param)
|
|
}
|
},
|
filterNode(value, data) {
|
if (!value) return true;
|
return data.groupName.indexOf(value) !== -1;
|
},
|
// pick(){
|
// this.filterNode(this.filterVal,this.data);
|
// },
|
setHand() {
|
if (this.groupIdlist) {
|
this.handleNodeClick(this.groupIdlist)
|
} else {
|
return
|
}
|
},
|
async getListGro(data) {
|
console.log(data)
|
await getAllMessage(data.id).then((res) => {
|
|
for (let item of res) {
|
if (item.pic === '' || item.pic === null) {
|
} else {
|
getImgUrl(item.pic).then(res => {
|
item.pic = res
|
})
|
}
|
}
|
res.map(item => {
|
item.remark = null
|
})
|
this.messageList = res
|
|
this.sendBtn = false
|
})
|
await getAllNotice(data.id).then(res => this.groupAnList = res)
|
await getAllUser(data.id).then(res => {
|
console.log(this.messageList)
|
console.log(res)
|
|
for (let i = 0; i < this.messageList.length; i++) {
|
for (let j = 0; j < res.length; j++) {
|
if (this.messageList[i].userName == res[j].userName) {
|
this.messageList[i].remark = res[j].remark
|
}
|
}
|
}
|
this.tableData = res
|
|
})
|
this.scrollHeight()
|
},
|
async handleNodeClick(data) {
|
console.log(data)
|
this.groupIdlist = data
|
this.groupId = data.id;
|
if (data.id != null) {
|
this.groupName = data.groupName;
|
var _this = this;
|
this.userIdAll = data.id
|
|
await getAllMessage(data.id).then((res) => {
|
|
for (let item of res) {
|
if (item.pic === '' || item.pic === null) {
|
} else {
|
getImgUrl(item.pic).then(res => {
|
item.pic = res
|
})
|
}
|
}
|
res.map(item => {
|
item.remark = null
|
})
|
this.messageList = res
|
|
this.sendBtn = false
|
})
|
await getAllNotice(data.id).then(res => this.groupAnList = res)
|
await getAllUser(data.id).then(res => {
|
console.log(this.messageList)
|
console.log(res)
|
|
for (let i = 0; i < this.messageList.length; i++) {
|
for (let j = 0; j < res.length; j++) {
|
if (this.messageList[i].userName == res[j].userName) {
|
this.messageList[i].remark = res[j].remark
|
}
|
}
|
}
|
this.tableData = res
|
|
})
|
console.log(this.messageList)
|
this.scrollHeight()
|
}
|
|
},
|
async getAlluserList(id) {
|
await getAllUser(this.userIdAll).then(res => {
|
|
console.log(res)
|
for (let i = 0; i < this.messageList.length; i++) {
|
for (let j = 0; j < res.length; j++) {
|
if (this.messageList[i].userName == res[j].userName) {
|
this.messageList[i].remark = res[j].remark
|
}
|
}
|
}
|
this.tableData = res
|
console.log(this.messageList)
|
})
|
},
|
scrollHeight(){
|
let message = document.getElementById('container');
|
message.scrollTop = message.scrollHeight;
|
},
|
search() {
|
if (this.queryInfo.status == 0) {
|
getGroupMessage(this.queryInfo, this.groupId).then(res => this.messageList = res)
|
}
|
if (this.queryInfo.status == 1) {
|
getGroupMessageContext(this.queryInfo, this.groupId).then(res => this.messageList = res)
|
}
|
},
|
allBanSpeech() {
|
setBanSpeechAll(this.groupId).then(
|
res => {
|
this.$message({
|
message: '禁言成功',
|
type: 'success'
|
});
|
getAllUser(this.groupId).then(res => this.tableData = res)
|
}
|
)
|
},
|
speech(val, val2, val3) {
|
if (val2 == 0) {
|
setBanSpeech(val, val3).then(
|
res => {
|
this.$message({
|
message: '禁言成功',
|
type: 'success'
|
});
|
getAllUser(val3).then(res => this.tableData = res)
|
}
|
)
|
|
}
|
if (val2 == 1) {
|
setAllowSpeech(val, val3).then(
|
res => {
|
this.$message({
|
message: '允许发言',
|
type: 'success'
|
});
|
getAllUser(val3).then(res => this.tableData = res)
|
}
|
)
|
}
|
},
|
seedMessage() {
|
|
seed(this.field103, this.groupId).then(async res => {
|
this.$message({
|
message: '回复成功',
|
type: 'success'
|
});
|
await getAllMessage(this.groupId).then(res => {
|
res.map(item => {
|
if (item.pic === '' || item.pic === null) {
|
|
} else {
|
item.pic = '/minio/img/' + item.pic
|
}
|
|
})
|
this.messageList = res
|
// console.log(res)
|
|
})
|
this.getAlluserList()
|
this.scrollHeight()
|
// for (let item of this.messageList) {
|
// if (item.pic === '' || item.pic === null) {
|
// } else {
|
// getImgUrl(item.pic).then(res => {
|
// item.pic = res
|
// })
|
// }
|
// }
|
|
this.field103 = '';
|
|
}
|
)
|
},
|
},
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
* {
|
list-style: none;
|
}
|
|
.groupCommunication {
|
display: flex;
|
height: 100%;
|
background-color: #fff;
|
|
.group-left {
|
width: 300px;
|
|
.inputleft {
|
margin-top: 10px;
|
margin-left: 5px;
|
}
|
}
|
|
.group-right {
|
margin-left: 10px;
|
border-left: 1px solid #ccc;
|
padding-left: 10px;
|
background-color: #fff;
|
//flex-grow: 1;
|
.group-right-name {
|
margin-bottom: 10px;
|
font-size: 16px;
|
font-weight: 900;
|
margin-top: 10px;
|
}
|
|
.group-right-box {
|
display: flex;
|
|
.group-right-left-seach {
|
width: 420px;
|
|
.group-right-left-seach-body {
|
display: flex;
|
|
}
|
|
.group-right-left-seach-body-box {
|
.group-right-left-seach-body-box-ul {
|
.group-right-left-seach-body-box-li {
|
margin-top: 15px;
|
|
.group-right-left-seach-body-box-imgmessage {
|
display: flex;
|
color: #ccc;
|
|
.group-img {
|
width: 25px;
|
height: 25px;
|
border-radius: 100px;
|
|
}
|
}
|
|
.group-right-left-seach-body-box-text {
|
margin-left: 35px;
|
}
|
}
|
}
|
|
}
|
|
.group-right-left-seach-body-box-reply {
|
padding: 10px;
|
border: 1px solid #ccc;
|
|
::v-deep .el-textarea__inner {
|
border: none;
|
resize: none;
|
}
|
}
|
|
}
|
|
.group-right-box-ul {
|
border: 1px solid #ccc;
|
margin-left: 15px;
|
width: 420px;
|
overflow: auto;
|
|
.group-right-box-ul-title {
|
padding: 0;
|
}
|
|
.group-right-box-ul-title > li {
|
margin-top: 10px;
|
}
|
}
|
}
|
}
|
}
|
|
.container {
|
width: 34%;
|
}
|
|
.container1 {
|
width: 98%;
|
height: 60%;
|
margin-top: 8%;
|
margin-left: 2%;
|
}
|
|
.container2 {
|
width: 100%;
|
height: 30%;
|
margin-top: 2%;
|
margin-left: 2%;
|
}
|
|
.msglist {
|
margin-bottom: 3%;
|
}
|
|
.face {
|
float: left;
|
width: 25px;
|
height: 25px;
|
border-radius: 50%;
|
}
|
|
.name {
|
float: right;
|
margin-right: 43%;
|
color: #7F7F7F;
|
font-size: 14px;
|
}
|
|
.message {
|
margin-top: 2%;
|
}
|
|
.mian1 {
|
margin-top: 20px;
|
}
|
|
.mian4 {
|
margin-top: 0px;
|
width: 24%;
|
}
|
|
.mian2 {
|
width: 38%;
|
margin-top: 0px;
|
margin-right: 2%;
|
}
|
|
.table1 {
|
width: 360px;
|
margin-top: 0px;
|
margin-right: 2%;
|
}
|
|
.table2 {
|
margin-top: 0px;
|
}
|
|
.select {
|
width: 25%;
|
}
|
|
.table > > > .el-table__row > td {
|
/* 去除表格线 */
|
border: none;
|
}
|
|
.table1 > > > .el-table__row > td {
|
/* 去除表格线 */
|
border: none;
|
}
|
|
.table2 > > > .el-table__row > td {
|
/* 去除表格线 */
|
border: none;
|
}
|
|
.mian5 {
|
margin-top: 0px;
|
width: 100%;
|
height: 30%;
|
}
|
|
.input {
|
width: 49%;
|
}
|
|
.button {
|
margin-right: 50px;
|
size: small;
|
}
|
|
::v-deep(.el-table thead) {
|
color: #000000;
|
}
|
|
.activemess {
|
margin-left: 35px;
|
color: red;
|
}
|
|
.contextmenu {
|
margin: 0;
|
background: #fff;
|
z-index: 3000;
|
position: fixed; //关键样式设置固定定位
|
list-style-type: none;
|
padding: 5px 0;
|
border-radius: 4px;
|
font-size: 12px;
|
font-weight: 400;
|
color: #333;
|
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
|
}
|
|
.contextmenu li {
|
margin: 0;
|
padding: 7px 16px;
|
cursor: pointer;
|
}
|
.contextmenu li:hover {
|
background: #eee;
|
}
|
</style>
|
