From 1cc4da26c0dfb93bb3b9800f2c82988cfc4af3d6 Mon Sep 17 00:00:00 2001
From: odc.xiaohui <xiaohui@Q1>
Date: 星期一, 22 五月 2023 11:45:07 +0800
Subject: [PATCH] 群组聊天修改
---
src/views/cause/Group.vue | 89 ++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 85 insertions(+), 4 deletions(-)
diff --git a/src/views/cause/Group.vue b/src/views/cause/Group.vue
index 29d926c..9ac20df 100644
--- a/src/views/cause/Group.vue
+++ b/src/views/cause/Group.vue
@@ -1,5 +1,12 @@
<template>
<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> -->
@@ -25,13 +32,16 @@
<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.flag =='0'" src="../../icons/userman.jpg" class="group-img"
>
- <img v-if="messageOne.pic == null || messageOne.pic == ''" 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>
@@ -99,7 +109,7 @@
setBanSpeechAll,
getGroupMessage,
getGroupMessageContext,
- seed,
+ seed, delmsg,
//saveSubject
} from '@/api/group'
import {Message} from 'element-ui';
@@ -110,10 +120,29 @@
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,
@@ -161,7 +190,36 @@
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
@@ -586,4 +644,27 @@
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