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.

271 lines
10 KiB

2 years ago
<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()
2 years ago
})
}
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>