FatttSnake/Pinnacle-OA
1
0
Fork 0
mirror of https://github.com/FatttSnake/Pinnacle-OA.git synced 2026-04-05 06:51:23 +08:00
Code Packages Releases Activity

add the rightClick menu to update the top of notice

Browse Source
This commit is contained in:
cccccyb
2023-06-08 02:43:39 +08:00
parent dca76cdfaa
commit e52f07d192
4 changed files with 185 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
ui/src/components/notice/NoticeManageTable.vue
View File

@@ -7,6 +7,8 @@
border
highlight-current-row
@selection-change="handleSelectionChange"
@row-contextmenu="openClickMenu"
@row-click="handleShow"
:header-cell-style="{
background: 'darksalmon',
'text-align': 'center',
@@ -36,6 +38,7 @@
<el-table-column prop="noticeType.name" label="公告类别" width="100" align="center">
<template #default="scope">
<el-tag
disable-transitions
size="default"
:type="
scope.row.noticeType.name === '通知公告'
@@ -44,13 +47,11 @@
? 'danger'
: 'success'
"
disable-transitions
>
{{ scope.row.noticeType.name }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="priority" label="优先级" width="80" align="center" />
<el-table-column
prop="createTime"
label="创建时间"
@@ -59,6 +60,29 @@
:formatter="formatDate"
align="center"
/>
<el-table-column prop="priority" label="优先级" width="80" align="center">
<template #default="scope"
><el-tag
disable-transitions
:type="
scope.row.priority <= 4
? 'success'
: scope.row.priority <= 10
? 'warning'
: 'danger'
"
effect="plain"
>
{{
scope.row.priority <= 4
? '普通'
: scope.row.priority <= 10
? '优先'
: '紧急'
}}
</el-tag></template
>
</el-table-column>
<el-table-column
prop="sendTime"
label="生效时间"
@@ -85,11 +109,7 @@
align="center"
>
<template #default="scope">
<el-tag
:type="scope.row.sender.username === 'cyb' ? '' : 'success'"
disable-transitions
>{{ scope.row.sender.username }}
</el-tag>
<el-tag disable-transitions>{{ scope.row.sender.username }} </el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="200px" align="center">
@@ -146,12 +166,37 @@
</template>
<notice-show-dialog />
</el-dialog>
<!-- 表格鼠标右击下拉菜单-->
<ul
v-show="rightClickVisible"
:style="{ left: left + 'px', top: top + 'px' }"
class="contextmenu"
>
<li v-if="rightClickNotice.top === 0" @click.stop="modifyTop(rightClickNotice)">
<el-icon :size="SIZE_ICON_MD()">
<icon-pinnacle-top />
</el-icon>
置顶
</li>
<li v-if="rightClickNotice.top === 1" @click.stop="modifyTop(rightClickNotice)">
<el-icon :size="28">
<icon-pinnacle-cancel-top />
</el-icon>
取消置顶
</li>
<li>
<el-icon :size="SIZE_ICON_SM()">
<icon-pinnacle-label />
</el-icon>
新建标签
</li>
</ul>
</template>
<script lang="ts">
import { mapState } from 'pinia'
import { useNoticeStore } from '@/store/notice'
import { COLOR_TOP, SIZE_ICON_MD, SIZE_ICON_XS } from '@/constants/Common.constants'
import { COLOR_TOP, SIZE_ICON_MD, SIZE_ICON_SM, SIZE_ICON_XS } from '@/constants/Common.constants'
const noticeStore = useNoticeStore()
@@ -173,8 +218,22 @@ export default {
])
},
emits: ['handleDeleteById', 'getNoticeSender', 'filterSender'],
props: [],
data() {
return {
rightClickVisible: false,
rightClickNotice: {
id: '',
top: 0,
isRead: 0
},
top: 0,
left: 0
}
},
methods: {
SIZE_ICON_SM() {
return SIZE_ICON_SM
},
SIZE_ICON_XS() {
return SIZE_ICON_XS
},
@@ -265,6 +324,37 @@ export default {
state.search.userIdList = filters.senderId
})
this.$emit('filterSender')
},
openClickMenu(row, column, event) {
// 阻止元素发生默认的行为
event.preventDefault()
this.left = event.pageX
this.top = event.pageY
this.rightClickNotice = row
this.rightClickVisible = true
},
async modifyTop(notice) {
await noticeStore.modifyTop(notice)
this.closeMenu()
await noticeStore.selectAllNotice(this.currentPage, this.pageSize, '', '', '', '', [])
},
// 关闭菜单
closeMenu() {
this.rightClickVisible = false
}
},
watch: {
// 监听属性对象，newValue为新的值，也就是改变后的值
rightClickVisible(newValue, oldValue) {
if (newValue) {
// 菜单显示的时候
// 在body上添加事件处理程序
document.body.addEventListener('click', this.closeMenu)
} else {
// 菜单隐藏的时候
// 移除body上添加的事件处理程序
document.body.removeEventListener('click', this.closeMenu)
}
}
},
mounted() {
@@ -286,4 +376,28 @@ export default {
margin: 20px 0;
justify-content: center;
}
.contextmenu {
background: #fff;
z-index: 3000;
position: fixed;
list-style-type: none;
padding: 5px 0;
border-radius: 4px;
font-size: 16px;
font-weight: 500;
color: #333;
border: 1px solid #dadadc;
}
.contextmenu li {
display: flex;
align-items: center;
justify-content: center;
padding: 7px 16px;
cursor: pointer;
}
.contextmenu li:hover {
background: #eee;
}
</style>

39
ui/src/components/notice/NoticeShowDialog.vue
View File

@@ -4,15 +4,46 @@
><h2>{{ noticeShowData.title }}</h2></template
>
<el-descriptions-item label="发布者" width="120">
<el-tag size="large" type="success">{{ noticeShowData.sender.username }} </el-tag>
<el-tag size="large">{{ noticeShowData.sender.username }} </el-tag>
</el-descriptions-item>
<el-descriptions-item label="生效时间" width="180"
>{{ formatDate(noticeShowData.sendTime) }}
</el-descriptions-item>
<el-descriptions-item label="公告类型">
<el-tag size="large">{{ noticeShowData.noticeType.name }} </el-tag>
<el-tag
disable-transitions
size="default"
:type="
noticeShowData.noticeType.name === '通知公告'
? 'warning'
: noticeShowData.noticeType.name === '紧急公告'
? 'danger'
: 'success'
"
>
{{ noticeShowData.noticeType.name }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="优先级">{{ noticeShowData.priority }}</el-descriptions-item>
<el-descriptions-item label="优先级"
><el-tag
:type="
noticeShowData.priority <= 4
? 'success'
: noticeShowData.priority <= 10
? 'warning'
: 'danger'
"
effect="plain"
>
{{
noticeShowData.priority <= 4
? '普通'
: noticeShowData.priority <= 10
? '优先'
: '紧急'
}}
</el-tag></el-descriptions-item
>
<el-descriptions-item label="失效时间"
>{{ formatDate(noticeShowData.endTime) }}
</el-descriptions-item>
@@ -51,7 +82,7 @@ export default {
} else if (this.currentViewPage === 'AlRead') {
flag = 1
}
await noticeStore.selectAllNoticeSelf(flag)
await noticeStore.selectAllNoticeSelf(flag, '', '', '', '')
}
},
formatDate(date) {

26
ui/src/components/notice/NoticeViewCard.vue
View File

@@ -57,18 +57,6 @@
:style="{ left: left + 'px', top: top + 'px' }"
class="contextmenu"
>
<li v-if="rightClickNotice.top === 0" @click.stop="modifyTop(rightClickNotice)">
<el-icon :size="SIZE_ICON_MD()">
<icon-pinnacle-top />
</el-icon>
置顶
</li>
<li v-if="rightClickNotice.top === 1" @click.stop="modifyTop(rightClickNotice)">
<el-icon :size="28">
<icon-pinnacle-cancel-top />
</el-icon>
取消置顶
</li>
<li
v-if="rightClickNotice.isRead === 0"
@click.stop="modifyStatus(rightClickNotice)"
@@ -196,19 +184,6 @@ export default {
// 关闭菜单
closeMenu() {
this.rightClickVisible = false
},
async modifyTop(notice) {
await noticeStore.modifyTop(notice)
this.closeMenu()
let flag = 0
if (this.currentViewPage === 'All') {
flag = -1
} else if (this.currentViewPage === 'ToRead') {
flag = 0
} else if (this.currentViewPage === 'AlRead') {
flag = 1
}
await noticeStore.selectAllNoticeSelf(flag, '', '', '', '')
}
},
mounted() {},
@@ -332,7 +307,6 @@ h4 {
font-weight: 500;
color: #333;
border: 1px solid #dadadc;
//box-shadow: 1px 1px 1px 1px rgba(21, 21, 21, 0.3);
}
.contextmenu li {

33
ui/src/pages/notice/NoticeTypeManage.vue
View File

@@ -34,11 +34,11 @@
<notice-type-commit-form ref="addForm" />
<template #footer>
<span class="dialog-footer">
<el-button @click="resetForm" style="margin-right: 20px">重置</el-button>
<el-button type="primary" @click="submitForm" style="margin-right: 20px">
<el-button type="primary" @click="submitForm" class="marRight">
确定
</el-button>
<el-button @click="closeForm">取消</el-button>
<el-button @click="closeForm" class="marRight">取消</el-button>
<el-button @click="resetForm" class="marRight">重置</el-button>
</span>
</template>
</el-dialog>
@@ -96,14 +96,21 @@ export default {
state.hackReset = true
})
},
submitForm() {
this.$refs.addForm.$refs.addTypeData.validate((valid) => {
async submitForm() {
await this.$refs.addForm.$refs.addTypeData.validate((valid) => {
if (valid) {
noticeTypeStore.handleAddNoticeType(this.addTypeData)
} else {
return false
}
})
await noticeTypeStore.$patch((state) => {
state.addTypeData = {
id: '',
name: '',
enable: 1
}
})
},
closeForm() {
noticeTypeStore.$patch((state) => {
@@ -111,7 +118,13 @@ export default {
state.dialogEditTypeVisible = false
state.hackReset = false
state.editFlag = false
state.addTypeData = { name: '', enable: 1 }
})
noticeTypeStore.$patch((state) => {
state.addTypeData = {
id: '',
name: '',
enable: 1
}
})
},
resetForm() {
@@ -199,4 +212,12 @@ export default {
padding: 0;
margin-top: 20px;
}
.dialog-footer {
display: flex;
justify-content: center;
margin: 0;
}
.marRight {
margin-right: 15px;
}
</style>