diff --git a/src/views/mile/listCar.vue b/src/views/mile/listCar.vue
index 7c46e5d..d023ee1 100644
--- a/src/views/mile/listCar.vue
+++ b/src/views/mile/listCar.vue
@@ -1,53 +1,30 @@
-<template xmlns:align="">
-  <div class="app-container">
+<template>
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-form-item class="selectForm-container-item" prop="keywords">
-          <el-input v-model.trim="listQuery.description" placeholder="车辆描述" clearable/>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item" prop="keywords">
-          <el-input v-model="listQuery.carCode" placeholder="车牌号" clearable/>
-        </el-form-item>
-        <!--<el-form-item class="selectForm-container-item" prop="keywords">-->
-        <!--<el-select v-model="listQuery.carType" filterable placeholder="车辆类型" clearable value="" @change="fetchData()">-->
-        <!--<el-option-->
-        <!--v-for="item in cartypelist"-->
-        <!--:key="item.value"-->
-        <!--:label="item.name"-->
-        <!--:value="item.value"/>-->
-        <!--</el-select>-->
-        <!--</el-form-item>-->
-        <el-form-item class="selectForm-container-item" prop="keywords">
-          <dept-select v-model="listQuery.deptId" :dept-show="deptShow" placeholder="使用单位" clearable value=""/>
-        </el-form-item>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.description" placeholder="车辆描述" size="small" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.carCode" placeholder="车牌号" size="small" clearable/>
+      </search-item>
+      <!--<el-form-item class="selectForm-container-item" prop="keywords">-->
+      <!--<el-select v-model="listQuery.carType" filterable placeholder="车辆类型" clearable value="" @change="fetchData()">-->
+      <!--<el-option-->
+      <!--v-for="item in cartypelist"-->
+      <!--:key="item.value"-->
+      <!--:label="item.name"-->
+      <!--:value="item.value"/>-->
+      <!--</el-select>-->
+      <!--</el-form-item>-->
+      <search-item>
+        <dept-select v-model="listQuery.deptId" :dept-show="deptShow" placeholder="使用单位" size="small" clearable value=""/>
+      </search-item>
 
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
-      </el-form>
-    </div>
+    </search-area>
     <!--查询结果Table显示-->
-    <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-      <el-table-column :index="indexMethod" align="center" type="index" label="序号" width="55"/>
-      <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-        <template slot-scope="scope">
-          <span :class="column.class">{{ scope.row[column.value] }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[15,20,30]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
-  </div>
+    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" class="table" border size="small" @selection-change="handleSelectionChange" @change="changePage"/>
+  </app-container>
 </template>
 <script>
 
@@ -157,6 +134,16 @@
     // 多选触发方法
     handleSelectionChange(val) {
       this.multipleSelection = val
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }

diff --git a/src/views/mile/listCar.vue b/src/views/mile/listCar.vue
index 7c46e5d..d023ee1 100644
--- a/src/views/mile/listCar.vue
+++ b/src/views/mile/listCar.vue
@@ -1,53 +1,30 @@
-<template xmlns:align="">
-  <div class="app-container">
+<template>
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-form-item class="selectForm-container-item" prop="keywords">
-          <el-input v-model.trim="listQuery.description" placeholder="车辆描述" clearable/>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item" prop="keywords">
-          <el-input v-model="listQuery.carCode" placeholder="车牌号" clearable/>
-        </el-form-item>
-        <!--<el-form-item class="selectForm-container-item" prop="keywords">-->
-        <!--<el-select v-model="listQuery.carType" filterable placeholder="车辆类型" clearable value="" @change="fetchData()">-->
-        <!--<el-option-->
-        <!--v-for="item in cartypelist"-->
-        <!--:key="item.value"-->
-        <!--:label="item.name"-->
-        <!--:value="item.value"/>-->
-        <!--</el-select>-->
-        <!--</el-form-item>-->
-        <el-form-item class="selectForm-container-item" prop="keywords">
-          <dept-select v-model="listQuery.deptId" :dept-show="deptShow" placeholder="使用单位" clearable value=""/>
-        </el-form-item>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.description" placeholder="车辆描述" size="small" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.carCode" placeholder="车牌号" size="small" clearable/>
+      </search-item>
+      <!--<el-form-item class="selectForm-container-item" prop="keywords">-->
+      <!--<el-select v-model="listQuery.carType" filterable placeholder="车辆类型" clearable value="" @change="fetchData()">-->
+      <!--<el-option-->
+      <!--v-for="item in cartypelist"-->
+      <!--:key="item.value"-->
+      <!--:label="item.name"-->
+      <!--:value="item.value"/>-->
+      <!--</el-select>-->
+      <!--</el-form-item>-->
+      <search-item>
+        <dept-select v-model="listQuery.deptId" :dept-show="deptShow" placeholder="使用单位" size="small" clearable value=""/>
+      </search-item>
 
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
-      </el-form>
-    </div>
+    </search-area>
     <!--查询结果Table显示-->
-    <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-      <el-table-column :index="indexMethod" align="center" type="index" label="序号" width="55"/>
-      <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-        <template slot-scope="scope">
-          <span :class="column.class">{{ scope.row[column.value] }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[15,20,30]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
-  </div>
+    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" class="table" border size="small" @selection-change="handleSelectionChange" @change="changePage"/>
+  </app-container>
 </template>
 <script>
 
@@ -157,6 +134,16 @@
     // 多选触发方法
     handleSelectionChange(val) {
       this.multipleSelection = val
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }
diff --git a/src/views/mile/listTime.vue b/src/views/mile/listTime.vue
index 30f9edc..711df32 100644
--- a/src/views/mile/listTime.vue
+++ b/src/views/mile/listTime.vue
@@ -1,51 +1,29 @@
-<template xmlns:align="">
-  <div class="app-container">
+<template>
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-form-item class="selectForm-container-item" prop="keywords">
-          <el-date-picker
-            v-model="timeRange"
-            :picker-options="pickerOptions"
-            :clearable="false"
-            type="daterange"
-            value-format="yyyy-MM-dd"
-            align="right"
-            unlink-panels
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"/>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item" prop="keywords">
-          <dept-select v-model="listQuery.deptId" :dept-show="deptShow" placeholder="使用单位" clearable value=""/>
-        </el-form-item>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          :clearable="false"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          align="right"
+          size="small"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+      <search-item>
+        <dept-select v-model="listQuery.deptId" :dept-show="deptShow" placeholder="使用单位" clearable size="small" value=""/>
+      </search-item>
+    </search-area>
 
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
-      </el-form>
-    </div>
     <!--查询结果Table显示-->
-    <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-      <el-table-column :index="indexMethod" align="center" type="index" label="序号" width="55"/>
-      <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-        <template slot-scope="scope">
-          <span :class="column.class">{{ scope.row[column.value] }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[15,20,30]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
-  </div>
+    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" class="table" border size="small" @selection-change="handleSelectionChange" @change="changePage"/>
+  </app-container>
 </template>
 <script>
 import { staticsByTime } from '@/api/mile'
@@ -185,22 +163,20 @@
     // 多选触发方法
     handleSelectionChange(val) {
       this.multipleSelection = val
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  /*.el-table__header tr,*/
-  /*.el-table__header th {*/
-    /*padding: 0;*/
-    /*height: 40px;*/
-    /*background-color: #f8f8f8;*/
-  /*}*/
-  /*.table{*/
-    /*margin-bottom: 20px;*/
-  /*}*/
-  /*.pagination-container{*/
-    /*margin-bottom: 100px;*/
-  /*}*/
 </style>