<template>
|
<page-header-wrapper>
|
<a-card :bordered="false">
|
<div style="margin-bottom: 16px;">
|
<a-button type="primary" @click="showSendDialog">发送站内消息</a-button>
|
</div>
|
<a-table bordered :loading="loading" :pagination="pagination" :columns="columns" :data-source="datalist"
|
rowKey="id">
|
<span slot="status" slot-scope="text,record">
|
<template>
|
<a-tag :color="record.status == 1 ? 'red' : record.status == 2 ? 'green' : ''">
|
{{ record.status == 1 ? '未读' : record.status == 2 ? '已读' : '' }}</a-tag>
|
</template>
|
</span>
|
</a-table>
|
</a-card>
|
|
<!-- 发送消息对话框 -->
|
<a-modal
|
title="发送站内消息"
|
:visible="sendDialogVisible"
|
@ok="handleSendMessage"
|
@cancel="handleCancelSend"
|
:confirmLoading="sending"
|
>
|
<a-form :form="sendForm">
|
<a-form-item label="接收用户" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
|
<a-radio-group v-decorator="['sendType', { initialValue: 'all' }]" @change="handleSendTypeChange">
|
<a-radio value="all">所有用户</a-radio>
|
<a-radio value="single">指定用户</a-radio>
|
</a-radio-group>
|
</a-form-item>
|
<a-form-item
|
v-if="sendType === 'single'"
|
label="用户ID"
|
:label-col="{ span: 6 }"
|
:wrapper-col="{ span: 16 }"
|
>
|
<a-input-number
|
v-decorator="['userId', { rules: [{ required: sendType === 'single', message: '请输入用户ID' }] }]"
|
:min="1"
|
placeholder="请输入用户ID"
|
style="width: 100%"
|
/>
|
</a-form-item>
|
<a-form-item label="消息类型" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
|
<a-input
|
v-decorator="['typeName', { initialValue: '站内消息' }]"
|
placeholder="消息类型，如：站内消息、系统通知等"
|
/>
|
</a-form-item>
|
<a-form-item label="消息内容" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
|
<a-textarea
|
v-decorator="['content', { rules: [{ required: true, message: '请输入消息内容' }] }]"
|
:rows="4"
|
placeholder="请输入消息内容"
|
/>
|
</a-form-item>
|
</a-form>
|
</a-modal>
|
</page-header-wrapper>
|
</template>
|
<script>
|
import { logmessageList, logsendMessage } from '@/api/logmanage'
|
import moment from 'moment'
|
export default {
|
name: 'smslog',
|
data() {
|
return {
|
sendDialogVisible: false,
|
sending: false,
|
sendType: 'all',
|
sendForm: this.$form.createForm(this),
|
columns: [
|
{
|
title: '用户名称',
|
dataIndex: 'userName',
|
align: "center",
|
},
|
{
|
title: '类型',
|
dataIndex: 'typeName',
|
align: "center",
|
},
|
{
|
title: '内容',
|
dataIndex: 'content',
|
align: "center",
|
width:600,
|
},
|
{
|
title: '发送状态',
|
dataIndex: 'status',
|
align: "center",
|
scopedSlots: { customRender: 'status' },
|
},
|
{
|
title: '发送时间',
|
dataIndex: 'addTime',
|
align: "center",
|
width: 180,
|
customRender: (text, row, index) => {
|
return text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : ''
|
}
|
},
|
],
|
//表头
|
pagination: {
|
total: 0,
|
pageSize: 10,//每页中显示10条数据
|
showSizeChanger: true,
|
pageSizeOptions: ["10", "20", "50", "100"],//每页中显示的数据
|
onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize), // 改变每页数量时更新显示
|
onChange: (page, pageSize) => this.onPageChange(page, pageSize),//点击页码事件
|
showTotal: total => `共有 ${total} 条数据`, //分页中显示总的数据
|
},
|
loading: false,
|
queryParam: {
|
pageNum: 1,
|
pageSize: 10,
|
},
|
datalist: [],
|
}
|
},
|
created() {
|
this.getlist()
|
},
|
methods: {
|
getlist() {
|
var that = this;
|
this.loading = true
|
logmessageList(this.queryParam).then(res => {
|
this.datalist = res.data.list
|
this.pagination.total = res.data.total
|
setTimeout(() => {
|
that.loading = false
|
}, 500)
|
})
|
},
|
onPageChange(page, pageSize) {
|
this.queryParam.pageNum = page
|
this.getlist()
|
},
|
onSizeChange(current, pageSize) {
|
this.queryParam.pageNum = current
|
this.queryParam.pageSize = pageSize
|
this.getlist()
|
},
|
showSendDialog() {
|
this.sendDialogVisible = true
|
this.sendForm.resetFields()
|
this.sendType = 'all'
|
},
|
handleSendTypeChange(e) {
|
this.sendType = e.target.value
|
},
|
handleCancelSend() {
|
this.sendDialogVisible = false
|
this.sendForm.resetFields()
|
},
|
handleSendMessage() {
|
this.sendForm.validateFields((err, values) => {
|
if (!err) {
|
this.sending = true
|
const params = {
|
userId: this.sendType === 'all' ? 0 : values.userId,
|
content: values.content,
|
typeName: values.typeName || '站内消息'
|
}
|
logsendMessage(params).then(res => {
|
this.sending = false
|
if (res.status === 0) {
|
this.$message.success('发送成功')
|
this.sendDialogVisible = false
|
this.sendForm.resetFields()
|
this.getlist()
|
} else {
|
this.$message.error(res.msg || '发送失败')
|
}
|
}).catch(err => {
|
this.sending = false
|
this.$message.error('发送失败：' + (err.message || '未知错误'))
|
})
|
}
|
})
|
},
|
}
|
}
|
</script>
|
<style scoped>
|
.greens {
|
color: #52c41a;
|
}
|
|
.reds {
|
color: #f5222d;
|
}
|
</style>
|
