From e52f07d1929ffb264f86e9e9fd18dd410b7b29b5 Mon Sep 17 00:00:00 2001
From: cccccyb <995134776@qq.com>
Date: Thu, 8 Jun 2023 02:43:39 +0800
Subject: [PATCH] add the rightClick menu to update the top of notice

---
 .../components/notice/NoticeManageTable.vue   | 132 ++++++++++++++++--
 ui/src/components/notice/NoticeShowDialog.vue |  39 +++++-
 ui/src/components/notice/NoticeViewCard.vue   |  26 ----
 ui/src/pages/notice/NoticeTypeManage.vue      |  33 ++++-
 4 files changed, 185 insertions(+), 45 deletions(-)

diff --git a/ui/src/components/notice/NoticeManageTable.vue b/ui/src/components/notice/NoticeManageTable.vue
index fb17e30..b9acee4 100644
--- a/ui/src/components/notice/NoticeManageTable.vue
+++ b/ui/src/components/notice/NoticeManageTable.vue
@@ -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>
diff --git a/ui/src/components/notice/NoticeShowDialog.vue b/ui/src/components/notice/NoticeShowDialog.vue
index edd38bf..362cf20 100644
--- a/ui/src/components/notice/NoticeShowDialog.vue
+++ b/ui/src/components/notice/NoticeShowDialog.vue
@@ -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) {
diff --git a/ui/src/components/notice/NoticeViewCard.vue b/ui/src/components/notice/NoticeViewCard.vue
index 7e11dbd..086932f 100644
--- a/ui/src/components/notice/NoticeViewCard.vue
+++ b/ui/src/components/notice/NoticeViewCard.vue
@@ -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 {
diff --git a/ui/src/pages/notice/NoticeTypeManage.vue b/ui/src/pages/notice/NoticeTypeManage.vue
index 91d40db..6ec11ee 100644
--- a/ui/src/pages/notice/NoticeTypeManage.vue
+++ b/ui/src/pages/notice/NoticeTypeManage.vue
@@ -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>