From d9122249926c76bb4bb11c09eeef0258c7a839e2 Mon Sep 17 00:00:00 2001
From: lukeyan <1727408482@qq.com>
Date: Mon, 7 Aug 2023 10:31:10 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E4=BA=8C=E6=AC=A1?=
 =?UTF-8?q?=E5=B0=81=E8=A3=851?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/publicModule/lkyTable.vue | 393 +++++++++++++++++++++++
 src/main.js                              |   3 +-
 src/router/index.js                      |   7 +-
 src/views/module/index.vue               | 175 ++++++++++
 4 files changed, 576 insertions(+), 2 deletions(-)
 create mode 100644 src/components/publicModule/lkyTable.vue
 create mode 100644 src/views/module/index.vue

diff --git a/src/components/publicModule/lkyTable.vue b/src/components/publicModule/lkyTable.vue
new file mode 100644
index 0000000..f90b317
--- /dev/null
+++ b/src/components/publicModule/lkyTable.vue
@@ -0,0 +1,393 @@
+<!-- 封装表格  -->
+<template>
+  <!-- 本组件样式包含表格、分页 -->
+  <div class="table_pagination_body" :style="table_pagination_style">
+    <el-table
+      class="lky_table"
+      :data="table_data"
+      :height="table_height"
+      :cell-style="{ background: 'revert', 'text-align': 'center' }"
+    >
+      <!-- 是否需要多行选择数据 -->
+      <el-table-column
+        v-if="table_select"
+        type="selection"
+        width="55"
+        align="center"
+      >
+      </el-table-column>
+      <!-- 是否需要数据序号 -->
+      <el-table-column
+        v-if="table_index"
+        label="序号"
+        type="index"
+        width="70"
+        align="center"
+      ></el-table-column>
+      <template v-for="item in table_columns">
+        <!-- 如果有多级表头 -->
+        <template v-if="item.children">
+          <el-table-column :key="item.prop" :label="item.label" align="center">
+            <template>
+              <el-table-column
+                v-for="val in item.children"
+                :key="val.prop"
+                :prop="val.prop"
+                :label="val.label"
+                :width="val.width"
+                align="center"
+              >
+                <!-- 如果val.picture为ture时，则该列单元格可显示图片 -->
+                <template v-if="val.picture" #default="{ row }">
+                  <!-- 二级表数据照片 -->
+                  <el-image
+                    :src="row.pic_child"
+                    style="width: 42px; height: 42px"
+                  >
+                    <div slot="error" class="image-slot">
+                      <img src="@/assets/companyFile/avatar.png" alt="" />
+                    </div>
+                  </el-image>
+                </template>
+              </el-table-column>
+            </template>
+          </el-table-column>
+        </template>
+        <!-- 如果没有多级表头 -->
+        <template v-else>
+          <el-table-column
+            :key="item.prop"
+            :prop="item.prop"
+            :label="item.label"
+            :width="item.width"
+            align="center"
+          >
+            <!-- 如果item.picture为ture时，则该列单元格可显示图片 -->
+            <template v-if="item.picture" #default="{ row }">
+              <el-image
+                :src="row.pic"
+                style="width: 42px; height: 42px"
+              >
+                <div slot="error" class="image-slot">
+                  <img src="@/assets/companyFile/avatar.png" alt="" />
+                </div>
+              </el-image>
+            </template>
+            <!-- 如果item.picture_two为ture时，则该列单元格可显示图片 -->
+            <template v-else-if="item.picture_two" #default="{ row }">
+              <el-image
+                :src="row.pic_two"
+                style="width: 42px; height: 42px"
+              >
+                <div slot="error" class="image-slot">
+                  <img src="@/assets/companyFile/avatar.png" alt="" />
+                </div>
+              </el-image>
+            </template>
+          </el-table-column>
+        </template>
+      </template>
+      <!-- 是否需要操作单元格 -->
+      <el-table-column
+        v-if="table_operation"
+        :label="operation_label"
+        align="center"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="small"
+            class="operation_btn"
+            @click="open(scope.row)"
+            >{{ operation_text }}</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="table_pagination" :style="pagination_style">
+      <el-pagination
+        :background="true"
+        @size-change="handle_size_change"
+        @current-change="handle_current_change"
+        :page-sizes="page_sizes"
+        :pager-count="5"
+        :page-size="pageSize"
+        :current-page="pageNum"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "lkyTable",
+  props: {
+    // 本组件盒子宽
+    table_pagination_width: {
+      type: String,
+      default: "",
+    },
+    // 本组件盒子高
+    table_pagination_height: {
+      type: String,
+      default: "",
+    },
+    // 表格数据
+    table_data: {
+      type: Array,
+      default: () => [],
+    },
+    // 表格高度
+    table_height: {
+      type: String,
+      default: "",
+    },
+    // 是否需要选择表格行数据
+    table_select: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否需要表格序号
+    table_index: {
+      type: Boolean,
+      default: false,
+    },
+    // 单元格名称
+    table_columns: {
+      type: Array,
+      default: () => [],
+    },
+    // 是否需要操作单元格
+    table_operation: {
+      type: Boolean,
+      default: false,
+    },
+    // 操作单元格表头名
+    operation_label: {
+      type: String,
+      default: "",
+    },
+    // 操作单元格按钮名称
+    operation_text: {
+      type: String,
+      default: "",
+    },
+    // 分页可选页数类型
+    page_sizes: {
+      type: Array,
+      default: () => [],
+    },
+    // 每页多少条
+    pageSize: {
+      type: Number,
+      default: 0,
+    },
+    // 当前多少页
+    pageNum: {
+      type: Number,
+      default: 0,
+    },
+    // 数据总条数
+    total: {
+      type: Number,
+      default: 0,
+    },
+    // 分页盒子宽,分页盒子高固定
+    pagination_width: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    // 根据实际页面需求确定整体盒子宽高
+    table_pagination_style() {
+      return {
+        "--table_pagination-width": this.table_pagination_width + "vw",
+        "--table_pagination-height": this.table_pagination_height + "vh",
+      };
+    },
+    // 根据实际页面需求确定分页盒子宽度
+    pagination_style() {
+      return {
+        "--pagination-width": this.pagination_width + "vw",
+      };
+    },
+  },
+  methods: {
+    // 操作单元格点击事件,由调用该组件的父组件执行 方法名定义成open_event
+    open(row) {
+      this.$emit("open_event", row);
+    },
+    // 如果二级表格需要展示照片的话
+    get_child_img_url(row) {
+      this.$emit("get_child_img_url", row);
+    },
+    // 如果一级表格需要展示照片的话
+    get_img_url(row) {
+      this.$emit("get_img_url", row);
+    },
+    // 每页多少条 不可随意篡改props值,由调用该组件的父组件执行 方法名定义成size_change
+    handle_size_change(val) {
+      this.$emit("size_change", val);
+    },
+    // 前往哪一页 不可随意篡改props值,由调用该组件的父组件执行 方法名定义成nun_change
+    handle_current_change(val) {
+      this.$emit("num_change", val);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.table_pagination_body {
+  margin-top: 1vh;
+  margin-left: 0.4vw;
+  width: var(--table_pagination-width);
+  height: var(--table_pagination-height);
+}
+/* 表格样式 */
+/deep/.lky_table.el-table {
+  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 th.el-table__cell.is-leaf {
+  border: 0.1px solid #3f5564;
+}
+/* 单元格边框样式 */
+/deep/.el-table td.el-table__cell,
+.el-table th.el-table__cell.is-leaf {
+  border: 0.1px solid #3f5564;
+}
+/deep/.el-table--border th.el-table__cell,
+.el-table__fixed-right-patch {
+  border: 0.1px solid #3f5564;
+}
+/* 表格右侧白线取消 */
+/deep/.el-table--border::after,
+.el-table--group::after {
+  width: 0px;
+}
+/* 表格内容过长时进度条盒子样式 */
+/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-button.operation_btn {
+  background-color: #182527;
+  border: 0px;
+  color: #2fabdc;
+}
+/* 表格操作单元格按钮操作时样式 */
+/deep/.el-button.operation_btn:hover,
+.el-button.operation_btn:focus {
+  background-color: #182527;
+  border: 0px;
+  color: #2fabdc;
+  text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+}
+.table_pagination {
+  width: var(--pagination-width);
+  height: 5vh;
+  display: flex;
+  flex-direction: row-reverse;
+  /deep/.el-input--suffix .el-input__inner {
+    color: #fff;
+    border: 0.1px solid #34a6a6;
+    border-radius: 0px;
+    background: rgba(0, 0, 0, 0);
+    width: 5vw;
+    height: 2.6vh;
+    line-height: 2.6vh;
+  }
+  /deep/.el-input__icon {
+    color: #fff;
+    line-height: 2.6vh;
+    height: 2.6vh;
+  }
+  /deep/.el-pagination {
+    margin-top: 1vh;
+    .el-pagination__total {
+      color: #fff;
+    }
+    .el-input__inner {
+      border-radius: 0px;
+      background: #3c4b4a;
+      border: 0.1px solid #277f79;
+      color: #fff;
+      height: 2.6vh;
+    }
+    .btn-prev {
+      border-radius: 0px;
+      background: #3c4b4a;
+      border: 0.1px solid #277f79;
+      color: #fff;
+      height: 2.6vh;
+    }
+    ul {
+      li {
+        border: 0.1px solid #277f79;
+        background: #3c4b4a;
+        color: #fff;
+        height: 2.6vh;
+      }
+    }
+    .btn-next {
+      border: 0.1px solid #277f79;
+      border-radius: 0px;
+      background: #3c4b4a;
+      color: #fff;
+      height: 2.6vh;
+    }
+    .el-pager {
+      li {
+        background: #3c4b4a !important;
+      }
+    }
+    .el-pagination__jump {
+      height: 2.6vh;
+      line-height: 2.6vh;
+      color: #fff;
+    }
+  }
+  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
+    border: 0.1px solid #76eae4;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 9a4957a..a79074a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,10 +6,11 @@ import router from './router'
 import store from './store'
 import Message from './components/message';
 import erupload from "./components/upload";
+import lkyTable from "./components/publicModule/lkyTable" // 本组件样式包含普通表格、分页
 Vue.use(ElementUI);
 Vue.use(Message)
 Vue.component('erupload', erupload)
-
+Vue.component('lkyTable', lkyTable)
 const vm = new Vue({
   el: '#app',
   router,
diff --git a/src/router/index.js b/src/router/index.js
index d1ad40b..d421566 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -67,12 +67,17 @@ const routes = [
             name: 'closeLoopDispose',
             component: () => import('@/views/closeLoopDispose'),
           },
-          // 应用超市
+          // 安商惠企
           {
             path:'applySupermarket',
             name:'applySupermarket',
             component: () => import('@/views/applySupermarket'),
           },
+          {
+            path:'module',
+            name:'module',
+            component: () => import('@/views/module'),
+          },
         ]
       },
       {
diff --git a/src/views/module/index.vue b/src/views/module/index.vue
new file mode 100644
index 0000000..59c9a38
--- /dev/null
+++ b/src/views/module/index.vue
@@ -0,0 +1,175 @@
+<!-- 仅做模块化展示使用 -->
+<template>
+  <div>
+    <lkyTable
+      :table_pagination_width="table_pagination_width"
+      :table_pagination_height="table_pagination_height"
+      :table_data="table_data"
+      :table_height="table_height"
+      :table_select="table_select"
+      :table_index="table_index"
+      :table_columns="table_columns"
+      :table_operation="table_operation"
+      :operation_label="operation_label"
+      :operation_text="operation_text"
+      :page_sizes="page_sizes"
+      :pageSize="pageSize"
+      :pageNum="pageNum"
+      :total="total"
+      @open_event="open_event"
+      @size_change="size_change"
+      @num_change="num_change"
+    ></lkyTable>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      table_pagination_width: "60",
+      table_pagination_height: "60",
+      table_data: [
+        {
+          company: "宁波保润有限石化公司",
+          personNum: "22",
+          idcard: "34567",
+          unit: "最小单位",
+          level: "一级",
+          pic_child:'https://t12.baidu.com/it/u=2944858655,3260611328&fm=58',
+          picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
+        },
+        {
+          company: "宁波保润石化公司",
+          personNum: "22",
+          idcard: "34567",
+          unit: "最小单位",
+          level: "四级",
+          pic_child:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
+          picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
+        },
+        {
+          company: "宁波保润石化公司",
+          personNum: "22",
+          idcard: "34567",
+          unit: "最小单位",
+          level: "一级",
+          pic_child:'1222.png',
+          picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
+        },
+        {
+          company: "宁波保润石化公司",
+          personNum: "22",
+          idcard: "34567",
+          unit: "最小单位",
+          level: "三级",
+          pic_child:'1222.png',
+          picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
+        },
+        {
+          company: "宁波保润石化公司",
+          personNum: "22",
+          idcard: "34567",
+          unit: "最小单位",
+          level: "一级",
+          pic_child:'1222.png',
+          picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
+        },
+        {
+          company: "宁波保润石化公司",
+          personNum: "22",
+          idcard: "34567",
+          unit: "最小单位",
+          level: "二级",
+          pic:'1000.png',
+          picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
+          pic_child:'1222.png',
+        },
+      ],
+      table_height: "592", // 表格高度根据实际场景确定高度
+      table_select: false,
+      table_index: true,
+      table_columns: [
+        {
+          prop: "company_all",
+          label: "公司全览",
+          children: [
+            {
+              prop: "company",
+              label: "公司名称",
+              width: "180",
+            },
+            {
+              prop: "personPic",
+              label: "个人照片",
+              width: "120",
+              picture: true,
+            },
+            {
+              prop: "personNum",
+              label: "公司人数",
+              width: "120",
+            },
+            {
+              prop: "idcard",
+              label: "公司id",
+              width: "90",
+            },
+            {
+              prop: "unit",
+              label: "公司单位",
+              width: "180",
+            },
+          ],
+        },
+        {
+          prop: "level",
+          label: "公司等级",
+          width: "80",
+        },
+        {
+          prop: "pic",
+          label: "公司照片",
+          width: "120",
+          picture: true,
+        },
+        {
+          prop: "person_pic",
+          label: "个人照片",
+          width: "100",
+          picture_two: true,
+        },
+      ],
+      table_operation: true,
+      operation_label: "操作",
+      operation_text: "详情",
+      page_sizes: [4, 6],
+      pageSize: 4,
+      pageNum: 1,
+      total: 8,
+      pagination_width: "60",
+    };
+  },
+  methods: {
+    get_search() {
+      console.log("123");
+    },
+    // 表格详情点击事件
+    open_event(row) {
+      console.log("row456", row);
+    },
+    // 分页--每页多少条
+    size_change(val) {
+      this.pageNum = 1;
+      this.pageSize = val;
+      this.get_search();
+    },
+    // 分页--前往哪一页
+    num_change(val) {
+      this.pageNum = val;
+      this.get_search();
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+</style>
\ No newline at end of file

From 9e61a3bda738fac919c19d6e23833ebce361ebfd Mon Sep 17 00:00:00 2001
From: lukeyan <1727408482@qq.com>
Date: Tue, 8 Aug 2023 09:50:38 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E5=B0=81=E8=A3=852?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/publicModule/lkyTable.vue      | 110 +++++++++++++-----
 .../applySupermarket/personBack/index.vue     |   2 +-
 src/views/module/index.vue                    |  70 +++++++----
 3 files changed, 130 insertions(+), 52 deletions(-)

diff --git a/src/components/publicModule/lkyTable.vue b/src/components/publicModule/lkyTable.vue
index f90b317..765172d 100644
--- a/src/components/publicModule/lkyTable.vue
+++ b/src/components/publicModule/lkyTable.vue
@@ -2,12 +2,7 @@
 <template>
   <!-- 本组件样式包含表格、分页 -->
   <div class="table_pagination_body" :style="table_pagination_style">
-    <el-table
-      class="lky_table"
-      :data="table_data"
-      :height="table_height"
-      :cell-style="{ background: 'revert', 'text-align': 'center' }"
-    >
+    <el-table class="lky_table" :data="table_data" :height="table_height">
       <!-- 是否需要多行选择数据 -->
       <el-table-column
         v-if="table_select"
@@ -37,11 +32,11 @@
                 :width="val.width"
                 align="center"
               >
-                <!-- 如果val.picture为ture时，则该列单元格可显示图片 -->
+                <!-- 如果val.picture为true时，则该列单元格可显示图片 -->
                 <template v-if="val.picture" #default="{ row }">
                   <!-- 二级表数据照片 -->
                   <el-image
-                    :src="row.pic_child"
+                    :src="row[val.prop]"
                     style="width: 42px; height: 42px"
                   >
                     <div slot="error" class="image-slot">
@@ -49,6 +44,22 @@
                     </div>
                   </el-image>
                 </template>
+                <!-- 如果val.color为true时，则该列单元格字颜色按需更改 -->
+                <template v-else-if="val.color" #default="{ row }">
+                  <div :style="{ color: child_style_change(row[val.prop]) }">
+                    {{ row[val.prop] }}
+                  </div>
+                </template>
+                <!-- 如果val.link为true时，则该列单元格文字可点击 -->
+                <template v-else-if="val.link" #default="{ row }">
+                  <el-link
+                    :underline="false"
+                    type="primary"
+                    @click="table_link(row)"
+                  >
+                    {{ row[val.prop] }}
+                  </el-link>
+                </template>
               </el-table-column>
             </template>
           </el-table-column>
@@ -62,27 +73,19 @@
             :width="item.width"
             align="center"
           >
-            <!-- 如果item.picture为ture时，则该列单元格可显示图片 -->
+            <!-- 如果item.picture为true时，则该列单元格可显示图片 -->
             <template v-if="item.picture" #default="{ row }">
-              <el-image
-                :src="row.pic"
-                style="width: 42px; height: 42px"
-              >
+              <el-image :src="row[item.prop]" style="width: 42px; height: 42px">
                 <div slot="error" class="image-slot">
                   <img src="@/assets/companyFile/avatar.png" alt="" />
                 </div>
               </el-image>
             </template>
-            <!-- 如果item.picture_two为ture时，则该列单元格可显示图片 -->
-            <template v-else-if="item.picture_two" #default="{ row }">
-              <el-image
-                :src="row.pic_two"
-                style="width: 42px; height: 42px"
-              >
-                <div slot="error" class="image-slot">
-                  <img src="@/assets/companyFile/avatar.png" alt="" />
-                </div>
-              </el-image>
+            <!-- 如果item.color为true时，则该列单元格字颜色按需更改 -->
+            <template v-else-if="item.color" #default="{ row }">
+              <div :style="{ color: style_change(row[item.prop]) }">
+                {{ row[item.prop] }}
+              </div>
             </template>
           </el-table-column>
         </template>
@@ -97,9 +100,17 @@
           <el-button
             size="small"
             class="operation_btn"
+            v-if="table_operation"
             @click="open(scope.row)"
             >{{ operation_text }}</el-button
           >
+          <el-button
+            size="small"
+            class="operation_btn"
+            v-if="table_operation_second"
+            @click="open(scope.row)"
+            >{{ operation_text_second }}</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -153,6 +164,16 @@ export default {
       type: Boolean,
       default: false,
     },
+    // 根据开发需要，二级表头如有要求对单元格文字颜色进行变换，通过该list传达判断条件
+    child_color_list: {
+      type: Array,
+      default: () => [],
+    },
+    // 根据开发需要，如有要求对单元格文字颜色进行变换，通过该list传达判断条件
+    color_list: {
+      type: Array,
+      default: () => [],
+    },
     // 单元格名称
     table_columns: {
       type: Array,
@@ -163,6 +184,11 @@ export default {
       type: Boolean,
       default: false,
     },
+    // 操作单元格是否需要第二个按钮
+    table_operation_second: {
+      type: Boolean,
+      default: false,
+    },
     // 操作单元格表头名
     operation_label: {
       type: String,
@@ -173,6 +199,11 @@ export default {
       type: String,
       default: "",
     },
+    // 第二个操作单元格按钮名称
+    operation_text_second: {
+      type: String,
+      default: "",
+    },
     // 分页可选页数类型
     page_sizes: {
       type: Array,
@@ -222,13 +253,34 @@ export default {
     open(row) {
       this.$emit("open_event", row);
     },
-    // 如果二级表格需要展示照片的话
-    get_child_img_url(row) {
-      this.$emit("get_child_img_url", row);
+    // 二级表根据后端返回判断流程状态颜色
+    child_style_change(val) {
+      switch (val) {
+        case this.child_color_list[0]:
+          return "#3eba75";
+        case this.child_color_list[1]:
+          return "#FDA722";
+        case this.child_color_list[2]:
+          return "#2eb9ef";
+        case this.child_color_list[3]:
+          return "#e55b5b";
+      }
+    },
+    // 根据后端返回判断流程状态颜色
+    style_change(val) {
+      switch (val) {
+        case this.color_list[0]:
+          return "#3eba75";
+        case this.color_list[1]:
+          return "#FDA722";
+        case this.color_list[2]:
+          return "#2eb9ef";
+        case this.color_list[3]:
+          return "#e55b5b";
+      }
     },
-    // 如果一级表格需要展示照片的话
-    get_img_url(row) {
-      this.$emit("get_img_url", row);
+    table_link(row) {
+      this.$emit('table_link',row)
     },
     // 每页多少条 不可随意篡改props值,由调用该组件的父组件执行 方法名定义成size_change
     handle_size_change(val) {
diff --git a/src/views/applySupermarket/personBack/index.vue b/src/views/applySupermarket/personBack/index.vue
index b9c0e43..be5cbab 100644
--- a/src/views/applySupermarket/personBack/index.vue
+++ b/src/views/applySupermarket/personBack/index.vue
@@ -115,7 +115,7 @@ export default {
           res.rows[i].abnormal_num = res.rows[
             i
           ].examinationResultDetail.substring(
-            res.rows[i].examinationResultDetail.indexOf("正常,") + 3,
+            res.rows[i].examinationResultDetail.indexOf("正常，") + 3,
             res.rows[i].examinationResultDetail.indexOf("人异常")
           );
           console.log(res.rows[i].abnormal_num);
diff --git a/src/views/module/index.vue b/src/views/module/index.vue
index 59c9a38..18458f6 100644
--- a/src/views/module/index.vue
+++ b/src/views/module/index.vue
@@ -8,14 +8,19 @@
       :table_height="table_height"
       :table_select="table_select"
       :table_index="table_index"
+      :color_list="color_list"
+      :child_color_list="child_color_list"
       :table_columns="table_columns"
       :table_operation="table_operation"
+      :table_operation_second="table_operation_second"
       :operation_label="operation_label"
       :operation_text="operation_text"
+      :operation_text_second="operation_text_second"
       :page_sizes="page_sizes"
       :pageSize="pageSize"
       :pageNum="pageNum"
       :total="total"
+      @table_link="table_link"
       @open_event="open_event"
       @size_change="size_change"
       @num_change="num_change"
@@ -26,7 +31,7 @@
 export default {
   data() {
     return {
-      table_pagination_width: "60",
+      table_pagination_width: "75",
       table_pagination_height: "60",
       table_data: [
         {
@@ -35,8 +40,9 @@ export default {
           idcard: "34567",
           unit: "最小单位",
           level: "一级",
-          pic_child:'https://t12.baidu.com/it/u=2944858655,3260611328&fm=58',
-          picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
+          pic_child: "https://t12.baidu.com/it/u=2944858655,3260611328&fm=58",
+          pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
+          company_level: "审核通过",
         },
         {
           company: "宁波保润石化公司",
@@ -44,8 +50,9 @@ export default {
           idcard: "34567",
           unit: "最小单位",
           level: "四级",
-          pic_child:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
-          picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
+          pic_child: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
+          pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
+          company_level: "审核中",
         },
         {
           company: "宁波保润石化公司",
@@ -53,8 +60,10 @@ export default {
           idcard: "34567",
           unit: "最小单位",
           level: "一级",
-          pic_child:'1222.png',
-          picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
+          pic: "https://img2.baidu.com/it/u=1735491135,1421708020&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1691514000&t=9b750206b13e5b42054a728b0e759fe5",
+          pic_child: "1222.png",
+          pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
+          company_level: "审核中",
         },
         {
           company: "宁波保润石化公司",
@@ -62,8 +71,10 @@ export default {
           idcard: "34567",
           unit: "最小单位",
           level: "三级",
-          pic_child:'1222.png',
-          picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
+          pic_child: "1222.png",
+          pic: "https://t7.baidu.com/it/u=1211026933,587530743&fm=218&app=137&size=f242,150&n=0&f=JPEG&fmt=auto?s=D9934B90441845C2548365530300D0BA&sec=1691514000&t=0d3b6cf3971e24bff2a9ad9909868a3e",
+          pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
+          company_level: "预备审核",
         },
         {
           company: "宁波保润石化公司",
@@ -71,8 +82,9 @@ export default {
           idcard: "34567",
           unit: "最小单位",
           level: "一级",
-          pic_child:'1222.png',
-          picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
+          pic_child: "1222.png",
+          pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
+          company_level: "预备审核",
         },
         {
           company: "宁波保润石化公司",
@@ -80,14 +92,17 @@ export default {
           idcard: "34567",
           unit: "最小单位",
           level: "二级",
-          pic:'1000.png',
-          picTwo:'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
-          pic_child:'1222.png',
+          pic: "1000.png",
+          pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
+          pic_child: "1222.png",
+          company_level: "审核驳回",
         },
       ],
-      table_height: "592", // 表格高度根据实际场景确定高度
+      table_height: "550", // 表格高度根据实际场景确定高度
       table_select: false,
       table_index: true,
+      child_color_list: ["审核驳回", "预备审核", "审核中", "审核通过"],
+      color_list: ["一级", "二级", "三级", "四级"],
       table_columns: [
         {
           prop: "company_all",
@@ -99,7 +114,7 @@ export default {
               width: "180",
             },
             {
-              prop: "personPic",
+              prop: "pic_child",
               label: "个人照片",
               width: "120",
               picture: true,
@@ -118,6 +133,13 @@ export default {
               prop: "unit",
               label: "公司单位",
               width: "180",
+              link: true,
+            },
+            {
+              prop: "company_level",
+              label: "公司次等级",
+              width: "160",
+              color: true,
             },
           ],
         },
@@ -125,6 +147,7 @@ export default {
           prop: "level",
           label: "公司等级",
           width: "80",
+          color: true,
         },
         {
           prop: "pic",
@@ -133,20 +156,22 @@ export default {
           picture: true,
         },
         {
-          prop: "person_pic",
+          prop: "pic_two",
           label: "个人照片",
           width: "100",
-          picture_two: true,
+          picture: true,
         },
       ],
       table_operation: true,
+      table_operation_second: true,
       operation_label: "操作",
       operation_text: "详情",
+      operation_text_second:'编辑',
       page_sizes: [4, 6],
       pageSize: 4,
       pageNum: 1,
       total: 8,
-      pagination_width: "60",
+      pagination_width: "75",
     };
   },
   methods: {
@@ -157,6 +182,9 @@ export default {
     open_event(row) {
       console.log("row456", row);
     },
+    table_link(row) {
+      console.log("row777", row);
+    },
     // 分页--每页多少条
     size_change(val) {
       this.pageNum = 1;
@@ -170,6 +198,4 @@ export default {
     },
   },
 };
-</script>
-<style lang="less" scoped>
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file

From 717fd1f92c475dae0effcddb8dd5de965615d11a Mon Sep 17 00:00:00 2001
From: lukeyan <1727408482@qq.com>
Date: Wed, 9 Aug 2023 11:05:13 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E5=B0=81=E8=A3=85=E5=88=86=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/publicModule/lkyDialog.vue     |  47 ++++
 src/components/publicModule/lkyPagination.vue | 112 +++++++++
 src/components/publicModule/lkyTable.vue      | 105 ++++----
 src/main.js                                   |   2 +
 src/router/index.js                           |  13 +-
 src/router/routes/module.js                   |  26 ++
 src/utils/request.js                          |   4 +-
 .../applySupermarket/personBack/index.vue     |  74 +++---
 src/views/module/components/leftNav.vue       | 130 ++++++++++
 .../module/components/paginationModule.vue    |  37 +++
 src/views/module/components/tableModule.vue   | 203 ++++++++++++++++
 src/views/module/index.vue                    | 226 +++---------------
 .../systemManagement/safeIndex/index.vue      |   2 +-
 13 files changed, 677 insertions(+), 304 deletions(-)
 create mode 100644 src/components/publicModule/lkyDialog.vue
 create mode 100644 src/components/publicModule/lkyPagination.vue
 create mode 100644 src/router/routes/module.js
 create mode 100644 src/views/module/components/leftNav.vue
 create mode 100644 src/views/module/components/paginationModule.vue
 create mode 100644 src/views/module/components/tableModule.vue

diff --git a/src/components/publicModule/lkyDialog.vue b/src/components/publicModule/lkyDialog.vue
new file mode 100644
index 0000000..24592b8
--- /dev/null
+++ b/src/components/publicModule/lkyDialog.vue
@@ -0,0 +1,47 @@
+<!-- 封装弹窗 -->
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="visible"
+    :close-on-click-modal="false"
+    :width="dialog_width"
+    @close="close"
+  >
+  </el-dialog>
+</template>
+<script>
+export default {
+  name: "LkyDialog",
+  data() {
+    return {
+      visible: false,
+    };
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/.el-dialog {
+  .el-dialog__title {
+    color: #fff;
+    font-size: 19px;
+    text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+  }
+  background-image: url("~@/assets/companyFile/dialogBack.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  height: 800px;
+  /* 关闭弹窗叉号 */
+  .el-dialog__headerbtn {
+    .el-dialog__close {
+      color: #e55b5b;
+      font-size: 18px;
+      font-weight: 500;
+    }
+  }
+  .el-dialog__body {
+    padding: 0px;
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/publicModule/lkyPagination.vue b/src/components/publicModule/lkyPagination.vue
new file mode 100644
index 0000000..e0b53b0
--- /dev/null
+++ b/src/components/publicModule/lkyPagination.vue
@@ -0,0 +1,112 @@
+<!-- 封装分页 -->
+<template>
+  <div class="table_pagination" :style="pagination_style">
+    <el-pagination
+      :background="true"
+      @size-change="handle_size_change"
+      @current-change="handle_current_change"
+      :page-sizes="page_sizes"
+      :pager-count="5"
+      :page-size="pageSize"
+      :current-page="pageNum"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total"
+    >
+    </el-pagination>
+  </div>
+</template>
+<script>
+export default {
+  name: "LkyPagination",
+  props: {
+    // 分页盒子宽,分页盒子高固定
+    pagination_width: {
+      type: String,
+      default: "",
+    },
+    // 分页可选页数类型
+    page_sizes: {
+      type: Array,
+      default: () => [],
+    },
+    // 每页多少条
+    pageSize: {
+      type: Number,
+      default: 0,
+    },
+    // 当前多少页
+    pageNum: {
+      type: Number,
+      default: 0,
+    },
+    // 数据总条数
+    total: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    // 根据实际页面需求确定分页盒子宽度
+    pagination_style() {
+      return {
+        "--pagination-width": this.pagination_width + "vw",
+      };
+    },
+  },
+  methods: {
+    // 每页多少条 不可随意篡改props值,由调用该组件的父组件执行 方法名定义成size_change
+    handle_size_change(val) {
+      this.$emit("size_change", val);
+    },
+    // 前往哪一页 不可随意篡改props值,由调用该组件的父组件执行 方法名定义成nun_change
+    handle_current_change(val) {
+      this.$emit("num_change", val);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.table_pagination {
+  width: var(--pagination-width);
+  height: 5vh;
+  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
diff --git a/src/components/publicModule/lkyTable.vue b/src/components/publicModule/lkyTable.vue
index 765172d..b203ddf 100644
--- a/src/components/publicModule/lkyTable.vue
+++ b/src/components/publicModule/lkyTable.vue
@@ -55,7 +55,7 @@
                   <el-link
                     :underline="false"
                     type="primary"
-                    @click="table_link(row)"
+                    @click="child_table_link(row)"
                   >
                     {{ row[val.prop] }}
                   </el-link>
@@ -87,6 +87,16 @@
                 {{ row[item.prop] }}
               </div>
             </template>
+            <!-- 如果item.link为true时，则该列单元格文字可点击 -->
+            <template v-else-if="item.link" #default="{ row }">
+              <el-link
+                :underline="false"
+                type="primary"
+                @click="table_link(row)"
+              >
+                {{ row[item.prop] }}
+              </el-link>
+            </template>
           </el-table-column>
         </template>
       </template>
@@ -132,7 +142,7 @@
 </template>
 <script>
 export default {
-  name: "lkyTable",
+  name: "LkyTable",
   props: {
     // 本组件盒子宽
     table_pagination_width: {
@@ -279,8 +289,13 @@ export default {
           return "#e55b5b";
       }
     },
+    // 二级表单元格点击事件
+    child_table_link(row) {
+      this.$emit("child_table_link", row);
+    },
+    // 一级表单元格点击事件
     table_link(row) {
-      this.$emit('table_link',row)
+      this.$emit("table_link", row);
     },
     // 每页多少条 不可随意篡改props值,由调用该组件的父组件执行 方法名定义成size_change
     handle_size_change(val) {
@@ -379,67 +394,39 @@ export default {
   height: 5vh;
   display: flex;
   flex-direction: row-reverse;
-  /deep/.el-input--suffix .el-input__inner {
-    color: #fff;
-    border: 0.1px solid #34a6a6;
-    border-radius: 0px;
-    background: rgba(0, 0, 0, 0);
-    width: 5vw;
-    height: 2.6vh;
-    line-height: 2.6vh;
+  /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-input__icon {
+  /deep/.el-pagination__total {
     color: #fff;
-    line-height: 2.6vh;
-    height: 2.6vh;
   }
-  /deep/.el-pagination {
-    margin-top: 1vh;
-    .el-pagination__total {
-      color: #fff;
-    }
-    .el-input__inner {
-      border-radius: 0px;
-      background: #3c4b4a;
-      border: 0.1px solid #277f79;
-      color: #fff;
-      height: 2.6vh;
-    }
-    .btn-prev {
-      border-radius: 0px;
-      background: #3c4b4a;
-      border: 0.1px solid #277f79;
-      color: #fff;
-      height: 2.6vh;
-    }
-    ul {
-      li {
-        border: 0.1px solid #277f79;
-        background: #3c4b4a;
-        color: #fff;
-        height: 2.6vh;
-      }
-    }
-    .btn-next {
-      border: 0.1px solid #277f79;
-      border-radius: 0px;
-      background: #3c4b4a;
-      color: #fff;
-      height: 2.6vh;
-    }
-    .el-pager {
-      li {
-        background: #3c4b4a !important;
-      }
-    }
-    .el-pagination__jump {
-      height: 2.6vh;
-      line-height: 2.6vh;
-      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 {
-    border: 0.1px solid #76eae4;
+    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
diff --git a/src/main.js b/src/main.js
index a79074a..1124cae 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,10 +7,12 @@ import store from './store'
 import Message from './components/message';
 import erupload from "./components/upload";
 import lkyTable from "./components/publicModule/lkyTable" // 本组件样式包含普通表格、分页
+import lkyPagination from "./components/publicModule/lkyPagination" // 本组件单独抽离分页样式
 Vue.use(ElementUI);
 Vue.use(Message)
 Vue.component('erupload', erupload)
 Vue.component('lkyTable', lkyTable)
+Vue.component('lkyPagination',lkyPagination)
 const vm = new Vue({
   el: '#app',
   router,
diff --git a/src/router/index.js b/src/router/index.js
index d421566..f1401dd 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,6 +4,7 @@ import box from '../components/box'
 // import Home from '../views/Home.vue'
 Vue.use(VueRouter)
 import systemManagement from './routes/systemManagement'
+import module from './routes/module'
 
 const routes = [
   {
@@ -73,11 +74,13 @@ const routes = [
             name:'applySupermarket',
             component: () => import('@/views/applySupermarket'),
           },
-          {
-            path:'module',
-            name:'module',
-            component: () => import('@/views/module'),
-          },
+          // 封装演示模块
+          ...module,
+          // {
+          //   path:'module',
+          //   name:'module',
+          //   component: () => import('@/views/module'),
+          // },
         ]
       },
       {
diff --git a/src/router/routes/module.js b/src/router/routes/module.js
new file mode 100644
index 0000000..56f942d
--- /dev/null
+++ b/src/router/routes/module.js
@@ -0,0 +1,26 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+// import Home from '../views/Home.vue'
+Vue.use(VueRouter)
+// 系统管理
+export default [
+    {
+        path: 'module',
+        name: 'module',
+        component: () => import('@/views/module'),
+        children: [
+          // 表格分页
+          {
+            path: 'tableModule',
+            name: 'tableModule',
+            component: () => import('@/views/module/components/tableModule'),
+          },
+          // 单独分页
+          {
+            path: 'paginationModule',
+            name: 'paginationModule',
+            component: () => import('@/views/module/components/paginationModule'),
+          },
+        ]
+      }
+]
\ No newline at end of file
diff --git a/src/utils/request.js b/src/utils/request.js
index bbddc92..56dd381 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -7,8 +7,8 @@ const request = axios.create({
   //baseURL: 'http://172.18.113.50:8080/zhapi',
   //baseURL: 'http://172.18.113.13:8080/zhapi', // 孙强
   //baseURL: 'http://192.168.0.188:8888/zhapi',
-  //baseURL: 'http://121.41.91.94:12002/zhapi',
-  baseURL: `http://${window.location.host}/zhapi`,
+  baseURL: 'http://121.41.91.94:12002/zhapi',
+  //baseURL: `http://${window.location.host}/zhapi`,
   timeout: 50000,
   headers: { 'content-type': 'application/json' },
 })
diff --git a/src/views/applySupermarket/personBack/index.vue b/src/views/applySupermarket/personBack/index.vue
index be5cbab..85a890d 100644
--- a/src/views/applySupermarket/personBack/index.vue
+++ b/src/views/applySupermarket/personBack/index.vue
@@ -326,54 +326,38 @@ export default {
   height: 6vh;
   display: flex;
   flex-direction: row-reverse;
-  //   border: 0.1px solid #2f6363;
-  //   background: #3c4b4a;
-  /deep/.el-pagination {
-    margin-top: 1vh;
-    margin-right: 1vw;
-    .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 .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 {
-    border: 0.1px solid #76eae4;
+    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.is-background .el-pager li:not(.disabled):hover {
+  /deep/.el-pagination__jump {
     color: #fff;
   }
 }
diff --git a/src/views/module/components/leftNav.vue b/src/views/module/components/leftNav.vue
new file mode 100644
index 0000000..cea0268
--- /dev/null
+++ b/src/views/module/components/leftNav.vue
@@ -0,0 +1,130 @@
+<template>
+  <!-- 系统管理左侧导航菜单 -->
+  <el-menu
+    ref="menu"
+    @select="select"
+    :default-active="active"
+    class="el-menu-vertical-demo"
+    @open="handleOpen"
+    @close="handleClose"
+    :collapse="isCollapse"
+  >
+    <!-- background-color="#f5f2e9"
+    text-color="#5aa4ae" -->
+    <!-- 一级导航 -->
+    <el-menu-item
+      @click="clickMenu(item)"
+      v-for="item in menuList"
+      :key="item.name"
+      :index="item.value"
+    >
+      <i>
+        <img :src="item.src" alt="" />
+      </i>
+      <span slot="title">{{ item.label }}</span>
+    </el-menu-item>
+  </el-menu>
+</template>
+<script>
+export default {
+  name: "LeftNav",
+  data() {
+    return {
+      isCollapse: false,
+      active: "1",
+      menu: [
+        // 导航数组
+        {
+          path: "/tableModule",
+          name: "tableModule",
+          label: "表格分页",
+          value: "1",
+          src: require("@/assets/companyFile/menu01.png"),
+        },
+        {
+          path: "/paginationModule",
+          name: "paginationModule",
+          label: "单独分页",
+          value: "2",
+          src: require("@/assets/companyFile/menu02.png"),
+        },
+      ],
+    };
+  },
+  watch: {
+    $route() {
+      this.setCurrentRoute();
+    },
+  },
+  computed: {
+    menuList() {
+      // 一级菜单导航
+      return this.menu.filter((item) => !item.children);
+    },
+  },
+  created() {
+    this.setCurrentRoute();
+    if (sessionStorage.getItem("navkeep")) {
+      this.active = sessionStorage.getItem("navkeep");
+    }
+  },
+  methods: {
+    // 点击跳转路由
+    clickMenu(val) {
+      this.$router.push({
+        name: val.name,
+      });
+    },
+    setCurrentRoute() {
+      this.active = this.$route.path; //监听到当前路由状态并激活当前菜单
+    },
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    select() {
+      sessionStorage.setItem("navkeep", this.$refs.menu.activeIndex);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  width: 100%; /* 保持和大的aside同宽 */
+  min-height: 98%; /* 固定侧边导航栏高度 */
+  background: url("~@/assets/companyFile/导航背景.png") no-repeat;
+  padding: 20px;
+  box-sizing: border-box;
+  background-size: 100% 100%;
+}
+.el-menu-vertical-demo.el-menu {
+  .el-menu-item {
+    width: 100%;
+    margin-top: 20px;
+    // margin-left: 17px;y
+    color: #fff;
+    font-size: 18px;
+    background: url("~@/assets/companyFile/921.png") no-repeat;
+    background-size: 100% 100%;
+    i {
+      margin-right: 10px;
+      width: 20px;
+      height: 20px;
+      img {
+        margin-bottom: 4px;
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+  .el-menu-item:focus,
+  .el-menu-item:hover {
+    /* 导航选项点击触碰效果 */
+    filter: brightness(150%);
+    text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/module/components/paginationModule.vue b/src/views/module/components/paginationModule.vue
new file mode 100644
index 0000000..42e5d58
--- /dev/null
+++ b/src/views/module/components/paginationModule.vue
@@ -0,0 +1,37 @@
+<!-- 仅做模块化展示使用 -->
+<template>
+  <div>
+    <lkyPagination
+      :page_sizes="page_sizes"
+      :pageSize="pageSize"
+      :pageNum="pageNum"
+      :total="total"
+      :pagination_width="pagination_width"
+    ></lkyPagination>
+  </div>
+</template>
+<script>
+export default {
+  name: "PaginationModule",
+  data() {
+    return {
+      page_sizes: [4, 6],
+      pageSize: 4,
+      pageNum: 1,
+      total: 16,
+      pagination_width: "50",
+    };
+  },
+  methods:{
+    // 分页--每页多少条
+    size_change(val) {
+      this.pageNum = 1;
+      this.pageSize = val;
+    },
+    // 分页--前往哪一页
+    num_change(val) {
+      this.pageNum = val;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/views/module/components/tableModule.vue b/src/views/module/components/tableModule.vue
new file mode 100644
index 0000000..4111b8b
--- /dev/null
+++ b/src/views/module/components/tableModule.vue
@@ -0,0 +1,203 @@
+<!-- 仅做模块化展示使用 -->
+<template>
+  <div>
+    <lkyTable
+      :table_pagination_width="table_pagination_width"
+      :table_pagination_height="table_pagination_height"
+      :table_data="table_data"
+      :table_height="table_height"
+      :table_select="table_select"
+      :table_index="table_index"
+      :color_list="color_list"
+      :child_color_list="child_color_list"
+      :table_columns="table_columns"
+      :table_operation="table_operation"
+      :table_operation_second="table_operation_second"
+      :operation_label="operation_label"
+      :operation_text="operation_text"
+      :operation_text_second="operation_text_second"
+      :page_sizes="page_sizes"
+      :pageSize="pageSize"
+      :pageNum="pageNum"
+      :total="total"
+      :pagination_width="pagination_width"
+      @child_table_link="child_table_link"
+      @open_event="open_event"
+      @size_change="size_change"
+      @num_change="num_change"
+    ></lkyTable>
+  </div>
+</template>
+<script>
+export default {
+  name: "TableModule",
+  data() {
+    return {
+      table_pagination_width: "72",
+      table_pagination_height: "60",
+      table_data: [
+        {
+          company: "宁波保润有限石化公司",
+          personNum: "22",
+          idcard: "34567",
+          unit: "最小单位",
+          level: "一级",
+          pic_child: "https://t12.baidu.com/it/u=2944858655,3260611328&fm=58",
+          pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
+          company_level: "审核通过",
+        },
+        {
+          company: "宁波保润石化公司",
+          personNum: "22",
+          idcard: "34567",
+          unit: "最小单位",
+          level: "四级",
+          pic_child: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
+          pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
+          company_level: "审核中",
+        },
+        {
+          company: "宁波保润石化公司",
+          personNum: "22",
+          idcard: "34567",
+          unit: "最小单位",
+          level: "一级",
+          pic: "https://img2.baidu.com/it/u=1735491135,1421708020&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1691514000&t=9b750206b13e5b42054a728b0e759fe5",
+          pic_child: "1222.png",
+          pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
+          company_level: "审核中",
+        },
+        {
+          company: "宁波保润石化公司",
+          personNum: "22",
+          idcard: "34567",
+          unit: "最小单位",
+          level: "三级",
+          pic_child: "1222.png",
+          pic: "https://t7.baidu.com/it/u=1211026933,587530743&fm=218&app=137&size=f242,150&n=0&f=JPEG&fmt=auto?s=D9934B90441845C2548365530300D0BA&sec=1691514000&t=0d3b6cf3971e24bff2a9ad9909868a3e",
+          pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
+          company_level: "预备审核",
+        },
+        {
+          company: "宁波保润石化公司",
+          personNum: "22",
+          idcard: "34567",
+          unit: "最小单位",
+          level: "一级",
+          pic_child: "1222.png",
+          pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
+          company_level: "预备审核",
+        },
+        {
+          company: "宁波保润石化公司",
+          personNum: "22",
+          idcard: "34567",
+          unit: "最小单位",
+          level: "二级",
+          pic: "1000.png",
+          pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
+          pic_child: "1222.png",
+          company_level: "审核驳回",
+        },
+      ],
+      table_height: "550", // 表格高度根据实际场景确定高度
+      table_select: false,
+      table_index: true,
+      child_color_list: ["审核驳回", "预备审核", "审核中", "审核通过"],
+      color_list: ["一级", "二级", "三级", "四级"],
+      table_columns: [
+        {
+          prop: "company_all",
+          label: "公司全览",
+          children: [
+            {
+              prop: "company",
+              label: "公司名称",
+              width: "180",
+            },
+            {
+              prop: "pic_child",
+              label: "个人照片",
+              width: "120",
+              picture: true,
+            },
+            {
+              prop: "personNum",
+              label: "公司人数",
+              width: "120",
+            },
+            {
+              prop: "idcard",
+              label: "公司id",
+              width: "90",
+            },
+            {
+              prop: "unit",
+              label: "公司单位",
+              width: "180",
+              link: true,
+            },
+            {
+              prop: "company_level",
+              label: "公司次等级",
+              width: "160",
+              color: true,
+            },
+          ],
+        },
+        {
+          prop: "level",
+          label: "公司等级",
+          width: "80",
+          color: true,
+        },
+        {
+          prop: "pic",
+          label: "公司照片",
+          width: "120",
+          picture: true,
+        },
+        {
+          prop: "pic_two",
+          label: "个人照片",
+          width: "100",
+          picture: true,
+        },
+      ],
+      table_operation: true,
+      table_operation_second: true,
+      operation_label: "操作",
+      operation_text: "详情",
+      operation_text_second: "编辑",
+      page_sizes: [4, 6],
+      pageSize: 4,
+      pageNum: 1,
+      total: 8,
+      pagination_width: "72",
+    };
+  },
+  methods: {
+    get_search() {
+      console.log("123");
+    },
+    // 表格详情点击事件
+    open_event(row) {
+      console.log("row456", row);
+    },
+    child_table_link(row) {
+      console.log("row777", row);
+    },
+    // 分页--每页多少条
+    size_change(val) {
+      this.pageNum = 1;
+      this.pageSize = val;
+      this.get_search();
+    },
+    // 分页--前往哪一页
+    num_change(val) {
+      this.pageNum = val;
+      this.get_search();
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/views/module/index.vue b/src/views/module/index.vue
index 18458f6..8d370c8 100644
--- a/src/views/module/index.vue
+++ b/src/views/module/index.vue
@@ -1,201 +1,43 @@
-<!-- 仅做模块化展示使用 -->
 <template>
+  <!-- 系统管理 -->
   <div>
-    <lkyTable
-      :table_pagination_width="table_pagination_width"
-      :table_pagination_height="table_pagination_height"
-      :table_data="table_data"
-      :table_height="table_height"
-      :table_select="table_select"
-      :table_index="table_index"
-      :color_list="color_list"
-      :child_color_list="child_color_list"
-      :table_columns="table_columns"
-      :table_operation="table_operation"
-      :table_operation_second="table_operation_second"
-      :operation_label="operation_label"
-      :operation_text="operation_text"
-      :operation_text_second="operation_text_second"
-      :page_sizes="page_sizes"
-      :pageSize="pageSize"
-      :pageNum="pageNum"
-      :total="total"
-      @table_link="table_link"
-      @open_event="open_event"
-      @size_change="size_change"
-      @num_change="num_change"
-    ></lkyTable>
+    <el-container>
+      <el-aside>
+        <LeftNav></LeftNav>
+      </el-aside>
+      <el-container>
+        <el-main>
+          <router-view></router-view>
+        </el-main>
+      </el-container>
+    </el-container>
   </div>
 </template>
+
 <script>
+import LeftNav from "./components/leftNav.vue";
 export default {
-  data() {
-    return {
-      table_pagination_width: "75",
-      table_pagination_height: "60",
-      table_data: [
-        {
-          company: "宁波保润有限石化公司",
-          personNum: "22",
-          idcard: "34567",
-          unit: "最小单位",
-          level: "一级",
-          pic_child: "https://t12.baidu.com/it/u=2944858655,3260611328&fm=58",
-          pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
-          company_level: "审核通过",
-        },
-        {
-          company: "宁波保润石化公司",
-          personNum: "22",
-          idcard: "34567",
-          unit: "最小单位",
-          level: "四级",
-          pic_child: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
-          pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
-          company_level: "审核中",
-        },
-        {
-          company: "宁波保润石化公司",
-          personNum: "22",
-          idcard: "34567",
-          unit: "最小单位",
-          level: "一级",
-          pic: "https://img2.baidu.com/it/u=1735491135,1421708020&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1691514000&t=9b750206b13e5b42054a728b0e759fe5",
-          pic_child: "1222.png",
-          pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
-          company_level: "审核中",
-        },
-        {
-          company: "宁波保润石化公司",
-          personNum: "22",
-          idcard: "34567",
-          unit: "最小单位",
-          level: "三级",
-          pic_child: "1222.png",
-          pic: "https://t7.baidu.com/it/u=1211026933,587530743&fm=218&app=137&size=f242,150&n=0&f=JPEG&fmt=auto?s=D9934B90441845C2548365530300D0BA&sec=1691514000&t=0d3b6cf3971e24bff2a9ad9909868a3e",
-          pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
-          company_level: "预备审核",
-        },
-        {
-          company: "宁波保润石化公司",
-          personNum: "22",
-          idcard: "34567",
-          unit: "最小单位",
-          level: "一级",
-          pic_child: "1222.png",
-          pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
-          company_level: "预备审核",
-        },
-        {
-          company: "宁波保润石化公司",
-          personNum: "22",
-          idcard: "34567",
-          unit: "最小单位",
-          level: "二级",
-          pic: "1000.png",
-          pic_two: "https://t12.baidu.com/it/u=3165178178,1926556480&fm=58",
-          pic_child: "1222.png",
-          company_level: "审核驳回",
-        },
-      ],
-      table_height: "550", // 表格高度根据实际场景确定高度
-      table_select: false,
-      table_index: true,
-      child_color_list: ["审核驳回", "预备审核", "审核中", "审核通过"],
-      color_list: ["一级", "二级", "三级", "四级"],
-      table_columns: [
-        {
-          prop: "company_all",
-          label: "公司全览",
-          children: [
-            {
-              prop: "company",
-              label: "公司名称",
-              width: "180",
-            },
-            {
-              prop: "pic_child",
-              label: "个人照片",
-              width: "120",
-              picture: true,
-            },
-            {
-              prop: "personNum",
-              label: "公司人数",
-              width: "120",
-            },
-            {
-              prop: "idcard",
-              label: "公司id",
-              width: "90",
-            },
-            {
-              prop: "unit",
-              label: "公司单位",
-              width: "180",
-              link: true,
-            },
-            {
-              prop: "company_level",
-              label: "公司次等级",
-              width: "160",
-              color: true,
-            },
-          ],
-        },
-        {
-          prop: "level",
-          label: "公司等级",
-          width: "80",
-          color: true,
-        },
-        {
-          prop: "pic",
-          label: "公司照片",
-          width: "120",
-          picture: true,
-        },
-        {
-          prop: "pic_two",
-          label: "个人照片",
-          width: "100",
-          picture: true,
-        },
-      ],
-      table_operation: true,
-      table_operation_second: true,
-      operation_label: "操作",
-      operation_text: "详情",
-      operation_text_second:'编辑',
-      page_sizes: [4, 6],
-      pageSize: 4,
-      pageNum: 1,
-      total: 8,
-      pagination_width: "75",
-    };
+  name: "systemManagement",
+  components: {
+    LeftNav,
   },
-  methods: {
-    get_search() {
-      console.log("123");
-    },
-    // 表格详情点击事件
-    open_event(row) {
-      console.log("row456", row);
-    },
-    table_link(row) {
-      console.log("row777", row);
-    },
-    // 分页--每页多少条
-    size_change(val) {
-      this.pageNum = 1;
-      this.pageSize = val;
-      this.get_search();
-    },
-    // 分页--前往哪一页
-    num_change(val) {
-      this.pageNum = val;
-      this.get_search();
-    },
+  data() {
+    return {};
   },
 };
-</script>
\ No newline at end of file
+</script>
+<style lang="less" scoped>
+.el-container {
+  height: calc(100vh - 95px); /* 控制整体布局高度,用于适配 */
+  .el-aside {
+    margin-top: 15px; /* 给左上角logo留空间 -> 后面固定都给15px */
+    margin-left: 15px;
+    width: 11% !important; /* 控制侧边导航栏宽度 */
+    height: 100%;
+  }
+  .el-main {
+    margin: 16px 15px 0px 15px; /* 固定都给15px */
+    padding: 0px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/systemManagement/safeIndex/index.vue b/src/views/systemManagement/safeIndex/index.vue
index 51ae748..daabed9 100644
--- a/src/views/systemManagement/safeIndex/index.vue
+++ b/src/views/systemManagement/safeIndex/index.vue
@@ -324,7 +324,7 @@ export default {
 /* card统一样式 */
 .el-card.box-card.is-always-shadow {
   border: 0px;
-  height: 88.5vh; /* 控制card布局高度,用于适配 */
+  height: 88vh; /* 控制card布局高度,用于适配 */
   position: relative;
   background: url("~@/assets/companyFile/22136.png") no-repeat !important;
   background-size: 100% 100% !important;