vue

VUECODE/smart-property-manage/src/router/index.js

@@ -68,13 +68,13 @@ export const constantRouterMap = [
         name: 'owner-index',
         meta: { title: '已认证业主', icon: 'building' }
       },
-      // {
-      //   path: '/banner/infoBanner',
-      //   component: () => import('@/views/banner/infoBanner/index'),
-      //   name: 'banner-info',
-      //   hidden: true,
-      //   meta: { title: '查看banner', icon: 'table' }
-      // }
+      {
+        path: '/building/batch',
+        component: () => import('@/views/building/batch/batchImport'),
+        name: 'batch-import',
+        hidden: true,
+        meta: { title: '批量导入楼栋信息', icon: 'table' }
+      }
     ]
   },
 

VUECODE/smart-property-manage/src/views/building/batch/batchImport.vue

@@ -0,0 +1,90 @@
+
+<template>
+  <div class="root">
+    <el-form :inline="true" :model="listQuery" class="form-listQuery">
+      <el-form-item>
+        <el-button type="primary">下载模板</el-button>
+        <el-button type="warning">上传文件</el-button>
+        <el-button type="danger">上传服务器</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      ref="multipleTable"
+      :data="tableData3"
+      border
+      tooltip-effect="dark"
+      style="width: 100%; margin-top: 20px;"
+      @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55"/>
+      <el-table-column label="日期" width="120">
+        <template slot-scope="scope">{{ scope.row.date }}</template>
+      </el-table-column>
+      <el-table-column prop="name" label="姓名" width="120" />
+      <el-table-column prop="address" label="地址" show-overflow-tooltip />
+    </el-table>
+    <div class="block">
+      <el-pagination
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        :total="400"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      listQuery: {},
+      tableData3: [{
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }],
+      currentPage4: 4
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+    },
+    dialogBatchImport(){
+      this.$router.push({ name: 'batch-import'})
+    }
+  }
+}
+</script>
+
+<style scoped>
+.root{
+  display: flex;
+  flex-flow: column;
+}
+.form-listQuery{
+  margin-top: 20px;
+  margin-left: 30px;
+}
+.operation{
+  display: flex;
+  justify-content: space-between;
+  margin-left: 20px;
+  margin-right: 20px;
+}
+.block{
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+}
+</style>
+

VUECODE/smart-property-manage/src/views/building/index.vue

@@ -35,8 +35,7 @@
         <el-button type="danger">删除</el-button>
       </div>
       <div>
-        <el-button type="primary">下载模板</el-button>
-        <el-button type="success">批量导入</el-button>
+        <el-button type="success" @click="dialogBatchImport">批量导入楼栋信息</el-button>
       </div>
     </div>
     <el-table
@@ -89,6 +88,9 @@ export default {
     },
     handleCurrentChange(val) {
       console.log(`当前页: ${val}`)
+    },
+    dialogBatchImport(){
+      this.$router.push({ name: 'batch-import'})
     }
   }
 }