宣传添加修改

odc.xiaohui

2023-05-24 ca98aec684da949dd1f7d4c1d546aecb1b9f9669

 src/views/cause/Group.vue

@@ -1,116 +1,100 @@
<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">
    <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-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" 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 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 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>

      <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>

@@ -125,21 +109,45 @@
  setBanSpeechAll,
  getGroupMessage,
  getGroupMessageContext,
  seed,
  seed, delmsg,
  //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",
  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,
      count: 0,
      sendBtn: true,
      options: [
        {
          value: '0',
@@ -160,16 +168,14 @@
      groupAnList: [],
      treeData: [{
        groupName: '青羊区公安分局经侦大队',
        children: [
        ]
        children: []
      }],
      treeProps: {
        children: 'children',
        label: 'groupName'
      },
      field103: '',
      queryInfo: {
      },
      queryInfo: {},
      input: '',
      //群成员列表
      tableData: [],
@@ -178,18 +184,57 @@
  created() {
    this.init();
  },
  methods:
  {
  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;
        }
          res => {
            this.treeData[0].children = res;
          }
      )
      var params = window.location.href.split("id=")
      if (params.length != 1) {
        var param = { id: params[1] }
        var param = {id: params[1]}
        this.handleNodeClick(param)

      }
@@ -201,12 +246,60 @@
    //     pick(){
    // this.filterNode(this.filterVal,this.data);
    //     },
    handleNodeClick(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;
        getAllMessage(data.id).then((res) => {
          
        this.userIdAll = data.id

        await getAllMessage(data.id).then((res) => {

          for (let item of res) {
            if (item.pic === '' || item.pic === null) {
            } else {
@@ -215,13 +308,51 @@
              })
            }
          }
          res.map(item => {
            item.remark = null
          })
          this.messageList = res
          debugger

          this.sendBtn = false
        })
        getAllNotice(data.id).then(res => this.groupAnList = res)
        getAllUser(data.id).then(res => this.tableData = res)
        this.groupId = data.id;
        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) {
@@ -233,49 +364,74 @@
    },
    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)
            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)
          }
            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 = '';
      }

      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 = '';

          }
      )
    },
  },
@@ -283,9 +439,102 @@
}
</script>

<style scoped>
<style lang="scss" scoped>
* {
  list-style: none;
}

.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 {
@@ -357,17 +606,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 +639,33 @@
::v-deep(.el-table thead) {
  color: #000000;
}
</style>

.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>