修改群组交流

odc.xiaohui

2023-03-03 752ad6211b54bbf38bf7dfc5c3a572ae3e15b0d4

修改群组交流

 package-lock.json

Diff too large

 src/views/Home.vue

@@ -21,20 +21,26 @@
                 :collapse-transition="false"
                 router
                 unique-opene>
          <el-submenu index="/workbench">
<!--          <el-submenu index="/workbench">-->
<!--            <template slot="title">-->
<!--              &lt;!&ndash; 图标 &ndash;&gt;-->
<!--              <i class="el-icon-s-platform"></i>-->
<!--              &lt;!&ndash; 文本 &ndash;&gt;-->
<!--              <span>工作台</span>-->
<!--            </template>-->
<!--            <el-menu-item index="/">-->
<!--              <template slot="title">-->
<!--                <i class="el-icon-menu"></i>-->
<!--                <span>工作台</span>-->
<!--              </template>-->
<!--            </el-menu-item>-->
<!--          </el-submenu>-->
          <el-menu-item index="/workbench">
            <template slot="title">
              <!-- 图标 -->
              <i class="el-icon-s-platform"></i>
              <!-- 文本 -->
              <i class="el-icon-menu"></i>
              <span>工作台</span>
            </template>
            <el-menu-item index="/">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>工作台</span>
              </template>
            </el-menu-item>
          </el-submenu>
          </el-menu-item>
          <el-submenu index="/cause">
            <template slot="title">
              <i class="el-icon-notebook-1"></i>
@@ -110,9 +116,10 @@
        </el-menu>
      </el-aside>
      <!-- 右侧内容主题 -->
      <el-main>
      <el-main style="background-color: #F5FAFF">
        <router-view></router-view>
      </el-main>
      <div style="position: absolute;bottom: 0;right: 50%;color: #ccc">当前版本 v2.1.3</div>
    </el-container>
  </el-container>
</template>
@@ -174,7 +181,7 @@
}

.el-main {
  

}

.iconfont {

 src/views/Login.vue

@@ -2,7 +2,7 @@
  <div class='login_container'>
     <div class="login_span">
      <!-- 头像区域 -->
      <span style="text-align: center;display:block;font-size: 100px;color: #FFFFFF;">青羊经侦后台系统</span>
      <span style="text-align: center;display:block;font-size: 100px;color: #FFFFFF;">青羊经侦管理系统</span>
      </div>
    <div class="login_box">
      <!-- 头像区域 -->

 src/views/cause/Group.vue

@@ -1,116 +1,78 @@
<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">
    <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 v-infinite-scroll="load" style="overflow:auto;height: 569px" 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-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" 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 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 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>

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

@@ -128,8 +90,8 @@
  seed,
  //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",
@@ -140,6 +102,7 @@
  },
  data() {
    return {
      sendBtn:true,
      options: [
        {
          value: '0',
@@ -160,16 +123,14 @@
      groupAnList: [],
      treeData: [{
        groupName: '青羊区公安分局经侦大队',
        children: [
        ]
        children: []
      }],
      treeProps: {
        children: 'children',
        label: 'groupName'
      },
      field103: '',
      queryInfo: {
      },
      queryInfo: {},
      input: '',
      //群成员列表
      tableData: [],
@@ -179,115 +140,180 @@
    this.init();
  },
  methods:
  {
    //群组名称
    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;
              }
          )
          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
          debugger
        })
        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)
          }
        )
        },
        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) => {

      }
      if (val2 == 1) {
        setAllowSpeech(val, val3).then(
          res => {
            this.$message({
              message: '允许发言',
              type: 'success'
            });
            getAllUser(val3).then(res => this.tableData = 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;
          }
        )
      }
    },
    seedMessage() {
      seed(this.field103, this.groupId).then(res => {
        this.$message({
          message: '回复成功',
          type: 'success'
        });
        getAllMessage(this.groupId).then(res => this.messageList = res)
        this.field103 = '';
      }
      )
    },
  },
        },
        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(res => {
                this.$message({
                  message: '回复成功',
                  type: 'success'
                });
                getAllMessage(this.groupId).then(res => this.messageList = 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;
  }
  .group-right{
    margin-left: 10px;
    border-left: 1px solid #ccc;
    padding-left: 10px;
    //flex-grow: 1;
    .group-right-name{
      margin-bottom: 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;
                 }
               }
               .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%;
}
@@ -357,17 +383,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 +416,4 @@
::v-deep(.el-table thead) {
  color: #000000;
}
</style>
</style>

 vue.config.js

@@ -7,7 +7,7 @@
        open: true,
        proxy: {
            '/api': {
                target: 'http://localhost:8080',
                target: 'http://192.168.3.220:8080',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''