公告通知

dev
zhang xu 2024-04-12 19:08:33 +08:00
commit 20e62b7c0e
4 changed files with 418 additions and 80 deletions

View File

@ -42,3 +42,32 @@ export function delNotice(noticeId) {
method: 'delete'
})
}
export function updateAsUserDept(id) {
return request({
url: '/system/userDept/UpdateAsUserDept?id=' + id,
method: 'get'
})
}
export function getNum(id) {
return request({
url: '/system/userDept/GetNum?noticeId=' + id,
method: 'get'
})
}
export function getNoticeList(data) {
return request({
url: '/system/notice/GetNoticeList',
method: 'post',
data
})
}

View File

@ -14,6 +14,31 @@
<el-tooltip content="布局大小" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect"/>
</el-tooltip>
<el-button type="text" @click="dialogTableVisible = true" style="height: 50px; width: 50px;">
<i style="width: 50px; height: 50px;" class="el-icon-s-comment"></i>
</el-button>
<el-dialog title="消息通知" :visible.sync="dialogTableVisible">
<el-radio-group v-model="radio1">
<el-radio-button label="全部"></el-radio-button>
<el-radio-button label="通知"></el-radio-button>
<el-radio-button label="公告"></el-radio-button>
</el-radio-group>
<div style="margin-top: 10px">
<el-radio-group v-model="radio2">
<el-radio-button label="全部"></el-radio-button>
<el-radio-button label="已读"></el-radio-button>
<el-radio-button label="未读"></el-radio-button>
</el-radio-group>
</div>
<el-table :data="gridData">
<el-table-column property="date" label="日期" width="150">
</el-table-column>
<el-table-column property="name" label="姓名" width="200"></el-table-column>
<el-table-column property="address" label="地址"></el-table-column>
</el-table>
</el-dialog>
</template>
@ -29,6 +54,7 @@
<el-dropdown-item @click.native="setting = true">
<span>布局设置</span>
</el-dropdown-item>
<el-dropdown-item divided @click.native="logout">
<span>退出登录</span>
</el-dropdown-item>
@ -46,15 +72,52 @@ import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import Search from '@/components/HeaderSearch'
import Dept from "@/views/system/dept/index.vue";
export default {
components: {
Dept,
Breadcrumb,
TopNav,
Hamburger,
Screenfull,
SizeSelect,
Search
Search,
},
data() {
return {
radio1: '上海',
radio2: '上海',
gridData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
dialogTableVisible: false,
// form: {
// name: '',
// region: '',
// date1: '',
// date2: '',
// delivery: false,
// type: [],
// resource: '',
// desc: ''
// },
}
},
computed: {
...mapGetters([
@ -80,6 +143,14 @@ export default {
}
},
methods: {
handleClose(done) {
this.$confirm('确认关闭?')
.then(_ => {
done();
})
.catch(_ => {});
},
toggleSideBar() {
this.$store.dispatch('app/toggleSideBar')
},

View File

@ -18,6 +18,7 @@
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery"></el-button>
@ -155,6 +156,15 @@
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<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">{{city}}</el-checkbox>
</el-checkbox-group>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
@ -168,13 +178,19 @@
import {addDept, delDept, getDept, listDept, listDeptExcludeChild, updateDept} from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
name: "Dept",
dicts: ['sys_normal_disable'],
components: {Treeselect},
data() {
return {
checkAll: false,
checkedCities: ['上海', '北京'],
cities: cityOptions,
isIndeterminate: true,
//
loading: true,
//
@ -230,6 +246,16 @@ export default {
this.getList();
},
methods: {
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
},
/** 查询部门列表 */
getList() {
this.loading = true;

View File

@ -98,6 +98,14 @@
</template>
</el-table-column>
<el-table-column align="center" class-name="small-padding fixed-width" label="操作">
<el-button
v-hasPermi="['system:notice:edit']"
icon="el-icon-edit"
size="mini"
type="text"
@click="noticeDetails(scope.row.noticeId)"
>通知详情
</el-button>
<template slot-scope="scope">
<el-button
v-hasPermi="['system:notice:edit']"
@ -147,6 +155,20 @@
></el-option>
</el-select>
</el-form-item>
<el-col v-show="form.noticeType == 2">
<span style="margin-right: 15px;margin-left: 10px"><b>公告时间</b></span>
<el-date-picker
v-model="form.time"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-col>
</el-col>
<el-col :span="24">
<el-form-item label="状态">
@ -166,23 +188,132 @@
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<div class="block">
<el-checkbox v-model="checked"></el-checkbox>
<br>
<span class="demonstration">部门人员</span>
<el-cascader
v-model="value"
:options="options"
:props="{ expandTrigger: 'hover' }"
@change="handleChange"></el-cascader>
</div>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
<el-tabs v-show="form.noticeType == 1" v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="部门" name="section">
{{ form.sectionList }}
<el-cascader
v-model="form.sectionList"
:options="options1"
:props="props"
style="width: 350px"
clearable>
</el-cascader>
</el-tab-pane>
<el-tab-pane label="特定人员" name="personnel">
{{ form.personnelList }}
<el-select v-model="form.personnelList" multiple placeholder="请选择特定人员">
<el-option
v-for="item in options"
:key="item.userId"
:label="item.nickName"
:value="item.userId">
</el-option>
</el-select>
</el-tab-pane>
</el-tabs>
</el-dialog>
<el-dialog
title="通知详情"
:visible.sync="numVisable"
width="40%">
<el-row :gutter="20">
<el-col :span="6">
<div>
<el-statistic
:value="asUserDeptNum.num"
title="总共通知数量"
></el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic
:value="asUserDeptNum.readNum"
title="已阅读通知数量"
></el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic
:value="asUserDeptNum.noReadNum"
title="未阅读通知数量"
></el-statistic>
</div>
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button @click="numVisable = false"> </el-button>
<el-button type="primary" @click="numVisable = false"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import {addNotice, delNotice, getNotice, listNotice, updateNotice} from "@/api/system/notice";
import {listUser} from "@/api/system/user";
import {listDept} from "@/api/system/dept";
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
name: "Notice",
dicts: ['sys_notice_status', 'sys_notice_type'],
data() {
return {
sectionList:[],
personnelList:[],
props: { multiple: true },
options1: [],
options: [],
queryParam: {
pageNum: 1,
pageSize: 10,
noticeTitle: undefined,
createBy: undefined,
status: undefined
},
asUserDeptNum: {},
numVisable: false,
activeName: '部门',
checkAll: false,
checkedCities: ['上海', '北京'],
cities: cityOptions,
isIndeterminate: true,
status: "0",
value:[],
listDeptList:null,
//
loading: true,
//
@ -224,85 +355,166 @@ export default {
},
created() {
this.getList();
this.listUserAll();
},
methods: {
/** 查询公告列表 */
getList() {
this.loading = true;
listNotice(this.queryParams).then(response => {
this.noticeList = response.data.rows;
this.total = response.data.total;
this.loading = false;
});
},
//
cancel() {
this.open = false;
this.reset();
},
//
reset() {
this.form = {
noticeId: undefined,
noticeTitle: undefined,
noticeType: undefined,
noticeContent: undefined,
status: "0"
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
//
handleSelectionChange(selection) {
this.ids = selection.map(item => item.noticeId)
this.single = selection.length != 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加公告";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const noticeId = row.noticeId || this.ids
getNotice(noticeId).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改公告";
});
},
/** 提交按钮 */
submitForm: function () {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.noticeId != undefined) {
updateNotice(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addNotice(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
listDept(this.queryParam
).then(response => {
this.options1 = this.handleTree(response.data, "deptId");
console.log(this.options1)
this.options1.forEach(op => {
this.$set(op, 'value', op.deptId);
delete op.deptId;
this.$set(op, 'label', op.deptName);
delete op.deptName;
if (op.children) {
this.recursion(op.children)
}
})
this.loading = false;
})
listUser(this.addDateRange(this.queryParams, [])).then(response => {
this.options = response.data.rows;
console.log(this.options)
}),
noticeDetails(noticeId)
{
this.numVisable = true
getNum(noticeId).then(res => {
this.asUserDeptNum = res.data
})
};
//
recursion(data)
{
data.forEach(da => {
this.$set(da, 'value', da.deptId);
delete da.deptId;
this.$set(da, 'label', da.deptName);
delete da.deptName;
if (da.children) {
this.recursion(da.children)
}
})
};
//tab
//
listUserAll()
{
listDept().then(res => {
this.listDeptList = res.data.rows
})
};
handleCheckAllChange(val)
{
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
};
handleCheckedCitiesChange(value)
{
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
};
/** 查询公告列表 */
getList()
{
this.loading = true;
listNotice(this.queryParams).then(response => {
this.noticeList = response.data.rows;
this.total = response.data.total;
this.loading = false;
});
};
//
cancel()
{
this.open = false;
this.reset();
};
//
reset()
{
this.form = {
noticeId: undefined,
noticeTitle: undefined,
noticeType: undefined,
noticeContent: undefined,
status: "0"
};
this.resetForm("form");
};
/** 搜索按钮操作 */
handleQuery()
{
this.queryParams.pageNum = 1;
this.getList();
};
/** 重置按钮操作 */
resetQuery()
{
this.resetForm("queryForm");
this.handleQuery();
};
//
handleSelectionChange(selection)
{
this.ids = selection.map(item => item.noticeId)
this.single = selection.length != 1
this.multiple = !selection.length
};
/** 新增按钮操作 */
handleAdd()
{
this.reset();
this.open = true;
this.title = "添加公告";
}
,
/** 修改按钮操作 */
handleUpdate(row)
{
this.reset();
const noticeId = row.noticeId || this.ids
getNotice(noticeId).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改公告";
});
}
,
/** 提交按钮 */
submitForm: function () {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.noticeId != undefined) {
updateNotice(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addNotice(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
/** 删除按钮操作 */
handleDelete(row) {
const noticeIds = row.noticeId || this.ids