teach-xm
/
2111A-cloud-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

前台项目创建

master
zhang chengzhi 2024-07-24 13:44:45 +08:00
parent 7f7b6b2d67
commit 7e5c8e7d05
5 changed files with 347 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/api/system/notice.js
View File

@ -8,6 +8,17 @@ export function listNotice(query) {
params: query
})
}
//用户消息列表展示
export function listNoticeByNotice(data) {
return request({
url: '/system/notice/userList',
method: 'post',
params: data
})
}
// 查询公告详细
export function getNotice(noticeId) {
@ -16,6 +27,21 @@ export function getNotice(noticeId) {
method: 'get'
})
}
// 查询公告详细和阅读量
export function getNoticeAndCount(noticeId) {
return request({
url: '/system/notice/' + noticeId,
method: 'post'
})
}
// 阅读文件
export function readNotice(noticeId) {
return request({
url: '/system/notice/'+noticeId,
method: 'put',
})
}
// 新增公告
export function addNotice(data) {
@ -41,4 +67,4 @@ export function delNotice(noticeId) {
url: '/system/notice/' + noticeId,
method: 'delete'
})
}
}

9
src/api/system/user.js
View File

@ -1,6 +1,15 @@
import request from '@/utils/request'
import {parseStrEmpty} from "@/utils/muyu";
//查询所有用户
export function getUserList() {
return request({
url: '/system/user/userList',
method: 'get'
})
}
// 查询用户列表
export function listUser(query) {
return request({

175
src/layout/components/Navbar.vue
View File

@ -8,6 +8,9 @@
<div class="right-menu">
<template v-if="device!=='mobile'">
<el-button @click="getNoticeList(),drawer = true,this.direction = 'rtl'" style="margin-left: 16px;"
icon="el-icon-chat-dot-round" class="right-menu-item">
</el-button>
<search id="header-search" class="right-menu-item"/>
<screenfull id="screenfull" class="right-menu-item hover-effect"/>
@ -15,8 +18,122 @@
<size-select id="size-select" class="right-menu-item hover-effect"/>
</el-tooltip>
<el-drawer
title="消息通知"
:visible.sync="drawer"
:direction="direction"
>
<div>
<el-radio-group v-model="notice.noticeType" @change="getNoticeList">
<el-radio-button label="null">全部</el-radio-button>
<el-radio-button label="1">通知</el-radio-button>
<el-radio-button label="2">公告</el-radio-button>
</el-radio-group>
</div>
<div>
<el-radio-group v-model="notice.readStatus" @change="getNoticeList">
<el-radio-button label="null">全部</el-radio-button>
<el-radio-button label="1">已读</el-radio-button>
<el-radio-button label="0">未读</el-radio-button>
</el-radio-group>
</div>
<div v-for=" no in noticeList">
<el-descriptions class="margin-top" :title="no.noticeTitle" :column="3" border>
<template slot="extra">
<el-button type="primary" size="small" @click="readNoticeChilk(no)">阅读消息</el-button>
</template>
<el-descriptions-item>
<template slot="label">
<i class="el-icon-user"></i>
消息发布时间
</template>
{{ no.createTime }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<i class="el-icon-mobile-phone"></i>
消息发布人
</template>
{{no.createBy}} ({{ no.remark }})
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<i class="el-icon-location-outline"></i>
消息类型
</template>
<span v-show="no.noticeType==1">
通知
</span>
<span v-show="no.noticeType==2">
公告
</span>
</el-descriptions-item>
<el-descriptions-item >
<template slot="label">
<i class="el-icon-mobile-phone"></i>
有效时间
</template>
{{no.startTime}}---{{ no.endTime}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<i class="el-icon-location-outline"></i>
当前状态
</template>
<span v-show="no.readStatus==0">
未读
</span>
<span v-show="no.readStatus==1">
已读
</span>
</el-descriptions-item>
</el-descriptions>
</div>
<!-- &lt;!&ndash; 消息对话框 &ndash;&gt;-->
<!-- <el-dialog :title="title" :visible.sync="open" append-to-body width="780px">-->
<!-- <el-form ref="form" :model="form" : label-width="80px">-->
<!-- <el-row>-->
<!-- <el-col :span="12">-->
<!-- <el-form-item label="公告标题" prop="noticeTitle">-->
<!-- <el-input v-model="form.noticeTitle" placeholder="请输入公告标题"/>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <el-form-item label="公告类型" prop="noticeType">-->
<!-- <el-form-item label="公告标题" prop="noticeTitle">-->
<!-- <el-input v-model="form.noticeType" placeholder="请输入公告标题"/>-->
<!-- </el-form-item>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- </el-col>-->
<!-- <el-col :span="24">-->
<!-- <el-form-item label="内容">-->
<!-- <editor v-model="form.noticeContent" :min-height="192"/>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </el-form>-->
<!-- <div slot="footer" class="dialog-footer">-->
<!-- <el-button type="primary" @click="cancel">确 定</el-button>-->
<!-- <el-button @click="cancel">取 消</el-button>-->
<!-- </div>-->
<!-- </el-dialog>-->
</el-drawer>
</template>
<!-- el-icon-chat-dot-round-->
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper">
<img :src="avatar" class="user-avatar">
@ -46,9 +163,32 @@ import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import Search from '@/components/HeaderSearch'
import Notice from "@/views/system/notice/index.vue";
import notice from "../../views/system/notice/index.vue";
import {listNoticeByNotice, readNotice} from "@/api/system/notice";
import ComponentA from '@/views/system/notice/index.vue'
export default {
data() {
return {
open: false,
noticeList: [],
notice: {
readStatus: null,
noticeType: null,
},
drawer: false,
direction: 'rtl',
title: undefined,
form: {}
};
},
components: {
Notice,
Breadcrumb,
TopNav,
Hamburger,
@ -56,7 +196,11 @@ export default {
SizeSelect,
Search
},
computed: {
notice() {
return notice
},
...mapGetters([
'sidebar',
'avatar',
@ -80,6 +224,37 @@ export default {
}
},
methods: {
cancel() {
this.open = false;
this.reset();
},
reset() {
this.form = {
noticeId: undefined,
noticeTitle: undefined,
noticeType: undefined,
noticeContent: undefined,
status: "0"
};
this.resetForm("form");
},
//阅读消息
readNoticeChilk(no) {
let noticeId = no.noticeId;
readNotice(noticeId).then(res => {
this.getNoticeList();
this.$modal.msgSuccess("阅读成功");
})
},
getNoticeList() {
listNoticeByNotice(this.notice).then(res => {
this.noticeList = res.data;
console.log(res);
})
},
toggleSideBar() {
this.$store.dispatch('app/toggleSideBar')
},

2
src/utils/request.js
View File

@ -73,7 +73,7 @@ service.interceptors.request.use(config => {
// 响应拦截器
service.interceptors.response.use(res => {
debugger
//debugger
// 未设置状态码则默认成功状态
const code = res.data.code || 200;
// 获取错误信息

139
src/views/system/notice/index.vue
View File

@ -99,6 +99,12 @@
</el-table-column>
<el-table-column align="center" class-name="small-padding fixed-width" label="操作">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="handleLook(scope.row)"
>查看详情
</el-button>
<el-button
v-hasPermi="['system:notice:edit']"
icon="el-icon-edit"
@ -138,17 +144,17 @@
</el-col>
<el-col :span="12">
<el-form-item label="公告类型" prop="noticeType">
<el-select v-model="form.noticeType" placeholder="请选择公告类型">
<el-select v-model="form.noticeType" placeholder="请选择公告类型" @change="zzzzzz">
<el-option
v-for="dict in dict.type.sys_notice_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-col :span="12">
<el-form-item label="状态">
<el-radio-group v-model="form.status">
<el-radio
@ -160,12 +166,59 @@
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<div class="block" v-show="timeShow">
<span class="demonstration">开始时间</span>
<el-date-picker
v-model="form.startTime"
type="datetime"
placeholder="选择开始日期时间" value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</div>
<div class="block" v-show="timeShow">
<span class="demonstration">截止时间</span>
<el-date-picker
v-model="form.endTime"
type="datetime"
placeholder="选择截止日期时间" value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</div>
</el-col>
<el-col :span="24">
<el-form-item label="内容">
<editor v-model="form.noticeContent" :min-height="192"/>
</el-form-item>
</el-col>
</el-row>
<div v-show="ssss">
<span>总计数数量:{{form.totalCount}}</span> --
<span>未读数量:{{form.unreadCount}}</span> --
<span>已读数量:{{form.readCount}}</span>
</div>
<el-col :span="12" v-show="empShow">
<el-input v-model="form.deptIds" />
<el-form-item label="归属部门" >
<el-cascader v-model="form.deptIds" :show-all-levels="false" :options="deptOptions" :props="props" clearable style="width: 60%;"/>
</el-form-item>
</el-col>
<el-col :span="12" v-show="empShow">
<el-input v-model="form.userIds" />
<el-form-item label="特定人员" >
<el-select v-model="form.userIds" multiple placeholder="请选择">
<el-option
v-for="item in userList"
:key="item.userId"
:label="item.userName"
:value="item.userId">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
@ -176,13 +229,40 @@
</template>
<script>
import {addNotice, delNotice, getNotice, listNotice, updateNotice} from "@/api/system/notice";
import {
addNotice,
delNotice,
getNotice,
getNoticeAndCount,
listNotice,
listNoticeByNotice,
updateNotice
} from "@/api/system/notice";
import {deptTreeSelect, getUserList} from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import {listDept} from "@/api/system/dept";
export default {
name: "Notice",
components: {Treeselect},
dicts: ['sys_notice_status', 'sys_notice_type'],
data() {
return {
userList:[],
//级联配置
props: {
multiple: true,
value: 'deptId',
label: 'deptName'
},
//显示阅读数量
ssss:false,
//部门树形结构
deptOptions: [],
//是否展示时间选择器
timeShow:false,
//是否展示人员选项
empShow:false,
// 遮罩层
loading: true,
// 选中数组
@ -209,6 +289,8 @@ export default {
createBy: undefined,
status: undefined
},
// 级联选择器配置
// 表单参数
form: {},
// 表单校验
@ -224,8 +306,42 @@ export default {
},
created() {
this.getList();
},
methods: {
/**
* 部门级联下拉列表
*/
getDeptTree() {
listDept().then(response => {
this.deptOptions = this.handleTree(response.data,"deptId","parentId","children");
});
},
/**
* 展示所有用户
*/
getSelUserAll(){
getUserList().then(res=>{
this.userList = res;
})
},
zzzzzz(){
//传入的值是1 为通知 显示 部门和特定人员的tab框
//传入值是2 为公告 显示 时间选择框
console.log(this.form.noticeType);
let noticeType = this.form.noticeType;
if (noticeType == 2){
this.timeShow = true;
this.empShow = false;
}else {
this.timeShow = false;
this.empShow=true;
}
},
/** 查询公告列表 */
getList() {
this.loading = true;
@ -240,6 +356,7 @@ export default {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
@ -272,7 +389,21 @@ export default {
this.reset();
this.open = true;
this.title = "添加公告";
this.getDeptTree();
this.getSelUserAll();
},
/** 查看按钮操作 */
handleLook(row){
this.reset();
const noticeId = row.noticeId || this.ids
getNoticeAndCount(noticeId).then(response => {
this.form = response.data;
this.open = true;
this.title = "通知详情";
this.ssss =true;
});
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();