默认变更列表

odc.xiaohui

2023-05-19 9e5b5870c755a7e89d12e80ef7b811f2439bd8b6

默认变更列表

 src/views/Home.vue

@@ -88,18 +88,18 @@
                <span>警方公告</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/question">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>常见问题</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/sensitive">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>敏感词</span>
              </template>
            </el-menu-item>
<!--            <el-menu-item index="/question">-->
<!--              <template slot="title">-->
<!--                <i class="el-icon-menu"></i>-->
<!--                <span>常见问题</span>-->
<!--              </template>-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="/sensitive">-->
<!--              <template slot="title">-->
<!--                <i class="el-icon-menu"></i>-->
<!--                <span>敏感词</span>-->
<!--              </template>-->
<!--            </el-menu-item>-->
          </el-submenu>
          <el-submenu index="/manager">
            <template slot="title">

 src/views/cause/Group.vue

@@ -1,7 +1,7 @@
<template>
  <div class="groupCommunication">
    <div class="group-left">
      <el-input v-model="filterText" suffix-icon="el-icon-search" class="inputleft" placeholder="请输入">
      <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"
@@ -14,59 +14,71 @@
      <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 style="margin-left: 5px" v-model="queryInfo.select" placeholder="请输入成员或内容"></el-input>
           <el-button style="margin-left: 5px" type="primary" @click="search">搜索</el-button>
         </div>
            <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  style="overflow:auto;height: 558px" class="group-right-left-seach-body-box-ul">
              <li v-for="messageOne in messageList" class="group-right-left-seach-body-box-li" >
                 <div class="group-right-left-seach-body-box-imgmessage">
                   <img class="group-img" v-if="messageOne.pic != null && messageOne.pic != ''" :src="messageOne.pic"
                        >
                   <img class="group-img" v-if="messageOne.pic == null || messageOne.pic == ''"
                        src="../../icons/7bedbaa41b1744fbfe0c55b507fd9e28.png">
                   <div style="margin-left: 10px" >{{ messageOne.userName }} {{ messageOne.ctime }}</div>
                 </div>
                  <div :class="messageOne.remark!==null?'activemess':'group-right-left-seach-body-box-text' " >{{ messageOne.text }}</div>
            <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">
          <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" style="text-align: right" size="mini"  type="primary" @click="seedMessage">发送</el-button>
              <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>
            <div>
              群公告
            </div>
            <li v-for="(item,index) in groupAnList" :key="index">
             群公告： {{item.text}}
              群公告： {{ 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">
            <div
                style="display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #ccc;padding: 0 10px">
              <span>群成员</span>
              <el-button style="color: #0086b3;margin-right: 10px" icon="el-icon-turn-off-microphone" type="text" @click="allBanSpeech">全体禁言</el-button>
              <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>
              {{ 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>
@@ -102,8 +114,11 @@
  },
  data() {
    return {
      groupIdlist: null,
      timer: '',
      userIdAll: 1,
      count: 0,
      sendBtn:true,
      sendBtn: true,
      options: [
        {
          value: '0',
@@ -140,6 +155,12 @@
  created() {
    this.init();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  mounted() {
    this.timer = setInterval(this.setHand, 5000)
  },
  methods: {
    load() {

@@ -147,142 +168,215 @@
    },

    //群组名称
        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)

    init() {
      getName().then(
          res => {
            this.treeData[0].children = res;
          }
        },
        filterNode(value, data) {
          if (!value) return true;
          return data.groupName.indexOf(value) !== -1;
        },
        //     pick(){
        // this.filterNode(this.filterVal,this.data);
        //     },
       async handleNodeClick(data) {
          if (data.id != null) {
            this.groupName = data.groupName;
            var _this = this;
           await getAllMessage(data.id).then((res) => {
      )
      var params = window.location.href.split("id=")
      if (params.length != 1) {
        var param = {id: params[1]}
        this.handleNodeClick(param)

              for (let item of res) {
                if (item.pic === '' || item.pic === null) {
                } else {
                  getImgUrl(item.pic).then(res => {
                    item.pic = res
                  })
                }
      }
    },
    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
              }
              res.map(item=>{
                item.remark=null
            }
          }
          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

              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(res)

            })
            console.log(this.messageList)
            this.groupId = data.id;
          }
        },
        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)
                }
            )
            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 = '';

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

                // for (let item of this.messageList) {
                //   if (item.pic === '' || item.pic === null) {
                //   } else {
                //     getImgUrl(item.pic).then(res => {
                //       item.pic = res
                //     })
                //   }
                // }

                this.field103 = '';
              }
          )
        },
      },
      )
    },
  },

}
</script>
@@ -291,83 +385,100 @@
* {
  list-style: none;
}
.groupCommunication{

.groupCommunication {
  display: flex;
  height: 100%;
  background-color: #fff;
  .group-left{

  .group-left {
    width: 300px;
    .inputleft{

    .inputleft {
      margin-top: 10px;
      margin-left: 5px;
    }
  }
  .group-right{

  .group-right {
    margin-left: 10px;
    border-left: 1px solid #ccc;
    padding-left: 10px;
    background-color: #fff;
    //flex-grow: 1;
    .group-right-name{
    .group-right-name {
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: 900;
      margin-top: 10px;
    }
    .group-right-box{

    .group-right-box {
      display: flex;
      .group-right-left-seach{

      .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 {
          display: flex;

        }
        .group-right-left-seach-body-box-reply{

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

          ::v-deep .el-textarea__inner {
            border: none;
            resize: none;
          }
        }

      }
      .group-right-box-ul{

      .group-right-box-ul {
        border: 1px solid #ccc;
        margin-left: 15px;
        width: 420px;
        overflow: auto;
        .group-right-box-ul-title{

        .group-right-box-ul-title {
          padding: 0;
        }
        .group-right-box-ul-title>li{
         margin-top: 10px;

        .group-right-box-ul-title > li {
          margin-top: 10px;
        }
      }
    }
  }
}

.container {
  width: 34%;
}
@@ -437,17 +548,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;
}
@@ -470,7 +581,8 @@
::v-deep(.el-table thead) {
  color: #000000;
}
.activemess{

.activemess {
  margin-left: 35px;
  color: red;
}