修改群组交流

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">
            <template slot="title">
              <!-- 图标 -->
              <i class="el-icon-s-platform"></i>
              <!-- 文本 -->
              <span>工作台</span>
            </template>
            <el-menu-item index="/">
<!--          <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-menu"></i>
                <span>工作台</span>
              </template>
            </el-menu-item>
          </el-submenu>
          <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>

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

      </el-container>
    </el-container>
        <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>

@@ -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: [],
@@ -216,7 +177,7 @@
            }
          }
          this.messageList = res
          debugger
              this.sendBtn=false
        })
        getAllNotice(data.id).then(res => this.groupAnList = res)
        getAllUser(data.id).then(res => this.tableData = res)
@@ -283,11 +244,76 @@
}
</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%;
}

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