学工发布通知前端页面和查看工作台我的消息模块修改
This commit is contained in:
MDSMO
@@ -8,57 +8,57 @@
|
||||
|
||||
<div class="text-list">
|
||||
<div>
|
||||
<div>姓名:</div>
|
||||
<div>姓名：</div>
|
||||
<div id="nickname">{{ user.nickName }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>用户名称:</div>
|
||||
<div>用户名称：</div>
|
||||
<div>{{ user.userName }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>手机号码:</div>
|
||||
<div>手机号码：</div>
|
||||
<div>{{ user.phonenumber }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>用户邮箱:</div>
|
||||
<div>用户邮箱：</div>
|
||||
<div>{{ user.email }}</div>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<div>所属部门:</div>
|
||||
<div>所属部门：</div>
|
||||
<div>{{ user.dept.deptName }} / {{ postGroup }}</div>
|
||||
</div> -->
|
||||
<div>
|
||||
<div>所属角色:</div>
|
||||
<div>所属角色：</div>
|
||||
<div>{{ displayRole(roleGroup) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="overflow: hidden;text-overflow: ellipsis">
|
||||
<div class="home-page-title">
|
||||
<div>我的消息</div>
|
||||
<div>更多 <span>></span></div>
|
||||
<div @click="showMessageDialog" style="cursor: pointer;">更多 <span>></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="home-page-content">
|
||||
<div v-if="!isEmpty(msg_list)" v-for="(v, i) in msg_list" :key="i">
|
||||
<div v-if="!isEmpty(msg_list)" v-for="(v, i) in msg_list" :key="i" class="message-item" @click="showMessageDetail(v, i)">
|
||||
<div>{{ v.content }}</div>
|
||||
<!-- <div>2024-09-24</div>-->
|
||||
</div>
|
||||
<!-- <div v-else>
|
||||
</div>
|
||||
<div v-else>
|
||||
暂无消息
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="overflow: hidden;text-overflow: ellipsis">
|
||||
<div class="home-page-title">
|
||||
<div>公示栏</div>
|
||||
<div>更多 <span>></span></div>
|
||||
<div @click="showAnnouncementDialog" style="cursor: pointer;">更多 <span>></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="home-page-content">
|
||||
<div v-for="(v, i) in comp_list.slice(0, 9)" :key="i">
|
||||
<div v-for="(v, i) in comp_list.slice(0, 9)" :key="i" class="announcement-item" @click="showAnnouncementDetail(v, i)">
|
||||
<div>{{ v.submitterName }}--{{ v.projectName }} -- 审核通过</div>
|
||||
<div>{{ formatTime(v.createTime) }}</div>
|
||||
</div>
|
||||
@@ -236,8 +236,107 @@
|
||||
<jwc-bottom v-if="checkPermi(['home:xg:undo1'])" v-hasPermi="['home:xg:undo1']" ref="child10" />
|
||||
<sjUndo v-if="checkPermi(['home:sj:undo1'])" v-hasPermi="['home:sj:undo1']" ref="child11" />
|
||||
</div>
|
||||
|
||||
<!-- 我的消息详情对话框 -->
|
||||
<el-dialog
|
||||
title="我的消息详情"
|
||||
:visible.sync="messageDialogVisible"
|
||||
width="80%"
|
||||
:show-close="true"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false">
|
||||
<div class="message-dialog-content">
|
||||
<el-table :data="msg_list" style="width: 100%" max-height="400">
|
||||
<el-table-column prop="content" label="消息内容" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<div class="message-content clickable-row" @click="viewMessageDetail(scope.row)">{{ scope.row.content }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" width="180" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ formatTime(scope.row.createTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div v-if="isEmpty(msg_list)" class="empty-data">
|
||||
<i class="el-icon-info"></i>
|
||||
<p>暂无消息数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 公示栏详情对话框 -->
|
||||
<el-dialog
|
||||
title="公示栏详情"
|
||||
:visible.sync="announcementDialogVisible"
|
||||
width="80%"
|
||||
:show-close="true"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false">
|
||||
<div class="announcement-dialog-content">
|
||||
<el-table :data="comp_list" style="width: 100%" max-height="400">
|
||||
<el-table-column prop="submitterName" label="提交人" width="120" align="center" />
|
||||
<el-table-column prop="projectName" label="项目名称" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<div class="project-name clickable-row" @click="viewAnnouncementDetail(scope.row)">{{ scope.row.projectName }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="100" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="success" size="small">审核通过</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" width="180" align="center">
|
||||
<template slot-scope="scope">
|
||||
{{ formatTime(scope.row.createTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div v-if="isEmpty(comp_list)" class="empty-data">
|
||||
<i class="el-icon-info"></i>
|
||||
<p>暂无公示数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 消息详情模态框 -->
|
||||
<div v-if="messageDetailVisible" class="detail-modal-overlay" @click.self="hideMessageDetail">
|
||||
<div class="detail-modal-content">
|
||||
<div class="detail-modal-header">
|
||||
<h4>消息详情</h4>
|
||||
<div class="detail-time" v-if="currentMessageDetail.createTime">
|
||||
{{ formatTime(currentMessageDetail.createTime) }}
|
||||
</div>
|
||||
<button class="detail-close-btn" @click="hideMessageDetail">×</button>
|
||||
</div>
|
||||
<div class="detail-modal-body">
|
||||
<div class="detail-content-section">
|
||||
<div class="detail-content-text">{{ currentMessageDetail.content || '暂无内容' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 公示详情模态框 -->
|
||||
<div v-if="announcementDetailVisible" class="detail-modal-overlay" @click.self="hideAnnouncementDetail">
|
||||
<div class="detail-modal-content">
|
||||
<div class="detail-modal-header">
|
||||
<h4>公示详情</h4>
|
||||
<div class="detail-time" v-if="currentAnnouncementDetail.createTime">
|
||||
{{ formatTime(currentAnnouncementDetail.createTime) }}
|
||||
</div>
|
||||
<button class="detail-close-btn" @click="hideAnnouncementDetail">×</button>
|
||||
</div>
|
||||
<div class="detail-modal-body">
|
||||
<div class="detail-content-section">
|
||||
<div class="detail-content-text">{{ currentAnnouncementDetail.projectName || '暂无项目名称' }} - {{ currentAnnouncementDetail.submitterName || '暂无提交人' }} - 审核通过</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.home-main-box {
|
||||
padding: 20px;
|
||||
@@ -480,6 +579,191 @@
|
||||
.going:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 对话框样式 */
|
||||
.message-dialog-content,
|
||||
.announcement-dialog-content {
|
||||
.message-content,
|
||||
.project-name {
|
||||
max-width: 300px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.clickable-row {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.empty-data {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
color: #999;
|
||||
|
||||
i {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 对话框表格样式优化 */
|
||||
.el-dialog__body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
.el-table__header-wrapper {
|
||||
th {
|
||||
background-color: #f5f7fa;
|
||||
color: #606266;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__row {
|
||||
&:hover {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 消息和公示项目的悬停样式 */
|
||||
.message-item,
|
||||
.announcement-item {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 2px;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 详情模态框样式 */
|
||||
.detail-modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9999;
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.detail-modal-content {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
animation: slideInScale 0.3s ease-out;
|
||||
|
||||
.detail-modal-header {
|
||||
background: white;
|
||||
color: #333;
|
||||
padding: 10px 24px;
|
||||
border-bottom: 1px solid #eee;
|
||||
border-radius: 8px 8px 0 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.detail-time {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 24px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.detail-close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #666;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail-modal-body {
|
||||
padding: 24px;
|
||||
padding-top: 40px; // 为标题下方的时间留出空间
|
||||
.detail-content-section {
|
||||
.detail-content-text {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 模态框动画效果 */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInScale {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9) translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
@@ -504,7 +788,6 @@ import sjUndo from "./comps/sj-undo.vue";
|
||||
|
||||
import { isEmpty } from "@/api/helpFunc";
|
||||
import { checkPermi } from "@/utils/permission";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
JwcUndo, XwUndo, FdyUndo, StuUndo,
|
||||
@@ -597,17 +880,68 @@ export default {
|
||||
}
|
||||
},
|
||||
async listMyMsg() {
|
||||
let res = await listMsg();
|
||||
// 获取当前登录用户的ID
|
||||
const userId = this.user.userId;
|
||||
console.log("userId", userId);
|
||||
let res = await listMsg({receiver: userId});
|
||||
if (res.rows.length > 0) {
|
||||
this.have_msg = true;
|
||||
this.msg_list = [...res.rows];
|
||||
}
|
||||
},
|
||||
|
||||
// 显示我的消息详情对话框
|
||||
showMessageDialog() {
|
||||
this.messageDialogVisible = true;
|
||||
},
|
||||
|
||||
// 查看消息详情 - 统一处理函数
|
||||
viewMessageDetail(row) {
|
||||
this.currentMessageDetail = row;
|
||||
this.messageDetailVisible = true;
|
||||
|
||||
},
|
||||
|
||||
// 显示消息详情 - 从首页点击进入
|
||||
showMessageDetail(messageData, index) {
|
||||
this.currentMessageDetail = messageData;
|
||||
this.currentMessageIndex = index;
|
||||
this.messageDetailVisible = true;
|
||||
},
|
||||
|
||||
// 隐藏消息详情
|
||||
hideMessageDetail() {
|
||||
this.messageDetailVisible = false;
|
||||
this.currentMessageDetail = {};
|
||||
this.currentMessageIndex = -1;
|
||||
},
|
||||
|
||||
// 显示公示详情 - 从首页点击进入
|
||||
showAnnouncementDetail(announcementData, index) {
|
||||
this.currentAnnouncementDetail = announcementData;
|
||||
this.currentAnnouncementIndex = index;
|
||||
this.announcementDetailVisible = true;
|
||||
},
|
||||
|
||||
// 隐藏公示详情
|
||||
hideAnnouncementDetail() {
|
||||
this.announcementDetailVisible = false;
|
||||
this.currentAnnouncementDetail = {};
|
||||
this.currentAnnouncementIndex = -1;
|
||||
},
|
||||
|
||||
// 显示公示栏详情对话框
|
||||
showAnnouncementDialog() {
|
||||
this.announcementDialogVisible = true;
|
||||
},
|
||||
|
||||
// 查看公示详情 - 统一处理函数
|
||||
viewAnnouncementDetail(row) {
|
||||
this.currentAnnouncementDetail = row;
|
||||
this.announcementDetailVisible = true;
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
data() {
|
||||
return {
|
||||
isEmpty,
|
||||
@@ -623,6 +957,18 @@ export default {
|
||||
|
||||
avatar: null,
|
||||
|
||||
// 对话框可见性控制
|
||||
messageDialogVisible: false,
|
||||
announcementDialogVisible: false,
|
||||
|
||||
// 详情模态框控制
|
||||
messageDetailVisible: false,
|
||||
announcementDetailVisible: false,
|
||||
currentMessageDetail: {},
|
||||
currentAnnouncementDetail: {},
|
||||
currentMessageIndex: -1,
|
||||
currentAnnouncementIndex: -1,
|
||||
|
||||
tableData: [{
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
@@ -655,5 +1001,4 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</script>
|
||||
344
src/views/routine/NotificationManagement/index.vue
Normal file
344
src/views/routine/NotificationManagement/index.vue
Normal file
@@ -0,0 +1,344 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="内容" prop="content">
|
||||
<el-input
|
||||
v-model="queryParams.content"
|
||||
placeholder="请输入通知内容"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['routine:NotificationManagement:add']"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['routine:NotificationManagement:edit']"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['routine:NotificationManagement:remove']"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
v-hasPermi="['routine:NotificationManagement:export']"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="NotificationManagementList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="序号" type="index" align="center" prop="id" />
|
||||
<el-table-column label="收信人用户id" align="center" prop="receiver" />
|
||||
<el-table-column label="消息内容" align="center" prop="content" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['routine:NotificationManagement:edit']"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['routine:NotificationManagement:remove']"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改通知管理对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<!-- 发送方式选择 -->
|
||||
<el-form-item label="发送方式" prop="sendType">
|
||||
<el-radio-group v-model="form.sendType" @change="handleSendTypeChange">
|
||||
<el-radio label="grade">按年级发送</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 年级多选 -->
|
||||
<el-form-item
|
||||
v-if="form.sendType === 'grade'"
|
||||
label="选择年级"
|
||||
prop="selectedGrades"
|
||||
>
|
||||
<el-select
|
||||
v-model="form.selectedGrades"
|
||||
multiple
|
||||
placeholder="请选择年级"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="grade in gradeList"
|
||||
:key="grade.value"
|
||||
:label="grade.label"
|
||||
:value="grade.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="消息内容" prop="content">
|
||||
<editor v-model="form.content" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">发送</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listNotificationManagement, getNotificationManagement, delNotificationManagement, addNotificationManagement, updateNotificationManagement, getGradeList, sendNotificationByGrades } from "@/api/routine/NotificationManagement";
|
||||
|
||||
export default {
|
||||
name: "NotificationManagement",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 通知管理表格数据
|
||||
NotificationManagementList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 年级列表
|
||||
gradeList: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
sender: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
sendType: [
|
||||
{ required: true, message: "请选择发送方式", trigger: "change" }
|
||||
],
|
||||
content: [
|
||||
{ required: true, message: "请输入消息内容", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getGradeList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询通知管理列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listNotificationManagement(this.queryParams).then(response => {
|
||||
this.NotificationManagementList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: null,
|
||||
sender: null,
|
||||
receiver: null,
|
||||
content: null,
|
||||
sendType: 'user',
|
||||
selectedGrades: [],
|
||||
createBy: null,
|
||||
createTime: null,
|
||||
updateBy: null,
|
||||
updateTime: null
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加通知管理";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids
|
||||
getNotificationManagement(id).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改通知管理";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
// 验证发送方式对应的必填字段
|
||||
if (this.form.sendType === 'user' && !this.form.receiver) {
|
||||
this.$modal.msgError("请输入收信人用户学号");
|
||||
return;
|
||||
}
|
||||
if (this.form.sendType === 'grade' && (!this.form.selectedGrades || this.form.selectedGrades.length === 0)) {
|
||||
this.$modal.msgError("请选择年级");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.form.id != null) {
|
||||
// 修改操作
|
||||
updateNotificationManagement(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
// 新增操作
|
||||
if (this.form.sendType === 'grade') {
|
||||
// 按年级发送
|
||||
const data = {
|
||||
content: this.form.content,
|
||||
selectedGrades: this.form.selectedGrades
|
||||
};
|
||||
sendNotificationByGrades(data).then(response => {
|
||||
this.$modal.msgSuccess("通知发送成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const ids = row.id || this.ids;
|
||||
this.$modal.confirm('是否确认删除通知管理编号为"' + ids + '"的数据项？').then(function() {
|
||||
return delNotificationManagement(ids);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('NotificationManagement/NotificationManagement/export', {
|
||||
...this.queryParams
|
||||
}, `NotificationManagement_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
|
||||
/** 获取年级列表 */
|
||||
getGradeList() {
|
||||
getGradeList().then(response => {
|
||||
// 假设后端返回的数据格式为 [{ gradeId: 1, gradeName: "2021级" }, ...]
|
||||
// 转换为下拉框需要的格式
|
||||
this.gradeList = response.data.map(item => ({
|
||||
value: item.gradeId || item.id,
|
||||
label: item.gradeName || item.name
|
||||
}));
|
||||
}).catch(() => {
|
||||
// 如果接口不存在，使用默认数据
|
||||
this.gradeList = [
|
||||
{ value: '2022', label: '2022级' },
|
||||
{ value: '2023', label: '2023级' },
|
||||
{ value: '2024', label: '2024级' }
|
||||
];
|
||||
});
|
||||
},
|
||||
|
||||
/** 发送方式改变时的处理 */
|
||||
handleSendTypeChange(value) {
|
||||
// 清空相关字段
|
||||
if (value === 'user') {
|
||||
this.form.selectedGrades = [];
|
||||
} else if (value === 'grade') {
|
||||
this.form.receiver = null;
|
||||
}
|
||||
|
||||
// 重新设置表单验证规则
|
||||
this.$nextTick(() => {
|
||||
this.$refs.form && this.$refs.form.clearValidate();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user