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] =?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;