You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
222 lines
8.4 KiB
222 lines
8.4 KiB
<template>
|
|
<div class="app-container row-container">
|
|
<div class="head-container">
|
|
<div class="head-search">
|
|
<!-- 搜索 -->
|
|
<el-input v-model="query.search" 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="blurryTime" class="date-item" />
|
|
<rrOperation />
|
|
</div>
|
|
<crudOperation>
|
|
<template v-slot:left>
|
|
<el-button size="mini" @click="crud.toAdd">
|
|
<i class="iconfont icon-fabu" />
|
|
发布
|
|
</el-button>
|
|
</template>
|
|
</crudOperation>
|
|
</div>
|
|
<div class="container-wrap">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<!--表格渲染-->
|
|
<el-table
|
|
ref="table"
|
|
v-loading="crud.loading"
|
|
:data="crud.data"
|
|
style="width: 100%;"
|
|
@row-dblclick="handleDbClick"
|
|
>
|
|
<el-table-column type="index" label="序号" width="55" align="center" />
|
|
<el-table-column prop="noticeType" label="消息类型" align="center" min-width="100">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.noticeType===0">系统消息</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="noticeTitle" :show-overflow-tooltip="true" label="标题" min-width="150" align="center" />
|
|
<el-table-column prop="noticeContext" :show-overflow-tooltip="true" label="内容" align="center" min-width="200" />
|
|
<el-table-column :show-overflow-tooltip="true" label="发送对象" align="center" min-width="200">
|
|
<template v-if="scope.row.noticeDevices.length !== 0" slot-scope="scope">
|
|
{{ scope.row.noticeDevices.join('，') }}
|
|
<!-- <div class="tag-hidden">
|
|
<el-tag v-for="(item,i) in scope.row.noticeDevices" :key="i" style="margin-left:3px; color: #fff">{{ item }}</el-tag>
|
|
</div> -->
|
|
</template>
|
|
<template v-if="scope.row.noticeUsers.length !== 0" slot-scope="scope">
|
|
<!-- <div class="tag-hidden">
|
|
<el-tag v-for="(item,i) in scope.row.noticeUsers" :key="i" style="margin-left:3px; color: #fff">{{ item }}</el-tag>
|
|
</div> -->
|
|
{{ scope.row.noticeUsers.join('，') }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="create_by" label="创建人" align="center" min-width="100" />
|
|
<el-table-column prop="create_time" label="创建时间" align="center" min-width="180">
|
|
<template slot-scope="scope">
|
|
<div>{{ scope.row.create_time | parseTime }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!--分页组件-->
|
|
<pagination />
|
|
</div>
|
|
<!-- 发布 -->
|
|
<el-dialog append-to-body :close-on-click-modal="false" :modal-append-to-body="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" title="发布通知">
|
|
<span class="dialog-right-top" />
|
|
<span class="dialog-left-bottom" />
|
|
<div class="setting-dialog">
|
|
<el-form ref="form" :rules="rules" :model="form" size="small" label-width="100px">
|
|
<el-form-item label="消息类型" prop="noticeType" class="down-select">
|
|
<el-input v-model="form.noticeTypeName" 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="noticeTitle">
|
|
<el-input v-model="form.noticeTitle" placeholder="请输入" style="width: 580px;" />
|
|
</el-form-item>
|
|
<el-form-item label="内容" prop="noticeContext">
|
|
<el-input v-model="form.noticeContext" placeholder="请输入" type="textarea" rows="3" style="width: 580px;" />
|
|
</el-form-item>
|
|
<el-form-item label="发送对象" prop="userId">
|
|
<div class="send-obj">
|
|
<span v-if="pushObjItem.length === 0">点击下方按钮选择对象</span>
|
|
<el-tag
|
|
v-for="tag in pushObjItem"
|
|
v-else
|
|
:key="tag.userId"
|
|
:disable-transitions="false"
|
|
>
|
|
{{ tag.username }}
|
|
</el-tag>
|
|
</div>
|
|
</el-form-item>
|
|
<span class="select-btn iconfont icon-shezhi" @click="openSelectObj" />
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="text" @click="crud.cancelCU">取消</el-button>
|
|
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">保存</el-button>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
<SelectObj ref="selectObj" @selectObjItem="handleSelectObjItem" />
|
|
<Detail ref="archiveDetailDom" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import crudNotify from '@/api/system/notify'
|
|
import CRUD, { presenter, header, form, crud } from '@crud/crud'
|
|
import crudOperation from '@crud/CRUD.operation'
|
|
import rrOperation from '@crud/RR.operation'
|
|
import DateRangePicker from '@/components/DateRangePicker'
|
|
import pagination from '@crud/Pagination'
|
|
import SelectObj from './module/selectObj'
|
|
import Detail from './module/detail'
|
|
|
|
const defaultForm = { id: null, noticeTypeName: '系统消息', noticeType: null, noticeTitle: null, noticeContext: null, userId: [], deviceInfoId: [] }
|
|
export default {
|
|
name: 'NotifyManage',
|
|
components: { crudOperation, rrOperation, DateRangePicker, pagination, SelectObj, Detail },
|
|
cruds() {
|
|
return CRUD({ title: '通知', url: 'api/notice/initNotice', crudMethod: { ...crudNotify }, sort: [], optShow: {
|
|
add: false,
|
|
edit: false,
|
|
del: false,
|
|
download: false,
|
|
group: false
|
|
}})
|
|
},
|
|
mixins: [presenter(), header(), form(defaultForm), crud()],
|
|
data() {
|
|
return {
|
|
blurryTime: null,
|
|
sendVisible: false,
|
|
tableData: [],
|
|
pushObjItem: [],
|
|
msgTypeOptions: [
|
|
{ value: 1, label: '系统通知' }
|
|
// { value: 2, label: '报警消息', disabled: true },
|
|
// { value: 3, label: '借还消息', disabled: true },
|
|
// { value: 4, label: '下载消息', disabled: true }
|
|
],
|
|
rules: {
|
|
noticeTitle: [
|
|
{ required: true, message: '标题不可为空', trigger: 'blur' }
|
|
],
|
|
noticeContext: [
|
|
{ required: true, message: '内容不可为空', trigger: 'blur' }
|
|
],
|
|
userId: [
|
|
{ required: true, message: '发送对象不可为空', trigger: 'blur' }
|
|
]
|
|
}
|
|
}
|
|
},
|
|
async created() {
|
|
},
|
|
methods: {
|
|
[CRUD.HOOK.beforeRefresh]() {
|
|
if (this.blurryTime) {
|
|
this.crud.query.startTime = this.blurryTime[0]
|
|
this.crud.query.endTime = this.blurryTime[1]
|
|
} else {
|
|
this.crud.query.startTime = null
|
|
this.crud.query.endTime = null
|
|
}
|
|
},
|
|
openSelectObj() {
|
|
this.$refs.selectObj.sendObjVisible = true
|
|
this.$refs.selectObj.getFondsDatas()
|
|
},
|
|
handleSelectObjItem(objType, selectItemAll) {
|
|
this.pushObjItem = selectItemAll
|
|
if (objType === 0) {
|
|
this.form.userId = selectItemAll.map(item => item.userId)
|
|
this.form.deviceInfoId = []
|
|
} else {
|
|
this.form.userId = []
|
|
}
|
|
},
|
|
// 提交前的验证
|
|
[CRUD.HOOK.afterValidateCU](crud) {
|
|
console.log(crud.form)
|
|
crud.form.noticeType = 0
|
|
delete crud.form.noticeTypeName
|
|
return true
|
|
},
|
|
handleDbClick(row) {
|
|
this.$nextTick(() => {
|
|
this.$refs.archiveDetailDom.detailVisible = true
|
|
this.$refs.archiveDetailDom.rowData = row
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.select-btn{
|
|
display: inline-block;
|
|
padding: 4px 11px 4px 14px;
|
|
font-size: 18px;
|
|
color: #fff;
|
|
background: #0348F3;
|
|
border-radius: 3px;
|
|
margin: 10px 0 0 100px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
.send-obj{
|
|
width: 580px;
|
|
height: 180px;
|
|
padding: 0 10px;
|
|
border-radius: 3px 3px 3px 3px;
|
|
border: 1px solid #E6E8ED;
|
|
}
|
|
</style>
|