nitice manage module compeled

ui/src/components/notice/CommitForm.vue

@@ -0,0 +1,201 @@
+<template>
+    <el-form :model="addData" :rules="rules" ref="addData" label-width="100px">
+        <el-form-item label="公告标题" prop="title">
+            <el-input v-model="addData.title"></el-input>
+        </el-form-item>
+        <el-form-item label="公告类型" prop="typeId">
+            <el-select v-model="addData.typeId" filterable placeholder="请选择公告类型">
+                <el-option
+                    v-for="item in noticeTypeList"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"
+                >
+                </el-option>
+            </el-select>
+        </el-form-item>
+        <el-row>
+            <el-form-item label="生效时间" required>
+                <el-col>
+                    <el-form-item prop="sendTime">
+                        <el-date-picker
+                            type="datetime"
+                            placeholder="选择生效日期"
+                            v-model="addData.sendTime"
+                            style="width: 100%"
+                            size="large"
+                            :picker-options="pickerOptions"
+                        ></el-date-picker>
+                    </el-form-item>
+                </el-col>
+            </el-form-item>
+            <el-col :span="2"></el-col>
+            <el-form-item label="失效时间" required>
+                <el-col>
+                    <el-form-item prop="endTime">
+                        <el-date-picker
+                            type="datetime"
+                            placeholder="选择失效日期"
+                            v-model="addData.endTime"
+                            style="width: 100%"
+                            size="large"
+                        ></el-date-picker>
+                    </el-form-item>
+                </el-col>
+            </el-form-item>
+        </el-row>
+        <el-form-item label="是否置顶" prop="top">
+            <el-switch v-model="addData.top" inline-prompt active-text="是" inactive-text="否" />
+        </el-form-item>
+        <el-form-item label="公告优先级" prop="priority">
+            <el-slider v-model="addData.priority" show-input show-stops :max="15" size="large" />
+        </el-form-item>
+        <el-form-item label="发送至：" prop="receivers">
+            <el-cascader
+                v-model="addData.receivers"
+                collapse-tags
+                clearable
+                :options="departmentList"
+                :props="{
+                    multiple: true,
+                    value: 'id',
+                    label: 'name',
+                    children: 'userList'
+                }"
+                placeholder="选择公告接收者"
+            >
+                <template #default="scope">
+                    <span v-if="scope.node.level == 1">{{
+                        ((scope.node.value = scope.data.id), (scope.node.label = scope.data.name))
+                    }}</span>
+                    <span v-if="scope.node.level == 2">{{
+                        ((scope.node.value = scope.data.id),
+                        (scope.node.label = scope.data.username))
+                    }}</span>
+                </template>
+            </el-cascader>
+        </el-form-item>
+        <el-form-item label="公告内容" prop="content">
+            <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 @click="resetForm()">重置</el-button>
+        </el-form-item>
+    </el-form>
+</template>
+
+<script lang="js">
+export default {
+    props:{
+        departmentList: [],
+        noticeTypeList: [],
+        noticeEdit:{}
+    },
+    data() {
+        return {
+            addData: {
+                title: '',
+                typeId: '',
+                sendTime: '',
+                endTime: '',
+                top: false,
+                priority: 1,
+                content: '',
+                receivers:[]
+            },
+            pickerOptions: {},
+            rules: {
+                title: [
+                    { required: true, message: '请输入公告标题', trigger: 'blur' },
+                    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
+                ],
+                type: [
+                    { type:'array',required: true, message: '请选择公告类型', trigger: 'change' }
+                ],
+                startTime: [
+                    { type: 'date', required: true, message: '请选择生效时间', trigger: 'change' }
+                ],
+                endTime: [
+                    { type: 'date', required: true, message: '请选择失效时间', trigger: 'change' }
+                ],
+                content: [
+                    { required: true, message: '请填写公告内容', trigger: 'blur' }
+                ],
+                receivers: [
+                    { type:'array',required: true, message: '请选择公告接收者', trigger: 'change' }
+                ]
+            }
+        }
+
+    },
+    methods: {
+        submitForm(formtitle) {
+            this.addData.top=this.addData.top?1:0;
+            const receiveId=[]
+            for (let i = 0; i < this.addData.receivers.length; i++) {
+                receiveId.push(this.addData.receivers[i][1])
+            }
+            this.addData.receivers=receiveId
+            this.$refs.addData.validate((valid) => {
+                if (valid) {
+                    if (this.noticeEdit){
+                        console.log("edit")
+                        this.$emit("handleUpdateNotice",this.addData)
+                    }else {
+                        console.log("add")
+                        this.$emit("handleAddNotice",this.addData)
+                    }
+                } else {
+                    return false;
+                }
+            });
+        },
+        resetForm() {
+            this.$refs.addData.resetFields();
+        }
+    },
+    created() {
+        this.pickerOptions.disabledDate=(time)=> {
+            if (this.addData.sendTime !== '') {
+                const tempTime = 3600 * 1000 * 24 * 2;
+                const timer = new Date(this.currentDate).getTime();
+                const minTime = timer - tempTime;
+                const maxTime = timer + tempTime;
+                return time.getTime() < minTime || time.getTime() > Date.now() || time.getTime() > maxTime;
+            }
+        }
+        if (this.noticeEdit) {
+            this.addData = this.noticeEdit
+            console.log(this.addData)
+        }
+    },
+    updated() {
+        if (this.noticeEdit) {
+            this.addData = this.noticeEdit
+            console.log(this.addData)
+        }
+    },
+    mounted() {
+        console.log("mounted")
+    }
+
+}
+</script>
+<style scoped>
+.el-button {
+    margin: 0 auto;
+}
+.el-button--text {
+    margin-right: 15px;
+}
+.el-select {
+    width: 300px;
+}
+.el-input {
+    width: 300px;
+}
+.el-slider {
+    margin-left: 20px;
+}
+</style>

ui/src/components/notice/NoticeAdd.vue

@@ -0,0 +1,13 @@
+<template>
+    <NoticeEdit />
+</template>
+<script lang="ts">
+export default {
+    name: 'NoticeAdd',
+    data() {
+        return {}
+    },
+    methods: {}
+}
+</script>
+<style scoped></style>

ui/src/components/notice/NoticeEdit.vue

@@ -1,55 +0,0 @@
-<template>
-    <el-form :model="form">
-        <el-form-item label="Promotion name" :label-width="formLabelWidth">
-            <el-input v-model="form.name" autocomplete="off" />
-        </el-form-item>
-        <el-form-item label="Zones" :label-width="formLabelWidth">
-            <el-select v-model="form.region" placeholder="Please select a zone">
-                <el-option label="Zone No.1" value="shanghai" />
-                <el-option label="Zone No.2" value="beijing" />
-            </el-select>
-        </el-form-item>
-    </el-form>
-    <span class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">Cancel</el-button>
-        <el-button type="primary" @click="dialogFormVisible = false"> Confirm </el-button>
-    </span>
-</template>
-
-<script lang="js">
-export default {
-    name: 'NoticeEdit',
-    data() {
-        return {
-            dialogFormVisible: false,
-            formLabelWidth: '140px',
-            form: [
-                {
-                    name: '',
-                    region: '',
-                    date1: '',
-                    date2: '',
-                    delivery: false,
-                    type: [],
-                    resource: '',
-                    desc: ''
-                }
-            ]
-        }
-    }
-}
-</script>
-<style scoped>
-.el-button--text {
-    margin-right: 15px;
-}
-.el-select {
-    width: 300px;
-}
-.el-input {
-    width: 300px;
-}
-.dialog-footer button:first-child {
-    margin-right: 10px;
-}
-</style>

ui/src/components/notice/NoticeHead.vue

@@ -1,43 +1,99 @@
 <template>
     <div class="notice-head-layout">
-        <el-row :gutter="20">
-            <el-col :span="5">
-                <el-input v-model="search_title" placeholder="请输入公告标题">
-                    <template #prefix>
-                        <el-icon :size="SIZE_ICON_MD()" :color="COLOR_PRODUCTION()">
-                            <icon-pinnacle-notice_search />
-                        </el-icon>
-                    </template>
-                </el-input>
-            </el-col>
+        <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-button type="primary" @click="this.$emit('selectByTitle', search_title)"
-                    >搜索</el-button
-                >
+                <el-input v-model="search_info.title" placeholder="请输入公告标题"> </el-input>
             </el-col>
-            <el-col :span="8">
-                <div class="gutter" />
+            <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>
     </div>
 </template>
 
 <script lang="ts">
-import { COLOR_PRODUCTION, SIZE_ICON_MD } from '@/constants/Common.constants'
+import { COLOR_PRODUCTION, SIZE_ICON_MD, SIZE_ICON_SM } from '@/constants/Common.constants'
+import _ from 'lodash'
 
 export default {
     name: 'NoticeHead',
     methods: {
+        SIZE_ICON_SM() {
+            return SIZE_ICON_SM
+        },
         COLOR_PRODUCTION() {
             return COLOR_PRODUCTION
         },
         SIZE_ICON_MD() {
             return SIZE_ICON_MD
+        },
+        selectByCondition() {
+            console.log(this.timeRang)
+            if (!_.isEmpty(this.timeRang)) {
+                this.search_info.startTime = this.handleDateFormatUTC(this.timeRang[0])
+                this.search_info.endTime = this.handleDateFormatUTC(this.timeRang[1])
+            }
+            this.$emit('selectByCond', this.search_info)
+        },
+        handleDateFormatUTC(date) {
+            let newFormat = ''
+            const dateParse = new Date(Date.parse(date))
+            const yy = dateParse.getUTCFullYear()
+            const mm = _.padStart((dateParse.getUTCMonth() + 1).toString(), 2, '0')
+            const dd = _.padStart(dateParse.getUTCDate().toString(), 2, '0')
+            const hh = _.padStart(dateParse.getUTCHours().toString(), 2, '0')
+            const mf = _.padStart(dateParse.getUTCMinutes().toString(), 2, '0')
+            const ss = _.padStart(dateParse.getUTCSeconds().toString(), 2, '0')
+            newFormat = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
+            return newFormat
         }
     },
     data() {
         return {
-            search_title: ''
+            timeRang: [],
+            search_info: {
+                title: '',
+                type: '',
+                startTime: '',
+                endTime: ''
+            }
         }
     }
 }
@@ -55,7 +111,6 @@ export default {
 
 .el-col {
     border-radius: 4px;
-    margin-left: 20px;
 }
 
 .grid-content {

ui/src/components/notice/NoticeShowDialog.vue

@@ -0,0 +1,45 @@
+<template>
+    <el-descriptions direction="vertical" :column="3" border>
+        <template #title>{{ this.noticeShow.title }}</template>
+        <el-descriptions-item label="发布人"
+            ><el-tag size="large" type="success">{{
+                this.noticeShow.sender.username
+            }}</el-tag></el-descriptions-item
+        >
+        <el-descriptions-item label="生效时间">{{
+            formatDate(this.noticeShow.sendTime)
+        }}</el-descriptions-item>
+        <el-descriptions-item label="优先级" :span="12">{{
+            this.noticeShow.priority
+        }}</el-descriptions-item>
+        <el-descriptions-item label="公告类型">
+            <el-tag size="large">{{ this.noticeShow.noticeType.name }}</el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="失效时间">{{
+            formatDate(this.noticeShow.endTime)
+        }}</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">
+export default {
+    name: 'NoticeShowDialog',
+    props: ['noticeShow'],
+    data() {
+        return {
+            showDialogVisible: false
+        }
+    },
+    methods: {
+        handleShowDialog() {
+            this.$emit('showDialogVisible', this.showDialogVisible)
+        },
+        formatDate(date) {
+            if (date == null) return null
+            return new Date(date).toLocaleString()
+        }
+    }
+}
+</script>
+<style scoped></style>

ui/src/components/notice/NoticeTable.vue

@@ -1,6 +1,13 @@
 <template>
-    <el-button @click="clearFilter">清除筛选条件</el-button>
+    <el-button
+        size="large"
+        @click="clearFilter"
+        style="background-color: rgba(71, 138, 173, 0.85); color: white"
+        >清除筛选条件
+    </el-button>
     <el-table
+        v-loading="getLoading"
+        element-loading-text="加载中..."
         ref="tableRef"
         :data="selectData"
         style="width: 100%"
@@ -20,8 +27,25 @@
             :formatter="formatter"
             show-overflow-tooltip
         />
-        <el-table-column prop="noticeType.name" label="公告类别" width="180" />
+        <el-table-column prop="noticeType.name" label="公告类别" width="180">
+            <template #default="scope">
+                <el-tag
+                    size="default"
+                    :type="scope.row.noticeType.name === '通知公告' ? 'warning' : 'success'"
+                    disable-transitions
+                >
+                    {{ scope.row.noticeType.name }}
+                </el-tag>
+            </template>
+        </el-table-column>
         <el-table-column prop="priority" label="优先级" width="180" />
+        <el-table-column
+            prop="createTime"
+            label="创建时间"
+            sortable
+            width="180"
+            :formatter="formatDate"
+        />
         <el-table-column
             prop="sendTime"
             label="生效时间"
@@ -34,7 +58,6 @@
             label="失效时间"
             sortable
             width="180"
-            value-format="yyyy-MM-dd HH:mm:ss"
             :formatter="formatDate"
         />
         <el-table-column
@@ -56,24 +79,36 @@
         </el-table-column>
         <el-table-column label="操作">
             <template #default="scope">
+                <el-button size="small" color="#626aef" @click="handleShow(scope.$index, scope.row)"
+                    >查看
+                </el-button>
                 <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)"
                     >编辑
                 </el-button>
-                <el-button
-                    size="small"
-                    type="danger"
-                    @click="this.$emit('handleDelete', scope.row.id)"
+                <el-button size="small" type="danger" @click="handleDelete(scope.row.id)"
                     >删除
                 </el-button>
             </template>
         </el-table-column>
     </el-table>
     <!--        编辑会话框-->
-    <el-dialog v-model="dialogFormVisible">
-        <template #title>
-            {{ dialogFormTitle }}
+    <el-dialog v-model="dialogEditVisible" center>
+        <template #header>
+            <h2 style="color: red">编辑公告</h2>
         </template>
-        <notice-edit />
+        <commitForm
+            :noticeEdit="noticeEdit"
+            :noticeTypeList="noticeTypeList"
+            :departmentList="departmentList"
+            @handleUpdateNotice="handleUpdateNotice"
+        ></commitForm>
+    </el-dialog>
+    <!--        查看会话框-->
+    <el-dialog v-model="dialogShowVisible" center>
+        <template #header>
+            <h2 style="color: red">查看公告</h2>
+        </template>
+        <notice-show-dialog @showDialogVisible="showDialogVisible" :noticeShow="noticeShow" />
     </el-dialog>
 </template>
 
@@ -82,11 +117,14 @@ export default {
     data() {
         return {
             filterSenderName: [],
-            dialogFormVisible: false,
-            dialogFormTitle: ''
+            dialogEditVisible: false,
+            dialogShowVisible: false,
+            noticeEdit: {},
+            noticeShow: {},
+            getLoading: true
         }
     },
-    props: ['msg', 'selectData'],
+    props: ['noticeTypeList', 'selectData', 'departmentList', 'dialogUpdateVisible', 'getLoading'],
     methods: {
         clearFilter() {
             this.$refs.tableRef.clearFilter(['senderName'])
@@ -102,14 +140,25 @@ export default {
             // 获取单元格数据
             const data = row[column.property]
             if (data == null) return null
-
-            const dt = data.replace('T', ' ')
-            return dt
+            return new Date(data).toLocaleString()
         },
         handleEdit(index, row) {
-            this.dialogFormVisible = true
-            this.dialogFormTitle = row.title
-            console.log(index + '   ' + row)
+            this.dialogEditVisible = true
+            this.noticeEdit = row
+        },
+        handleUpdateNotice(updateData) {
+            this.$emit('handleUpdateNotice', updateData)
+            this.dialogEditVisible = this.dialogUpdateVisible
+        },
+        handleShow(index, row) {
+            this.dialogShowVisible = true
+            this.noticeShow = row
+        },
+        handleDelete(deleteId) {
+            this.$emit('handleDelete', deleteId)
+        },
+        showDialogVisible(visible) {
+            this.dialogShowVisible = visible
         }
     },
     mounted() {},
@@ -128,7 +177,7 @@ export default {
             senderName.value = newArr[j]
             this.filterSenderName.push(senderName)
         }
-        console.log(this.filterSenderName)
+        // console.log(this.filterSenderName)
     }
 }
 </script>

ui/src/pages/notice/NoticeHome.vue

@@ -2,13 +2,35 @@
     <div class="notice-home-layout">
         <el-container>
             <el-header>
-                <notice-head @selectByTitle="selectByTitle"></notice-head>
+                <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>
@@ -17,36 +39,135 @@
 
 <script lang="ts">
 import axios from 'axios'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import 'element-plus/theme-chalk/el-message.css'
+import 'element-plus/theme-chalk/el-message-box.css'
 
 export default {
     name: 'NoticeHome',
     data() {
         return {
-            selectData: []
+            selectData: [],
+            noticeTypeList: [],
+            dialogAddVisible: false,
+            dialogUpdateVisible: false,
+            departmentList: [],
+            getLoading: true
         }
     },
     methods: {
-        selectByTitle(searchTitle) {
-            axios.get('http://localhost:8621/notice?title=' + searchTitle).then((response) => {
-                this.selectData = response.data.data
-            })
+        selectByCond(search) {
+            axios
+                .get('http://localhost:8621/notice', {
+                    params: {
+                        title: search.title,
+                        type: search.type,
+                        startTime: search.startTime,
+                        endTime: search.endTime
+                    }
+                })
+                .then((response) => {
+                    if (response.data.code === 20021) {
+                        this.selectData = response.data.data
+                        ElMessage({
+                            message: '查询成功.',
+                            type: 'success'
+                        })
+                    } else if (response.data.code === 20031) {
+                        ElMessage({
+                            message: response.data.msg,
+                            type: 'error'
+                        })
+                    }
+                })
         },
         selectAllNotice() {
             axios.get('http://localhost:8621/notice').then((response) => {
                 this.selectData = response.data.data
+                if (this.selectData) {
+                    this.getLoading = false
+                }
             })
         },
         handleDelete(deleteID) {
-            axios.delete('http://localhost:8621/notice/' + deleteID).then((response) => {
-                this.selectAllNotice()
+            ElMessageBox.confirm('确定是否要删除？该操作将无法回退', '警告', {
+                confirmButtonText: '确定',
+                cancelButtonText: '我再想想',
+                type: 'warning'
+            })
+                .then(() => {
+                    axios.delete('http://localhost:8621/notice/' + deleteID).then((response) => {
+                        if (response.data.code === 20024) {
+                            this.dialogAddVisible = false
+                            ElMessage({
+                                message: '删除成功.',
+                                type: 'success'
+                            })
+                        } else if (response.data.code === 20034) {
+                            ElMessage({
+                                message: response.data.msg,
+                                type: 'error'
+                            })
+                        }
+                    })
+                    this.$router.go(0)
+                })
+                .catch(() => {})
+        },
+        selectNoticeType() {
+            axios.get('http://localhost:8621/noticeType').then((response) => {
+                this.noticeTypeList = response.data.data
             })
         },
+        selectDepartment() {
+            axios.get('http://localhost:8621/department').then((response) => {
+                this.departmentList = response.data.data
+            })
+        },
+        handleAddNotice(addFormData) {
+            axios.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) {
+            axios.put('http://localhost:8621/notice', updateNotice).then((response) => {
+                if (response.data.code === 20023) {
+                    this.dialogUpdateVisible = false
+                    ElMessage({
+                        message: '发布成功.',
+                        type: 'success'
+                    })
+                } else if (response.data.code === 20033) {
+                    ElMessage({
+                        message: response.data.msg,
+                        type: 'error'
+                    })
+                }
+            })
+            this.$router.go(0)
+        },
         clearFilter() {
-            this.selectAllNotice()
+            // this.selectAllNotice()
+            // location.reload()
+            this.$router.go(0)
         }
     },
     mounted() {
         this.selectAllNotice()
+        this.selectNoticeType()
+        this.selectDepartment()
     }
 }
 </script>