Skip to content

S
sample-form-platform
Commit a04dfb47 authored by “yiyousong”'s avatar “yiyousong”
Browse files
Options

perf: 优化

parent 634f8615
Hide whitespace changes
Inline Side-by-side
Showing with 251 additions and 238 deletions
sample-form-manager-ui/admin/package.json
View file @ a04dfb47
......@@ -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
View file @ a04dfb47
......@@ -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
View file @ a04dfb47
<template>
<div class="layouts flex flexc aic">
<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-container>
<el-header height="64px">
<Header></Header>
</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
View file @ a04dfb47
<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 0 → 100644
View file @ a04dfb47
<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
View file @ a04dfb47
......@@ -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
View file @ a04dfb47
......@@ -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"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment