diff --git a/src/views/assessPost/dispatcherAssess.vue b/src/views/assessPost/dispatcherAssess.vue
index a484fa4..5be7915 100644
--- a/src/views/assessPost/dispatcherAssess.vue
+++ b/src/views/assessPost/dispatcherAssess.vue
@@ -1,56 +1,26 @@
 <!--监督员考核-->
 <template>
-  <div class="app-container">
-    <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="beginDate">
-            <el-date-picker
-              v-model="timeRange"
-              :picker-options="pickerOptions"
-              type="daterange"
-              range-separator="至"
-              value-format="yyyy-MM-dd"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-data-analysis" @click="search">统计</el-button>
-          <el-button class="filter-item" icon="el-icon-document" @click="exportTable">报表</el-button>
-        </el-row>
-      </el-form>
-    </div>
-    <!--查询结果Table显示-->
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="setRule">考核规则</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--<el-table-column :index="indexMethod" align="center" type="index"/>-->
-        <el-table-column v-for="column in columns" :key="column.name" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <el-button v-if="column.type=='Button'&&scope.row[column.value]!=0" type="text" @click="showCaseList(scope.row,column.value)">{{ scope.row[column.value] }}</el-button>
-            <span v-else :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
+  <app-container>
+    <search-area :need-search-more="false" type="default" size="small" @search="search" @clear="clearInput">
+      <search-item >
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          type="daterange"
+          size="small"
+          range-separator="至"
+          value-format="yyyy-MM-dd"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
+        <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
+      </template>
+
+    </normal-table>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -60,7 +30,69 @@
     >
       <assess-rule-dispatcher ref="assessRule"/>
     </el-dialog>
-  </div>
+  </app-container>
+
+  <!--<div class="app-container">-->
+    <!--&lt;!&ndash;筛选条件&ndash;&gt;-->
+    <!--<div class="search-div">-->
+      <!--<el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">-->
+        <!--<el-row>-->
+          <!--<el-form-item class="selectForm-container-item" prop="beginDate">-->
+            <!--<el-date-picker-->
+              <!--v-model="timeRange"-->
+              <!--:picker-options="pickerOptions"-->
+              <!--type="daterange"-->
+              <!--range-separator="至"-->
+              <!--value-format="yyyy-MM-dd"-->
+              <!--start-placeholder="开始日期"-->
+              <!--end-placeholder="结束日期"/>-->
+          <!--</el-form-item>-->
+          <!--<el-button class="filter-item" type="primary" icon="el-icon-data-analysis" @click="search">统计</el-button>-->
+          <!--<el-button class="filter-item" icon="el-icon-document" @click="exportTable">报表</el-button>-->
+        <!--</el-row>-->
+      <!--</el-form>-->
+    <!--</div>-->
+    <!--&lt;!&ndash;查询结果Table显示&ndash;&gt;-->
+    <!--<div class="table-container">-->
+      <!--<el-row class="table-title">-->
+        <!--<el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>-->
+        <!--<el-col :span="12" :offset="6" class="edit_btns">-->
+          <!--<el-button class="edit_btn" size="small" @click="setRule">考核规则</el-button>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
+      <!--<el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">-->
+        <!--&lt;!&ndash;<el-table-column :index="indexMethod" align="center" type="index"/>&ndash;&gt;-->
+        <!--<el-table-column v-for="column in columns" :key="column.name" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>-->
+          <!--<template slot-scope="scope">-->
+            <!--<el-button v-if="column.type=='Button'&&scope.row[column.value]!=0" type="text" @click="showCaseList(scope.row,column.value)">{{ scope.row[column.value] }}</el-button>-->
+            <!--<span v-else :class="column.class">{{ scope.row[column.value] }}</span>-->
+          <!--</template>-->
+        <!--</el-table-column>-->
+      <!--</el-table>-->
+    <!--</div>-->
+    <!--&lt;!&ndash;分页&ndash;&gt;-->
+    <!--<div class="pagination-container">-->
+      <!--<el-pagination-->
+        <!--v-show="total>listQuery.limit"-->
+        <!--:current-page="listQuery.offset"-->
+        <!--:page-sizes="[20,30,50]"-->
+        <!--:page-size="listQuery.limit"-->
+        <!--:total="total"-->
+        <!--align="center"-->
+        <!--layout="total, sizes, prev, pager, next"-->
+        <!--@size-change="handleSizeChange"-->
+        <!--@current-change="handleCurrentChange"/>-->
+    <!--</div>-->
+    <!--<el-dialog-->
+      <!--:visible.sync="dialogVisible"-->
+      <!--:append-to-body="true"-->
+      <!--:close-on-click-modal="false"-->
+      <!--title="考核规则"-->
+      <!--width="70%"-->
+    <!--&gt;-->
+      <!--<assess-rule-dispatcher ref="assessRule"/>-->
+    <!--</el-dialog>-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -315,6 +347,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()
     }
   }
 
@@ -322,29 +364,5 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .app-container {
-    .table-container {
-      margin-bottom: 30px;
-      .table-title {
-        background-color: rgba(243, 243, 243, 1);
-        height: $tableTitleHeight;
-        .title-header {
-          line-height: $tableTitleHeight;
-          color: #606266;
-          font-size: 15px;
-          i {
-            margin-left: 5px;
-            margin-right: 5px;
-          }
-        }
-      }
-      .edit_btns{
-        .edit_btn{
-          float:right;
-          margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-        }
-      }
-    }
-  }
+
 </style>

diff --git a/src/views/assessPost/dispatcherAssess.vue b/src/views/assessPost/dispatcherAssess.vue
index a484fa4..5be7915 100644
--- a/src/views/assessPost/dispatcherAssess.vue
+++ b/src/views/assessPost/dispatcherAssess.vue
@@ -1,56 +1,26 @@
 <!--监督员考核-->
 <template>
-  <div class="app-container">
-    <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="beginDate">
-            <el-date-picker
-              v-model="timeRange"
-              :picker-options="pickerOptions"
-              type="daterange"
-              range-separator="至"
-              value-format="yyyy-MM-dd"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-data-analysis" @click="search">统计</el-button>
-          <el-button class="filter-item" icon="el-icon-document" @click="exportTable">报表</el-button>
-        </el-row>
-      </el-form>
-    </div>
-    <!--查询结果Table显示-->
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="setRule">考核规则</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--<el-table-column :index="indexMethod" align="center" type="index"/>-->
-        <el-table-column v-for="column in columns" :key="column.name" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <el-button v-if="column.type=='Button'&&scope.row[column.value]!=0" type="text" @click="showCaseList(scope.row,column.value)">{{ scope.row[column.value] }}</el-button>
-            <span v-else :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
+  <app-container>
+    <search-area :need-search-more="false" type="default" size="small" @search="search" @clear="clearInput">
+      <search-item >
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          type="daterange"
+          size="small"
+          range-separator="至"
+          value-format="yyyy-MM-dd"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
+        <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
+      </template>
+
+    </normal-table>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -60,7 +30,69 @@
     >
       <assess-rule-dispatcher ref="assessRule"/>
     </el-dialog>
-  </div>
+  </app-container>
+
+  <!--<div class="app-container">-->
+    <!--&lt;!&ndash;筛选条件&ndash;&gt;-->
+    <!--<div class="search-div">-->
+      <!--<el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">-->
+        <!--<el-row>-->
+          <!--<el-form-item class="selectForm-container-item" prop="beginDate">-->
+            <!--<el-date-picker-->
+              <!--v-model="timeRange"-->
+              <!--:picker-options="pickerOptions"-->
+              <!--type="daterange"-->
+              <!--range-separator="至"-->
+              <!--value-format="yyyy-MM-dd"-->
+              <!--start-placeholder="开始日期"-->
+              <!--end-placeholder="结束日期"/>-->
+          <!--</el-form-item>-->
+          <!--<el-button class="filter-item" type="primary" icon="el-icon-data-analysis" @click="search">统计</el-button>-->
+          <!--<el-button class="filter-item" icon="el-icon-document" @click="exportTable">报表</el-button>-->
+        <!--</el-row>-->
+      <!--</el-form>-->
+    <!--</div>-->
+    <!--&lt;!&ndash;查询结果Table显示&ndash;&gt;-->
+    <!--<div class="table-container">-->
+      <!--<el-row class="table-title">-->
+        <!--<el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>-->
+        <!--<el-col :span="12" :offset="6" class="edit_btns">-->
+          <!--<el-button class="edit_btn" size="small" @click="setRule">考核规则</el-button>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
+      <!--<el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">-->
+        <!--&lt;!&ndash;<el-table-column :index="indexMethod" align="center" type="index"/>&ndash;&gt;-->
+        <!--<el-table-column v-for="column in columns" :key="column.name" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>-->
+          <!--<template slot-scope="scope">-->
+            <!--<el-button v-if="column.type=='Button'&&scope.row[column.value]!=0" type="text" @click="showCaseList(scope.row,column.value)">{{ scope.row[column.value] }}</el-button>-->
+            <!--<span v-else :class="column.class">{{ scope.row[column.value] }}</span>-->
+          <!--</template>-->
+        <!--</el-table-column>-->
+      <!--</el-table>-->
+    <!--</div>-->
+    <!--&lt;!&ndash;分页&ndash;&gt;-->
+    <!--<div class="pagination-container">-->
+      <!--<el-pagination-->
+        <!--v-show="total>listQuery.limit"-->
+        <!--:current-page="listQuery.offset"-->
+        <!--:page-sizes="[20,30,50]"-->
+        <!--:page-size="listQuery.limit"-->
+        <!--:total="total"-->
+        <!--align="center"-->
+        <!--layout="total, sizes, prev, pager, next"-->
+        <!--@size-change="handleSizeChange"-->
+        <!--@current-change="handleCurrentChange"/>-->
+    <!--</div>-->
+    <!--<el-dialog-->
+      <!--:visible.sync="dialogVisible"-->
+      <!--:append-to-body="true"-->
+      <!--:close-on-click-modal="false"-->
+      <!--title="考核规则"-->
+      <!--width="70%"-->
+    <!--&gt;-->
+      <!--<assess-rule-dispatcher ref="assessRule"/>-->
+    <!--</el-dialog>-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -315,6 +347,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()
     }
   }
 
@@ -322,29 +364,5 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .app-container {
-    .table-container {
-      margin-bottom: 30px;
-      .table-title {
-        background-color: rgba(243, 243, 243, 1);
-        height: $tableTitleHeight;
-        .title-header {
-          line-height: $tableTitleHeight;
-          color: #606266;
-          font-size: 15px;
-          i {
-            margin-left: 5px;
-            margin-right: 5px;
-          }
-        }
-      }
-      .edit_btns{
-        .edit_btn{
-          float:right;
-          margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-        }
-      }
-    }
-  }
+
 </style>
diff --git a/src/views/assessPost/monitorAssess.vue b/src/views/assessPost/monitorAssess.vue
index 5feb3b0..d34736f 100644
--- a/src/views/assessPost/monitorAssess.vue
+++ b/src/views/assessPost/monitorAssess.vue
@@ -1,56 +1,26 @@
 <!--监督员考核-->
 <template>
-  <div class="app-container">
-    <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="beginDate">
-            <el-date-picker
-              v-model="timeRange"
-              :picker-options="pickerOptions"
-              type="daterange"
-              range-separator="至"
-              value-format="yyyy-MM-dd"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-data-analysis" @click="search">统计</el-button>
-          <el-button class="filter-item" icon="el-icon-document" @click="exportTable">报表</el-button>
-        </el-row>
-      </el-form>
-    </div>
-    <!--查询结果Table显示-->
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="setRule">考核规则</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--<el-table-column :index="indexMethod" align="center" type="index"/>-->
-        <el-table-column v-for="column in columns" :key="column.name" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <el-button v-if="column.type=='Button'&&scope.row[column.value]!=0" type="text" @click="showCaseList(scope.row,column.value)">{{ scope.row[column.value] }}</el-button>
-            <span v-else :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
+  <app-container>
+    <search-area :need-search-more="false" type="default" size="small" @search="search" @clear="clearInput">
+      <search-item >
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          type="daterange"
+          size="small"
+          range-separator="至"
+          value-format="yyyy-MM-dd"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
+        <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
+      </template>
+
+    </normal-table>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -60,7 +30,7 @@
     >
       <assess-rule-monitor ref="assessRule"/>
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -269,6 +239,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()
     }
   }
 
@@ -276,29 +256,5 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .app-container {
-    .table-container {
-      margin-bottom: 30px;
-      .table-title {
-        background-color: rgba(243, 243, 243, 1);
-        height: $tableTitleHeight;
-        .title-header {
-          line-height: $tableTitleHeight;
-          color: #606266;
-          font-size: 15px;
-          i {
-            margin-left: 5px;
-            margin-right: 5px;
-          }
-        }
-      }
-      .edit_btns{
-        .edit_btn{
-          float:right;
-          margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-        }
-      }
-    }
-  }
+
 </style>

diff --git a/src/views/assessPost/dispatcherAssess.vue b/src/views/assessPost/dispatcherAssess.vue
index a484fa4..5be7915 100644
--- a/src/views/assessPost/dispatcherAssess.vue
+++ b/src/views/assessPost/dispatcherAssess.vue
@@ -1,56 +1,26 @@
 <!--监督员考核-->
 <template>
-  <div class="app-container">
-    <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="beginDate">
-            <el-date-picker
-              v-model="timeRange"
-              :picker-options="pickerOptions"
-              type="daterange"
-              range-separator="至"
-              value-format="yyyy-MM-dd"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-data-analysis" @click="search">统计</el-button>
-          <el-button class="filter-item" icon="el-icon-document" @click="exportTable">报表</el-button>
-        </el-row>
-      </el-form>
-    </div>
-    <!--查询结果Table显示-->
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="setRule">考核规则</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--<el-table-column :index="indexMethod" align="center" type="index"/>-->
-        <el-table-column v-for="column in columns" :key="column.name" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <el-button v-if="column.type=='Button'&&scope.row[column.value]!=0" type="text" @click="showCaseList(scope.row,column.value)">{{ scope.row[column.value] }}</el-button>
-            <span v-else :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
+  <app-container>
+    <search-area :need-search-more="false" type="default" size="small" @search="search" @clear="clearInput">
+      <search-item >
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          type="daterange"
+          size="small"
+          range-separator="至"
+          value-format="yyyy-MM-dd"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
+        <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
+      </template>
+
+    </normal-table>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -60,7 +30,69 @@
     >
       <assess-rule-dispatcher ref="assessRule"/>
     </el-dialog>
-  </div>
+  </app-container>
+
+  <!--<div class="app-container">-->
+    <!--&lt;!&ndash;筛选条件&ndash;&gt;-->
+    <!--<div class="search-div">-->
+      <!--<el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">-->
+        <!--<el-row>-->
+          <!--<el-form-item class="selectForm-container-item" prop="beginDate">-->
+            <!--<el-date-picker-->
+              <!--v-model="timeRange"-->
+              <!--:picker-options="pickerOptions"-->
+              <!--type="daterange"-->
+              <!--range-separator="至"-->
+              <!--value-format="yyyy-MM-dd"-->
+              <!--start-placeholder="开始日期"-->
+              <!--end-placeholder="结束日期"/>-->
+          <!--</el-form-item>-->
+          <!--<el-button class="filter-item" type="primary" icon="el-icon-data-analysis" @click="search">统计</el-button>-->
+          <!--<el-button class="filter-item" icon="el-icon-document" @click="exportTable">报表</el-button>-->
+        <!--</el-row>-->
+      <!--</el-form>-->
+    <!--</div>-->
+    <!--&lt;!&ndash;查询结果Table显示&ndash;&gt;-->
+    <!--<div class="table-container">-->
+      <!--<el-row class="table-title">-->
+        <!--<el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>-->
+        <!--<el-col :span="12" :offset="6" class="edit_btns">-->
+          <!--<el-button class="edit_btn" size="small" @click="setRule">考核规则</el-button>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
+      <!--<el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">-->
+        <!--&lt;!&ndash;<el-table-column :index="indexMethod" align="center" type="index"/>&ndash;&gt;-->
+        <!--<el-table-column v-for="column in columns" :key="column.name" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>-->
+          <!--<template slot-scope="scope">-->
+            <!--<el-button v-if="column.type=='Button'&&scope.row[column.value]!=0" type="text" @click="showCaseList(scope.row,column.value)">{{ scope.row[column.value] }}</el-button>-->
+            <!--<span v-else :class="column.class">{{ scope.row[column.value] }}</span>-->
+          <!--</template>-->
+        <!--</el-table-column>-->
+      <!--</el-table>-->
+    <!--</div>-->
+    <!--&lt;!&ndash;分页&ndash;&gt;-->
+    <!--<div class="pagination-container">-->
+      <!--<el-pagination-->
+        <!--v-show="total>listQuery.limit"-->
+        <!--:current-page="listQuery.offset"-->
+        <!--:page-sizes="[20,30,50]"-->
+        <!--:page-size="listQuery.limit"-->
+        <!--:total="total"-->
+        <!--align="center"-->
+        <!--layout="total, sizes, prev, pager, next"-->
+        <!--@size-change="handleSizeChange"-->
+        <!--@current-change="handleCurrentChange"/>-->
+    <!--</div>-->
+    <!--<el-dialog-->
+      <!--:visible.sync="dialogVisible"-->
+      <!--:append-to-body="true"-->
+      <!--:close-on-click-modal="false"-->
+      <!--title="考核规则"-->
+      <!--width="70%"-->
+    <!--&gt;-->
+      <!--<assess-rule-dispatcher ref="assessRule"/>-->
+    <!--</el-dialog>-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -315,6 +347,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()
     }
   }
 
@@ -322,29 +364,5 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .app-container {
-    .table-container {
-      margin-bottom: 30px;
-      .table-title {
-        background-color: rgba(243, 243, 243, 1);
-        height: $tableTitleHeight;
-        .title-header {
-          line-height: $tableTitleHeight;
-          color: #606266;
-          font-size: 15px;
-          i {
-            margin-left: 5px;
-            margin-right: 5px;
-          }
-        }
-      }
-      .edit_btns{
-        .edit_btn{
-          float:right;
-          margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-        }
-      }
-    }
-  }
+
 </style>
diff --git a/src/views/assessPost/monitorAssess.vue b/src/views/assessPost/monitorAssess.vue
index 5feb3b0..d34736f 100644
--- a/src/views/assessPost/monitorAssess.vue
+++ b/src/views/assessPost/monitorAssess.vue
@@ -1,56 +1,26 @@
 <!--监督员考核-->
 <template>
-  <div class="app-container">
-    <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="beginDate">
-            <el-date-picker
-              v-model="timeRange"
-              :picker-options="pickerOptions"
-              type="daterange"
-              range-separator="至"
-              value-format="yyyy-MM-dd"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-data-analysis" @click="search">统计</el-button>
-          <el-button class="filter-item" icon="el-icon-document" @click="exportTable">报表</el-button>
-        </el-row>
-      </el-form>
-    </div>
-    <!--查询结果Table显示-->
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="setRule">考核规则</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--<el-table-column :index="indexMethod" align="center" type="index"/>-->
-        <el-table-column v-for="column in columns" :key="column.name" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <el-button v-if="column.type=='Button'&&scope.row[column.value]!=0" type="text" @click="showCaseList(scope.row,column.value)">{{ scope.row[column.value] }}</el-button>
-            <span v-else :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
+  <app-container>
+    <search-area :need-search-more="false" type="default" size="small" @search="search" @clear="clearInput">
+      <search-item >
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          type="daterange"
+          size="small"
+          range-separator="至"
+          value-format="yyyy-MM-dd"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
+        <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
+      </template>
+
+    </normal-table>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -60,7 +30,7 @@
     >
       <assess-rule-monitor ref="assessRule"/>
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -269,6 +239,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()
     }
   }
 
@@ -276,29 +256,5 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .app-container {
-    .table-container {
-      margin-bottom: 30px;
-      .table-title {
-        background-color: rgba(243, 243, 243, 1);
-        height: $tableTitleHeight;
-        .title-header {
-          line-height: $tableTitleHeight;
-          color: #606266;
-          font-size: 15px;
-          i {
-            margin-left: 5px;
-            margin-right: 5px;
-          }
-        }
-      }
-      .edit_btns{
-        .edit_btn{
-          float:right;
-          margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-        }
-      }
-    }
-  }
+
 </style>
diff --git a/src/views/assessPost/receiverAssess.vue b/src/views/assessPost/receiverAssess.vue
index 0ece965..a82ab53 100644
--- a/src/views/assessPost/receiverAssess.vue
+++ b/src/views/assessPost/receiverAssess.vue
@@ -1,56 +1,26 @@
 <!--监督员考核-->
 <template>
-  <div class="app-container">
-    <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="beginDate">
-            <el-date-picker
-              v-model="timeRange"
-              :picker-options="pickerOptions"
-              type="daterange"
-              range-separator="至"
-              value-format="yyyy-MM-dd"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-data-analysis" @click="search">统计</el-button>
-          <el-button class="filter-item" icon="el-icon-document" @click="exportTable">报表</el-button>
-        </el-row>
-      </el-form>
-    </div>
-    <!--查询结果Table显示-->
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="setRule">考核规则</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--<el-table-column :index="indexMethod" align="center" type="index"/>-->
-        <el-table-column v-for="column in columns" :key="column.name" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <el-button v-if="column.type=='Button'&&scope.row[column.value]!=0" type="text" @click="showCaseList(scope.row,column.value)">{{ scope.row[column.value] }}</el-button>
-            <span v-else :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
+  <app-container>
+    <search-area :need-search-more="false" type="default" size="small" @search="search" @clear="clearInput">
+      <search-item >
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          type="daterange"
+          size="small"
+          range-separator="至"
+          value-format="yyyy-MM-dd"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
+        <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
+      </template>
+
+    </normal-table>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -60,7 +30,8 @@
     >
       <assess-rule-receiver ref="assessRule"/>
     </el-dialog>
-  </div>
+  </app-container>
+
 </template>
 
 <script>
@@ -310,6 +281,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()
     }
   }
 
@@ -317,29 +298,5 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .app-container {
-    .table-container {
-      margin-bottom: 30px;
-      .table-title {
-        background-color: rgba(243, 243, 243, 1);
-        height: $tableTitleHeight;
-        .title-header {
-          line-height: $tableTitleHeight;
-          color: #606266;
-          font-size: 15px;
-          i {
-            margin-left: 5px;
-            margin-right: 5px;
-          }
-        }
-      }
-      .edit_btns{
-        .edit_btn{
-          float:right;
-          margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-        }
-      }
-    }
-  }
+
 </style>

diff --git a/src/views/assessPost/dispatcherAssess.vue b/src/views/assessPost/dispatcherAssess.vue
index a484fa4..5be7915 100644
--- a/src/views/assessPost/dispatcherAssess.vue
+++ b/src/views/assessPost/dispatcherAssess.vue
@@ -1,56 +1,26 @@
 <!--监督员考核-->
 <template>
-  <div class="app-container">
-    <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="beginDate">
-            <el-date-picker
-              v-model="timeRange"
-              :picker-options="pickerOptions"
-              type="daterange"
-              range-separator="至"
-              value-format="yyyy-MM-dd"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-data-analysis" @click="search">统计</el-button>
-          <el-button class="filter-item" icon="el-icon-document" @click="exportTable">报表</el-button>
-        </el-row>
-      </el-form>
-    </div>
-    <!--查询结果Table显示-->
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="setRule">考核规则</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--<el-table-column :index="indexMethod" align="center" type="index"/>-->
-        <el-table-column v-for="column in columns" :key="column.name" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <el-button v-if="column.type=='Button'&&scope.row[column.value]!=0" type="text" @click="showCaseList(scope.row,column.value)">{{ scope.row[column.value] }}</el-button>
-            <span v-else :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
+  <app-container>
+    <search-area :need-search-more="false" type="default" size="small" @search="search" @clear="clearInput">
+      <search-item >
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          type="daterange"
+          size="small"
+          range-separator="至"
+          value-format="yyyy-MM-dd"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
+        <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
+      </template>
+
+    </normal-table>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -60,7 +30,69 @@
     >
       <assess-rule-dispatcher ref="assessRule"/>
     </el-dialog>
-  </div>
+  </app-container>
+
+  <!--<div class="app-container">-->
+    <!--&lt;!&ndash;筛选条件&ndash;&gt;-->
+    <!--<div class="search-div">-->
+      <!--<el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">-->
+        <!--<el-row>-->
+          <!--<el-form-item class="selectForm-container-item" prop="beginDate">-->
+            <!--<el-date-picker-->
+              <!--v-model="timeRange"-->
+              <!--:picker-options="pickerOptions"-->
+              <!--type="daterange"-->
+              <!--range-separator="至"-->
+              <!--value-format="yyyy-MM-dd"-->
+              <!--start-placeholder="开始日期"-->
+              <!--end-placeholder="结束日期"/>-->
+          <!--</el-form-item>-->
+          <!--<el-button class="filter-item" type="primary" icon="el-icon-data-analysis" @click="search">统计</el-button>-->
+          <!--<el-button class="filter-item" icon="el-icon-document" @click="exportTable">报表</el-button>-->
+        <!--</el-row>-->
+      <!--</el-form>-->
+    <!--</div>-->
+    <!--&lt;!&ndash;查询结果Table显示&ndash;&gt;-->
+    <!--<div class="table-container">-->
+      <!--<el-row class="table-title">-->
+        <!--<el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>-->
+        <!--<el-col :span="12" :offset="6" class="edit_btns">-->
+          <!--<el-button class="edit_btn" size="small" @click="setRule">考核规则</el-button>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
+      <!--<el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">-->
+        <!--&lt;!&ndash;<el-table-column :index="indexMethod" align="center" type="index"/>&ndash;&gt;-->
+        <!--<el-table-column v-for="column in columns" :key="column.name" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>-->
+          <!--<template slot-scope="scope">-->
+            <!--<el-button v-if="column.type=='Button'&&scope.row[column.value]!=0" type="text" @click="showCaseList(scope.row,column.value)">{{ scope.row[column.value] }}</el-button>-->
+            <!--<span v-else :class="column.class">{{ scope.row[column.value] }}</span>-->
+          <!--</template>-->
+        <!--</el-table-column>-->
+      <!--</el-table>-->
+    <!--</div>-->
+    <!--&lt;!&ndash;分页&ndash;&gt;-->
+    <!--<div class="pagination-container">-->
+      <!--<el-pagination-->
+        <!--v-show="total>listQuery.limit"-->
+        <!--:current-page="listQuery.offset"-->
+        <!--:page-sizes="[20,30,50]"-->
+        <!--:page-size="listQuery.limit"-->
+        <!--:total="total"-->
+        <!--align="center"-->
+        <!--layout="total, sizes, prev, pager, next"-->
+        <!--@size-change="handleSizeChange"-->
+        <!--@current-change="handleCurrentChange"/>-->
+    <!--</div>-->
+    <!--<el-dialog-->
+      <!--:visible.sync="dialogVisible"-->
+      <!--:append-to-body="true"-->
+      <!--:close-on-click-modal="false"-->
+      <!--title="考核规则"-->
+      <!--width="70%"-->
+    <!--&gt;-->
+      <!--<assess-rule-dispatcher ref="assessRule"/>-->
+    <!--</el-dialog>-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -315,6 +347,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()
     }
   }
 
@@ -322,29 +364,5 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .app-container {
-    .table-container {
-      margin-bottom: 30px;
-      .table-title {
-        background-color: rgba(243, 243, 243, 1);
-        height: $tableTitleHeight;
-        .title-header {
-          line-height: $tableTitleHeight;
-          color: #606266;
-          font-size: 15px;
-          i {
-            margin-left: 5px;
-            margin-right: 5px;
-          }
-        }
-      }
-      .edit_btns{
-        .edit_btn{
-          float:right;
-          margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-        }
-      }
-    }
-  }
+
 </style>
diff --git a/src/views/assessPost/monitorAssess.vue b/src/views/assessPost/monitorAssess.vue
index 5feb3b0..d34736f 100644
--- a/src/views/assessPost/monitorAssess.vue
+++ b/src/views/assessPost/monitorAssess.vue
@@ -1,56 +1,26 @@
 <!--监督员考核-->
 <template>
-  <div class="app-container">
-    <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="beginDate">
-            <el-date-picker
-              v-model="timeRange"
-              :picker-options="pickerOptions"
-              type="daterange"
-              range-separator="至"
-              value-format="yyyy-MM-dd"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-data-analysis" @click="search">统计</el-button>
-          <el-button class="filter-item" icon="el-icon-document" @click="exportTable">报表</el-button>
-        </el-row>
-      </el-form>
-    </div>
-    <!--查询结果Table显示-->
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="setRule">考核规则</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--<el-table-column :index="indexMethod" align="center" type="index"/>-->
-        <el-table-column v-for="column in columns" :key="column.name" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <el-button v-if="column.type=='Button'&&scope.row[column.value]!=0" type="text" @click="showCaseList(scope.row,column.value)">{{ scope.row[column.value] }}</el-button>
-            <span v-else :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
+  <app-container>
+    <search-area :need-search-more="false" type="default" size="small" @search="search" @clear="clearInput">
+      <search-item >
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          type="daterange"
+          size="small"
+          range-separator="至"
+          value-format="yyyy-MM-dd"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
+        <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
+      </template>
+
+    </normal-table>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -60,7 +30,7 @@
     >
       <assess-rule-monitor ref="assessRule"/>
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -269,6 +239,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()
     }
   }
 
@@ -276,29 +256,5 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .app-container {
-    .table-container {
-      margin-bottom: 30px;
-      .table-title {
-        background-color: rgba(243, 243, 243, 1);
-        height: $tableTitleHeight;
-        .title-header {
-          line-height: $tableTitleHeight;
-          color: #606266;
-          font-size: 15px;
-          i {
-            margin-left: 5px;
-            margin-right: 5px;
-          }
-        }
-      }
-      .edit_btns{
-        .edit_btn{
-          float:right;
-          margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-        }
-      }
-    }
-  }
+
 </style>
diff --git a/src/views/assessPost/receiverAssess.vue b/src/views/assessPost/receiverAssess.vue
index 0ece965..a82ab53 100644
--- a/src/views/assessPost/receiverAssess.vue
+++ b/src/views/assessPost/receiverAssess.vue
@@ -1,56 +1,26 @@
 <!--监督员考核-->
 <template>
-  <div class="app-container">
-    <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="beginDate">
-            <el-date-picker
-              v-model="timeRange"
-              :picker-options="pickerOptions"
-              type="daterange"
-              range-separator="至"
-              value-format="yyyy-MM-dd"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-data-analysis" @click="search">统计</el-button>
-          <el-button class="filter-item" icon="el-icon-document" @click="exportTable">报表</el-button>
-        </el-row>
-      </el-form>
-    </div>
-    <!--查询结果Table显示-->
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="setRule">考核规则</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--<el-table-column :index="indexMethod" align="center" type="index"/>-->
-        <el-table-column v-for="column in columns" :key="column.name" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <el-button v-if="column.type=='Button'&&scope.row[column.value]!=0" type="text" @click="showCaseList(scope.row,column.value)">{{ scope.row[column.value] }}</el-button>
-            <span v-else :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
+  <app-container>
+    <search-area :need-search-more="false" type="default" size="small" @search="search" @clear="clearInput">
+      <search-item >
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          type="daterange"
+          size="small"
+          range-separator="至"
+          value-format="yyyy-MM-dd"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
+        <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
+      </template>
+
+    </normal-table>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -60,7 +30,8 @@
     >
       <assess-rule-receiver ref="assessRule"/>
     </el-dialog>
-  </div>
+  </app-container>
+
 </template>
 
 <script>
@@ -310,6 +281,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()
     }
   }
 
@@ -317,29 +298,5 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .app-container {
-    .table-container {
-      margin-bottom: 30px;
-      .table-title {
-        background-color: rgba(243, 243, 243, 1);
-        height: $tableTitleHeight;
-        .title-header {
-          line-height: $tableTitleHeight;
-          color: #606266;
-          font-size: 15px;
-          i {
-            margin-left: 5px;
-            margin-right: 5px;
-          }
-        }
-      }
-      .edit_btns{
-        .edit_btn{
-          float:right;
-          margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-        }
-      }
-    }
-  }
+
 </style>
diff --git a/src/views/assessPost/supervisorAssess.vue b/src/views/assessPost/supervisorAssess.vue
index 60f6eee..0160ee6 100644
--- a/src/views/assessPost/supervisorAssess.vue
+++ b/src/views/assessPost/supervisorAssess.vue
@@ -1,56 +1,26 @@
 <!--监督员考核-->
 <template>
-  <div class="app-container">
-    <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="beginDate">
-            <el-date-picker
-              v-model="timeRange"
-              :picker-options="pickerOptions"
-              type="daterange"
-              range-separator="至"
-              value-format="yyyy-MM-dd"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-data-analysis" @click="search">统计</el-button>
-          <el-button class="filter-item" icon="el-icon-document" @click="exportTable">报表</el-button>
-        </el-row>
-      </el-form>
-    </div>
-    <!--查询结果Table显示-->
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="setRule">考核规则</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--<el-table-column :index="indexMethod" align="center" type="index"/>-->
-        <el-table-column v-for="column in columns" :key="column.name" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <el-button v-if="column.type=='Button'&&scope.row[column.value]!=0" type="text" @click="showCaseList(scope.row,column.value)">{{ scope.row[column.value] }}</el-button>
-            <span v-else :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
+  <app-container>
+    <search-area :need-search-more="false" type="default" size="small" @search="search" @clear="clearInput">
+      <search-item >
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          type="daterange"
+          size="small"
+          range-separator="至"
+          value-format="yyyy-MM-dd"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
+        <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
+      </template>
+
+    </normal-table>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -60,7 +30,7 @@
     >
       <assess-rule-supervisor ref="assessRule"/>
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -313,6 +283,15 @@
     // 多选触发方法
     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()
     }
   }
 
@@ -320,29 +299,5 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .app-container {
-    .table-container {
-      margin-bottom: 30px;
-      .table-title {
-        background-color: rgba(243, 243, 243, 1);
-        height: $tableTitleHeight;
-        .title-header {
-          line-height: $tableTitleHeight;
-          color: #606266;
-          font-size: 15px;
-          i {
-            margin-left: 5px;
-            margin-right: 5px;
-          }
-        }
-      }
-      .edit_btns{
-        .edit_btn{
-          float:right;
-          margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-        }
-      }
-    }
-  }
+
 </style>

diff --git a/src/views/assessPost/dispatcherAssess.vue b/src/views/assessPost/dispatcherAssess.vue
index a484fa4..5be7915 100644
--- a/src/views/assessPost/dispatcherAssess.vue
+++ b/src/views/assessPost/dispatcherAssess.vue
@@ -1,56 +1,26 @@
 <!--监督员考核-->
 <template>
-  <div class="app-container">
-    <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="beginDate">
-            <el-date-picker
-              v-model="timeRange"
-              :picker-options="pickerOptions"
-              type="daterange"
-              range-separator="至"
-              value-format="yyyy-MM-dd"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-data-analysis" @click="search">统计</el-button>
-          <el-button class="filter-item" icon="el-icon-document" @click="exportTable">报表</el-button>
-        </el-row>
-      </el-form>
-    </div>
-    <!--查询结果Table显示-->
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="setRule">考核规则</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--<el-table-column :index="indexMethod" align="center" type="index"/>-->
-        <el-table-column v-for="column in columns" :key="column.name" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <el-button v-if="column.type=='Button'&&scope.row[column.value]!=0" type="text" @click="showCaseList(scope.row,column.value)">{{ scope.row[column.value] }}</el-button>
-            <span v-else :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
+  <app-container>
+    <search-area :need-search-more="false" type="default" size="small" @search="search" @clear="clearInput">
+      <search-item >
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          type="daterange"
+          size="small"
+          range-separator="至"
+          value-format="yyyy-MM-dd"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
+        <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
+      </template>
+
+    </normal-table>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -60,7 +30,69 @@
     >
       <assess-rule-dispatcher ref="assessRule"/>
     </el-dialog>
-  </div>
+  </app-container>
+
+  <!--<div class="app-container">-->
+    <!--&lt;!&ndash;筛选条件&ndash;&gt;-->
+    <!--<div class="search-div">-->
+      <!--<el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">-->
+        <!--<el-row>-->
+          <!--<el-form-item class="selectForm-container-item" prop="beginDate">-->
+            <!--<el-date-picker-->
+              <!--v-model="timeRange"-->
+              <!--:picker-options="pickerOptions"-->
+              <!--type="daterange"-->
+              <!--range-separator="至"-->
+              <!--value-format="yyyy-MM-dd"-->
+              <!--start-placeholder="开始日期"-->
+              <!--end-placeholder="结束日期"/>-->
+          <!--</el-form-item>-->
+          <!--<el-button class="filter-item" type="primary" icon="el-icon-data-analysis" @click="search">统计</el-button>-->
+          <!--<el-button class="filter-item" icon="el-icon-document" @click="exportTable">报表</el-button>-->
+        <!--</el-row>-->
+      <!--</el-form>-->
+    <!--</div>-->
+    <!--&lt;!&ndash;查询结果Table显示&ndash;&gt;-->
+    <!--<div class="table-container">-->
+      <!--<el-row class="table-title">-->
+        <!--<el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>-->
+        <!--<el-col :span="12" :offset="6" class="edit_btns">-->
+          <!--<el-button class="edit_btn" size="small" @click="setRule">考核规则</el-button>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
+      <!--<el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">-->
+        <!--&lt;!&ndash;<el-table-column :index="indexMethod" align="center" type="index"/>&ndash;&gt;-->
+        <!--<el-table-column v-for="column in columns" :key="column.name" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>-->
+          <!--<template slot-scope="scope">-->
+            <!--<el-button v-if="column.type=='Button'&&scope.row[column.value]!=0" type="text" @click="showCaseList(scope.row,column.value)">{{ scope.row[column.value] }}</el-button>-->
+            <!--<span v-else :class="column.class">{{ scope.row[column.value] }}</span>-->
+          <!--</template>-->
+        <!--</el-table-column>-->
+      <!--</el-table>-->
+    <!--</div>-->
+    <!--&lt;!&ndash;分页&ndash;&gt;-->
+    <!--<div class="pagination-container">-->
+      <!--<el-pagination-->
+        <!--v-show="total>listQuery.limit"-->
+        <!--:current-page="listQuery.offset"-->
+        <!--:page-sizes="[20,30,50]"-->
+        <!--:page-size="listQuery.limit"-->
+        <!--:total="total"-->
+        <!--align="center"-->
+        <!--layout="total, sizes, prev, pager, next"-->
+        <!--@size-change="handleSizeChange"-->
+        <!--@current-change="handleCurrentChange"/>-->
+    <!--</div>-->
+    <!--<el-dialog-->
+      <!--:visible.sync="dialogVisible"-->
+      <!--:append-to-body="true"-->
+      <!--:close-on-click-modal="false"-->
+      <!--title="考核规则"-->
+      <!--width="70%"-->
+    <!--&gt;-->
+      <!--<assess-rule-dispatcher ref="assessRule"/>-->
+    <!--</el-dialog>-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -315,6 +347,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()
     }
   }
 
@@ -322,29 +364,5 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .app-container {
-    .table-container {
-      margin-bottom: 30px;
-      .table-title {
-        background-color: rgba(243, 243, 243, 1);
-        height: $tableTitleHeight;
-        .title-header {
-          line-height: $tableTitleHeight;
-          color: #606266;
-          font-size: 15px;
-          i {
-            margin-left: 5px;
-            margin-right: 5px;
-          }
-        }
-      }
-      .edit_btns{
-        .edit_btn{
-          float:right;
-          margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-        }
-      }
-    }
-  }
+
 </style>
diff --git a/src/views/assessPost/monitorAssess.vue b/src/views/assessPost/monitorAssess.vue
index 5feb3b0..d34736f 100644
--- a/src/views/assessPost/monitorAssess.vue
+++ b/src/views/assessPost/monitorAssess.vue
@@ -1,56 +1,26 @@
 <!--监督员考核-->
 <template>
-  <div class="app-container">
-    <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="beginDate">
-            <el-date-picker
-              v-model="timeRange"
-              :picker-options="pickerOptions"
-              type="daterange"
-              range-separator="至"
-              value-format="yyyy-MM-dd"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-data-analysis" @click="search">统计</el-button>
-          <el-button class="filter-item" icon="el-icon-document" @click="exportTable">报表</el-button>
-        </el-row>
-      </el-form>
-    </div>
-    <!--查询结果Table显示-->
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="setRule">考核规则</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--<el-table-column :index="indexMethod" align="center" type="index"/>-->
-        <el-table-column v-for="column in columns" :key="column.name" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <el-button v-if="column.type=='Button'&&scope.row[column.value]!=0" type="text" @click="showCaseList(scope.row,column.value)">{{ scope.row[column.value] }}</el-button>
-            <span v-else :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
+  <app-container>
+    <search-area :need-search-more="false" type="default" size="small" @search="search" @clear="clearInput">
+      <search-item >
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          type="daterange"
+          size="small"
+          range-separator="至"
+          value-format="yyyy-MM-dd"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
+        <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
+      </template>
+
+    </normal-table>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -60,7 +30,7 @@
     >
       <assess-rule-monitor ref="assessRule"/>
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -269,6 +239,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()
     }
   }
 
@@ -276,29 +256,5 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .app-container {
-    .table-container {
-      margin-bottom: 30px;
-      .table-title {
-        background-color: rgba(243, 243, 243, 1);
-        height: $tableTitleHeight;
-        .title-header {
-          line-height: $tableTitleHeight;
-          color: #606266;
-          font-size: 15px;
-          i {
-            margin-left: 5px;
-            margin-right: 5px;
-          }
-        }
-      }
-      .edit_btns{
-        .edit_btn{
-          float:right;
-          margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-        }
-      }
-    }
-  }
+
 </style>
diff --git a/src/views/assessPost/receiverAssess.vue b/src/views/assessPost/receiverAssess.vue
index 0ece965..a82ab53 100644
--- a/src/views/assessPost/receiverAssess.vue
+++ b/src/views/assessPost/receiverAssess.vue
@@ -1,56 +1,26 @@
 <!--监督员考核-->
 <template>
-  <div class="app-container">
-    <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="beginDate">
-            <el-date-picker
-              v-model="timeRange"
-              :picker-options="pickerOptions"
-              type="daterange"
-              range-separator="至"
-              value-format="yyyy-MM-dd"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-data-analysis" @click="search">统计</el-button>
-          <el-button class="filter-item" icon="el-icon-document" @click="exportTable">报表</el-button>
-        </el-row>
-      </el-form>
-    </div>
-    <!--查询结果Table显示-->
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="setRule">考核规则</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--<el-table-column :index="indexMethod" align="center" type="index"/>-->
-        <el-table-column v-for="column in columns" :key="column.name" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <el-button v-if="column.type=='Button'&&scope.row[column.value]!=0" type="text" @click="showCaseList(scope.row,column.value)">{{ scope.row[column.value] }}</el-button>
-            <span v-else :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
+  <app-container>
+    <search-area :need-search-more="false" type="default" size="small" @search="search" @clear="clearInput">
+      <search-item >
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          type="daterange"
+          size="small"
+          range-separator="至"
+          value-format="yyyy-MM-dd"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
+        <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
+      </template>
+
+    </normal-table>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -60,7 +30,8 @@
     >
       <assess-rule-receiver ref="assessRule"/>
     </el-dialog>
-  </div>
+  </app-container>
+
 </template>
 
 <script>
@@ -310,6 +281,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()
     }
   }
 
@@ -317,29 +298,5 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .app-container {
-    .table-container {
-      margin-bottom: 30px;
-      .table-title {
-        background-color: rgba(243, 243, 243, 1);
-        height: $tableTitleHeight;
-        .title-header {
-          line-height: $tableTitleHeight;
-          color: #606266;
-          font-size: 15px;
-          i {
-            margin-left: 5px;
-            margin-right: 5px;
-          }
-        }
-      }
-      .edit_btns{
-        .edit_btn{
-          float:right;
-          margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-        }
-      }
-    }
-  }
+
 </style>
diff --git a/src/views/assessPost/supervisorAssess.vue b/src/views/assessPost/supervisorAssess.vue
index 60f6eee..0160ee6 100644
--- a/src/views/assessPost/supervisorAssess.vue
+++ b/src/views/assessPost/supervisorAssess.vue
@@ -1,56 +1,26 @@
 <!--监督员考核-->
 <template>
-  <div class="app-container">
-    <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="beginDate">
-            <el-date-picker
-              v-model="timeRange"
-              :picker-options="pickerOptions"
-              type="daterange"
-              range-separator="至"
-              value-format="yyyy-MM-dd"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-data-analysis" @click="search">统计</el-button>
-          <el-button class="filter-item" icon="el-icon-document" @click="exportTable">报表</el-button>
-        </el-row>
-      </el-form>
-    </div>
-    <!--查询结果Table显示-->
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="setRule">考核规则</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--<el-table-column :index="indexMethod" align="center" type="index"/>-->
-        <el-table-column v-for="column in columns" :key="column.name" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <el-button v-if="column.type=='Button'&&scope.row[column.value]!=0" type="text" @click="showCaseList(scope.row,column.value)">{{ scope.row[column.value] }}</el-button>
-            <span v-else :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
+  <app-container>
+    <search-area :need-search-more="false" type="default" size="small" @search="search" @clear="clearInput">
+      <search-item >
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          type="daterange"
+          size="small"
+          range-separator="至"
+          value-format="yyyy-MM-dd"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
+        <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
+      </template>
+
+    </normal-table>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -60,7 +30,7 @@
     >
       <assess-rule-supervisor ref="assessRule"/>
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -313,6 +283,15 @@
     // 多选触发方法
     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()
     }
   }
 
@@ -320,29 +299,5 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .app-container {
-    .table-container {
-      margin-bottom: 30px;
-      .table-title {
-        background-color: rgba(243, 243, 243, 1);
-        height: $tableTitleHeight;
-        .title-header {
-          line-height: $tableTitleHeight;
-          color: #606266;
-          font-size: 15px;
-          i {
-            margin-left: 5px;
-            margin-right: 5px;
-          }
-        }
-      }
-      .edit_btns{
-        .edit_btn{
-          float:right;
-          margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-        }
-      }
-    }
-  }
+
 </style>
diff --git a/src/views/assessRegion/assessArea.vue b/src/views/assessRegion/assessArea.vue
index caf51dc..ae1c1e8 100644
--- a/src/views/assessRegion/assessArea.vue
+++ b/src/views/assessRegion/assessArea.vue
@@ -1,54 +1,26 @@
 <!--监督员考核-->
 <template>
-  <div class="app-container">
-    <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="beginDate">
-            <el-date-picker
-              v-model="timeRange"
-              :picker-options="pickerOptions"
-              type="daterange"
-              range-separator="至"
-              value-format="yyyy-MM-dd"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-data-analysis" @click="search">统计</el-button>
-          <el-button class="filter-item" icon="el-icon-document" @click="exportTable">报表</el-button>
-        </el-row>
-      </el-form>
-    </div>
-    <!--查询结果Table显示-->
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" align="center" type="index"/>
-        <el-table-column v-for="column in columns" :key="column.name" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <span v-if="column.type!='Button'" :class="column.class">{{ scope.row[column.value] }}</span>
-            <el-button v-if="column.type=='Button'" type="text" @click="showCaseList(scope.row,column.value)">{{ scope.row[column.value] }}</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
-  </div>
+  <app-container>
+    <search-area :need-search-more="false" type="default" size="small" @search="search" @clear="clearInput">
+      <search-item >
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          type="daterange"
+          size="small"
+          range-separator="至"
+          value-format="yyyy-MM-dd"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
+      </template>
+
+    </normal-table>
+  </app-container>
 </template>
 
 <script>

diff --git a/src/views/assessPost/dispatcherAssess.vue b/src/views/assessPost/dispatcherAssess.vue
index a484fa4..5be7915 100644
--- a/src/views/assessPost/dispatcherAssess.vue
+++ b/src/views/assessPost/dispatcherAssess.vue
@@ -1,56 +1,26 @@
 <!--监督员考核-->
 <template>
-  <div class="app-container">
-    <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="beginDate">
-            <el-date-picker
-              v-model="timeRange"
-              :picker-options="pickerOptions"
-              type="daterange"
-              range-separator="至"
-              value-format="yyyy-MM-dd"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-data-analysis" @click="search">统计</el-button>
-          <el-button class="filter-item" icon="el-icon-document" @click="exportTable">报表</el-button>
-        </el-row>
-      </el-form>
-    </div>
-    <!--查询结果Table显示-->
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="setRule">考核规则</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--<el-table-column :index="indexMethod" align="center" type="index"/>-->
-        <el-table-column v-for="column in columns" :key="column.name" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <el-button v-if="column.type=='Button'&&scope.row[column.value]!=0" type="text" @click="showCaseList(scope.row,column.value)">{{ scope.row[column.value] }}</el-button>
-            <span v-else :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
+  <app-container>
+    <search-area :need-search-more="false" type="default" size="small" @search="search" @clear="clearInput">
+      <search-item >
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          type="daterange"
+          size="small"
+          range-separator="至"
+          value-format="yyyy-MM-dd"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
+        <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
+      </template>
+
+    </normal-table>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -60,7 +30,69 @@
     >
       <assess-rule-dispatcher ref="assessRule"/>
     </el-dialog>
-  </div>
+  </app-container>
+
+  <!--<div class="app-container">-->
+    <!--&lt;!&ndash;筛选条件&ndash;&gt;-->
+    <!--<div class="search-div">-->
+      <!--<el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">-->
+        <!--<el-row>-->
+          <!--<el-form-item class="selectForm-container-item" prop="beginDate">-->
+            <!--<el-date-picker-->
+              <!--v-model="timeRange"-->
+              <!--:picker-options="pickerOptions"-->
+              <!--type="daterange"-->
+              <!--range-separator="至"-->
+              <!--value-format="yyyy-MM-dd"-->
+              <!--start-placeholder="开始日期"-->
+              <!--end-placeholder="结束日期"/>-->
+          <!--</el-form-item>-->
+          <!--<el-button class="filter-item" type="primary" icon="el-icon-data-analysis" @click="search">统计</el-button>-->
+          <!--<el-button class="filter-item" icon="el-icon-document" @click="exportTable">报表</el-button>-->
+        <!--</el-row>-->
+      <!--</el-form>-->
+    <!--</div>-->
+    <!--&lt;!&ndash;查询结果Table显示&ndash;&gt;-->
+    <!--<div class="table-container">-->
+      <!--<el-row class="table-title">-->
+        <!--<el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>-->
+        <!--<el-col :span="12" :offset="6" class="edit_btns">-->
+          <!--<el-button class="edit_btn" size="small" @click="setRule">考核规则</el-button>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
+      <!--<el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">-->
+        <!--&lt;!&ndash;<el-table-column :index="indexMethod" align="center" type="index"/>&ndash;&gt;-->
+        <!--<el-table-column v-for="column in columns" :key="column.name" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>-->
+          <!--<template slot-scope="scope">-->
+            <!--<el-button v-if="column.type=='Button'&&scope.row[column.value]!=0" type="text" @click="showCaseList(scope.row,column.value)">{{ scope.row[column.value] }}</el-button>-->
+            <!--<span v-else :class="column.class">{{ scope.row[column.value] }}</span>-->
+          <!--</template>-->
+        <!--</el-table-column>-->
+      <!--</el-table>-->
+    <!--</div>-->
+    <!--&lt;!&ndash;分页&ndash;&gt;-->
+    <!--<div class="pagination-container">-->
+      <!--<el-pagination-->
+        <!--v-show="total>listQuery.limit"-->
+        <!--:current-page="listQuery.offset"-->
+        <!--:page-sizes="[20,30,50]"-->
+        <!--:page-size="listQuery.limit"-->
+        <!--:total="total"-->
+        <!--align="center"-->
+        <!--layout="total, sizes, prev, pager, next"-->
+        <!--@size-change="handleSizeChange"-->
+        <!--@current-change="handleCurrentChange"/>-->
+    <!--</div>-->
+    <!--<el-dialog-->
+      <!--:visible.sync="dialogVisible"-->
+      <!--:append-to-body="true"-->
+      <!--:close-on-click-modal="false"-->
+      <!--title="考核规则"-->
+      <!--width="70%"-->
+    <!--&gt;-->
+      <!--<assess-rule-dispatcher ref="assessRule"/>-->
+    <!--</el-dialog>-->
+  <!--</div>-->
 </template>
 
 <script>
@@ -315,6 +347,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()
     }
   }
 
@@ -322,29 +364,5 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .app-container {
-    .table-container {
-      margin-bottom: 30px;
-      .table-title {
-        background-color: rgba(243, 243, 243, 1);
-        height: $tableTitleHeight;
-        .title-header {
-          line-height: $tableTitleHeight;
-          color: #606266;
-          font-size: 15px;
-          i {
-            margin-left: 5px;
-            margin-right: 5px;
-          }
-        }
-      }
-      .edit_btns{
-        .edit_btn{
-          float:right;
-          margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-        }
-      }
-    }
-  }
+
 </style>
diff --git a/src/views/assessPost/monitorAssess.vue b/src/views/assessPost/monitorAssess.vue
index 5feb3b0..d34736f 100644
--- a/src/views/assessPost/monitorAssess.vue
+++ b/src/views/assessPost/monitorAssess.vue
@@ -1,56 +1,26 @@
 <!--监督员考核-->
 <template>
-  <div class="app-container">
-    <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="beginDate">
-            <el-date-picker
-              v-model="timeRange"
-              :picker-options="pickerOptions"
-              type="daterange"
-              range-separator="至"
-              value-format="yyyy-MM-dd"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-data-analysis" @click="search">统计</el-button>
-          <el-button class="filter-item" icon="el-icon-document" @click="exportTable">报表</el-button>
-        </el-row>
-      </el-form>
-    </div>
-    <!--查询结果Table显示-->
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="setRule">考核规则</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--<el-table-column :index="indexMethod" align="center" type="index"/>-->
-        <el-table-column v-for="column in columns" :key="column.name" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <el-button v-if="column.type=='Button'&&scope.row[column.value]!=0" type="text" @click="showCaseList(scope.row,column.value)">{{ scope.row[column.value] }}</el-button>
-            <span v-else :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
+  <app-container>
+    <search-area :need-search-more="false" type="default" size="small" @search="search" @clear="clearInput">
+      <search-item >
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          type="daterange"
+          size="small"
+          range-separator="至"
+          value-format="yyyy-MM-dd"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
+        <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
+      </template>
+
+    </normal-table>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -60,7 +30,7 @@
     >
       <assess-rule-monitor ref="assessRule"/>
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -269,6 +239,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()
     }
   }
 
@@ -276,29 +256,5 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .app-container {
-    .table-container {
-      margin-bottom: 30px;
-      .table-title {
-        background-color: rgba(243, 243, 243, 1);
-        height: $tableTitleHeight;
-        .title-header {
-          line-height: $tableTitleHeight;
-          color: #606266;
-          font-size: 15px;
-          i {
-            margin-left: 5px;
-            margin-right: 5px;
-          }
-        }
-      }
-      .edit_btns{
-        .edit_btn{
-          float:right;
-          margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-        }
-      }
-    }
-  }
+
 </style>
diff --git a/src/views/assessPost/receiverAssess.vue b/src/views/assessPost/receiverAssess.vue
index 0ece965..a82ab53 100644
--- a/src/views/assessPost/receiverAssess.vue
+++ b/src/views/assessPost/receiverAssess.vue
@@ -1,56 +1,26 @@
 <!--监督员考核-->
 <template>
-  <div class="app-container">
-    <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="beginDate">
-            <el-date-picker
-              v-model="timeRange"
-              :picker-options="pickerOptions"
-              type="daterange"
-              range-separator="至"
-              value-format="yyyy-MM-dd"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-data-analysis" @click="search">统计</el-button>
-          <el-button class="filter-item" icon="el-icon-document" @click="exportTable">报表</el-button>
-        </el-row>
-      </el-form>
-    </div>
-    <!--查询结果Table显示-->
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="setRule">考核规则</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--<el-table-column :index="indexMethod" align="center" type="index"/>-->
-        <el-table-column v-for="column in columns" :key="column.name" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <el-button v-if="column.type=='Button'&&scope.row[column.value]!=0" type="text" @click="showCaseList(scope.row,column.value)">{{ scope.row[column.value] }}</el-button>
-            <span v-else :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
+  <app-container>
+    <search-area :need-search-more="false" type="default" size="small" @search="search" @clear="clearInput">
+      <search-item >
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          type="daterange"
+          size="small"
+          range-separator="至"
+          value-format="yyyy-MM-dd"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
+        <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
+      </template>
+
+    </normal-table>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -60,7 +30,8 @@
     >
       <assess-rule-receiver ref="assessRule"/>
     </el-dialog>
-  </div>
+  </app-container>
+
 </template>
 
 <script>
@@ -310,6 +281,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()
     }
   }
 
@@ -317,29 +298,5 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .app-container {
-    .table-container {
-      margin-bottom: 30px;
-      .table-title {
-        background-color: rgba(243, 243, 243, 1);
-        height: $tableTitleHeight;
-        .title-header {
-          line-height: $tableTitleHeight;
-          color: #606266;
-          font-size: 15px;
-          i {
-            margin-left: 5px;
-            margin-right: 5px;
-          }
-        }
-      }
-      .edit_btns{
-        .edit_btn{
-          float:right;
-          margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-        }
-      }
-    }
-  }
+
 </style>
diff --git a/src/views/assessPost/supervisorAssess.vue b/src/views/assessPost/supervisorAssess.vue
index 60f6eee..0160ee6 100644
--- a/src/views/assessPost/supervisorAssess.vue
+++ b/src/views/assessPost/supervisorAssess.vue
@@ -1,56 +1,26 @@
 <!--监督员考核-->
 <template>
-  <div class="app-container">
-    <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="beginDate">
-            <el-date-picker
-              v-model="timeRange"
-              :picker-options="pickerOptions"
-              type="daterange"
-              range-separator="至"
-              value-format="yyyy-MM-dd"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-data-analysis" @click="search">统计</el-button>
-          <el-button class="filter-item" icon="el-icon-document" @click="exportTable">报表</el-button>
-        </el-row>
-      </el-form>
-    </div>
-    <!--查询结果Table显示-->
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-        <el-col :span="12" :offset="6" class="edit_btns">
-          <el-button class="edit_btn" size="small" @click="setRule">考核规则</el-button>
-        </el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
-        <!--<el-table-column :index="indexMethod" align="center" type="index"/>-->
-        <el-table-column v-for="column in columns" :key="column.name" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <el-button v-if="column.type=='Button'&&scope.row[column.value]!=0" type="text" @click="showCaseList(scope.row,column.value)">{{ scope.row[column.value] }}</el-button>
-            <span v-else :class="column.class">{{ scope.row[column.value] }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
+  <app-container>
+    <search-area :need-search-more="false" type="default" size="small" @search="search" @clear="clearInput">
+      <search-item >
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          type="daterange"
+          size="small"
+          range-separator="至"
+          value-format="yyyy-MM-dd"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="setRule">考核规则</el-button>
+        <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
+      </template>
+
+    </normal-table>
     <el-dialog
       :visible.sync="dialogVisible"
       :append-to-body="true"
@@ -60,7 +30,7 @@
     >
       <assess-rule-supervisor ref="assessRule"/>
     </el-dialog>
-  </div>
+  </app-container>
 </template>
 
 <script>
@@ -313,6 +283,15 @@
     // 多选触发方法
     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()
     }
   }
 
@@ -320,29 +299,5 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .app-container {
-    .table-container {
-      margin-bottom: 30px;
-      .table-title {
-        background-color: rgba(243, 243, 243, 1);
-        height: $tableTitleHeight;
-        .title-header {
-          line-height: $tableTitleHeight;
-          color: #606266;
-          font-size: 15px;
-          i {
-            margin-left: 5px;
-            margin-right: 5px;
-          }
-        }
-      }
-      .edit_btns{
-        .edit_btn{
-          float:right;
-          margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-        }
-      }
-    }
-  }
+
 </style>
diff --git a/src/views/assessRegion/assessArea.vue b/src/views/assessRegion/assessArea.vue
index caf51dc..ae1c1e8 100644
--- a/src/views/assessRegion/assessArea.vue
+++ b/src/views/assessRegion/assessArea.vue
@@ -1,54 +1,26 @@
 <!--监督员考核-->
 <template>
-  <div class="app-container">
-    <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="beginDate">
-            <el-date-picker
-              v-model="timeRange"
-              :picker-options="pickerOptions"
-              type="daterange"
-              range-separator="至"
-              value-format="yyyy-MM-dd"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-data-analysis" @click="search">统计</el-button>
-          <el-button class="filter-item" icon="el-icon-document" @click="exportTable">报表</el-button>
-        </el-row>
-      </el-form>
-    </div>
-    <!--查询结果Table显示-->
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column :index="indexMethod" align="center" type="index"/>
-        <el-table-column v-for="column in columns" :key="column.name" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <span v-if="column.type!='Button'" :class="column.class">{{ scope.row[column.value] }}</span>
-            <el-button v-if="column.type=='Button'" type="text" @click="showCaseList(scope.row,column.value)">{{ scope.row[column.value] }}</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
-  </div>
+  <app-container>
+    <search-area :need-search-more="false" type="default" size="small" @search="search" @clear="clearInput">
+      <search-item >
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          type="daterange"
+          size="small"
+          range-separator="至"
+          value-format="yyyy-MM-dd"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
+      </template>
+
+    </normal-table>
+  </app-container>
 </template>
 
 <script>
diff --git a/src/views/assessRegion/assessOverview.vue b/src/views/assessRegion/assessOverview.vue
index 4e2701c..dda8be8 100644
--- a/src/views/assessRegion/assessOverview.vue
+++ b/src/views/assessRegion/assessOverview.vue
@@ -1,53 +1,26 @@
 <!--监督员考核-->
 <template>
-  <div class="app-container">
-    <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-row>
-          <el-form-item class="selectForm-container-item" prop="beginDate">
-            <el-date-picker
-              v-model="timeRange"
-              :picker-options="pickerOptions"
-              type="daterange"
-              range-separator="至"
-              value-format="yyyy-MM-dd"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"/>
-          </el-form-item>
-          <el-button class="filter-item" type="primary" icon="el-icon-data-analysis" @click="search">统计</el-button>
-          <el-button class="filter-item" icon="el-icon-document" @click="exportTable">报表</el-button>
-        </el-row>
-      </el-form>
-    </div>
-    <!--查询结果Table显示-->
-    <div class="table-container">
-      <el-row class="table-title">
-        <el-col :span="6"><div class="title-header"><i class="el-icon-menu"/>数据列表</div></el-col>
-      </el-row>
-      <el-table v-loading="listLoading" :data="list" class="table" border>
-        <el-table-column v-for="column in columns" :key="column.name" :label="column.text" :width="column.width" align="center" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <span v-if="column.type!='Button'" :class="column.class">{{ scope.row[column.value] }}</span>
-            <el-button v-if="column.type=='Button'" type="text" @click="showCaseList(scope.row,column.value)">{{ scope.row[column.value] }}</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[20,30,50]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
-  </div>
+  <app-container>
+    <search-area :need-search-more="false" type="default" size="small" @search="search" @clear="clearInput">
+      <search-item >
+        <el-date-picker
+          v-model="timeRange"
+          :picker-options="pickerOptions"
+          type="daterange"
+          size="small"
+          range-separator="至"
+          value-format="yyyy-MM-dd"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"/>
+      </search-item>
+    </search-area>
+    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" :options="tableOption.options" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" @click="exportTable">导出报表</el-button>
+      </template>
+
+    </normal-table>
+  </app-container>
 </template>
 
 <script>
@@ -168,7 +141,20 @@
       timeRange: [],
       total: 0,
       dialogVisible: false, // 考核规则的显示
-      listLoading: true // 加载动画
+      listLoading: true, // 加载动画
+      tableOption: {
+        head: {
+          show: true, // 是否需要标题栏，
+          text: '数据列表' // 标题名称
+        },
+        options: {
+          needIndex: false // 是否需要序号列
+        },
+        toolsOption: {
+          selectColumns: false, // 是否需要筛选列
+          refresh: false // 是否需要刷新按钮
+        }
+      } // 表格属性
     }
   },
   watch: {
@@ -270,29 +256,5 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  $tableTitleHeight:46px;
-  .app-container {
-    .table-container {
-      margin-bottom: 30px;
-      .table-title {
-        background-color: rgba(243, 243, 243, 1);
-        height: $tableTitleHeight;
-        .title-header {
-          line-height: $tableTitleHeight;
-          color: #606266;
-          font-size: 15px;
-          i {
-            margin-left: 5px;
-            margin-right: 5px;
-          }
-        }
-      }
-      .edit_btns{
-        .edit_btn{
-          float:right;
-          margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
-        }
-      }
-    }
-  }
+
 </style>