From 3c1d55fe67cf436de36fd2e7ddc057e26b7a89c9 Mon Sep 17 00:00:00 2001 From: odc.xiaohui <xiaohui@Q1> Date: 星期五, 19 五月 2023 15:12:15 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- src/views/cause/Group.vue | 584 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 579 insertions(+), 5 deletions(-) diff --git a/src/views/cause/Group.vue b/src/views/cause/Group.vue index 9e95289..29d926c 100644 --- a/src/views/cause/Group.vue +++ b/src/views/cause/Group.vue @@ -1,15 +1,589 @@ <template> - <div> - 缇ょ粍浜ゆ祦 + <div class="groupCommunication"> + <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.pic != null && messageOne.pic != ''" :src="messageOne.pic" class="group-img" + > + <img v-if="messageOne.pic == null || messageOne.pic == ''" class="group-img" + src="../../icons/7bedbaa41b1744fbfe0c55b507fd9e28.png"> + <div style="margin-left: 10px">{{ messageOne.userName }} {{ messageOne.ctime }}</div> + </div> + <div + :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, + //saveSubject +} from '@/api/group' +import {Message} from 'element-ui'; +import {getImgUrl} from '@/api/common' + export default { - name: "Group" + name: "Group", + watch: { + filterText(val) { + this.$refs.tree.filter(val); + } + }, + data() { + return { + groupIdlist: null, + timer: '', + userIdAll: 1, + count: 0, + sendBtn: true, + options: [ + { + value: '0', + label: '鎴愬憳' + }, + { + value: '1', + label: '璁板綍' + } + ], + groupName: '缇ょ粍', + filterText: '', + //缇d + 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: { + 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 scoped> +<style lang="scss" scoped> +* { + list-style: none; +} -</style> \ No newline at end of file +.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; +} +</style> -- Gitblit v1.8.0