<template>
|
<div>
|
<el-container style="height: 600px; border: 1px solid #eee">
|
<el-aside width="20%" style="background-color: rgb(238, 241, 246)">
|
<el-input placeholder="请输入" v-model="filterText" class="inputleft">
|
<!-- <el-button slot="append" icon="el-icon-search" style="width:10px;" @click="pick"></el-button> -->
|
</el-input>
|
|
<el-tree :data="treeData" :props="treeProps" @node-click="handleNodeClick" :filter-node-method="filterNode"
|
ref="tree"></el-tree>
|
</el-aside>
|
|
<el-container class="container">
|
<el-header style="text-align: left; font-size: 20px;margin-top: 15px">
|
<span>{{ this.groupName }}</span>
|
<el-form :inline="true" :model="queryInfo" class="demo-form-inline">
|
<el-form-item class="select">
|
<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-form-item>
|
<el-form-item class="input">
|
<el-input placeholder="请输入成员或内容" v-model="queryInfo.select"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="search">查询</el-button>
|
</el-form-item>
|
</el-form>
|
</el-header>
|
|
<el-main class="mian1">
|
<ul v-infinite-scroll="load" style="overflow:auto">
|
<li v-for="messageOne in messageList" class="infinite-list-item">
|
<div class="msglist">
|
<img v-if="messageOne.pic != null && messageOne.pic != ''" class="face"
|
:src="messageOne.pic">
|
<img v-if="messageOne.pic == null || messageOne.pic == ''" class="face"
|
src="../../icons/7bedbaa41b1744fbfe0c55b507fd9e28.png">
|
<div class="name">{{ messageOne.userName }} {{ messageOne.ctime }}</div>
|
<div class="message">{{ messageOne.text }}</div>
|
</div>
|
</li>
|
</ul>
|
<!-- <div class="table">
|
<el-table :data="messageList" :show-header="false">
|
<el-table-column prop="userName">
|
</el-table-column>
|
<el-table-column prop="ctime">
|
</el-table-column>
|
<el-table-column prop="text">
|
</el-table-column>
|
</el-table>
|
</div> -->
|
</el-main>
|
</el-container>
|
|
|
<el-container>
|
<el-header style="height: 0px; margin-top: 0px;">
|
</el-header>
|
|
|
|
<el-container class="container1" direction="horizontal">
|
|
|
|
<el-table class="table1" max-height="360" size:medium :data="groupAnList"
|
style="width: 30%;border: 1px solid #eee;">
|
<el-table-column prop="text" label="群公告" style="color:#000000;">
|
</el-table-column>
|
</el-table>
|
<el-table class="table2" max-height="360" :data="tableData" style="width: 20%;border: 1px solid #eee;">
|
<el-table-column prop="userName" label="群成员">
|
|
</el-table-column>
|
<el-table-column>
|
<template slot="header" slot-scope="scope">
|
<el-button size="small" icon="el-icon-turn-off-microphone" type="primary" @click="allBanSpeech">全体禁言
|
</el-button>
|
</template>
|
<template slot-scope="scope">
|
<el-button @click="speech(scope.row.userId, scope.row.banSpeech, scope.row.groupId)" type="text"
|
size="medium">
|
<span v-if="scope.row.banSpeech === 1" style="color:#ff0000">已禁言</span>
|
<span v-else style="color:#ff0000">禁言</span>
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
|
</el-container>
|
|
<el-container class="container2" style="border: 1px solid #eee">
|
<el-header style="text-align:left ; font-size: 15px; height: 10px; width: 100%; margin-top: 10px;">
|
<span>消息回复</span>
|
</el-header>
|
<el-main class="main5">
|
<el-form ref="elForm" size="medium" label-width="100px">
|
<el-form-item style="margin-bottom: 5px;">
|
<el-input v-model="field103" type="textarea" placeholder="请输入多行文本"
|
:autosize="{ minRows: 4, maxRows: 8 }" :style="{ width: '100%' }">
|
</el-input>
|
</el-form-item>
|
</el-form>
|
<el-button style="margin-left: 90%;" size="small" type="primary" @click="seedMessage">提交</el-button>
|
</el-main>
|
</el-container>
|
|
</el-container>
|
</el-container>
|
</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 {
|
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
|
debugger
|
})
|
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 scoped>
|
* {
|
list-style: none;
|
}
|
|
.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>
|
