Browse code Merge branch 'master' of http://192.168.4.105:8080/gitbucket/git/08335/hivui-platform-template master
commit 5ada6d35cbaf04ffd701a2c712af144f94ba1b4a 2 parents 1c7225d + ba91bab caibinghong authored on 27 Jun 2022

Showing 10 changed files

• project/hivuiBirt/styles/index.css
• project/hivuiMain/assets/page.less
• project/hivuiMain/store/modules/user.js
• project/hivuiMain/utils/index.js
• project/hivuiMain/views/layout/components/Header.vue
• project/hivuiMain/views/layout/components/Sidebar.vue
• project/hivuiMain/views/layout/components/Smenus/menuItem.jsx
• project/hivuiMain/views/layout/components/Smenus/subMenu.jsx
• project/hivuiMain/views/layout/components/menus/subMenu.jsx
• project/hivuiMain/views/layout/components/side/Smenus.vue

Ignore Space Show notes View project/hivuiBirt/styles/index.css

.custom-tree-node { flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px; width: 80%; flex: 1 140px; } .custom-tree-node > span:nth-child(1){ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .custom-tree-node .btn{ opacity: 0; transition: opacity 0.5s; -webkit-transition: opacity 0.5s; } .custom-tree-node:hover .btn{ opacity: 1; } .custom-tree-node .btn .el-icon-edit{ color: #67c23a; } .custom-tree-node .btn .el-icon-delete{ color: #f56c6c; } .cell .el-input-group__append{ padding: 0 5px !important; text-align: center; } .cell .el-input-group__append .el-button{ padding: 0; margin: 0; } /* .el-form-item__error{ line-height: 0; } */ .el-row>.zhc-birt-cell-children>.el-button { border: none; /* border-right: 1px solid #ddd; */ border-radius: 0; padding: 5px 15px; } /* 整个滚动条 */ ::-webkit-scrollbar { width: 8px; height: 10px; } /* 滚动条上的滚动滑块 */ ::-webkit-scrollbar-thumb { /* background-color: #49b1f5; */ /* 关键代码 */ /* background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent); */ background-color: rgba(0,0,0,.3); border-radius: 32px; } /* 滚动条轨道 */ ::-webkit-scrollbar-track { background-color: #dbeffd; border-radius: 32px; } .custom-tree-node .el-icon-folder-opened,.el-icon-folder{ color: #ffc107; } .custom-tree-node .el-icon-document{ color: #009688; } .custom-tree-node .icon-root{ color: blue; } .custom-tree-node .icon-ptm{ color: royalblue; } .custom-tree-node .el-icon-user{ color: coral;; } .custom-tree-node .icon-org, .icon-func{ color: aqua; } .custom-tree-node .icon-dpt, .icon-flow{ color: deepskyblue; } .custom-tree-node .el-button.is-disabled i{ color: #C0C4CC !important; cursor: not-allowed; } .el-table__header-wrapper th.isrequired ::before{ content: '*'; color: red; margin-right: 5px; } .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content { background-color: #f0f7ff; color: #2355f1; } /* 取消查找定义input红色边框 */ .el-form-item.is-error .queryPanel .el-input__inner, .el-form-item.is-error .el-pagination__sizes .el-input__inner, .el-form-item.is-error .el-pagination__jump .el-input__inner{ border-color: #DCDFE6; } /* 弹框样式 */ .el-dialog__body .el-main{ padding: 0; } .el-dialog .queryPanel .zhc-birt-data-list thead { display: none; } /* tabs */ .el-tabs--left .el-tabs__item, .el-tabs--right .el-tabs__item{ width: 60px; line-height: 24px; height: auto; word-wrap: break-word; white-space: pre-line; padding-bottom: 20px; } .el-tabs--right .el-tabs__item{ width: 40px; } .el-tabs--left, .el-tabs--right{ height: auto !important; } .el-tabs--right .queryPanel + div .el-button { margin-right: 10px; } /*取消mian的padding,防止大屏看板高度超出100%*/ .chart .zhc-birt-cell-children .el-main{ padding: 0; } .el-tabs .el-main{ padding: 0 } .toolBar{ padding: 5px 5% !important; border-bottom: 1px solid #c2bcc0; } .extra .toolBar{ border: none; padding: 0!important; } .dataList_title{ margin-top:5px; } .dataList_title td{ margin-top:5px; position: relative; } .dataList_title td:nth-child(1):before{ content: ' '; display: block; width: 5px; height: 30px; position: absolute; border-radius: 5px; background: #3f96ed; } .toolBar button .icon-XLSX{ font-size: 22px; } .avatar-uploader{ background: #f5f3f6; } .avatar-uploader .el-upload { background-color: #fff; } .zhc-birt-data-list .el-form-item__content > span, .zhc-birt-data-list .el-form-item__content > .lookup > span, .zhc-birt-data-list .el-form-item__content > .el-radio-group, .zhc-birt-data-list .el-form-item__content > .el-checkbox{ padding-left: 12px; } .el-table .el-table__cell{ padding: 7px 0; } .el-table .el-table__header-wrapper .el-table__cell, .el-table .el-table__fixed-header-wrapper .el-table__cell{ background: #f5f7fa !important; } .el-table.table_edit > .el-table__body-wrapper > .el-table__body > tbody > .el-table__row > .el-table__cell, .el-table.table_edit .el-table__fixed-right > .el-table__fixed-body-wrapper > .el-table__body > tbody >.el-table__row > .el-table__cell, .el-table.table_edit .el-table__fixed-right > .el-table__fixed-body-wrapper > .el-table__body > tbody >.el-table__row > .el-table__cell{ padding-top: 0; padding-bottom: 0; } .table_edit > .el-table__body-wrapper > .el-table__body > tbody >.el-table__row > .el-table__cell .cell, .table_edit > .el-table__fixed-body-wrapper > .el-table__body > tbody >.el-table__row > .el-table__cell .cell{ padding: 0 10px; } .el-table--small .el-form-item .el-form-item__content{ line-height: 32px; } .lookup .el-input.is-focus .el-input__inner.el-input__inner, .el-select .el-input.is-focus .el-input__inner.el-input__inner { border-color: #409EFF; } .customMsgbox { width: 70%; } .customMsgbox p { overflow: auto; } .custom-tree-node { flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px; width: 80%; flex: 1 140px; } .custom-tree-node > span:nth-child(1){ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .custom-tree-node .btn{ opacity: 0; transition: opacity 0.5s; -webkit-transition: opacity 0.5s; } .custom-tree-node:hover .btn{ opacity: 1; } .custom-tree-node .btn .el-icon-edit{ color: #67c23a; } .custom-tree-node .btn .el-icon-delete{ color: #f56c6c; } .cell .el-input-group__append{ padding: 0 5px !important; text-align: center; } .cell .el-input-group__append .el-button{ padding: 0; margin: 0; } /* .el-form-item__error{ line-height: 0; } */ .el-row>.zhc-birt-cell-children>.el-button { border: none; /* border-right: 1px solid #ddd; */ border-radius: 0; padding: 5px 15px; } /* 整个滚动条 */ ::-webkit-scrollbar { width: 8px; height: 10px; } /* 滚动条上的滚动滑块 */ ::-webkit-scrollbar-thumb { /* background-color: #49b1f5; */ /* 关键代码 */ /* background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent); */ background-color: rgba(0,0,0,.3); border-radius: 32px; } /* 滚动条轨道 */ ::-webkit-scrollbar-track { background-color: #dbeffd; border-radius: 32px; } .custom-tree-node .el-icon-folder-opened,.el-icon-folder{ color: #ffc107; } .custom-tree-node .el-icon-document{ color: #009688; } .custom-tree-node .icon-root{ color: blue; } .custom-tree-node .icon-ptm{ color: royalblue; } .custom-tree-node .el-icon-user{ color: coral;; } .custom-tree-node .icon-org, .icon-func{ color: aqua; } .custom-tree-node .icon-dpt, .icon-flow{ color: deepskyblue; } .custom-tree-node .el-button.is-disabled i{ color: #C0C4CC !important; cursor: not-allowed; } .el-table__header-wrapper th.isrequired ::before{ content: '*'; color: red; margin-right: 5px; } .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content { background-color: #f0f7ff; color: #2355f1; } /* 取消查找定义input红色边框 */ .el-form-item.is-error .queryPanel .el-input__inner, .el-form-item.is-error .el-pagination__sizes .el-input__inner, .el-form-item.is-error .el-pagination__jump .el-input__inner{ border-color: #DCDFE6; } /* 弹框样式 */ .el-dialog__body .el-main{ padding: 0; } .el-dialog .queryPanel .zhc-birt-data-list thead { display: none; } /* tabs */ .el-tabs--left .el-tabs__item, .el-tabs--right .el-tabs__item{ width: 60px; line-height: 24px; height: auto; word-wrap: break-word; white-space: pre-line; padding-bottom: 20px; } .el-tabs--right .el-tabs__item{ width: 40px; } .el-tabs--left, .el-tabs--right{ height: auto !important; } .el-tabs--right .queryPanel + div .el-button { margin-right: 10px; } /*取消mian的padding,防止大屏看板高度超出100%*/ .chart .zhc-birt-cell-children .el-main{ padding: 0; } .el-tabs .el-main{ padding: 0 } .toolBar{ padding: 5px 5% !important; border-bottom: 1px solid #c2bcc0; } .extra .toolBar{ border: none; padding: 0!important; } .dataList_title{ margin-top:5px; } .dataList_title td{ margin-top:5px; position: relative; } .dataList_title td:nth-child(1):before{ content: ' '; display: block; width: 5px; height: 30px; position: absolute; border-radius: 5px; background: #3f96ed; } .toolBar button .icon-XLSX{ font-size: 22px; } .avatar-uploader{ background: #f5f3f6; } .avatar-uploader .el-upload { background-color: #fff; } .zhc-birt-data-list .el-form-item__content > span, .zhc-birt-data-list .el-form-item__content > .lookup > span, .zhc-birt-data-list .el-form-item__content > .el-radio-group, .zhc-birt-data-list .el-form-item__content > .el-checkbox{ padding-left: 12px; } .el-table .el-table__cell{ padding: 7px 0; } .el-table .el-table__header-wrapper .el-table__cell, .el-table .el-table__fixed-header-wrapper .el-table__cell{ background: #f5f7fa !important; } .el-table.table_edit > .el-table__body-wrapper > .el-table__body > tbody > .el-table__row > .el-table__cell, .el-table.table_edit .el-table__fixed-right > .el-table__fixed-body-wrapper > .el-table__body > tbody >.el-table__row > .el-table__cell, .el-table.table_edit .el-table__fixed-right > .el-table__fixed-body-wrapper > .el-table__body > tbody >.el-table__row > .el-table__cell{ padding-top: 0; padding-bottom: 0; } .table_edit > .el-table__body-wrapper > .el-table__body > tbody >.el-table__row > .el-table__cell .cell, .table_edit > .el-table__fixed-body-wrapper > .el-table__body > tbody >.el-table__row > .el-table__cell .cell{ padding: 0 10px; } .el-table--small .el-form-item .el-form-item__content{ line-height: 32px; } .lookup .el-input.is-focus .el-input__inner.el-input__inner { border-color: #409EFF; }

Ignore Space Show notes View project/hivuiMain/assets/page.less

@import './mixin.less'; @import './base.less'; @import './grid.less'; @import './design.less'; .@{css-prefix}-page { display: block; min-height: 100%; } .@{css-prefix}-header { position: absolute; left: 0; top: 0; height: 50px; width: 100%; background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #f3f8fd 50%, #e5f0fa 100%); background: -webkit-linear-gradient(top, #ffffff 0%, #f3f8fd 50%, #e5f0fa 100%); background: linear-gradient(to bottom, #ffffff 0%, #f3f8fd 50%, #e5f0fa 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5f0fa', GradientType=0); display: flex; justify-content: space-between; font-size: 14px; color: #333; .@{css-prefix}-logo { // background: transparent url(logo.png) 50% 50% no-repeat; // width: 136px; // height: 40px; float: left; width: 140px; margin: 5px 0; } .@{css-prefix}-search { width: 240px; margin-right: 20px; } >.ltArea { padding:0; list-style: none; margin: 0; .logoStyle{ display: flex; align-items: center; } >li{ float: left; height: 100%; // padding:5px 5px 0; .sysTrigger{ line-height: 50px !important; padding:0 5px; // border-left:1px #aaa solid; line-height: 1; cursor: pointer; .icon { display: inline-block; height: 16px; width: 16px; } .iconfont{ font-size:14px; margin-left:5px; color:#aaa; } } } } >.rtArea { list-style: none; margin: 0; padding: 9px 5px 0 0; li { float: left; padding:0 5px; line-height: 30px; .item { display: block; word-wrap: normal; /* for IE */ white-space: nowrap; cursor: pointer; color:#076ce0; position: relative; .iconfont { color: #076ce0; margin-right: 5px; display: inline-block; vertical-align: middle; } &:hover, &:hover .iconfont{ color:#f30; } .tip, .title { position: relative; display: inline-block; vertical-align: middle; } .@{css-prefix}-head-tipsNum{ position: absolute; top:-5px; left:calc(100% - 10px); height:16px; line-height:16px; background-color: #f00; font-size: 12px; color: #fff; text-align: center; padding: 0 5px; border-radius: 8px; } } .line { height: 15px; margin: 0; display: inline-block; vertical-align: middle; border-right: 1px #d9d9d9 solid; } } } } .@{css-prefix}-header[data-layout='level']{ background: #06c; >.ltArea>li .sysTrigger{ color:#fff; .iconfont{ color:#fff; } } >.rtArea li .item{ color:#fff; .iconfont{ color:#fff; } } } .@{css-prefix}-search { display: block; border: 1px #eee solid; background: #fff; border-radius: 50px; overflow: hidden; position: relative; >.iconfont { position: absolute; right: 8px; top: 0; font-size: 20px; color: #999; } .@{css-prefix}-search-text { border: 0; padding: 5px 15px; outline: 0; line-height: 20px; display: block; width: 100%; box-sizing: border-box; } } .@{css-prefix}-navbar { position: absolute; top: 50px; left: 0; height: 48px; width: 100%; background-color: #0066cc; color: #fff; z-index: 10; >.allFunc, >.history { float: left; padding: 0 15px; width: 100px; line-height: 48px; height: 48px; text-align: center; cursor: pointer; display: inline-flex; overflow: hidden; .icon { display: inline-block; height: 16px; width: 16px; } .title { font-size: 14px; padding: 0 5px; display: inline-block; } } >.menusArea{ margin-left:130px; >.arrRt, >.arrLt{ width: 30px; line-height: 48px; text-align: center; cursor: pointer; &:hover{ background: #4d94db; } } >.arrRt{ float: right; } >.arrLt{ float: left; } >.scroll{ margin:0 auto; line-height: 48px; height: 48px; overflow: hidden; } &.hasMenusBtn>.scroll{ margin:0 30px; } } >.allFunc { float: right; } } .@{css-prefix}-sidebar { position: absolute; top: 98px; left: 0; bottom: 0; width: 70px; border-right: 1px #ced7e0 solid; .menus { margin: 0; padding: 0; list-style: none; .item { padding: 8px 2px; text-align: center; cursor: pointer; .box { display: inline-block; margin: 0 auto; padding: 0; position: relative; img{ display: block; overflow: hidden; border-radius: 50%; } .iconfont { display: block; border-radius: 50%; width: 46px; height: 46px; line-height: 46px; font-size: 24px; color: #fff; text-align: center; } .tip { position: absolute; right: -5px; top: -5px; font-size: 12px; font-weight: normal; background: #ff3300; color: #fff; border-radius: 50px; padding: 3px; min-width: 15px; } } .title { padding-top: 5px; display: block; font-size: 12px!important; word-wrap: normal; /* for IE */ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } } .item:hover { .iconfont { box-shadow: 0 0 5px #ff3300; } .title { color: #ff3300; } } .itemBg1 .iconfont { background-color: #64d0c6; } .itemBg2 .iconfont { background-color: #1f85ec; } .itemBg3 .iconfont { background-color: #5246c5; } .itemBg4 .iconfont { background-color: #ff6d68; } .itemBg5 .iconfont { background-color: #26a3ed; } .itemBg6 .iconfont { background-color: #f9b954; } .itemBg7 .iconfont { background-color: #24bde3; } .itemBg8 .iconfont { background-color: #00d58b; } } } .@{css-prefix}-sideMenus{ line-height: 32px; padding-inline-start: 0; } .@{css-prefix}-sideMenus li{ list-style-type:none; padding-left: 40px; border-bottom: 1px solid #151d2a; cursor: pointer; } // .@{css-prefix}-sideMenus li::after{ // content: '>'; // color: #363d48; // right: 10px; // position: absolute; // } .@{css-prefix}-sideMenus .trigger{ float: right; margin-right: 15px; color: #363d48; } .@{css-prefix}-main { position: absolute; top: 98px; left: 71px; right: 0; bottom: 0; } .@{css-prefix}-menus { list-style: none; padding: 0; margin: 0; .@{css-prefix}-menus-item { position: relative; .title { display: block; height: 100%; padding: 0 15px; cursor: pointer; word-wrap: normal; /* for IE */ // text-overflow: ellipsis; // overflow: hidden; white-space: nowrap; .icon { display: inline-block; margin-right: 5px; vertical-align: middle } .txt { display: inline-block; vertical-align: middle; font-size:14px; } } } } .@{css-prefix}-menus-horizontal { overflow: hidden; zoom: 1; .@{css-prefix}-menus-item { float: left; font-size: 14px!important; } >.@{css-prefix}-menus-itemSeld { background: #4d94db; color: #fff; } } .@{css-prefix}-menus-pop { position: absolute; left: 0; top: 0; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); //display: none; width:auto; opacity: 0; z-index: 100; overflow:auto; transition: 0.2s; transition-property:height,width; overflow-x: hidden; &::-webkit-scrollbar { height:5px; width:5px; } >.@{css-prefix}-menus-item { //min-width: 150px; color: #333; &:hover { background: #0066cc; color: #fff; } .title { padding: 5px 10px; display: block; line-height: 25px; .txt{ vertical-align: middle; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width:auto; //min-width: 120px; font-size:14px; padding-right:20px; } } .trigger { line-height: 25px; float: right; } } >.@{css-prefix}-menus-itemSeld { background: #d4eaff; color: #06c; >.@{css-prefix}-menus-pop { display: block !important; left: 100% !important; } } >.@{css-prefix}-menus-tips{ background: #fff; color: #999; padding: 5px 10px; display: block; line-height: 25px; text-align: center; } } .@{css-prefix}-Smenus-horizontal{ overflow: auto; box-sizing: border-box; &::-webkit-scrollbar { height:2px; width:2px; } } .@{css-prefix}-Smenus-horizontal .@{css-prefix}-Smenus-item{ line-height: 40px; //border-bottom: 1px solid #151d2a; // width: 140px; } .@{css-prefix}-Smenus-horizontal .@{css-prefix}-Smenus-item:hover{ background: #003060; color: #F86640; } .@{css-prefix}-Smenus-horizontal .@{css-prefix}-Smenus-itemSeld{ background: #003060; color: #F86640; } .@{css-prefix}-Smenus-horizontal .@{css-prefix}-Smenus-itemSeld .trigger{ color: #F86640 !important; } .@{css-prefix}-Smenus-horizontal .@{css-prefix}-Smenus-itemSeld .icon, .@{css-prefix}-Smenus-horizontal .@{css-prefix}-Smenus-item:hover .icon{ color: #F86640 !important; } .@{css-prefix}-Smenus{ list-style: none; padding: 0; margin: 0; padding:20px 0; .@{css-prefix}-Smenus-item { position: relative; border-bottom:1px solid #0D2A49; .title { display: block; height: 100%; padding: 10px 15px; cursor: pointer; word-wrap: normal; /* for IE */ // text-overflow: ellipsis; // overflow: hidden; white-space: nowrap; .icon { display: block; text-align:center; line-height: 20px; color:#fff; font-size: 20px; margin-right:5px; } img{ margin-bottom:-5px; margin-right:5px; } .txt { display: block; font-size:14px; width: 40px; white-space: normal; line-height: 20px; margin:auto; text-align: center; } } .trigger { line-height: 40px; float: right; color: #363d48; display: none; } &.@{css-prefix}-Smenus-wordwrap{ .icon,.txt{ display: inline; } .txt{ white-space: nowrap; } } } } .@{css-prefix}-Smenus-pop { position: absolute; left: 0; top: 0; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); //display: none; width:auto; opacity: 0; z-index: 100; overflow:auto; padding:0; transition: width 0.3s; overflow-x: hidden; >.@{css-prefix}-Smenus-item { //min-width: 150px; color: #333; border:none; &:hover { //background: #0066cc; //color: #fff; color: #1D9ED7; } .title { padding: 5px 10px; display: block; line-height: 25px; .txt{ width:auto; vertical-align: middle; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; //min-width: 120px; font-size:14px; line-height:25px; display: inline-block; text-align: left; padding-right:20px; } } .trigger { line-height: 29px; float: right; display: block; } } >.@{css-prefix}-Smenus-itemSeld { background: #d4eaff; color: #06c; >.@{css-prefix}-Smenus-pop { display: block !important; left: 100% !important; } } >.@{css-prefix}-Smenus-tips{ background: #fff; color: #999; padding: 5px 10px; display: block; line-height: 25px; text-align: center; } } .@{css-prefix}-navbar { >.@{css-prefix}-menus-horizontal { line-height: 48px; margin: 0 130px; } } .@{css-prefix}-tabs { height: 100%; background: #fff; } .showTab .@{css-prefix}-tabs-hd{ position: absolute; // top:48px; width: 100%; } .@{css-prefix}-tabs-hd { height: 39px; background: #ebf1f7; border-bottom: 1px #ced7e0 solid; border-top: 1px #ced7e0 solid; font-size: 14px; .clearfix(); .@{css-prefix}-tabs-tool { float: right; .item { line-height: 39px; display: inline-block; padding: 0 5px; border-left: 1px #ced7e0 solid; cursor: pointer; &:hover { background: #0066cc; color: #fff; } } } .@{css-prefix}-tabs-scroll { overflow: hidden; position: relative; ul { .clearfix(); list-style: none; margin: 0; padding: 0; display: flex; >li { float: left; border-right: 1px #ced7e0 solid; } } .@{css-prefix}-tabs-item { line-height: 39px; padding: 0 20px; text-align: center; position: relative; cursor: pointer; >.@{css-prefix}-tabs-itemTxt { //width: 75px; display: block; word-wrap: normal; /* for IE */ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } &::after { position: absolute; bottom: 0; left: 0; width: 100%; border-bottom: 2px transparent solid; content: ""; } .@{css-prefix}-tabs-itemClose { position: absolute; right: 0; top: 0; color: #ccc; line-height: normal; &:hover { color: red; } } } .@{css-prefix}-tabs-itemSeld { >.@{css-prefix}-tabs-itemTxt { color: #0066cc; font-weight: bold; } &::after { border-color: #0066cc; } } } } .@{css-prefix}-tabpanel-bd { overflow: auto; font-size: 0;/*防止因html换行空字符导致的滚动条出现*/ .@{css-prefix}-tabs-panel { height:100%; iframe { border: 0; height: 100%; width: 100%; } } } .@{css-prefix}-portal-panel { border: 1px #ddd solid; background: #fff; border-radius: 5px; overflow: hidden; position: relative; box-shadow: 0 0 5px rgba(0, 0, 0, 0.05); &.@{css-prefix}-portal-panelHover { box-shadow: 0 0 5px rgba(250, 125, 60, 0.7); } >.@{css-prefix}-portal-panel-head { // padding:0 10px; >.tabs { padding: 0 10px; overflow: hidden; ul { list-style: none; margin: 0; padding: 0; word-wrap: normal; /* for IE */ white-space: nowrap; overflow: hidden; height: 38px; .clearfix(); >li { float: left; padding: 10px; border-bottom: 2px transparent solid; cursor: pointer; &.seld { color: #0066cc; border-color: #0066cc; } } } } >.tool { float: right; padding: 10px 10px 0 0; >.iconfont { margin-left: 5px; cursor: pointer; } } } >.@{css-prefix}-portal-panel-body { padding: 10px; } .@{css-prefix}-tabs-hd{ background: none; border:0; .@{css-prefix}-tabs-scroll ul>li, .@{css-prefix}-tabs-tool .item{ border:0; &:hover{ background: none; color:#333; } } .@{css-prefix}-tabs-tool .item>.iconfont{ border:1px #ccc solid; border-radius: 50%; &:hover{ background: #0066cc; color:#fff; border:1px #0066cc solid; } } } } .@{css-prefix}-logo-lg{ // height:230px; // background: transparent url(./logo_max.png) no-repeat 50% 50%; } .@{css-prefix}-noPower{ padding: 10px; text-align: center; >.iconfont{ margin: auto; display: inline-block; line-height: 50px; padding:10px; font-size:32px; color:#999; } >.txt{ margin: auto; display: inline-block; line-height: 50px; font-size:24px; color:#999; } } .@{css-prefix}-loading { width: 150px; height: 15px; margin: 0 auto; margin-top: 100px; } .@{css-prefix}-loading-fixed{ position: absolute; left:50%; top:50%; margin:-10px 0 0 -75px; } .@{css-prefix}-loading span { display: inline-block; width: 15px; height: 100%; margin-right: 5px; background: #0066cc; -webkit-transform-origin: right bottom; -webkit-animation: load 1s ease infinite; } .@{css-prefix}-loading span:last-child { margin-right: 0px; } @-webkit-keyframes load { 0% { opacity: 1; -webkit-transform: scale(1); } 100% { opacity: 0; -webkit-transform: rotate(90deg) scale(.3); } } .@{css-prefix}-loading span:nth-child(1) { -webkit-animation-delay: 0.13s; } .@{css-prefix}-loading span:nth-child(2) { -webkit-animation-delay: 0.26s; } .@{css-prefix}-loading span:nth-child(3) { -webkit-animation-delay: 0.39s; } .@{css-prefix}-loading span:nth-child(4) { -webkit-animation-delay: 0.52s; } .@{css-prefix}-loading span:nth-child(5) { -webkit-animation-delay: 0.65s; } @import './mixin.less'; @import './base.less'; @import './grid.less'; @import './design.less'; .@{css-prefix}-page { display: block; min-height: 100%; } .@{css-prefix}-header { position: absolute; left: 0; top: 0; height: 50px; width: 100%; background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #f3f8fd 50%, #e5f0fa 100%); background: -webkit-linear-gradient(top, #ffffff 0%, #f3f8fd 50%, #e5f0fa 100%); background: linear-gradient(to bottom, #ffffff 0%, #f3f8fd 50%, #e5f0fa 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5f0fa', GradientType=0); display: flex; justify-content: space-between; font-size: 14px; color: #333; .@{css-prefix}-logo { // background: transparent url(logo.png) 50% 50% no-repeat; // width: 136px; // height: 40px; float: left; width: 140px; margin: 5px 0; } .@{css-prefix}-search { width: 240px; margin-right: 20px; } >.ltArea { padding:0; list-style: none; margin: 0; .logoStyle{ display: flex; align-items: center; } >li{ float: left; height: 100%; // padding:5px 5px 0; .sysTrigger{ line-height: 50px !important; padding:0 5px; // border-left:1px #aaa solid; line-height: 1; cursor: pointer; .icon { display: inline-block; height: 16px; width: 16px; } .iconfont{ font-size:14px; margin-left:5px; color:#aaa; } } } } >.rtArea { list-style: none; margin: 0; padding: 9px 5px 0 0; li { float: left; padding:0 5px; line-height: 30px; .item { display: block; word-wrap: normal; /* for IE */ white-space: nowrap; cursor: pointer; color:#076ce0; position: relative; .iconfont { color: #076ce0; margin-right: 5px; display: inline-block; vertical-align: middle; } &:hover, &:hover .iconfont{ color:#f30; } .tip, .title { position: relative; display: inline-block; vertical-align: middle; } .@{css-prefix}-head-tipsNum{ position: absolute; top:-5px; left:calc(100% - 10px); height:16px; line-height:16px; background-color: #f00; font-size: 12px; color: #fff; text-align: center; padding: 0 5px; border-radius: 8px; } } .line { height: 15px; margin: 0; display: inline-block; vertical-align: middle; border-right: 1px #d9d9d9 solid; } } } } .@{css-prefix}-header[data-layout='level']{ background: #06c; >.ltArea>li .sysTrigger{ color:#fff; .iconfont{ color:#fff; } } >.rtArea li .item{ color:#fff; .iconfont{ color:#fff; } } } .@{css-prefix}-search { display: block; border: 1px #eee solid; background: #fff; border-radius: 50px; overflow: hidden; position: relative; >.iconfont { position: absolute; right: 8px; top: 0; font-size: 20px; color: #999; } .@{css-prefix}-search-text { border: 0; padding: 5px 15px; outline: 0; line-height: 20px; display: block; width: 100%; box-sizing: border-box; } } .@{css-prefix}-navbar { position: absolute; top: 50px; left: 0; height: 48px; width: 100%; background-color: #0066cc; color: #fff; z-index: 10; >.allFunc, >.history { float: left; padding: 0 15px; width: 100px; line-height: 48px; height: 48px; text-align: center; cursor: pointer; display: inline-flex; overflow: hidden; .icon { display: inline-block; height: 16px; width: 16px; } .title { font-size: 14px; padding: 0 5px; display: inline-block; } } >.menusArea{ margin-left:130px; >.arrRt, >.arrLt{ width: 30px; line-height: 48px; text-align: center; cursor: pointer; &:hover{ background: #4d94db; } } >.arrRt{ float: right; } >.arrLt{ float: left; } >.scroll{ margin:0 auto; line-height: 48px; height: 48px; overflow: hidden; } &.hasMenusBtn>.scroll{ margin:0 30px; } } >.allFunc { float: right; } } .@{css-prefix}-sidebar { position: absolute; top: 98px; left: 0; bottom: 0; width: 70px; border-right: 1px #ced7e0 solid; .menus { margin: 0; padding: 0; list-style: none; .item { padding: 8px 2px; text-align: center; cursor: pointer; .box { display: inline-block; margin: 0 auto; padding: 0; position: relative; img{ display: block; overflow: hidden; border-radius: 50%; } .iconfont { display: block; border-radius: 50%; width: 46px; height: 46px; line-height: 46px; font-size: 24px; color: #fff; text-align: center; } .tip { position: absolute; right: -5px; top: -5px; font-size: 12px; font-weight: normal; background: #ff3300; color: #fff; border-radius: 50px; padding: 3px; min-width: 15px; } } .title { padding-top: 5px; display: block; font-size: 12px!important; word-wrap: normal; /* for IE */ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } } .item:hover { .iconfont { box-shadow: 0 0 5px #ff3300; } .title { color: #ff3300; } } .itemBg1 .iconfont { background-color: #64d0c6; } .itemBg2 .iconfont { background-color: #1f85ec; } .itemBg3 .iconfont { background-color: #5246c5; } .itemBg4 .iconfont { background-color: #ff6d68; } .itemBg5 .iconfont { background-color: #26a3ed; } .itemBg6 .iconfont { background-color: #f9b954; } .itemBg7 .iconfont { background-color: #24bde3; } .itemBg8 .iconfont { background-color: #00d58b; } } } .@{css-prefix}-sideMenus{ line-height: 32px; padding-inline-start: 0; } .@{css-prefix}-sideMenus li{ list-style-type:none; padding-left: 40px; border-bottom: 1px solid #151d2a; cursor: pointer; } // .@{css-prefix}-sideMenus li::after{ // content: '>'; // color: #363d48; // right: 10px; // position: absolute; // } .@{css-prefix}-sideMenus .trigger{ float: right; margin-right: 15px; color: #363d48; } .@{css-prefix}-main { position: absolute; top: 98px; left: 71px; right: 0; bottom: 0; } .@{css-prefix}-menus { list-style: none; padding: 0; margin: 0; .@{css-prefix}-menus-item { position: relative; .title { display: block; height: 100%; padding: 0 15px; cursor: pointer; word-wrap: normal; /* for IE */ // text-overflow: ellipsis; // overflow: hidden; white-space: nowrap; .icon { display: inline-block; margin-right: 5px; vertical-align: middle } .txt { display: inline-block; vertical-align: middle; font-size:14px; } } } } .@{css-prefix}-menus-horizontal { overflow: hidden; zoom: 1; .@{css-prefix}-menus-item { float: left; font-size: 14px!important; } >.@{css-prefix}-menus-itemSeld { background: #4d94db; color: #fff; } } .@{css-prefix}-menus-pop { position: absolute; left: 0; top: 0; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); display: none; z-index: 100; overflow:auto; >.@{css-prefix}-menus-item { min-width: 150px; color: #333; &:hover { background: #0066cc; color: #fff; } .title { padding: 5px 10px; display: block; line-height: 25px; .txt{ vertical-align: middle; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; min-width: 120px; font-size:14px; } } .trigger { line-height: 25px; float: right; } } >.@{css-prefix}-menus-itemSeld { background: #d4eaff; color: #06c; >.@{css-prefix}-menus-pop { display: block !important; left: 100% !important; } } >.@{css-prefix}-menus-tips{ background: #fff; color: #999; padding: 5px 10px; display: block; line-height: 25px; text-align: center; } } .@{css-prefix}-Smenus-horizontal{ overflow: auto; box-sizing: border-box; &::-webkit-scrollbar { height:2px; width:2px; } } .@{css-prefix}-Smenus-horizontal .@{css-prefix}-Smenus-item{ line-height: 40px; //border-bottom: 1px solid #151d2a; // width: 140px; } .@{css-prefix}-Smenus-horizontal .@{css-prefix}-Smenus-item:hover{ background: #003060; color: #F86640; } .@{css-prefix}-Smenus-horizontal .@{css-prefix}-Smenus-itemSeld{ background: #003060; color: #F86640; } .@{css-prefix}-Smenus-horizontal .@{css-prefix}-Smenus-itemSeld .trigger{ color: #F86640 !important; } .@{css-prefix}-Smenus-horizontal .@{css-prefix}-Smenus-itemSeld .icon, .@{css-prefix}-Smenus-horizontal .@{css-prefix}-Smenus-item:hover .icon{ color: #F86640 !important; } .@{css-prefix}-Smenus{ list-style: none; padding: 0; margin: 0; padding:20px 0; .@{css-prefix}-Smenus-item { position: relative; border-bottom:1px solid #0D2A49; .title { display: block; height: 100%; padding: 10px 15px; cursor: pointer; word-wrap: normal; /* for IE */ // text-overflow: ellipsis; // overflow: hidden; white-space: nowrap; .icon { display: block; text-align:center; line-height: 20px; color:#fff; font-size: 20px; margin-right:5px; } .txt { display: block; font-size:14px; width: 40px; white-space: normal; line-height: 20px; margin:auto; text-align: center; } } .trigger { line-height: 40px; float: right; color: #363d48; display: none; } &.@{css-prefix}-Smenus-wordwrap{ .icon,.txt{ display: inline; } .txt{ white-space: nowrap; } } } } .@{css-prefix}-Smenus-pop { position: absolute; left: 0; top: 0; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); //display: none; width:auto; opacity: 0; z-index: 100; overflow:auto; padding:0; transition: width 0.3s; overflow-x: hidden; >.@{css-prefix}-Smenus-item { //min-width: 150px; color: #333; border:none; &:hover { //background: #0066cc; //color: #fff; color: #1D9ED7; } .title { padding: 5px 10px; display: block; line-height: 25px; .txt{ width:auto; vertical-align: middle; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; //min-width: 120px; font-size:14px; line-height:25px; display: inline-block; text-align: left; padding-right:20px; } } .trigger { line-height: 29px; float: right; display: block; } } >.@{css-prefix}-Smenus-itemSeld { background: #d4eaff; color: #06c; >.@{css-prefix}-Smenus-pop { display: block !important; left: 100% !important; } } >.@{css-prefix}-Smenus-tips{ background: #fff; color: #999; padding: 5px 10px; display: block; line-height: 25px; text-align: center; } } .@{css-prefix}-navbar { >.@{css-prefix}-menus-horizontal { line-height: 48px; margin: 0 130px; } } .@{css-prefix}-tabs { height: 100%; background: #fff; } .showTab .@{css-prefix}-tabs-hd{ position: absolute; // top:48px; width: 100%; } .@{css-prefix}-tabs-hd { height: 39px; background: #ebf1f7; border-bottom: 1px #ced7e0 solid; border-top: 1px #ced7e0 solid; font-size: 14px; .clearfix(); .@{css-prefix}-tabs-tool { float: right; .item { line-height: 39px; display: inline-block; padding: 0 5px; border-left: 1px #ced7e0 solid; cursor: pointer; &:hover { background: #0066cc; color: #fff; } } } .@{css-prefix}-tabs-scroll { overflow: hidden; position: relative; ul { .clearfix(); list-style: none; margin: 0; padding: 0; display: flex; >li { float: left; border-right: 1px #ced7e0 solid; } } .@{css-prefix}-tabs-item { line-height: 39px; padding: 0 20px; text-align: center; position: relative; cursor: pointer; >.@{css-prefix}-tabs-itemTxt { //width: 75px; display: block; word-wrap: normal; /* for IE */ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } &::after { position: absolute; bottom: 0; left: 0; width: 100%; border-bottom: 2px transparent solid; content: ""; } .@{css-prefix}-tabs-itemClose { position: absolute; right: 0; top: 0; color: #ccc; line-height: normal; &:hover { color: red; } } } .@{css-prefix}-tabs-itemSeld { >.@{css-prefix}-tabs-itemTxt { color: #0066cc; font-weight: bold; } &::after { border-color: #0066cc; } } } } .@{css-prefix}-tabpanel-bd { overflow: auto; font-size: 0;/*防止因html换行空字符导致的滚动条出现*/ .@{css-prefix}-tabs-panel { height:100%; iframe { border: 0; height: 100%; width: 100%; } } } .@{css-prefix}-portal-panel { border: 1px #ddd solid; background: #fff; border-radius: 5px; overflow: hidden; position: relative; box-shadow: 0 0 5px rgba(0, 0, 0, 0.05); &.@{css-prefix}-portal-panelHover { box-shadow: 0 0 5px rgba(250, 125, 60, 0.7); } >.@{css-prefix}-portal-panel-head { // padding:0 10px; >.tabs { padding: 0 10px; overflow: hidden; ul { list-style: none; margin: 0; padding: 0; word-wrap: normal; /* for IE */ white-space: nowrap; overflow: hidden; height: 38px; .clearfix(); >li { float: left; padding: 10px; border-bottom: 2px transparent solid; cursor: pointer; &.seld { color: #0066cc; border-color: #0066cc; } } } } >.tool { float: right; padding: 10px 10px 0 0; >.iconfont { margin-left: 5px; cursor: pointer; } } } >.@{css-prefix}-portal-panel-body { padding: 10px; } .@{css-prefix}-tabs-hd{ background: none; border:0; .@{css-prefix}-tabs-scroll ul>li, .@{css-prefix}-tabs-tool .item{ border:0; &:hover{ background: none; color:#333; } } .@{css-prefix}-tabs-tool .item>.iconfont{ border:1px #ccc solid; border-radius: 50%; &:hover{ background: #0066cc; color:#fff; border:1px #0066cc solid; } } } } .@{css-prefix}-logo-lg{ // height:230px; // background: transparent url(./logo_max.png) no-repeat 50% 50%; } .@{css-prefix}-noPower{ padding: 10px; text-align: center; >.iconfont{ margin: auto; display: inline-block; line-height: 50px; padding:10px; font-size:32px; color:#999; } >.txt{ margin: auto; display: inline-block; line-height: 50px; font-size:24px; color:#999; } } .@{css-prefix}-loading { width: 150px; height: 15px; margin: 0 auto; margin-top: 100px; } .@{css-prefix}-loading-fixed{ position: absolute; left:50%; top:50%; margin:-10px 0 0 -75px; } .@{css-prefix}-loading span { display: inline-block; width: 15px; height: 100%; margin-right: 5px; background: #0066cc; -webkit-transform-origin: right bottom; -webkit-animation: load 1s ease infinite; } .@{css-prefix}-loading span:last-child { margin-right: 0px; } @-webkit-keyframes load { 0% { opacity: 1; -webkit-transform: scale(1); } 100% { opacity: 0; -webkit-transform: rotate(90deg) scale(.3); } } .@{css-prefix}-loading span:nth-child(1) { -webkit-animation-delay: 0.13s; } .@{css-prefix}-loading span:nth-child(2) { -webkit-animation-delay: 0.26s; } .@{css-prefix}-loading span:nth-child(3) { -webkit-animation-delay: 0.39s; } .@{css-prefix}-loading span:nth-child(4) { -webkit-animation-delay: 0.52s; } .@{css-prefix}-loading span:nth-child(5) { -webkit-animation-delay: 0.65s; }

Ignore Space Show notes View project/hivuiMain/store/modules/user.js

import {baseLogin, logout} from '@main/api/login' import {getInfo,getBzList} from '@main/api/user' import { getToken, setToken, removeToken } from '@main/utils/auth' import {getUrlValue,getUrlSearch} from '@main/utils' import md5 from 'js-md5' if(window.Scp==null){ window.Scp = {} } if(window.Scp.User==null){ window.Scp.User={} } const user = { namespaced: true, state: { token: getToken(), avatar: '', introduction: '', roles: [], //后面加的 userInfo: {}, bzList: null, id:Scp.User.id, name:Scp.User.name, deptId:Scp.User.deptId, deptName:Scp.User.deptName, positionId:Scp.User.positionId, postionName:Scp.User.postionName, bzId:Scp.User.bzId, bzName:Scp.User.bzName, bzDeptId:Scp.User.bzDeptId, bzDeptName:Scp.User.bzDeptName, bzPositionId:Scp.User.bzPositionId, bzPositionName:Scp.User.bzPositionName, orgId:Scp.User.orgId , defOrgId:Scp.User.defOrgId, showPwDialog:false, }, mutations: { SET_CODE: (state, code) => { state.code = code }, SET_TOKEN: (state, token) => { state.token = token }, SET_INTRODUCTION: (state, introduction) => { state.introduction = introduction }, SET_NAME: (state, name) => { state.name = name }, SET_AVATAR: (state, avatar) => { state.avatar = avatar }, SET_ROLES: (state, roles) => { state.roles = roles }, SET_USERINFO: (state, userInfo) => { state.userInfo = userInfo }, SET_BZLIST: (state, bzList) => { state.bzList = bzList }, SET_PWDIALOG: (state, isShow) => { state.showPwDialog = isShow }, }, actions: { load({ commit, state }) { }, // user login login({ commit }, userInfo) { let pushData={}; if(userInfo){ const { username, password } = userInfo pushData={ username: username.trim(), password: md5(password) }; } return new Promise((resolve, reject) => { if(window.HIVUI_SETTING.url!=location.origin){ let searchParams=getUrlSearch(location.href); delete searchParams.ticket; let service=location.origin+location.pathname+"?"; for(let k in searchParams){ service+=k+"="+searchParams[k]+"&"; } service=service.slice(0,-1); pushData={ type:"casPre", ticket:getUrlValue('','ticket'), service:service }; } baseLogin(pushData).then(response => { const data = response commit('SET_TOKEN', data.token) setToken(data.token) resolve() }).catch(error => { reject(error) }) }) }, // 多岗 getBzList({ commit, state }) { return new Promise((resolve, reject) => { getBzList().then(response => { let _arr=response.dataPack if (_arr) { if (!_arr || _arr.length < 0) { reject('getInfo: data must be a non-null array!') } commit("SET_BZLIST",_arr); resolve(_arr) }else{ reject('Verification failed, please Login again.'); } }).catch(error => { reject(error) }); }) }, // get user info getInfo({ commit, state }) { return new Promise((resolve, reject) => { getInfo().then(response => { if (!response.dataPack) { reject('Verification failed, please Login again.') } //const { info ,org} = response.data; const info = response.dataPack // if (!info) { // reject('Verification failed, please Login again.') // } //const { roles, name, avatar, introduction } = data window.Scp.User=info; let roles = ['admim'], avatar = "", introduction = "", name = info.fuserid, userInfo = info; // roles must be a non-empty array if (!roles || roles.length <= 0) { reject('getInfo: roles must be a non-null array!') } commit('SET_USERINFO', userInfo) commit('SET_ROLES', roles) commit('SET_NAME', name) commit('SET_AVATAR', avatar) commit('SET_INTRODUCTION', introduction) resolve(info) }).catch(error => { reject(error) }) }) }, // user logout logout({ commit, state }) { return new Promise((resolve, reject) => { if(!getToken()){ resolve(); }else{ logout().then(() => { commit('SET_TOKEN', ''); commit('SET_ROLES', []); removeToken(); resolve(); }).catch(error => { reject(error); }); } }); }, // remove token resetToken({ commit }) { return new Promise(resolve => { commit('SET_TOKEN', '') commit('SET_ROLES', []) removeToken() resolve() }) }, // dynamically modify permissions changeRoles({ commit, dispatch }, role) { return new Promise(async resolve => { const token = role + '-token' commit('SET_TOKEN', token) setToken(token) const { roles } = await dispatch('getInfo') //resetRouter() // generate accessible routes map based on roles const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true }) // dynamically add accessible routes router.addRoutes(accessRoutes) // reset visited views and cached views dispatch('tagsView/delAllViews', null, { root: true }) resolve() }) }, //修改密码弹窗 showPwDialog({ commit, dispatch }, isShow){ commit('SET_PWDIALOG', isShow); }, } } export default user import {baseLogin, logout} from '@main/api/login' import {getInfo,getBzList} from '@main/api/user' import { getToken, setToken, removeToken } from '@main/utils/auth' import {getUrlValue,getUrlSearch} from '@main/utils' import md5 from 'js-md5' if(window.Scp==null){ window.Scp = {} } if(window.Scp.User==null){ window.Scp.User={} } const user = { namespaced: true, state: { token: getToken(), avatar: '', introduction: '', roles: [], //后面加的 userInfo: {}, bzList: null, id:Scp.User.id, name:Scp.User.name, deptId:Scp.User.deptId, deptName:Scp.User.deptName, positionId:Scp.User.positionId, postionName:Scp.User.postionName, bzId:Scp.User.bzId, bzName:Scp.User.bzName, bzDeptId:Scp.User.bzDeptId, bzDeptName:Scp.User.bzDeptName, bzPositionId:Scp.User.bzPositionId, bzPositionName:Scp.User.bzPositionName, orgId:Scp.User.orgId , defOrgId:Scp.User.defOrgId, showPwDialog:false, }, mutations: { SET_CODE: (state, code) => { state.code = code }, SET_TOKEN: (state, token) => { state.token = token }, SET_INTRODUCTION: (state, introduction) => { state.introduction = introduction }, SET_NAME: (state, name) => { state.name = name }, SET_AVATAR: (state, avatar) => { state.avatar = avatar }, SET_ROLES: (state, roles) => { state.roles = roles }, SET_USERINFO: (state, userInfo) => { state.userInfo = userInfo }, SET_BZLIST: (state, bzList) => { state.bzList = bzList }, SET_PWDIALOG: (state, isShow) => { state.showPwDialog = isShow }, }, actions: { load({ commit, state }) { }, // user login login({ commit }, userInfo) { let pushData={}; if(userInfo){ const { username, password } = userInfo pushData={ username: username.trim(), password: md5(password) }; } return new Promise((resolve, reject) => { if(window.HIVUI_SETTING.url!=location.origin){ let searchParams=getUrlSearch(location.href); delete searchParams.ticket; let service=location.origin+location.pathname+"?"; for(let k in searchParams){ service+=k+"="+searchParams[k]+"&"; } service=service.slice(0,-1); pushData={ type:"casPre", ticket:getUrlValue('','ticket'), service:service }; } baseLogin(pushData).then(response => { const data = response commit('SET_TOKEN', data.token) setToken(data.token) resolve() }).catch(error => { reject(error) }) }) }, // 多岗 getBzList({ commit, state }) { return new Promise((resolve, reject) => { getBzList().then(response => { let _arr=response.dataPack if (_arr) { if (!_arr || _arr.length < 0) { reject('getInfo: data must be a non-null array!') } commit("SET_BZLIST",_arr); resolve(_arr) }else{ reject('Verification failed, please Login again.'); } }).catch(error => { reject(error) }); }) }, // get user info getInfo({ commit, state }) { return new Promise((resolve, reject) => { getInfo().then(response => { if (!response.dataPack) { reject('Verification failed, please Login again.') } //const { info ,org} = response.data; const info = response.dataPack // if (!info) { // reject('Verification failed, please Login again.') // } //const { roles, name, avatar, introduction } = data let roles = ['admim'], avatar = "", introduction = "", name = info.fuserid, userInfo = info; // roles must be a non-empty array if (!roles || roles.length <= 0) { reject('getInfo: roles must be a non-null array!') } commit('SET_USERINFO', userInfo) commit('SET_ROLES', roles) commit('SET_NAME', name) commit('SET_AVATAR', avatar) commit('SET_INTRODUCTION', introduction) resolve(info) }).catch(error => { reject(error) }) }) }, // user logout logout({ commit, state }) { return new Promise((resolve, reject) => { if(!getToken()){ resolve(); }else{ logout().then(() => { commit('SET_TOKEN', ''); commit('SET_ROLES', []); removeToken(); resolve(); }).catch(error => { reject(error); }); } }); }, // remove token resetToken({ commit }) { return new Promise(resolve => { commit('SET_TOKEN', '') commit('SET_ROLES', []) removeToken() resolve() }) }, // dynamically modify permissions changeRoles({ commit, dispatch }, role) { return new Promise(async resolve => { const token = role + '-token' commit('SET_TOKEN', token) setToken(token) const { roles } = await dispatch('getInfo') //resetRouter() // generate accessible routes map based on roles const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true }) // dynamically add accessible routes router.addRoutes(accessRoutes) // reset visited views and cached views dispatch('tagsView/delAllViews', null, { root: true }) resolve() }) }, //修改密码弹窗 showPwDialog({ commit, dispatch }, isShow){ commit('SET_PWDIALOG', isShow); }, } } export default user

Ignore Space Show notes View project/hivuiMain/utils/index.js

import getScroll from './getScroll' export function getTargetRect(target) { return target !== window ? target.getBoundingClientRect() : { top: 0, left: 0, bottom: 0 }; } export function getOffset(element, target) { const elemRect = element.getBoundingClientRect(); const targetRect = getTargetRect(target); const scrollTop = getScroll(target, true); const scrollLeft = getScroll(target, false); const docElem = window.document.body; const clientTop = docElem.clientTop || 0; const clientLeft = docElem.clientLeft || 0; return { top: elemRect.top - targetRect.top + scrollTop - clientTop, left: elemRect.left - targetRect.left + scrollLeft - clientLeft, width: elemRect.width, height: elemRect.height, }; } export function getDefaultTarget() { return typeof window !== 'undefined' ? window : null; } /** * @method setUrlValue * @description 设置地址栏参数值 * @param url * @param pName * @param pValue * * @example: urlAppend("http://www.fdauto.com","userid=03870");�����http://www.fdauto.com?userid=03870;1` * urlAppend("http://www.fdauto.com?userid=03870","bumen=aj")�����http://www.fdauto.com?userid=03870&bumen=aj; */ export function setUrlValue(url, key, value) { var returnUrl = '' if (url.indexOf('?') == -1) { returnUrl += url + '?' + key + '=' + value } else { if (url.indexOf('?' + key + '=') == -1 && url.indexOf('&' + key + '=') == -1) { returnUrl += url + '&' + key + '=' + value } else { var isDone = false var startIndex = 0 var endIndex = url.length - 1 var parm = '?' + key + '=' for (var i = 0; i < url.length; i++) { if (url.substr(i, parm.length) == parm) { startIndex = i + parm.length for (var j = startIndex; j < url.length; j++) { if (url[j] == '&') { endIndex = j break } else if (j == url.length - 1) { endIndex = url.length } } isDone = true break } } if (!isDone) { parm = '&' + key + '=' for (var i = 0; i < url.length; i++) { if (url.substr(i, parm.length) == parm) { startIndex = i + parm.length for (var j = startIndex; j < url.length; j++) { if (url[j] == '&') { endIndex = j break } else if (j == url.length - 1) { endIndex = url.length } } break } } } var parmKeyValue = parm + url.substring(startIndex, endIndex) returnUrl = url.replace(parmKeyValue, parm + value) } } return returnUrl } /** * @method getUrlValue * @description 获取地址栏参数值 * @param name * string * @param url * string * @example: getUrlValue("p","http://www.baidu.com?p=5"); */ export function getUrlValue(url, name) { var str = url || window.location.search; if (str.indexOf("&" + name) != -1 || str.indexOf("?" + name) != -1) { var pos_start = "" if (str.indexOf("?" + name) > -1) pos_start = str.indexOf("?" + name) + name.length + 2; else pos_start = str.indexOf("&" + name) + name.length + 2; var pos_end = str.indexOf("&", pos_start); if (pos_end == -1) { return str.substring(pos_start); } else { return str.substring(pos_start, pos_end) } } else { return ""; } } export function getUrlSearch(url) { var name, value; var str = url; //取得整个地址栏 var num = str.indexOf("?") str = str.substr(num + 1); //取得所有参数 stringvar.substr(start [, length ] var arr = str.split("&"); //各个参数放到数组里 var search ={}; for (var i = 0; i < arr.length; i++) { num = arr[i].indexOf("="); if (num > 0) { name = arr[i].substring(0, num); value = arr[i].substr(num + 1); search[name] = value; } } return search; } /** * var str='这是一个测试的字符串：{0} {1}'.format('Hello','world'); * var str='这是一个测试的字符串：{str0} {str1}'.format({str0:'Hello',str1:'world'}); */ export function strFormat(str, args) { var result = str; if (arguments.length > 0) { if (arguments.length == 2 && typeof (args) == "object") { for (var key in args) { if (args[key] != undefined) { var reg = new RegExp("({" + key + "})", "g"); result = result.replace(reg, args[key]); } } } else { for (var i = 1; i < arguments.length; i++) { if (arguments[i] != undefined) { var reg = new RegExp("({)" + (i - 1) + "(})", "g"); result = result.replace(reg, arguments[i]); } } } } return result; } export function closeWindow(errorUrl){ if (document.all) { if (window.location.pathname == window.parent.location.pathname) { window.opener = null; window.open('', '_top'); window.top.close(); } } else { window.close(); } window.location.href = errorUrl || "about:blank"; } /*5.0替换3.0菜单字段*/ export function field5Change3(_arr){ /*5.0字段替换3.0*/ let fieldConversion={ isActive:"fisactive", isOffline:"fisoffline", isShow:"fshow", name:"fresname", orderIndex:"forder", parentId:"frespguid", resId:"fresguid", resUrl:"fresurl", type:"frestype", iconClass:"ficonclass", }; _arr.map(item=>{ if(item.children&&item.children.length>0){ field5Change3(item.children); } for(let i in fieldConversion){ if(typeof(item[fieldConversion[i]])!="undefined"){ item[i]=item[fieldConversion[i]]; delete item[fieldConversion[i]]; } } if(!window._global){//正式环境 item.resUrl=window.HIVUI_SETTING.serverName+item.resUrl; } return item; }); return _arr; } export function turnMenuTree(data,isNotTop) {//data:平级数据;isNotTop:输出数据是否不包含根节点 let map = {}; let val = []; //生成数据对象集合 data.forEach(it=>{ map[it.resId] = it; //resId为每个节点的id if(it.parentId==-1&&it.type=="root"){ isNotTop=true; } }); //生成结果集 data.forEach(it=>{ let parent = map[it.parentId]; //parentId为父节点的id if(parent){ if(!Array.isArray(parent.children)) parent.children = []; parent.children.push(it); }else{ val.push(it) } }); val=__sort(val); //排序 function __sort(__data,orderField="orderIndex"){ let zeroArr=__data.filter(item=>{ return item[orderField]==0; }); let normalArr=__data.filter(item=>{ return item[orderField]!=0; }); normalArr.sort((a,b)=>{ var value1 = a[orderField]; var value2 = b[orderField]; return value1 - value2; }); __data=normalArr.concat(zeroArr); for(let i of __data){ if(i.children&&i.children.length>0){ i.children=__sort(i.children); } } return __data; } //排查子节点是否全部不显示 function __filterHide(__data,total){ let count=0; for(let i=0;i<__data.length;i++){ if(__data[i].children&&__data[i].children.length>0){ if(!__filterHide(__data[i].children,__data[i].children.length)){ __data[i].isShow=0; count++; } }else{ if(!__data[i].isShow){ count++; } } } return count!=total; } let __result=isNotTop?(val[0]&&val[0].children):val; __filterHide(__result,__result.length); return __result; } import getScroll from './getScroll' export function getTargetRect(target) { return target !== window ? target.getBoundingClientRect() : { top: 0, left: 0, bottom: 0 }; } export function getOffset(element, target) { const elemRect = element.getBoundingClientRect(); const targetRect = getTargetRect(target); const scrollTop = getScroll(target, true); const scrollLeft = getScroll(target, false); const docElem = window.document.body; const clientTop = docElem.clientTop || 0; const clientLeft = docElem.clientLeft || 0; return { top: elemRect.top - targetRect.top + scrollTop - clientTop, left: elemRect.left - targetRect.left + scrollLeft - clientLeft, width: elemRect.width, height: elemRect.height, }; } export function getDefaultTarget() { return typeof window !== 'undefined' ? window : null; } /** * @method setUrlValue * @description 设置地址栏参数值 * @param url * @param pName * @param pValue * * @example: urlAppend("http://www.fdauto.com","userid=03870");�����http://www.fdauto.com?userid=03870;1` * urlAppend("http://www.fdauto.com?userid=03870","bumen=aj")�����http://www.fdauto.com?userid=03870&bumen=aj; */ export function setUrlValue(url, key, value) { var returnUrl = '' if (url.indexOf('?') == -1) { returnUrl += url + '?' + key + '=' + value } else { if (url.indexOf('?' + key + '=') == -1 && url.indexOf('&' + key + '=') == -1) { returnUrl += url + '&' + key + '=' + value } else { var isDone = false var startIndex = 0 var endIndex = url.length - 1 var parm = '?' + key + '=' for (var i = 0; i < url.length; i++) { if (url.substr(i, parm.length) == parm) { startIndex = i + parm.length for (var j = startIndex; j < url.length; j++) { if (url[j] == '&') { endIndex = j break } else if (j == url.length - 1) { endIndex = url.length } } isDone = true break } } if (!isDone) { parm = '&' + key + '=' for (var i = 0; i < url.length; i++) { if (url.substr(i, parm.length) == parm) { startIndex = i + parm.length for (var j = startIndex; j < url.length; j++) { if (url[j] == '&') { endIndex = j break } else if (j == url.length - 1) { endIndex = url.length } } break } } } var parmKeyValue = parm + url.substring(startIndex, endIndex) returnUrl = url.replace(parmKeyValue, parm + value) } } return returnUrl } /** * @method getUrlValue * @description 获取地址栏参数值 * @param name * string * @param url * string * @example: getUrlValue("p","http://www.baidu.com?p=5"); */ export function getUrlValue(url, name) { var str = url || window.location.search; if (str.indexOf("&" + name) != -1 || str.indexOf("?" + name) != -1) { var pos_start = "" if (str.indexOf("?" + name) > -1) pos_start = str.indexOf("?" + name) + name.length + 2; else pos_start = str.indexOf("&" + name) + name.length + 2; var pos_end = str.indexOf("&", pos_start); if (pos_end == -1) { return str.substring(pos_start); } else { return str.substring(pos_start, pos_end) } } else { return ""; } } export function getUrlSearch(url) { var name, value; var str = url; //取得整个地址栏 var num = str.indexOf("?") str = str.substr(num + 1); //取得所有参数 stringvar.substr(start [, length ] var arr = str.split("&"); //各个参数放到数组里 var search ={}; for (var i = 0; i < arr.length; i++) { num = arr[i].indexOf("="); if (num > 0) { name = arr[i].substring(0, num); value = arr[i].substr(num + 1); search[name] = value; } } return search; } /** * var str='这是一个测试的字符串：{0} {1}'.format('Hello','world'); * var str='这是一个测试的字符串：{str0} {str1}'.format({str0:'Hello',str1:'world'}); */ export function strFormat(str, args) { var result = str; if (arguments.length > 0) { if (arguments.length == 2 && typeof (args) == "object") { for (var key in args) { if (args[key] != undefined) { var reg = new RegExp("({" + key + "})", "g"); result = result.replace(reg, args[key]); } } } else { for (var i = 1; i < arguments.length; i++) { if (arguments[i] != undefined) { var reg = new RegExp("({)" + (i - 1) + "(})", "g"); result = result.replace(reg, arguments[i]); } } } } return result; } export function closeWindow(errorUrl){ if (document.all) { if (window.location.pathname == window.parent.location.pathname) { window.opener = null; window.open('', '_top'); window.top.close(); } } else { window.close(); } window.location.href = errorUrl || "about:blank"; } /*5.0替换3.0菜单字段*/ export function field5Change3(_arr){ /*5.0字段替换3.0*/ let fieldConversion={ isActive:"fisactive", isOffline:"fisoffline", isShow:"fshow", name:"fresname", orderIndex:"forder", parentId:"frespguid", resId:"fresguid", resUrl:"fresurl", type:"frestype", }; _arr.map(item=>{ if(item.children&&item.children.length>0){ field5Change3(item.children); } for(let i in fieldConversion){ if(typeof(item[fieldConversion[i]])!="undefined"){ item[i]=item[fieldConversion[i]]; delete item[fieldConversion[i]]; } } if(!window._global){//正式环境 item.resUrl=window.HIVUI_SETTING.serverName+item.resUrl; } return item; }); return _arr; } export function turnMenuTree(data,isNotTop) {//data:平级数据;isNotTop:输出数据是否不包含根节点 let map = {}; let val = []; //生成数据对象集合 data.forEach(it=>{ map[it.resId] = it; //resId为每个节点的id if(it.parentId==-1&&it.type=="root"){ isNotTop=true; } }); //生成结果集 data.forEach(it=>{ let parent = map[it.parentId]; //parentId为父节点的id if(parent){ if(!Array.isArray(parent.children)) parent.children = []; parent.children.push(it); }else{ val.push(it) } }); val=__sort(val); //排序 function __sort(__data,orderField="orderIndex"){ let zeroArr=__data.filter(item=>{ return item[orderField]==0; }); let normalArr=__data.filter(item=>{ return item[orderField]!=0; }); normalArr.sort((a,b)=>{ var value1 = a[orderField]; var value2 = b[orderField]; return value1 - value2; }); __data=normalArr.concat(zeroArr); for(let i of __data){ if(i.children&&i.children.length>0){ i.children=__sort(i.children); } } return __data; } //排查子节点是否全部不显示 function __filterHide(__data,total){ let count=0; for(let i=0;i<__data.length;i++){ if(__data[i].children&&__data[i].children.length>0){ if(!__filterHide(__data[i].children,__data[i].children.length)){ __data[i].isShow=0; count++; } }else{ if(!__data[i].isShow){ count++; } } } return count!=total; } let __result=isNotTop?(val[0]&&val[0].children):val; __filterHide(__result,__result.length); return __result; }

Ignore Space Show notes View project/hivuiMain/views/layout/components/Header.vue

<template> <div class="pl-header " :data-layout="layout"> <ul class="ltArea"> <li v-if="layout=='level'" class="logoStyle"> <div class="pl-logo" :style="{width: sideWidth}"> <div v-if="hasTitle" @click="hideTitle(false)"> <img :src="def_sy_logo_horizon" :width="sideWidth" v-if="logoSrc==''"> <img :src="logoSrc" :width="sideWidth" v-if="logoSrc!=''"> </div> <div v-else @click="hideTitle(true)"> <img :src="def_sy_minLogo" v-if="MlogoSrc==''"> <img :src="MlogoSrc" :width="sideWidth" v-if="MlogoSrc!=''"> </div> </div> </li> <li v-else> <div :style="{width: sideWidth}" class="pl-logo"> <img :src="def_sy_logo" :width="sideWidth" v-if="logoSrc==''"> <img :src="logoSrc" :width="sideWidth" v-if="logoSrc!=''"> </div> </li> <li v-if="sysList.length"> <div class="sysTrigger" ref='dom-sysList' @mouseover="handleShowSysList" @mouseout="handleHideSysList"> <span>{{$lang("projectManage")||"项目管理"}}</span> <i class="iconfont icon-change"></i> </div> <ul class="pl-menus pl-menus-sub pl-menus-pop" @mouseenter="handleShowSysList" @mouseleave="handleHideSysList" :style="sysListStyle" v-add2Body> <li class="pl-menus-item" v-for="item,index in sysList" @click="handleChangeSys(item)"> <a class="title"><span class="txt">{{item.title}}111</span></a> </li> </ul> </li> <li v-if="layout == 'level'" > <div class="sysTrigger" ref="dom-latelyUse" :title='$lang("recentlyUsed")||"最近使用"' @mouseenter="handleShowLatelyUse" @mouseleave="handleHideLatelyUse"> <i class="icon iconfont icon-time"></i> <span class="title">{{$lang("recentlyUsed")||"最近使用"}}</span> <i class="icon iconfont icon-arrow-down"></i> </div> <ul class="pl-menus pl-menus-sub pl-menus-pop" @mouseenter="handleShowLatelyUse" @mouseleave="handleHideLatelyUse" :style="latelyUseStyle" v-add2Body> <li class="pl-menus-item" v-for="item,index in navsLatelyUse" @click="handleOpenLatelyFunc(item)"> <a class="title"><span class="txt">{{item.name}}</span></a> </li> <li v-show="navsLatelyUse.length==0" class="pl-menus-tips"> {{$lang("noData")||"暂无数据"}} </li> </ul> </li> <li v-if="layout == 'level11111'" > <div class="sysTrigger"> <span>{{$lang("allFunction")||"全部功能"}}</span> <i class="iconfont icon-arrow-down"></i> </div> </li> </ul> <ul class="rtArea"> <li> <div class="pl-search" ref="dom-searchBox" > <input ref="dom-seachTxt" class="pl-search-text" type="text" :placeholder="$lang('searchKey')||'搜索关键字'" v-model.trim="searchWord" @keyup="handleSeachKeyUp" /> <i class="iconfont icon-search"></i> </div> <ul class="pl-menus pl-menus-sub pl-menus-pop" :style="searchMenusStyle" v-add2Body> <li :class="['pl-menus-item',seldIndex==index?'pl-menus-itemSeld':'']" v-for="item,index in searchList" style="width:100%" @click="openFunc(item)"> <a class="title"><span class="txt" v-html="item.html||item.name"></span></a> </li> <li v-show="searchList.length==0&&searchWord.length>0" class="pl-menus-tips"> {{$lang("noData")||"暂无数据"}} </li> </ul> </li> <li v-if="sysProjectManage"> <a :href="sysProjectManage.url" target='_blank' class="item" :title="sysProjectManage.name"> <i class="iconfont" :class="sysProjectManage.iconClass"></i> <span class="title">{{sysProjectManage.name}}</span> </a> </li> <template v-for="item in sysFuncMenus"> <li v-if="item.type!='split'"> <template v-if="item.type=='withNumTips'"> <div class="item" @click.prevent="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html||item.name"></span> <span class="pl-head-tipsNum" :hidden="!(item.tipNum&&item.tipNum!=0)">{{item.tipNum}}</span> </div> </template> <template v-else> <template v-if="item.children&&item.children.length"> <div class="item" @mouseenter="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html||item.name"></span> <i class="iconfont icon-arrow-down" v-if="item.children"></i> </div> </template> <template v-if="!item.children||item.children&&item.children.length==0"> <div class="item" @click.prevent="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html||item.name"></span> <i class="iconfont icon-arrow-down" v-if="item.children"></i> </div> </template> </template> </li> <li v-if="item.type=='split'"><div class="line"></div></li> </template> <!-- <li> <div class="item"> <div class="tip"> <i class="iconfont icon-user"></i> </div> <span class="title">{{this.$store.getters.userId}}/{{this.$store.getters.userName}}</span> <i class="iconfont icon-arrow-down"></i> </div> </li> <li><div class="line"></div></li> --> <!-- 用户信息 --> <li> <template v-if="sysUserInfo.children&&sysUserInfo.children.length"> <div class="item" @mouseenter="handleFuncMenus(sysUserInfo,$event)"> <div class="tip"> <i class="iconfont" :class="sysUserInfo.iconClass"></i> </div> <span class="title" v-html="sysUserInfo.html||sysUserInfo.name"></span> <i class="iconfont icon-arrow-down" v-if="sysUserInfo.children"></i> </div> </template> </li> <li><div class="line"></div></li> <li v-if="hasSetting"> <div class="item" :title="$lang('customWorkbench')||'自定义工作台'"> <a href="#design" target='_blank'><i class="iconfont icon-set-fill"></i></a> </div> </li> <li> <div class="item" :title="$lang('logout')||'退出系统'"> <a @click="handleLogout"><i class="iconfont icon-tuichu"></i></a> </div> </li> </ul> <vueContextMenu ref="cmp-funcMenu" :menu-items="menuItems" field="name"></vueContextMenu> <modifyPw></modifyPw> </div> </template> <script> import pinyin from 'js-pinyin';//ie 下有问题 编译不过 import vueContextMenu from "@main/components/contextMenu"; import modifyPw from "@main/views/layout/components/modifyPw"; import {changeBz} from "@main/api/user"; import { removeToken } from '@main/utils/auth' import def_sy_loading from "@main/assets/logo_max.png" import def_sy_minLogo from "@main/assets/logo_min.png" import def_sy_logo from "@main/assets/logo.png" import def_sy_logo_horizon from "@main/assets/logo_horizon.png" export default { components:{ vueContextMenu, modifyPw, }, inject:['addTab','showTab','hideTab'], props:{ hasTitle:{ type: Boolean, }, sideWidth:{ type: String, } }, data(){ return { menuItems:[], searchWord:"", searchList:[], seldIndex:0, menuShow:false, searchMenusStyle:{ display:'none', left:0, top:0, width:0, // maxHeight:'50%', // overflow:'auto' }, sysListStyle:{ display:'none', left:0, top:0, }, latelyUseStyle:{ display:'none', left:0, top:0, maxHeight:'50%', overflow:'auto' }, def_sy_minLogo:def_sy_minLogo, def_sy_logo:def_sy_logo, def_sy_logo_horizon:def_sy_logo_horizon, numTipTimer:null, } }, computed:{ hasSetting(){ let cfg = this.$store.state.app.config||{}; return cfg.sysSetTabs&&cfg.sysSetTabs.length; }, sysList(){ let cfg = this.$store.state.app.config||{}; return cfg.sysList||[]; }, sysUserInfo(){ let me=this; let cfg = this.$store.state.app.config||{}; function replaceData(str){ if(!str)return ['',false]; var _arr=str.match(/\${(\S*?)}/g); var nullNum=0; if(_arr&&_arr.length>0){ for(let i of _arr){ var _data=me.userInfo[i.match(/\${(\S*)}/)[1]]; if(typeof(_data)!="undefined"){ str=str.replace(i,_data); }else{ str=str.replace(i,"空"); nullNum++; } } return [str,nullNum==_arr.length?false:true]; } return [str,true]; } let _userInfo=cfg.userInfo; if(_userInfo){ _userInfo.name=replaceData(_userInfo.name)[0]; if(_userInfo.children&&_userInfo.children.length>0){ _userInfo.children=_userInfo.children.filter((item)=>{ let _rData=replaceData(item.name); item.name=_rData[0]; switch(item.type){ case "modifyUserInfo": item.handler=me.modifyUserInfo; break; case "modifyPw": item.handler=me.modifyPw; break; case "orgBz": if(Array.isArray(me.bzList)&&me.bzList.length>1){ item.children=[]; for(let i of me.bzList){ item.children.push({ iconClass:'icon-user', name:`${i.fbzname}/${i.fbzid}`, handler:function(){ me.__changeOrgBz(`${i.fbzid}`); } }); } } break; } if(_rData[1]){ return item; } }); } } return _userInfo||[]; }, sysProjectManage(){ let cfg = this.$store.state.app.config||{}; let item = cfg.sysProjectMange||{},flag=false; this.$store.state.app.powerList.forEach(p=>{ if(p.resUrl.indexOf(item.uri)>-1){ flag = true; return true; } }); if(flag){ return cfg.sysProjectMange; }else{ return null; } }, sysFuncMenus(){ let cfg = this.$store.state.app.config||{}; let menus = cfg.sysFuncMenus||[]; return menus; }, logoSrc(){ let cfg = this.$store.state.app.config||{}; return (this.layout=="level"?(cfg.sysLogoHorizon&&cfg.sysLogoHorizon.src):(cfg.sysLogo&&cfg.sysLogo.src))||''; }, MlogoSrc(){ let cfg = this.$store.state.app.config||{}; return (cfg.MsysLogo&&cfg.MsysLogo.src)||''; }, layout(){ return window.localStorage.getItem('layout'); }, navsLatelyUse(){ return this.$store.getters.navsLatelyUse; }, token(){ return this.$store.getters.token; }, userInfo(){ return this.$store.state.user.userInfo; }, bzList(){ return this.$store.state.user.bzList; }, }, watch:{ searchWord(newVal,oldVal){ this.doSearch(newVal); } }, mounted(){ let me=this; document.addEventListener('click',me.hideSeachResult); me.$store.dispatch("app/getSysConfig"); me.sysFuncMenus.filter(item=>{ if(item.type=="withNumTips"&&item.numFunc){ function __intervalFunc(){ item.numFunc().then(res=>{ me.$set(item,"tipNum",res.num); if(res.num){ me.$notify.info({ title: '消息提示', //message: '您有'+res.num+'条未读消息', message: item.messageText(res), position: 'bottom-right', onClick:(evt)=>{ me.handleFuncMenus(item); } }); } }).catch(err=>{ clearInterval(me.numTipTimer); }); } clearInterval(me.numTipTimer); me.numTipTimer=setInterval(__intervalFunc,item.numIntervalTime||1000*30); __intervalFunc(); } }); }, beforeDestroy(){ document.removeEventListener('click',this.hideSeachResult) }, methods:{ openDesign(){ this.$refs['cmp-dd'].show(); }, doSearch(cnKey){ if(cnKey==""){ this.hideSeachResult(); return; } this.showSeachResult(); let list = [], records = this.$store.getters.menusList; let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase(); console.log('records', records) //let py = Scp.String.getPinyin(cnKey).toLocaleLowerCase(); let re = new RegExp("^[a-zA-Z]+$"); for(let i=0,l=records.length;i<l;i++){ let item = records[i]; if(list.length>10){ break; } if(re.test(cnKey)){ let y = pinyin.getCamelChars(item.name).toLocaleLowerCase(); //let y = Scp.String.getPinyin(item.name).toLocaleLowerCase(); if(y.indexOf(py)>-1 && item.type!='dir'){ list.push(item); } }else{ if(item.name.indexOf(cnKey)>-1 && item.type!='dir' ){ list.push(item); continue; } } } this.$set(this,'searchList',list); }, openFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name,item.resId) this.addTab(item);//inject 提供的方法只能 传一个参数 }, handleSearchBoxClick(){ this.doSearch(this.searchWord); this.$refs['dom-seachTxt'].focus(); }, handleSeachKeyUp(evt){ if(evt.keyCode==40){//ArrowDown if(this.seldIndex<this.searchList.length-1){ this.seldIndex++; }else{ this.seldIndex=0; } } if(evt.keyCode==38){//ArrowUp if(this.seldIndex==0){ this.seldIndex=this.searchList.length-1; }else{ this.seldIndex--; } } if(evt.keyCode==13){//enter let item = this.searchList[this.seldIndex]; if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name,item.resId); this.addTab(item);//inject 提供的方法只能 传一个参数 this.searchWord = ""; this.seldIndex = 0; this.hideSeachResult(); } }, showSeachResult(){ this.searchMenusStyle.display ='block'; let s = this.$refs["dom-searchBox"]; let rect = s.getBoundingClientRect(); this.searchMenusStyle.left = rect.left+'px'; this.searchMenusStyle.top = rect.top + rect.height + 5 +'px'; this.searchMenusStyle.width = rect.width+'px'; }, hideSeachResult(){ this.searchMenusStyle.display ='none'; }, handleChangeSys(item){ if(!item.url)return; if(item.target=="_blank"){ window.open(item.url) }else{ window.location.href=item.url; } }, handleShowSysList(){ this.sysListStyle.display ='block'; let s = this.$refs["dom-sysList"]; let rect = s.getBoundingClientRect(); this.sysListStyle.left = rect.left+'px'; this.sysListStyle.top = rect.top + rect.height +'px'; }, handleHideSysList(){ this.sysListStyle.display ='none'; }, handleFuncMenus(item,$event){ $event&&$event.stopPropagation(); if(item.type== "link"){ window.open(item.resUrl,item.name); return; } var _url=item.url; if(item.type== "widthToken"||item.type== "withToken"){ _url=item.url+"&access_token="+this.token; } if(item.url){ item.target=='tab'? this.addTab({ resUrl:_url, name:item.name, resId:item.id, }) : window.open(_url); return }else{ item.handler&&item.handler(); } if(item.children&&item.children.length){ this.menuItems = item.children; this.$refs['cmp-funcMenu'].open($event) } }, async handleLogout(){ await this.$store.dispatch("user/logout").then(()=>{ //removeToken(); if(window.HIVUI_SETTING.isSingleLogin&&window.HIVUI_SETTING.singleLogoutUrl){ location=window.HIVUI_SETTING.singleLogoutUrl; }else{ location=window.HIVUI_SETTING.loginUrl; } }); }, handleShowLatelyUse(){ this.$store.dispatch('app/getLatelyUse')//最近使用 let s = this.$refs["dom-latelyUse"]; let rect = s.getBoundingClientRect(); this.latelyUseStyle.display ='block'; this.latelyUseStyle.left = rect.left+'px'; this.latelyUseStyle.top = rect.top + rect.height +'px'; }, handleHideLatelyUse(){ this.latelyUseStyle.display ='none'; }, handleOpenLatelyFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } this.addTab({ resUrl:item.resUrl, name:item.name });//inject 提供的方法只能 传一个参数 }, hideTitle(name){ this.$emit('hideTitle', name); }, //切岗 __changeOrgBz(bzid){ changeBz({ bzid:bzid }).then(res=>{ window.location.reload(); }); }, modifyPw(){ this.$store.dispatch("user/showPwDialog",true); }, modifyUserInfo(){ }, } } </script> <style lang="less" scoped> .pl-header{ z-index: 99; } </style> <template> <div class="pl-header " :data-layout="layout"> <ul class="ltArea"> <li v-if="layout=='level'" class="logoStyle"> <div class="pl-logo" :style="{width: sideWidth}"> <div v-if="hasTitle" @click="hideTitle(false)"> <img :src="def_sy_logo_horizon" :width="sideWidth" v-if="logoSrc==''"> <img :src="logoSrc" :width="sideWidth" v-if="logoSrc!=''"> </div> <div v-else @click="hideTitle(true)"> <img :src="def_sy_minLogo" v-if="MlogoSrc==''"> <img :src="MlogoSrc" :width="sideWidth" v-if="MlogoSrc!=''"> </div> </div> </li> <li v-else> <div :style="{width: sideWidth}" class="pl-logo"> <img :src="def_sy_logo" :width="sideWidth" v-if="logoSrc==''"> <img :src="logoSrc" :width="sideWidth" v-if="logoSrc!=''"> </div> </li> <li v-if="sysList.length"> <div class="sysTrigger" ref='dom-sysList' @mouseover="handleShowSysList" @mouseout="handleHideSysList"> <span>{{$lang("projectManage")||"项目管理"}}</span> <i class="iconfont icon-change"></i> </div> <ul class="pl-menus pl-menus-sub pl-menus-pop" @mouseenter="handleShowSysList" @mouseleave="handleHideSysList" :style="sysListStyle" v-add2Body> <li class="pl-menus-item" v-for="item,index in sysList" @click="handleChangeSys(item)"> <a class="title"><span class="txt">{{item.title}}111</span></a> </li> </ul> </li> <li v-if="layout == 'level'" > <div class="sysTrigger" ref="dom-latelyUse" :title='$lang("recentlyUsed")||"最近使用"' @mouseenter="handleShowLatelyUse" @mouseleave="handleHideLatelyUse"> <i class="icon iconfont icon-time"></i> <span class="title">{{$lang("recentlyUsed")||"最近使用"}}</span> <i class="icon iconfont icon-arrow-down"></i> </div> <ul class="pl-menus pl-menus-sub pl-menus-pop" @mouseenter="handleShowLatelyUse" @mouseleave="handleHideLatelyUse" :style="latelyUseStyle" v-add2Body> <li class="pl-menus-item" v-for="item,index in navsLatelyUse" @click="handleOpenLatelyFunc(item)"> <a class="title"><span class="txt">{{item.name}}</span></a> </li> <li v-show="navsLatelyUse.length==0" class="pl-menus-tips"> {{$lang("noData")||"暂无数据"}} </li> </ul> </li> <li v-if="layout == 'level11111'" > <div class="sysTrigger"> <span>{{$lang("allFunction")||"全部功能"}}</span> <i class="iconfont icon-arrow-down"></i> </div> </li> </ul> <ul class="rtArea"> <li> <div class="pl-search" ref="dom-searchBox" > <input ref="dom-seachTxt" class="pl-search-text" type="text" :placeholder="$lang('searchKey')||'搜索关键字'" v-model.trim="searchWord" @keyup="handleSeachKeyUp" /> <i class="iconfont icon-search"></i> </div> <ul class="pl-menus pl-menus-sub pl-menus-pop" :style="searchMenusStyle" v-add2Body> <li :class="['pl-menus-item',seldIndex==index?'pl-menus-itemSeld':'']" v-for="item,index in searchList" style="width:100%" @click="openFunc(item)"> <a class="title"><span class="txt" v-html="item.html||item.name"></span></a> </li> <li v-show="searchList.length==0&&searchWord.length>0" class="pl-menus-tips"> {{$lang("noData")||"暂无数据"}} </li> </ul> </li> <li v-if="sysProjectManage"> <a :href="sysProjectManage.url" target='_blank' class="item" :title="sysProjectManage.name"> <i class="iconfont" :class="sysProjectManage.iconClass"></i> <span class="title">{{sysProjectManage.name}}</span> </a> </li> <template v-for="item in sysFuncMenus"> <li v-if="item.type!='split'"> <template v-if="item.type=='withNumTips'"> <div class="item" @click.prevent="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html||item.name"></span> <span class="pl-head-tipsNum" :hidden="!(item.tipNum&&item.tipNum!=0)">{{item.tipNum}}</span> </div> </template> <template v-else> <template v-if="item.children&&item.children.length"> <div class="item" @mouseenter="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html||item.name"></span> <i class="iconfont icon-arrow-down" v-if="item.children"></i> </div> </template> <template v-if="!item.children||item.children&&item.children.length==0"> <div class="item" @click.prevent="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html||item.name"></span> <i class="iconfont icon-arrow-down" v-if="item.children"></i> </div> </template> </template> </li> <li v-if="item.type=='split'"><div class="line"></div></li> </template> <!-- <li> <div class="item"> <div class="tip"> <i class="iconfont icon-user"></i> </div> <span class="title">{{this.$store.getters.userId}}/{{this.$store.getters.userName}}</span> <i class="iconfont icon-arrow-down"></i> </div> </li> <li><div class="line"></div></li> --> <!-- 用户信息 --> <li> <template v-if="sysUserInfo.children&&sysUserInfo.children.length"> <div class="item" @mouseenter="handleFuncMenus(sysUserInfo,$event)"> <div class="tip"> <i class="iconfont" :class="sysUserInfo.iconClass"></i> </div> <span class="title" v-html="sysUserInfo.html||sysUserInfo.name"></span> <i class="iconfont icon-arrow-down" v-if="sysUserInfo.children"></i> </div> </template> </li> <li><div class="line"></div></li> <li v-if="hasSetting"> <div class="item" :title="$lang('customWorkbench')||'自定义工作台'"> <a href="#design" target='_blank'><i class="iconfont icon-set-fill"></i></a> </div> </li> <li> <div class="item" :title="$lang('logout')||'退出系统'"> <a @click="handleLogout"><i class="iconfont icon-tuichu"></i></a> </div> </li> </ul> <vueContextMenu ref="cmp-funcMenu" :menu-items="menuItems" field="name"></vueContextMenu> <modifyPw></modifyPw> </div> </template> <script> import pinyin from 'js-pinyin';//ie 下有问题 编译不过 import vueContextMenu from "@main/components/contextMenu"; import modifyPw from "@main/views/layout/components/modifyPw"; import {changeBz} from "@main/api/user"; import { removeToken } from '@main/utils/auth' import def_sy_loading from "@main/assets/logo_max.png" import def_sy_minLogo from "@main/assets/logo_min.png" import def_sy_logo from "@main/assets/logo.png" import def_sy_logo_horizon from "@main/assets/logo_horizon.png" export default { components:{ vueContextMenu, modifyPw, }, inject:['addTab','showTab','hideTab'], props:{ hasTitle:{ type: Boolean, }, sideWidth:{ type: String, } }, data(){ return { menuItems:[], searchWord:"", searchList:[], seldIndex:0, menuShow:false, searchMenusStyle:{ display:'none', left:0, top:0, width:0, // maxHeight:'50%', // overflow:'auto' }, sysListStyle:{ display:'none', left:0, top:0, }, latelyUseStyle:{ display:'none', left:0, top:0, maxHeight:'50%', overflow:'auto' }, def_sy_minLogo:def_sy_minLogo, def_sy_logo:def_sy_logo, def_sy_logo_horizon:def_sy_logo_horizon, numTipTimer:null, } }, computed:{ hasSetting(){ let cfg = this.$store.state.app.config||{}; return cfg.sysSetTabs&&cfg.sysSetTabs.length; }, sysList(){ let cfg = this.$store.state.app.config||{}; return cfg.sysList||[]; }, sysUserInfo(){ let me=this; let cfg = this.$store.state.app.config||{}; function replaceData(str){ if(!str)return ['',false]; var _arr=str.match(/\${(\S*?)}/g); var nullNum=0; if(_arr&&_arr.length>0){ for(let i of _arr){ var _data=me.userInfo[i.match(/\${(\S*)}/)[1]]; if(typeof(_data)!="undefined"){ str=str.replace(i,_data); }else{ str=str.replace(i,"空"); nullNum++; } } return [str,nullNum==_arr.length?false:true]; } return [str,true]; } let _userInfo=cfg.userInfo; if(_userInfo){ _userInfo.name=replaceData(_userInfo.name)[0]; if(_userInfo.children&&_userInfo.children.length>0){ _userInfo.children=_userInfo.children.filter((item)=>{ let _rData=replaceData(item.name); item.name=_rData[0]; switch(item.type){ case "modifyUserInfo": item.handler=me.modifyUserInfo; break; case "modifyPw": item.handler=me.modifyPw; break; case "orgBz": if(Array.isArray(me.bzList)&&me.bzList.length>1){ item.children=[]; for(let i of me.bzList){ item.children.push({ iconClass:'icon-user', name:`${i.fbzname}/${i.fbzid}`, handler:function(){ me.__changeOrgBz(`${i.fbzid}`); } }); } } break; } if(_rData[1]){ return item; } }); } } return _userInfo||[]; }, sysProjectManage(){ let cfg = this.$store.state.app.config||{}; let item = cfg.sysProjectMange||{},flag=false; this.$store.state.app.powerList.forEach(p=>{ if(p.resUrl.indexOf(item.uri)>-1){ flag = true; return true; } }); if(flag){ return cfg.sysProjectMange; }else{ return null; } }, sysFuncMenus(){ let cfg = this.$store.state.app.config||{}; let menus = cfg.sysFuncMenus||[]; return menus; }, logoSrc(){ let cfg = this.$store.state.app.config||{}; return (this.layout=="level"?(cfg.sysLogoHorizon&&cfg.sysLogoHorizon.src):(cfg.sysLogo&&cfg.sysLogo.src))||''; }, MlogoSrc(){ let cfg = this.$store.state.app.config||{}; return (cfg.MsysLogo&&cfg.MsysLogo.src)||''; }, layout(){ return window.localStorage.getItem('layout'); }, navsLatelyUse(){ return this.$store.getters.navsLatelyUse; }, token(){ return this.$store.getters.token; }, userInfo(){ return this.$store.state.user.userInfo; }, bzList(){ return this.$store.state.user.bzList; }, }, watch:{ searchWord(newVal,oldVal){ this.doSearch(newVal); } }, mounted(){ let me=this; document.addEventListener('click',me.hideSeachResult); me.$store.dispatch("app/getSysConfig"); me.sysFuncMenus.filter(item=>{ if(item.type=="withNumTips"&&item.numFunc){ function __intervalFunc(){ item.numFunc().then(res=>{ me.$set(item,"tipNum",res.num); if(res.num){ me.$notify.info({ title: '消息提示', //message: '您有'+res.num+'条未读消息', message: item.messageText(res), position: 'bottom-right', onClick:(evt)=>{ me.handleFuncMenus(item); } }); } }).catch(err=>{ debugger; clearInterval(me.numTipTimer); }); } clearInterval(me.numTipTimer); me.numTipTimer=setInterval(__intervalFunc,item.numIntervalTime||1000*30); __intervalFunc(); } }); }, beforeDestroy(){ document.removeEventListener('click',this.hideSeachResult) }, methods:{ openDesign(){ this.$refs['cmp-dd'].show(); }, doSearch(cnKey){ if(cnKey==""){ this.hideSeachResult(); return; } this.showSeachResult(); let list = [], records = this.$store.getters.menusList; let py = pinyin.getCamelChars(cnKey).toLocaleLowerCase(); console.log('records', records) //let py = Scp.String.getPinyin(cnKey).toLocaleLowerCase(); let re = new RegExp("^[a-zA-Z]+$"); for(let i=0,l=records.length;i<l;i++){ let item = records[i]; if(list.length>10){ break; } if(re.test(cnKey)){ let y = pinyin.getCamelChars(item.name).toLocaleLowerCase(); //let y = Scp.String.getPinyin(item.name).toLocaleLowerCase(); if(y.indexOf(py)>-1 && item.type!='dir'){ list.push(item); } }else{ if(item.name.indexOf(cnKey)>-1 && item.type!='dir' ){ list.push(item); continue; } } } this.$set(this,'searchList',list); }, openFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name,item.resId) this.addTab(item);//inject 提供的方法只能 传一个参数 }, handleSearchBoxClick(){ this.doSearch(this.searchWord); this.$refs['dom-seachTxt'].focus(); }, handleSeachKeyUp(evt){ if(evt.keyCode==40){//ArrowDown if(this.seldIndex<this.searchList.length-1){ this.seldIndex++; }else{ this.seldIndex=0; } } if(evt.keyCode==38){//ArrowUp if(this.seldIndex==0){ this.seldIndex=this.searchList.length-1; }else{ this.seldIndex--; } } if(evt.keyCode==13){//enter let item = this.searchList[this.seldIndex]; if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name,item.resId); this.addTab(item);//inject 提供的方法只能 传一个参数 this.searchWord = ""; this.seldIndex = 0; this.hideSeachResult(); } }, showSeachResult(){ this.searchMenusStyle.display ='block'; let s = this.$refs["dom-searchBox"]; let rect = s.getBoundingClientRect(); this.searchMenusStyle.left = rect.left+'px'; this.searchMenusStyle.top = rect.top + rect.height + 5 +'px'; this.searchMenusStyle.width = rect.width+'px'; }, hideSeachResult(){ this.searchMenusStyle.display ='none'; }, handleChangeSys(item){ if(!item.url)return; if(item.target=="_blank"){ window.open(item.url) }else{ window.location.href=item.url; } }, handleShowSysList(){ this.sysListStyle.display ='block'; let s = this.$refs["dom-sysList"]; let rect = s.getBoundingClientRect(); this.sysListStyle.left = rect.left+'px'; this.sysListStyle.top = rect.top + rect.height +'px'; }, handleHideSysList(){ this.sysListStyle.display ='none'; }, handleFuncMenus(item,$event){ $event&&$event.stopPropagation(); if(item.type== "link"){ window.open(item.resUrl,item.name); return; } var _url=item.url; if(item.type== "widthToken"||item.type== "withToken"){ _url=item.url+"&access_token="+this.token; } if(item.url){ item.target=='tab'? this.addTab({ resUrl:_url, name:item.name, resId:item.id, }) : window.open(_url); return }else{ item.handler&&item.handler(); } if(item.children&&item.children.length){ this.menuItems = item.children; this.$refs['cmp-funcMenu'].open($event) } }, async handleLogout(){ await this.$store.dispatch("user/logout").then(()=>{ //removeToken(); if(window.HIVUI_SETTING.isSingleLogin&&window.HIVUI_SETTING.singleLogoutUrl){ location=window.HIVUI_SETTING.singleLogoutUrl; }else{ location=window.HIVUI_SETTING.loginUrl; } }); }, handleShowLatelyUse(){ this.$store.dispatch('app/getLatelyUse')//最近使用 let s = this.$refs["dom-latelyUse"]; let rect = s.getBoundingClientRect(); this.latelyUseStyle.display ='block'; this.latelyUseStyle.left = rect.left+'px'; this.latelyUseStyle.top = rect.top + rect.height +'px'; }, handleHideLatelyUse(){ this.latelyUseStyle.display ='none'; }, handleOpenLatelyFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } this.addTab({ resUrl:item.resUrl, name:item.name });//inject 提供的方法只能 传一个参数 }, hideTitle(name){ this.$emit('hideTitle', name); }, //切岗 __changeOrgBz(bzid){ changeBz({ bzid:bzid }).then(res=>{ window.location.reload(); }); }, modifyPw(){ this.$store.dispatch("user/showPwDialog",true); }, modifyUserInfo(){ }, } } </script> <style lang="less" scoped> .pl-header{ z-index: 99; } </style>

Ignore Space Show notes View project/hivuiMain/views/layout/components/Sidebar.vue

<template> <div v-if="layout == 'level'" class="pl-sidebar" :style="{width: this.sideWidth, background:'#002040',top:totop+'px',color:'#fff'}"> <div class="menusArea pl-cl"> <div class="scroll" ref="domSrcoll"> <Smenu ref="smenu" mode="horizontal" :style="{width: sideWidth,margin: 0,height:(window.innerHeight-totop)+'px'}"> <template v-for="(item,index) in menus"> <!-- <Smenu-item v-if="!item.children||!item.children.length" :icon="item.iconClass" @click="handleOpenFunc(item)">{{item.name}}</Smenu-item> --> <Smenu-item v-if="item.isShow&&!(item.children&&item.children.length)" :hasTitle="hasTitle" :icon="item.iconClass || 'icon-bell'" @click="handleOpenFunc(item)">{{item.name}}</Smenu-item> <Snav-sub-menus :hasTitle="hasTitle" :menuitem="item" :icon="item.iconClass" v-if="item.isShow&&item.children&&item.children.length" ></Snav-sub-menus> </template> </Smenu> </div> </div> <!-- <ul class="pl-menus pl-menus-sub pl-menus-pop" @mouseenter="handleShowLatelyUse" @mouseleave="handleHideLatelyUse" :style="latelyUseStyle" v-add2Body> <li class="pl-menus-item" v-for="item,index in navsLatelyUse" @click="handleOpenLatelyFunc(item)"> <a class="title"><span class="txt">{{item.NAME}}</span></a> </li> <li v-show="navsLatelyUse.length==0" class="pl-menus-tips"> 没有数据 </li> </ul> --> </div> <div v-else class="pl-sidebar"> <GeminiScrollbar> <ul class="menus"> <li :class="['item','itemBg'+(index%8+1)]" v-for="(item,index) in navs" :key="index" :title="item.name" @click="handleOpenFunc(item)"> <div class="box"> <img v-if="item.iconClass" :src="item.iconClass | getIconServePath" width="42" height="42"/> <img v-if="item.iconClass==null||item.iconClass==''" src="@main/assets/def_Func.png" width="42" height="42"/> <!-- <i class="iconfont"><img v-if="item.iconClass" :src="item.iconClass" width="24" height="24"/></i> --> <span v-if="item.markCount" class="tip">{{item.markCount}}</span> </div> <div class="title">{{item.name}}</div> </li> </ul> </GeminiScrollbar> </div> </template> <script> import {Smenu,SsubMenu,SmenuItem} from './Smenus' import SnavSubMenus from './side/Smenus' export default { inject:['addTab'], components:{ Smenu,SsubMenu,SmenuItem,SnavSubMenus }, props:{ sideWidth:{ type: String, }, hasTitle:{ type: Boolean, }, totop:{ type: Number } }, data(){ return{ window:window, } /* return { navs:[ { iconClass:"", name:"新建事项", url:"", }, { iconClass:"", name:"销售排行", url:"" }, { iconClass:"", name:"待办工作", url:"" }, { iconClass:"", name:"薪资查看", url:"", count:10 }, { iconClass:"", name:"我的日程", url:"", count:8 }, { iconClass:"", name:"待开会议", url:"" }, { iconClass:"", name:"签到", url:"" }, { iconClass:"", name:"快捷管理", url:"" }, { iconClass:"", name:"我的日程", url:"", count:8 }, { iconClass:"", name:"待开会议", url:"" }, { iconClass:"", name:"签到", url:"" }, { iconClass:"", name:"快捷管理", url:"" }, { iconClass:"", name:"我的日程", url:"", count:8 }, { iconClass:"", name:"待开会议", url:"" }, { iconClass:"", name:"签到", url:"" }, { iconClass:"", name:"快捷管理", url:"" }, ] } */ }, computed:{ navs(){ return this.$store.getters.navs; }, layout(){ return window.localStorage.getItem('layout'); }, menus(){ return this.$store.getters.menus; }, navsLatelyUse(){ return this.$store.getters.navsLatelyUse; } }, mounted(){ // this.resize(); window.addEventListener('resize',this.resize); }, filters: { getIconServePath(path){ let file = path.split(";"); if(file[2]){ return `/amrept-web/checkPhoto/photo.do?path=${file[2]}` }else{ return ""; } } }, methods:{ // resize(){ // let c = this.$refs.smenu.$el.children,w=0; // for(let i=c.length-1;i>=0;i--){ // w+=c[i].offsetWidth; // } // this.$refs.smenu.$el.style.width=`${w+2}px`; // this.isMenuArrBtn = this.$refs.domSrcoll.offsetWidth<w; // this.scrollBtnStatus(); // }, handleOpenLatelyFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } this.addTab({ resUrl:item.FURI, name:item.NAME });//inject 提供的方法只能 传一个参数 }, handleOpenFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name,item.resId)//,item.resId this.addTab(item);//inject 提供的方法只能 传一个参数 }, handleShowLatelyUse(){ this.$store.dispatch('app/getLatelyUse')//最近使用 let s = this.$refs["dom-latelyUse"]; let rect = s.getBoundingClientRect(); this.latelyUseStyle.display ='block'; this.latelyUseStyle.left = rect.left+'px'; this.latelyUseStyle.top = rect.top + rect.height +'px'; }, handleHideLatelyUse(){ this.latelyUseStyle.display ='none'; }, handleLtMenuScroll(){ this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft-30; this.menuScrollTimer = setInterval(()=>{ this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft-10; this.scrollBtnStatus(); },50); this.scrollBtnStatus(); }, handleRtMenuScroll(){ this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft+30; this.menuScrollTimer = setInterval(()=>{ this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft+10; this.scrollBtnStatus(); },50); this.scrollBtnStatus(); }, handleMenuScrollEnd(){ clearInterval(this.menuScrollTimer); }, scrollBtnStatus(){ if(!(this.$refs.scrollLtBtn||this.$refs.scrollRtBtn)){ return; } if(this.$refs.domSrcoll.scrollLeft==0){ this.$refs.scrollLtBtn.style.opacity=0.3; }else{ this.$refs.scrollLtBtn.style.opacity=1; } if(this.$refs.domSrcoll.scrollLeft>=this.$refs.smenu.$el.offsetWidth-this.$refs.domSrcoll.offsetWidth){ this.$refs.scrollRtBtn.style.opacity=0.3; }else{ this.$refs.scrollRtBtn.style.opacity=1; } } } } </script> <template> <div v-if="layout == 'level'" class="pl-sidebar" :style="{width: this.sideWidth, background:'#002040',top:totop+'px',color:'#fff'}"> <div class="menusArea pl-cl"> <div class="scroll" ref="domSrcoll"> <Smenu ref="smenu" mode="horizontal" :style="{width: sideWidth,margin: 0,height:(window.innerHeight-totop)+'px'}"> <template v-for="(item,index) in menus"> <!-- <Smenu-item v-if="!item.children||!item.children.length" :icon="item.iconClass" @click="handleOpenFunc(item)">{{item.name}}</Smenu-item> --> <Smenu-item v-if="item.isShow&&!(item.children&&item.children.length)" :hasTitle="hasTitle" :icon="item.iconClass || 'icon-bell'" @click="handleOpenFunc(item)">{{item.name}}</Smenu-item> <Snav-sub-menus :hasTitle="hasTitle" :menuitem="item" v-if="item.isShow&&item.children&&item.children.length" ></Snav-sub-menus> </template> </Smenu> </div> </div> <!-- <ul class="pl-menus pl-menus-sub pl-menus-pop" @mouseenter="handleShowLatelyUse" @mouseleave="handleHideLatelyUse" :style="latelyUseStyle" v-add2Body> <li class="pl-menus-item" v-for="item,index in navsLatelyUse" @click="handleOpenLatelyFunc(item)"> <a class="title"><span class="txt">{{item.NAME}}</span></a> </li> <li v-show="navsLatelyUse.length==0" class="pl-menus-tips"> 没有数据 </li> </ul> --> </div> <div v-else class="pl-sidebar"> <GeminiScrollbar> <ul class="menus"> <li :class="['item','itemBg'+(index%8+1)]" v-for="(item,index) in navs" :key="index" :title="item.name" @click="handleOpenFunc(item)"> <div class="box"> <img v-if="item.iconClass" :src="item.iconClass | getIconServePath" width="42" height="42"/> <img v-if="item.iconClass==null||item.iconClass==''" src="@main/assets/def_Func.png" width="42" height="42"/> <!-- <i class="iconfont"><img v-if="item.iconClass" :src="item.iconClass" width="24" height="24"/></i> --> <span v-if="item.markCount" class="tip">{{item.markCount}}</span> </div> <div class="title">{{item.name}}</div> </li> </ul> </GeminiScrollbar> </div> </template> <script> import {Smenu,SsubMenu,SmenuItem} from './Smenus' import SnavSubMenus from './side/Smenus' export default { inject:['addTab'], components:{ Smenu,SsubMenu,SmenuItem,SnavSubMenus }, props:{ sideWidth:{ type: String, }, hasTitle:{ type: Boolean, }, totop:{ type: Number } }, data(){ return{ window:window, } /* return { navs:[ { iconClass:"", name:"新建事项", url:"", }, { iconClass:"", name:"销售排行", url:"" }, { iconClass:"", name:"待办工作", url:"" }, { iconClass:"", name:"薪资查看", url:"", count:10 }, { iconClass:"", name:"我的日程", url:"", count:8 }, { iconClass:"", name:"待开会议", url:"" }, { iconClass:"", name:"签到", url:"" }, { iconClass:"", name:"快捷管理", url:"" }, { iconClass:"", name:"我的日程", url:"", count:8 }, { iconClass:"", name:"待开会议", url:"" }, { iconClass:"", name:"签到", url:"" }, { iconClass:"", name:"快捷管理", url:"" }, { iconClass:"", name:"我的日程", url:"", count:8 }, { iconClass:"", name:"待开会议", url:"" }, { iconClass:"", name:"签到", url:"" }, { iconClass:"", name:"快捷管理", url:"" }, ] } */ }, computed:{ navs(){ return this.$store.getters.navs; }, layout(){ return window.localStorage.getItem('layout'); }, menus(){ return this.$store.getters.menus; }, navsLatelyUse(){ return this.$store.getters.navsLatelyUse; } }, mounted(){ // this.resize(); window.addEventListener('resize',this.resize); }, filters: { getIconServePath(path){ let file = path.split(";"); if(file[2]){ return `/amrept-web/checkPhoto/photo.do?path=${file[2]}` }else{ return ""; } } }, methods:{ // resize(){ // let c = this.$refs.smenu.$el.children,w=0; // for(let i=c.length-1;i>=0;i--){ // w+=c[i].offsetWidth; // } // this.$refs.smenu.$el.style.width=`${w+2}px`; // this.isMenuArrBtn = this.$refs.domSrcoll.offsetWidth<w; // this.scrollBtnStatus(); // }, handleOpenLatelyFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } this.addTab({ resUrl:item.FURI, name:item.NAME });//inject 提供的方法只能 传一个参数 }, handleOpenFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name,item.resId)//,item.resId this.addTab(item);//inject 提供的方法只能 传一个参数 }, handleShowLatelyUse(){ this.$store.dispatch('app/getLatelyUse')//最近使用 let s = this.$refs["dom-latelyUse"]; let rect = s.getBoundingClientRect(); this.latelyUseStyle.display ='block'; this.latelyUseStyle.left = rect.left+'px'; this.latelyUseStyle.top = rect.top + rect.height +'px'; }, handleHideLatelyUse(){ this.latelyUseStyle.display ='none'; }, handleLtMenuScroll(){ this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft-30; this.menuScrollTimer = setInterval(()=>{ this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft-10; this.scrollBtnStatus(); },50); this.scrollBtnStatus(); }, handleRtMenuScroll(){ this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft+30; this.menuScrollTimer = setInterval(()=>{ this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft+10; this.scrollBtnStatus(); },50); this.scrollBtnStatus(); }, handleMenuScrollEnd(){ clearInterval(this.menuScrollTimer); }, scrollBtnStatus(){ if(!(this.$refs.scrollLtBtn||this.$refs.scrollRtBtn)){ return; } if(this.$refs.domSrcoll.scrollLeft==0){ this.$refs.scrollLtBtn.style.opacity=0.3; }else{ this.$refs.scrollLtBtn.style.opacity=1; } if(this.$refs.domSrcoll.scrollLeft>=this.$refs.smenu.$el.offsetWidth-this.$refs.domSrcoll.offsetWidth){ this.$refs.scrollRtBtn.style.opacity=0.3; }else{ this.$refs.scrollRtBtn.style.opacity=1; } } } } </script>

Ignore Space Show notes View project/hivuiMain/views/layout/components/Smenus/menuItem.jsx

const MenuItem = { props: { icon:{ type:String }, level:{ type:Number, default:0 }, mode:{ type:String }, hasTitle:{ type: Boolean, } }, methods:{ handleClick(evt){ this.$emit('click',evt); } }, render(h) { const {...props} = this.$props; const icon = props.icon; const hasTitle = props.hasTitle const level = props.level const itemProps={ props:{ level:level }, attrs:{ title:this.$slots.default[0].text }, on:{ click:this.handleClick }, class:{ ['pl-Smenus-item']:1, ['pl-Smenus-wordwrap']:window.__sysConfig.isMenuWordwrap }, } return ( <li {...itemProps} > <a class="title" > {icon&&((icon.indexOf(".png")==-1&&icon.indexOf(".jpg")==-1)?(<i class={"icon iconfont "+icon}></i>):(<img src={window.HIVUI_SETTING.review+"?relativePath="+icon} width="20" height="20"/>))} <span v-show={hasTitle || (!hasTitle && level > 0)} class="txt">{this.$slots.default}</span> </a> </li> ) } } export default MenuItem; const MenuItem = { props: { icon:{ type:String }, level:{ type:Number, default:0 }, mode:{ type:String }, hasTitle:{ type: Boolean, } }, methods:{ handleClick(evt){ this.$emit('click',evt); } }, render(h) { const {...props} = this.$props; const icon = props.icon? `icon iconfont ${props.icon} `:''; const hasTitle = props.hasTitle const level = props.level const itemProps={ props:{ level:level }, attrs:{ title:this.$slots.default[0].text }, on:{ click:this.handleClick }, class:{ ['pl-Smenus-item']:1, ['pl-Smenus-wordwrap']:window.__sysConfig.isMenuWordwrap }, } return ( <li {...itemProps} > <a class="title" > {icon!=''&&(<i class={icon}></i>)} <span v-show={hasTitle || (!hasTitle && level > 0)} class="txt">{this.$slots.default}</span> </a> </li> ) } } export default MenuItem;

Ignore Space Show notes View project/hivuiMain/views/layout/components/Smenus/subMenu.jsx

import Trigger from './trigger' import {getOffset,getDefaultTarget} from '@main/utils' import {filterEmpty} from '@main/utils/props' import PopMenu from './popMenu' const SubMenu = { props:{ icon:{ type:String }, eventKey:{ type:String }, mode:{ type:String }, level:{ type:Number }, hasTitle:{ type:Boolean }, parent: { type: Object, default: null } }, data(){ return{ subStyle:{ left:0, top:0, display:'none' }, isActive:false, } }, mounted(){ let me=this; let subMenuDom = me.$refs['subMenus'].$el.firstElementChild; let h = document.documentElement.offsetHeight; if(!subMenuDom.dataWidth){ subMenuDom.dataWidth=subMenuDom.offsetWidth; subMenuDom.style.width = '0'; } if(!subMenuDom.dataHeight){ subMenuDom.dataHeight=(subMenuDom.offsetHeight>h?h:subMenuDom.offsetHeight)+1; } }, methods:{ setPotion(){ let me=this; let rect = getOffset(me.$refs['domMenuTitle'],getDefaultTarget()); let subStyle = { left: me.level==0?rect.left:rect.left+rect.width, top: me.level==0?rect.top+rect.height-1:rect.top, width: rect.width, height: rect.height } return subStyle; }, show(){ let me=this; if(me.level!=0){ me.parent.show&&me.parent.show(); } let p = me.setPotion(), h = document.documentElement.offsetHeight, w = document.documentElement.offsetWidth, subMenuDom = me.$refs['subMenus'].$el.firstElementChild; let sh = subMenuDom.offsetHeight, sw = subMenuDom.offsetWidth; sh = sh>h?h:sh; if(subMenuDom.dataWidth){ sw=subMenuDom.dataWidth; } if(subMenuDom.dataHeight){ sh=subMenuDom.dataHeight; } if(me.level>0){ subMenuDom.style.left = (p.left+sw>w?w-sw:p.left)+'px'; // subMenuDom.style.left = p.width + sw + 'px'; subMenuDom.style.top = (p.top+sh>h?h-sh:p.top)+'px'; }else{ // subMenuDom.style.left = (p.left+sw>w?w-sw:p.left)+'px'; subMenuDom.style.left = p.width + 'px'; subMenuDom.style.top = (p.top-p.height+sh>h?h-sh:p.top-p.height)+'px'; } // subMenuDom.style.left = 171 + 'px'; // subMenuDom.style.top = (p.top+sh>h?h-sh:p.top-36)+'px'; // subMenuDom.style.top = (p.top-36) + 'px'; subMenuDom.style.opacity = '1'; subMenuDom.style.height = sh+'px'; subMenuDom.style.width = sw+'px'; let zIndex = window.getComputedStyle(this.$el.parentNode,null)['z-index']*1; subMenuDom.style.zIndex=zIndex+1; // me.$set(me,'subStyle',{display:'block',...p}); // me.subStyle.display = 'block'; me.isActive =true; }, hide(){ let me=this; let subMenuDom = me.$refs['subMenus'].$el.firstElementChild; subMenuDom.style.width = '0'; // me.subStyle.display = 'none'; me.isActive = false; }, hideParent(){ let me=this; if(me.level!=0){ me.parent.hide&&me.parent.hideParent(); } this.hide(); }, handleTitleMouseEnter(evt){ this.show(); }, handleTitleMouseLeave(evt){ this.hide(); }, handleSubMouseEnter(){ this.show(); }, handleSubMouseLeave(){ this.hideParent(); }, renderChildren(children){ let {...props} = this.$props; const {subStyle,isActive} = this; let popMenuProps={ props:{ ...props, level:props.level+1, hasTitle:props.hasTitle, children:children, parent:this }, style:{ // ...subStyle, }, class:{ ['pl-Smenus-sub']:1, ['pl-Smenus-pop']:1, }, on:{ mouseenter:this.handleSubMouseEnter, mouseleave:this.handleSubMouseLeave } } return ( <PopMenu ref="domMenuSub" {...popMenuProps}></PopMenu> ) } }, render(h) { const props = this.$props; const hasTitle = props.hasTitle; const {subStyle,isActive} = this; const isInlineMode = props.mode === 'inline'; const children = this.renderChildren(filterEmpty(this.$slots.default)); const nodeProps ={ class:{ ['pl-Smenus-item']:1, ['pl-Smenus-itemSeld']:isActive, ['pl-Smenus-wordwrap']:window.__sysConfig.isMenuWordwrap }, style:{ ['wdith']: hasTitle?'140px':'48px' } } const titleProps={ attrs:{ title:this.$slots.title[0].text }, on:{ mouseenter:this.handleTitleMouseEnter, mouseleave:this.handleTitleMouseLeave } } /* {isInlineMode && children} {!isInlineMode && ( <Trigger> {children} </Trigger>)} */ /** * 菜单太多的问题 * 子菜单独立渲染 添加滚动条 */ return ( <li {...nodeProps} > <div ref="domMenuTitle" class="title" {...titleProps}> {props.level==0&&((!props.icon||(props.icon.indexOf(".png")==-1&&props.icon.indexOf(".jpg")==-1))?(<i class={"icon iconfont "+(props.icon||"icon-bell")}></i>):(<img src={window.HIVUI_SETTING.review+"?relativePath="+props.icon} width="20" height="20"/>))} {hasTitle &&(props.level>=0&&(<i class="iconfont icon-arrow-right trigger"></i>)) || !hasTitle &&(props.level>0&&(<i class="iconfont icon-arrow-right trigger"></i>))} <span v-show={hasTitle || (!hasTitle && props.level > 0)} class='txt'>{this.$slots.title}</span> </div> <Trigger ref="subMenus">{children}</Trigger> {/* {props.level==0&&( <Trigger> {children} </Trigger>)} { props.level>0&&children } */} </li> ); } } export default SubMenu; import Trigger from './trigger' import {getOffset,getDefaultTarget} from '@main/utils' import {filterEmpty} from '@main/utils/props' import PopMenu from './popMenu' const SubMenu = { props:{ eventKey:{ type:String }, mode:{ type:String }, level:{ type:Number }, hasTitle:{ type:Boolean }, parent: { type: Object, default: null } }, data(){ return{ subStyle:{ left:0, top:0, display:'none' }, isActive:false, } }, mounted(){ let me=this; let subMenuDom = me.$refs['subMenus'].$el.firstElementChild; let h = document.documentElement.offsetHeight; if(!subMenuDom.dataWidth){ subMenuDom.dataWidth=subMenuDom.offsetWidth; subMenuDom.style.width = '0'; } if(!subMenuDom.dataHeight){ subMenuDom.dataHeight=(subMenuDom.offsetHeight>h?h:subMenuDom.offsetHeight)+1; } }, methods:{ setPotion(){ let me=this; let rect = getOffset(me.$refs['domMenuTitle'],getDefaultTarget()); let subStyle = { left: me.level==0?rect.left:rect.left+rect.width, top: me.level==0?rect.top+rect.height-1:rect.top, width: rect.width, height: rect.height } return subStyle; }, show(){ let me=this; if(me.level!=0){ me.parent.show&&me.parent.show(); } let p = me.setPotion(), h = document.documentElement.offsetHeight, w = document.documentElement.offsetWidth, subMenuDom = me.$refs['subMenus'].$el.firstElementChild; let sh = subMenuDom.offsetHeight, sw = subMenuDom.offsetWidth; sh = sh>h?h:sh; if(subMenuDom.dataWidth){ sw=subMenuDom.dataWidth; } if(subMenuDom.dataHeight){ sh=subMenuDom.dataHeight; } if(me.level>0){ subMenuDom.style.left = (p.left+sw>w?w-sw:p.left)+'px'; // subMenuDom.style.left = p.width + sw + 'px'; subMenuDom.style.top = (p.top+sh>h?h-sh:p.top)+'px'; }else{ // subMenuDom.style.left = (p.left+sw>w?w-sw:p.left)+'px'; subMenuDom.style.left = p.width + 'px'; subMenuDom.style.top = (p.top-p.height+sh>h?h-sh:p.top-p.height)+'px'; } // subMenuDom.style.left = 171 + 'px'; // subMenuDom.style.top = (p.top+sh>h?h-sh:p.top-36)+'px'; // subMenuDom.style.top = (p.top-36) + 'px'; subMenuDom.style.opacity = '1'; subMenuDom.style.height = sh+'px'; subMenuDom.style.width = sw+'px'; let zIndex = window.getComputedStyle(this.$el.parentNode,null)['z-index']*1; subMenuDom.style.zIndex=zIndex+1; // me.$set(me,'subStyle',{display:'block',...p}); // me.subStyle.display = 'block'; me.isActive =true; }, hide(){ let me=this; let subMenuDom = me.$refs['subMenus'].$el.firstElementChild; subMenuDom.style.width = '0'; // me.subStyle.display = 'none'; me.isActive = false; }, hideParent(){ let me=this; if(me.level!=0){ me.parent.hide&&me.parent.hideParent(); } this.hide(); }, handleTitleMouseEnter(evt){ this.show(); }, handleTitleMouseLeave(evt){ this.hide(); }, handleSubMouseEnter(){ this.show(); }, handleSubMouseLeave(){ this.hideParent(); }, renderChildren(children){ let {...props} = this.$props; const {subStyle,isActive} = this; let popMenuProps={ props:{ ...props, level:props.level+1, hasTitle:props.hasTitle, children:children, parent:this }, style:{ // ...subStyle, }, class:{ ['pl-Smenus-sub']:1, ['pl-Smenus-pop']:1, }, on:{ mouseenter:this.handleSubMouseEnter, mouseleave:this.handleSubMouseLeave } } return ( <PopMenu ref="domMenuSub" {...popMenuProps}></PopMenu> ) } }, render(h) { const props = this.$props; const hasTitle = props.hasTitle; const {subStyle,isActive} = this; const isInlineMode = props.mode === 'inline'; const children = this.renderChildren(filterEmpty(this.$slots.default)); const nodeProps ={ class:{ ['pl-Smenus-item']:1, ['pl-Smenus-itemSeld']:isActive, ['pl-Smenus-wordwrap']:window.__sysConfig.isMenuWordwrap }, style:{ ['wdith']: hasTitle?'140px':'48px' } } const titleProps={ attrs:{ title:this.$slots.title[0].text }, on:{ mouseenter:this.handleTitleMouseEnter, mouseleave:this.handleTitleMouseLeave } } /* {isInlineMode && children} {!isInlineMode && ( <Trigger> {children} </Trigger>)} */ /** * 菜单太多的问题 * 子菜单独立渲染 添加滚动条 */ return ( <li {...nodeProps} > <div ref="domMenuTitle" class="title" {...titleProps}> {props.level==0&&(<i class="icon iconfont icon-bell"></i>)} {hasTitle &&(props.level>=0&&(<i class="iconfont icon-arrow-right trigger"></i>)) || !hasTitle &&(props.level>0&&(<i class="iconfont icon-arrow-right trigger"></i>))} <span v-show={hasTitle || (!hasTitle && props.level > 0)} class='txt'>{this.$slots.title}</span> </div> <Trigger ref="subMenus">{children}</Trigger> {/* {props.level==0&&( <Trigger> {children} </Trigger>)} { props.level>0&&children } */} </li> ); } } export default SubMenu;

Ignore Space Show notes View project/hivuiMain/views/layout/components/menus/subMenu.jsx

import Trigger from './trigger' import {getOffset,getDefaultTarget} from '@main/utils' import {filterEmpty} from '@main/utils/props' import PopMenu from './popMenu' const SubMenu = { props:{ eventKey:{ type:String }, mode:{ type:String }, level:{ type:Number }, parent: { type: Object, default: null } }, data(){ return{ subStyle:{ left:0, top:0, display:'none' }, isActive:false, } }, mounted(){ let me=this; let subMenuDom = me.$refs['subMenus'].$el.firstElementChild; let h = document.documentElement.offsetHeight; let headH=document.querySelector(".pl-header").offsetHeight+document.querySelector(".pl-navbar").offsetHeight; if(!subMenuDom.dataWidth){ subMenuDom.dataWidth=subMenuDom.offsetWidth; me.level!=0&&(subMenuDom.style.width = '0'); } if(!subMenuDom.dataHeight){ subMenuDom.dataHeight=(subMenuDom.offsetHeight>h-headH?h-headH:subMenuDom.offsetHeight)+1; me.level==0&&(subMenuDom.style.height = '0'); } }, methods:{ setPotion(){ let me=this; let rect = getOffset(me.$refs['domMenuTitle'],getDefaultTarget()); let subStyle = { left: me.level==0?rect.left:rect.left+rect.width, top: me.level==0?rect.top+rect.height-1:rect.top, width:rect.width, height:rect.height, } return subStyle; }, show(){ let me=this; if(me.level!=0){ me.parent.show&&me.parent.show(); } let p = me.setPotion(), h = document.documentElement.offsetHeight, w = document.documentElement.offsetWidth, subMenuDom = me.$refs['subMenus'].$el.firstElementChild, headH=document.querySelector(".pl-header").offsetHeight+document.querySelector(".pl-navbar").offsetHeight; //subMenuDom.style.display = 'block'; let sh = subMenuDom.offsetHeight, sw = subMenuDom.offsetWidth; sh = sh>(h-headH) ? (h-headH) : sh; if(subMenuDom.dataWidth){ sw=subMenuDom.dataWidth; } if(subMenuDom.dataHeight){ sh=subMenuDom.dataHeight; } if(p.left+sw>w){ subMenuDom.style.left="auto"; subMenuDom.style.right=-(me.level>0?p.left-p.width:w)+'px'; }else{ subMenuDom.style.right="auto"; subMenuDom.style.left=(me.level>0?p.left-10:p.left)+'px'; } subMenuDom.style.top = ((sh+p.top)>h?(h-sh):p.top)+'px'; subMenuDom.style.opacity = '1'; subMenuDom.style.height = sh+'px'; subMenuDom.style.width = sw+'px'; let zIndex = window.getComputedStyle(this.$el.parentNode,null)['z-index']*1; subMenuDom.style.zIndex=zIndex+1; // me.$set(me,'subStyle',{display:'block',...p}); // me.subStyle.display = 'block'; me.isActive =true; }, hide(){ let me=this; let subMenuDom = me.$refs['subMenus'].$el.firstElementChild; if(me.level==0){ subMenuDom.style.height = '0'; }else{ subMenuDom.style.width = '0'; } // me.subStyle.display = 'none'; me.isActive = false; }, hideParent(){ let me=this; if(me.level!=0){ me.parent.hide&&me.parent.hideParent(); } this.hide(); }, handleTitleMouseEnter(evt){ this.show(); }, handleTitleMouseLeave(evt){ this.hide(); }, handleSubMouseEnter(){ this.show(); this.$emit('mouseenter'); }, handleSubMouseLeave(){ this.hideParent(); this.$emit('mouseleave'); }, renderChildren(children){ let {...props} = this.$props; const {subStyle,isActive} = this; let popMenuProps={ props:{ ...props, level:props.level+1, children:children, parent:this }, style:{ // ...subStyle, }, class:{ ['pl-menus-sub']:1, ['pl-menus-pop']:1, }, on:{ mouseenter:this.handleSubMouseEnter, mouseleave:this.handleSubMouseLeave } } return ( <PopMenu ref="domMenuSub" {...popMenuProps}></PopMenu> ) } }, render(h) { const props = this.$props; const {subStyle,isActive} = this; const isInlineMode = props.mode === 'inline'; const children = this.renderChildren(filterEmpty(this.$slots.default)); const nodeProps ={ class:{ ['pl-menus-item']:1, ['pl-menus-itemSeld']:isActive } } const titleProps={ attrs:{ title:this.$slots.title[0].text }, on:{ mouseenter:this.handleTitleMouseEnter, mouseleave:this.handleTitleMouseLeave } } /* {isInlineMode && children} {!isInlineMode && ( <Trigger> {children} </Trigger>)} */ /** * 菜单太多的问题 * 子菜单独立渲染 添加滚动条 */ return ( <li {...nodeProps} > <div ref="domMenuTitle" class="title" {...titleProps}> {props.level>0&&(<i class="iconfont icon-arrow-right trigger"></i>)} <span class='txt'>{this.$slots.title}</span> </div> <Trigger ref="subMenus">{children}</Trigger> {/* {props.level==0&&( <Trigger> {children} </Trigger>)} { props.level>0&&children } */} </li> ); } } export default SubMenu; import Trigger from './trigger' import {getOffset,getDefaultTarget} from '@main/utils' import {filterEmpty} from '@main/utils/props' import PopMenu from './popMenu' const SubMenu = { props:{ eventKey:{ type:String }, mode:{ type:String }, level:{ type:Number }, parent: { type: Object, default: null } }, data(){ return{ subStyle:{ left:0, top:0, display:'none' }, isActive:false, } }, methods:{ setPotion(){ let me=this; let rect = getOffset(me.$refs['domMenuTitle'],getDefaultTarget()); let subStyle = { left: me.level==0?rect.left:rect.left+rect.width, top: me.level==0?rect.top+rect.height-1:rect.top, width:rect.width } return subStyle; }, show(){ let me=this; if(me.level!=0){ me.parent.show&&me.parent.show(); } let p = me.setPotion(), h = document.documentElement.offsetHeight, w = document.documentElement.offsetWidth, subMenuDom = me.$refs['subMenus'].$el.firstElementChild, headH=document.querySelector(".pl-header").offsetHeight+document.querySelector(".pl-navbar").offsetHeight; subMenuDom.style.display = 'block'; let sh = subMenuDom.offsetHeight, sw = subMenuDom.offsetWidth; sh = sh>(h-headH) ? (h-headH) : sh; if(me.level>0){ subMenuDom.style.left = (p.left+sw>w?p.left-p.width-sw:p.left-10)+'px'; }else{ subMenuDom.style.left = (p.left+sw>w?w-sw:p.left)+'px'; } subMenuDom.style.top = ((sh+p.top)>h?(h-sh):p.top)+'px'; subMenuDom.style.height = sh+'px'; subMenuDom.style.display = 'block'; let zIndex = window.getComputedStyle(this.$el.parentNode,null)['z-index']*1; subMenuDom.style.zIndex=zIndex+1; // me.$set(me,'subStyle',{display:'block',...p}); // me.subStyle.display = 'block'; me.isActive =true; }, hide(){ let me=this; let subMenuDom = me.$refs['subMenus'].$el.firstElementChild; subMenuDom.style.display = 'none'; // me.subStyle.display = 'none'; me.isActive = false; }, hideParent(){ let me=this; if(me.level!=0){ me.parent.hide&&me.parent.hideParent(); } this.hide(); }, handleTitleMouseEnter(evt){ this.show(); }, handleTitleMouseLeave(evt){ this.hide(); }, handleSubMouseEnter(){ this.show(); this.$emit('mouseenter'); }, handleSubMouseLeave(){ this.hideParent(); this.$emit('mouseleave'); }, renderChildren(children){ let {...props} = this.$props; const {subStyle,isActive} = this; let popMenuProps={ props:{ ...props, level:props.level+1, children:children, parent:this }, style:{ // ...subStyle, }, class:{ ['pl-menus-sub']:1, ['pl-menus-pop']:1, }, on:{ mouseenter:this.handleSubMouseEnter, mouseleave:this.handleSubMouseLeave } } return ( <PopMenu ref="domMenuSub" {...popMenuProps}></PopMenu> ) } }, render(h) { const props = this.$props; const {subStyle,isActive} = this; const isInlineMode = props.mode === 'inline'; const children = this.renderChildren(filterEmpty(this.$slots.default)); const nodeProps ={ class:{ ['pl-menus-item']:1, ['pl-menus-itemSeld']:isActive } } const titleProps={ attrs:{ title:this.$slots.title[0].text }, on:{ mouseenter:this.handleTitleMouseEnter, mouseleave:this.handleTitleMouseLeave } } /* {isInlineMode && children} {!isInlineMode && ( <Trigger> {children} </Trigger>)} */ /** * 菜单太多的问题 * 子菜单独立渲染 添加滚动条 */ return ( <li {...nodeProps} > <div ref="domMenuTitle" class="title" {...titleProps}> {props.level>0&&(<i class="iconfont icon-arrow-right trigger"></i>)} <span class='txt'>{this.$slots.title}</span> </div> <Trigger ref="subMenus">{children}</Trigger> {/* {props.level==0&&( <Trigger> {children} </Trigger>)} { props.level>0&&children } */} </li> ); } } export default SubMenu;

Ignore Space Show notes View project/hivuiMain/views/layout/components/side/Smenus.vue

<template> <Ssub-menu :icon="icon" :level="level" :hasTitle="hasTitle" :parent="parent"> <template slot="title">{{menuitem.name}}</template> <template v-for="(item,index) in menuitem.children"> <Smenu-item :icon="item.iconClass" :hasTitle="hasTitle" v-if="!(item.children&&item.children.length)" @click="handleOpenFunc(item)">{{item.name}}</Smenu-item> <Snav-sub-menus :icon="item.iconClass" :menuitem="item" v-if="item.children&&item.children.length"></Snav-sub-menus> </template> </Ssub-menu> </template> <script> import {Smenu,SsubMenu,SmenuItem} from '../Smenus' export default { name:'SnavSubMenus', inject:['addTab'], components:{ Smenu,SsubMenu,SmenuItem }, props:{ icon:{ type:String }, menuitem:{ type:Object }, hasTitle:{ type: Boolean, }, level:{ type:Number }, parent:{ type:Object } }, methods:{ handleOpenFunc(item){ //url,title,uid,callback,nearest if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name) this.addTab(item);//inject 提供的方法只能 传一个参数 } } } </script> <template> <Ssub-menu :level="level" :hasTitle="hasTitle" :parent="parent"> <template slot="title">{{menuitem.name}}</template> <template v-for="(item,index) in menuitem.children"> <Smenu-item :icon="item.iconClass" :hasTitle="hasTitle" v-if="!(item.children&&item.children.length)" @click="handleOpenFunc(item)">{{item.name}}</Smenu-item> <Snav-sub-menus :menuitem="item" v-if="item.children&&item.children.length"></Snav-sub-menus> </template> </Ssub-menu> </template> <script> import {Smenu,SsubMenu,SmenuItem} from '../Smenus' export default { name:'SnavSubMenus', inject:['addTab'], components:{ Smenu,SsubMenu,SmenuItem }, props:{ menuitem:{ type:Object }, hasTitle:{ type: Boolean, }, level:{ type:Number }, parent:{ type:Object } }, methods:{ handleOpenFunc(item){ //url,title,uid,callback,nearest if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name) this.addTab(item);//inject 提供的方法只能 传一个参数 } } } </script>

Show line notes below