修改警方公告

odc.xiaohui

2023-04-14 15fccc0a1fedf1244516b108a4dc8a8acdfa3c7c

 src/views/cause/Group.vue

@@ -1,15 +1,457 @@
<template>
  <div>
    群组交流
  <div class="groupCommunication">
    <div class="group-left">
      <el-input v-model="filterText" suffix-icon="el-icon-search" class="inputleft" placeholder="请输入">
        <!-- <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 style="margin-left: 5px" v-model="queryInfo.select" placeholder="请输入成员或内容"></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="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" style="text-align: right" size="mini"  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 style="color: #0086b3;margin-right: 10px" icon="el-icon-turn-off-microphone" 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,
  //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);
    }
  },
  data() {
    return {
      count: 0,
      sendBtn:true,
      options: [
        {
          value: '0',
          label: '成员'
        },
        {
          value: '1',
          label: '记录'
        }
      ],
      groupName: '群组',
      filterText: '',
      //群id
      groupId: null,
      //消息列表
      messageList: [],
      //群公告列表
      groupAnList: [],
      treeData: [{
        groupName: '青羊区公安分局经侦大队',
        children: []
      }],
      treeProps: {
        children: 'children',
        label: 'groupName'
      },
      field103: '',
      queryInfo: {},
      input: '',
      //群成员列表
      tableData: [],
    }
  },
  created() {
    this.init();
  },
  methods: {
    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);
        //     },
        handleNodeClick(data) {
          if (data.id != null) {
            this.groupName = data.groupName;
            var _this = this;
            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
                  })
                }
              }
              this.messageList = res

              this.sendBtn=false
            })
            getAllNotice(data.id).then(res => this.groupAnList = res)
            getAllUser(data.id).then(res => this.tableData = res)
            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)
                }
            )

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

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

</style>
                }
          .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;
}
</style>