一点存 消息管理

一点存消息管理

张金玲

<template>
  <div class="app-container">

    <el-form :inline="true" :model="msgform" class="demo-form-inline" :rules="msgformRules" ref="msgformRef" label-width="120px">

<el-form-item label="发送对象：" class="selectperpon" prop="selname">

<el-select v-model="userid" placeholder="全部用户" filterable multiple size=medium>
<el-option v-for="city in cities" :label="city.userName" :value="city.userId"></el-option>
</el-select>

</el-form-item>

      <div style="margin: 10px 0;"></div>

      <el-form-item  class="selectperpon2" label="发送内容：" prop="textareamsg">
        <el-input prop="textareamsg"
                  type="textarea"
                  placeholder="请输入内容"
                  v-model="msgform.textareamsg"
                  maxlength="99999"
                  show-word-limit
        >
        </el-input>
      </el-form-item>

      <div style="width: 54%;
    text-align: right;">
        <el-button type="primary" @click="onSubmit" style="margin-left: 25px;">立即发送</el-button>
      </div>

    </el-form>

    <section :data="msgtolist">
      <p class="msgtitleasd">消息记录</p>

      <div class="bdfgrs" v-for="gghj in msgtolist">
        <div class="vsdfewss">
          <span>发送对象：{{gghj.userName}}</span>
          <span>发送时间：{{gghj.createTime}}</span>
        </div>
        <div class="vsdfewss2">
          <div class="neirongbody">内容：</div>
          <div>{{gghj.message}}</div>
        </div>
      </div>

    </section>

    <!--分页开始-->
    <div class="block elpagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="queryInfo.pageNo"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize">
      </el-pagination>
    </div>
    <!--分页end-->

  </div>
</template>

<script>
  import request from '@/utils/request';

  export default {
    data() {
      return{
        totalSize: 0,
        queryInfo: {
          query:'',
          pageNo:1,
          pageSize:10
        },
        punish: [],
        // cities: cityOptions,
        cities:[],
        msgformRef:{},
        msgformRules:{
          textareamsg:[
            {required: true, message: '请输入要发送的消息内容', trigger: 'blur'}
          ]
        },
        text: '',
        proxyRange:'',
        selper:[],
        msgtolist:[],
        userid:[],
        message:'',
        msgform: {
         // userid:'208',
          name:'',
          textareamsg: '',
          selectOne:'2',//单选默认值
          selectMultiple:['1'],//多选默认值
        }
      }
    },
    created(){
      this.getMsgList();
    },
    mounted(){
      this.toPer();
    },
    methods: {
      handleSizeChange(newSize){
        console.log(newSize)
        this.queryInfo.pageSize = newSize
        this.getMsgList()
      },
      handleCurrentChange(newPage){
        console.log(newPage)
        this.queryInfo.pageNo = newPage
        this.getMsgList()
      },
      onSubmit() {
        if(this.userid.length == 0){
          this.useridx = "0";
        }else{
          this.useridx = this.userid.join(",");
        }
        // console.log(this.useridx);
        this.$refs.msgformRef.validate(vaild =>{
          if(!vaild) return
          request({
            url: 'lit/protected/lit/admin_message/send',
            method:'get',
            params: {
              user_id: this.useridx,
              message:this.msgform.textareamsg
            },
          }).then((res) => {
            // console.log(res);
            this.$message.success("成功发送消息！")
          })
        });
      },
     //获取用户
      toPer(){
        request({
          url: 'lit/protected/lit/admin_message/findByName',
          method:'get',
          params: {name:this.msgform.chanpinjia,}
        }).then((res) => {
           // console.log(res);
          this.cities = res.list
        })
      },
     //获取消息记录
      getMsgList(){
        request({
          url: 'lit/protected/lit/admin_message/list',
          method:'get'
        }).then((res) => {
          // console.log(res);
          this.msgtolist = res.list
          this.totalSize = res.page.totalSize
        })
      }
    },

  }
</script>

<style scoped>
  .demo-form-inline{    border-bottom: 1px solid #eee;}
  .selectperpon{width: 731px;}
  .selectperpon2{width:733px;}
  .el-select .el-input__inner {
    width: 360px;
  }
  .el-form-item__content{width:100%!important}
  .selectperpon .el-select{width:100%!important}
  /deep/ .el-form--inline .el-form-item__content{width:87%!important}
  /deep/ .el-textarea__inner{height:100px!important}
  .vsdfewss{justify-content: space-between;display:flex;margin-bottom: 10px;}
  .neirongbody{    width: 80px;
    text-align: right;}
  .vsdfewss2{justify-content: flex-start;display:flex;}
  .bdfgrs {
    padding-bottom: 18px;
    padding-top: 18px;
    font-size: 16px;
    border-bottom: 1px solid #eee;
  }
  .msgtitleasd{display: block;
    font-size: 18px;margin-top:26px;
    margin-bottom: 16px;}
  .selectperpon{justify-content: flex-start;display:flex;}
  .selectperpon2{justify-content: flex-start;display:flex;}
  .dsfsdvvv{width:126px;}
</style>