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