2

src/styles/announcement.scss

@@ -23,32 +23,59 @@
       height: 100%;
       padding: 4px;
       border-radius: 5px;
-    }
-  }
-  .classify-card .card-body .card-main {
-    .header {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 10px;
-      border-bottom: 1px solid #eee;
-      .title {
+      .header {
         position: relative;
         display: flex;
         align-items: center;
-        margin-bottom: 0;
+        justify-content: space-between;
+        padding: 10px;
+        border-bottom: 1px solid #eee;
+        .title {
+          position: relative;
+          display: flex;
+          align-items: center;
+          margin-bottom: 0;
+        }
+        .extra {
+          position: relative;
+          display: flex;
+          align-items: center;
+        }
       }
-      .extra {
+      .content {
+        position: relative;
+        height: calc(100% - 50px);
+        box-sizing: border-box;
+        overflow: auto;
+      }
+      .action {
         position: relative;
         display: flex;
         align-items: center;
+        justify-content: end;
+        border-top: 1px solid #eee;
+        padding: 8px 10px;
       }
     }
-    .content {
-      position: relative;
-      height: calc(100% - 50px);
-      overflow: auto;
+  }
+  .classify-card .card-body .card-main .content {
+    height: calc(100% - 50px);
+  }
+  .data-card .card-body .card-main .content {
+    height: calc(100% - 98px);
+    padding: 10px;
+    .el-table th.el-table__cell {
+      background-color: #f7f7f7;
+      padding: 8px 0;
+      .el-checkbox:last-of-type {
+        margin-right: 0;
+      }
+    }
+    .el-table .el-table__cell {
+      padding: 4px 0;
+      .el-checkbox:last-of-type {
+        margin-right: 0;
+      }
     }
   }
 }

src/views/system/announcement.vue

@@ -32,7 +32,68 @@
     </div>
     <div class="data-card">
       <div class="card-body">
-        <div class="card-main">222</div>
+        <div class="card-main">
+          <div class="header">
+            <div class="title">
+              <div style="width: 140px">
+                <el-select v-model="searchForm.type" class="block" clearable filterable placeholder="请选择公告类型" size="small">
+                  <el-option label="系统发布公告" value="1"></el-option>
+                  <el-option label="系统说明公告" value="2"></el-option>
+                </el-select>
+              </div>
+              <div style="width: 100px; margin-left: 12px; margin-right: 12px;">
+                <el-select v-model="searchForm.state" class="block" clearable filterable placeholder="发布状态" size="small">
+                  <el-option label="已发布" value="1"></el-option>
+                  <el-option label="待发布" value="2"></el-option>
+                  <el-option label="已取消" value="3"></el-option>
+                </el-select>
+              </div>
+              <el-button size="small" type="primary">搜索</el-button>
+            </div>
+            <div class="extra">
+              <el-button size="small" type="primary">发布普通公告</el-button>
+              <el-button size="small" type="warning">发布系统公告</el-button>
+              <el-button size="small" type="danger">批量删除公告</el-button>
+            </div>
+          </div>
+          <div class="content">
+            <el-table ref="tableRef" :data="tableData" border style="width: 100%;" height="100%" @selection-change="tableSelection">
+              <el-table-column type="selection" width="50" align="center" fixed="left"></el-table-column>
+              <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
+              <el-table-column prop="type" label="公告类型" width="140"></el-table-column>
+              <el-table-column prop="name" label="公告内容" min-width="240"></el-table-column>
+              <el-table-column prop="address" label="发布备注" width="300"></el-table-column>
+              <el-table-column prop="time" label="创建时间" width="180"></el-table-column>
+              <el-table-column prop="user" label="创建人" width="100"></el-table-column>
+              <el-table-column prop="date" label="取消时间" width="180"></el-table-column>
+              <el-table-column prop="state" label="发布状态" width="100" align="center">
+                <template slot-scope="{row}">
+                  <el-tag type="danger" effect="dark" v-if="row.state==='已取消'">{{ row.state }}</el-tag>
+                  <el-tag type="success" effect="dark" v-if="row.state==='已发布'">{{ row.state }}</el-tag>
+                  <el-tag type="info" effect="dark" v-if="row.state==='待发布'">{{ row.state }}</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column prop="action" label="操作" width="150" align="center" fixed="right">
+                <template slot-scope="{row, $index}">
+                  <el-button size="mini" @click="handleEdit($index, row)">编辑</el-button>
+                  <el-button size="mini" type="danger" @click="handleDelete($index, row)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="action">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="searchForm.current"
+              :page-sizes="[100, 200, 300, 400]"
+              :page-size="searchForm.size"
+              layout="total, prev, pager, next, sizes, jumper"
+              :total="searchForm.total"
+            >
+            </el-pagination>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -98,7 +159,28 @@ export default {
         groupId: [{ required: true, message: '请选择上级分组', trigger: 'blur' }],
         client: [{ required: true, message: '请选择关联应用', trigger: 'blur' }],
         title: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
-      }
+      },
+      searchForm: {current: 1, size: 20, total: 0},
+      tableData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄',
+        state: '已取消'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1517 弄',
+        state: '待发布'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1519 弄',
+        state: '已发布'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1516 弄'
+      }]
     }
   },
   computed: {
@@ -140,6 +222,24 @@ export default {
       this.isSystemInfoShow = false
       this.systemInfoData = {}
     },
+    handleSizeChange(val) {
+      this.searchForm.size = val
+    },
+    handleCurrentChange(val) {
+      this.searchForm.current = val
+    },
+    //表格多选
+    tableSelection(val) {
+      console.log(val)
+    },
+    //表格编辑
+    handleEdit(index, row) {
+      console.log(index, row);
+    },
+    //表格删除
+    handleDelete(index, row) {
+      console.log(index, row);
+    },
     //验证表单
     async getFormValidate(ref) {
       return new Promise(resolve => {