Merge pull request '人员审查子表格' (#115) from lukeyan into master

Reviewed-on: #115

src/api/applySupermarket/personBack/index.js

@@ -0,0 +1,18 @@
+// 应用超市 ---> 人员背景审查
+import request from '@/utils/request'
+// 人员背景审查主页查询 
+export function get_personback_data(params) {
+    return request({
+        url: '/safety/store/personnelReview/tbCompanyUserExamination/list',
+        method: 'post',
+        params
+    })
+}
+// 人员背景审查子页查询
+export function get_personback_item_data(params) {
+    return request({
+        url: '/safety/store/personnelReview/tbCompanyUserList/list',
+        method: 'post',
+        params
+    })
+}

src/router/index.js

@@ -3,6 +3,8 @@ import VueRouter from 'vue-router'
 import box from '../components/box'
 // import Home from '../views/Home.vue'
 Vue.use(VueRouter)
+import systemManagement from './routes/systemManagement'
+
 const routes = [
   {
     path: '/',
@@ -57,56 +59,8 @@ const routes = [
             component: () => import('@/views/factorResources'),
 
           },
-
           // 系统管理
-          {
+          ...systemManagement,
-            path: 'systemManagement',
-            name: 'systemManagement',
-            component: () => import('@/views/systemManagement'),
-            children: [
-              // 平安指数
-              {
-                path: 'safeIndex',
-                name: 'safeIndex',
-                component: () => import('@/views/systemManagement/safeIndex'),
-              },
-              // 企业赋分
-              {
-                path: 'companyScore',
-                name: 'companyScore',
-                component: () => import('@/views/systemManagement/companyScore'),
-              },
-              // 企业赋分详情
-              {
-                path: 'companyDetails',
-                name: 'companyDetails',
-                component: () => import('@/views/systemManagement/companyScore/components/companyDetails'),
-              },
-              // 企业名单
-              // {
-              //   path: 'companyList',
-              //   name: 'companyList',
-              //   component: () => import('@/views/systemManagement/companyList'),
-              // },
-              // 关联设备
-              {
-                path: 'correlationEquipment',
-                name: 'correlationEquipment',
-                component: () => import('@/views/systemManagement/correlationEquipment'),
-              },
-              {
-                path: 'correlationEquipment2',
-                name: 'correlationEquipment2',
-                component: () => import('@/views/systemManagement/correlationEquipment2'),
-              },
-              // 企业名单
-              {
-                path: 'companyList',
-                name: 'companyList',
-                component: () => import('@/views/systemManagement/companyList'),
-              }
-            ]
-          },
           // 闭环处置
           {
             path: 'closeLoopDispose',
@@ -117,7 +71,7 @@ const routes = [
           {
             path:'applySupermarket',
             name:'applySupermarket',
-            component: () => import('@/views/applySupermarket')
+            component: () => import('@/views/applySupermarket'),
           },
         ]
       },

src/router/routes/systemManagement.js

@@ -0,0 +1,49 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+// import Home from '../views/Home.vue'
+Vue.use(VueRouter)
+// 系统管理
+export default [
+    {
+        path: 'systemManagement',
+        name: 'systemManagement',
+        component: () => import('@/views/systemManagement'),
+        children: [
+          // 平安指数
+          {
+            path: 'safeIndex',
+            name: 'safeIndex',
+            component: () => import('@/views/systemManagement/safeIndex'),
+          },
+          // 企业赋分
+          {
+            path: 'companyScore',
+            name: 'companyScore',
+            component: () => import('@/views/systemManagement/companyScore'),
+          },
+          // 企业赋分详情
+          {
+            path: 'companyDetails',
+            name: 'companyDetails',
+            component: () => import('@/views/systemManagement/companyScore/components/companyDetails'),
+          },
+          // 关联设备
+          {
+            path: 'correlationEquipment',
+            name: 'correlationEquipment',
+            component: () => import('@/views/systemManagement/correlationEquipment'),
+          },
+          {
+            path: 'correlationEquipment2',
+            name: 'correlationEquipment2',
+            component: () => import('@/views/systemManagement/correlationEquipment2'),
+          },
+          // 企业名单
+          {
+            path: 'companyList',
+            name: 'companyList',
+            component: () => import('@/views/systemManagement/companyList'),
+          }
+        ]
+      }
+]

src/views/applySupermarket/personBack/components/abnormalTable.vue

@@ -0,0 +1,178 @@
+<!-- 异常表格数据 -->
+<template>
+  <div>
+    <el-table
+      :data="table_data"
+      height="280"
+      :header-cell-style="table_header"
+      :cell-style="{ background: 'revert', 'text-align': 'center' }"
+    >
+      <el-table-column type="index" label="序号" width="80"> </el-table-column>
+      <el-table-column prop="processName" label="照片" width="110">
+        <template slot-scope="scope">
+          <el-button
+            size="small"
+            class="operation"
+            @click="check_details(scope.row)"
+            >详情
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" label="姓名" width="140">
+      </el-table-column>
+      <el-table-column prop="processType" label="身份证号" width="260">
+      </el-table-column>
+      <el-table-column prop="taskName" label="审查时间" width="260">
+      </el-table-column>
+      <el-table-column prop="operation" label="审查结果"> </el-table-column>
+    </el-table>
+    <!-- 分页公共样式 -->
+    <div class="pagination_body">
+      <el-pagination
+        background
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :page-sizes="[4]"
+        :page-size="pageSize"
+        :current-page="pageNum"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "NormalTable",
+  data() {
+    return {
+      table_data: [],
+      pageSize: 4,
+      pageNum: 1,
+      total: 0,
+    };
+  },
+  methods: {
+    // 表头样式
+    table_header({ row, rowIndex }) {
+      console.log(row);
+      console.log(rowIndex);
+      return {
+        "text-align": "center", // 表头文字居中
+        color: "#fff",
+        border: "0.1px solid #3b4f5c",
+      };
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+      this.pageNum = 1;
+      this.pageSize = val;
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+      this.pageNum = val;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/.el-table {
+  //   width: 96vw;
+  height: 57vh;
+  background: rgba(0, 0, 0, 0);
+  border: 0.1px solid #3f5564;
+  thead {
+    color: #fff;
+    font-weight: 500;
+    border: 0.1px solid #3f5564;
+    background: linear-gradient(
+      to right,
+      #284f49,
+      #2f6363 5%,
+      #233b38 80%
+    ) !important;
+    & th {
+      background-color: transparent;
+    }
+    & tr {
+      background-color: transparent;
+    }
+  }
+  tr {
+    color: #fff;
+    background: rgba(0, 0, 0, 0);
+  }
+}
+/deep/.el-table__body-wrapper::-webkit-scrollbar {
+  display: none;
+  width: 6px;
+  background-color: #5e666a;
+  border-radius: 4px;
+}
+/deep/.el-table__body-wrapper::-webkit-scrollbar-thumb {
+  display: none;
+  width: 5px;
+  background-color: #3c4b4a;
+  border-radius: 4px;
+}
+/deep/ .el-table td.el-table__cell,
+.el-table th.el-table__cell.is-leaf {
+  border: 0.1px solid #3f5564;
+}
+.pagination_body {
+  width: 44vw;
+  height: 4vh;
+  display: flex;
+  flex-direction: row-reverse;
+  // border: 0.1px solid #2f6363;
+  // background: #3c4b4a;
+  /deep/.el-pagination {
+    margin-top: 1vh;
+    .el-pagination__total {
+      color: #fff;
+    }
+    /* 显示多少条/页和在哪页的input样式 */
+    .el-input__inner {
+      border-radius: 4px;
+      border: 2px solid #28847e;
+      background: #3c4b4a;
+      color: #fff;
+    }
+    .btn-prev {
+      border-radius: 0px;
+      border: 0.1px solid #28847e;
+      background: #3c4b4a;
+      color: #fff;
+    }
+    ul {
+      li {
+        border: 0.1px solid #28847e;
+        background: #3c4b4a;
+        color: #fff;
+      }
+    }
+    .btn-next {
+      border: 0.1px solid #28847e;
+      border-radius: 0px;
+      background: #3c4b4a;
+      color: #fff;
+    }
+    .el-pager {
+      li {
+        border: 0.1px solid #28847e;
+        background: #3c4b4a !important;
+      }
+    }
+    .el-pagination__jump {
+      color: #fff;
+    }
+  }
+  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
+    border: 0.1px solid #76eae4;
+  }
+  /deep/.el-pagination.is-background .el-pager li:not(.disabled):hover {
+    color: #fff;
+  }
+}
+</style>

src/views/applySupermarket/personBack/components/normalTable.vue

@@ -0,0 +1,179 @@
+<!-- 正常表格数据 -->
+<template>
+  <div>
+    <el-table
+      :data="table_data"
+      height="280"
+      :header-cell-style="table_header"
+      :cell-style="{ background: 'revert', 'text-align': 'center' }"
+    >
+      <el-table-column type="index" label="序号" width="80"> </el-table-column>
+      <el-table-column prop="processName" label="照片" width="110">
+        <template slot-scope="scope">
+          <el-button
+            size="small"
+            class="operation"
+            @click="check_details(scope.row)"
+            >详情
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" label="姓名" width="140">
+      </el-table-column>
+      <el-table-column prop="processType" label="身份证号" width="260">
+      </el-table-column>
+      <el-table-column prop="taskName" label="审查时间" width="260">
+      </el-table-column>
+      <el-table-column prop="operation" label="审查结果">
+      </el-table-column>
+    </el-table>
+    <!-- 分页公共样式 -->
+    <div class="pagination_body">
+      <el-pagination
+        background
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :page-sizes="[4]"
+        :page-size="pageSize"
+        :current-page="pageNum"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "NormalTable",
+  data() {
+    return {
+      table_data: [],
+      pageSize: 4,
+      pageNum: 1,
+      total: 0,
+    };
+  },
+  methods: {
+    // 表头样式
+    table_header({ row, rowIndex }) {
+      console.log(row);
+      console.log(rowIndex);
+      return {
+        "text-align": "center", // 表头文字居中
+        color: "#fff",
+        border: "0.1px solid #3b4f5c",
+      };
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+      this.pageNum = 1;
+      this.pageSize = val;
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+      this.pageNum = val;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/.el-table {
+  //   width: 96vw;
+  height: 57vh;
+  background: rgba(0, 0, 0, 0);
+  border: 0.1px solid #3f5564;
+  thead {
+    color: #fff;
+    font-weight: 500;
+    border: 0.1px solid #3f5564;
+    background: linear-gradient(
+      to right,
+      #284f49,
+      #2f6363 5%,
+      #233b38 80%
+    ) !important;
+    & th {
+      background-color: transparent;
+    }
+    & tr {
+      background-color: transparent;
+    }
+  }
+  tr {
+    color: #fff;
+    background: rgba(0, 0, 0, 0);
+  }
+}
+/deep/.el-table__body-wrapper::-webkit-scrollbar {
+  display: none;
+  width: 6px;
+  background-color: #5e666a;
+  border-radius: 4px;
+}
+/deep/.el-table__body-wrapper::-webkit-scrollbar-thumb {
+  display: none;
+  width: 5px;
+  background-color: #3c4b4a;
+  border-radius: 4px;
+}
+/deep/ .el-table td.el-table__cell,
+.el-table th.el-table__cell.is-leaf {
+  border: 0.1px solid #3f5564;
+}
+.pagination_body {
+  width: 44vw;
+  height: 4vh;
+  display: flex;
+  flex-direction: row-reverse;
+  // border: 0.1px solid #2f6363;
+  // background: #3c4b4a;
+  /deep/.el-pagination {
+    margin-top: 1vh;
+    .el-pagination__total {
+      color: #fff;
+    }
+    /* 显示多少条/页和在哪页的input样式 */
+    .el-input__inner {
+      border-radius: 4px;
+      border: 2px solid #28847e;
+      background: #3c4b4a;
+      color: #fff;
+    }
+    .btn-prev {
+      border-radius: 0px;
+      border: 0.1px solid #28847e;
+      background: #3c4b4a;
+      color: #fff;
+    }
+    ul {
+      li {
+        border: 0.1px solid #28847e;
+        background: #3c4b4a;
+        color: #fff;
+      }
+    }
+    .btn-next {
+      border: 0.1px solid #28847e;
+      border-radius: 0px;
+      background: #3c4b4a;
+      color: #fff;
+    }
+    .el-pager {
+      li {
+        border: 0.1px solid #28847e;
+        background: #3c4b4a !important;
+      }
+    }
+    .el-pagination__jump {
+      color: #fff;
+    }
+  }
+  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
+    border: 0.1px solid #76eae4;
+  }
+  /deep/.el-pagination.is-background .el-pager li:not(.disabled):hover {
+    color: #fff;
+  }
+}
+</style>

src/views/applySupermarket/personBack/components/personBackDialog.vue

@@ -21,9 +21,9 @@
             <div class="item_text_cell">审查人数:</div>
           </div>
           <div class="item_text_left_value">
-            <div class="item_value_cell">{{ this.form_data.company_name }}</div>
+            <div class="item_value_cell">{{ this.form_data.companyName }}</div>
-            <div class="item_value_cell">{{ this.form_data.reason }}</div>
+            <div class="item_value_cell">{{ this.form_data.examinationReason }}</div>
-            <div class="item_value_cell">{{ this.form_data.people }}</div>
+            <div class="item_value_cell">{{ this.form_data.examinationUserNum }}</div>
           </div>
         </div>
         <div class="item_text_right">
@@ -32,8 +32,8 @@
             <div class="item_text_cell">审核结果:</div>
           </div>
           <div class="item_text_right_value">
-            <div class="item_value_cell">{{ this.form_data.time }}</div>
+            <div class="item_value_cell">{{ this.form_data.applyTime }}</div>
-            <div class="item_value_cell">{{ this.form_data.end }}</div>
+            <div class="item_value_cell">{{ this.form_data.examinationResultDetail }}</div>
           </div>
         </div>
       </div>
@@ -46,27 +46,55 @@
       </div>
       <div class="item_table_title">审核人员名单</div>
       <!-- 正常异常切换 -->
-      <el-tabs v-model="active" type="card" @tab-click="handle_click" class="item_tabs">
+      <el-tabs v-model="active" @tab-click="handle_click" class="item_tabs">
-        <el-tab-pane label="正常" name="first"></el-tab-pane>
+        <el-tab-pane :label="normal_label" name="first">
-        <el-tab-pane label="异常" name="second"></el-tab-pane>
+            <NormalTable ref="normalTable"></NormalTable>
+        </el-tab-pane>
+        <el-tab-pane :label="abnormal_label" name="second">
+            <AbnormalTable ref="abnormalTable"></AbnormalTable>
+        </el-tab-pane>
       </el-tabs>
     </div>
   </el-dialog>
 </template>
 <script>
+import NormalTable from './normalTable'
+import AbnormalTable from './abnormalTable'
+import { get_personback_item_data } from "@/api/applySupermarket/personBack";
 export default {
   name: "PersonBackDialog",
+  components:{
+    NormalTable,
+    AbnormalTable
+  },
   data() {
     return {
       visible: false,
       form_data: {}, // 弹窗表单数据
-      active:'first',
+      active: "first",
+      normal_label:'', // 正常tab的标题
+      abnormal_label:'', // 异常tab的标题
     };
   },
   methods: {
     open(item) {
       this.visible = true;
       this.form_data = item;
+      console.log('this.form_data',this.form_data);
+      // 初次加载正常人员数据 1 正常 2 异常
+      let param = {
+        applyCode:this.form_data.applyCode,
+        // id: this.form_data.id,
+        companyId:this.form_data.companyId,
+        companyName:this.form_data.companyName,
+        examinationResultStatus:'1',
+        pageSize:4,
+        pageNum:1,
+      }
+      // 查询子表格数据
+      get_personback_item_data(param).then(res=> {
+        console.log('res_id',res);
+      })
     },
     // 点击切换
     handle_click() {},
@@ -186,7 +214,7 @@ export default {
     .item_table {
       margin-top: 10px;
       width: 970px;
-      height: 450px;
+      height: 470px;
       background: url("~@/assets/companyFile/background2.png") no-repeat !important;
       background-size: 100% 100% !important;
       .icon_line {
@@ -203,13 +231,72 @@ export default {
       .item_table_title {
         width: 970px;
         height: 30px;
-        border: 0.1px solid #28847e;
+        // border: 0.1px solid #28847e;
         padding-left: 15px;
         color: #fff;
         font-size: 17px;
         text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
       }
+      .item_tabs {
+        margin-top: 1vh;
+        margin-left: 15px;
+        padding-right: 15px;
+      }
     }
   }
 }
+// /deep/.el-tabs__item {
+//   color: #fff;
+// }
+// /deep/.el-tabs__item:hover,
+// .el-tabs__item.is-active {
+//     color:#4BFFAD
+// }
+/deep/.el-tabs__active-bar.is-top {
+  display: none;
+  background: #33cccc;
+}
+/deep/.el-tabs__nav-wrap::after {
+  display: none;
+  height: 1px;
+  background: #5b748c;
+}
+/deep/.el-tabs__item.is-top {
+  color: #fff;
+  font-size: 17px;
+  padding-left: 20px !important;
+  padding-right: 20px;
+  //   margin-right: 20px;
+}
+/deep/.el-tabs__item.is-top.is-active {
+  padding-left: 20px;
+  padding-right: 20px;
+  color: #4BFFAD;
+  font-size: 17px;
+//   border-bottom: 4px solid #33cccc;
+  text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+//   background: linear-gradient(
+//     to bottom,
+//     rgba(0, 0, 0, 0),
+//     #3a5856,
+//     #3b746c
+//   ) !important;
+  background: rgba(129,255,204,0.26) !important;
+}
+/deep/.el-tabs__item.is-top:focus,
+.el-tabs__item.is-top:hover {
+  padding-left: 20px;
+  padding-right: 20px;
+  color: #4BFFAD;
+  font-size: 17px;
+//   border-bottom: 4px solid #33cccc;
+  text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+//   background: linear-gradient(
+//     to bottom,
+//     rgba(0, 0, 0, 0),
+//     #3a5856,
+//     #3b746c
+//   ) !important;
+  background: rgba(129,255,204,0.26) !important;
+}
 </style>

src/views/applySupermarket/personBack/index.vue

@@ -18,9 +18,9 @@
       <!-- 详情单元 -->
       <div v-for="item in item_data" :key="item.id" class="item_cell">
         <!-- 异常展示 -->
-        <div v-if="item.is_right === '1'" class="abnormal_cell_body">
+        <div v-if="item.abnormal_num != '0'" class="abnormal_cell_body">
           <!-- 厂家名称 -->
-          <div class="cell_body_title">{{ item.company_name }}</div>
+          <div class="cell_body_title">{{ item.companyName }}</div>
           <div class="cell_body_information">
             <div class="cell_body_information_text">
               <div class="text_cell">审查原因:</div>
@@ -29,10 +29,10 @@
               <div class="text_cell">审查结果:</div>
             </div>
             <div class="cell_body_information_value">
-              <div class="value_cell">{{ item.reason }}</div>
+              <div class="value_cell">{{ item.examinationReason }}</div>
-              <div class="value_cell">{{ item.people }}</div>
+              <div class="value_cell">{{ item.examinationUserNum }}</div>
-              <div class="value_cell">{{ item.time }}</div>
+              <div class="value_cell">{{ item.applyTime }}</div>
-              <div class="value_cell">{{ item.end }}</div>
+              <div class="value_cell">{{ item.examinationResultDetail }}</div>
             </div>
           </div>
           <!-- 详情按钮 -->
@@ -42,7 +42,7 @@
         </div>
         <!-- 正常展示 -->
         <div v-else class="normal_cell_body">
-          <div class="cell_body_title">{{ item.company_name }}</div>
+          <div class="cell_body_title">{{ item.companyName }}</div>
           <div class="cell_body_information">
             <div class="cell_body_information_text">
               <div class="text_cell">审查原因:</div>
@@ -51,10 +51,10 @@
               <div class="text_cell">审查结果:</div>
             </div>
             <div class="cell_body_information_value">
-              <div class="value_cell">{{ item.reason }}</div>
+              <div class="value_cell">{{ item.examinationReason }}</div>
-              <div class="value_cell">{{ item.people }}</div>
+              <div class="value_cell">{{ item.examinationUserNum }}</div>
-              <div class="value_cell">{{ item.time }}</div>
+              <div class="value_cell">{{ item.applyTime }}</div>
-              <div class="value_cell">{{ item.end }}</div>
+              <div class="value_cell">{{ item.examinationResultDetail }}</div>
             </div>
           </div>
           <!-- 详情按钮 -->
@@ -69,7 +69,7 @@
         background
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
-        :page-sizes="[6]"
+        :page-sizes="[8]"
         :page-size="pageSize"
         :current-page="pageNum"
         layout="total, sizes, prev, pager, next, jumper"
@@ -81,78 +81,64 @@
   </div>
 </template>
 <script>
-import PersonBackDialog from './components/personBackDialog'
+import PersonBackDialog from "./components/personBackDialog";
+import { get_personback_data } from "@/api/applySupermarket/personBack";
 export default {
   name: "PersonBack",
-  components:{
+  components: {
-    PersonBackDialog
+    PersonBackDialog,
   },
   data() {
     return {
       search_company: "",
-      item_data: [
+      item_data: [],
-        {
+      pageSize: 8,
-          id: "1",
-          is_right: "1",
-          company_name: "宁波安捷化工有限公司",
-          reason: "新入职员工人员背景审查",
-          people: "16人",
-          time: "2022-12-12 12:12:12",
-          end: "14人正常, 1人异常",
-        },
-        {
-          id: "2",
-          is_right: "2",
-          company_name: "宁波安捷化工有限公司",
-          reason: "新入职员工人员背景审查",
-          people: "16人",
-          time: "2022-12-12 12:12:12",
-          end: "14人正常, 0人异常",
-        },
-        {
-          id: "3",
-          is_right: "2",
-        },
-        {
-          id: "4",
-          is_right: "2",
-        },
-        {
-          id: "5",
-          is_right: "2",
-        },
-        {
-          id: "6",
-          is_right: "2",
-        },
-        {
-          id: "7",
-          is_right: "1",
-        },
-        {
-          id: "8",
-          is_right: "2",
-        },
-      ],
-      pageSize: 10,
       pageNum: 1,
       total: 0,
     };
   },
+  created() {
+    this.search();
+  },
   methods: {
-    search() {},
+    search() {
+      let param = {
+        companyName: this.search_company,
+        pageSize: this.pageSize,
+        pageNum: this.pageNum,
+      };
+      get_personback_data(param).then((res) => {
+        console.log("res_person", res);
+        // 诸如20人正常，0人异常截取到异常的人员数
+        for (let i = 0; i < res.rows.length; i++) {
+          console.log(res.rows[i].examinationResultDetail);
+          res.rows[i].abnormal_num = res.rows[
+            i
+          ].examinationResultDetail.substring(
+            res.rows[i].examinationResultDetail.indexOf("正常，") + 3,
+            res.rows[i].examinationResultDetail.indexOf("人异常")
+          );
+          console.log(res.rows[i].abnormal_num);
+        }
+        console.log('res.rows',res.rows);
+        this.item_data = res.rows;
+        this.total = res.total;
+      });
+    },
     // 点击查看详情
     check_item(item) {
-      this.$refs.personBackDialog.open(item)
+      this.$refs.personBackDialog.open(item);
     },
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
       this.pageNum = 1;
       this.pageSize = val;
+      this.search();
     },
     handleCurrentChange(val) {
       console.log(`当前页: ${val}`);
       this.pageNum = val;
+      this.search();
     },
   },
 };
@@ -322,14 +308,14 @@ export default {
         // border: 0.1px solid #fff;
         position: relative;
         .item_btn {
-          color: #30C4FF;
+          color: #30c4ff;
           position: absolute;
           right: 10px;
           cursor: pointer;
         }
         .item_btn:focus,
         .item_btn:hover {
-          text-shadow: 0 0 9px #30C4FF;
+          text-shadow: 0 0 9px #30c4ff;
         }
       }
     }