|
|
|
@ -1,32 +1,39 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<div class="app-container row-container"> |
|
|
|
<div class="head-container"> |
|
|
|
<div class="head-search"> |
|
|
|
<!-- 搜索 --> |
|
|
|
<el-input v-model="query.blurry" clearable size="small" placeholder="输入关键字搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" /> |
|
|
|
<date-range-picker v-model="query.createTime" class="date-item" /> |
|
|
|
<rrOperation /> |
|
|
|
</div> |
|
|
|
<el-button class="iconfont icon-fabu-fanbai" size="mini" @click="handleSend">发布</el-button> |
|
|
|
<el-button icon="el-icon-edit" size="mini" :disabled="!(selections.length === 1)" @click="handleEdit">修改</el-button> |
|
|
|
<el-button icon="el-icon-delete" size="mini" :disabled="!selections.length" @click="handleDel">删除</el-button> |
|
|
|
<!-- <el-button icon="el-icon-edit" size="mini" :disabled="!(selections.length === 1)" @click="handleEdit">修改</el-button> |
|
|
|
<el-button icon="el-icon-delete" size="mini" :disabled="!selections.length" @click="handleDel">删除</el-button> --> |
|
|
|
</div> |
|
|
|
<div class="app-container container-wrap"> |
|
|
|
<div class="container-wrap"> |
|
|
|
<span class="right-top-line" /> |
|
|
|
<span class="left-bottom-line" /> |
|
|
|
<!--表格渲染--> |
|
|
|
<!-- height="calc(100vh - 294px)" |
|
|
|
@row-click="clickRowHandler" |
|
|
|
@selection-change="selectionChangeHandler" --> |
|
|
|
<el-table |
|
|
|
ref="table" |
|
|
|
v-loading="isLoading" |
|
|
|
:default-sort="{prop: 'create_time', order: 'descending'}" |
|
|
|
:data="tableData" |
|
|
|
style="width: 100%;" |
|
|
|
height="calc(100vh - 294px)" |
|
|
|
@row-click="clickRowHandler" |
|
|
|
@selection-change="selectionChangeHandler" |
|
|
|
> |
|
|
|
<el-table-column type="selection" width="55" align="center" /> |
|
|
|
<el-table-column type="index" label="序号" width="100" align="center" /> |
|
|
|
<el-table-column prop="noticeContent" :show-overflow-tooltip="true" label="通知内容" min-width="200" align="center" /> |
|
|
|
<!-- <el-table-column type="selection" width="55" align="center" /> --> |
|
|
|
<el-table-column type="index" label="序号" width="55" align="center" /> |
|
|
|
<el-table-column prop="noticeType" label="消息类型" align="center" min-width="150"> |
|
|
|
<!-- <span v-if="scope.row.noticeType===1">系统消息</span> --> |
|
|
|
<span>系统消息</span> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="pushTo" :show-overflow-tooltip="true" label="推送对象" align="center" min-width="150"> |
|
|
|
<el-table-column prop="title" :show-overflow-tooltip="true" label="标题" min-width="150" align="center" /> |
|
|
|
<el-table-column prop="noticeContent" :show-overflow-tooltip="true" label="内容" align="center" /> |
|
|
|
<el-table-column prop="pushTo" :show-overflow-tooltip="true" label="发送对象" align="center"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span v-if="typeof(scope.row.pushTo)==='string'">{{ scope.row.pushTo }}</span> |
|
|
|
<div v-if="!(typeof(scope.row.pushTo)==='string')" class="tag-hidden"> |
|
|
|
@ -35,8 +42,8 @@ |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="update_by" label="推送人" align="center" min-width="150" /> |
|
|
|
<el-table-column prop="create_time" :sortable="true" label="推送时间" align="center" min-width="180"> |
|
|
|
<el-table-column prop="update_by" label="创建人" align="center" min-width="100" /> |
|
|
|
<el-table-column prop="create_time" :sortable="true" label="创建时间" align="center" min-width="180"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div>{{ scope.row.create_time | parseTime }}</div> |
|
|
|
</template> |
|
|
|
@ -51,62 +58,89 @@ |
|
|
|
@size-change="sizeChangeHandler($event)" |
|
|
|
@current-change="pageChangeHandler" |
|
|
|
/> |
|
|
|
<!-- 发布 --> |
|
|
|
<el-dialog append-to-body :close-on-click-modal="false" :visible.sync="sendVisible" title="发布通知" @close="handleClose"> |
|
|
|
<span class="dialog-right-top" /> |
|
|
|
<span class="dialog-left-bottom" /> |
|
|
|
<div class="setting-dialog"> |
|
|
|
<el-form ref="formDom" :rules="rules" :model="sendForm" size="small" label-width="80px" style="margin-left:85px"> |
|
|
|
<el-form-item label="消息类型" prop="msgType" class="down-select"> |
|
|
|
<el-select v-model="noticeType" placeholder="请选择" style="width:315px"> |
|
|
|
<el-option |
|
|
|
v-for="item in msgTypeOptions" |
|
|
|
:key="item.name" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value" |
|
|
|
:disabled="item.disabled" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="发布内容" prop="notification" style="margin-bottom:8px"> |
|
|
|
<textarea v-model="sendForm.notification" cols="38" rows="6" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="推送对象" prop=""> |
|
|
|
<el-radio-group v-model="pushObj" @change="pushObjChange"> |
|
|
|
<el-radio label="用户">用户</el-radio> |
|
|
|
<el-radio label="设备">设备</el-radio> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="选择对象" prop="paramName"> |
|
|
|
<el-select ref="selectBox" v-model="selectOptions" class="select" multiple :collapse-tags="showTags" clearable placeholder="请选择" style="width:315px" @change="changeSelect"> |
|
|
|
<el-option v-for="item in sendObjOptions" :key="item.value" :label="item.label" :value="item.value" /> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button v-loading="btnloading" type="primary" @click="handleSave">保存</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 发布 --> |
|
|
|
<el-dialog append-to-body :close-on-click-modal="false" :visible.sync="sendVisible" title="发布通知" @close="handleClose"> |
|
|
|
<span class="dialog-right-top" /> |
|
|
|
<span class="dialog-left-bottom" /> |
|
|
|
<div class="setting-dialog"> |
|
|
|
<el-form ref="formDom" :rules="rules" :model="sendForm" size="small" label-width="100px"> |
|
|
|
<el-form-item label="消息类型" prop="msgType" class="down-select"> |
|
|
|
<el-input v-model="sendForm.msgType" disabled /> |
|
|
|
<!-- <el-select v-model="noticeType" placeholder="请选择"> |
|
|
|
<el-option |
|
|
|
v-for="item in msgTypeOptions" |
|
|
|
:key="item.name" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value" |
|
|
|
:disabled="item.disabled" |
|
|
|
/> |
|
|
|
</el-select> --> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="标题" prop="title"> |
|
|
|
<el-input v-model="sendForm.title" placeholder="请输入" style="width: 580px;" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="内容" prop="notification"> |
|
|
|
<el-input v-model="sendForm.notification" placeholder="请输入" type="textarea" rows="3" style="width: 580px;" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="发送对象" prop="pushObj"> |
|
|
|
<el-input v-model="sendForm.pushObj" placeholder="点击下方按钮选择对象" type="textarea" rows="6" style="width: 580px;" /> |
|
|
|
</el-form-item> |
|
|
|
<span class="select-btn iconfont icon-shezhi" @click="sendObjVisible = true" /> |
|
|
|
<!-- <el-form-item label="发送对象" prop=""> |
|
|
|
<el-radio-group v-model="pushObj" @change="pushObjChange"> |
|
|
|
<el-radio label="用户">用户</el-radio> |
|
|
|
<el-radio label="设备">设备</el-radio> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> --> |
|
|
|
<!-- <el-form-item label="发送对象" prop="paramName"> |
|
|
|
<el-select ref="selectBox" v-model="selectOptions" class="select" multiple :collapse-tags="showTags" clearable placeholder="请选择" style="width:588px" @change="changeSelect"> |
|
|
|
<el-option v-for="item in sendObjOptions" :key="item.value" :label="item.label" :value="item.value" /> |
|
|
|
</el-select> |
|
|
|
</el-form-item> --> |
|
|
|
</el-form> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button type="text" @click="sendVisible = false">取消</el-button> |
|
|
|
<el-button v-loading="btnloading" type="primary" @click="handleSave">保存</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
<!-- 删除 --> |
|
|
|
<el-dialog :visible.sync="delVisible" title="提示"> |
|
|
|
<span class="dialog-right-top" /> |
|
|
|
<span class="dialog-left-bottom" /> |
|
|
|
<div class="setting-dialog"> |
|
|
|
<p class="delMsg">确定删除所选消息吗？</p> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button type="primary" @click="handleDelConfirm">确定</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
<!-- 选择发送对象 --> |
|
|
|
<el-dialog append-to-body :close-on-click-modal="false" :visible.sync="sendObjVisible" title="发布通知" @close="handleClose"> |
|
|
|
<span class="dialog-right-top" /> |
|
|
|
<span class="dialog-left-bottom" /> |
|
|
|
<div class="setting-dialog"> |
|
|
|
<el-form ref="selectObjForm" :rules="rulesObj" :model="selectObjForm" size="small" label-width="100px"> |
|
|
|
<el-form-item label="发送对象" prop="sendObj" class="down-select"> |
|
|
|
<el-radio-group v-model="selectObjForm.sendObj" size="mini" style="width: 178px"> |
|
|
|
<el-radio-button label="0">用户</el-radio-button> |
|
|
|
<el-radio-button label="1">设备</el-radio-button> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button type="text" @click="sendObjVisible = false">取消</el-button> |
|
|
|
<el-button type="primary">保存</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { noticeCreate, getAllDev, getAllUser, getNoticeList, noticeDel } from '@/api/system/logs' |
|
|
|
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
|
|
|
import rrOperation from '@crud/RR.operation' |
|
|
|
import DateRangePicker from '@/components/DateRangePicker' |
|
|
|
// noticeDel |
|
|
|
import { noticeCreate, getAllDev, getAllUser, getNoticeList } from '@/api/system/logs' |
|
|
|
const defaultForm = {} |
|
|
|
export default { |
|
|
|
name: 'NotifyManage', |
|
|
|
components: { rrOperation, DateRangePicker }, |
|
|
|
cruds() { |
|
|
|
return CRUD({ title: '通知', url: 'api/system/logs', crudMethod: { }}) |
|
|
|
}, |
|
|
|
mixins: [presenter(), header(), form(defaultForm), crud()], |
|
|
|
inject: ['reload'], |
|
|
|
data() { |
|
|
|
return { |
|
|
|
@ -114,12 +148,14 @@ export default { |
|
|
|
tableData: [], |
|
|
|
selections: [], |
|
|
|
sendVisible: false, |
|
|
|
delVisible: false, |
|
|
|
sendObjVisible: false, |
|
|
|
sendForm: { |
|
|
|
// msgType: 1, |
|
|
|
notification: '', |
|
|
|
// pushObj: '用户', |
|
|
|
sendObj: ['全选'] |
|
|
|
msgType: '系统消息', |
|
|
|
title: null, |
|
|
|
notification: '' |
|
|
|
}, |
|
|
|
selectObjForm: { |
|
|
|
sendObj: 0 |
|
|
|
}, |
|
|
|
pushObj: '用户', |
|
|
|
checked: '', |
|
|
|
@ -136,14 +172,19 @@ export default { |
|
|
|
oldSelect: null, |
|
|
|
showTags: true, |
|
|
|
rules: { |
|
|
|
// msgType: [ |
|
|
|
// { required: true, message: '请选择类型', trigger: 'blur' } |
|
|
|
// ], |
|
|
|
title: [ |
|
|
|
{ required: true, message: '标题不可为空', trigger: 'blur' } |
|
|
|
], |
|
|
|
notification: [ |
|
|
|
{ required: true, message: '请填写内容', trigger: 'blur' } |
|
|
|
{ required: true, message: '内容不可为空', trigger: 'blur' } |
|
|
|
], |
|
|
|
pushObj: [ |
|
|
|
{ required: true, message: '请选择推送对象', trigger: 'blur' } |
|
|
|
{ required: true, message: '发送对象不可为空', trigger: 'blur' } |
|
|
|
] |
|
|
|
}, |
|
|
|
rulesObj: { |
|
|
|
sendObj: [ |
|
|
|
{ required: true, message: '请选择发送对象', trigger: 'change' } |
|
|
|
] |
|
|
|
}, |
|
|
|
allUser: null, |
|
|
|
@ -285,14 +326,14 @@ export default { |
|
|
|
this.getTableData() |
|
|
|
this.loading = false |
|
|
|
}, |
|
|
|
clickRowHandler(row) { |
|
|
|
// this.$refs.table.clearSelection() |
|
|
|
this.$refs.table.toggleRowSelection(row) // 单选选中 |
|
|
|
}, |
|
|
|
selectionChangeHandler(val) { |
|
|
|
this.selections = val |
|
|
|
console.log(val) |
|
|
|
}, |
|
|
|
// clickRowHandler(row) { |
|
|
|
// // this.$refs.table.clearSelection() |
|
|
|
// this.$refs.table.toggleRowSelection(row) // 单选选中 |
|
|
|
// }, |
|
|
|
// selectionChangeHandler(val) { |
|
|
|
// this.selections = val |
|
|
|
// console.log(val) |
|
|
|
// }, |
|
|
|
// 发布 |
|
|
|
handleSend() { |
|
|
|
this.defaultSelAll() |
|
|
|
@ -300,19 +341,19 @@ export default { |
|
|
|
this.sendVisible = true |
|
|
|
}, |
|
|
|
// 修改 |
|
|
|
handleEdit() { |
|
|
|
this.isEdit = true |
|
|
|
this.sendForm.notification = this.selections[0].noticeContent |
|
|
|
const temp = this.selections[0].pushVal |
|
|
|
if (this.selections[0].pushType === 1) { |
|
|
|
this.pushObj = '用户' |
|
|
|
this.selectOptions = temp.length === this.userOptions.length - 1 ? [0, ...temp] : temp |
|
|
|
} else { |
|
|
|
this.pushObj = '设备' |
|
|
|
this.selectOptions = temp.length === this.devOptions.length - 1 ? [0, ...temp] : temp |
|
|
|
} |
|
|
|
this.sendVisible = true |
|
|
|
}, |
|
|
|
// handleEdit() { |
|
|
|
// this.isEdit = true |
|
|
|
// this.sendForm.notification = this.selections[0].noticeContent |
|
|
|
// const temp = this.selections[0].pushVal |
|
|
|
// if (this.selections[0].pushType === 1) { |
|
|
|
// this.pushObj = '用户' |
|
|
|
// this.selectOptions = temp.length === this.userOptions.length - 1 ? [0, ...temp] : temp |
|
|
|
// } else { |
|
|
|
// this.pushObj = '设备' |
|
|
|
// this.selectOptions = temp.length === this.devOptions.length - 1 ? [0, ...temp] : temp |
|
|
|
// } |
|
|
|
// this.sendVisible = true |
|
|
|
// }, |
|
|
|
// 保存 |
|
|
|
handleSave() { |
|
|
|
this.$refs.formDom.validate((valid) => { |
|
|
|
@ -369,26 +410,26 @@ export default { |
|
|
|
this.noticeType = 1 |
|
|
|
}, |
|
|
|
// 删除 |
|
|
|
handleDel() { |
|
|
|
this.delVisible = true |
|
|
|
}, |
|
|
|
// 删除确认 |
|
|
|
handleDelConfirm() { |
|
|
|
const params = this.selections.map(item => { return item.id }) |
|
|
|
noticeDel(params).then(res => { |
|
|
|
if (res === 'SUCCESS') { |
|
|
|
// this.getTableData() |
|
|
|
this.delVisible = false |
|
|
|
this.reload() |
|
|
|
this.$message({ |
|
|
|
message: '删除成功', |
|
|
|
type: 'success' |
|
|
|
}) |
|
|
|
} else { |
|
|
|
this.$message.error('删除失败') |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
// handleDel() { |
|
|
|
// this.delVisible = true |
|
|
|
// }, |
|
|
|
// // 删除确认 |
|
|
|
// handleDelConfirm() { |
|
|
|
// const params = this.selections.map(item => { return item.id }) |
|
|
|
// noticeDel(params).then(res => { |
|
|
|
// if (res === 'SUCCESS') { |
|
|
|
// // this.getTableData() |
|
|
|
// this.delVisible = false |
|
|
|
// this.reload() |
|
|
|
// this.$message({ |
|
|
|
// message: '删除成功', |
|
|
|
// type: 'success' |
|
|
|
// }) |
|
|
|
// } else { |
|
|
|
// this.$message.error('删除失败') |
|
|
|
// } |
|
|
|
// }) |
|
|
|
// }, |
|
|
|
// 选择器 推送对象 |
|
|
|
handelChange(val) { |
|
|
|
if (val.length === this.sendObjOptions.length) { |
|
|
|
@ -433,60 +474,15 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.head-container{ |
|
|
|
padding-bottom: 0; |
|
|
|
} |
|
|
|
.container-wrap{ |
|
|
|
min-height: calc(100vh - 242px) |
|
|
|
} |
|
|
|
textarea{ |
|
|
|
background-color: #021941; |
|
|
|
border: 1px solid #339CFF; |
|
|
|
border-radius: 3px; |
|
|
|
&:focus{ |
|
|
|
outline: none; |
|
|
|
} |
|
|
|
caret-color: #fff; |
|
|
|
.select-btn{ |
|
|
|
display: inline-block; |
|
|
|
padding: 4px 11px 4px 14px; |
|
|
|
font-size: 18px; |
|
|
|
color: #fff; |
|
|
|
padding: 10px 12px; |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
::v-deep .el-radio-group{ |
|
|
|
width: 315px; |
|
|
|
height: 32px; |
|
|
|
border: 1px solid #339CFF; |
|
|
|
background: #0348F3; |
|
|
|
border-radius: 3px; |
|
|
|
padding-left: 14px; |
|
|
|
display: flex; |
|
|
|
label{ |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
margin-right: 50px; |
|
|
|
span{ |
|
|
|
color: #3A99FD; |
|
|
|
margin-left: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.el-checkbox{ |
|
|
|
display: flex; |
|
|
|
justify-content: right; |
|
|
|
align-items: center; |
|
|
|
padding-right: 20px; |
|
|
|
} |
|
|
|
::v-deep .el-form-item__error{ |
|
|
|
top: 93%; |
|
|
|
} |
|
|
|
.tag-hidden{ |
|
|
|
width: 100%; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow:ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
::v-deep .el-select__tags{ |
|
|
|
overflow-y: auto; |
|
|
|
-webkit-overflow-scrolling: touch; |
|
|
|
white-space: nowrap; |
|
|
|
max-height: 100px; |
|
|
|
margin: 10px 0 0 100px; |
|
|
|
text-align: center; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
</style> |
