消息公告
parent
c256f728f9
commit
6bb088ddbe
|
|
@ -9,6 +9,27 @@ export function listNotice(query) {
|
|||
})
|
||||
}
|
||||
|
||||
/*公告列表*/
|
||||
export function noticList() {
|
||||
return request({
|
||||
url: '/system/notice/noticList',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
/*公告详情列表*/
|
||||
export function noticListDetail() {
|
||||
return request({
|
||||
url: '/system/notice/noticListDetail',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
//阅读公告
|
||||
export function readNotic(noticeId) {
|
||||
return request({
|
||||
url: '/system/notice/readNotic/?noticeId=' + noticeId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
// 查询公告详细
|
||||
export function getNotice(noticeId) {
|
||||
return request({
|
||||
|
|
|
|||
|
|
@ -7,6 +7,10 @@
|
|||
<top-nav v-if="topNav" id="topmenu-container" class="topmenu-container"/>
|
||||
|
||||
<div class="right-menu">
|
||||
<el-badge :value="12" style="margin-right: 50px" class="item">
|
||||
<el-button size="mini" @click="drawer = true">公告</el-button>
|
||||
</el-badge>
|
||||
|
||||
<template v-if="device!=='mobile'">
|
||||
<search id="header-search" class="right-menu-item"/>
|
||||
<screenfull id="screenfull" class="right-menu-item hover-effect"/>
|
||||
|
|
@ -35,6 +39,63 @@
|
|||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<el-drawer
|
||||
title="我是标题"
|
||||
:visible.sync="drawer"
|
||||
:with-header="false">
|
||||
<span>
|
||||
<el-tabs type="border-card">
|
||||
|
||||
<el-tab-pane>
|
||||
<el-card>
|
||||
<el-button @click="all">全部</el-button>
|
||||
<el-button @click="notice">通知</el-button>
|
||||
<el-button @click="announcementList">公告</el-button>
|
||||
</el-card>
|
||||
<el-button @click="readNotic">通知已读</el-button>
|
||||
<el-button @click="noReadNotic">通知未读</el-button>
|
||||
<el-button @click="announcementListReadNotic">公告已读</el-button>
|
||||
<el-button @click="announcementListNoReadNotic">公告未读</el-button>
|
||||
<el-descriptions class="margin-top" v-for="(notice, index) in inform" :title=notice.noticeTitle :column="3" border>
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="small" @click="readMessage(notice)">阅读消息</el-button>
|
||||
</template>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-user"></i>
|
||||
消息发布时间
|
||||
</template>
|
||||
{{notice.createTime}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item style="width: 200px">
|
||||
<template slot="label">
|
||||
<i class="el-icon-mobile-phone"></i>
|
||||
消息发布人
|
||||
</template>
|
||||
{{notice.createBy}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item >
|
||||
<template slot="label">
|
||||
<i class="el-icon-tickets"></i>
|
||||
当前状态
|
||||
</template>
|
||||
<el-tag size="small" v-if="notice.flag==='0'">未读</el-tag>
|
||||
<el-tag type="success" size="small" v-if="notice.flag==='1'">已读</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template slot="label">
|
||||
<i class="el-icon-office-building"></i>
|
||||
消息类型
|
||||
</template>
|
||||
<el-tag size="small" v-if="notice.noticeType==='1'">通知</el-tag>
|
||||
<el-tag size="small" v-if="notice.noticeType==='2'">公告</el-tag>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
</span>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -46,8 +107,18 @@ import Hamburger from '@/components/Hamburger'
|
|||
import Screenfull from '@/components/Screenfull'
|
||||
import SizeSelect from '@/components/SizeSelect'
|
||||
import Search from '@/components/HeaderSearch'
|
||||
import {noticList, readNotic} from "@/api/system/notice";
|
||||
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
drawer: false,
|
||||
notic: [],
|
||||
/*通知*/
|
||||
inform: []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Breadcrumb,
|
||||
TopNav,
|
||||
|
|
@ -77,9 +148,94 @@ export default {
|
|||
get() {
|
||||
return this.$store.state.settings.topNav
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
created() {
|
||||
this.noticList()
|
||||
},
|
||||
methods: {
|
||||
|
||||
/*全部*/
|
||||
all(){
|
||||
this.inform = []
|
||||
this.notic.forEach(item => {
|
||||
this.inform.push(item)
|
||||
})
|
||||
},
|
||||
/*通知*/
|
||||
notice(){
|
||||
this.inform = []
|
||||
this.notic.forEach(item => {
|
||||
if (item.noticeType === '1') {
|
||||
this.inform.push(item)
|
||||
}
|
||||
})
|
||||
},
|
||||
/*通知已读*/
|
||||
readNotic(){
|
||||
this.inform = []
|
||||
this.notic.forEach(item => {
|
||||
if (item.noticeType === '1' && item.flag == 1) {
|
||||
this.inform.push(item)
|
||||
}
|
||||
})
|
||||
},
|
||||
/*公告已读*/
|
||||
announcementListReadNotic(){
|
||||
this.inform = []
|
||||
this.notic.forEach(item => {
|
||||
if (item.noticeType === '2' && item.flag == 1) {
|
||||
this.inform.push(item)
|
||||
}
|
||||
})
|
||||
},
|
||||
/*通知未读*/
|
||||
noReadNotic(){
|
||||
this.inform = []
|
||||
this.notic.forEach(item => {
|
||||
if (item.noticeType === '1' && item.flag == 0) {
|
||||
this.inform.push(item)
|
||||
}
|
||||
})
|
||||
},
|
||||
/*通知未读*/
|
||||
announcementListNoReadNotic(){
|
||||
this.inform = []
|
||||
this.notic.forEach(item => {
|
||||
if (item.noticeType === '2' && item.flag == 0) {
|
||||
this.inform.push(item)
|
||||
}
|
||||
})
|
||||
},
|
||||
/*公告*/
|
||||
announcementList(){
|
||||
this.inform = []
|
||||
this.notic.forEach(item => {
|
||||
if (item.noticeType === '2') {
|
||||
this.inform.push(item)
|
||||
}
|
||||
})
|
||||
},
|
||||
/*阅读*/
|
||||
readMessage(notice){
|
||||
|
||||
readNotic(notice.noticeId).then(
|
||||
res=>{
|
||||
this. noticList()
|
||||
}
|
||||
)
|
||||
this.$router.push({ path: '/system/notice', query: { openDialog: 'true' ,noticeId: notice.noticeId} });
|
||||
},
|
||||
/*打开公告*/
|
||||
noticList() {
|
||||
noticList().then(
|
||||
res => {
|
||||
console.log(res)
|
||||
this.notic = res.data
|
||||
}
|
||||
)
|
||||
},
|
||||
toggleSideBar() {
|
||||
this.$store.dispatch('app/toggleSideBar')
|
||||
},
|
||||
|
|
@ -99,6 +255,7 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navbar {
|
||||
height: 50px;
|
||||
|
|
@ -143,6 +300,7 @@ export default {
|
|||
outline: none;
|
||||
}
|
||||
|
||||
|
||||
.right-menu-item {
|
||||
display: inline-block;
|
||||
padding: 0 8px;
|
||||
|
|
|
|||
|
|
@ -99,6 +99,13 @@
|
|||
</el-table-column>
|
||||
<el-table-column align="center" class-name="small-padding fixed-width" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="noticDetail(scope.row)"
|
||||
>查看详情
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['system:notice:edit']"
|
||||
icon="el-icon-edit"
|
||||
|
|
@ -128,17 +135,17 @@
|
|||
/>
|
||||
|
||||
<!-- 添加或修改公告对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" append-to-body width="780px">
|
||||
<el-dialog :title="title" :visible.sync="open" append-to-body width="780px" class="dialog" >
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="公告标题" prop="noticeTitle">
|
||||
<el-input v-model="form.noticeTitle" placeholder="请输入公告标题"/>
|
||||
<el-input :disabled="isTitleDisabled" v-model="form.noticeTitle" placeholder="请输入公告标题"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="公告类型" prop="noticeType">
|
||||
<el-select v-model="form.noticeType" placeholder="请选择公告类型">
|
||||
<el-select :disabled="isTitleDisabled" v-model="form.noticeType" placeholder="请选择公告类型">
|
||||
<el-option
|
||||
v-for="dict in dict.type.sys_notice_type"
|
||||
:key="dict.value"
|
||||
|
|
@ -150,7 +157,7 @@
|
|||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="状态">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio-group :disabled="isTitleDisabled" v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.sys_notice_status"
|
||||
:key="dict.value"
|
||||
|
|
@ -160,11 +167,94 @@
|
|||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" v-if="form.noticeType==='2' && title !== '公告详情'">
|
||||
<el-form-item label="公告时间">
|
||||
<el-date-picker
|
||||
v-model="form.startTime"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
-
|
||||
<el-date-picker
|
||||
v-model="form.endTime"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="内容">
|
||||
<editor v-model="form.noticeContent" :min-height="192"/>
|
||||
<editor v-model="form.noticeContent" :min-height="50"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" v-if="form.noticeType==='1' && title !== '公告详情'">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="通知人员">
|
||||
<div class="block">
|
||||
<el-cascader
|
||||
placeholder="试试搜索：指南"
|
||||
:options="dept"
|
||||
value="id"
|
||||
show-all-levels:true
|
||||
@change="handleChange"
|
||||
:props="{ multiple: true }"
|
||||
filterable></el-cascader>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item v-if="cities.length>0">
|
||||
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
|
||||
</el-checkbox>
|
||||
<div style="margin: 15px 0;"></div>
|
||||
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
|
||||
<el-checkbox v-for="city in cities"
|
||||
:label="city"
|
||||
:key="city"
|
||||
:value="city">
|
||||
{{ city }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="24" v-if=" title === '公告详情'">
|
||||
<div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div>
|
||||
<el-statistic title="总通知">
|
||||
<template slot="formatter">
|
||||
{{ read.totalNum }}
|
||||
</template>
|
||||
</el-statistic>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div>
|
||||
<el-statistic title="已阅读">
|
||||
<template slot="formatter">
|
||||
{{ read.readEd }}
|
||||
</template>
|
||||
</el-statistic>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div>
|
||||
<el-statistic title="未阅读">
|
||||
<template slot="formatter">
|
||||
{{ read.noRead }}
|
||||
</template>
|
||||
</el-statistic>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
|
|
@ -176,8 +266,20 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {addNotice, delNotice, getNotice, listNotice, updateNotice} from "@/api/system/notice";
|
||||
import {
|
||||
addNotice,
|
||||
delNotice,
|
||||
getNotice,
|
||||
listNotice,
|
||||
noticList,
|
||||
noticListDetail,
|
||||
updateNotice
|
||||
} from "@/api/system/notice";
|
||||
import {listDept} from "@/api/system/dept";
|
||||
import {listUser} from "@/api/system/user";
|
||||
import {listPost} from "@/api/system/post";
|
||||
|
||||
const cityOptions = ['上海', '北京', '广州', '深圳'];
|
||||
export default {
|
||||
name: "Notice",
|
||||
dicts: ['sys_notice_status', 'sys_notice_type'],
|
||||
|
|
@ -210,7 +312,16 @@ export default {
|
|||
status: undefined
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
form: {
|
||||
userNames: "",
|
||||
createBy: "",
|
||||
},
|
||||
/*阅读量*/
|
||||
read:{
|
||||
totalNum: 2,
|
||||
readEd: 2,
|
||||
noRead: 2,
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
noticeTitle: [
|
||||
|
|
@ -219,13 +330,149 @@ export default {
|
|||
noticeType: [
|
||||
{required: true, message: "公告类型不能为空", trigger: "change"}
|
||||
]
|
||||
},
|
||||
dept: [],
|
||||
//多选
|
||||
options: [],
|
||||
/*用户查询参数*/
|
||||
userListFind: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
userName: undefined,
|
||||
phonenumber: undefined,
|
||||
status: undefined,
|
||||
deptId: undefined
|
||||
},
|
||||
// 日期范围
|
||||
dateRange: [],
|
||||
/*多选*/
|
||||
checkAll: false,
|
||||
checkedCities: [],
|
||||
cities: [],
|
||||
isIndeterminate: true,
|
||||
/*详情*/
|
||||
noticDetail(row) {
|
||||
/*公告已阅读*/
|
||||
noticListDetail().then(
|
||||
res => {
|
||||
res.data.forEach(item => {
|
||||
if(item.noticeId === row.noticeId){
|
||||
this.read.readEd=item.readNum;
|
||||
this.read.totalNum=item.totalNum;
|
||||
this.read.noRead=item.totalNum-item.readNum;
|
||||
}
|
||||
})
|
||||
}
|
||||
)
|
||||
this.reset();
|
||||
const noticeId = row.noticeId || this.ids
|
||||
getNotice(noticeId).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "公告详情";
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getDeptList();
|
||||
const shouldOpenDialog = this.$route.query.openDialog === 'true';
|
||||
const noticeId = this.$route.query.noticeId
|
||||
if (shouldOpenDialog) {
|
||||
/*公告已阅读*/
|
||||
noticListDetail().then(
|
||||
res => {
|
||||
res.data.forEach(item => {
|
||||
if(item.noticeId ===noticeId){
|
||||
this.read.readEd=item.readNum;
|
||||
this.read.totalNum=item.totalNum;
|
||||
this.read.noRead=item.totalNum-item.readNum;
|
||||
}
|
||||
})
|
||||
}
|
||||
)
|
||||
this.reset();
|
||||
getNotice(noticeId).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "公告详情";
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
computed: {
|
||||
isTitleDisabled() {
|
||||
return this.title === '公告详情';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
/*多选框*/
|
||||
handleCheckAllChange(val) {
|
||||
this.checkedCities = val ? this.cities : [];
|
||||
this.isIndeterminate = false;
|
||||
},
|
||||
handleCheckedCitiesChange(value) {
|
||||
let userNames = "";
|
||||
let checkedCount = value.length;
|
||||
this.checkAll = checkedCount === this.cities.length;
|
||||
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
|
||||
userNames += "," + value + ",";
|
||||
//去掉最后一个，号
|
||||
userNames = userNames.substring(1, userNames.length - 1);
|
||||
this.form.userNames = userNames;
|
||||
|
||||
},
|
||||
getDeptList() {
|
||||
this.loading = true;
|
||||
listDept(this.queryParams).then(response => {
|
||||
this.options = this.handleTree(response.data, "deptId");
|
||||
// 递归函数，用于转换children的格式
|
||||
function convertChildren(item) {
|
||||
return {
|
||||
id: item.deptId,
|
||||
value: item.deptId,
|
||||
label: item.deptName,
|
||||
children: item.children && item.children.length > 0
|
||||
? item.children.map(convertChildren) : undefined
|
||||
};
|
||||
}
|
||||
|
||||
// 转换整个options数组
|
||||
const data = this.options.map(convertChildren);
|
||||
this.dept = data;
|
||||
})
|
||||
},
|
||||
/*选中特定人员tab框*/
|
||||
handleChange(val) {
|
||||
const userList1 = [];
|
||||
console.log(val)
|
||||
const lastNumbers = val.map(array => {
|
||||
// 过滤掉 Observer 对象，只保留数字
|
||||
const filteredArray = array.filter(item => typeof item === 'number');
|
||||
// 获取最后一个数字
|
||||
return filteredArray[filteredArray.length - 1];
|
||||
});
|
||||
const promises = lastNumbers.map(item => {
|
||||
this.userListFind.deptId = item;
|
||||
return listUser(this.addDateRange(this.userListFind, this.dateRange)).then(response => {
|
||||
console.log(response)
|
||||
if (response.data.rows.length > 0) {
|
||||
response.data.rows.forEach(item => {
|
||||
userList1.push(
|
||||
item.userName
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
this.cities = userList1;
|
||||
|
||||
|
||||
},
|
||||
/** 查询公告列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
|
|
@ -294,6 +541,7 @@ export default {
|
|||
this.getList();
|
||||
});
|
||||
} else {
|
||||
console.log(this.form)
|
||||
addNotice(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
|
|
@ -317,3 +565,4 @@ export default {
|
|||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue