<template>
|
<div class="groupCommunication">
|
<div class="group-left">
|
<el-input v-model="filterText" suffix-icon="el-icon-search" class="inputleft" placeholder="请输入">
|
<!-- <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 style="margin-left: 5px" v-model="queryInfo.select" placeholder="请输入成员或内容"></el-input>
|
<el-button style="margin-left: 5px" type="primary" @click="search">搜索</el-button>
|
</div>
|
<div class="group-right-left-seach-body-box">
|
<ul v-infinite-scroll="load" style="overflow:auto;height: 558px" class="group-right-left-seach-body-box-ul">
|
<li v-for="messageOne in messageList" class="group-right-left-seach-body-box-li" >
|
<div class="group-right-left-seach-body-box-imgmessage">
|
<img class="group-img" v-if="messageOne.pic != null && messageOne.pic != ''" :src="messageOne.pic"
|
>
|
<img class="group-img" v-if="messageOne.pic == null || messageOne.pic == ''"
|
src="../../icons/7bedbaa41b1744fbfe0c55b507fd9e28.png">
|
<div style="margin-left: 10px">{{ messageOne.userName }} {{ messageOne.ctime }}</div>
|
</div>
|
<div class="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" style="text-align: right" size="mini" 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 style="color: #0086b3;margin-right: 10px" icon="el-icon-turn-off-microphone" 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,
|
//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);
|
}
|
},
|
data() {
|
return {
|
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();
|
},
|
methods:
|
{
|
//群组名称
|
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);
|
// },
|
handleNodeClick(data) {
|
if (data.id != null) {
|
this.groupName = data.groupName;
|
var _this = this;
|
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
|
})
|
}
|
}
|
this.messageList = res
|
this.sendBtn=false
|
})
|
getAllNotice(data.id).then(res => this.groupAnList = res)
|
getAllUser(data.id).then(res => this.tableData = res)
|
this.groupId = data.id;
|
}
|
},
|
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(res => {
|
this.$message({
|
message: '回复成功',
|
type: 'success'
|
});
|
getAllMessage(this.groupId).then(res => this.messageList = 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;
|
}
|
}
|
.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;
|
}
|
</style>
|
