pref:修改整体页面和路由配置

sample-form-manager-ui/admin/src/api/device.js

@@ -63,3 +63,12 @@ export const saveDeviceEnable = (data) => {
     data,
   });
 };
+
+// 删除设备
+export const delDevice = (params) => {
+  return request({
+    url: `/sampleform/device/delete`,
+    method: "get",
+    params,
+  });
+};

sample-form-manager-ui/admin/src/assets/css/common.less

@@ -30,12 +30,25 @@
 .bgg {
   background-color: #1bbc9b;
 }
-
+.bgw{
+  background-color: #fff;
+}
 /* 版心 */
 .container {
   width: 1200px;
 }
-
+.container_width {
+  width: 1880px;
+}
+.container_height {
+  height: 820px;
+}
+.w-full{
+  width:100%;
+}
+.h-full{
+  height:100%
+}
 /* 弹性布局 */
 .flex {
   display: flex;
@@ -129,7 +142,9 @@
 .ml25 {
   margin-left: 25px;
 }
-
+.mr5 {
+  margin-right: 5px;
+}
 .mr10 {
   margin-right: 10px;
 }
@@ -304,22 +319,6 @@
   text-align: right;
 }
 
-/* title */
-.color_title {
-  margin-left: 15px;
-  position: relative;
-  margin-bottom: 15px;
-}
-.color_title::before {
-  content: "";
-  width: 4px;
-  height: 20px;
-  position: absolute;
-  top: 0px;
-  left: -16px;
-  background-color: #1890ff;
-}
-
 /**
     element-ui
 */
@@ -351,9 +350,12 @@
 .gutter {
   width: 6px !important;
 }
-
+.auto-scroll{
+  overflow-y: auto;
+}
 ::-webkit-scrollbar {
   width: 6px;
+  height: 6px;
   overflow-y: auto;
 }
 
@@ -364,7 +366,7 @@
 
 ::-webkit-scrollbar-track {
   border-radius: 6px;
-  background: rgba(0, 0, 0, 0);
+  background: rbga(0, 0, 0, 0);
 }
 
 .autoWidth {
@@ -387,29 +389,47 @@
 .el-tooltip__popper {
   max-width: 20%;
 }
-.el-drawer__header{
+.el-drawer__header {
   margin-bottom: 20px !important;
 }
-.el-drawer__body{
-  border-top:1px solid #ececec;
+.el-drawer__body {
+  border-top: 1px solid #ececec;
 }
-.el-button--primary{
+.el-button--primary {
   background: linear-gradient(90deg, #5ab6ff, #2e9aff) !important;
   border: none !important;
   border-color: transparent !important;
 }
-.el-dialog__header{
-  .el-dialog__title{
-    color: #1890FF !important;
+.el-dialog__header {
+  .el-dialog__title {
+    color: #1890ff !important;
     font-size: 18px;
     font-weight: bold;
   }
-  .el-dialog__close{
+  .el-dialog__close {
     color: #188fff !important;
     font-size: 26px;
     font-weight: bold;
   }
 }
-.el-pagination__jump{
+.el-pagination__jump {
   margin-left: 0px !important;
-}
+}
\ No newline at end of file
+.el-tabs__nav-scroll {
+  padding-left: 15px;
+  .tab-label {
+    font-weight: bold;
+    color: rgba(0, 0, 0, 0.65);
+  }
+  .is-active {
+    .tab-label {
+      color:#2681e8
+    }
+  }
+}
+.el-tabs__header{
+  margin: 0px !important;
+}
+// .el-tabs__content {
+//   padding: 0px 15px 15px 15px;
+// }

sample-form-manager-ui/admin/src/components/TabHeader.vue

+<template>
+  <div class="tab-header">
+    <i v-if="icon" :class="['mr5', 'primary', icon]"></i>
+    <span class="label">{{ label }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    icon: {
+      type: String,
+      default: "",
+    },
+    label: {
+      type: String,
+      default: "",
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tab-header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 40px;
+  padding: 0px 15px;
+  font-size: 14px;
+  position: relative;
+  cursor: default;
+  &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 2px;
+    background-color: #e4e7ed;
+    z-index: 1;
+  }
+  .label {
+    font-weight: bold;
+    color: rgba(0, 0, 0, 0.65);
+  }
+}
+</style>
\ No newline at end of file

sample-form-manager-ui/admin/src/pages/hardware/NumberWriteDevice.vue

 <template>
-  <div class="device">
-    <el-card shadow="never">
-      <div slot="header">
-        <span>样表设备</span>
-      </div>
+  <div class="device bgw flex flexc">
+    <TabHeader icon="el-icon-notebook-2" label="数字填单设备"></TabHeader>
+    <div class="flex1 pd15 auto-scroll">
       <TableHeader>
         <div slot="left">
           <!-- <el-button size="small" type="primary" @click="handleAdd"
@@ -141,7 +139,7 @@
           </el-table-column>
           <el-table-column align="center" prop="deviceRemark" label="备注">
           </el-table-column>
-          <el-table-column align="center" label="操作" width="160">
+          <el-table-column align="center" label="操作" width="200">
             <template slot-scope="scope">
               <div class="flex jca">
                 <span
@@ -162,9 +160,9 @@
                 <span class="primary pointer" @click="handleEdit(scope.row)"
                   >编辑</span
                 >
-                <!-- <span class="delete pointer" @click="handleDel(scope.row.id)"
+                <span class="delete pointer" @click="handleDel(scope.row.id)"
                   >删除</span
-                > -->
+                >
               </div>
             </template>
           </el-table-column>
@@ -177,7 +175,8 @@
         @currentChange="changePagination"
         @sizeChange="changeSize"
       ></Pagination>
-    </el-card>
+    </div>
+
     <!-- 新增设备 -->
     <AddDevice
       :dict="dict"
@@ -196,10 +195,12 @@ import TableHeader from "@/components/TableHeader.vue";
 import Pagination from "@/components/Pagination.vue";
 import AddMatter from "./modal/AddMatter.vue";
 import AddDevice from "./modal/AddDevice.vue";
+import TabHeader from "@/components/TabHeader.vue";
 import {
   getDeviceList,
   saveDeviceEnable,
   saveDeviceActive,
+  delDevice,
 } from "@/api/device";
 import local from "@/utils/local";
 export default {
@@ -208,6 +209,7 @@ export default {
     AddDevice,
     AddMatter,
     Pagination,
+    TabHeader,
   },
   data() {
     return {
@@ -326,7 +328,12 @@ export default {
         type: "warning",
       })
         .then(async () => {
-          console.log(id);
+          let res = await delDevice({ id });
+          let { code, msg } = res.data;
+          if (code == 1) {
+            this.$message.success(msg);
+            this.getDeviceList();
+          }
         })
         .catch(() => {
           console.log("取消成功！");
@@ -359,11 +366,7 @@ export default {
 <style lang="less" scoped>
 .device {
   width: 100%;
-  min-height: 100%;
-  display: flex;
-  :deep(.el-card) {
-    height: auto;
-  }
+  height: 100%;
   .select {
     width: 220px !important;
   }

sample-form-manager-ui/admin/src/pages/hardware/modal/AddDevice.vue

@@ -159,10 +159,10 @@
         </el-row>
       </el-form>
       <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="handleReset">重 置</el-button>
         <el-button size="small" type="primary" @click="handleOk"
           >确 定</el-button
         >
-        <el-button size="small" @click="handleReset">重 置</el-button>
       </span>
     </el-dialog>
   </div>

sample-form-manager-ui/admin/src/pages/jump/jump.vue

@@ -17,15 +17,16 @@ export default {
     this.getInfo();
   },
   methods: {
-    ...mapMutations(["SET_sysName", "SET_sysLogo", "SET_token"]),
+    ...mapMutations(["SET_sysName", "SET_sysLogo", "SET_token", "SET_path"]),
     // 获取token和站点信息
     async getInfo() {
-      let { token, siteid, sysName, sysLogo } = this.$route.query;
+      let { token, siteid, sysName, sysLogo, path } = this.$route.query;
       if (token) {
         local.setLocal("sampleSiteId", siteid);
         this.SET_token(token);
         this.SET_sysName(sysName);
         this.SET_sysLogo(sysLogo);
+        this.SET_path(path);
         calcMenu();
         this.$router.push("/basicsset");
       } else {

sample-form-manager-ui/admin/src/pages/layouts/Layouts.vue

@@ -21,8 +21,23 @@
         >
       </el-breadcrumb>
     </div> -->
-    <div class="out-box flex1">
-      <router-view></router-view>
+    <div class="main flex1 flex flexc">
+      <!-- <el-tabs :value="activeKey" @tab-click="changeRouter">
+        <el-tab-pane v-for="v in subMenus" :key="v.path" :name="v.path">
+          <template slot="label">
+            <i v-if="v.meta.icon" :class="['mr5', 'primary', v.meta.icon]"></i>
+            <span class="tab-label">{{ v.meta.title }}</span>
+          </template>
+        </el-tab-pane>
+      </el-tabs> -->
+      <div class="out-box flex1">
+        <keep-alive>
+          <!-- 需要缓存的视图组件 -->
+          <router-view v-if="$route.meta.keepAlive"> </router-view>
+        </keep-alive>
+        <!-- 不需要缓存的视图组件 -->
+        <router-view v-if="!$route.meta.keepAlive"> </router-view>
+      </div>
     </div>
   </div>
 </template>
@@ -32,6 +47,7 @@ import Header from "./components/Header.vue";
 import { getdeptList } from "@/api/department";
 import { mapMutations, mapState } from "vuex";
 import local from "@/utils/local";
+import { findBottomSubarrays } from "@/utils";
 export default {
   components: {
     Header,
@@ -41,20 +57,25 @@ export default {
       systemName: process.env.VUE_APP_sysName,
       portalUrl: process.env.VUE_APP_API_portal_URL,
       breads: [],
+      subMenus: [],
     };
   },
   created() {
+    // this.getSubMenus();
     document.title = this.sysName ? this.sysName : this.systemName; // 设置项目标题
-    this.calcBreads();
+    // this.calcBreads();
     this.getdeptList();
   },
-  watch: {
-    "$route.path"() {
-      this.calcBreads();
-    },
-  },
+  // watch: {
+  //   "$route.path"() {
+  //     this.calcBreads();
+  //   },
+  // },
   computed: {
     ...mapState(["sysName"]),
+    activeKey() {
+      return this.$route.path;
+    },
   },
   methods: {
     ...mapMutations(["SET_deptList"]),
@@ -71,6 +92,18 @@ export default {
       this.breads = [...temp, ...r];
     },
 
+    // 获取当前顶层路由下的所有子路由
+    getSubMenus() {
+      let path = this.$route?.meta.activeMenu
+        ? this.$route.meta.activeMenu
+        : this.$route.path;
+      let options = this.$router.options.routes[0].children;
+      let curRouters = options.filter((v) => v.path == path);
+      this.subMenus = findBottomSubarrays(curRouters).filter(
+        (v) => !v.meta.hidden
+      );
+    },
+
     // 获取部门列表
     async getdeptList() {
       let res = await getdeptList({
@@ -85,6 +118,10 @@ export default {
         this.SET_deptList(data.data);
       }
     },
+
+    changeRouter(e) {
+      this.$router.push(e.name);
+    },
   },
 };
 </script>
@@ -94,16 +131,22 @@ export default {
   width: 100%;
   min-width: 1620px;
   height: 100%;
-  padding-bottom: 10px;
+  padding-bottom: 15px;
   // .crumbs {
   //   margin: 10px 0px;
   //   width: 98%;
   // }
-  .out-box {
+
+  .main {
     width: 98%;
-    margin-top: 10px;
+    margin-top: 15px;
+    // padding-bottom: 15px;
     border-radius: 4px;
-    background-color: #fff;
+    overflow-y: auto;
+    // background-color: #fff;
+  }
+  .out-box {
+    // padding: 15px;
     overflow-y: auto;
   }
 }

sample-form-manager-ui/admin/src/pages/layouts/components/Header.vue

@@ -19,16 +19,43 @@
         router
         text-color="rgba(254, 254, 254, 0.65)"
       >
-        <el-menu-item v-for="v in menus" :key="v.path" :index="v.path">
+        <template v-for="v in menus">
+          <!-- 有子路由 -->
+          <el-submenu
+            v-if="!v.hideChildrenInMenu && v.children.length"
+            :key="'a' + v.path"
+            :index="v.path"
+          >
+            <template slot="title">
+              <i v-if="v.meta && v.meta.icon" :class="v.meta.icon"></i>
+              {{ v.meta.title }}
+            </template>
+            <el-menu-item
+              v-for="item in v.children"
+              :key="item.path"
+              :index="item.path"
+            >
+              <i v-if="item.meta && item.meta.icon" :class="item.meta.icon"></i>
+              {{ item.meta && item.meta.title }}
+            </el-menu-item>
+          </el-submenu>
+          <!-- 单个路由 -->
+          <el-menu-item v-else :key="v.path" :index="v.path">
+            <i v-if="v.meta && v.meta.icon" :class="v.meta.icon"></i>
+            {{ v.meta.title }}
+          </el-menu-item>
+        </template>
+
+        <!-- <el-menu-item v-for="v in menus" :key="v.path" :index="v.path">
           <i :class="v.meta.icon"></i>
           {{ v.meta.title }}
-        </el-menu-item>
+        </el-menu-item> -->
       </el-menu>
     </div>
     <!-- 返回门户 -->
     <div class="back-btn">
       <el-tooltip effect="dark" content="返回门户" placement="bottom">
-        <a class="pointer" :href="portal">
+        <a class="pointer" :href="portal + path">
           <i class="el-icon-s-home"></i> 返回门户
         </a>
       </el-tooltip>
@@ -47,7 +74,7 @@ export default {
     return {
       systemName: process.env.VUE_APP_sysName,
       api: process.env.VUE_APP_API_IMG_URL,
-      portal: process.env.VUE_APP_API_portal_URL + "/#/home/siteArrange",
+      portal: process.env.VUE_APP_API_portal_URL,
     };
   },
   computed: {
@@ -59,7 +86,7 @@ export default {
       }
       return path;
     },
-    ...mapState(["menus", "sysName", "sysLogo"]),
+    ...mapState(["menus", "sysName", "sysLogo", "path"]),
   },
   created() {},
   methods: {
@@ -78,6 +105,7 @@ export default {
   // background-color: #2681e8;
   background: linear-gradient(90deg, #1845c6 0%, #2999ff 100%);
   color: #fff;
+  flex-shrink: 0;
   .left {
     height: 100%;
   }
@@ -93,31 +121,66 @@ export default {
   }
 }
 /deep/.el-menu {
-  height: 64px !important;
-  border: none !important;
-  background-color: transparent;
-}
-/deep/.el-menu-item {
   height: 100% !important;
   border: none !important;
-  display: flex;
-  align-items: center;
+  background-color: transparent;
   i {
     color: rgba(254, 254, 254, 0.65);
   }
+  .el-menu-item {
+    height: 100% !important;
+    border: none !important;
+    display: flex;
+    align-items: center;
+    color: rgba(254, 254, 254, 0.65);
+
+    &:hover {
+      // background-color: transparent !important;
+      color: #fff !important;
+      background-color: #1890ff !important;
+      // border-bottom: 2px solid #fff !important;
+    }
+  }
+}
+/deep/.el-submenu {
+  height: 100% !important;
+  .el-submenu__title {
+    height: 100% !important;
+    display: flex;
+    align-items: center;
+    color: rgba(254, 254, 254, 0.65) !important;
+    border: none !important;
+    &:hover {
+      // background-color: transparent !important;
+      color: #fff !important;
+      background-color: #1890ff !important;
+      // border-bottom: 2px solid #fff !important;
+    }
+  }
+}
+.el-menu--horizontal .el-menu .el-menu-item {
+  color: #909399;
   &:hover {
-    // background-color: transparent !important;
-    background-color: #1890ff !important;
-    color: #fff !important;
-    // border-bottom: 2px solid #fff !important;
+    i {
+      color: #1890ff;
+    }
+    color: #1890ff;
   }
 }
 
+.el-menu--horizontal .el-menu .el-menu-item.is-active {
+  color: #1890ff !important;
+}
 /deep/.is-active {
-  border: none !important;
   // border-bottom: 2px solid #fff !important;
   color: #fff !important;
   // background-color: transparent !important;
   background-color: #1890ff !important;
+  .el-submenu__title {
+    border: none !important;
+    color: #fff !important;
+    // background-color: transparent !important;
+    background-color: #1890ff !important;
+  }
 }
 </style>
\ No newline at end of file

sample-form-manager-ui/admin/src/pages/software/basics/BasicsSet.vue

 <template>
-  <div class="basics-set">
-    <el-card class="box-card">
-      <div slot="header" class="clearfix">
-        <span>样表基础设置</span>
-      </div>
+  <div class="basics-set bgw flex flexc">
+    <TabHeader icon="el-icon-notebook-2" label="样表基础设置"></TabHeader>
+    <div class="pd15 flex1 auto-scroll">
       <div class="header">
         <span class="mr15 title">热门搜索词汇</span>
         <span class="tips"
@@ -62,15 +60,18 @@
           >确 定
         </el-button>
       </div>
-    </el-card>
+    </div>
   </div>
 </template>
 
 <script>
 import { getBaseSetInfo, saveBaseSet } from "@/api/baseSet";
 import local from "@/utils/local";
-
+import TabHeader from "@/components/TabHeader.vue";
 export default {
+  components: {
+    TabHeader,
+  },
   data() {
     return {
       siteId: local.getLocal("sampleSiteId")
@@ -172,18 +173,13 @@ export default {
 <style lang="less" scoped>
 .basics-set {
   width: 100%;
-  min-height: 100%;
-  display: flex;
+  height: 100%;
   .title {
     font-size: 15px;
     color: #000;
   }
 }
 
-:deep(.el-card) {
-  height: auto;
-}
-
 .header {
   .tips {
     font-size: 14px;

sample-form-manager-ui/admin/src/pages/software/librarymanage/LibraryManage.vue

 <template>
-  <div class="library-manage">
-    <el-card class="box-card" shadow="never">
-      <div slot="header" class="clearfix">
-        <span>公共库管理</span>
-      </div>
+  <div class="library-manage bgw flex flexc">
+    <TabHeader icon="el-icon-notebook-2" label="公共库管理"></TabHeader>
+    <div class="pd15 flex1 auto-scroll">
       <TableHeader>
         <div slot="left">
           <!--          <el-button size="small" type="primary" @click="handleAddMaterials"
@@ -113,7 +111,8 @@
         @currentChange="changePagination"
         @sizeChange="changeSize"
       ></Pagination>
-    </el-card>
+    </div>
+
     <!-- 添加材料 -->
     <!--    <AddMaterals
       ref="AddMaterals"
@@ -132,6 +131,7 @@
 import TableHeader from "@/components/TableHeader.vue";
 import PreviewMaterals from "./modal/PreviewMaterals.vue";
 import Pagination from "@/components/Pagination.vue";
+import TabHeader from "@/components/TabHeader.vue";
 import { getPubdatumList, delPubdatum } from "@/api/libray";
 import { mapGetters } from "vuex";
 export default {
@@ -139,6 +139,7 @@ export default {
     TableHeader,
     PreviewMaterals,
     Pagination,
+    TabHeader,
   },
   data() {
     return {
@@ -264,12 +265,8 @@ export default {
 
 <style lang="less" scoped>
 .library-manage {
-  display: flex;
   width: 100%;
-  min-height: 100%;
-  :deep(.el-card) {
-    height: auto;
-  }
+  height: 100%;
   .short {
     overflow: hidden;
     text-overflow: ellipsis;

sample-form-manager-ui/admin/src/pages/software/materials/MaterialsManage.vue

 <template>
-  <div class="materias-manage flex">
-    <div class="left">
-      <el-card class="box-card" shadow="never">
-        <div slot="header">
-          <span>事项列表</span>
-        </div>
+  <div class="materias-manage flex jcb">
+    <div class="left h-full bgw flex flexc">
+      <TabHeader icon="el-icon-notebook-2" label="事项列表"></TabHeader>
+      <div class="pd15 flex1 auto-scroll">
         <TableHeader>
           <div slot="left">
             <el-button size="small" type="primary" @click="setCurrent">{{
@@ -108,13 +106,11 @@
           @currentChange="leftChangePagination"
           @sizeChange="leftChangeSize"
         ></Pagination>
-      </el-card>
+      </div>
     </div>
-    <div class="right">
-      <el-card class="box-card" shadow="never">
-        <div slot="header">
-          <span>材料列表 </span>
-        </div>
+    <div class="right h-full bgw flex flexc">
+      <TabHeader icon="el-icon-notebook-2" label="材料列表"></TabHeader>
+      <div class="pd15 flex1 auto-scroll">
         <!-- 内容 -->
         <TableHeader>
           <div slot="left">
@@ -264,39 +260,39 @@
           @currentChange="rightChangePagination"
           @sizeChange="rightChangeSize"
         ></Pagination>
-      </el-card>
-    </div>
-    <!-- 新增材料 -->
-    <AddMaterials
-      ref="AddMaterials"
-      :addMaterialsVisible.sync="addMaterialsVisible"
-      :title="title"
-      @addSuccess="addSuccess"
-    ></AddMaterials>
-    <!-- 预览材料 -->
-    <PreviewMaterials
-      :drawer.sync="drawer"
-      :materialsInfo="materialsInfo"
-    ></PreviewMaterials>
+      </div>
+      <!-- 新增材料 -->
+      <AddMaterials
+        ref="AddMaterials"
+        :addMaterialsVisible.sync="addMaterialsVisible"
+        :title="title"
+        @addSuccess="addSuccess"
+      ></AddMaterials>
+      <!-- 预览材料 -->
+      <PreviewMaterials
+        :drawer.sync="drawer"
+        :materialsInfo="materialsInfo"
+      ></PreviewMaterials>
 
-    <!-- 公共库 -->
-    <CommonLib
-      ref="CommonLib"
-      :matterId="activeDep.id"
-      @ok="addSuccess"
-      :libVisible.sync="libVisible"
-    ></CommonLib>
-    <!-- 新增文件夹 -->
-    <AddFolders
-      ref="AddFolders"
-      :addFolderVisible.sync="addFolderVisible"
-    ></AddFolders>
-    <!-- 文件夹 -->
-    <FolderList
-      ref="FolderList"
-      @addSuccess="materialsToFolderOk"
-      :folderListVisible.sync="folderListVisible"
-    ></FolderList>
+      <!-- 公共库 -->
+      <CommonLib
+        ref="CommonLib"
+        :matterId="activeDep.id"
+        @ok="addSuccess"
+        :libVisible.sync="libVisible"
+      ></CommonLib>
+      <!-- 新增文件夹 -->
+      <AddFolders
+        ref="AddFolders"
+        :addFolderVisible.sync="addFolderVisible"
+      ></AddFolders>
+      <!-- 文件夹 -->
+      <FolderList
+        ref="FolderList"
+        @addSuccess="materialsToFolderOk"
+        :folderListVisible.sync="folderListVisible"
+      ></FolderList>
+    </div>
   </div>
 </template>
 
@@ -308,6 +304,7 @@ import CommonLib from "./modal/CommonLib.vue";
 import Pagination from "@/components/Pagination.vue";
 import AddFolders from "./modal/AddFolders.vue";
 import FolderList from "./modal/FolderList.vue";
+import TabHeader from "@/components/TabHeader.vue";
 import { getWriteMatterList } from "@/api/matter";
 import {
   getMaterialsList,
@@ -325,6 +322,7 @@ export default {
     Pagination,
     AddFolders,
     FolderList,
+    TabHeader,
   },
   data() {
     return {
@@ -580,7 +578,7 @@ export default {
 <style lang="less" scoped>
 .materias-manage {
   width: 100%;
-  min-height: 100%;
+  height: 100%;
   .short {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -601,11 +599,11 @@ export default {
 }
 
 .left {
-  width: 40%;
-  height: auto;
+  width: 39%;
+  border-radius: 4px;
 }
 .right {
-  width: 60%;
-  height: auto;
+  width: 59%;
+  border-radius: 4px;
 }
 </style>
\ No newline at end of file

sample-form-manager-ui/admin/src/pages/software/matter/MatterManage.vue

 <template>
-  <div class="matter-manage flex">
+  <div class="matter-manage flex jcb">
     <!-- 左 -->
-    <div class="left">
-      <el-card class="box-card" shadow="never">
-        <div slot="header">
-          <span>样表系统事项列表</span>
-        </div>
+    <div class="left h-full bgw flex flexc">
+      <TabHeader icon="el-icon-notebook-2" label="样表系统事项列表"></TabHeader>
+      <div class="pd15 flex1 auto-scroll">
         <TableHeader>
           <div slot="left">
             <el-button size="small" type="primary" @click="handleAddMatter"
@@ -147,14 +145,20 @@
           @currentChange="leftChangePagination"
           @sizeChange="leftChangeSize"
         ></Pagination>
-      </el-card>
+      </div>
+      <!-- 新增事项 -->
+      <AddMatter
+        ref="AddMatter"
+        :addMatterVisible.sync="addMatterVisible"
+        :departmentList="deptList"
+        :title="title"
+        @addMatter="getWriteMatterList"
+      ></AddMatter>
     </div>
     <!-- 右 -->
-    <div class="right">
-      <el-card class="box-card" shadow="never">
-        <div slot="header">
-          <span>站点事项列表 </span>
-        </div>
+    <div class="right h-full bgw flex flexc">
+      <TabHeader icon="el-icon-notebook-2" label="站点事项列表"></TabHeader>
+      <div class="pd15 flex1 auto-scroll">
         <!-- 内容 -->
         <TableHeader>
           <div slot="left">
@@ -264,16 +268,8 @@
           @currentChange="rightChangePagination"
           @sizeChange="rightChangeSize"
         ></Pagination>
-      </el-card>
+      </div>
     </div>
-    <!-- 新增事项 -->
-    <AddMatter
-      ref="AddMatter"
-      :addMatterVisible.sync="addMatterVisible"
-      :departmentList="deptList"
-      :title="title"
-      @addMatter="getWriteMatterList"
-    ></AddMatter>
   </div>
 </template>
 
@@ -281,6 +277,7 @@
 import TableHeader from "@/components/TableHeader.vue";
 import AddMatter from "./modal/AddMatter.vue";
 import Pagination from "@/components/Pagination.vue";
+import TabHeader from "@/components/TabHeader.vue";
 import { mapGetters } from "vuex";
 import {
   // getMatterList,
@@ -296,6 +293,7 @@ export default {
     TableHeader,
     AddMatter,
     Pagination,
+    TabHeader,
   },
   data() {
     return {
@@ -518,8 +516,7 @@ export default {
 <style lang="less" scoped>
 .matter-manage {
   width: 100%;
-  min-height: 100%;
-  display: flex;
+  height: 100%;
   .short {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -536,11 +533,11 @@ export default {
 //   height: 550px;
 // }
 .left {
-  width: 50%;
-  height: auto;
+  width: 49%;
+  border-radius: 4px;
 }
 .right {
-  width: 50%;
-  height: auto;
+  width: 49%;
+  border-radius: 4px;
 }
 </style>

sample-form-manager-ui/admin/src/pages/software/skinManage/SkinManage.vue

 <template>
-  <div class="skin-set">
-    <el-card class="box-card">
-      <div slot="header" class="clearfix">
-        <span>皮肤管理</span>
-      </div>
+  <div class="skin-set bgw flex flexc">
+    <TabHeader icon="el-icon-notebook-2" label="皮肤管理"></TabHeader>
+    <div class="pd15 flex1 auto-scroll">
       <!-- 皮肤列表 -->
       <div class="skin-box">
         <div class="skin-category">
@@ -32,28 +30,29 @@
           </div>
         </div>
       </div>
-
-      <!-- 图片预览 -->
-      <el-image-viewer
-        v-if="previewImg"
-        :on-close="
-          () => {
-            (previewImg = false), (previewUrl = '');
-          }
-        "
-        :url-list="previewUrl"
-      />
-    </el-card>
+    </div>
+    <!-- 图片预览 -->
+    <el-image-viewer
+      v-if="previewImg"
+      :on-close="
+        () => {
+          (previewImg = false), (previewUrl = '');
+        }
+      "
+      :url-list="previewUrl"
+    />
   </div>
 </template>
 
 <script>
 import local from "@/utils/local";
 import ElImageViewer from "element-ui/packages/image/src/image-viewer";
+import TabHeader from "@/components/TabHeader.vue";
 import { getSkinList, useSkin } from "@/api/skin";
 export default {
   components: {
     ElImageViewer,
+    TabHeader,
   },
   data() {
     return {
@@ -140,13 +139,10 @@ export default {
 
 <style lang="less" scoped>
 .skin-set {
-  display: flex;
   width: 100%;
-  min-height: 100%;
-}
-:deep(.el-card) {
-  height: auto;
+  height: 100%;
 }
+
 .skin-category {
   margin-bottom: 30px;
 }

sample-form-manager-ui/admin/src/pages/system/System.vue

 <template>
-  <div class="system flex flexc">
+  <div class="system bgw flex flexc">
     <el-tabs :value="activeKey" @tab-click="changeRouter">
-      <el-tab-pane label="系统参数" name="/system/parameter"></el-tab-pane>
-      <el-tab-pane label="任务信息" name="/system/task"></el-tab-pane>
-      <el-tab-pane label="操作日志" name="/system/systemlogs"></el-tab-pane>
+      <el-tab-pane v-for="v in subMenus" :key="v.path" :name="v.path">
+        <template slot="label">
+          <i v-if="v.meta.icon" :class="['mr5', 'primary', v.meta.icon]"></i>
+          <span class="tab-label">{{ v.meta.title }}</span>
+        </template>
+      </el-tab-pane>
     </el-tabs>
     <div class="system-out-box flex1">
       <router-view></router-view>
@@ -12,16 +15,36 @@
 </template>
 
 <script>
+import { findBottomSubarrays } from "@/utils";
 export default {
+  data() {
+    return {
+      subMenus: [],
+    };
+  },
   computed: {
     activeKey() {
       return this.$route.path;
     },
   },
+  created() {
+    this.getSubMenus();
+  },
   methods: {
     changeRouter(e) {
       this.$router.push(e.name);
     },
+    // 获取当前顶层路由下的所有子路由
+    getSubMenus() {
+      let path = this.$route?.meta.activeMenu
+        ? this.$route.meta.activeMenu
+        : this.$route.path;
+      let options = this.$router.options.routes[0].children;
+      let curRouters = options.filter((v) => v.path == path);
+      this.subMenus = findBottomSubarrays(curRouters).filter(
+        (v) => !v.meta.hidden
+      );
+    },
   },
 };
 </script>
@@ -34,11 +57,8 @@ export default {
   width: 100%;
   height: 100%;
   .system-out-box {
-    padding: 0px 15px 15px 15px;
+    padding: 15px;
     overflow-y: auto;
   }
-  /deep/.ant-tabs-nav-container {
-    border-bottom: 1px solid #f0f0f0 !important;
-  }
 }
 </style>
\ No newline at end of file

sample-form-manager-ui/admin/src/pages/system/task/TaskSet.vue

@@ -15,7 +15,7 @@
           v-model="searchVal"
           style="width: 200px"
           class="ml10 mr10"
-          placeholder="请输入参数名称搜索"
+          placeholder="请输入任务名称搜索"
           @keyup.native.enter="handleSearch"
         ></el-input>
         <el-button size="small" type="primary" @click="handleSearch"

sample-form-manager-ui/admin/src/store/index.js

@@ -13,8 +13,12 @@ export default new Vuex.Store({
     deptList: [], // 部门列表
     sysName: "", // 系统名称
     sysLogo: "", // 系统logo
+    path: "", // 门户跳转过来的路由
   },
   getters: {
+    SET_path(state, path) {
+      state.path = path;
+    },
     token(state) {
       return state.token;
     },
@@ -24,6 +28,9 @@ export default new Vuex.Store({
     deptList(state) {
       return state.deptList;
     },
+    path(state) {
+      return state.path;
+    },
   },
   mutations: {
     SET_MENUS(state, menus) {

sample-form-manager-ui/admin/src/utils/index.js

+// 递归获取底层子数组
+export function findBottomSubarrays(arr) {
+  let bottomSubarrays = [];
+  function recursiveSearch(subArr) {
+    for (let item of subArr) {
+      if (item.children && item.children.length) {
+        recursiveSearch(item.children);
+      } else {
+        bottomSubarrays.push(...subArr);
+        break;
+      }
+    }
+  }
+  recursiveSearch(arr);
+  return bottomSubarrays;
+}