nitice module modified query with mybatis plus linked table to xml

ui/src/pages/notice/NoticeManage.vue

@@ -1,40 +1,38 @@
 <template>
-    <div class="notice-home-layout">
-        <el-container>
-            <el-header>
-                <notice-head @selectByCond="selectByCond"></notice-head>
-            </el-header>
-            <el-main>
-                <el-button
-                    size="large"
-                    style="background-color: rgba(71, 138, 173, 0.85); color: white"
-                    @click="dialogAddVisible = true"
-                    >发布公告</el-button
-                >
-                <!-- 添加公告对话框-->
-                <el-dialog v-model="dialogAddVisible" center>
-                    <template #header>
-                        <h2 style="color: red">发布公告</h2>
-                    </template>
-                    <commitForm
-                        :noticeTypeList="this.noticeTypeList"
-                        :departmentList="this.departmentList"
-                        @handleAddNotice="handleAddNotice"
-                    ></commitForm>
-                </el-dialog>
-                <notice-table
-                    :selectData="selectData"
-                    :noticeTypeList="noticeTypeList"
-                    :departmentList="departmentList"
-                    :dialogUpdateVisible="dialogUpdateVisible"
-                    :getLoading="getLoading"
-                    @handleDelete="handleDelete"
-                    @clearFilter="clearFilter"
-                    @handleUpdateNotice="handleUpdateNotice"
-                ></notice-table>
-            </el-main>
-        </el-container>
-    </div>
+    <el-container>
+        <el-header>
+            <notice-head @selectByCond="selectByCond"></notice-head>
+        </el-header>
+        <el-main>
+            <el-button
+                size="large"
+                style="background-color: rgba(71, 138, 173, 0.85); color: white"
+                @click="openAddNoticeDialog"
+                >发布公告</el-button
+            >
+            <!-- 添加公告对话框-->
+            <el-dialog v-model="dialogAddVisible" center>
+                <template #header>
+                    <h2 style="color: red">发布公告</h2>
+                </template>
+                <commitForm
+                    :noticeTypeList="this.noticeTypeList"
+                    :departmentList="this.departmentList"
+                    @handleAddNotice="handleAddNotice"
+                ></commitForm>
+            </el-dialog>
+            <notice-manage-table
+                :selectData="selectData"
+                :noticeTypeList="noticeTypeList"
+                :departmentList="departmentList"
+                :dialogUpdateVisible="dialogUpdateVisible"
+                :loading="loading"
+                @handleDelete="handleDelete"
+                @clearFilter="clearFilter"
+                @handleUpdateNotice="handleUpdateNotice"
+            ></notice-manage-table>
+        </el-main>
+    </el-container>
 </template>
 
 <script lang="ts">
@@ -52,7 +50,7 @@ export default {
             dialogAddVisible: false,
             dialogUpdateVisible: false,
             departmentList: [],
-            getLoading: true
+            loading: true
         }
     },
     methods: {
@@ -83,7 +81,7 @@ export default {
             request.get('http://localhost:8621/notice').then((response) => {
                 this.selectData = response.data.data
                 if (this.selectData) {
-                    this.getLoading = false
+                    this.loading = false
                 }
             })
         },
@@ -122,6 +120,11 @@ export default {
                 this.departmentList = response.data.data
             })
         },
+        openAddNoticeDialog() {
+            this.dialogAddVisible = true
+            this.selectNoticeType()
+            this.selectDepartment()
+        },
         handleAddNotice(addFormData) {
             request.post('http://localhost:8621/notice', addFormData).then((response) => {
                 if (response.data.code === 20022) {
@@ -164,21 +167,16 @@ export default {
     },
     mounted() {
         this.selectAllNotice()
-        this.selectNoticeType()
-        this.selectDepartment()
     }
 }
 </script>
 
 <style scoped>
-.el-container {
-}
 .el-header {
     background-color: #fff;
-    //border: #9e9e9e solid 1px;
 }
 .el-main {
-    padding: 0px;
+    padding: 0;
     margin-top: 20px;
 }
 </style>

ui/src/pages/notice/NoticeView.vue

@@ -0,0 +1,56 @@
+<template>
+    <el-container>
+        <el-header>
+            <notice-head></notice-head>
+        </el-header>
+        <el-main>
+            <el-menu
+                :default-active="activeIndex"
+                class="el-menu-demo"
+                mode="horizontal"
+                @select="handleSelect"
+            >
+                <el-menu-item index="1">所有公告</el-menu-item>
+                <el-menu-item index="2">已读</el-menu-item>
+                <el-menu-item index="3"><a href="#">未读</a></el-menu-item>
+            </el-menu>
+            <notice-view-table
+                :selectData="selectData"
+                :getLoading="getLoading"
+            ></notice-view-table>
+        </el-main>
+    </el-container>
+</template>
+
+<script lang="ts">
+import request from '@/services'
+
+export default {
+    name: 'NoticeView',
+    data() {
+        return {
+            activeIndex: '1',
+            selectData: [],
+            getLoading: true
+        }
+    },
+    methods: {
+        handleSelect(key, keyPath) {
+            console.log(key, keyPath)
+        },
+        selectAllNoticeByUserId() {
+            request.get('http://localhost:8621/notice/ByUserId').then((response) => {
+                this.selectData = response.data.data
+                if (this.selectData) {
+                    this.getLoading = false
+                }
+            })
+        }
+    },
+    mounted() {
+        this.selectAllNoticeByUserId()
+    }
+}
+</script>
+
+<style scoped></style>