shentun
/
peisweb
1
0
Fork 0
Code Issues Pull Requests Projects 1 Releases Wiki Activity
Browse Source

home

master
pengjun 2 years ago
parent
93f64a16e3
commit
552ee64466
1 changed files with 111 additions and 163 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 272
      src/views/Home.vue

272
src/views/Home.vue
View File

@ -26,111 +26,70 @@
</div> </div>
</div> </div>
--> -->
<!--动态生成菜单支持多级 add by pengj -->
<div
:style="
'display:flex;justify-content:center;width:' +
(window.pageWidth - 200) +
'px;'
"
>
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
style="display: flex"
>
<!--1级菜单-->
<template v-for="menu1 in menuPriv">
<el-menu-item
:key="menu1.id"
v-if="menu1.menuType == '1'"
:index="menu1.id"
>
{{ menu1.displayName }}
</el-menu-item>
</template>
<template v-for="menu1 in menuPriv">
<el-submenu
:popper-append-to-body="false"
:key="menu1.id"
v-if="menu1.menuType == '0'"
:index="menu1.id"
>
<template slot="title">{{ menu1.displayName }}</template>
<!--2级菜单-->
<template v-for="menu2 in menu1.treeChildren">
<el-menu-item
:key="menu2.id"
v-if="menu2.menuType == '1'"
:index="menu2.id"
>{{ menu2.displayName }}</el-menu-item
>
</template>
<template v-for="menu2 in menu1.treeChildren">
<el-submenu
:popper-append-to-body="false"
:key="menu2.id"
v-if="menu2.menuType == '0'"
:index="menu2.id"
class="submenutitle"
>
<template slot="title"><div style="padding:0 10px;margin-right: 8px;">{{ menu2.displayName }}</div></template>
<!--3级菜单-->
<template v-for="menu3 in menu2.treeChildren">
<el-menu-item
:key="menu3.id"
v-if="menu3.menuType == '1'"
:index="menu3.id"
>{{ menu3.displayName }}</el-menu-item
>
</template>
<template v-for="menu3 in menu2.treeChildren">
<el-submenu
:popper-append-to-body="false"
:key="menu3.id"
v-if="menu3.menuType == '0'"
:index="menu3.id"
>
<template slot="title"><div style="padding:0 10px;margin-right: 8px;">{{menu3.displayName}}</div></template>
<!--4级菜单-->
<template v-for="menu4 in menu3.treeChildren">
<el-menu-item
:key="menu4.id"
v-if="menu4.menuType == '1'"
:index="menu4.id"
>{{ menu4.displayName }}</el-menu-item
>
</template>
<template v-for="menu4 in menu3.treeChildren">
<el-submenu
:popper-append-to-body="false"
:key="menu4.id"
v-if="menu4.menuType == '0'"
:index="menu4.id"
>
<template slot="title"><div style="padding:0 10px;margin-right: 8px;">{{menu4.displayName}}</div></template>
</el-submenu>
</template>
</el-submenu>
</template>
</el-submenu>
</template>
</el-submenu>
</template>
</el-menu>
</div>
<!-- -->
<div class="btn">
<img src="@/assets/images/me.png" alt="" class="currentuser" />
<!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
<el-dropdown>
<span
class="el-dropdown-link"
style="color: #222531; font-weight: 700"
>
<!-- <img
<!--动态生成菜单支持多级 add by pengj -->
<div :style="`display:flex;justify-content:center;width: ${(window.pageWidth - 350)}px;`">
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
style="display: flex">
<!--1级菜单-->
<template v-for="menu1 in menuPriv">
<el-menu-item :key="menu1.id" v-if="menu1.menuType == '1'" :index="menu1.id">
{{ menu1.displayName }}
</el-menu-item>
</template>
<template v-for="menu1 in menuPriv">
<el-submenu :popper-append-to-body="false" :key="menu1.id" v-if="menu1.menuType == '0'"
:index="menu1.id">
<template slot="title">{{ menu1.displayName }}</template>
<!--2级菜单-->
<template v-for="menu2 in menu1.treeChildren">
<el-menu-item :key="menu2.id" v-if="menu2.menuType == '1'" :index="menu2.id">{{ menu2.displayName
}}</el-menu-item>
</template>
<template v-for="menu2 in menu1.treeChildren">
<el-submenu :popper-append-to-body="false" :key="menu2.id" v-if="menu2.menuType == '0'"
:index="menu2.id" class="submenutitle">
<template slot="title">
<div style="padding:0 10px;margin-right: 8px;">{{ menu2.displayName }}</div>
</template>
<!--3级菜单-->
<template v-for="menu3 in menu2.treeChildren">
<el-menu-item :key="menu3.id" v-if="menu3.menuType == '1'" :index="menu3.id">{{
menu3.displayName }}</el-menu-item>
</template>
<template v-for="menu3 in menu2.treeChildren">
<el-submenu :popper-append-to-body="false" :key="menu3.id" v-if="menu3.menuType == '0'"
:index="menu3.id">
<template slot="title">
<div style="padding:0 10px;margin-right: 8px;">{{ menu3.displayName }}</div>
</template>
<!--4级菜单-->
<template v-for="menu4 in menu3.treeChildren">
<el-menu-item :key="menu4.id" v-if="menu4.menuType == '1'" :index="menu4.id">{{
menu4.displayName }}</el-menu-item>
</template>
<template v-for="menu4 in menu3.treeChildren">
<el-submenu :popper-append-to-body="false" :key="menu4.id" v-if="menu4.menuType == '0'"
:index="menu4.id">
<template slot="title">
<div style="padding:0 10px;margin-right: 8px;">{{ menu4.displayName }}</div>
</template>
</el-submenu>
</template>
</el-submenu>
</template>
</el-submenu>
</template>
</el-submenu>
</template>
</el-menu>
</div>
<!-- -->
<div class="btn">
<img src="@/assets/images/me.png" alt="" class="currentuser" />
<!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
<el-dropdown>
<span class="el-dropdown-link" style="color: #222531; font-weight: 700">
<!-- <img
src="@/assets/images/frame.png" src="@/assets/images/frame.png"
alt="" alt=""
style="width: 20px; height: 20px" style="width: 20px; height: 20px"
@ -139,21 +98,14 @@
{{ user }} <i class="el-icon-arrow-down el-icon--right"></i> {{ user }} <i class="el-icon-arrow-down el-icon--right"></i>
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="logout"
>退出登录</el-dropdown-item
>
<el-dropdown-item @click.native="editpassword"
>修改密码</el-dropdown-item
>
<el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
<el-dropdown-item @click.native="editpassword">修改密码</el-dropdown-item>
<el-dropdown-item @click.native="localSet">本地设置</el-dropdown-item> <el-dropdown-item @click.native="localSet">本地设置</el-dropdown-item>
<el-dropdown-item v-if="LocalConfig.normal.isDevTool" @click.native="toggleDevTools"
>调试工具</el-dropdown-item
>
<el-dropdown-item v-if="LocalConfig.normal.isDevTool"
@click.native="toggleDevTools">调试工具</el-dropdown-item>
<el-dropdown-item @click.native="clientConfigShow">客户端参数</el-dropdown-item> <el-dropdown-item @click.native="clientConfigShow">客户端参数</el-dropdown-item>
<el-dropdown-item @click.native="windowMin"
>最小化</el-dropdown-item
>
<el-dropdown-item @click.native="windowMin">最小化</el-dropdown-item>
<!-- <!--
<el-dropdown-item @click.native="windowMax" <el-dropdown-item @click.native="windowMax"
>最大化</el-dropdown-item >最大化</el-dropdown-item
@ -168,39 +120,16 @@
</div> </div>
</el-header> </el-header>
<!-- 修改密码弹框 --> <!-- 修改密码弹框 -->
<el-dialog
title="修改密码"
:visible.sync="dialogVisible"
width="30%"
:close-on-click-modal="false"
>
<el-form
:model="form"
:rules="rules"
ref="ruleForm"
label-width="100px"
>
<el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px">
<el-form-item label="旧密码" prop="oldPassWord"> <el-form-item label="旧密码" prop="oldPassWord">
<el-input
v-model="form.oldPassWord"
autocomplete="new-password"
show-password
></el-input>
<el-input v-model="form.oldPassWord" autocomplete="new-password" show-password></el-input>
</el-form-item> </el-form-item>
<el-form-item label="新密码" prop="newPassWord"> <el-form-item label="新密码" prop="newPassWord">
<el-input
v-model="form.newPassWord"
autocomplete="new-password"
show-password
></el-input>
<el-input v-model="form.newPassWord" autocomplete="new-password" show-password></el-input>
</el-form-item> </el-form-item>
<el-form-item label="确认密码" prop="newPassWord"> <el-form-item label="确认密码" prop="newPassWord">
<el-input
v-model="confirmpassword"
type="password"
autocomplete="new-password"
show-password
></el-input>
<el-input v-model="confirmpassword" type="password" autocomplete="new-password" show-password></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
@ -266,7 +195,7 @@ export default {
isDevTool: false, // 壳端是否显示打开调试工具的按钮 isDevTool: false, // 壳端是否显示打开调试工具的按钮
} }
}, },
LocalConfigInit:{},
LocalConfigInit: {},
}; };
}, },
computed: { computed: {
@ -303,7 +232,7 @@ export default {
// console.log(key, keyPath); // console.log(key, keyPath);
// tree: any, childNodeName: any, idName: any, idVal: any // tree: any, childNodeName: any, idName: any, idVal: any
let node = getTreeNode(this.menuPriv, "treeChildren", "id", key); let node = getTreeNode(this.menuPriv, "treeChildren", "id", key);
if (node&&this.$route.path!=='/'+node.routeUrl) this.$router.push({ path: node.routeUrl });
if (node && this.$route.path !== '/' + node.routeUrl) this.$router.push({ path: node.routeUrl });
}, },
//获取用户所有权限 //获取用户所有权限
getUserAllPriv() { getUserAllPriv() {
@ -344,7 +273,7 @@ export default {
} else { } else {
e.menuType = "1"; e.menuType = "1";
} }
} else {
} else {
e.menuType = "1"; e.menuType = "1";
} }
return e; return e;
@ -356,7 +285,7 @@ export default {
this.className = val.flag; this.className = val.flag;
if (this.router.path != val.command) { if (this.router.path != val.command) {
this.router.path = val.command; this.router.path = val.command;
this.$router.push({ path: val.command }).catch(() => {});
this.$router.push({ path: val.command }).catch(() => { });
} }
// let menuId = arguments[1].$parent.$el.id // let menuId = arguments[1].$parent.$el.id
// let menuList = document.getElementById(menuId) // let menuList = document.getElementById(menuId)
@ -471,6 +400,7 @@ export default {
font-size: 14px; font-size: 14px;
font-family: "NotoSansSC-Bold"; font-family: "NotoSansSC-Bold";
} }
.titleimg :hover { .titleimg :hover {
width: 30px; width: 30px;
background-color: rgb(34, 149, 98); background-color: rgb(34, 149, 98);
@ -696,7 +626,7 @@ export default {
color: #FF0000; color: #FF0000;
} }
::v-deep .el-menu--horizontal > .el-submenu .el-submenu__title {
::v-deep .el-menu--horizontal>.el-submenu .el-submenu__title {
font-size: 14px; font-size: 14px;
height: 47px; height: 47px;
line-height: 47px; line-height: 47px;
@ -705,6 +635,7 @@ export default {
color: #52555f; color: #52555f;
border-bottom: 3px solid #396ffa; border-bottom: 3px solid #396ffa;
} }
/* ::v-deep .submenutitle.is-active .el-submenu__title{ /* ::v-deep .submenutitle.is-active .el-submenu__title{
border-bottom:none border-bottom:none
} */ } */
@ -712,20 +643,25 @@ export default {
height: 36px !important; height: 36px !important;
line-height: 36px !important; line-height: 36px !important;
} }
::v-deep .el-menu--horizontal > .el-menu-item {
::v-deep .el-menu--horizontal>.el-menu-item {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
} }
::v-deep .el-submenu__title { ::v-deep .el-submenu__title {
padding: 0 5px 0 5px !important; padding: 0 5px 0 5px !important;
} }
::v-deep .el-menu--popup { ::v-deep .el-menu--popup {
min-width: auto !important; min-width: auto !important;
/* padding: 5px 10px !important; */ /* padding: 5px 10px !important; */
} }
::v-deep .el-submenu .el-menu-item { ::v-deep .el-submenu .el-menu-item {
min-width: auto !important; min-width: auto !important;
} }
::v-deep .el-menu--horizontal .el-menu .el-menu-item, ::v-deep .el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-submenu__title { .el-menu--horizontal .el-menu .el-submenu__title {
font-size: 14px; font-size: 14px;
@ -733,9 +669,11 @@ export default {
font-family: "NotoSansSC-Regular"; font-family: "NotoSansSC-Regular";
color: #52555f; color: #52555f;
} }
:v-deep .el-menu-item .is-active { :v-deep .el-menu-item .is-active {
background-color: #247bb4 !important; background-color: #247bb4 !important;
} }
::v-deep .el-menu--horizontal .el-menu-item:not(.is-disabled):focus, ::v-deep .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover { .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
background-color: rgba(20, 96, 243, 0.1); background-color: rgba(20, 96, 243, 0.1);
@ -744,23 +682,26 @@ export default {
font-family: "NotoSansSC-Bold"; font-family: "NotoSansSC-Bold";
color: #396ffa; color: #396ffa;
} }
/* ::v-deep .el-menu--horizontal > .el-submenu .el-submenu__icon-arrow { /* ::v-deep .el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
display: none; display: none;
} */ } */
::v-deep .el-menu--horizontal>.el-submenu .el-submenu__icon-arrow{
::v-deep .el-menu--horizontal>.el-submenu .el-submenu__icon-arrow {
vertical-align: middle; vertical-align: middle;
margin-left: 8px;
margin-top: -3px;
position: absolute;
top: 14px;
right: 4px;
margin-left: 8px;
margin-top: -3px;
position: absolute;
top: 14px;
right: 4px;
} }
::v-deep .submenutitle .el-submenu__title { ::v-deep .submenutitle .el-submenu__title {
font-size: 14px !important; font-size: 14px !important;
font-weight: 400 !important; font-weight: 400 !important;
font-family: "NotoSansSC-Regular" !important; font-family: "NotoSansSC-Regular" !important;
color: #52555f !important; color: #52555f !important;
} }
::v-deep .submenutitle .el-submenu__title:hover { ::v-deep .submenutitle .el-submenu__title:hover {
background-color: rgba(20, 96, 243, 0.1) !important; background-color: rgba(20, 96, 243, 0.1) !important;
font-size: 14px !important; font-size: 14px !important;
@ -768,20 +709,24 @@ export default {
font-family: "NotoSansSC-Bold" !important; font-family: "NotoSansSC-Bold" !important;
color: #396ffa !important; color: #396ffa !important;
} }
::v-deep .submenutitle .el-submenu__title { ::v-deep .submenutitle .el-submenu__title {
height: 36px !important; height: 36px !important;
line-height: 36px !important; line-height: 36px !important;
} }
::v-deep .submenutitle .el-submenu__title .el-submenu__icon-arrow { ::v-deep .submenutitle .el-submenu__title .el-submenu__icon-arrow {
font-size:14px !important;
font-size: 14px !important;
} }
::v-deep .el-menu--horizontal .el-menu .el-menu-item.is-active{
::v-deep .el-menu--horizontal .el-menu .el-menu-item.is-active {
background-color: rgba(20, 96, 243, 0.1) !important; background-color: rgba(20, 96, 243, 0.1) !important;
font-size: 14px !important; font-size: 14px !important;
font-weight: 700 !important; font-weight: 700 !important;
font-family: "NotoSansSC-Bold" !important; font-family: "NotoSansSC-Bold" !important;
color: #396ffa !important; color: #396ffa !important;
} }
/* ::v-deep .el-menu--horizontal .el-menu .el-submenu.is-active .el-submenu__title{ /* ::v-deep .el-menu--horizontal .el-menu .el-submenu.is-active .el-submenu__title{
background-color: rgba(20, 96, 243, 0.1) !important; background-color: rgba(20, 96, 243, 0.1) !important;
font-size: 14px !important; font-size: 14px !important;
@ -789,12 +734,15 @@ export default {
font-family: "NotoSansSC-Bold" !important; font-family: "NotoSansSC-Bold" !important;
color: #396ffa !important; color: #396ffa !important;
} */ } */
::v-deep .el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title{
::v-deep .el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-submenu__title {
padding: 0 15px !important; padding: 0 15px !important;
} }
::v-deep .el-menu.el-menu--horizontal{
border-bottom:none;
::v-deep .el-menu.el-menu--horizontal {
border-bottom: none;
} }
/* ::v-deep .el-menu--popup-right-start{ /* ::v-deep .el-menu--popup-right-start{
margin-left: 15px !important; margin-left: 15px !important;
} */ } */

Write Preview
Loading…
Cancel
Save