use pinia to modify notice add,delete,select function

Pinnacle/src/main/java/com/cfive/pinnacle/service/impl/NoticeServiceImpl.java

@@ -105,12 +105,8 @@ public class NoticeServiceImpl extends ServiceImpl<NoticeMapper, Notice> impleme
     public Boolean deleteById(Long nid) {
         LambdaQueryWrapper<NoticeReceive> lqw = new LambdaQueryWrapper<>();
         lqw.eq(NoticeReceive::getNoticeId, nid);
-        List<NoticeReceive> noticeReceives = noticeReceiveMapper.selectList(lqw);
+        Boolean flag = noticeReceiveMapper.delete(lqw)>0;
-        for (NoticeReceive nrc :
+        return flag&&(noticeMapper.deleteById(nid) > 0);
-                noticeReceives) {
-            noticeReceiveMapper.deleteById(nrc.getId());
-        }
-        return noticeMapper.deleteById(nid) > 0;
     }
 
     @Override
@@ -118,7 +114,6 @@ public class NoticeServiceImpl extends ServiceImpl<NoticeMapper, Notice> impleme
         noticeMapper.update(null, new UpdateWrapper<Notice>().eq("id", notice.getId()).set("old", 1)); //修改原始数据
         notice.setOriginId(notice.getId());
         notice.setId(null); //清除id，使新插入的数据id重新生成
-        notice.setCreateTime(null);
         notice.setModifyTime(null);
         notice.setOld(0);
         return noticeMapper.insert(notice) > 0;

ui/src/components/notice/CommitForm.vue

@@ -79,17 +79,22 @@
             <el-input type="textarea" v-model="addData.content"></el-input>
         </el-form-item>
         <el-form-item>
-            <el-button type="primary" @click="submitForm('addData')">发布</el-button>
+            <el-button type="primary" @click="submitForm">发布</el-button>
+            <el-button type="primary" @click="closeForm">取消</el-button>
             <el-button @click="resetForm()">重置</el-button>
         </el-form-item>
     </el-form>
 </template>
 
 <script lang="js">
+import { useNoticeStore } from '@/store/notice'
+import { mapState } from 'pinia'
+const noticeStore = useNoticeStore()
 export default {
+    computed:{
+        ...mapState(useNoticeStore,['noticeTypeList','departmentList'])
+    },
     props:{
-        departmentList: [],
-        noticeTypeList: [],
         noticeEdit:{}
     },
     data() {
@@ -130,7 +135,7 @@ export default {
 
     },
     methods: {
-        submitForm(formtitle) {
+        submitForm() {
             this.addData.top=this.addData.top?1:0;
             const receiveId=[]
             for (let i = 0; i < this.addData.receivers.length; i++) {
@@ -140,17 +145,20 @@ export default {
             this.$refs.addData.validate((valid) => {
                 if (valid) {
                     if (this.noticeEdit){
-                        console.log("edit")
                         this.$emit("handleUpdateNotice",this.addData)
                     }else {
-                        console.log("add")
+                        noticeStore.handleAddNotice(this.addData)
-                        this.$emit("handleAddNotice",this.addData)
                     }
                 } else {
                     return false;
                 }
             });
         },
+        closeForm(){
+            noticeStore.$patch(state=>{
+                state.dialogAddVisible=false
+            })
+        },
         resetForm() {
             this.$refs.addData.resetFields();
         }
@@ -181,7 +189,7 @@ export default {
         }
     },
     mounted() {
-        console.log("mounted")
+        noticeStore.selectDepartment()
     }
 
 }

ui/src/components/notice/NoticeHead.vue

@@ -20,7 +20,7 @@
                             v-for="item in noticeTypeList"
                             :key="item.id"
                             :label="item.name"
-                            :value="item.id"
+                            :value="item.name"
                         />
                     </el-select>
                 </el-form-item>
@@ -54,63 +54,19 @@
             </el-col>
         </el-row>
     </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">
 import { COLOR_PRODUCTION, SIZE_ICON_MD, SIZE_ICON_SM } from '@/constants/Common.constants'
 import _ from 'lodash'
+import { useNoticeStore } from '@/store/notice'
+import { mapState } from 'pinia'
+// const noticeStore = useNoticeStore()
 
 export default {
     name: 'NoticeHead',
     data() {
         return {
-            noticeTypeList: [],
             timeRang: [],
             search_info: {
                 title: '',
@@ -153,6 +109,9 @@ export default {
             this.timeRang = []
             this.$refs.searchForm.resetFields()
         }
+    },
+    computed: {
+        ...mapState(useNoticeStore, ['noticeTypeList'])
     }
 }
 </script>

ui/src/components/notice/NoticeManageTable.vue

@@ -64,7 +64,7 @@
             prop="sender.username"
             label="发布人"
             width="100"
-            column-key="senderName"
+            column-key="sender.username"
             :filters="filterSenderName"
             :filter-method="filterTag"
             filter-placement="bottom-end"
@@ -85,7 +85,7 @@
                 <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)"
                     >编辑
                 </el-button>
-                <el-button size="small" type="danger" @click="handleDelete(scope.row.id)"
+                <el-button size="small" type="danger" @click="handleDeleteById(scope.row.id)"
                     >删除
                 </el-button>
             </template>
@@ -108,25 +108,29 @@
         <template #header>
             <h2 style="color: red">查看公告</h2>
         </template>
-        <notice-show-dialog @showDialogVisible="showDialogVisible" :noticeShow="noticeShow" />
+        <notice-show-dialog />
     </el-dialog>
 </template>
 
 <script lang="ts">
-import { useNoticeManageStore } from '@/store/notice-manage'
+import { mapState } from 'pinia'
-const noticeManageStore = useNoticeManageStore()
+import { useNoticeStore } from '@/store/notice'
+const noticeStore = useNoticeStore()
 
 export default {
+    computed: {
+        ...mapState(useNoticeStore, [
+            'selectData',
+            'loading',
+            'dialogShowVisible',
+            'noticeShowData'
+        ])
+    },
     data() {
         return {
             filterSenderName: [],
             dialogEditVisible: false,
-            dialogShowVisible: false,
+            noticeEdit: {}
-            noticeEdit: {},
-            noticeShow: {},
-            getLoading: true,
-            selectData: [],
-            loading: true
         }
     },
     props: ['noticeTypeList', 'departmentList', 'dialogUpdateVisible'],
@@ -156,23 +160,22 @@ export default {
             this.dialogEditVisible = this.dialogUpdateVisible
         },
         handleShow(index, row) {
-            this.dialogShowVisible = true
+            noticeStore.$patch((state) => {
-            this.noticeShow = row
+                state.dialogShowVisible = true
+                state.noticeShowData = row
+            })
         },
-        handleDelete(deleteId) {
+        handleDeleteById(deleteId) {
-            this.$emit('handleDelete', deleteId)
+            this.$emit('handleDeleteById', deleteId)
-        },
-        showDialogVisible(visible) {
-            this.dialogShowVisible = visible
         }
     },
     mounted() {
-        noticeManageStore.selectAllNotice()
+        console.log('mounted')
-        this.selectData = noticeManageStore.selectData
+        noticeStore.selectAllNotice()
-        this.loading = noticeManageStore.loading
     },
     updated() {
-        this.$refs.tableRef.clearFilter(['senderName'])
+        console.log('updated')
+        this.$refs.tableRef.clearFilter(['sender.username'])
         this.filterSenderName = []
         const nameArray = []
         for (let i = 0; i < this.selectData.length; i++) {

ui/src/components/notice/NoticeShowDialog.vue

@@ -1,39 +1,47 @@
 <template>
     <el-descriptions direction="vertical" :column="3" border>
-        <template #title>{{ this.noticeShow.title }}</template>
+        <template #title>{{ this.noticeShowData.title }}</template>
         <el-descriptions-item label="发布人"
             ><el-tag size="large" type="success">{{
-                this.noticeShow.sender.username
+                this.noticeShowData.sender.username
             }}</el-tag></el-descriptions-item
         >
         <el-descriptions-item label="生效时间">{{
-            formatDate(this.noticeShow.sendTime)
+            formatDate(this.noticeShowData.sendTime)
         }}</el-descriptions-item>
         <el-descriptions-item label="优先级" :span="12">{{
-            this.noticeShow.priority
+            this.noticeShowData.priority
         }}</el-descriptions-item>
         <el-descriptions-item label="公告类型">
-            <el-tag size="large">{{ this.noticeShow.noticeType.name }}</el-tag>
+            <el-tag size="large">{{ this.noticeShowData.noticeType.name }}</el-tag>
         </el-descriptions-item>
         <el-descriptions-item label="失效时间">{{
-            formatDate(this.noticeShow.endTime)
+            formatDate(this.noticeShowData.endTime)
+        }}</el-descriptions-item>
+        <el-descriptions-item label="公告内容">{{
+            this.noticeShowData.content
         }}</el-descriptions-item>
-        <el-descriptions-item label="公告内容">{{ this.noticeShow.content }}</el-descriptions-item>
     </el-descriptions>
     <el-button type="primary" @click="handleShowDialog" style="margin: 50px 400px">确 定</el-button>
 </template>
 <script lang="ts">
+import { mapState } from 'pinia'
+import { useNoticeStore } from '@/store/notice'
+const noticeStore = useNoticeStore()
+
 export default {
     name: 'NoticeShowDialog',
-    props: ['noticeShow'],
+    computed: {
+        ...mapState(useNoticeStore, ['noticeShowData', 'dialogShowVisible'])
+    },
     data() {
-        return {
+        return {}
-            showDialogVisible: false
-        }
     },
     methods: {
         handleShowDialog() {
-            this.$emit('showDialogVisible', this.showDialogVisible)
+            noticeStore.$patch((state) => {
+                state.dialogShowVisible = false
+            })
         },
         formatDate(date) {
             if (date == null) return null

ui/src/components/notice/NoticeViewTable.vue

@@ -1,15 +1,15 @@
 <template>
-    <el-button
+    <!--    <el-button-->
-        size="large"
+    <!--        size="large"-->
-        @click="clearFilter"
+    <!--        @click="clearFilter"-->
-        style="background-color: rgba(71, 138, 173, 0.85); color: white"
+    <!--        style="background-color: rgba(71, 138, 173, 0.85); color: white"-->
-        >清除筛选条件
+    <!--        >清除筛选条件-->
-    </el-button>
+    <!--    </el-button>-->
     <el-table
-        v-loading="loading"
+        v-loading="this.loading"
         element-loading-text="加载中..."
         ref="tableRef"
-        :data="tableData"
+        :data="this.selectData"
         style="width: 100%"
         border
         highlight-current-row
@@ -97,28 +97,26 @@
         <template #header>
             <h2 style="color: red">查看公告</h2>
         </template>
-        <notice-show-dialog @showDialogVisible="showDialogVisible" :noticeShow="noticeShow" />
+        <notice-show-dialog />
     </el-dialog>
 </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)
+import { mapState } from 'pinia'
+import { useNoticeStore } from '@/store/notice'
+const noticeStore = useNoticeStore()
+
 export default {
     data() {
         return {
-            filterSenderName: [],
+            filterSenderName: []
-            dialogShowVisible: false,
-            noticeShow: {},
-            tableData: [],
-            loading: true
         }
     },
     props: [],
     methods: {
+        // ...mapActions(useNoticeStore, ['selectAllNoticeByUserId']),
         clearFilter() {
             this.$refs.tableRef.clearFilter(['senderName'])
             this.$emit('clearFilter')
@@ -137,24 +135,21 @@ export default {
         },
         modifyStatus(row) {},
         handleShow(index, row) {
-            this.dialogShowVisible = true
+            noticeStore.$patch((state) => {
-            this.noticeShow = row
+                state.dialogShowVisible = true
-        },
+                state.noticeShowData = row
-        showDialogVisible(visible) {
+            })
-            this.dialogShowVisible = visible
         }
     },
     mounted() {
-        noticeViewStore.selectAllNoticeByUserId()
+        noticeStore.selectAllNoticeByUserId()
-        this.loading = noticeViewStore.getLoading
-        this.tableData = noticeViewStore.selectData
     },
     updated() {
         this.$refs.tableRef.clearFilter(['senderName'])
         this.filterSenderName = []
         const nameArray = []
-        for (let i = 0; i < noticeViewStore.selectData.length; i++) {
+        for (let i = 0; i < this.selectData.length; i++) {
-            nameArray.push(noticeViewStore.selectData[i].sender.username)
+            nameArray.push(this.selectData[i].sender.username)
         }
         const newArr = nameArray.filter((item, i, arr) => {
             return arr.indexOf(item) === i
@@ -165,8 +160,20 @@ export default {
             senderName.value = newArr[j]
             this.filterSenderName.push(senderName)
         }
+    },
+    computed: {
+        ...mapState(useNoticeStore, [
+            'selectData',
+            'loading',
+            'dialogShowVisible',
+            'noticeShowData'
+        ])
     }
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.el-table {
+    margin-top: 10px;
+}
+</style>

ui/src/pages/notice/NoticeManage.vue

@@ -15,17 +15,11 @@
                 <template #header>
                     <h2 style="color: red">发布公告</h2>
                 </template>
-                <commitForm
+                <commitForm />
-                    :noticeTypeList="this.noticeTypeList"
-                    :departmentList="this.departmentList"
-                    @handleAddNotice="handleAddNotice"
-                ></commitForm>
             </el-dialog>
             <notice-manage-table
-                :noticeTypeList="noticeTypeList"
-                :departmentList="departmentList"
                 :dialogUpdateVisible="dialogUpdateVisible"
-                @handleDelete="handleDelete"
+                @handleDeleteById="handleDeleteById"
                 @clearFilter="clearFilter"
                 @handleUpdateNotice="handleUpdateNotice"
             ></notice-manage-table>
@@ -38,21 +32,21 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import 'element-plus/theme-chalk/el-message.css'
 import 'element-plus/theme-chalk/el-message-box.css'
 import request from '@/services'
+import { useNoticeStore } from '@/store/notice'
+import { mapState } from 'pinia'
+const noticeStore = useNoticeStore()
 
 export default {
     name: 'NoticeHome',
     data() {
         return {
-            noticeTypeList: [],
+            dialogUpdateVisible: false
-            dialogAddVisible: false,
-            dialogUpdateVisible: false,
-            departmentList: []
         }
     },
     methods: {
         selectByCond(search) {
             request
-                .get('http://localhost:8621/notice', {
+                .get('/notice', {
                     title: search.title,
                     type: search.type,
                     startTime: search.startTime,
@@ -60,7 +54,7 @@ export default {
                 })
                 .then((response) => {
                     if (response.data.code === 20021) {
-                        // this.selectData = response.data.data
+                        noticeStore.selectData = response.data.data
                         ElMessage({
                             message: '查询成功.',
                             type: 'success'
@@ -73,20 +67,20 @@ export default {
                     }
                 })
         },
-        handleDelete(deleteID) {
+        handleDeleteById(deleteID) {
             ElMessageBox.confirm('确定是否要删除？该操作将无法回退', '警告', {
                 confirmButtonText: '确定',
                 cancelButtonText: '我再想想',
                 type: 'warning'
             })
                 .then(() => {
-                    request.delete('http://localhost:8621/notice/' + deleteID).then((response) => {
+                    request.delete('/notice/' + deleteID).then((response) => {
                         if (response.data.code === 20024) {
-                            this.dialogAddVisible = false
                             ElMessage({
                                 message: '删除成功.',
                                 type: 'success'
                             })
+                            noticeStore.selectAllNotice()
                         } else if (response.data.code === 20034) {
                             ElMessage({
                                 message: response.data.msg,
@@ -94,44 +88,16 @@ export default {
                             })
                         }
                     })
-                    this.$router.go(0)
                 })
                 .catch(() => {})
         },
-        selectNoticeType() {
-            request.get('http://localhost:8621/noticeType').then((response) => {
-                this.noticeTypeList = response.data.data
-            })
-        },
-        selectDepartment() {
-            request.get('http://localhost:8621/department').then((response) => {
-                this.departmentList = response.data.data
-            })
-        },
         openAddNoticeDialog() {
-            this.dialogAddVisible = true
+            noticeStore.$patch((state) => {
-            this.selectNoticeType()
+                state.dialogAddVisible = true
-            this.selectDepartment()
-        },
-        handleAddNotice(addFormData) {
-            request.post('http://localhost:8621/notice', addFormData).then((response) => {
-                if (response.data.code === 20022) {
-                    this.dialogAddVisible = false
-                    ElMessage({
-                        message: '发布成功.',
-                        type: 'success'
-                    })
-                } else if (response.data.code === 20032) {
-                    ElMessage({
-                        message: response.data.msg,
-                        type: 'error'
-                    })
-                }
             })
-            this.$router.go(0)
         },
         handleUpdateNotice(updateNotice) {
-            request.put('http://localhost:8621/notice', updateNotice).then((response) => {
+            request.put('/notice', updateNotice).then((response) => {
                 if (response.data.code === 20023) {
                     this.dialogUpdateVisible = false
                     ElMessage({
@@ -153,7 +119,12 @@ export default {
             this.$router.go(0)
         }
     },
-    mounted() {}
+    mounted() {
+        noticeStore.selectNoticeType()
+    },
+    computed: {
+        ...mapState(useNoticeStore, ['dialogAddVisible'])
+    }
 }
 </script>
 

ui/src/pages/notice/NoticeView.vue

@@ -20,8 +20,6 @@
 </template>
 
 <script lang="ts">
-import { useNoticeViewStore } from '@/store/notice-view'
-const noticeViewStore = useNoticeViewStore()
 export default {
     name: 'NoticeView',
     data() {

ui/src/store/notice-manage.ts

@@ -1,22 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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
-                }
-            })
-        }
-    }
-})

ui/src/store/notice.ts

@@ -0,0 +1,93 @@
+import { defineStore } from 'pinia'
+import request from '@/services'
+import { ElMessage } from 'element-plus'
+
+export interface IAddFormData {
+    title: string
+    typeId: string
+    sendTime: string
+    endTime: string
+    top: boolean
+    priority: number
+    content: string
+    receivers: []
+}
+export const useNoticeStore = defineStore('notice', {
+    state: () => {
+        return {
+            selectData: [],
+            loading: true,
+            dialogShowVisible: false,
+            dialogAddVisible: false,
+            noticeTypeList: [],
+            departmentList: [],
+            noticeShowData: {
+                content: String,
+                createTime: String,
+                endTime: String,
+                id: String,
+                priority: Number,
+                receivers: [],
+                sendTime: String,
+                title: String,
+                top: Number,
+                noticeType: {
+                    id: String,
+                    name: String,
+                    enable: Number
+                },
+                sender: {
+                    id: String,
+                    username: String
+                }
+            }
+        }
+    },
+    getters: {},
+    actions: {
+        selectAllNotice() {
+            console.log('selectAll')
+            void request.get('/notice').then((response) => {
+                this.selectData = response.data.data
+                if (this.selectData.length !== 0) {
+                    this.loading = false
+                }
+            })
+        },
+        async selectAllNoticeByUserId() {
+            await request.get('/notice/ByUserId').then((response) => {
+                this.selectData = response.data.data
+                if (this.selectData.length !== 0) {
+                    this.loading = false
+                }
+            })
+        },
+        async selectNoticeType() {
+            await request.get('/noticeType').then((response) => {
+                this.noticeTypeList = response.data.data
+            })
+        },
+        async selectDepartment() {
+            await request.get('/department').then((response) => {
+                this.departmentList = response.data.data
+            })
+        },
+        async handleAddNotice(addFormData: IAddFormData) {
+            await request.post('/notice', addFormData).then((response) => {
+                if (response.data.code === 20022) {
+                    this.dialogAddVisible = false
+                    ElMessage({
+                        message: '发布成功.',
+                        type: 'success'
+                    })
+                } else if (response.data.code === 20032) {
+                    ElMessage({
+                        message: response.data.msg,
+                        type: 'error'
+                    })
+                }
+            })
+            this.selectAllNotice()
+        }
+    }
+})