通知公告编辑

src/main/java/com/izouma/wenlvju/domain/Announcement.java

@@ -1,5 +1,6 @@
 package com.izouma.wenlvju.domain;
 
+import com.izouma.wenlvju.enums.AnnouncementType;
 import lombok.AllArgsConstructor;
 import lombok.Builder;
 import lombok.Data;
@@ -8,6 +9,8 @@ import org.hibernate.annotations.Where;
 
 import javax.persistence.Column;
 import javax.persistence.Entity;
+import javax.persistence.EnumType;
+import javax.persistence.Enumerated;
 
 
 @Data
@@ -19,6 +22,9 @@ import javax.persistence.Entity;
 public class Announcement extends BaseEntity {
     private String title;
 
+    @Enumerated(EnumType.STRING)
+    private AnnouncementType type;
+
     @Column(columnDefinition = "TEXT")
     private String content;
 }

src/main/java/com/izouma/wenlvju/enums/AnnouncementType.java

@@ -0,0 +1,12 @@
+package com.izouma.wenlvju.enums;
+
+public enum AnnouncementType {
+    /**
+     * 通知
+     */
+    NOTIFICATION,
+    /**
+     * 政策
+     */
+    POLICY
+}

src/main/vue/src/views/AnnouncementDetail.vue

@@ -86,7 +86,6 @@ export default {
     text-align: right;
     margin-right: 50px;
     padding: 10px;
-    font-weight: bold;
 }
 
 .content {

src/main/vue/src/views/AnnouncementEdit.vue

@@ -12,6 +12,13 @@
             <el-form-item prop="title" label="标题">
                 <el-input v-model="formData.title"></el-input>
             </el-form-item>
+            <el-form-item prop="type" label="类型">
+                <el-radio-group v-model="formData.type">
+                    <el-radio v-for="item in typeOptions" :key="item.value" :label="item.value">{{
+                        item.label
+                    }}</el-radio>
+                </el-radio-group>
+            </el-form-item>
             <el-form-item prop="content" label="内容">
                 <rich-text v-model="formData.content"></rich-text>
             </el-form-item>
@@ -43,7 +50,11 @@ export default {
         return {
             saving: false,
             formData: {},
-            rules: {}
+            rules: {},
+            typeOptions: [
+                { label: '通知公告', value: 'NOTIFICATION' },
+                { label: '政策文件', value: 'POLICY' }
+            ]
         };
     },
     methods: {

src/main/vue/src/views/AnnouncementList.vue

@@ -26,6 +26,7 @@
             <el-table-column v-if="multipleMode" align="center" type="selection" width="50"> </el-table-column>
             <el-table-column prop="id" label="ID" width="100"> </el-table-column>
             <el-table-column prop="title" label="标题"> </el-table-column>
+            <el-table-column prop="type" label="类型" :formatter="typeFormatter"> </el-table-column>
             <el-table-column prop="content" label="内容"> </el-table-column>
             <el-table-column label="操作" align="center" fixed="right" min-width="150">
                 <template slot-scope="{ row }">
@@ -69,7 +70,11 @@ export default {
             multipleMode: false,
             search: '',
             url: '/announcement/all',
-            downloading: false
+            downloading: false,
+            typeOptions: [
+                { label: '通知公告', value: 'NOTIFICATION' },
+                { label: '政策文件', value: 'POLICY' }
+            ]
         };
     },
     computed: {
@@ -78,6 +83,13 @@ export default {
         }
     },
     methods: {
+        typeFormatter(row, column, cellValue, index) {
+            let selectedOption = this.typeOptions.find(i => i.value === cellValue);
+            if (selectedOption) {
+                return selectedOption.label;
+            }
+            return '';
+        },
         beforeGetData() {
             return { search: this.search };
         },

src/main/vue/src/views/Dashboard.vue

@@ -34,6 +34,7 @@
 import { GridLayout, GridItem } from 'vue-grid-layout';
 import UserWidget from '../widgets/UserWidget';
 import BoardWidget from '../widgets/BoardWidget.vue';
+import PolicyWidget from '../widgets/PolicyWidget.vue';
 import UserWidget2 from '../widgets/UserWidget2';
 import LineChartWidget from '../widgets/LineChartWidget';
 import BarChartWidget from '../widgets/BarChartWidget';
@@ -44,12 +45,13 @@ export default {
     data() {
         return {
             layout: [
-                { x: 0, y: 0, w: 6, h: 8, i: '0', name: 'BoardWidget' },
-                { x: 6, y: 0, w: 6, h: 4, i: '1', name: 'UserWidget' },
-                { x: 6, y: 4, w: 6, h: 4, i: '2', name: 'UserWidget2' },
-                { x: 0, y: 8, w: 6, h: 6, i: '3', name: 'BarChartWidget' },
-                { x: 0, y: 10, w: 6, h: 6, i: '4', name: 'LineChartWidget' },
-                { x: 6, y: 8, w: 6, h: 12, i: '5', name: 'PieChartWidget' }
+                { x: 0, y: 0, w: 6, h: 6, i: '0', name: 'BoardWidget' },
+                { x: 6, y: 0, w: 6, h: 6, i: '1', name: 'PolicyWidget' }
+                // { x: 0, y: 0, w: 6, h: 4, i: '2', name: 'UserWidget' },
+                // { x: 6, y: 4, w: 6, h: 4, i: '3', name: 'UserWidget2' },
+                // { x: 0, y: 8, w: 6, h: 6, i: '4', name: 'BarChartWidget' },
+                // { x: 0, y: 10, w: 6, h: 6, i: '5', name: 'LineChartWidget' },
+                // { x: 6, y: 8, w: 6, h: 12, i: '6', name: 'PieChartWidget' }
             ],
             editable: false
         };
@@ -64,11 +66,12 @@ export default {
         GridLayout,
         GridItem,
         UserWidget,
-        BoardWidget,
         UserWidget2,
         LineChartWidget,
         BarChartWidget,
-        PieChartWidget
+        PieChartWidget,
+        BoardWidget,
+        PolicyWidget
     }
 };
 </script>

src/main/vue/src/widgets/BoardWidget.vue

@@ -42,10 +42,12 @@ export default {
         this.$nextTick(() => {
             this.height = this.$refs.container.$el.offsetHeight - 100;
         });
-        this.$http.post('/announcement/all', {}, { body: 'json' }).then(res => {
-            this.tableData = res.content;
-            this.isEmpty = res.empty;
-        });
+        this.$http
+            .post('/announcement/all', { size: 10, query: { type: 'NOTIFICATION' } }, { body: 'json' })
+            .then(res => {
+                this.tableData = res.content;
+                this.isEmpty = res.empty;
+            });
     }
 };
 </script>

src/main/vue/src/widgets/PolicyWidget.vue

@@ -0,0 +1,101 @@
+<template>
+    <widget-card :bodyStyle="bodyStyle" ref="container">
+        <template slot="header">
+            政策文件
+        </template>
+        <div class="boardList" :style="{ height: height + 'px' }">
+            <router-link
+                :underline="false"
+                :to="{
+                    path: '/announcementDetail',
+                    query: {
+                        id: item.id
+                    }
+                }"
+                class="board-item"
+                v-for="(item, index) in tableData"
+                :key="index"
+            >
+                <span>{{ item.title }}</span>
+                <span>{{ item.createdAt }}</span>
+            </router-link>
+            <div class="empty" v-if="isEmpty">暂无数据</div>
+        </div>
+    </widget-card>
+</template>
+<script>
+import WidgetCard from './WidgetCard';
+
+export default {
+    data() {
+        return {
+            bodyStyle: {},
+            tableData: [],
+            height: 200,
+            isEmpty: false
+        };
+    },
+    components: {
+        WidgetCard
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.height = this.$refs.container.$el.offsetHeight - 100;
+        });
+        this.$http.post('/announcement/all', { size: 10, query: { type: 'POLICY' } }, { body: 'json' }).then(res => {
+            this.tableData = res.content;
+            this.isEmpty = res.empty;
+        });
+    }
+};
+</script>
+<style lang="less" scoped>
+.info {
+    flex-grow: 1;
+    text-align: right;
+    .text {
+        color: #999;
+        font-size: 16px;
+        margin-bottom: 12px;
+    }
+    .num {
+        font-size: 20px;
+        color: #333;
+    }
+}
+.boardList {
+    .board-item + .board-item {
+        margin-top: 20px;
+    }
+    .board-item {
+        font-size: 14px;
+        margin-right: 15px;
+        line-height: 20px;
+        display: flex;
+        justify-content: space-between;
+
+        span {
+            &:first-child {
+                color: #000;
+                font-weight: bold;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                word-break: break-all;
+            }
+            &:last-child {
+                color: #999;
+                flex-shrink: 0;
+            }
+        }
+    }
+    overflow: auto;
+}
+
+.empty {
+    font-size: 12px;
+    color: #999;
+    text-align: center;
+    padding: 50px;
+}
+</style>