add pinia to manage data

ui/src/components/notice/NoticeHead.vue

@@ -1,51 +1,105 @@
 <template>
-    <div class="notice-head-layout">
-        <el-row>
-            <el-col :span="2" :xs="3" :sm="2"
-                ><el-text
-                    class="mx-1"
-                    size="large"
-                    style="color: rgba(71, 138, 173, 0.85); font-weight: bolder"
-                    >公告标题：</el-text
-                ></el-col
-            >
-            <el-col :span="4">
-                <el-input v-model="search_info.title" placeholder="请输入公告标题"> </el-input>
-            </el-col>
-            <el-col :span="1"></el-col>
-            <el-col :span="2" :xs="3" :sm="2"
-                ><el-text
-                    class="mx-1"
-                    size="large"
-                    style="color: rgba(71, 138, 173, 0.85); font-weight: bolder"
-                    >公告类型：</el-text
-                ></el-col
-            >
-            <el-col :span="4">
-                <el-input v-model="search_info.type" placeholder="请输入公告类型"> </el-input>
-            </el-col>
-            <el-col :span="1"></el-col>
+    <el-form
+        :inline="true"
+        :model="search_info"
+        class="demo-form-inline"
+        label-width="auto"
+        ref="searchForm"
+        style="min-width: 1185px"
+    >
+        <el-row :span="24">
             <el-col :span="5">
-                <el-date-picker
-                    v-model="timeRang"
-                    type="datetimerange"
-                    range-separator="至"
-                    start-placeholder="开始日期"
-                    end-placeholder="结束日期"
-                >
-                </el-date-picker>
+                <el-form-item label="公告标题：" prop="title">
+                    <el-input v-model="search_info.title" placeholder="请输入公告标题"></el-input>
+                </el-form-item>
             </el-col>
-            <el-col :span="2"></el-col>
-            <el-col :span="3">
-                <el-button type="primary" @click="selectByCondition">
-                    <el-icon :size="SIZE_ICON_SM()" style="color: white; margin-right: 5px">
-                        <icon-pinnacle-notice_search />
-                    </el-icon>
-                    搜索
-                </el-button>
+            <el-col :span="5">
+                <el-form-item label="公告类型：" prop="type">
+                    <el-select v-model="search_info.type" placeholder="请选择公告类型">
+                        <el-option
+                            v-for="item in noticeTypeList"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.id"
+                        />
+                    </el-select>
+                </el-form-item>
+            </el-col>
+            <el-col :span="8">
+                <el-form-item label="日期：" prop="timeRang">
+                    <el-date-picker
+                        v-model="timeRang"
+                        type="datetimerange"
+                        range-separator="至"
+                        start-placeholder="开始日期"
+                        end-placeholder="结束日期"
+                        style="width: auto"
+                    >
+                    </el-date-picker>
+                </el-form-item>
+            </el-col>
+            <el-col :span="6">
+                <el-form-item>
+                    <el-button type="primary" @click="selectByCondition"
+                        ><el-icon :size="SIZE_ICON_SM()" style="color: white; margin-right: 5px">
+                            <icon-pinnacle-notice_search /> </el-icon
+                        >查询</el-button
+                    >
+                    <el-button type="primary" @click="resetForm"
+                        ><el-icon :size="SIZE_ICON_SM()" style="color: white">
+                            <icon-pinnacle-reset /> </el-icon
+                        >重置</el-button
+                    >
+                </el-form-item>
             </el-col>
         </el-row>
-    </div>
+    </el-form>
+
+    <!--    <el-row>-->
+    <!--        <el-col :span="2" :xs="3" :sm="2"-->
+    <!--            ><el-text-->
+    <!--                class="mx-1"-->
+    <!--                size="large"-->
+    <!--                style="color: rgba(71, 138, 173, 0.85); font-weight: bolder"-->
+    <!--                >公告标题：</el-text-->
+    <!--            ></el-col-->
+    <!--        >-->
+    <!--        <el-col :span="4">-->
+    <!--            <el-input v-model="search_info.title" placeholder="请输入公告标题"> </el-input>-->
+    <!--        </el-col>-->
+    <!--        <el-col :span="1"></el-col>-->
+    <!--        <el-col :span="2" :xs="3" :sm="2"-->
+    <!--            ><el-text-->
+    <!--                class="mx-1"-->
+    <!--                size="large"-->
+    <!--                style="color: rgba(71, 138, 173, 0.85); font-weight: bolder"-->
+    <!--                >公告类型：</el-text-->
+    <!--            ></el-col-->
+    <!--        >-->
+    <!--        <el-col :span="4">-->
+    <!--            <el-input v-model="search_info.type" placeholder="请输入公告类型"> </el-input>-->
+    <!--        </el-col>-->
+    <!--        <el-col :span="1"></el-col>-->
+    <!--        <el-col :span="5">-->
+    <!--            <el-date-picker-->
+    <!--                v-model="timeRang"-->
+    <!--                type="datetimerange"-->
+    <!--                range-separator="至"-->
+    <!--                start-placeholder="开始日期"-->
+    <!--                end-placeholder="结束日期"-->
+    <!--            >-->
+    <!--            </el-date-picker>-->
+    <!--        </el-col>-->
+    <!--        <el-col :span="2"></el-col>-->
+    <!--        <el-col :span="3">-->
+    <!--            <el-button type="primary" @click="selectByCondition">-->
+    <!--                <el-icon :size="SIZE_ICON_SM()" style="color: white; margin-right: 5px">-->
+    <!--                    <icon-pinnacle-notice_search />-->
+    <!--                </el-icon>-->
+    <!--                搜索-->
+    <!--            </el-button>-->
+    <!--        </el-col>-->
+    <!--    </el-row>-->
 </template>
 
 <script lang="ts">
@@ -54,6 +108,18 @@ import _ from 'lodash'
 
 export default {
     name: 'NoticeHead',
+    data() {
+        return {
+            noticeTypeList: [],
+            timeRang: [],
+            search_info: {
+                title: '',
+                type: '',
+                startTime: '',
+                endTime: ''
+            }
+        }
+    },
     methods: {
         SIZE_ICON_SM() {
             return SIZE_ICON_SM
@@ -82,38 +148,17 @@ export default {
             const ss = _.padStart(dateParse.getUTCSeconds().toString(), 2, '0')
             newFormat = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
             return newFormat
-        }
-    },
-    data() {
-        return {
-            timeRang: [],
-            search_info: {
-                title: '',
-                type: '',
-                startTime: '',
-                endTime: ''
-            }
+        },
+        resetForm() {
+            this.timeRang = []
+            this.$refs.searchForm.resetFields()
         }
     }
 }
 </script>
 
 <style scoped>
-.el-row {
-    height: 80%;
+.el-form {
     margin-top: 15px;
 }
-
-.el-row:last-child {
-    margin-bottom: 0;
-}
-
-.el-col {
-    border-radius: 4px;
-}
-
-.grid-content {
-    border-radius: 4px;
-    min-height: 36px;
-}
 </style>

ui/src/components/notice/NoticeManageTable.vue

@@ -113,6 +113,9 @@
 </template>
 
 <script lang="ts">
+import { useNoticeManageStore } from '@/store/notice-manage'
+const noticeManageStore = useNoticeManageStore()
+
 export default {
     data() {
         return {
@@ -121,10 +124,12 @@ export default {
             dialogShowVisible: false,
             noticeEdit: {},
             noticeShow: {},
-            getLoading: true
+            getLoading: true,
+            selectData: [],
+            loading: true
         }
     },
-    props: ['noticeTypeList', 'selectData', 'departmentList', 'dialogUpdateVisible', 'loading'],
+    props: ['noticeTypeList', 'departmentList', 'dialogUpdateVisible'],
     methods: {
         clearFilter() {
             this.$refs.tableRef.clearFilter(['senderName'])
@@ -161,7 +166,11 @@ export default {
             this.dialogShowVisible = visible
         }
     },
-    mounted() {},
+    mounted() {
+        noticeManageStore.selectAllNotice()
+        this.selectData = noticeManageStore.selectData
+        this.loading = noticeManageStore.loading
+    },
     updated() {
         this.$refs.tableRef.clearFilter(['senderName'])
         this.filterSenderName = []
@@ -178,7 +187,6 @@ export default {
             senderName.value = newArr[j]
             this.filterSenderName.push(senderName)
         }
-        // console.log(this.filterSenderName)
     }
 }
 </script>

ui/src/components/notice/NoticeViewTable.vue

@@ -6,10 +6,10 @@
         >清除筛选条件
     </el-button>
     <el-table
-        v-loading="getLoading"
+        v-loading="loading"
         element-loading-text="加载中..."
         ref="tableRef"
-        :data="selectData"
+        :data="tableData"
         style="width: 100%"
         border
         highlight-current-row
@@ -102,15 +102,22 @@
 </template>
 
 <script lang="ts">
+import { useNoticeViewStore } from '@/store/notice-view'
+// import { mapState } from 'pinia'
+// import {  storeToRefs } from 'pinia'
+const noticeViewStore = useNoticeViewStore()
+// const { selectData, getLoading } = storeToRefs(noticeViewStore)
 export default {
     data() {
         return {
             filterSenderName: [],
             dialogShowVisible: false,
-            noticeShow: {}
+            noticeShow: {},
+            tableData: [],
+            loading: true
         }
     },
-    props: ['selectData', 'getLoading'],
+    props: [],
     methods: {
         clearFilter() {
             this.$refs.tableRef.clearFilter(['senderName'])
@@ -137,13 +144,17 @@ export default {
             this.dialogShowVisible = visible
         }
     },
-    mounted() {},
+    mounted() {
+        noticeViewStore.selectAllNoticeByUserId()
+        this.loading = noticeViewStore.getLoading
+        this.tableData = noticeViewStore.selectData
+    },
     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)
+        for (let i = 0; i < noticeViewStore.selectData.length; i++) {
+            nameArray.push(noticeViewStore.selectData[i].sender.username)
         }
         const newArr = nameArray.filter((item, i, arr) => {
             return arr.indexOf(item) === i

ui/src/pages/notice/NoticeManage.vue

@@ -22,11 +22,9 @@
                 ></commitForm>
             </el-dialog>
             <notice-manage-table
-                :selectData="selectData"
                 :noticeTypeList="noticeTypeList"
                 :departmentList="departmentList"
                 :dialogUpdateVisible="dialogUpdateVisible"
-                :loading="loading"
                 @handleDelete="handleDelete"
                 @clearFilter="clearFilter"
                 @handleUpdateNotice="handleUpdateNotice"
@@ -45,12 +43,10 @@ export default {
     name: 'NoticeHome',
     data() {
         return {
-            selectData: [],
             noticeTypeList: [],
             dialogAddVisible: false,
             dialogUpdateVisible: false,
-            departmentList: [],
-            loading: true
+            departmentList: []
         }
     },
     methods: {
@@ -64,7 +60,7 @@ export default {
                 })
                 .then((response) => {
                     if (response.data.code === 20021) {
-                        this.selectData = response.data.data
+                        // this.selectData = response.data.data
                         ElMessage({
                             message: '查询成功.',
                             type: 'success'
@@ -77,14 +73,6 @@ export default {
                     }
                 })
         },
-        selectAllNotice() {
-            request.get('http://localhost:8621/notice').then((response) => {
-                this.selectData = response.data.data
-                if (this.selectData) {
-                    this.loading = false
-                }
-            })
-        },
         handleDelete(deleteID) {
             ElMessageBox.confirm('确定是否要删除？该操作将无法回退', '警告', {
                 confirmButtonText: '确定',
@@ -165,9 +153,7 @@ export default {
             this.$router.go(0)
         }
     },
-    mounted() {
-        this.selectAllNotice()
-    }
+    mounted() {}
 }
 </script>
 

ui/src/pages/notice/NoticeView.vue

@@ -14,43 +14,36 @@
                 <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>
+            <notice-view-table></notice-view-table>
         </el-main>
     </el-container>
 </template>
 
 <script lang="ts">
-import request from '@/services'
-
+import { useNoticeViewStore } from '@/store/notice-view'
+const noticeViewStore = useNoticeViewStore()
 export default {
     name: 'NoticeView',
     data() {
         return {
-            activeIndex: '1',
-            selectData: [],
-            getLoading: true
+            activeIndex: '1'
         }
     },
     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()
-    }
+    mounted() {}
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.el-header {
+    background-color: #fff;
+}
+.el-main {
+    padding: 0;
+    margin-top: 20px;
+}
+</style>

ui/src/store/notice-manage.ts

@@ -0,0 +1,22 @@
+import { defineStore } from 'pinia'
+import request from '@/services'
+
+export const useNoticeManageStore = defineStore('notice-manage', {
+    state: () => {
+        return {
+            selectData: [],
+            loading: true
+        }
+    },
+    getters: {},
+    actions: {
+        selectAllNotice() {
+            void request.get('http://localhost:8621/notice').then((response) => {
+                this.selectData = response.data.data
+                if (this.selectData.length !== 0) {
+                    this.loading = false
+                }
+            })
+        }
+    }
+})

ui/src/store/notice-view.ts

@@ -0,0 +1,22 @@
+import { defineStore } from 'pinia'
+import request from '@/services'
+
+export const useNoticeViewStore = defineStore('notice-view', {
+    state: () => {
+        return {
+            selectData: [],
+            getLoading: true
+        }
+    },
+    getters: {},
+    actions: {
+        selectAllNoticeByUserId(): void {
+            void request.get('http://localhost:8621/notice/ByUserId').then((response) => {
+                this.selectData = response.data.data
+                if (this.selectData.length !== 0) {
+                    this.getLoading = false
+                }
+            })
+        }
+    }
+})