1
0
mirror of https://github.com/FatttSnake/Pinnacle-OA.git synced 2026-04-05 15:01:23 +08:00

Redesign the page of NoticeView.vue

This commit is contained in:
cccccyb
2023-05-17 03:47:51 +08:00
parent 739971d14b
commit 5afd8ff4e3
11 changed files with 341 additions and 163 deletions

View File

@@ -4,6 +4,8 @@ import com.cfive.pinnacle.entity.NoticeType;
import com.cfive.pinnacle.entity.common.ResponseCode;
import com.cfive.pinnacle.entity.common.ResponseResult;
import com.cfive.pinnacle.service.INoticeTypeService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;
@@ -22,6 +24,8 @@ import java.util.List;
@RequestMapping("/noticeType")
@CrossOrigin
public class NoticeTypeController {
private final Logger LOGGER = LoggerFactory.getLogger(getClass());
@Autowired
INoticeTypeService noticeTypeService;
@@ -41,9 +45,8 @@ public class NoticeTypeController {
return ResponseResult.build(code, msg, selectTypeList);
}
@PutMapping
@GetMapping("/update")
public ResponseResult updateTypeEnableById(String typeId,Boolean enable){
System.out.println(typeId+'\t'+enable);
Long tid=null;
Integer isEnable = null;
if (StringUtils.hasText(typeId)&&null!=enable){

View File

@@ -99,11 +99,14 @@ public class NoticeServiceImpl extends ServiceImpl<NoticeMapper, Notice> impleme
@Override
public Boolean updateNotice(Notice notice) {
noticeMapper.update(null, new UpdateWrapper<Notice>().eq("id", notice.getId()).set("old", 1)); //修改原始数据
LambdaQueryWrapper<NoticeReceive> lqw = new LambdaQueryWrapper<>();
lqw.eq(NoticeReceive::getNoticeId, notice.getId());
noticeReceiveMapper.delete(lqw);
notice.setOriginId(notice.getId());
notice.setId(null); //清除id使新插入的数据id重新生成
notice.setModifyTime(null);
notice.setOld(0);
return noticeMapper.insert(notice) > 0;
return this.addNotice(notice);
}
@Override

View File

@@ -31,7 +31,9 @@
and notice_receive.already_read=#{readStatus}
</if>
and notice_receive.user_id=#{userId}
and notice_receive.deleted=0
</where>
order by n.send_time desc
</select>
<resultMap id="selectAllMap" type="notice" autoMapping="true">
<id property="id" column="nid"/>

View File

@@ -112,7 +112,7 @@ export default {
rules: {
title: [
{ required: true, message: '请输入公告标题', trigger: 'blur' },
{ min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
],
typeId: [
{ required: true, message: '请选择公告类型', trigger: 'change' }
@@ -137,7 +137,7 @@ export default {
submitForm() {
this.addData.top=this.addData.top?1:0;
const receiveId=[]
if (this.addData.receivers!==[]){
if (this.addData.receivers.length!=null){
for (let i = 0; i < this.addData.receivers.length; i++) {
receiveId.push(this.addData.receivers[i][1])
}

View File

@@ -1,10 +1,5 @@
<template>
<el-button
size="large"
@click="clearFilter"
style="background-color: rgba(71, 138, 173, 0.85); color: white"
>清除筛选条件
</el-button>
<el-button size="large" @click="clearFilter" type="primary">清除筛选条件 </el-button>
<el-table
v-loading="loading"
element-loading-text="加载中..."
@@ -13,22 +8,24 @@
border
highlight-current-row
@selection-change="handleSelectionChange"
style="font-size: 18px"
:header-cell-style="{
background: 'darksalmon',
'text-align': 'center',
color: '#fff',
'font-size': '20px'
}"
><el-table-column type="selection" width="55" />
<el-table-column type="index" label="序号" width="70" />
><el-table-column type="selection" width="55" align="center" />
<el-table-column type="index" label="序号" width="70" align="center" />
<el-table-column
prop="title"
label="公告标题"
width="180"
width="200"
:formatter="formatter"
show-overflow-tooltip
align="center"
/>
<el-table-column prop="noticeType.name" label="公告类别" width="150">
<el-table-column prop="noticeType.name" label="公告类别" width="160" align="center">
<template #default="scope">
<el-tag
size="default"
@@ -39,27 +36,30 @@
</el-tag>
</template>
</el-table-column>
<el-table-column prop="priority" label="优先级" width="100" />
<el-table-column prop="priority" label="优先级" width="100" align="center" />
<el-table-column
prop="createTime"
label="创建时间"
sortable
width="180"
width="220"
:formatter="formatDate"
align="center"
/>
<el-table-column
prop="sendTime"
label="生效时间"
sortable
width="180"
width="220"
:formatter="formatDate"
align="center"
/>
<el-table-column
prop="endTime"
label="失效时间"
sortable
width="180"
width="220"
:formatter="formatDate"
align="center"
/>
<el-table-column
prop="sender.username"
@@ -69,6 +69,7 @@
:filters="filterSenderName"
:filter-method="filterTag"
filter-placement="bottom-end"
align="center"
>
<template #default="scope">
<el-tag
@@ -78,7 +79,7 @@
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="200">
<el-table-column label="操作" min-width="200px" align="center">
<template #default="scope">
<el-button size="small" color="#626aef" @click="handleShow(scope.$index, scope.row)"
>查看
@@ -235,6 +236,9 @@ export default {
</script>
<style scoped>
.el-table {
margin-top: 10px;
}
.pagination {
margin: 30px 400px;
}

View File

@@ -1,19 +1,21 @@
<template>
<el-descriptions direction="vertical" :column="3" border>
<template #title>{{ this.noticeShowData.title }}</template>
<el-descriptions-item label="发布人"
<el-descriptions-item label="发布人" width="120"
><el-tag size="large" type="success">{{
this.noticeShowData.sender.username
}}</el-tag></el-descriptions-item
>
<el-descriptions-item label="生效时间">{{
<el-descriptions-item label="生效时间" width="180">{{
formatDate(this.noticeShowData.sendTime)
}}</el-descriptions-item>
<el-descriptions-item label="优先级" :span="12">{{
this.noticeShowData.priority
}}</el-descriptions-item>
<el-descriptions-item label="公告类型">
<el-tag size="large">{{ this.noticeShowData.noticeType.name }}</el-tag>
<el-descriptions-item label="公告类型"
><el-tag size="large">{{
this.noticeShowData.noticeType.name
}}</el-tag></el-descriptions-item
>
<el-descriptions-item label="优先级"
>{{ this.noticeShowData.priority }}
</el-descriptions-item>
<el-descriptions-item label="失效时间">{{
formatDate(this.noticeShowData.endTime)

View File

@@ -22,7 +22,7 @@
<template #default="scope">
<el-switch
v-model="scope.row.enable"
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #afb2b8"
active-text="启用"
inactive-text="禁用"
@change="switchChang(scope.row.id, scope.row.enable)"
@@ -100,9 +100,10 @@ export default {
this.multipleSelection = val
},
switchChang(id, value) {
if (!noticeStore.updateNoticeTypeEnable(id, value)) {
noticeStore.updateNoticeTypeEnable(id, value)
setTimeout(() => {
noticeStore.selectNoticeType()
}
}, 800)
},
handleEdit(index, row) {
noticeStore.$patch((state) => {

View File

@@ -1,103 +1,189 @@
<template>
<el-table
v-loading="this.loading"
element-loading-text="加载中..."
ref="tableRef"
:data="this.selectData"
style="width: 100%"
border
highlight-current-row
:header-cell-style="{
background: 'darksalmon',
'text-align': 'center',
color: '#fff',
'font-size': '20px'
}"
<div class="myTimeline">
<el-timeline>
<el-timeline-item
v-for="notice in selectData"
:key="notice.id"
:timestamp="formatDate(notice.sendTime)"
placement="top"
>
<el-table-column
prop="title"
label="公告标题"
width="180"
:formatter="formatter"
show-overflow-tooltip
/>
<el-table-column prop="noticeType.name" label="公告类别" width="150">
<template #default="scope">
<el-tag
size="default"
:type="scope.row.noticeType.name === '通知公告' ? 'warning' : 'success'"
disable-transitions
>
{{ scope.row.noticeType.name }}
</el-tag>
<template #dot v-if="notice.isRead === 0">
<el-badge is-dot class="item" />
</template>
</el-table-column>
<el-table-column prop="priority" label="优先级" width="100" />
<el-table-column prop="isRead" label="公告状态" width="180">
<template #default="scope">
<el-tag
size="large"
:type="scope.row.isRead === 0 ? 'danger' : 'success'"
disable-transitions
>
{{ scope.row.isRead === 0 ? '未读' : '已读' }}
</el-tag>
</template>
</el-table-column>
<el-table-column
prop="sendTime"
label="生效时间"
sortable
width="180"
:formatter="formatDate"
/>
<el-table-column
prop="endTime"
label="失效时间"
sortable
width="180"
:formatter="formatDate"
/>
<el-table-column
prop="sender.username"
label="发布人"
width="100"
column-key="senderName"
:filters="filterSenderName"
:filter-method="filterTag"
filter-placement="bottom-end"
>
<template #default="scope">
<el-tag
:type="scope.row.sender.username === 'cyb' ? '' : 'success'"
disable-transitions
>{{ scope.row.sender.username }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="200">
<template #default="scope">
<el-button size="small" color="#626aef" @click="handleShow(scope.$index, scope.row)"
>查看
</el-button>
<el-button size="small" type="danger" @click="modifyStatus(scope.row)"
>标记为{{ scope.row.isRead === 0 ? '已读' : '未读' }}
</el-button>
</template>
</el-table-column>
</el-table>
<el-card @click="showNoticeDetail(notice)">
<h4></h4>
<p>Tom committed 2018/4/12 20:46</p>
</el-card>
</el-timeline-item>
</el-timeline>
<!-- 查看会话框-->
<el-dialog v-model="dialogShowVisible" center>
<template #header>
<h2 style="color: red">查看公告</h2>
<h2 style="color: red">公告详情</h2>
</template>
<notice-show-dialog />
</el-dialog>
<!-- <el-collapse-->
<!-- @change="handleChange"-->
<!-- v-loading="this.loading"-->
<!-- element-loading-text="加载中..."-->
<!-- >-->
<!-- <el-collapse-item v-for="notice in selectData" :key="notice.id" :name="notice.id">-->
<!-- <template #title>-->
<!-- <el-tag-->
<!-- size="small"-->
<!-- :type="-->
<!-- notice.noticeType.name === '通知公告'-->
<!-- ? 'warning'-->
<!-- : notice.noticeType.name === '紧急公告'-->
<!-- ? 'danger'-->
<!-- : 'success'-->
<!-- "-->
<!-- disable-transitions-->
<!-- style="margin-right: 30px"-->
<!-- >-->
<!-- {{ notice.noticeType.name }}-->
<!-- </el-tag>-->
<!-- <h3>{{ notice.title }}</h3>-->
<!-- </template>-->
<!-- <div>-->
<!-- <el-card class="box-card" shadow="always">-->
<!-- <template #header>-->
<!-- <div class="card-header">-->
<!-- <h4>优先级</h4>-->
<!-- <el-tag effect="light" size="large">{{ notice.priority }}</el-tag>-->
<!-- </div>-->
<!-- <div class="card-header">-->
<!-- <h4>发布者</h4>-->
<!-- <el-tag effect="light" size="large">{{-->
<!-- notice.sender.username-->
<!-- }}</el-tag>-->
<!-- </div>-->
<!-- </template>-->
<!-- <h2 class="contentTitle">公告内容</h2>-->
<!-- <div class="content">-->
<!-- {{ notice.content }}-->
<!-- </div>-->
<!-- <div class="date">-->
<!-- <div class="sendTime">-->
<!-- <h4>生效日期</h4>-->
<!-- <el-tag effect="plain" size="large" type="success">{{-->
<!-- formatDate(notice.sendTime)-->
<!-- }}</el-tag>-->
<!-- </div>-->
<!-- <div class="endTime">-->
<!-- <h4>失效日期</h4>-->
<!-- <el-tag effect="plain" size="large" type="info">{{-->
<!-- formatDate(notice.endTime)-->
<!-- }}</el-tag>-->
<!-- </div>-->
<!-- </div>-->
<!-- </el-card>-->
<!-- </div>-->
<!-- </el-collapse-item>-->
<!-- </el-collapse>-->
</div>
<!-- <el-table-->
<!-- v-loading="this.loading"-->
<!-- element-loading-text="加载中..."-->
<!-- ref="tableRef"-->
<!-- :data="this.selectData"-->
<!-- style="font-size: 18px"-->
<!-- border-->
<!-- highlight-current-row-->
<!-- :header-cell-style="{-->
<!-- background: 'darksalmon',-->
<!-- 'text-align': 'center',-->
<!-- color: '#fff',-->
<!-- 'font-size': '20px'-->
<!-- }"-->
<!-- >-->
<!-- <el-table-column-->
<!-- prop="title"-->
<!-- label="公告标题"-->
<!-- width="230"-->
<!-- :formatter="formatter"-->
<!-- show-overflow-tooltip-->
<!-- align="center"-->
<!-- />-->
<!-- <el-table-column prop="noticeType.name" label="公告类别" width="180" align="center">-->
<!-- <template #default="scope">-->
<!-- <el-tag-->
<!-- size="default"-->
<!-- :type="scope.row.noticeType.name === '通知公告' ? 'warning' : 'success'"-->
<!-- disable-transitions-->
<!-- >-->
<!-- {{ scope.row.noticeType.name }}-->
<!-- </el-tag>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column prop="priority" label="优先级" width="100" align="center" />-->
<!-- <el-table-column prop="isRead" label="公告状态" width="180" align="center">-->
<!-- <template #default="scope">-->
<!-- <el-tag-->
<!-- size="large"-->
<!-- :type="scope.row.isRead === 0 ? 'danger' : 'success'"-->
<!-- disable-transitions-->
<!-- >-->
<!-- {{ scope.row.isRead === 0 ? '未读' : '已读' }}-->
<!-- </el-tag>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="sendTime"-->
<!-- label="生效时间"-->
<!-- sortable-->
<!-- width="250"-->
<!-- :formatter="formatDate"-->
<!-- align="center"-->
<!-- />-->
<!-- <el-table-column-->
<!-- prop="endTime"-->
<!-- label="失效时间"-->
<!-- sortable-->
<!-- width="250"-->
<!-- :formatter="formatDate"-->
<!-- align="center"-->
<!-- />-->
<!-- <el-table-column-->
<!-- prop="sender.username"-->
<!-- label="发布人"-->
<!-- width="130"-->
<!-- column-key="senderName"-->
<!-- :filters="filterSenderName"-->
<!-- :filter-method="filterTag"-->
<!-- filter-placement="bottom-end"-->
<!-- align="center"-->
<!-- >-->
<!-- <template #default="scope">-->
<!-- <el-tag-->
<!-- :type="scope.row.sender.username === 'cyb' ? '' : 'success'"-->
<!-- disable-transitions-->
<!-- >{{ scope.row.sender.username }}-->
<!-- </el-tag>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column label="操作" align="center">-->
<!-- <template #default="scope">-->
<!-- <el-button size="small" color="#626aef" @click="handleShow(scope.$index, scope.row)"-->
<!-- >查看-->
<!-- </el-button>-->
<!-- <el-button size="small" type="danger" @click="modifyStatus(scope.row)"-->
<!-- >标记为{{ scope.row.isRead === 0 ? '已读' : '未读' }}-->
<!-- </el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- &lt;!&ndash; 查看会话框&ndash;&gt;-->
<!-- <el-dialog v-model="dialogShowVisible" center>-->
<!-- <template #header>-->
<!-- <h2 style="color: red">查看公告</h2>-->
<!-- </template>-->
<!-- <notice-show-dialog />-->
<!-- </el-dialog>-->
</template>
<script lang="ts">
// import { storeToRefs } from 'pinia'
// const { selectData, getLoading } = storeToRefs(noticeViewStore)
import { mapState } from 'pinia'
import { useNoticeStore } from '@/store/notice'
const noticeStore = useNoticeStore()
@@ -110,24 +196,22 @@ export default {
},
props: [],
methods: {
// ...mapActions(useNoticeStore, ['selectAllNoticeByUserId']),
clearFilter() {
this.$refs.tableRef.clearFilter(['senderName'])
this.$emit('clearFilter')
showNoticeDetail(data) {
noticeStore.$patch((state) => {
state.dialogShowVisible = true
state.noticeShowData = data
})
},
formatter(row, column) {
return row.title
formatDate(date) {
if (date == null) return null
return new Date(date).toLocaleString()
},
filterTag(value, row) {
return row.sender.username === value
},
formatDate(row, column) {
// 获取单元格数据
const data = row[column.property]
if (data == null) return '暂无数据'
return new Date(data).toLocaleString()
modifyStatus(row) {
console.log(row)
},
modifyStatus(row) {},
handleShow(index, row) {
noticeStore.$patch((state) => {
state.dialogShowVisible = true
@@ -136,23 +220,7 @@ export default {
}
},
mounted() {},
updated() {
this.$refs.tableRef.clearFilter(['senderName'])
this.filterSenderName = []
const nameArray = []
for (let i = 0; i < this.selectData.length; i++) {
nameArray.push(this.selectData[i].sender.username)
}
const newArr = nameArray.filter((item, i, arr) => {
return arr.indexOf(item) === i
})
for (let j = 0; j < newArr.length; j++) {
const senderName = { text: '', value: '' }
senderName.text = newArr[j]
senderName.value = newArr[j]
this.filterSenderName.push(senderName)
}
},
updated() {},
computed: {
...mapState(useNoticeStore, [
'selectData',
@@ -165,7 +233,67 @@ export default {
</script>
<style scoped>
.el-table {
margin-top: 10px;
.myTimeline {
margin-top: 20px;
}
.el-timeline {
--el-timeline-node-size-normal: 16px;
--el-timeline-node-size-large: 16px;
}
/deep/ .el-badge__content.is-dot {
height: 16px;
width: 16px;
}
/deep/ .el-timeline-item__timestamp.is-top {
font-size: 16px;
font-weight: 600;
}
.el-collapse {
--el-collapse-header-height: 68px;
}
/deep/ .el-collapse-item__header {
padding-left: 25px;
font-weight: 400;
border-bottom: 2px solid #dcdfe6;
}
.box-card {
font-size: 16px;
}
/deep/ .el-card__header {
border-bottom: 1px dashed #6bd4ff;
}
.card-header {
display: inline-block;
margin-right: 40px;
}
.el-tag {
font-size: 15px;
}
.contentTitle {
font-size: 20px;
font-weight: bold;
}
.content {
margin-top: 20px;
margin-left: 20px;
height: fit-content;
}
.date {
margin-top: 50px;
}
.sendTime {
display: inline-block;
margin-right: 25px;
}
.endTime {
display: inline-block;
}
h3 {
font-weight: 550;
font-size: 18px;
}
h4 {
font-weight: 500;
display: inline-block;
}
</style>

View File

@@ -6,8 +6,11 @@
<el-main>
<el-button
size="large"
style="background-color: rgba(71, 138, 173, 0.85); color: white"
type="primary"
@click="openAddNoticeDialog"
style="margin-right: 15px"
><el-icon :size="SIZE_ICON_MD()" style="color: white; margin-right: 3px">
<icon-pinnacle-add /> </el-icon
>发布公告</el-button
>
<!-- 添加公告对话框-->
@@ -32,6 +35,7 @@ import 'element-plus/theme-chalk/el-message-box.css'
import request from '@/services'
import { useNoticeStore } from '@/store/notice'
import { mapState } from 'pinia'
import { SIZE_ICON_MD } from '@/constants/Common.constants'
const noticeStore = useNoticeStore()
export default {
@@ -40,6 +44,9 @@ export default {
return {}
},
methods: {
SIZE_ICON_MD() {
return SIZE_ICON_MD
},
selectByCond(currentPage, pageSize, search) {
request
.get('/notice/page', {

View File

@@ -21,6 +21,8 @@
</template>
<script lang="ts">
import { useNoticeStore } from '@/store/notice'
const noticeStore = useNoticeStore()
export default {
name: 'NoticeView',
data() {
@@ -31,7 +33,9 @@ export default {
console.log(key, keyPath)
}
},
mounted() {}
mounted() {
noticeStore.selectEnableNoticeType()
}
}
</script>

View File

@@ -16,7 +16,33 @@ export const useNoticeStore = defineStore('notice', {
state: () => {
return {
total: 0,
selectData: [],
selectData: [
{
content: '',
createTime: '',
endTime: '',
id: '',
modifyTime: '',
priority: 0,
receivers: [],
sendTime: '',
title: '',
top: 0,
isRead: 0,
noticeType: {
id: '',
name: '',
enable: 0
},
sender: {
id: '',
username: '',
enable: 0
},
senderId: '',
typeId: ''
}
],
loading: true,
dialogShowVisible: false,
dialogAddVisible: false,
@@ -152,7 +178,7 @@ export const useNoticeStore = defineStore('notice', {
},
async updateNoticeTypeEnable(typeId: string, enable: boolean) {
await request
.put('/noticeType', {
.get('/noticeType/update', {
typeId,
enable
})
@@ -162,13 +188,11 @@ export const useNoticeStore = defineStore('notice', {
message: '修改成功.',
type: 'success'
})
return true
} else if (response.data.code === 20033) {
ElMessage({
message: response.data.msg,
type: 'error'
})
return false
}
})
}