feat: 内容提交

wl

2022-12-23 475958b9c193fc364b6bf25af05a50e59375d643

 src/views/cause/Group.vue

@@ -1,15 +1,368 @@
<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>

        <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="'http://172.35.1.173:19001/img/'+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>
            </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>


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

<script>
import {
  getName,
  getAllMessage,
  getAllNotice,
  getAllUser,
  setBanSpeech,
  setAllowSpeech,
  setBanSpeechAll,
  getGroupMessage,
  getGroupMessageContext,
  seed,
  //saveSubject
} from '@/api/group'
import { Message } from 'element-ui';

export default {
  name: "Group"
  name: "Group",
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {
      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:
  {
    //群组名称
    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);
    //     },
    handleNodeClick(data) {
      if (data.id != null) {
        this.groupName = data.groupName;
        getAllMessage(data.id).then(res => this.messageList = res)
        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(res => {
        this.$message({
          message: '回复成功',
          type: 'success'
        });
        getAllMessage(this.groupId).then(res => this.messageList = res)
        this.field103 = '';
      }
      )
    },
  },

}
</script>

<style scoped>
* {
  list-style: none;
}

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