提交

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

@@ -4,16 +4,22 @@
             通知通告
         </template>
         <div class="boardList" :style="{ height: height + 'px' }">
-            <el-link
+            <router-link
                 :underline="false"
-                :to="{ path: '/' }"
+                :to="{
+                    path: '/announcementEdit',
+                    query: {
+                        id: item.id
+                    }
+                }"
                 class="board-item"
                 v-for="(item, index) in tableData"
                 :key="index"
             >
                 <span>{{ item.title }}</span>
-                <span>{{ item.date }}</span>
-            </el-link>
+                <span>{{ item.createdAt }}</span>
+            </router-link>
+            <div class="empty" v-if="isEmpty">暂无数据</div>
         </div>
     </widget-card>
 </template>
@@ -24,54 +30,9 @@ export default {
     data() {
         return {
             bodyStyle: {},
-            tableData: [
-                {
-                    date: '2016-05-02',
-                    name: '王小虎',
-                    title: '上海市普陀区金沙江路 1518 弄'
-                },
-                {
-                    date: '2016-05-04',
-                    name: '王小虎',
-                    title: '上海市普陀区金沙江路 1517 弄'
-                },
-                {
-                    date: '2016-05-01',
-                    name: '王小虎',
-                    title: '上海市普陀区金沙江路 1519 弄'
-                },
-                {
-                    date: '2016-05-03',
-                    name: '王小虎',
-                    title: '上海市普陀区金沙江路 1516 弄'
-                },
-                {
-                    date: '2016-05-03',
-                    name: '王小虎',
-                    title: '上海市普陀区金沙江路 1516 弄'
-                },
-                {
-                    date: '2016-05-03',
-                    name: '王小虎',
-                    title: '上海市普陀区金沙江路 1516 弄'
-                },
-                {
-                    date: '2016-05-03',
-                    name: '王小虎',
-                    title: '上海市普陀区金沙江路 1516 弄'
-                },
-                {
-                    date: '2016-05-03',
-                    name: '王小虎',
-                    title: '上海市普陀区金沙江路 1516 弄'
-                },
-                {
-                    date: '2016-05-03',
-                    name: '王小虎',
-                    title: '上海市普陀区金沙江路 1516 弄'
-                }
-            ],
-            height: 200
+            tableData: [],
+            height: 200,
+            isEmpty: false
         };
     },
     components: {
@@ -81,6 +42,10 @@ 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;
+        });
     }
 };
 </script>
@@ -106,21 +71,31 @@ export default {
         font-size: 14px;
         margin-right: 15px;
         line-height: 20px;
-        display: block;
-        /deep/.el-link--inner {
-            display: flex;
-            justify-content: space-between;
-        }
+        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>