更新依赖和系统公告

src/styles/view/notice.scss

@@ -1,66 +1,3 @@
-.hc-system-announcement-box {
-    position: relative;
-    height: 100%;
-    .card-body {
-        position: absolute;
-        inset: 0;
-        .card-main {
-            position: relative;
-            background: white;
-            height: calc(100% - 14px);
-            margin: 0 10px 10px;
-            border-radius: 5px;
-            .header {
-                position: relative;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                padding: 10px;
-                border-bottom: 1px solid #eee;
-                .title {
-                    position: relative;
-                    display: flex;
-                    align-items: center;
-                    margin-bottom: 0;
-                }
-                .extra {
-                    position: relative;
-                    display: flex;
-                    align-items: center;
-                }
-            }
-            .content {
-                position: relative;
-                box-sizing: border-box;
-                overflow: auto;
-                height: calc(100% - 98px);
-                padding: 10px;
-                .el-table th.el-table__cell {
-                    background-color: #f7f7f7;
-                    padding: 8px 0;
-                    .el-checkbox:last-of-type {
-                        margin-right: 0;
-                    }
-                }
-                .el-table .el-table__cell {
-                    padding: 4px 0;
-                    .el-checkbox:last-of-type {
-                        margin-right: 0;
-                    }
-                }
-            }
-            .action {
-                position: relative;
-                display: flex;
-                align-items: center;
-                justify-content: end;
-                border-top: 1px solid #eee;
-                padding: 8px 10px;
-            }
-        }
-    }
-}
-
 //通用弹窗
 .el-dialog__wrapper.hc-system-announcement-dialog .el-dialog {
     text-align: left;

src/views/system/notice.vue

@@ -57,12 +57,66 @@
         <template #action>
             <hc-pages :pages="searchForm" @change="pageChange" />
         </template>
+
+        <!-- 待发布 -->
+        <hc-dialog v-model="isReleasedShow" title="待发布的公告" class="hc-system-announcement-dialog black-card" widths="660px" :footer="false" @close="releasedCancel">
+            <el-divider v-if="releasedData.updateMsg.length > 0" content-position="left" class="hc-system-announcement-black-divider top">更新公告</el-divider>
+            <div v-for="(item, index) in releasedData.updateMsg" :key="index" class="hc-system-announcement-black-card">
+                <div class="icon-box">
+                    <div class="name">{{ index === 0 ? '前 端' : '后 端' }}</div>
+                    <div class="icon">
+                        <i class="iconfont iconicon_notice" />
+                    </div>
+                </div>
+                <div class="content">
+                    <div class="top-box">
+                        <div class="left">
+                            <span class="name">待发布：</span>
+                            <span class="num">{{ item.awaitMsgTotal }}</span>
+                        </div>
+                        <div class="right">
+                            <span class="name">创建人：</span>
+                            <span class="user">{{ item.creatUserName }}</span>
+                        </div>
+                    </div>
+                    <div class="time-box">
+                        <span class="name">发布时间：</span>
+                        <span class="time">{{ item.pushDateTime }}</span>
+                    </div>
+                </div>
+            </div>
+            <el-divider v-if="releasedData.systemMsg.length > 0" content-position="left" class="hc-system-announcement-black-divider">普通公告</el-divider>
+            <div v-for="(item, index) in releasedData.systemMsg" :key="index" class="hc-system-announcement-black-card">
+                <div class="icon-box">
+                    <div class="name">公 告</div>
+                    <div class="icon">
+                        <i class="iconfont iconicon_notice" />
+                    </div>
+                </div>
+                <div class="content">
+                    <div class="top-box">
+                        <div class="left">
+                            <span class="name">待发布：</span>
+                            <span class="num">{{ item.awaitMsgTotal }}</span>
+                        </div>
+                        <div class="right">
+                            <span class="name">创建人：</span>
+                            <span class="user">{{ item.creatUserName }}</span>
+                        </div>
+                    </div>
+                    <div class="time-box">
+                        <span class="name">发布时间：</span>
+                        <span class="time">{{ item.pushDateTime }}</span>
+                    </div>
+                </div>
+            </div>
+        </hc-dialog>
     </hc-card>
 </template>
 
 <script setup>
 import { onActivated, ref } from 'vue'
-import { arrToId, getArrValue } from 'js-fast-way'
+import { arrToId, getArrValue, getObjValue } from 'js-fast-way'
 import { reloadPage } from '~uti/tools'
 import { HcDelMsg } from 'hc-vue3-ui'
 import mainApi from '~api/system/notice'
@@ -71,8 +125,25 @@ import mainApi from '~api/system/notice'
 onActivated(() => {
     searchForm.value.current = 1
     getTableData()
+    getAwaitMsgApi()
 })
 
+//获取待发布的数据
+const releasedNum = ref(0)
+const releasedData = ref({
+    systemMsg: [],
+    updateMsg: [],
+})
+const getAwaitMsgApi = async () => {
+    const { data } = await mainApi.getAwaitMsg()
+    const { msgTotal, systemMsg, updateMsg } = getObjValue(data)
+    releasedData.value = {
+        systemMsg: systemMsg,
+        updateMsg: updateMsg,
+    }
+    releasedNum.value = msgTotal
+}
+
 //搜索表单
 const searchForm = ref({
     msgType: null, pushStatus: null,
@@ -138,9 +209,13 @@ const handleCancel = async (row) => {
 }
 
 //待发布
-const releasedNum = ref(0)
+const isReleasedShow = ref(false)
 const releasedShow = () => {
+    isReleasedShow.value = true
+}
 
+const releasedCancel = () => {
+    isReleasedShow.value = false
 }
 
 //发布普通公告
@@ -182,5 +257,5 @@ const handleDelete = () => {
 </script>
 
 <style lang="scss">
-
+@import "~src/styles/view/notice";
 </style>