perf: 优化

sample-form-manager-ui/admin/package.json

@@ -21,7 +21,7 @@
     "crypto-js": "^4.1.1",
     "css-loader": "^3.5.3",
     "element-china-area-data": "^5.0.2",
-    "element-ui": "^2.15.10",
+    "element-ui": "^2.15.14",
     "file-saver": "^2.0.2",
     "moment": "^2.29.4",
     "npm": "^6.13.7",

sample-form-manager-ui/admin/src/App.vue

@@ -9,27 +9,8 @@ export default {
   data() {
     return {};
   },
-  created() {
-    // this.readVueXData();
-  },
-  methods: {
-    // 解决刷新store初始化问题
-    readVueXData() {
-      window.addEventListener("beforeunload", () => {
-        sessionStorage.setItem("store", JSON.stringify(this.$store.state));
-      });
-      if (sessionStorage.getItem("store")) {
-        this.$store.replaceState(
-          Object.assign(
-            {},
-            this.$store.state,
-            JSON.parse(sessionStorage.getItem("store"))
-          )
-        );
-        sessionStorage.removeItem("store");
-      }
-    },
-  },
+  created() {},
+  methods: {},
 };
 </script>
 
@@ -38,6 +19,5 @@ export default {
   width: 100%;
   height: 100%;
   background-color: #f0f2f5;
-  // display: flex;
 }
 </style>

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

 <template>
-  <div class="layouts flex flexc aic">
+  <el-container>
+    <el-header height="64px">
       <Header></Header>
-    <!-- <div class="crumbs">
-      <el-breadcrumb separator="/">
-        <el-breadcrumb-item
-          ><a :href="portalUrl + '/#/home/dataManagement/dataAdmin'"
-            >政务一体化平台</a
-          ></el-breadcrumb-item
-        >
-        <el-breadcrumb-item
-          ><a :href="portalUrl + '/#/home/siteArrange'"
-            >站点编排</a
-          ></el-breadcrumb-item
-        >
-        <el-breadcrumb-item
-          v-for="bread in breads"
-          :key="bread.title"
-          :to="bread.to"
-          >{{ bread.title }}</el-breadcrumb-item
-        >
-      </el-breadcrumb>
-    </div> -->
-    <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">
+    </el-header>
+    <el-container>
+      <el-aside width="200px" v-if="layout === 'side'">
+        <MenuBar></MenuBar>
+      </el-aside>
+      <el-main>
         <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>
+      </el-main>
+    </el-container>
+  </el-container>
 </template>
 
 <script>
 import Header from "./components/Header.vue";
+import MenuBar from "./components/MenuBar.vue";
 import { getdeptList } from "@/api/department";
 import { mapMutations, mapState } from "vuex";
 import local from "@/utils/local";
-import { findBottomSubarrays } from "@/utils";
 import { systemName } from "@/config";
 export default {
   components: {
     Header,
+    MenuBar,
   },
   data() {
     return {
@@ -62,49 +40,18 @@ export default {
     };
   },
   created() {
-    // this.getSubMenus();
     document.title = this.sysName ? this.sysName : this.systemName; // 设置项目标题
-    // this.calcBreads();
     this.getdeptList();
   },
-  // watch: {
-  //   "$route.path"() {
-  //     this.calcBreads();
-  //   },
-  // },
+
   computed: {
-    ...mapState(["sysName"]),
+    ...mapState(["sysName", "layout"]),
     activeKey() {
       return this.$route.path;
     },
   },
   methods: {
     ...mapMutations(["SET_deptList"]),
-    // 计算面包屑
-    calcBreads() {
-      let temp = [{ to: "/basicsset", title: "数字样表系统" }];
-      //  过滤出路由数据
-      let r = this.$route.matched
-        .filter((v) => v.meta.title)
-        .map((v) => {
-          return { to: v.path, title: v.meta.title };
-        });
-      // 赋值给面包屑渲染
-      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({
@@ -126,27 +73,18 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.layouts {
-  width: 100%;
-  // min-width: 1620px;
-  height: 100%;
-  padding-bottom: 15px;
-  // .crumbs {
-  //   margin: 10px 0px;
-  //   width: 98%;
-  // }
-
-  .main {
-    width: 98%;
-    margin-top: 15px;
-    // padding-bottom: 15px;
-    border-radius: 4px;
-    overflow-y: auto;
-    // background-color: #fff;
-  }
-  .out-box {
-    // padding: 15px;
-    overflow-y: auto;
-  }
+.el-container {
+  width: 100vw;
+  height: 100vh;
+}
+.el-header {
+  padding: 0px 20px;
+  background: linear-gradient(90deg, #1845c6 0%, #2999ff 100%);
+}
+.el-aside {
+  background-color: #fff;
+}
+.el-main {
+  overflow: auto;
 }
 </style>

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

 <template>
-  <div class="header flex aic jcb">
-    <div class="left flex aic">
+  <div class="header-content">
+    <div class="logo-box">
       <img
-        class="pointer mr10 logo"
+        class="logo"
         :src="sysLogo ? sysLogo : require('@/assets/img/logo.png')"
         alt="LOGO"
         @click="handleGoHome"
       />
-      <h1 class="title pointer" @click="handleGoHome">
+      <h1 class="title" @click="handleGoHome">
         {{ sysName ? sysName : systemName }}
       </h1>
-      <HeaderSite class="mr50 ml20"></HeaderSite>
-      <!-- 导航 -->
-      <el-menu
-        :default-active="activeMenu"
-        mode="horizontal"
-        router
-        text-color="rgba(254, 254, 254, 0.65)"
-        @select="selectMenu"
-      >
-        <template v-for="v in menus">
-          <!-- 有子路由 -->
-          <el-submenu
-            v-if="!v.hideChildrenInMenu && v.children && 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>
+      <HeaderSite></HeaderSite>
     </div>
+    <!-- 导航 -->
+    <MenuBar v-if="layout === 'head'" mode="horizontal"></MenuBar>
     <!-- 返回门户 -->
     <div class="back-btn">
       <el-tooltip effect="dark" content="返回门户" placement="bottom">
@@ -65,11 +27,14 @@
 
 <script>
 import HeaderSite from "./HeaderSite.vue";
+import MenuBar from "./MenuBar.vue";
+
 import { systemName } from "@/config";
 import { mapState, mapMutations } from "vuex";
 export default {
   components: {
     HeaderSite,
+    MenuBar,
   },
   data() {
     return {
@@ -88,7 +53,7 @@ export default {
         return curMatched[0].path;
       }
     },
-    ...mapState(["menus", "sysName", "sysLogo", "path"]),
+    ...mapState(["menus", "sysName", "sysLogo", "path", "layout"]),
   },
   created() {},
   methods: {
@@ -107,24 +72,30 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.header {
-  height: 64px;
+.header-content {
+  height: 100%;
   width: 100%;
-  padding: 0px 24px;
-  // background-color: #2681e8;
-  background: linear-gradient(90deg, #1845c6 0%, #2999ff 100%);
   color: #fff;
-  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .logo-box {
+    display: flex;
+    align-items: center;
+  }
   .logo {
     height: 32px;
     object-fit: contain;
+    margin-right: 8px;
   }
-  .left {
-    height: 100%;
-  }
+
   .title {
-    max-width: 200px;
+    margin-right: 34px;
+    font-weight: bold;
     font-size: 18px;
+    line-height: normal;
+    color: #fff;
+    cursor: pointer;
   }
   .back-btn {
     a {
@@ -133,67 +104,4 @@ export default {
     }
   }
 }
-/deep/.el-menu {
-  height: 100% !important;
-  border: none !important;
-  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 {
-    i {
-      color: #1890ff;
-    }
-    color: #1890ff;
-  }
-}
-
-.el-menu--horizontal .el-menu .el-menu-item.is-active {
-  color: #1890ff !important;
-}
-/deep/.is-active {
-  // 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>

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

+<template>
+  <el-menu
+    :default-active="activeMenu"
+    :mode="mode"
+    router
+    @select="selectMenu"
+  >
+    <template v-for="v in menus">
+      <!-- 有子路由 -->
+      <el-submenu
+        v-if="!v.hideChildrenInMenu && v.children && 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>
+</template>
+
+<script>
+import { systemName } from "@/config";
+import { mapState, mapMutations } from "vuex";
+export default {
+  props: {
+    mode: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      systemName,
+      portal: process.env.VUE_APP_API_portal_URL + "/#",
+    };
+  },
+  computed: {
+    ...mapState(["menus", "sysName", "sysLogo", "path"]),
+    activeMenu() {
+      const route = this.$route;
+      const { meta, matched } = route;
+      if (meta.activeMenu) {
+        return meta.activeMenu;
+      } else {
+        let curMatched = matched.filter((v) => v.path);
+        return curMatched[0].path;
+      }
+    },
+  },
+
+  created() {},
+  methods: {
+    ...mapMutations(["SET_secondaryRoutes"]),
+    selectMenu(index) {
+      this.SET_secondaryRoutes(index);
+    },
+    handleGoHome() {
+      let path = this.menus[0].path;
+      if (path) {
+        this.$router.push(path);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.el-menu {
+  border: none !important;
+  // .is-active {
+  //   :deep(.el-submenu__title) {
+  //     color: #1890ff !important;
+  //     i {
+  //       color: #1890ff !important;
+  //     }
+  //   }
+  // }
+}
+.el-menu-item,
+:deep(.el-submenu__title) {
+  display: flex;
+  align-items: center;
+}
+
+.el-menu--horizontal {
+  height: 100% !important;
+  border: none !important;
+  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);
+      border: none !important;
+      i {
+        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;
+      }
+    }
+  }
+  .is-active {
+    // border-bottom: 2px solid #fff !important;
+    color: #fff !important;
+    // background-color: transparent !important;
+    background-color: #1890ff !important;
+    :deep(.el-submenu__title) {
+      border: none !important;
+      color: #fff !important;
+      // background-color: transparent !important;
+      background-color: #1890ff !important;
+    }
+  }
+  .el-menu--popup {
+    .el-menu-item {
+      color: #909399 !important;
+      i {
+        color: #909399 !important;
+      }
+      &:hover {
+        i {
+          color: #1890ff !important;
+        }
+        color: #1890ff !important;
+        background-color: transparent !important;
+      }
+    }
+    .is-active {
+      color: #1890ff !important;
+      background-color: transparent !important;
+      i {
+        color: #1890ff !important;
+      }
+    }
+  }
+}
+</style>

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

@@ -8,6 +8,7 @@ Vue.use(Vuex);
 
 export default new Vuex.Store({
   state: {
+    layout: "head", //导航布局，可选 side 和 head，分别为侧边导航和顶部导航
     token: "",
     siteId: "", // 站点id
     deptList: [], // 部门列表
@@ -24,6 +25,9 @@ export default new Vuex.Store({
     permissions: [], // 按钮权限字符列表
   },
   getters: {
+    layout(state) {
+      return state.layout;
+    },
     siteId(state) {
       return state.siteId;
     },
@@ -60,6 +64,9 @@ export default new Vuex.Store({
     },
   },
   mutations: {
+    SET_layout(state, layout) {
+      state.layout = layout;
+    },
     SET_menusList(state, menusList) {
       state.menusList = menusList;
     },
@@ -71,7 +78,10 @@ export default new Vuex.Store({
     },
     SET_secondaryRoutes(state, value) {
       let routes = state.menus.find((v) => v.path == value);
-      let secondaryRoutes = routes.children || [];
+      let secondaryRoutes = [];
+      if (routes) {
+        secondaryRoutes = routes.children;
+      }
       state.secondaryRoutes = secondaryRoutes;
     },
     SET_path(state, path) {

sample-form-manager-ui/admin/yarn.lock

@@ -3576,10 +3576,10 @@ element-china-area-data@^5.0.2:
     china-area-data "^5.0.1"
     lodash-es "^4.17.15"
 
-element-ui@^2.15.10:
-  version "2.15.10"
-  resolved "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.10.tgz#fde0ff5cb4c30e8eb166d617f85916defe5948f1"
-  integrity sha512-jmD++mU2wKXbisvx4fxOl2mHaU+HWHTAq/3Wf8x9Bwyu4GdDZPLABb+CGi3DWN6fPqdgRcd74aX39DO+YHObLw==
+element-ui@^2.15.14:
+  version "2.15.14"
+  resolved "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.14.tgz#3c34df79467636592812d720d2e6784e7a6ec2ea"
+  integrity sha512-2v9fHL0ZGINotOlRIAJD5YuVB8V7WKxrE9Qy7dXhRipa035+kF7WuU/z+tEmLVPBcJ0zt8mOu1DKpWcVzBK8IA==
   dependencies:
     async-validator "~1.8.1"
     babel-helper-vue-jsx-merge-props "^2.0.0"