From 752ad6211b54bbf38bf7dfc5c3a572ae3e15b0d4 Mon Sep 17 00:00:00 2001
From: odc.xiaohui <xiaohui@Q1>
Date: 星期五, 03 三月 2023 18:06:47 +0800
Subject: [PATCH] 修改群组交流
---
src/views/cause/Group.vue | 454 ++++++++++++++++++++++++++++++--------------------------
1 files changed, 240 insertions(+), 214 deletions(-)
diff --git a/src/views/cause/Group.vue b/src/views/cause/Group.vue
index 14fc15a..0445560 100644
--- a/src/views/cause/Group.vue
+++ b/src/views/cause/Group.vue
@@ -1,116 +1,78 @@
<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>
+ <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: 569px" 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-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>
+ </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 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>
+ </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>
- <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>
</div>
</template>
@@ -128,8 +90,8 @@
seed,
//saveSubject
} from '@/api/group'
-import { Message } from 'element-ui';
-import { getImgUrl } from '@/api/common'
+import {Message} from 'element-ui';
+import {getImgUrl} from '@/api/common'
export default {
name: "Group",
@@ -140,6 +102,7 @@
},
data() {
return {
+ sendBtn:true,
options: [
{
value: '0',
@@ -160,16 +123,14 @@
groupAnList: [],
treeData: [{
groupName: '闈掔緤鍖哄叕瀹夊垎灞�缁忎睛澶ч槦',
- children: [
- ]
+ children: []
}],
treeProps: {
children: 'children',
label: 'groupName'
},
field103: '',
- queryInfo: {
- },
+ queryInfo: {},
input: '',
//缇ゆ垚鍛樺垪琛�
tableData: [],
@@ -179,115 +140,180 @@
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)
+ {
+ //缇ょ粍鍚嶇О
+ 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)
- }
- )
+ },
+ 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) => {
- }
- if (val2 == 1) {
- setAllowSpeech(val, val3).then(
- res => {
- this.$message({
- message: '鍏佽鍙戣█',
- type: 'success'
- });
- getAllUser(val3).then(res => this.tableData = 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;
}
- )
- }
- },
- seedMessage() {
- seed(this.field103, this.groupId).then(res => {
- this.$message({
- message: '鍥炲鎴愬姛',
- type: 'success'
- });
- getAllMessage(this.groupId).then(res => this.messageList = res)
- this.field103 = '';
- }
- )
- },
- },
+ },
+ 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>
+<style lang="scss" scoped>
* {
list-style: none;
}
+.groupCommunication{
+ display: flex;
+ height: 100%;
+ background-color: #fff;
+ .group-left{
+ width: 300px;
+ }
+ .group-right{
+ margin-left: 10px;
+ border-left: 1px solid #ccc;
+ padding-left: 10px;
+ //flex-grow: 1;
+ .group-right-name{
+ margin-bottom: 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%;
}
@@ -357,17 +383,17 @@
width: 25%;
}
-.table>>>.el-table__row>td {
+.table >>> .el-table__row > td {
/* 鍘婚櫎琛ㄦ牸绾� */
border: none;
}
-.table1>>>.el-table__row>td {
+.table1 >>> .el-table__row > td {
/* 鍘婚櫎琛ㄦ牸绾� */
border: none;
}
-.table2>>>.el-table__row>td {
+.table2 >>> .el-table__row > td {
/* 鍘婚櫎琛ㄦ牸绾� */
border: none;
}
@@ -390,4 +416,4 @@
::v-deep(.el-table thead) {
color: #000000;
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0