271 lines
10 KiB
Vue
271 lines
10 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<!--工具栏-->
|
||
<div class="head-container">
|
||
<div v-if="crud.props.searchToggle">
|
||
<!-- 搜索 -->
|
||
<el-form
|
||
:inline="true"
|
||
class="demo-form-inline"
|
||
label-position="right"
|
||
label-width="90px"
|
||
label-suffix=":"
|
||
>
|
||
<el-form-item label="信息标题">
|
||
<el-input
|
||
v-model="query.notice_title"
|
||
clearable
|
||
size="mini"
|
||
placeholder="请输入标题"
|
||
@keyup.enter.native="crud.toQuery"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="信息类型">
|
||
<el-select
|
||
v-model="query.notice_type"
|
||
clearable
|
||
size="mini"
|
||
placeholder="信息类型"
|
||
class="filter-item"
|
||
@change="hand"
|
||
>
|
||
<el-option
|
||
v-for="item in dict.notice_type"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="读取状态">
|
||
<el-select
|
||
v-model="query.have_read"
|
||
clearable
|
||
size="mini"
|
||
placeholder="读取状态"
|
||
class="filter-item"
|
||
@change="hand"
|
||
>
|
||
<el-option
|
||
v-for="item in dict.have_read_type"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="处理情况">
|
||
<el-select
|
||
v-model="query.deal_status"
|
||
clearable
|
||
size="mini"
|
||
placeholder="处理情况"
|
||
class="filter-item"
|
||
@change="hand"
|
||
>
|
||
<el-option
|
||
v-for="item in dict.deal_status"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<rrOperation />
|
||
</el-form>
|
||
</div>
|
||
<!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
|
||
<crudOperation :permission="permission">
|
||
<el-button
|
||
slot="right"
|
||
class="filter-item"
|
||
size="mini"
|
||
type="success"
|
||
icon="el-icon-circle-check"
|
||
:disabled="crud.selections.length === 0"
|
||
@click="changeRead(crud.selections)"
|
||
>
|
||
批量已读
|
||
</el-button>
|
||
</crudOperation>
|
||
<!--表单组件-->
|
||
<el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
|
||
<el-form ref="form" :model="form" :rules="rules" size="mini" label-width="80px">
|
||
<el-form-item label="信息标题" prop="notice_title">
|
||
<el-input v-model="form.notice_title" style="width: 370px;" />
|
||
</el-form-item>
|
||
<el-form-item label="信息内容" prop="notice_content">
|
||
<el-input v-model="form.notice_content" style="width: 370px;" />
|
||
</el-form-item>
|
||
<el-form-item label="信息类型" prop="notice_type">
|
||
<el-input v-model="form.notice_type" style="width: 370px;" />
|
||
</el-form-item>
|
||
<el-form-item label="读取状态" prop="have_read">
|
||
<el-input v-model="form.have_read" style="width: 370px;" />
|
||
</el-form-item>
|
||
<el-form-item label="读取时间">
|
||
<el-input v-model="form.read_time" style="width: 370px;" />
|
||
</el-form-item>
|
||
<el-form-item label="处理状态" prop="deal_status">
|
||
<el-input v-model="form.deal_status" style="width: 370px;" />
|
||
</el-form-item>
|
||
<el-form-item label="创建时间" prop="create_time">
|
||
<el-input v-model="form.create_time" style="width: 370px;" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button type="text" @click="crud.cancelCU">取消</el-button>
|
||
<el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
<!--表格渲染-->
|
||
<el-table ref="table" v-loading="crud.loading" :data="crud.data" size="mini" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
|
||
<el-table-column type="selection" width="55" />
|
||
<el-table-column prop="notice_title" label="信息标题" :min-width="flexWidth('notice_title',crud.data,'信息标题')" />
|
||
<el-table-column prop="notice_content" label="信息内容" :min-width="flexWidth('notice_content',crud.data,'信息内容')" />
|
||
<el-table-column prop="notice_type" label="信息类型" :min-width="flexWidth('notice_type',crud.data,'信息类型')">
|
||
<template slot-scope="scope">
|
||
<el-tag v-if="scope.row.notice_type == 1" type="danger">{{ dict.label.notice_type[scope.row.notice_type] }}</el-tag>
|
||
<el-tag v-else type="warning">{{ dict.label.notice_type[scope.row.notice_type] }}</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="have_read" label="读取状态" :min-width="flexWidth('have_read',crud.data,'读取状态')" >
|
||
<template slot-scope="scope">
|
||
<el-tag v-if="scope.row.have_read == 1" type="danger">{{ dict.label.have_read_type[scope.row.have_read] }}</el-tag>
|
||
<el-tag v-else type="success">{{ dict.label.have_read_type[scope.row.have_read] }}</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="read_time" label="读取时间" :min-width="flexWidth('read_time',crud.data,'读取时间')" />
|
||
<el-table-column prop="deal_status" label="处理状态" :min-width="flexWidth('deal_status',crud.data,'处理状态')" >
|
||
<template slot-scope="scope">
|
||
<el-tag v-if="scope.row.deal_status == 1" type="info">{{ dict.label.deal_status[scope.row.deal_status] }}</el-tag>
|
||
<el-tag v-else>{{ dict.label.deal_status[scope.row.deal_status] }}</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="create_time" label="创建时间" :min-width="flexWidth('create_time',crud.data,'创建时间')" />
|
||
<el-table-column v-permission="[]" label="操作" width="230px" align="center" fixed="right">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
type="text"
|
||
slot="left"
|
||
icon="el-icon-view"
|
||
@click="show(scope.row)">
|
||
查看
|
||
</el-button>
|
||
<el-button
|
||
type="text"
|
||
slot="left"
|
||
icon="el-icon-help"
|
||
@click="deal(scope.row)">
|
||
处理
|
||
</el-button>
|
||
<udOperation
|
||
:data="scope.row"
|
||
:permission="permission"
|
||
:is-visiable-edit="false"
|
||
style="display: inline"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<!--分页组件-->
|
||
<pagination />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import CRUD, { crud, form, header, presenter } from '@crud/crud'
|
||
import crudNotice from './sysNotice'
|
||
import rrOperation from '@crud/RR.operation.vue'
|
||
import crudOperation from '@crud/CRUD.operation.vue'
|
||
import udOperation from '@crud/UD.operation.vue'
|
||
import pagination from '@crud/Pagination.vue'
|
||
import { NOTICE_SHOW_MESSAGE, NOTICE_MESSAGE_UPDATE } from './VueBaseCode'
|
||
|
||
const defaultForm = { notice_id: null, notice_title: null, notice_content: null, notice_type: null, have_read: null, read_time: null, deal_status: null, create_time: null }
|
||
export default {
|
||
name: 'Notice',
|
||
dicts: ['deal_status', 'have_read_type', 'notice_type'],
|
||
components: { pagination, crudOperation, rrOperation, udOperation },
|
||
mixins: [presenter(), header(), form(defaultForm), crud()],
|
||
cruds() {
|
||
return CRUD({
|
||
title: '消息通知',
|
||
url: 'api/notice',
|
||
idField: 'notice_id',
|
||
sort: 'notice_id,desc',
|
||
crudMethod: { ...crudNotice },
|
||
optShow: {
|
||
add: false,
|
||
edit: false,
|
||
del: true,
|
||
download: false,
|
||
reset: true
|
||
}
|
||
})
|
||
},
|
||
data() {
|
||
return {
|
||
permission: {},
|
||
rules: {
|
||
notice_title: [
|
||
{ required: true, message: '信息标题不能为空', trigger: 'blur' }
|
||
],
|
||
notice_content: [
|
||
{ required: true, message: '信息内容不能为空', trigger: 'blur' }
|
||
],
|
||
notice_type: [
|
||
{ required: true, message: '信息类型不能为空', trigger: 'blur' }
|
||
],
|
||
have_read: [
|
||
{ required: true, message: '读取状态不能为空', trigger: 'blur' }
|
||
],
|
||
deal_status: [
|
||
{ required: true, message: '处理状态不能为空', trigger: 'blur' }
|
||
],
|
||
create_time: [
|
||
{ required: true, message: '创建时间不能为空', trigger: 'blur' }
|
||
]
|
||
}}
|
||
},
|
||
methods: {
|
||
// 钩子：在获取表格数据之前执行，false 则代表不获取数据
|
||
[CRUD.HOOK.beforeRefresh]() {
|
||
return true
|
||
},
|
||
show(record) {
|
||
if (record.have_read == '1') {
|
||
crudNotice.read(record.notice_id).then(() => {
|
||
record.have_read = '2'
|
||
this.$bus.emit(NOTICE_MESSAGE_UPDATE)
|
||
this.crud.toQuery()
|
||
})
|
||
}
|
||
this.$bus.emit(NOTICE_SHOW_MESSAGE, record)
|
||
},
|
||
hand(value) {
|
||
this.crud.toQuery()
|
||
},
|
||
deal(row) {
|
||
crudNotice.deal(row.notice_id).then(() => {
|
||
row.have_read = '2'
|
||
this.$bus.emit(NOTICE_MESSAGE_UPDATE)
|
||
})
|
||
this.crud.toQuery()
|
||
},
|
||
changeRead(data) {
|
||
const param = {}
|
||
param.data = data
|
||
param.have_read = '2'
|
||
crudNotice.changeRead(param).then(() => {
|
||
this.$bus.emit(NOTICE_MESSAGE_UPDATE)
|
||
})
|
||
this.crud.notify('操作成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
|
||
this.crud.toQuery()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|