From 3b19c213b1ec9599afece3f2de4af56ed65e41ea Mon Sep 17 00:00:00 2001
From: e <2538815847@qq.com>
Date: Wed, 10 Jul 2024 21:06:35 +0800
Subject: [PATCH] update

---
 src/api/applySupermarket/personBack/index.js  |  49 +-
 src/views/applySupermarket/index.less         |   8 +-
 src/views/applySupermarket/index.vue          |  38 ++
 .../applySupermarket/keyPerson/index.vue      | 493 +++++------------
 .../applySupermarket/keyPerson/index_bat.vue  | 399 ++++++++++++++
 .../applySupermarket/legalAdvice/index.vue    |   2 +-
 .../personBack/components/detailDialog.vue    | 138 +++++
 .../applySupermarket/personBack/index.vue     | 495 +++++-------------
 .../applySupermarket/personBack/index_bat.vue | 398 ++++++++++++++
 9 files changed, 1276 insertions(+), 744 deletions(-)
 create mode 100644 src/views/applySupermarket/keyPerson/index_bat.vue
 create mode 100644 src/views/applySupermarket/personBack/components/detailDialog.vue
 create mode 100644 src/views/applySupermarket/personBack/index_bat.vue

diff --git a/src/api/applySupermarket/personBack/index.js b/src/api/applySupermarket/personBack/index.js
index f58d016..6788607 100644
--- a/src/api/applySupermarket/personBack/index.js
+++ b/src/api/applySupermarket/personBack/index.js
@@ -1,37 +1,34 @@
 // 应用超市 ---> 人员背景审查
-import request from '@/utils/request'
-// 人员背景审查主页查询 
+import request from "@/utils/request";
+// 人员背景审查主页查询
 export function get_personback_data(params) {
-    return request({
-        url: '/safety/store/personnelReview/tbCompanyUserExamination/list',
-        method: 'post',
-        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
-    })
+  return request({
+    url: "/safety/store/personnelReview/tbCompanyUserList/list",
+    method: "post",
+    params,
+  });
 }
 // 人员背景审查子页个人详情查询
 export function get_personback_item_data_person(params) {
-    return request({
-        url: '/safety/store/personnelReview/tbCompanyUserCase/list',
-        method: 'post',
-        params
-    })
+  return request({
+    url: "/safety/store/personnelReview/tbCompanyUserCase/list",
+    method: "post",
+    params,
+  });
 }
 
-// 人员背景审查子页个人详情查询
-export function getList(params) {
-    return request({
-        url: '/prepare/verification/list',
-        method: 'get',
-        params
-    })
+// 人员背景审查子页个人详情
+export function getList(id) {
+  return request({
+    url: "/prepare/verification/" + id,
+    method: "get",
+  });
 }
-
-
diff --git a/src/views/applySupermarket/index.less b/src/views/applySupermarket/index.less
index 2dd8682..8a87b3f 100644
--- a/src/views/applySupermarket/index.less
+++ b/src/views/applySupermarket/index.less
@@ -92,7 +92,7 @@
   }
 
   /deep/.el-dialog {
-    margin: 15vh auto 10vh !important;
+    margin: 10vh auto 10vh !important;
     .el-dialog__title {
       color: #fff;
       text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
@@ -101,7 +101,7 @@
     background-image: url("~@/assets/companyFile/dialogBack.png");
     background-size: 100% 100%;
     background-repeat: no-repeat;
-    height: 60vh;
+    height: 80vh;
 
     /* 关闭弹窗叉号 */
     .el-dialog__headerbtn {
@@ -111,8 +111,8 @@
       }
     }
     .el-dialog__body {
-      padding: 30px 20px 0;
-      height: calc(100% - 120px);
+      padding: 16px 20px 0;
+      height: calc(100% - 70px);
     }
 
     .el-button {
diff --git a/src/views/applySupermarket/index.vue b/src/views/applySupermarket/index.vue
index 8b7ba4b..7a3b2d4 100644
--- a/src/views/applySupermarket/index.vue
+++ b/src/views/applySupermarket/index.vue
@@ -761,3 +761,41 @@ export default {
   animation: turn 10s linear infinite;
 }
 </style>
+<style lang="less">
+.ahsqDialogPanel {
+  height: 100%;
+  color: #ffffff;
+  .msgDetailLine {
+    display: flex;
+    .msgDetailItem {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      .msgDetailLabel {
+        width: 150px;
+      }
+      .msgDetailValue {
+        flex: 1;
+      }
+      .msgDetailLabel {
+        width: 70px;
+      }
+    }
+  }
+
+  .msgDetailTop {
+    margin-bottom: 12px;
+  }
+
+  .tableWrap {
+    height: calc(100% - 50px);
+
+    .el-table--striped
+      .el-table__body
+      tr.el-table__row--striped
+      td.el-table__cell {
+      background-color: transparent;
+    }
+  }
+}
+</style>
diff --git a/src/views/applySupermarket/keyPerson/index.vue b/src/views/applySupermarket/keyPerson/index.vue
index 8e22245..de086be 100644
--- a/src/views/applySupermarket/keyPerson/index.vue
+++ b/src/views/applySupermarket/keyPerson/index.vue
@@ -1,399 +1,178 @@
-<!-- 重点岗位审核 -->
 <template>
-  <div>
-    <!-- 详情查询 -->
-    <div class="item_search">
-      <div class="isearch">
-        <el-input
-          class="search_input"
-          placeholder="输入企业名称"
-          v-model="search_company"
-          clearable
-        >
-        </el-input>
-        <el-button @click="search" icon="el-icon-search"></el-button>
+  <div class="enterpriseService">
+    <div class="flexSpaceBetween">
+      <div class="tableOperator"></div>
+      <div class="searchWrap">
+        <el-form :inline="true" :model="queryParam" class="demo-form-inline">
+          <el-form-item label="企业名称">
+            <el-input v-model="queryParam.name" placeholder="请输入"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="searchQuery">查询</el-button>
+            <el-button type="primary" plain @click="searchReset"
+              >重置</el-button
+            >
+          </el-form-item>
+        </el-form>
       </div>
     </div>
-    <div class="item_body">
-      <!-- 详情单元 -->
-      <div v-for="item in item_data" :key="item.id" class="item_cell">
-        <!-- 异常展示 -->
-        <div v-if="item.abnormal_num != '0'" class="abnormal_cell_body">
-          <!-- 厂家名称 -->
-          <div class="cell_body_title">{{ item.companyName }}</div>
-          <div class="cell_body_information">
-            <div class="cell_body_information_text">
-              <div class="text_cell">审查原因:</div>
-              <div class="text_cell">重点人数:</div>
-              <div class="text_cell">申请时间:</div>
-              <div class="text_cell">审查结果:</div>
+    <div class="enterServiceWrap">
+      <div class="enterServicePanel">
+        <el-row :gutter="20">
+          <el-col :span="6" v-for="item in dataSource" :key="item.id">
+            <div class="enterWrap">
+              <div class="enterTop">
+                {{ item.companyName }}
+              </div>
+              <div class="enterBtm">
+                <div class="item">
+                  <div class="label">咨询内容：</div>
+                  <div class="value">{{ item.name }}</div>
+                </div>
+                <div class="item">
+                  <div class="label">回复内容：</div>
+                  <div class="value">{{ item.card }}</div>
+                </div>
+                <div class="item">
+                  <div class="label">状态：</div>
+                  <div class="value">{{ item.phone }}</div>
+                </div>
+              </div>
+              <div class="opt">
+                <div class="" @click="checkDetail(item)">详情</div>
+              </div>
             </div>
-            <div class="cell_body_information_value">
-              <div class="value_cell">{{ item.examinationReason }}</div>
-              <div class="value_cell">{{ item.examinationUserNum }}</div>
-              <div class="value_cell">{{ item.applyTime }}</div>
-              <div class="value_cell">{{ item.examinationResultDetail }}</div>
-            </div>
-          </div>
-          <!-- 详情按钮 -->
-          <div class="cell_body_information_btn">
-            <div class="item_btn" @click="check_item(item)">详情</div>
-          </div>
-        </div>
-        <!-- 正常展示 -->
-        <div v-else class="normal_cell_body">
-          <div class="cell_body_title">{{ item.companyName }}</div>
-          <div class="cell_body_information">
-            <div class="cell_body_information_text">
-              <div class="text_cell">审查原因:</div>
-              <div class="text_cell">上报人数:</div>
-              <div class="text_cell">申请时间:</div>
-              <div class="text_cell">审查结果:</div>
-            </div>
-            <div class="cell_body_information_value">
-              <div class="value_cell">{{ item.examinationReason }}</div>
-              <div class="value_cell">{{ item.examinationUserNum }}</div>
-              <div class="value_cell">{{ item.applyTime }}</div>
-              <div class="value_cell">{{ item.examinationResultDetail }}</div>
-            </div>
-          </div>
-          <!-- 详情按钮 -->
-          <div class="cell_body_information_btn">
-            <div class="item_btn" @click="check_item(item)">详情</div>
-          </div>
-        </div>
+          </el-col>
+        </el-row>
       </div>
-    </div>
-    <div class="item_pagination">
-      <el-pagination
-        background
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :page-sizes="[8]"
-        :page-size="pageSize"
-        :current-page="pageNum"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="total"
+      <gMainTable
+        ref="gMainTable"
+        :tableData="dataSource"
+        :columns="columns"
+        rowKey="id"
+        :pagination="ipagination"
+        @pageSizeChange="handlePageSizeChange"
+        @currentPageChange="handleCurrentPageChange"
       >
-      </el-pagination>
+      </gMainTable>
     </div>
-    <PersonBackDialog ref="personBackDialog"></PersonBackDialog>
+    <FormDialog ref="formDialog" :formItems="formItems" width="800px">
+    </FormDialog>
   </div>
 </template>
 <script>
-import { getList } from "@/api/applySupermarket/personBack";
-import PersonBackDialog from "../personBack/components/personBackDialog.vue";
-
+import { tableListMixins } from "@/loveflow/mixins/tableListMixins";
 export default {
-  name: "KeyPerson",
-  components: {
-    PersonBackDialog,
-  },
+  mixins: [tableListMixins],
   data() {
     return {
-      search_company: "",
-      item_data: [],
-      pageSize: 8,
-      pageNum: 1,
-      total: 0,
+      ipagination: {
+        pageSize: 12,
+        pageSizes: ["12", "24", "36"],
+      },
+      columns: [
+        {
+          prop: "name",
+          label: "企业名称",
+        },
+      ],
+      formItems: [
+        {
+          type: "textarea",
+          itemAttrs: {
+            label: "回复意见",
+            span: 22,
+          },
+          attrs: {
+            model: "name",
+            value: "",
+            placeholder: "",
+            rows: 5,
+          },
+        },
+      ],
+      disableMixinCreated: true,
+      url: {
+        list: "prepare/verification/list",
+        type: "get",
+      },
     };
   },
   created() {
-    this.search();
+    this.queryParam.verificationType = 2;
+    this.searchQuery();
   },
   methods: {
-    search() {
-      let param = {
-        companyName: this.search_company,
-        pageSize: this.pageSize,
-        pageNum: this.pageNum,
-        verificationType: 2,
-      };
-      getList(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);
-    },
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
-      this.pageNum = 1;
-      this.pageSize = val;
-      this.search();
-    },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
-      this.pageNum = val;
-      this.search();
+    checkDetail(obj) {
+      this.$refs.formDialog.openDialog("detail", obj);
     },
   },
 };
 </script>
 <style lang="less" scoped>
-.item_search {
-  width: 94vw;
-  height: 5vh;
-  .isearch {
-    display: flex;
-    width: 19vw;
-    margin-left: 1.5vw;
-    .el-button {
-      display: flex;
-      align-items: center;
-      font-size: 17px;
-      height: 4vh;
-      border-radius: 0px 4px 4px 0px;
-      color: #fff;
-      background: rgba(0, 0, 0, 0);
-      border: 0.1px solid #28847e;
-      position: relative;
-      overflow: hidden;
-      &:before {
-        content: "";
-        position: absolute;
-        top: -100%;
-        left: -50%;
-        width: 150%;
-        height: 2px;
-        background-color: #fff;
-        box-shadow: 0 0 4px 1px #fff;
-        transform: rotateZ(-45deg);
-      }
-      &:hover::before {
-        transition: 0.7s;
-        top: 200%;
-        left: 50%;
-      }
-    }
-    .el-button:hover {
-      background: #4d8f89;
-    }
-    // /deep/.search_input.el-input {
-    //   .el-input__inner {
-    //     color: #fff;
-    //     border: 0.1px solid #28847e;
-    //     border-radius: 0px;
-    //     background: rgba(0, 0, 0, 0);
-    //     width: 16.1vw;
-    //     height: 4vh;
-    //   }
-    // }
-    /deep/.search_input.el-input.el-input--suffix {
-      height: 4vh;
-      width: 16vw;
-    }
-    /deep/.search_input.el-input {
-      .el-input__inner {
-        color: #fff;
-        height: 4vh;
-        border: 0.1px solid #28847e;
-        border-radius: 4px 0px 0px 4px;
-        background: rgba(0, 0, 0, 0);
-      }
-    }
+@import url("../index.less");
+.enterpriseService {
+  height: 100%;
+  overflow: hidden;
+  /deep/.el-table {
+    display: none;
   }
 }
-.item_body {
-  width: 94vw;
-  height: 60vh;
-  color: #fff;
-  display: flex;
-  flex-wrap: wrap;
-  .item_cell {
-    width: 22.2vw;
-    height: 28vh;
-    margin-left: 1vw;
-    // border: 0.1px solid #3f5564;
-    .abnormal_cell_body {
-      width: 22.2vw;
-      height: 28vh;
-      background: url("~@/assets/companyFile/abnormalback.png") no-repeat !important;
-      background-size: 100% 100% !important;
-      .cell_body_title {
-        width: 22.2vw;
-        height: 4vh;
-        // border: 0.1px solid #fff;
-        color: #fff;
-        padding-left: 20px;
-        line-height: 4vh;
-        font-size: 20px;
-        font-weight: 600;
-      }
-      .cell_body_information {
-        margin-top: 1vh;
-        width: 22.2vw;
-        height: 20vh;
-        // border: 0.1px solid #fff;
-        display: flex;
-        .cell_body_information_text {
-          width: 5vw;
-          height: 20vh;
-          // border: 0.1px solid #fff;
-          .text_cell {
-            width: 5vw;
-            height: 5vh;
-            // border: 0.1px solid #fff;
-            line-height: 5vh;
-            color: #d0deee;
-            font-size: 16px;
-            text-align: center;
-          }
-        }
-        .cell_body_information_value {
-          width: 17vw;
-          height: 20vh;
-          // border: 0.1px solid #fff;
-          .value_cell {
-            width: 17vw;
-            height: 5vh;
-            // border: 0.1px solid #fff;
-            line-height: 5vh;
-            color: #fff;
-            font-size: 16px;
-            text-align: left;
-          }
-        }
-      }
-      .cell_body_information_btn {
-        width: 22.2vw;
-        height: 3vh;
-        // border: 0.1px solid #fff;
-        position: relative;
-        .item_btn {
-          color: #ff6565;
-          position: absolute;
-          right: 10px;
-          cursor: pointer;
-        }
-        .item_btn:focus,
-        .item_btn:hover {
-          text-shadow: 0 0 9px #ff8b4e;
-        }
-      }
+.enterServiceWrap {
+  height: calc(100% - 60px);
+
+  .enterServicePanel {
+    height: calc(100% - 54px);
+    overflow-y: scroll;
+    &::-webkit-scrollbar {
+      display: none;
     }
-    .normal_cell_body {
-      width: 22.2vw;
-      height: 28vh;
+    .enterWrap {
+      display: flex;
+      flex-direction: column;
+      height: 230px;
+      padding: 4px 20px;
+      margin-bottom: 16px;
       background: url("~@/assets/companyFile/normalback.png") no-repeat !important;
       background-size: 100% 100% !important;
-      .cell_body_title {
-        width: 22.2vw;
-        height: 4vh;
-        // border: 0.1px solid #fff;
-        color: #fff;
-        padding-left: 20px;
-        line-height: 4vh;
+      .enterTop {
+        height: 50px;
         font-size: 20px;
-        font-weight: 600;
+        color: #ffffff;
+        font-weight: bold;
       }
-      .cell_body_information {
-        margin-top: 1vh;
-        width: 22.2vw;
-        height: 20vh;
-        // border: 0.1px solid #fff;
-        display: flex;
-        .cell_body_information_text {
-          width: 5vw;
-          height: 20vh;
-          // border: 0.1px solid #fff;
-          .text_cell {
-            width: 5vw;
-            height: 5vh;
-            // border: 0.1px solid #fff;
-            line-height: 5vh;
+      .enterBtm {
+        flex: 1;
+        .item {
+          display: flex;
+          margin-bottom: 12px;
+          .label {
+            width: 80px;
+            text-align: right;
             color: #d0deee;
-            font-size: 16px;
-            text-align: center;
           }
-        }
-        .cell_body_information_value {
-          width: 17vw;
-          height: 20vh;
-          // border: 0.1px solid #fff;
-          .value_cell {
-            width: 17vw;
-            height: 5vh;
-            // border: 0.1px solid #fff;
-            line-height: 5vh;
-            color: #fff;
-            font-size: 16px;
-            text-align: left;
+          .value {
+            width: 11vw;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: #ffffff;
           }
         }
       }
-      .cell_body_information_btn {
-        width: 22.2vw;
-        height: 3vh;
-        // border: 0.1px solid #fff;
-        position: relative;
-        .item_btn {
-          color: #30c4ff;
-          position: absolute;
-          right: 10px;
+      .opt {
+        height: 32px;
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+        color: #30c4ff;
+        &:hover {
+          color: #409eff;
           cursor: pointer;
         }
-        .item_btn:focus,
-        .item_btn:hover {
-          text-shadow: 0 0 9px #30c4ff;
-        }
       }
     }
   }
 }
-.item_pagination {
-  width: 94vw;
-  height: 6vh;
-  display: flex;
-  flex-direction: row-reverse;
-  /deep/.el-pagination.is-background .btn-next,
-  /deep/.el-pagination.is-background .btn-prev,
-  /deep/.el-pagination.is-background .el-pager li {
-    margin: 0 5px;
-    background-color: rgba(255, 255, 255, 0);
-    color: #eaeff7;
-    min-width: 30px;
-    border-radius: 2px;
-    border: 1px solid rgba(40, 132, 126, 1);
-  }
-  /deep/.el-pagination__total {
-    color: #fff;
-  }
-  /deep/.el-input__inner {
-    background-color: rgba(255, 255, 255, 0);
-    border: 1px solid rgba(40, 132, 126, 1);
-    color: #eaeff7;
-  }
-  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
-    background-color: rgba(64, 158, 255, 0);
-    color: #ccc;
-    border: 1px solid #76eae4;
-  }
-  /deep/.btn-prev {
-    margin: 0 5px;
-    background-color: rgba(255, 255, 255, 0);
-    color: #eaeff7;
-    min-width: 30px;
-    border-radius: 2px;
-    border: 1px solid rgba(40, 132, 126, 1);
-  }
-  /deep/.el-pagination__jump {
-    color: #fff;
-  }
-}
 </style>
+
diff --git a/src/views/applySupermarket/keyPerson/index_bat.vue b/src/views/applySupermarket/keyPerson/index_bat.vue
new file mode 100644
index 0000000..8e22245
--- /dev/null
+++ b/src/views/applySupermarket/keyPerson/index_bat.vue
@@ -0,0 +1,399 @@
+<!-- 重点岗位审核 -->
+<template>
+  <div>
+    <!-- 详情查询 -->
+    <div class="item_search">
+      <div class="isearch">
+        <el-input
+          class="search_input"
+          placeholder="输入企业名称"
+          v-model="search_company"
+          clearable
+        >
+        </el-input>
+        <el-button @click="search" icon="el-icon-search"></el-button>
+      </div>
+    </div>
+    <div class="item_body">
+      <!-- 详情单元 -->
+      <div v-for="item in item_data" :key="item.id" class="item_cell">
+        <!-- 异常展示 -->
+        <div v-if="item.abnormal_num != '0'" class="abnormal_cell_body">
+          <!-- 厂家名称 -->
+          <div class="cell_body_title">{{ item.companyName }}</div>
+          <div class="cell_body_information">
+            <div class="cell_body_information_text">
+              <div class="text_cell">审查原因:</div>
+              <div class="text_cell">重点人数:</div>
+              <div class="text_cell">申请时间:</div>
+              <div class="text_cell">审查结果:</div>
+            </div>
+            <div class="cell_body_information_value">
+              <div class="value_cell">{{ item.examinationReason }}</div>
+              <div class="value_cell">{{ item.examinationUserNum }}</div>
+              <div class="value_cell">{{ item.applyTime }}</div>
+              <div class="value_cell">{{ item.examinationResultDetail }}</div>
+            </div>
+          </div>
+          <!-- 详情按钮 -->
+          <div class="cell_body_information_btn">
+            <div class="item_btn" @click="check_item(item)">详情</div>
+          </div>
+        </div>
+        <!-- 正常展示 -->
+        <div v-else class="normal_cell_body">
+          <div class="cell_body_title">{{ item.companyName }}</div>
+          <div class="cell_body_information">
+            <div class="cell_body_information_text">
+              <div class="text_cell">审查原因:</div>
+              <div class="text_cell">上报人数:</div>
+              <div class="text_cell">申请时间:</div>
+              <div class="text_cell">审查结果:</div>
+            </div>
+            <div class="cell_body_information_value">
+              <div class="value_cell">{{ item.examinationReason }}</div>
+              <div class="value_cell">{{ item.examinationUserNum }}</div>
+              <div class="value_cell">{{ item.applyTime }}</div>
+              <div class="value_cell">{{ item.examinationResultDetail }}</div>
+            </div>
+          </div>
+          <!-- 详情按钮 -->
+          <div class="cell_body_information_btn">
+            <div class="item_btn" @click="check_item(item)">详情</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="item_pagination">
+      <el-pagination
+        background
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :page-sizes="[8]"
+        :page-size="pageSize"
+        :current-page="pageNum"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+    <PersonBackDialog ref="personBackDialog"></PersonBackDialog>
+  </div>
+</template>
+<script>
+import { getList } from "@/api/applySupermarket/personBack";
+import PersonBackDialog from "../personBack/components/personBackDialog.vue";
+
+export default {
+  name: "KeyPerson",
+  components: {
+    PersonBackDialog,
+  },
+  data() {
+    return {
+      search_company: "",
+      item_data: [],
+      pageSize: 8,
+      pageNum: 1,
+      total: 0,
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    search() {
+      let param = {
+        companyName: this.search_company,
+        pageSize: this.pageSize,
+        pageNum: this.pageNum,
+        verificationType: 2,
+      };
+      getList(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);
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+      this.pageNum = 1;
+      this.pageSize = val;
+      this.search();
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+      this.pageNum = val;
+      this.search();
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.item_search {
+  width: 94vw;
+  height: 5vh;
+  .isearch {
+    display: flex;
+    width: 19vw;
+    margin-left: 1.5vw;
+    .el-button {
+      display: flex;
+      align-items: center;
+      font-size: 17px;
+      height: 4vh;
+      border-radius: 0px 4px 4px 0px;
+      color: #fff;
+      background: rgba(0, 0, 0, 0);
+      border: 0.1px solid #28847e;
+      position: relative;
+      overflow: hidden;
+      &:before {
+        content: "";
+        position: absolute;
+        top: -100%;
+        left: -50%;
+        width: 150%;
+        height: 2px;
+        background-color: #fff;
+        box-shadow: 0 0 4px 1px #fff;
+        transform: rotateZ(-45deg);
+      }
+      &:hover::before {
+        transition: 0.7s;
+        top: 200%;
+        left: 50%;
+      }
+    }
+    .el-button:hover {
+      background: #4d8f89;
+    }
+    // /deep/.search_input.el-input {
+    //   .el-input__inner {
+    //     color: #fff;
+    //     border: 0.1px solid #28847e;
+    //     border-radius: 0px;
+    //     background: rgba(0, 0, 0, 0);
+    //     width: 16.1vw;
+    //     height: 4vh;
+    //   }
+    // }
+    /deep/.search_input.el-input.el-input--suffix {
+      height: 4vh;
+      width: 16vw;
+    }
+    /deep/.search_input.el-input {
+      .el-input__inner {
+        color: #fff;
+        height: 4vh;
+        border: 0.1px solid #28847e;
+        border-radius: 4px 0px 0px 4px;
+        background: rgba(0, 0, 0, 0);
+      }
+    }
+  }
+}
+.item_body {
+  width: 94vw;
+  height: 60vh;
+  color: #fff;
+  display: flex;
+  flex-wrap: wrap;
+  .item_cell {
+    width: 22.2vw;
+    height: 28vh;
+    margin-left: 1vw;
+    // border: 0.1px solid #3f5564;
+    .abnormal_cell_body {
+      width: 22.2vw;
+      height: 28vh;
+      background: url("~@/assets/companyFile/abnormalback.png") no-repeat !important;
+      background-size: 100% 100% !important;
+      .cell_body_title {
+        width: 22.2vw;
+        height: 4vh;
+        // border: 0.1px solid #fff;
+        color: #fff;
+        padding-left: 20px;
+        line-height: 4vh;
+        font-size: 20px;
+        font-weight: 600;
+      }
+      .cell_body_information {
+        margin-top: 1vh;
+        width: 22.2vw;
+        height: 20vh;
+        // border: 0.1px solid #fff;
+        display: flex;
+        .cell_body_information_text {
+          width: 5vw;
+          height: 20vh;
+          // border: 0.1px solid #fff;
+          .text_cell {
+            width: 5vw;
+            height: 5vh;
+            // border: 0.1px solid #fff;
+            line-height: 5vh;
+            color: #d0deee;
+            font-size: 16px;
+            text-align: center;
+          }
+        }
+        .cell_body_information_value {
+          width: 17vw;
+          height: 20vh;
+          // border: 0.1px solid #fff;
+          .value_cell {
+            width: 17vw;
+            height: 5vh;
+            // border: 0.1px solid #fff;
+            line-height: 5vh;
+            color: #fff;
+            font-size: 16px;
+            text-align: left;
+          }
+        }
+      }
+      .cell_body_information_btn {
+        width: 22.2vw;
+        height: 3vh;
+        // border: 0.1px solid #fff;
+        position: relative;
+        .item_btn {
+          color: #ff6565;
+          position: absolute;
+          right: 10px;
+          cursor: pointer;
+        }
+        .item_btn:focus,
+        .item_btn:hover {
+          text-shadow: 0 0 9px #ff8b4e;
+        }
+      }
+    }
+    .normal_cell_body {
+      width: 22.2vw;
+      height: 28vh;
+      background: url("~@/assets/companyFile/normalback.png") no-repeat !important;
+      background-size: 100% 100% !important;
+      .cell_body_title {
+        width: 22.2vw;
+        height: 4vh;
+        // border: 0.1px solid #fff;
+        color: #fff;
+        padding-left: 20px;
+        line-height: 4vh;
+        font-size: 20px;
+        font-weight: 600;
+      }
+      .cell_body_information {
+        margin-top: 1vh;
+        width: 22.2vw;
+        height: 20vh;
+        // border: 0.1px solid #fff;
+        display: flex;
+        .cell_body_information_text {
+          width: 5vw;
+          height: 20vh;
+          // border: 0.1px solid #fff;
+          .text_cell {
+            width: 5vw;
+            height: 5vh;
+            // border: 0.1px solid #fff;
+            line-height: 5vh;
+            color: #d0deee;
+            font-size: 16px;
+            text-align: center;
+          }
+        }
+        .cell_body_information_value {
+          width: 17vw;
+          height: 20vh;
+          // border: 0.1px solid #fff;
+          .value_cell {
+            width: 17vw;
+            height: 5vh;
+            // border: 0.1px solid #fff;
+            line-height: 5vh;
+            color: #fff;
+            font-size: 16px;
+            text-align: left;
+          }
+        }
+      }
+      .cell_body_information_btn {
+        width: 22.2vw;
+        height: 3vh;
+        // border: 0.1px solid #fff;
+        position: relative;
+        .item_btn {
+          color: #30c4ff;
+          position: absolute;
+          right: 10px;
+          cursor: pointer;
+        }
+        .item_btn:focus,
+        .item_btn:hover {
+          text-shadow: 0 0 9px #30c4ff;
+        }
+      }
+    }
+  }
+}
+.item_pagination {
+  width: 94vw;
+  height: 6vh;
+  display: flex;
+  flex-direction: row-reverse;
+  /deep/.el-pagination.is-background .btn-next,
+  /deep/.el-pagination.is-background .btn-prev,
+  /deep/.el-pagination.is-background .el-pager li {
+    margin: 0 5px;
+    background-color: rgba(255, 255, 255, 0);
+    color: #eaeff7;
+    min-width: 30px;
+    border-radius: 2px;
+    border: 1px solid rgba(40, 132, 126, 1);
+  }
+  /deep/.el-pagination__total {
+    color: #fff;
+  }
+  /deep/.el-input__inner {
+    background-color: rgba(255, 255, 255, 0);
+    border: 1px solid rgba(40, 132, 126, 1);
+    color: #eaeff7;
+  }
+  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
+    background-color: rgba(64, 158, 255, 0);
+    color: #ccc;
+    border: 1px solid #76eae4;
+  }
+  /deep/.btn-prev {
+    margin: 0 5px;
+    background-color: rgba(255, 255, 255, 0);
+    color: #eaeff7;
+    min-width: 30px;
+    border-radius: 2px;
+    border: 1px solid rgba(40, 132, 126, 1);
+  }
+  /deep/.el-pagination__jump {
+    color: #fff;
+  }
+}
+</style>
diff --git a/src/views/applySupermarket/legalAdvice/index.vue b/src/views/applySupermarket/legalAdvice/index.vue
index d3cb49c..040fac7 100644
--- a/src/views/applySupermarket/legalAdvice/index.vue
+++ b/src/views/applySupermarket/legalAdvice/index.vue
@@ -22,7 +22,7 @@
           <el-col :span="6" v-for="item in dataSource" :key="item.id">
             <div class="enterWrap">
               <div class="enterTop">
-                {{ item.cmy }}
+                {{ item.companyName }}
               </div>
               <div class="enterBtm">
                 <div class="item">
diff --git a/src/views/applySupermarket/personBack/components/detailDialog.vue b/src/views/applySupermarket/personBack/components/detailDialog.vue
new file mode 100644
index 0000000..d06cf68
--- /dev/null
+++ b/src/views/applySupermarket/personBack/components/detailDialog.vue
@@ -0,0 +1,138 @@
+<template>
+  <el-dialog
+    title="人员背景审核结果"
+    :visible.sync="dialogVisible"
+    width="80%"
+    :before-close="handleClose"
+    :close-on-click-modal="false"
+  >
+    <div class="ahsqDialogPanel">
+      <div class="msgDetailTop">
+        <div class="msgDetailLine">
+          <div class="msgDetailItem">
+            <div class="msgDetailLabel">企业名称：</div>
+            <div class="msgDetailValue">{{ dataInfo.companyName }}</div>
+          </div>
+          <div class="msgDetailItem">
+            <div class="msgDetailLabel">提交时间：</div>
+            <div class="msgDetailValue">{{ dataInfo.createTime }}</div>
+          </div>
+          <div class="msgDetailItem">
+            <div class="msgDetailLabel">审查人数：</div>
+            <div class="msgDetailValue">
+              {{ (dataInfo.details && dataInfo.details.length) || 0 }}人
+            </div>
+          </div>
+          <div class="msgDetailItem">
+            <div class="msgDetailLabel">审查结果：</div>
+            <div class="msgDetailValue">
+              {{ dataInfo.sczc }}人正常，{{ dataInfo.scyc }}人异常
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tableWrap">
+        <gMainTable
+          border
+          stripe
+          ref="gMainTable"
+          :tableData="tableList"
+          :columns="columns"
+          rowKey="id"
+          :pagination="false"
+          @pageSizeChange="handlePageSizeChange"
+          @currentPageChange="handleCurrentPageChange"
+        >
+          <template v-slot:optSlot="{ scope }">
+            <el-image
+              v-if="scope.row.photo"
+              style="width: 100px; height: 100px"
+              :src="scope.row.photo"
+              :preview-src-list="[scope.row.photo]"
+            >
+            </el-image>
+          </template>
+        </gMainTable>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getList } from "@/api/applySupermarket/personBack";
+
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      columns: [
+        {
+          prop: "cmy",
+          label: "公司名称",
+          attrs: {
+            width: 240,
+          },
+        },
+        {
+          prop: "name",
+          label: "姓名",
+          attrs: {
+            width: 100,
+          },
+        },
+        {
+          prop: "photo",
+          label: "照片",
+          slot: "optSlot",
+          attrs: {
+            width: 120,
+          },
+        },
+        {
+          prop: "card",
+          label: "身份证号",
+          attrs: {
+            width: 180,
+          },
+        },
+        {
+          prop: "reason",
+          label: "审查原因",
+        },
+        {
+          prop: "time",
+          label: "审查时间",
+          attrs: {
+            width: 180,
+          },
+        },
+        {
+          prop: "scjg",
+          label: "审查结果",
+          attrs: {
+            width: 100,
+          },
+        },
+      ],
+      dataInfo: {},
+      tableList: [],
+    };
+  },
+  methods: {
+    openDialog(obj) {
+      this.dialogVisible = true;
+
+      getList(obj.id).then((res) => {
+        if (res.code == 200) {
+          this.tableList = res.data.details || [];
+          this.dataInfo = res.data;
+        }
+      });
+    },
+
+    handleClose() {
+      this.dialogVisible = false;
+    },
+  },
+};
+</script>
diff --git a/src/views/applySupermarket/personBack/index.vue b/src/views/applySupermarket/personBack/index.vue
index b1e6469..f39229c 100644
--- a/src/views/applySupermarket/personBack/index.vue
+++ b/src/views/applySupermarket/personBack/index.vue
@@ -1,398 +1,181 @@
-<!-- 人员背景审查处置详情 -->
 <template>
-  <div>
-    <!-- 详情查询 -->
-    <div class="item_search">
-      <div class="isearch">
-        <el-input
-          class="search_input"
-          placeholder="输入企业名称"
-          v-model="search_company"
-          clearable
-        >
-        </el-input>
-        <el-button @click="search" icon="el-icon-search"></el-button>
+  <div class="enterpriseService">
+    <div class="flexSpaceBetween">
+      <div class="tableOperator"></div>
+      <div class="searchWrap">
+        <el-form :inline="true" :model="queryParam" class="demo-form-inline">
+          <el-form-item label="企业名称">
+            <el-input v-model="queryParam.name" placeholder="请输入"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="searchQuery">查询</el-button>
+            <el-button type="primary" plain @click="searchReset"
+              >重置</el-button
+            >
+          </el-form-item>
+        </el-form>
       </div>
     </div>
-    <div class="item_body">
-      <!-- 详情单元 -->
-      <div v-for="item in item_data" :key="item.id" class="item_cell">
-        <!-- 异常展示 -->
-        <div v-if="item.abnormal_num != '0'" class="abnormal_cell_body">
-          <!-- 厂家名称 -->
-          <div class="cell_body_title">{{ item.companyName }}</div>
-          <div class="cell_body_information">
-            <div class="cell_body_information_text">
-              <div class="text_cell">审查原因:</div>
-              <div class="text_cell">上报人数:</div>
-              <div class="text_cell">申请时间:</div>
-              <div class="text_cell">审查结果:</div>
+    <div class="enterServiceWrap enterServiceCardWrap">
+      <div class="enterServicePanel">
+        <el-row :gutter="20">
+          <el-col :span="6" v-for="item in dataSource" :key="item.id">
+            <div class="enterWrap">
+              <div class="enterTop">
+                {{ item.companyName }}
+              </div>
+              <div class="enterBtm">
+                <div class="item">
+                  <div class="label">审查原因：</div>
+                  <div class="value">{{ item.name }}</div>
+                </div>
+                <div class="item">
+                  <div class="label">审查人数：</div>
+                  <div class="value">{{ item.card }}</div>
+                </div>
+                <div class="item">
+                  <div class="label">申请时间：</div>
+                  <div class="value">{{ item.phone }}</div>
+                </div>
+                <div class="item">
+                  <div class="label">审查结果：</div>
+                  <div class="value">{{ item.phone }}</div>
+                </div>
+              </div>
+              <div class="opt">
+                <div
+                  class=""
+                  v-if="item.auditState == '1'"
+                  @click="examine(item)"
+                >
+                  审查
+                </div>
+                <div class="" @click="checkDetail(item)">详情</div>
+              </div>
             </div>
-            <div class="cell_body_information_value">
-              <div class="value_cell">{{ item.examinationReason }}</div>
-              <div class="value_cell">{{ item.examinationUserNum }}</div>
-              <div class="value_cell">{{ item.applyTime }}</div>
-              <div class="value_cell">{{ item.examinationResultDetail }}</div>
-            </div>
-          </div>
-          <!-- 详情按钮 -->
-          <div class="cell_body_information_btn">
-            <div class="item_btn" @click="check_item(item)">详情</div>
-          </div>
-        </div>
-        <!-- 正常展示 -->
-        <div v-else class="normal_cell_body">
-          <div class="cell_body_title">{{ item.companyName }}</div>
-          <div class="cell_body_information">
-            <div class="cell_body_information_text">
-              <div class="text_cell">审查原因:</div>
-              <div class="text_cell">上报人数:</div>
-              <div class="text_cell">申请时间:</div>
-              <div class="text_cell">审查结果:</div>
-            </div>
-            <div class="cell_body_information_value">
-              <div class="value_cell">{{ item.examinationReason }}</div>
-              <div class="value_cell">{{ item.examinationUserNum }}</div>
-              <div class="value_cell">{{ item.applyTime }}</div>
-              <div class="value_cell">{{ item.examinationResultDetail }}</div>
-            </div>
-          </div>
-          <!-- 详情按钮 -->
-          <div class="cell_body_information_btn">
-            <div class="item_btn" @click="check_item(item)">详情</div>
-          </div>
-        </div>
+          </el-col>
+        </el-row>
       </div>
-    </div>
-    <div class="item_pagination">
-      <el-pagination
-        background
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :page-sizes="[8]"
-        :page-size="pageSize"
-        :current-page="pageNum"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="total"
+      <gMainTable
+        ref="gMainTable"
+        :tableData="dataSource"
+        :columns="columns"
+        rowKey="id"
+        :pagination="ipagination"
+        @pageSizeChange="handlePageSizeChange"
+        @currentPageChange="handleCurrentPageChange"
       >
-      </el-pagination>
+      </gMainTable>
     </div>
-    <PersonBackDialog ref="personBackDialog"></PersonBackDialog>
+    <detailDialog ref="detailDialog"></detailDialog>
   </div>
 </template>
 <script>
-import PersonBackDialog from "./components/personBackDialog";
-import { get_personback_data, getList } from "@/api/applySupermarket/personBack";
+import { tableListMixins } from "@/loveflow/mixins/tableListMixins";
+import detailDialog from "./components/detailDialog.vue";
 export default {
-  name: "PersonBack",
-  components: {
-    PersonBackDialog,
-  },
+  mixins: [tableListMixins],
+  components: { detailDialog },
   data() {
     return {
-      search_company: "",
-      item_data: [],
-      pageSize: 8,
-      pageNum: 1,
-      total: 0,
+      ipagination: {
+        pageSize: 12,
+        pageSizes: ["12", "24", "36"],
+      },
+      columns: [
+        {
+          prop: "name",
+          label: "企业名称",
+        },
+      ],
+      disableMixinCreated: true,
+      url: {
+        list: "prepare/verification/list",
+        type: "get",
+      },
     };
   },
   created() {
-    this.search();
+    this.queryParam.verificationType = 1;
+    this.searchQuery();
   },
   methods: {
-    search() {
-      let param = {
-        companyName: this.search_company,
-        pageSize: this.pageSize,
-        pageNum: this.pageNum,
-        verificationType: 1,
-      };
-      getList(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);
-    },
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
-      this.pageNum = 1;
-      this.pageSize = val;
-      this.search();
-    },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
-      this.pageNum = val;
-      this.search();
+    examine(obj) {},
+    checkDetail(obj) {
+      this.$refs.detailDialog.openDialog(obj);
     },
   },
 };
 </script>
 <style lang="less" scoped>
-.item_search {
-  width: 94vw;
-  height: 5vh;
-  .isearch {
-    display: flex;
-    width: 19vw;
-    margin-left: 1.5vw;
-    .el-button {
-      display: flex;
-      align-items: center;
-      font-size: 17px;
-      height: 4vh;
-      border-radius: 0px 4px 4px 0px;
-      color: #fff;
-      background: rgba(0, 0, 0, 0);
-      border: 0.1px solid #28847e;
-      position: relative;
-      overflow: hidden;
-      &:before {
-        content: "";
-        position: absolute;
-        top: -100%;
-        left: -50%;
-        width: 150%;
-        height: 2px;
-        background-color: #fff;
-        box-shadow: 0 0 4px 1px #fff;
-        transform: rotateZ(-45deg);
-      }
-      &:hover::before {
-        transition: 0.7s;
-        top: 200%;
-        left: 50%;
-      }
-    }
-    .el-button:hover {
-      background: #4d8f89;
-    }
-    // /deep/.search_input.el-input {
-    //   .el-input__inner {
-    //     color: #fff;
-    //     border: 0.1px solid #28847e;
-    //     border-radius: 0px;
-    //     background: rgba(0, 0, 0, 0);
-    //     width: 16.1vw;
-    //     height: 4vh;
-    //   }
-    // }
-    /deep/.search_input.el-input.el-input--suffix {
-      height: 4vh;
-      width: 16vw;
-    }
-    /deep/.search_input.el-input {
-      .el-input__inner {
-        color: #fff;
-        height: 4vh;
-        border: 0.1px solid #28847e;
-        border-radius: 4px 0px 0px 4px;
-        background: rgba(0, 0, 0, 0);
-      }
-    }
-  }
+@import url("../index.less");
+.enterpriseService {
+  height: 100%;
+  overflow: hidden;
 }
-.item_body {
-  width: 94vw;
-  height: 60vh;
-  color: #fff;
-  display: flex;
-  flex-wrap: wrap;
-  .item_cell {
-    width: 22.2vw;
-    height: 28vh;
-    margin-left: 1vw;
-    // border: 0.1px solid #3f5564;
-    .abnormal_cell_body {
-      width: 22.2vw;
-      height: 28vh;
-      background: url("~@/assets/companyFile/abnormalback.png") no-repeat !important;
-      background-size: 100% 100% !important;
-      .cell_body_title {
-        width: 22.2vw;
-        height: 4vh;
-        // border: 0.1px solid #fff;
-        color: #fff;
-        padding-left: 20px;
-        line-height: 4vh;
-        font-size: 20px;
-        font-weight: 600;
-      }
-      .cell_body_information {
-        margin-top: 1vh;
-        width: 22.2vw;
-        height: 20vh;
-        // border: 0.1px solid #fff;
-        display: flex;
-        .cell_body_information_text {
-          width: 5vw;
-          height: 20vh;
-          // border: 0.1px solid #fff;
-          .text_cell {
-            width: 5vw;
-            height: 5vh;
-            // border: 0.1px solid #fff;
-            line-height: 5vh;
-            color: #d0deee;
-            font-size: 16px;
-            text-align: center;
-          }
-        }
-        .cell_body_information_value {
-          width: 17vw;
-          height: 20vh;
-          // border: 0.1px solid #fff;
-          .value_cell {
-            width: 17vw;
-            height: 5vh;
-            // border: 0.1px solid #fff;
-            line-height: 5vh;
-            color: #fff;
-            font-size: 16px;
-            text-align: left;
-          }
-        }
-      }
-      .cell_body_information_btn {
-        width: 22.2vw;
-        height: 3vh;
-        // border: 0.1px solid #fff;
-        position: relative;
-        .item_btn {
-          color: #ff6565;
-          position: absolute;
-          right: 10px;
-          cursor: pointer;
-        }
-        .item_btn:focus,
-        .item_btn:hover {
-          text-shadow: 0 0 9px #ff8b4e;
-        }
-      }
+.enterServiceWrap {
+  height: calc(100% - 60px);
+
+  .enterServicePanel {
+    height: calc(100% - 54px);
+    overflow-y: scroll;
+    &::-webkit-scrollbar {
+      display: none;
     }
-    .normal_cell_body {
-      width: 22.2vw;
-      height: 28vh;
+    .enterWrap {
+      display: flex;
+      flex-direction: column;
+      height: 230px;
+      padding: 4px 20px;
+      margin-bottom: 16px;
       background: url("~@/assets/companyFile/normalback.png") no-repeat !important;
       background-size: 100% 100% !important;
-      .cell_body_title {
-        width: 22.2vw;
-        height: 4vh;
-        // border: 0.1px solid #fff;
-        color: #fff;
-        padding-left: 20px;
-        line-height: 4vh;
+      .enterTop {
+        height: 50px;
         font-size: 20px;
-        font-weight: 600;
+        color: #ffffff;
+        font-weight: bold;
       }
-      .cell_body_information {
-        margin-top: 1vh;
-        width: 22.2vw;
-        height: 20vh;
-        // border: 0.1px solid #fff;
-        display: flex;
-        .cell_body_information_text {
-          width: 5vw;
-          height: 20vh;
-          // border: 0.1px solid #fff;
-          .text_cell {
-            width: 5vw;
-            height: 5vh;
-            // border: 0.1px solid #fff;
-            line-height: 5vh;
+      .enterBtm {
+        flex: 1;
+        .item {
+          display: flex;
+          margin-bottom: 12px;
+          .label {
+            width: 80px;
+            text-align: right;
             color: #d0deee;
-            font-size: 16px;
-            text-align: center;
           }
-        }
-        .cell_body_information_value {
-          width: 17vw;
-          height: 20vh;
-          // border: 0.1px solid #fff;
-          .value_cell {
-            width: 17vw;
-            height: 5vh;
-            // border: 0.1px solid #fff;
-            line-height: 5vh;
-            color: #fff;
-            font-size: 16px;
-            text-align: left;
+          .value {
+            width: 11vw;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: #ffffff;
           }
         }
       }
-      .cell_body_information_btn {
-        width: 22.2vw;
-        height: 3vh;
-        // border: 0.1px solid #fff;
-        position: relative;
-        .item_btn {
-          color: #30c4ff;
-          position: absolute;
-          right: 10px;
+      .opt {
+        height: 32px;
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+        color: #30c4ff;
+        &:hover {
+          color: #409eff;
           cursor: pointer;
         }
-        .item_btn:focus,
-        .item_btn:hover {
-          text-shadow: 0 0 9px #30c4ff;
-        }
       }
     }
   }
 }
-.item_pagination {
-  width: 94vw;
-  height: 6vh;
-  display: flex;
-  flex-direction: row-reverse;
-  /deep/.el-pagination.is-background .btn-next,
-  /deep/.el-pagination.is-background .btn-prev,
-  /deep/.el-pagination.is-background .el-pager li {
-    margin: 0 5px;
-    background-color: rgba(255, 255, 255, 0);
-    color: #eaeff7;
-    min-width: 30px;
-    border-radius: 2px;
-    border: 1px solid rgba(40, 132, 126, 1);
-  }
-  /deep/.el-pagination__total {
-    color: #fff;
-  }
-  /deep/.el-input__inner {
-    background-color: rgba(255, 255, 255, 0);
-    border: 1px solid rgba(40, 132, 126, 1);
-    color: #eaeff7;
-  }
-  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
-    background-color: rgba(64, 158, 255, 0);
-    color: #ccc;
-    border: 1px solid #76eae4;
-  }
-  /deep/.btn-prev {
-    margin: 0 5px;
-    background-color: rgba(255, 255, 255, 0);
-    color: #eaeff7;
-    min-width: 30px;
-    border-radius: 2px;
-    border: 1px solid rgba(40, 132, 126, 1);
-  }
-  /deep/.el-pagination__jump {
-    color: #fff;
+</style>
+<style lang="less">
+.enterpriseService {
+  .enterServiceCardWrap {
+    .el-table {
+      display: none;
+    }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/applySupermarket/personBack/index_bat.vue b/src/views/applySupermarket/personBack/index_bat.vue
new file mode 100644
index 0000000..b1e6469
--- /dev/null
+++ b/src/views/applySupermarket/personBack/index_bat.vue
@@ -0,0 +1,398 @@
+<!-- 人员背景审查处置详情 -->
+<template>
+  <div>
+    <!-- 详情查询 -->
+    <div class="item_search">
+      <div class="isearch">
+        <el-input
+          class="search_input"
+          placeholder="输入企业名称"
+          v-model="search_company"
+          clearable
+        >
+        </el-input>
+        <el-button @click="search" icon="el-icon-search"></el-button>
+      </div>
+    </div>
+    <div class="item_body">
+      <!-- 详情单元 -->
+      <div v-for="item in item_data" :key="item.id" class="item_cell">
+        <!-- 异常展示 -->
+        <div v-if="item.abnormal_num != '0'" class="abnormal_cell_body">
+          <!-- 厂家名称 -->
+          <div class="cell_body_title">{{ item.companyName }}</div>
+          <div class="cell_body_information">
+            <div class="cell_body_information_text">
+              <div class="text_cell">审查原因:</div>
+              <div class="text_cell">上报人数:</div>
+              <div class="text_cell">申请时间:</div>
+              <div class="text_cell">审查结果:</div>
+            </div>
+            <div class="cell_body_information_value">
+              <div class="value_cell">{{ item.examinationReason }}</div>
+              <div class="value_cell">{{ item.examinationUserNum }}</div>
+              <div class="value_cell">{{ item.applyTime }}</div>
+              <div class="value_cell">{{ item.examinationResultDetail }}</div>
+            </div>
+          </div>
+          <!-- 详情按钮 -->
+          <div class="cell_body_information_btn">
+            <div class="item_btn" @click="check_item(item)">详情</div>
+          </div>
+        </div>
+        <!-- 正常展示 -->
+        <div v-else class="normal_cell_body">
+          <div class="cell_body_title">{{ item.companyName }}</div>
+          <div class="cell_body_information">
+            <div class="cell_body_information_text">
+              <div class="text_cell">审查原因:</div>
+              <div class="text_cell">上报人数:</div>
+              <div class="text_cell">申请时间:</div>
+              <div class="text_cell">审查结果:</div>
+            </div>
+            <div class="cell_body_information_value">
+              <div class="value_cell">{{ item.examinationReason }}</div>
+              <div class="value_cell">{{ item.examinationUserNum }}</div>
+              <div class="value_cell">{{ item.applyTime }}</div>
+              <div class="value_cell">{{ item.examinationResultDetail }}</div>
+            </div>
+          </div>
+          <!-- 详情按钮 -->
+          <div class="cell_body_information_btn">
+            <div class="item_btn" @click="check_item(item)">详情</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="item_pagination">
+      <el-pagination
+        background
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :page-sizes="[8]"
+        :page-size="pageSize"
+        :current-page="pageNum"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+    <PersonBackDialog ref="personBackDialog"></PersonBackDialog>
+  </div>
+</template>
+<script>
+import PersonBackDialog from "./components/personBackDialog";
+import { get_personback_data, getList } from "@/api/applySupermarket/personBack";
+export default {
+  name: "PersonBack",
+  components: {
+    PersonBackDialog,
+  },
+  data() {
+    return {
+      search_company: "",
+      item_data: [],
+      pageSize: 8,
+      pageNum: 1,
+      total: 0,
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    search() {
+      let param = {
+        companyName: this.search_company,
+        pageSize: this.pageSize,
+        pageNum: this.pageNum,
+        verificationType: 1,
+      };
+      getList(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);
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+      this.pageNum = 1;
+      this.pageSize = val;
+      this.search();
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+      this.pageNum = val;
+      this.search();
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.item_search {
+  width: 94vw;
+  height: 5vh;
+  .isearch {
+    display: flex;
+    width: 19vw;
+    margin-left: 1.5vw;
+    .el-button {
+      display: flex;
+      align-items: center;
+      font-size: 17px;
+      height: 4vh;
+      border-radius: 0px 4px 4px 0px;
+      color: #fff;
+      background: rgba(0, 0, 0, 0);
+      border: 0.1px solid #28847e;
+      position: relative;
+      overflow: hidden;
+      &:before {
+        content: "";
+        position: absolute;
+        top: -100%;
+        left: -50%;
+        width: 150%;
+        height: 2px;
+        background-color: #fff;
+        box-shadow: 0 0 4px 1px #fff;
+        transform: rotateZ(-45deg);
+      }
+      &:hover::before {
+        transition: 0.7s;
+        top: 200%;
+        left: 50%;
+      }
+    }
+    .el-button:hover {
+      background: #4d8f89;
+    }
+    // /deep/.search_input.el-input {
+    //   .el-input__inner {
+    //     color: #fff;
+    //     border: 0.1px solid #28847e;
+    //     border-radius: 0px;
+    //     background: rgba(0, 0, 0, 0);
+    //     width: 16.1vw;
+    //     height: 4vh;
+    //   }
+    // }
+    /deep/.search_input.el-input.el-input--suffix {
+      height: 4vh;
+      width: 16vw;
+    }
+    /deep/.search_input.el-input {
+      .el-input__inner {
+        color: #fff;
+        height: 4vh;
+        border: 0.1px solid #28847e;
+        border-radius: 4px 0px 0px 4px;
+        background: rgba(0, 0, 0, 0);
+      }
+    }
+  }
+}
+.item_body {
+  width: 94vw;
+  height: 60vh;
+  color: #fff;
+  display: flex;
+  flex-wrap: wrap;
+  .item_cell {
+    width: 22.2vw;
+    height: 28vh;
+    margin-left: 1vw;
+    // border: 0.1px solid #3f5564;
+    .abnormal_cell_body {
+      width: 22.2vw;
+      height: 28vh;
+      background: url("~@/assets/companyFile/abnormalback.png") no-repeat !important;
+      background-size: 100% 100% !important;
+      .cell_body_title {
+        width: 22.2vw;
+        height: 4vh;
+        // border: 0.1px solid #fff;
+        color: #fff;
+        padding-left: 20px;
+        line-height: 4vh;
+        font-size: 20px;
+        font-weight: 600;
+      }
+      .cell_body_information {
+        margin-top: 1vh;
+        width: 22.2vw;
+        height: 20vh;
+        // border: 0.1px solid #fff;
+        display: flex;
+        .cell_body_information_text {
+          width: 5vw;
+          height: 20vh;
+          // border: 0.1px solid #fff;
+          .text_cell {
+            width: 5vw;
+            height: 5vh;
+            // border: 0.1px solid #fff;
+            line-height: 5vh;
+            color: #d0deee;
+            font-size: 16px;
+            text-align: center;
+          }
+        }
+        .cell_body_information_value {
+          width: 17vw;
+          height: 20vh;
+          // border: 0.1px solid #fff;
+          .value_cell {
+            width: 17vw;
+            height: 5vh;
+            // border: 0.1px solid #fff;
+            line-height: 5vh;
+            color: #fff;
+            font-size: 16px;
+            text-align: left;
+          }
+        }
+      }
+      .cell_body_information_btn {
+        width: 22.2vw;
+        height: 3vh;
+        // border: 0.1px solid #fff;
+        position: relative;
+        .item_btn {
+          color: #ff6565;
+          position: absolute;
+          right: 10px;
+          cursor: pointer;
+        }
+        .item_btn:focus,
+        .item_btn:hover {
+          text-shadow: 0 0 9px #ff8b4e;
+        }
+      }
+    }
+    .normal_cell_body {
+      width: 22.2vw;
+      height: 28vh;
+      background: url("~@/assets/companyFile/normalback.png") no-repeat !important;
+      background-size: 100% 100% !important;
+      .cell_body_title {
+        width: 22.2vw;
+        height: 4vh;
+        // border: 0.1px solid #fff;
+        color: #fff;
+        padding-left: 20px;
+        line-height: 4vh;
+        font-size: 20px;
+        font-weight: 600;
+      }
+      .cell_body_information {
+        margin-top: 1vh;
+        width: 22.2vw;
+        height: 20vh;
+        // border: 0.1px solid #fff;
+        display: flex;
+        .cell_body_information_text {
+          width: 5vw;
+          height: 20vh;
+          // border: 0.1px solid #fff;
+          .text_cell {
+            width: 5vw;
+            height: 5vh;
+            // border: 0.1px solid #fff;
+            line-height: 5vh;
+            color: #d0deee;
+            font-size: 16px;
+            text-align: center;
+          }
+        }
+        .cell_body_information_value {
+          width: 17vw;
+          height: 20vh;
+          // border: 0.1px solid #fff;
+          .value_cell {
+            width: 17vw;
+            height: 5vh;
+            // border: 0.1px solid #fff;
+            line-height: 5vh;
+            color: #fff;
+            font-size: 16px;
+            text-align: left;
+          }
+        }
+      }
+      .cell_body_information_btn {
+        width: 22.2vw;
+        height: 3vh;
+        // border: 0.1px solid #fff;
+        position: relative;
+        .item_btn {
+          color: #30c4ff;
+          position: absolute;
+          right: 10px;
+          cursor: pointer;
+        }
+        .item_btn:focus,
+        .item_btn:hover {
+          text-shadow: 0 0 9px #30c4ff;
+        }
+      }
+    }
+  }
+}
+.item_pagination {
+  width: 94vw;
+  height: 6vh;
+  display: flex;
+  flex-direction: row-reverse;
+  /deep/.el-pagination.is-background .btn-next,
+  /deep/.el-pagination.is-background .btn-prev,
+  /deep/.el-pagination.is-background .el-pager li {
+    margin: 0 5px;
+    background-color: rgba(255, 255, 255, 0);
+    color: #eaeff7;
+    min-width: 30px;
+    border-radius: 2px;
+    border: 1px solid rgba(40, 132, 126, 1);
+  }
+  /deep/.el-pagination__total {
+    color: #fff;
+  }
+  /deep/.el-input__inner {
+    background-color: rgba(255, 255, 255, 0);
+    border: 1px solid rgba(40, 132, 126, 1);
+    color: #eaeff7;
+  }
+  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
+    background-color: rgba(64, 158, 255, 0);
+    color: #ccc;
+    border: 1px solid #76eae4;
+  }
+  /deep/.btn-prev {
+    margin: 0 5px;
+    background-color: rgba(255, 255, 255, 0);
+    color: #eaeff7;
+    min-width: 30px;
+    border-radius: 2px;
+    border: 1px solid rgba(40, 132, 126, 1);
+  }
+  /deep/.el-pagination__jump {
+    color: #fff;
+  }
+}
+</style>
\ No newline at end of file