From 3c4d54bcb66d7cec4a35defc999250e200b4fdd2 Mon Sep 17 00:00:00 2001
From: baizonghao <1719256278@qq.com>
Date: 星期四, 25 五月 2023 15:39:37 +0800
Subject: [PATCH] 不予立案
---
src/views/cause/Group.vue | 666 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 661 insertions(+), 5 deletions(-)
diff --git a/src/views/cause/Group.vue b/src/views/cause/Group.vue
index 9e95289..e6d35a0 100644
--- a/src/views/cause/Group.vue
+++ b/src/views/cause/Group.vue
@@ -1,15 +1,671 @@
<template>
- <div>
- 缇ょ粍浜ゆ祦
+ <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"
+ name: "Group",
+ watch: {
+ filterText(val) {
+ this.$refs.tree.filter(val);
+ },
+ // 鐩戝惉灞炴�у璞★紝newValue涓烘柊鐨勫�硷紝涔熷氨鏄敼鍙樺悗鐨勫��
+ visible(newValue, oldValue) {
+ if (newValue) {
+ //鑿滃崟鏄剧ず鐨勬椂鍊�
+ // document.body.addEventListener锛宒ocument.body.removeEventListener瀹冧滑閮芥帴鍙�3涓弬鏁�
+ // ("浜嬩欢鍚�" , "浜嬩欢澶勭悊鍑芥暟" , "甯冨皵鍊�");
+ // 鍦╞ody涓婃坊鍔犱簨浠跺鐞嗙▼搴�
+ 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: '',
+ //缇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: {
+ 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 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;
+}
+
+.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>
--
Gitblit v1.8.0