src/api/common.js

@@ -36,4 +36,4 @@
        method: 'post',
        data: params
    })
}
}

 src/api/group.js

@@ -45,14 +45,14 @@
    return request({
        url: '/group/allowSpeech?id='+params+"&&groupId="+param1,
        method: 'put',
        

    })
}

export function setBanSpeechAll(params) {
    return request({
        url: '/group/banSpeechAll?id='+params,
        method: 'put',        
        method: 'put',
    })
}

@@ -75,4 +75,10 @@
        url: '/group/sendMessage?text='+param+'&id='+param1,
        method: 'get',
    })
}
}
export function delmsg(param) {
    return request({
        url: '/message/deleteById?id='+param,
        method: 'delete',
    })
}

 src/icons/userlady.jpg

 src/icons/userman.jpg

 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，document.body.removeEventListener它们都接受3个参数
        // ("事件名" , "事件处理函数" , "布尔值");
        // 在body上添加事件处理程序
        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>

 vue.config.js

@@ -7,8 +7,8 @@
        open: true,
        proxy: {
            '/api': {
                // target: 'http://192.168.3.220:8080',
                target: 'https://qyqjzdd.cdqingyang.gov.cn/qyjz',
                target: 'http://192.168.3.220:8080',
                // target: 'https://qyqjzdd.cdqingyang.gov.cn/qyjz',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''