登录登出

08335 / hivui-platform-template

hivui平台项目模板

Browse code 登录登出 master
1 parent 90f2b9d commit eadfba659cfea5ae1a64ae18a62fec198775a994 20278 authored on 23 Sep 2021

Showing 6 changed files

Ignore Space Show notes View project/hivuiLogin/App.vue
<template> <div class="bg"> <div class="login_hd"> <div class="login_hd_logo" :style="logoStyle"> <!-- <div class="login_hd_logo_tip">登录</div>--> </div> </div> <div class="login_bd"> <div class="login_bd_bg" :style="bgStyle"></div> <div class="login_form"> <div id="showQr" class="loginMainBox" :hidden="currLoginType!='com'"> <img @click="changeQr" class="icon-qrcode" :src="scanIcon" :hidden="!config.isScan"/> <div class="login-tip" :hidden="!config.isScan"> <div class="poptip"> <div class="poptip-arrow"> <em></em> <span></span> </div> <div class="poptip-content">扫码登录</div> </div> </div> <div class="login_form_bd"> <div class="error_tips"></div> <input type="hidden" name="directAction" value=""> <input type="hidden" name="refererurl" value=""> <div class="login_field"> <label>用户名/邮箱</label> <input class="login_field_text" v-model="username" type="text" id="txtUserName" name="userName" placeholder="用户名" autofocus required autocomplete="off" @keyup.enter="loginFunc"> <i class="fa fa-user"></i> </div> <div class="login_field"> <label>登录密码</label> <input class="login_field_text" v-model="password" type="text" onfocus="this.type='password'" id="txtPassword" name="password" placeholder="请输入密码" required autocomplete="off" @keyup.enter="loginFunc"> <i class="fa fa-unlock-alt"></i> </div> <div class="saveCheckbox_box"> <label for="saveCheckbox"><i :class="'fa '+(isCheckRu?'fa-check-square-o':'fa-square-o')"></i>记住用户名</label> <input type="checkbox" id="saveCheckbox" style="display:none;" v-model="isCheckRu" @change="rememberUserEvent"> </div> <div class="login_form_btn"> <div class="login_btn_area"> <button :class="'loginBtn'+(loginLoading?' disabled':'')" @click="loginFunc">登  录<i :hidden="!loginLoading" class="el-icon-loading"></i></button> </div> </div> <div class="login_form_foot"> <span class="forgetPw" @click="resetPw"><i class="fa fa-lock"></i><span style="margin-left: 5px">忘记密码?</span></span> <span class="login_form_app"><i class="miniIcon" data-type="app"></i><span style="margin-left: 5px">APP下载</span></span> </div> <div style="display:none;"> <form id="singleSign" action="" method="post"> <input type="hidden" name="username" v-model="username"> <input type="hidden" name="password" v-model="password"> <input type="hidden" name="service" value=""> <input type="hidden" name="loginUrl" value=""> <input type="hidden" name="submit1" value="true"> </form> </div> </div> </div> <div id="showCom" class="loginMainBox" :hidden="!(config.isScan&&currLoginType=='scan')"> <div class="login-title">扫码登录</div> <div class="login-tip"> <div class="poptip"> <div class="poptip-arrow"> <em></em> <span></span> </div> <div class="poptip-content">密码登录</div> </div> </div> <img @click="changeCom" class="icon-qrcode" :src="comIcon" alt=""/> <div style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);"> <!-- <img id="qrImg" src="./assets/logo.png" width="115px" height="115px" alt > --> <div class="login-error" style="display: none">登录失败!</div> <div class="qrcode-img" style="display: none"> <canvas height="130" width="130" style="height: 130px; width: 130px;"></canvas> <div class="qrcode-error"> <p>二维码失效</p> <button type="button" class="refresh">刷新二维码</button> </div> </div> </div> <div class="login-content nc-outer-box" style="display: none"> <div class="qrcode-login"> <div class="qrcode-success"> <!-- <img src="" alt=""/> --> <p>扫描成功！</p> <h4>请在手机上根据提示确认登录</h4> </div> </div> </div> <div class="qrDesc"> <div> <!-- <img src="" alt="" /> --> </div> <div class="qrDesc_right"> <span> 打开<a style="color: blue">海创科技App</a><br> 扫一扫登录</span> </div> </div> </div> <div id="qrcode"></div> </div> </div> <div class="login_ft"> <div class="login_ft_main" id="login_copyright">{{this.config.copyright}}</div> </div> </div> </template> <script> import {baseLogin} from "./api/login"; import md5 from "md5"; import {projectName} from './config' import 'font-awesome/css/font-awesome.css' import{setToken,getUserId,setUserId,removeUserId} from "./utils/auth.js" export default { components:{ }, data(){ return { comIcon:"./assets/computer.png", scanIcon:"./assets/qrcode_3.png", username:"", password:"", config:{ title:"中海创科技", loginLogoImg:"./assets/Logo1.png", loginLogoImg_height:56, loginLogoImg_width:206, loginBgImg:"./assets/background.png", copyright:"版权所有 © 2020-2025 中海创科技", isSingleLogin:false, isScan:true, }, currLoginType:"com", rememberUserId:getUserId(), loginLoading:false, } }, computed:{ bgStyle(){ return { "background-image":"url("+this.config.loginBgImg+")", } }, logoStyle(){ return { "background-image":"url("+this.config.loginLogoImg+")", "height":this.config.loginLogoImg_height+"px", "width":this.config.loginLogoImg_width+"px", } }, isCheckRu(){ return !!this.rememberUserId; }, }, mounted(){ if(this.isCheckRu){ this.username=this.rememberUserId; } }, methods:{ loginFunc(){ this.defaultLogin(); console.log(this.username); console.log(this.password); }, defaultLogin() { /this.$refs.loginForm.validate(valid => { if (valid) {/ this.loginLoading = true; baseLogin({ username: this.username.trim(), password: md5(this.password) }).then(response => { const data = response setToken(data.token) if(this.isCheckRu){ setUserId(this.username); }else{ removeUserId(); } location=window.HIVUI_SETTING.mainPageUrl?window.HIVUI_SETTING.mainPageUrl:("/"+projectName+"/hivuiMain/index.html#/") }).catch(error => { this.loginLoading = false; }) /} else { console.log("error submit!!"); return false; } });/ }, changeQr(){ this.currLoginType="scan"; }, changeCom(){ this.currLoginType="com"; }, rememberUserEvent(){ if(this.isCheckRu){ this.rememberUserId=""; }else{ this.rememberUserId=true; } }, resetPw(){ } } } </script> <style lang="less"> { margin:0; padding: 0; box-sizing: border-box; } a{ text-decoration: none; } ul,li{ list-style: none; } button{ outline: none; border: none; } html,body{ height:100%; width: 100%; background: #fff; } input,body,button{ font-family: "Microsoft YaHei",proxima-nova,"Helvetica Neue",arial,helvetica,clean,sans-serif; } body{ font-size: 14px; color: #333; } .bg{ height:100%; width:100%; position: relative; } .login_hd,.login_ft{ height:100px; width: 100%; position: fixed; z-index: 99; left:0; } .login_hd_main,.login_ft_main{ width: 1000px; height:100%; margin:0 auto; } .login_hd{ top:0; .login_hd_logo{ height: 60px; width: 265px; position: absolute; top:50px; left:50px; background:no-repeat; img{ height:80px; width: 80px; margin-right: 90px; margin-top: 10px; float: right; } .login_hd_logo_tip{ height: 32px; width: 84px; display: inline-block; padding: 0 20px; font-size: 22px; color: #fff; position: absolute; right: -104px; top: 0; bottom: 0; margin: auto; &:after{ content:""; height:20px; width:2px; position:absolute; top:0; bottom:0; left: 0px; background-color:#8691a8; margin:auto; } } } } .login_bd{ overflow: hidden; min-width: 1210px; position: relative; height:100%; background-color: #fff; .login_bd_bg { background: no-repeat center center; background-size:100%; position: absolute; height: 100%; width: 100%; } .login_form{ width: 370px; height: 360px; margin: auto; position: absolute; top: 0; left: 40%; right: 0; bottom: 0; background-color: #fff; padding: 1px; z-index: 100; box-shadow: 0 0 5px 1px rgba(0,0,0,0.5); .login_form_hd{ color: #333; font-weight: bold; padding: 0 18px; box-sizing: border-box; width: 100%; font-size: 16px; text-align: left; line-height: 44px; height:44px; border-bottom: 1px solid #ccc; } .login_form_bd{ min-height: 231px; height:100%; position: relative; padding: 24px 40px 0; .login_form_foot{ line-height: 40px; margin-top: 20px; &i{ color: #0190D4; } .login_form_app,.login_download_app{ color: #0190D4; float:right; cursor:pointer; &:hover{ color: #0f406c; &i{ color: #0f406c; } } } .miniIcon{ display: inline-block; height:16px; width: 16px; background-position: center center; background-size: 100%; margin-left: 20px; vertical-align: middle; &[data-type="app"]{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjNGM0JDQ0E0OTc2NTExRUJBNzIxQTZFMjg4NTg2N0FDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjNGM0JDQ0E1OTc2NTExRUJBNzIxQTZFMjg4NTg2N0FDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6M0YzQkNDQTI5NzY1MTFFQkE3MjFBNkUyODg1ODY3QUMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6M0YzQkNDQTM5NzY1MTFFQkE3MjFBNkUyODg1ODY3QUMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz65Y/jqAAADAElEQVR42gzOTWgcVRwA8P/7mJmdjzfZ2W6TNM2u3ebSYBNqNSaKiqCgbYUWGi8ebBPwIIrtRewHSNSIoIIIFU2VHop4aMFlPYiVXlI0EinkoEnapKZ1szG7ze52srOzb97Ozjx7/N1+iIfy0jz8PB//EUSog3OE3Auhj/ibhrnLBQlxh3VERe3p5YcP6m+9EKPLN+OPv/d8YXf6IdoCW0T3mRCuipue2qPoYIVqPdC7UlEx20w//iwjd3umSrimqqzs+k4m5m7gqPr4S/T0IX12qeYG7CG9bSxwV0j45pZO0NgUYTqFkOi0UtVAaBfP4idsv1R0jz3Z63nBSlnk0mqrjSILE49i22y3Oa1WNCjSRB32s6DHb6/d/rcwz18+CGeOK9vFf5b+CywK0bbScTok9fT5lkIRh4ln0JvjcHQUpVEj//cjHNTCQmN0TM3p2mod1n2NMWRYHCvJhLcB+/rWzp6AcrG5VNrIDHiFn9Zn54o/FnYslCoTr+z44g07m2oEHkQ1E1ebkMQbky/uDX1477Otwl9ZgJ1fT2WU4X2vPw/PZfunL/isGX973DZKD+RO/2EN9JY4Ogalapjq2339Fxi6s54/ZVfedSpI/rCIZi6L3F59YjxgpnZHGGjknFzc5gdyna8mmY1hasZ3es2Th8Td1cgTRtKK27fw8FNQuLd8MT8oGMCBD3j/+yE5IYffWcnP35IyaEl59XcJ48vmiLj2Z7zZuv3lNZk4WTZOhY99GBDjyHRcb1hmYlUYhRv3gwobHdRMc312beDtyXBwWDn9Te3CnEDOri4VpIyQfUZK2bAV229CnITGUjRktq586ibTGQ4Ppmfold8YdIOju1To1NDQo5/LShV4wA2qEwZlt8pE2gpq5w6v3SiNXJ2Ldu+JE4iLyA4IIJDok1/FpbwM+jQvWtbqmW7L2gyhikBbBMhKzJBDQaFbvJVCnBw70iDXv/toBdOFOnTLRIYGtchM9IbpThkP2U5UHbBoK6aRYmYkfm0/nH+V/C/AALR/bXSBworaAAAAAElFTkSuQmCC"); } &[data-type="desk"]{ background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjJGRUFBRDNFOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJGRUFBRDNGOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MkZFQUFEM0M5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MkZFQUFEM0Q5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7jOkn1AAABSElEQVR42mL8//8/AymApXzd08fvfv36+58Rh4o///7LCrLZqPCEmQgCuYwMaWeINPv/TGOQDUC8OEkx2kzoHw63MTMxrjv/Yf/Nz1AnATE/JzMjIwMIYwO7rn3iZGWcHCGL0PDt1z9czrj7+qf7xNtAxslKDTMFbiCDCY+jP/3469B7C8J27L318O0vfBpuvfwhUXLpyftfEC7QFQpVl888/AZyEjsLFtdffvodGJRff/07dvcLkCvGy6IrzXnkDpCddmbN2Xf/cYD9Nz+Bwj3tTNOWZxARkA0hM+8JcDH//osSrEBuiau4uSI3hOupww8NpTJ3iXuvf37//Y8J1V3AuNeQ4AA6DMjWk+E0keeCxR9ewJJxFuiei4+/wUVwhtKbL39su28yMTGsz1QG2oCUQnCAE/e+1G58+vrzbzRxRlKTN0CAAQB1Gu32zyWjpAAAAABJRU5ErkJggg=="); } } } .error_tips{ position: absolute; line-height: 30px; font-size: 12px; color: #f60000; text-align: center; top:0; left:0; right: 0; width: 100%; margin:auto; } .login_field{ position:relative; padding-bottom: 20px; label{ line-height: 35px; display: block; height: 35px; font-size: 16px; } i{ font-size: 20px; color: #aaa; width: 35px; text-align: center; line-height: 40px; height: 40px; position: absolute; top: 35px; left:0; margin:auto; } .login_field_text{ height:40px; width: 100%; line-height: 40px; border:1px solid #ccc; border-radius: 5px; background-color: #fff; font-size: 16px; color: #000; padding-left: 35px; box-sizing: border-box; font-family: "Microsoft YaHei",proxima-nova,"Helvetica Neue",arial,helvetica,clean,sans-serif; &::input-placeholder{ color:#ccc; } } } .saveCheckbox_box{ height: 35px; line-height: 35px; padding-left: 30px; position:relative; top:-10px; label{ cursor: pointer; user-select:none; } i{ font-size: 24px; position: absolute; top:0; left:2px; bottom:0; margin:auto; height: 25px; width: 25px; color:#888; cursor: pointer; text-align: center; } .occasion{ float: right; &:after{ content: ""; background: no-repeat; width: 14px; height: 18px; position: absolute; top: 30%; pointer-events: none; right:1px; } #selectStyle{ border: none; outline: none; width: 62px; appearance: none; -webkit-appearance: none; -moz-appearance: none; } } } .forgetPw{ / float: right; / color: #0190D4; cursor: pointer; margin-left: 5px; &:hover{ color: blue; i{ color: blue; } } } .login_form_btn{ font-size: 13px; margin-top: 0px; .loginBtn{ / background-color: #135189; / background-color: #06c; width: 100%; height:40px; border:none; border-radius: 5px; color: #fff; font-size: 16px; font-weight: bold; text-align: center; cursor: pointer; display: inline-block; i{ margin-left:5px; } &:hover{ background-color: #0f406c; } &.disabled{ background-color: #ccc; &:hover{ background-color: #ccc; } } } } /二维码/ .qrCodeImg{ / position: absolute; / height:139px; width:139px; / left:40% !important; right:0 !important; bottom:12%; / margin-top: 10px; margin-left: 85px; z-index: 999; } } .login_form_google{ width: 280px; position: absolute; top: 317px; left: 0; bottom: 0; color: #fff; line-height: 20px; text-align: center; font-weight: bold; font-size: 13px; cursor: pointer; user-select: none; &>a{ color:#fff; } } .loginMainBox{ .login-title{ height: 18px; line-height: 18px; font-size: 16px; color: #889aa4; margin-top: 12px; margin-left: 12px; padding-bottom: 8px; font-weight: 700; } .login-tip{ position: absolute; top: 10px; right: 68px; display: block; .poptip{ background-color: #e6f9fc; line-height: 16px; position: relative; z-index: 9999; border: 1px solid #0073be; padding: 5px 10px; .poptip-arrow { position: absolute; z-index: 10; top: 8px; right: 0; span{ position: absolute; width: 0; height: 0; border-color: hsla(0,0%,100%,0); border-style: solid; overflow: hidden; top: 0; left: 0; border-width: 6px 0 6px 6px; border-left-color: #e6f4fc; } em { position: absolute; width: 0; height: 0; border-color: hsla(0,0%,100%,0); border-style: solid; overflow: hidden; top: 0; left: 0; border-width: 6px 0 6px 6px; border-left-color: #0073be; border-right-color: #0073be; } } .poptip-content { font-size: 12px; font-weight: 400; color: #0073be; } } } .qrDesc{ font-size: 12px; color: #666; width: 160px; margin: auto; overflow: hidden; line-height: 17px; margin-top: 230px; .qrDesc_right{ position: relative; left: 50px; top: -35px; } } .scanMain{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); .qrcode-img { position: relative; margin: 20px auto; font-size: 14px; -webkit-box-shadow: 0 0 8px #ddd; box-shadow: 0 0 8px #ddd; opacity: 1; width: 140px; height: 140px; .qrcode-error { background: hsla(0,0%,100%,.95); position: absolute; left: 0; top: 0; z-index: 9999; width: 100%; height: 100%; p { font-weight: 700; color: #222; margin-top: 38px; margin-bottom: 8px; text-align: center; } .refresh { background: #f40; width: 110px; height: 34px; line-height: 34px; text-align: center; margin: 0 auto; background: #ff9000; border-color: #ff9000; display: block; color: #fff; border-radius: 3px; font-size: 14px; cursor: pointer; } } canvas { margin: 5px; } } .login-error{ text-align: center; color: #222; font-weight: 700; } } /二维码切换登录/ .icon-qrcode{ position: absolute; right: 5px; top: 5px; font-size: 52px; line-height: 52px; cursor: pointer; width: 56px; z-index:999 } .login-content { width: 100%; margin: 0 auto; padding-top: 55px; .qrcode-success { text-align: center; margin-top: 20px; .iconfont { color: #c5c5c5; font-size: 36px; } h4,p { margin-top: 10px; font-size: 14px; } } } } } } .login_ft{ bottom: 0; .login_ft_main{ line-height: 60px; text-align: center; font-size: 14px; } } /登录对话框/ .loginDialog{ height:300px; width: 500px; position: absolute; top:0; left:0; right:0; bottom:0; margin:auto; z-index: 199; .loginDialog_hd{ height:35px; background-color: #0190D4; position: relative; h2{ height:35px; line-height: 35px; font-size: 14px; color: #fff; padding: 0 20px; } .loginDialog_remove{ position: absolute; top:0; bottom:0; right:5px; height:20px; width: 20px; background-color: #f30; cursor: pointer; margin: auto; text-align: center; &i{ line-height: 20px; font-size: 18px; color: #fff; } &:hover{ background-color: #f00; } } } .loginDialog_bd{ width: 100%; height:215px; background-color: #fff; } .loginDialog_ft{ height:50px; width: 100%; border-top: 1px solid #ccc; background-color: #f5f5f5; &:after{ content: ""; display: block; clear: both; } button{ display: block; padding: 0 12px; font-size: 14px; margin-top: 11px; height:28px; line-height: 28px; text-align: center; cursor: pointer; color: #333333; background-color: #e9e9e9; float: right; margin-right:10px; } .loginDialog_confirmBtn{ background-color: #5cb85c; color: #fff; &:hover{ background-color: #47a447; } } .loginDialog_cancelmBtn:hover{ background-color: #ddd; } } } .loginMask{ position: absolute; top:0; left:0; right:0; bottom:0; background-color: #000; opacity: 0.5; z-index: 198; } #loginMsg{ height:170px; width: 400px; top:10%; bottom: unset; z-index: 200; .loginDialog_bd{ height:85px; line-height: 85px; padding-left: 20px; font-size: 14px; } } .dropdown{ border: 1px solid #bebebe; border-radius: 3px; width: 100px; position: absolute; right: 20px; top: 229px; background: #fff; -webkit-box-shadow: 0 0 10px rgba(0,0,0,.2); box-shadow: 0 0 10px rgba(0,0,0,.2); z-index: 100; overflow: auto; cursor: default; li{ margin: 5px; :hover{ background: #0190D4; color: #fff; } &.sceneActive{ background: #0190D4; color: #fff; } } } .hideIframe{ display:none; } </style> <template> <div class="bg"> <div class="login_hd"> <div class="login_hd_logo" :style="logoStyle"> <!-- <div class="login_hd_logo_tip">登录</div>--> </div> </div> <div class="login_bd"> <div class="login_bd_bg" :style="bgStyle"></div> <div class="login_form"> <div id="showQr" class="loginMainBox" :hidden="currLoginType!='com'"> <img @click="changeQr" class="icon-qrcode" :src="scanIcon" :hidden="!config.isScan"/> <div class="login-tip" :hidden="!config.isScan"> <div class="poptip"> <div class="poptip-arrow"> <em></em> <span></span> </div> <div class="poptip-content">扫码登录</div> </div> </div> <div class="login_form_bd"> <div class="error_tips"></div> <input type="hidden" name="directAction" value=""> <input type="hidden" name="refererurl" value=""> <div class="login_field"> <label>用户名/邮箱</label> <input class="login_field_text" v-model="username" type="text" id="txtUserName" name="userName" placeholder="用户名" autofocus required autocomplete="off" @keyup.enter="loginFunc"> <i class="fa fa-user"></i> </div> <div class="login_field"> <label>登录密码</label> <input class="login_field_text" v-model="password" type="text" onfocus="this.type='password'" id="txtPassword" name="password" placeholder="请输入密码" required autocomplete="off" @keyup.enter="loginFunc"> <i class="fa fa-unlock-alt"></i> </div> <div class="saveCheckbox_box"> <label for="saveCheckbox"><i :class="'fa '+(isCheckRu?'fa-check-square-o':'fa-square-o')"></i>记住用户名</label> <input type="checkbox" id="saveCheckbox" style="display:none;" v-model="isCheckRu" @change="rememberUserEvent"> </div> <div class="login_form_btn"> <div class="login_btn_area"> <button class="loginBtn" @click="loginFunc">登  录</button> </div> </div> <div class="login_form_foot"> <span class="forgetPw" @click="resetPw"><i class="fa fa-lock"></i><span style="margin-left: 5px">忘记密码?</span></span> <span class="login_form_app"><i class="miniIcon" data-type="app"></i><span style="margin-left: 5px">APP下载</span></span> </div> <div style="display:none;"> <form id="singleSign" action="" method="post"> <input type="hidden" name="username" v-model="username"> <input type="hidden" name="password" v-model="password"> <input type="hidden" name="service" value=""> <input type="hidden" name="loginUrl" value=""> <input type="hidden" name="submit1" value="true"> </form> </div> </div> </div> <div id="showCom" class="loginMainBox" :hidden="!(config.isScan&&currLoginType=='scan')"> <div class="login-title">扫码登录</div> <div class="login-tip"> <div class="poptip"> <div class="poptip-arrow"> <em></em> <span></span> </div> <div class="poptip-content">密码登录</div> </div> </div> <img @click="changeCom" class="icon-qrcode" :src="comIcon" alt=""/> <div style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);"> <!-- <img id="qrImg" src="./assets/logo.png" width="115px" height="115px" alt > --> <div class="login-error" style="display: none">登录失败!</div> <div class="qrcode-img" style="display: none"> <canvas height="130" width="130" style="height: 130px; width: 130px;"></canvas> <div class="qrcode-error"> <p>二维码失效</p> <button type="button" class="refresh">刷新二维码</button> </div> </div> </div> <div class="login-content nc-outer-box" style="display: none"> <div class="qrcode-login"> <div class="qrcode-success"> <!-- <img src="" alt=""/> --> <p>扫描成功！</p> <h4>请在手机上根据提示确认登录</h4> </div> </div> </div> <div class="qrDesc"> <div> <!-- <img src="" alt="" /> --> </div> <div class="qrDesc_right"> <span> 打开<a style="color: blue">海创科技App</a><br> 扫一扫登录</span> </div> </div> </div> <div id="qrcode"></div> </div> </div> <div class="login_ft"> <div class="login_ft_main" id="login_copyright">{{this.config.copyright}}</div> </div> </div> </template> <script> import {baseLogin} from "./api/login"; import md5 from "md5"; import {projectName} from './config' import 'font-awesome/css/font-awesome.css' import{setToken,getUserId,setUserId,removeUserId} from "./utils/auth.js" export default { components:{ }, data(){ return { comIcon:"./assets/computer.png", scanIcon:"./assets/qrcode_3.png", username:"", password:"", config:{ title:"中海创科技", loginLogoImg:"./assets/Logo1.png", loginLogoImg_height:56, loginLogoImg_width:206, loginBgImg:"./assets/background.png", copyright:"版权所有 © 2020-2025 中海创科技", isSingleLogin:false, isScan:true, }, currLoginType:"com", rememberUserId:getUserId(), } }, computed:{ bgStyle(){ return { "background-image":"url("+this.config.loginBgImg+")", } }, logoStyle(){ return { "background-image":"url("+this.config.loginLogoImg+")", "height":this.config.loginLogoImg_height+"px", "width":this.config.loginLogoImg_width+"px", } }, isCheckRu(){ return !!this.rememberUserId; }, }, mounted(){ if(this.isCheckRu){ this.username=this.rememberUserId; } }, methods:{ loginFunc(){ this.defaultLogin(); console.log(this.username); console.log(this.password); }, defaultLogin() { /this.$refs.loginForm.validate(valid => { if (valid) {/ this.loading = true; baseLogin({ username: this.username.trim(), password: md5(this.password) }).then(response => { const data = response setToken(data.token) if(this.isCheckRu){ setUserId(this.username); }else{ removeUserId(); } location=window.HIVUI_SETTING.mainPageUrl?window.HIVUI_SETTING.mainPageUrl:("/"+projectName+"/hivuiMain/index.html#/") }).catch(error => { this.loading = false; }) /} else { console.log("error submit!!"); return false; } });/ }, changeQr(){ this.currLoginType="scan"; }, changeCom(){ this.currLoginType="com"; }, rememberUserEvent(){ if(this.isCheckRu){ this.rememberUserId=""; }else{ this.rememberUserId=true; } }, resetPw(){ } } } </script> <style lang="less"> { margin:0; padding: 0; box-sizing: border-box; } a{ text-decoration: none; } ul,li{ list-style: none; } button{ outline: none; border: none; } html,body{ height:100%; width: 100%; background: #fff; } input,body,button{ font-family: "Microsoft YaHei",proxima-nova,"Helvetica Neue",arial,helvetica,clean,sans-serif; } body{ font-size: 14px; color: #333; } .bg{ height:100%; width:100%; position: relative; } .login_hd,.login_ft{ height:100px; width: 100%; position: fixed; z-index: 99; left:0; } .login_hd_main,.login_ft_main{ width: 1000px; height:100%; margin:0 auto; } .login_hd{ top:0; .login_hd_logo{ height: 60px; width: 265px; position: absolute; top:50px; left:50px; background:no-repeat; img{ height:80px; width: 80px; margin-right: 90px; margin-top: 10px; float: right; } .login_hd_logo_tip{ height: 32px; width: 84px; display: inline-block; padding: 0 20px; font-size: 22px; color: #fff; position: absolute; right: -104px; top: 0; bottom: 0; margin: auto; &:after{ content:""; height:20px; width:2px; position:absolute; top:0; bottom:0; left: 0px; background-color:#8691a8; margin:auto; } } } } .login_bd{ overflow: hidden; min-width: 1210px; position: relative; height:100%; background-color: #fff; .login_bd_bg { background: no-repeat center center; background-size:100%; position: absolute; height: 100%; width: 100%; } .login_form{ width: 370px; height: 360px; margin: auto; position: absolute; top: 0; left: 40%; right: 0; bottom: 0; background-color: #fff; padding: 1px; z-index: 100; box-shadow: 0 0 5px 1px rgba(0,0,0,0.5); .login_form_hd{ color: #333; font-weight: bold; padding: 0 18px; box-sizing: border-box; width: 100%; font-size: 16px; text-align: left; line-height: 44px; height:44px; border-bottom: 1px solid #ccc; } .login_form_bd{ min-height: 231px; height:100%; position: relative; padding: 24px 40px 0; .login_form_foot{ line-height: 40px; margin-top: 20px; &i{ color: #0190D4; } .login_form_app,.login_download_app{ color: #0190D4; float:right; cursor:pointer; &:hover{ color: #0f406c; &i{ color: #0f406c; } } } .miniIcon{ display: inline-block; height:16px; width: 16px; background-position: center center; background-size: 100%; margin-left: 20px; vertical-align: middle; &[data-type="app"]{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjNGM0JDQ0E0OTc2NTExRUJBNzIxQTZFMjg4NTg2N0FDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjNGM0JDQ0E1OTc2NTExRUJBNzIxQTZFMjg4NTg2N0FDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6M0YzQkNDQTI5NzY1MTFFQkE3MjFBNkUyODg1ODY3QUMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6M0YzQkNDQTM5NzY1MTFFQkE3MjFBNkUyODg1ODY3QUMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz65Y/jqAAADAElEQVR42gzOTWgcVRwA8P/7mJmdjzfZ2W6TNM2u3ebSYBNqNSaKiqCgbYUWGi8ebBPwIIrtRewHSNSIoIIIFU2VHop4aMFlPYiVXlI0EinkoEnapKZ1szG7ze52srOzb97Ozjx7/N1+iIfy0jz8PB//EUSog3OE3Auhj/ibhrnLBQlxh3VERe3p5YcP6m+9EKPLN+OPv/d8YXf6IdoCW0T3mRCuipue2qPoYIVqPdC7UlEx20w//iwjd3umSrimqqzs+k4m5m7gqPr4S/T0IX12qeYG7CG9bSxwV0j45pZO0NgUYTqFkOi0UtVAaBfP4idsv1R0jz3Z63nBSlnk0mqrjSILE49i22y3Oa1WNCjSRB32s6DHb6/d/rcwz18+CGeOK9vFf5b+CywK0bbScTok9fT5lkIRh4ln0JvjcHQUpVEj//cjHNTCQmN0TM3p2mod1n2NMWRYHCvJhLcB+/rWzp6AcrG5VNrIDHiFn9Zn54o/FnYslCoTr+z44g07m2oEHkQ1E1ebkMQbky/uDX1477Otwl9ZgJ1fT2WU4X2vPw/PZfunL/isGX973DZKD+RO/2EN9JY4Ogalapjq2339Fxi6s54/ZVfedSpI/rCIZi6L3F59YjxgpnZHGGjknFzc5gdyna8mmY1hasZ3es2Th8Td1cgTRtKK27fw8FNQuLd8MT8oGMCBD3j/+yE5IYffWcnP35IyaEl59XcJ48vmiLj2Z7zZuv3lNZk4WTZOhY99GBDjyHRcb1hmYlUYhRv3gwobHdRMc312beDtyXBwWDn9Te3CnEDOri4VpIyQfUZK2bAV229CnITGUjRktq586ibTGQ4Ppmfold8YdIOju1To1NDQo5/LShV4wA2qEwZlt8pE2gpq5w6v3SiNXJ2Ldu+JE4iLyA4IIJDok1/FpbwM+jQvWtbqmW7L2gyhikBbBMhKzJBDQaFbvJVCnBw70iDXv/toBdOFOnTLRIYGtchM9IbpThkP2U5UHbBoK6aRYmYkfm0/nH+V/C/AALR/bXSBworaAAAAAElFTkSuQmCC"); } &[data-type="desk"]{ background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjJGRUFBRDNFOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJGRUFBRDNGOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MkZFQUFEM0M5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MkZFQUFEM0Q5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7jOkn1AAABSElEQVR42mL8//8/AymApXzd08fvfv36+58Rh4o///7LCrLZqPCEmQgCuYwMaWeINPv/TGOQDUC8OEkx2kzoHw63MTMxrjv/Yf/Nz1AnATE/JzMjIwMIYwO7rn3iZGWcHCGL0PDt1z9czrj7+qf7xNtAxslKDTMFbiCDCY+jP/3469B7C8J27L318O0vfBpuvfwhUXLpyftfEC7QFQpVl888/AZyEjsLFtdffvodGJRff/07dvcLkCvGy6IrzXnkDpCddmbN2Xf/cYD9Nz+Bwj3tTNOWZxARkA0hM+8JcDH//osSrEBuiau4uSI3hOupww8NpTJ3iXuvf37//Y8J1V3AuNeQ4AA6DMjWk+E0keeCxR9ewJJxFuiei4+/wUVwhtKbL39su28yMTGsz1QG2oCUQnCAE/e+1G58+vrzbzRxRlKTN0CAAQB1Gu32zyWjpAAAAABJRU5ErkJggg=="); } } } .error_tips{ position: absolute; line-height: 30px; font-size: 12px; color: #f60000; text-align: center; top:0; left:0; right: 0; width: 100%; margin:auto; } .login_field{ position:relative; padding-bottom: 20px; label{ line-height: 35px; display: block; height: 35px; font-size: 16px; } i{ font-size: 20px; color: #aaa; width: 35px; text-align: center; line-height: 40px; height: 40px; position: absolute; top: 35px; left:0; margin:auto; } .login_field_text{ height:40px; width: 100%; line-height: 40px; border:1px solid #ccc; border-radius: 5px; background-color: #fff; font-size: 16px; color: #000; padding-left: 35px; box-sizing: border-box; font-family: "Microsoft YaHei",proxima-nova,"Helvetica Neue",arial,helvetica,clean,sans-serif; &::input-placeholder{ color:#ccc; } } } .saveCheckbox_box{ height: 35px; line-height: 35px; padding-left: 30px; position:relative; top:-10px; label{ cursor: pointer; user-select:none; } i{ font-size: 24px; position: absolute; top:0; left:2px; bottom:0; margin:auto; height: 25px; width: 25px; color:#888; cursor: pointer; text-align: center; } .occasion{ float: right; &:after{ content: ""; background: no-repeat; width: 14px; height: 18px; position: absolute; top: 30%; pointer-events: none; right:1px; } #selectStyle{ border: none; outline: none; width: 62px; appearance: none; -webkit-appearance: none; -moz-appearance: none; } } } .forgetPw{ /* float: right; / color: #0190D4; cursor: pointer; margin-left: 5px; &:hover{ color: blue; i{ color: blue; } } } .login_form_btn{ font-size: 13px; margin-top: 0px; .loginBtn{ / background-color: #135189; / background-color: #06c; width: 100%; height:40px; border:none; border-radius: 5px; color: #fff; font-size: 16px; font-weight: bold; text-align: center; cursor: pointer; display: inline-block; &:hover{ background-color: #0f406c; } } } /二维码/ .qrCodeImg{ / position: absolute; / height:139px; width:139px; / left:40% !important; right:0 !important; bottom:12%; / margin-top: 10px; margin-left: 85px; z-index: 999; } } .login_form_google{ width: 280px; position: absolute; top: 317px; left: 0; bottom: 0; color: #fff; line-height: 20px; text-align: center; font-weight: bold; font-size: 13px; cursor: pointer; user-select: none; &>a{ color:#fff; } } .loginMainBox{ .login-title{ height: 18px; line-height: 18px; font-size: 16px; color: #889aa4; margin-top: 12px; margin-left: 12px; padding-bottom: 8px; font-weight: 700; } .login-tip{ position: absolute; top: 10px; right: 68px; display: block; .poptip{ background-color: #e6f9fc; line-height: 16px; position: relative; z-index: 9999; border: 1px solid #0073be; padding: 5px 10px; .poptip-arrow { position: absolute; z-index: 10; top: 8px; right: 0; span{ position: absolute; width: 0; height: 0; border-color: hsla(0,0%,100%,0); border-style: solid; overflow: hidden; top: 0; left: 0; border-width: 6px 0 6px 6px; border-left-color: #e6f4fc; } em { position: absolute; width: 0; height: 0; border-color: hsla(0,0%,100%,0); border-style: solid; overflow: hidden; top: 0; left: 0; border-width: 6px 0 6px 6px; border-left-color: #0073be; border-right-color: #0073be; } } .poptip-content { font-size: 12px; font-weight: 400; color: #0073be; } } } .qrDesc{ font-size: 12px; color: #666; width: 160px; margin: auto; overflow: hidden; line-height: 17px; margin-top: 230px; .qrDesc_right{ position: relative; left: 50px; top: -35px; } } .scanMain{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); .qrcode-img { position: relative; margin: 20px auto; font-size: 14px; -webkit-box-shadow: 0 0 8px #ddd; box-shadow: 0 0 8px #ddd; opacity: 1; width: 140px; height: 140px; .qrcode-error { background: hsla(0,0%,100%,.95); position: absolute; left: 0; top: 0; z-index: 9999; width: 100%; height: 100%; p { font-weight: 700; color: #222; margin-top: 38px; margin-bottom: 8px; text-align: center; } .refresh { background: #f40; width: 110px; height: 34px; line-height: 34px; text-align: center; margin: 0 auto; background: #ff9000; border-color: #ff9000; display: block; color: #fff; border-radius: 3px; font-size: 14px; cursor: pointer; } } canvas { margin: 5px; } } .login-error{ text-align: center; color: #222; font-weight: 700; } } /二维码切换登录/ .icon-qrcode{ position: absolute; right: 5px; top: 5px; font-size: 52px; line-height: 52px; cursor: pointer; width: 56px; z-index:999 } .login-content { width: 100%; margin: 0 auto; padding-top: 55px; .qrcode-success { text-align: center; margin-top: 20px; .iconfont { color: #c5c5c5; font-size: 36px; } h4,p { margin-top: 10px; font-size: 14px; } } } } } } .login_ft{ bottom: 0; .login_ft_main{ line-height: 60px; text-align: center; font-size: 14px; } } /登录对话框*/ .loginDialog{ height:300px; width: 500px; position: absolute; top:0; left:0; right:0; bottom:0; margin:auto; z-index: 199; .loginDialog_hd{ height:35px; background-color: #0190D4; position: relative; h2{ height:35px; line-height: 35px; font-size: 14px; color: #fff; padding: 0 20px; } .loginDialog_remove{ position: absolute; top:0; bottom:0; right:5px; height:20px; width: 20px; background-color: #f30; cursor: pointer; margin: auto; text-align: center; &i{ line-height: 20px; font-size: 18px; color: #fff; } &:hover{ background-color: #f00; } } } .loginDialog_bd{ width: 100%; height:215px; background-color: #fff; } .loginDialog_ft{ height:50px; width: 100%; border-top: 1px solid #ccc; background-color: #f5f5f5; &:after{ content: ""; display: block; clear: both; } button{ display: block; padding: 0 12px; font-size: 14px; margin-top: 11px; height:28px; line-height: 28px; text-align: center; cursor: pointer; color: #333333; background-color: #e9e9e9; float: right; margin-right:10px; } .loginDialog_confirmBtn{ background-color: #5cb85c; color: #fff; &:hover{ background-color: #47a447; } } .loginDialog_cancelmBtn:hover{ background-color: #ddd; } } } .loginMask{ position: absolute; top:0; left:0; right:0; bottom:0; background-color: #000; opacity: 0.5; z-index: 198; } #loginMsg{ height:170px; width: 400px; top:10%; bottom: unset; z-index: 200; .loginDialog_bd{ height:85px; line-height: 85px; padding-left: 20px; font-size: 14px; } } .dropdown{ border: 1px solid #bebebe; border-radius: 3px; width: 100px; position: absolute; right: 20px; top: 229px; background: #fff; -webkit-box-shadow: 0 0 10px rgba(0,0,0,.2); box-shadow: 0 0 10px rgba(0,0,0,.2); z-index: 100; overflow: auto; cursor: default; li{ margin: 5px; :hover{ background: #0190D4; color: #fff; } &.sceneActive{ background: #0190D4; color: #fff; } } } .hideIframe{ display:none; } </style>

Ignore Space Show notes View

project/hivuiLogin/App.vue

<template>
    <div class="bg">
        <div class="login_hd">
            <div class="login_hd_logo" :style="logoStyle">
            
            </div>
        </div>
        <div class="login_bd">
            <div class="login_bd_bg" :style="bgStyle"></div>
            <div class="login_form">
                <div id="showQr" class="loginMainBox" :hidden="currLoginType!='com'">
                    <img @click="changeQr"  class="icon-qrcode" :src="scanIcon" :hidden="!config.isScan"/>
                    <div class="login-tip" :hidden="!config.isScan">
                        <div class="poptip">
                            <div class="poptip-arrow">
                                <em></em>
                                <span></span>
                            </div>
                            <div class="poptip-content">扫码登录</div>
                        </div>
                    </div>
                    <div class="login_form_bd">
                        <div class="error_tips"></div>
                        <input type="hidden" name="directAction" value="">
                        <input type="hidden" name="refererurl" value="">
                        <div class="login_field">
                            <label>用户名/邮箱</label>
                            <input class="login_field_text" v-model="username" type="text" id="txtUserName" name="userName" placeholder="用户名" autofocus required autocomplete="off" @keyup.enter="loginFunc">
                            <i class="fa fa-user"></i>
                        </div>
                        <div class="login_field">
                            <label>登录密码</label>
                            <input class="login_field_text" v-model="password" type="text" onfocus="this.type='password'" id="txtPassword" name="password" placeholder="请输入密码" required autocomplete="off" @keyup.enter="loginFunc">
                            <i class="fa fa-unlock-alt"></i>
                        </div>
                        <div class="saveCheckbox_box">
                            <label for="saveCheckbox"><i :class="'fa '+(isCheckRu?'fa-check-square-o':'fa-square-o')"></i>记住用户名</label>
                            <input type="checkbox" id="saveCheckbox" style="display:none;" v-model="isCheckRu" @change="rememberUserEvent">
                        </div>
                        <div class="login_form_btn">
                            <div class="login_btn_area">
                                <button :class="'loginBtn'+(loginLoading?' disabled':'')" @click="loginFunc">登&nbsp;&nbsp;录<i :hidden="!loginLoading" class="el-icon-loading"></i></button>
                            </div>
                        </div>
                        <div class="login_form_foot">
                            <span class="forgetPw" @click="resetPw"><i class="fa fa-lock"></i><span style="margin-left: 5px">忘记密码?</span></span>
                            <span class="login_form_app"><i class="miniIcon" data-type="app"></i><span style="margin-left: 5px">APP下载</span></span>
                        </div>
                        <div style="display:none;">
                            <form id="singleSign" action="" method="post">
                                <input type="hidden" name="username" v-model="username">
                                <input type="hidden" name="password" v-model="password">
                                <input type="hidden" name="service" value="">
                                <input type="hidden" name="loginUrl" value="">
                                <input type="hidden" name="submit1" value="true">
                            </form>
                        </div>
                    </div>
                </div>
                <div id="showCom" class="loginMainBox" :hidden="!(config.isScan&&currLoginType=='scan')">
                    <div class="login-title">扫码登录</div>
                    <div class="login-tip">
                        <div class="poptip">
                            <div class="poptip-arrow">
                                <em></em>
                                <span></span>
                            </div>
                            <div class="poptip-content">密码登录</div>
                        </div>
                    </div>
                    <img @click="changeCom" class="icon-qrcode" :src="comIcon" alt=""/>
                    <div style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">
                        
                        <div class="login-error" style="display: none">登录失败!</div>
                        <div class="qrcode-img"  style="display: none">
                            <canvas height="130" width="130" style="height: 130px; width: 130px;"></canvas>
                            <div class="qrcode-error">
                                <p>二维码失效</p>
                                <button type="button" class="refresh">刷新二维码</button>
                            </div>
                        </div>
                    </div>
                    <div class="login-content nc-outer-box" style="display: none">
                        <div class="qrcode-login">
                            <div class="qrcode-success">
                                
                                <p>扫描成功！</p>
                                <h4>请在手机上根据提示确认登录</h4>
                            </div>
                        </div>
                    </div>
                    <div class="qrDesc">
                        <div>
                            
                        </div>
                        <div class="qrDesc_right">
                            <span> 打开<a style="color: blue">海创科技App</a><br>
                            扫一扫登录</span>
                        </div>
                    </div>
                </div>
                <div id="qrcode"></div>
            </div>
        </div>
        <div class="login_ft">
            <div class="login_ft_main" id="login_copyright">{{this.config.copyright}}</div>
        </div>
    </div>
</template>
<script>
import {baseLogin} from "./api/login";
import md5 from "md5";
import {projectName} from './config'
import 'font-awesome/css/font-awesome.css'
import{setToken,getUserId,setUserId,removeUserId} from "./utils/auth.js"
export default {
    components:{
        
    },
    data(){
        return {
            comIcon:"./assets/computer.png",
            scanIcon:"./assets/qrcode_3.png",
            username:"",
            password:"",
            config:{
                title:"中海创科技",
                loginLogoImg:"./assets/Logo1.png",
                loginLogoImg_height:56,
                loginLogoImg_width:206,
                loginBgImg:"./assets/background.png",
                copyright:"版权所有 © 2020-2025 中海创科技",
                isSingleLogin:false,
                isScan:true,
            },
            currLoginType:"com",
            rememberUserId:getUserId(),
            loginLoading:false,

}
    },
    computed:{
        bgStyle(){
            return {
                "background-image":"url("+this.config.loginBgImg+")",
            }
        },
        logoStyle(){
            return {
                "background-image":"url("+this.config.loginLogoImg+")",
                "height":this.config.loginLogoImg_height+"px",
                "width":this.config.loginLogoImg_width+"px",
            }
        },
        isCheckRu(){
            return !!this.rememberUserId;
        },
    },
    mounted(){
        if(this.isCheckRu){
            this.username=this.rememberUserId;
        }
    },
    methods:{
        loginFunc(){
            this.defaultLogin();
            console.log(this.username);
            console.log(this.password);
        },
        defaultLogin() {
            /*this.$refs.loginForm.validate(valid => {
                if (valid) {*/
                    this.loginLoading = true;
                    baseLogin({ username: this.username.trim(), password: md5(this.password) }).then(response => {
                        const data = response
                        setToken(data.token)
                        if(this.isCheckRu){
                            setUserId(this.username);
                        }else{
                            removeUserId();
                        }
                        location=window.HIVUI_SETTING.mainPageUrl?window.HIVUI_SETTING.mainPageUrl:("/"+projectName+"/hivuiMain/index.html#/")
                    }).catch(error => {
                        this.loginLoading = false;
                    })
                /*} else {
                    console.log("error submit!!");
                    return false;
                }
            });*/
        },
        changeQr(){
            this.currLoginType="scan";
        },
        changeCom(){
            this.currLoginType="com";
        },
        rememberUserEvent(){
            if(this.isCheckRu){
                this.rememberUserId="";
            }else{
                this.rememberUserId=true;
            }
        },
        resetPw(){

}
    }
}
</script>
<style lang="less">
*{
	margin:0;
	padding: 0;
	box-sizing: border-box;
}
a{
	text-decoration: none;
}
ul,li{
	list-style: none;
}
button{
	outline: none;
	border: none;
}
html,body{
	height:100%;
	width: 100%;
    background: #fff;
}
input,body,button{
	font-family: "Microsoft YaHei",proxima-nova,"Helvetica Neue",arial,helvetica,clean,sans-serif;
}
body{
	font-size: 14px;
	color: #333;
}
.bg{
    height:100%;
    width:100%;
    position: relative;
}
.login_hd,.login_ft{
	height:100px;
	width: 100%;
	position: fixed;
	z-index: 99;
	left:0;
}
.login_hd_main,.login_ft_main{
	width: 1000px;
	height:100%;
	margin:0 auto;
}
.login_hd{
    top:0;
    .login_hd_logo{
        height: 60px;
        width: 265px;
        position: absolute;
        top:50px;
        left:50px;
        background:no-repeat;
        img{
            height:80px;
            width: 80px;
            margin-right: 90px;
            margin-top: 10px;
            float: right;
        }
        .login_hd_logo_tip{
            height: 32px;
            width: 84px;
            display: inline-block;
            padding: 0 20px;
            font-size: 22px;
            color: #fff;
            position: absolute;
            right: -104px;
            top: 0;
            bottom: 0;
            margin: auto;
            &:after{
                content:"";
                height:20px;
                width:2px;
                position:absolute;
                top:0;
                bottom:0;
                left: 0px;
                background-color:#8691a8;
                margin:auto;
            }
        }
    }
}
.login_bd{
	overflow: hidden;
	min-width: 1210px;
	position: relative;
	height:100%;
    background-color: #fff;
    .login_bd_bg {
        background:  no-repeat center center;
        background-size:100%;
        position: absolute;
        height: 100%;
        width: 100%;
    }
    .login_form{
        width: 370px;
        height: 360px;
        margin: auto;
        position: absolute;
        top: 0;
        left: 40%;
        right: 0;
        bottom: 0;
        background-color: #fff;
        padding: 1px;
        z-index: 100;
        box-shadow: 0 0 5px 1px rgba(0,0,0,0.5);
        .login_form_hd{
            color: #333;
            font-weight: bold;
            padding: 0 18px;
            box-sizing: border-box;
            width: 100%;
            font-size: 16px;
            text-align: left;
            line-height: 44px;
            height:44px;
            border-bottom: 1px solid #ccc;
        }
        .login_form_bd{
            min-height: 231px;
            height:100%;
            position: relative;
            padding: 24px 40px 0;
            .login_form_foot{
                line-height: 40px;
                margin-top: 20px;
                &i{
                    color: #0190D4;
                }
                .login_form_app,.login_download_app{
                    color: #0190D4;
                    float:right;
                    cursor:pointer;
                    &:hover{
                        color: #0f406c;
                        &i{
                            color: #0f406c;
                        }
                    }
                }
                .miniIcon{
                    display: inline-block;
                    height:16px;
                    width: 16px;
                    background-position: center center;
                    background-size: 100%;
                    margin-left: 20px;
                    vertical-align: middle;
                    &[data-type="app"]{
                        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjNGM0JDQ0E0OTc2NTExRUJBNzIxQTZFMjg4NTg2N0FDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjNGM0JDQ0E1OTc2NTExRUJBNzIxQTZFMjg4NTg2N0FDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6M0YzQkNDQTI5NzY1MTFFQkE3MjFBNkUyODg1ODY3QUMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6M0YzQkNDQTM5NzY1MTFFQkE3MjFBNkUyODg1ODY3QUMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz65Y/jqAAADAElEQVR42gzOTWgcVRwA8P/7mJmdjzfZ2W6TNM2u3ebSYBNqNSaKiqCgbYUWGi8ebBPwIIrtRewHSNSIoIIIFU2VHop4aMFlPYiVXlI0EinkoEnapKZ1szG7ze52srOzb97Ozjx7/N1+iIfy0jz8PB//EUSog3OE3Auhj/ibhrnLBQlxh3VERe3p5YcP6m+9EKPLN+OPv/d8YXf6IdoCW0T3mRCuipue2qPoYIVqPdC7UlEx20w//iwjd3umSrimqqzs+k4m5m7gqPr4S/T0IX12qeYG7CG9bSxwV0j45pZO0NgUYTqFkOi0UtVAaBfP4idsv1R0jz3Z63nBSlnk0mqrjSILE49i22y3Oa1WNCjSRB32s6DHb6/d/rcwz18+CGeOK9vFf5b+CywK0bbScTok9fT5lkIRh4ln0JvjcHQUpVEj//cjHNTCQmN0TM3p2mod1n2NMWRYHCvJhLcB+/rWzp6AcrG5VNrIDHiFn9Zn54o/FnYslCoTr+z44g07m2oEHkQ1E1ebkMQbky/uDX1477Otwl9ZgJ1fT2WU4X2vPw/PZfunL/isGX973DZKD+RO/2EN9JY4Ogalapjq2339Fxi6s54/ZVfedSpI/rCIZi6L3F59YjxgpnZHGGjknFzc5gdyna8mmY1hasZ3es2Th8Td1cgTRtKK27fw8FNQuLd8MT8oGMCBD3j/+yE5IYffWcnP35IyaEl59XcJ48vmiLj2Z7zZuv3lNZk4WTZOhY99GBDjyHRcb1hmYlUYhRv3gwobHdRMc312beDtyXBwWDn9Te3CnEDOri4VpIyQfUZK2bAV229CnITGUjRktq586ibTGQ4Ppmfold8YdIOju1To1NDQo5/LShV4wA2qEwZlt8pE2gpq5w6v3SiNXJ2Ldu+JE4iLyA4IIJDok1/FpbwM+jQvWtbqmW7L2gyhikBbBMhKzJBDQaFbvJVCnBw70iDXv/toBdOFOnTLRIYGtchM9IbpThkP2U5UHbBoK6aRYmYkfm0/nH+V/C/AALR/bXSBworaAAAAAElFTkSuQmCC");
                    }
                    &[data-type="desk"]{
                        background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjJGRUFBRDNFOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJGRUFBRDNGOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MkZFQUFEM0M5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MkZFQUFEM0Q5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7jOkn1AAABSElEQVR42mL8//8/AymApXzd08fvfv36+58Rh4o///7LCrLZqPCEmQgCuYwMaWeINPv/TGOQDUC8OEkx2kzoHw63MTMxrjv/Yf/Nz1AnATE/JzMjIwMIYwO7rn3iZGWcHCGL0PDt1z9czrj7+qf7xNtAxslKDTMFbiCDCY+jP/3469B7C8J27L318O0vfBpuvfwhUXLpyftfEC7QFQpVl888/AZyEjsLFtdffvodGJRff/07dvcLkCvGy6IrzXnkDpCddmbN2Xf/cYD9Nz+Bwj3tTNOWZxARkA0hM+8JcDH//osSrEBuiau4uSI3hOupww8NpTJ3iXuvf37//Y8J1V3AuNeQ4AA6DMjWk+E0keeCxR9ewJJxFuiei4+/wUVwhtKbL39su28yMTGsz1QG2oCUQnCAE/e+1G58+vrzbzRxRlKTN0CAAQB1Gu32zyWjpAAAAABJRU5ErkJggg==");
                    }
                }
            }
            .error_tips{
                position: absolute;
                line-height: 30px;
                font-size: 12px;
                color: #f60000;
                text-align: center;
                top:0;
                left:0;
                right: 0;
                width: 100%;
                margin:auto;
            }
            .login_field{
                position:relative;
                padding-bottom: 20px;
                label{
                    line-height: 35px;
                    display: block;
                    height: 35px;
                    font-size: 16px;
                }
                i{
                    font-size: 20px;
                    color: #aaa;
                    width: 35px;
                    text-align: center;
                    line-height: 40px;
                    height: 40px;
                    position: absolute;
                    top: 35px;
                    left:0;
                    margin:auto;
                }
                .login_field_text{
                    height:40px;
                    width: 100%;
                    line-height: 40px;
                    border:1px solid #ccc;
                    border-radius: 5px;
                    background-color: #fff;
                    font-size: 16px;
                    color: #000;
                    padding-left: 35px;
                    box-sizing: border-box;
                    font-family: "Microsoft YaHei",proxima-nova,"Helvetica Neue",arial,helvetica,clean,sans-serif;
                    &::input-placeholder{
                        color:#ccc;
                    }
                }
            }
            .saveCheckbox_box{
                height: 35px;
                line-height: 35px;
                padding-left: 30px;
                position:relative;
                top:-10px;
                label{
                    cursor: pointer;
                    user-select:none;
                }
                i{
                    font-size: 24px;
                    position: absolute;
                    top:0;
                    left:2px;
                    bottom:0;
                    margin:auto;
                    height: 25px;
                    width: 25px;
                    color:#888;
                    cursor: pointer;
                    text-align: center;
                }
                .occasion{
                    float: right;
                    &:after{
                        content: "";
                        background:  no-repeat;
                        width: 14px;
                        height: 18px;
                        position: absolute;
                        top: 30%;
                        pointer-events: none;
                        right:1px;
                    }
                    #selectStyle{
                        border: none;
                        outline: none;
                        width: 62px;
                        appearance: none;
                        -webkit-appearance: none;
                        -moz-appearance: none;
                    }
                }
            }
            .forgetPw{
                /* float: right; */
                color: #0190D4;
                cursor: pointer;
                margin-left: 5px;
                &:hover{
                    color: blue;
                    i{
                        color: blue;
                    }
                }
            }
            .login_form_btn{
                font-size: 13px;
                margin-top: 0px;
                .loginBtn{
                    /* background-color: #135189; */
                    background-color: #06c; 
                    width: 100%;
                    height:40px;
                    border:none;
                    border-radius: 5px;
                    color: #fff;
                    font-size: 16px;
                    font-weight: bold;
                    text-align: center;
                    cursor: pointer;
                    display: inline-block;
                    i{
                        margin-left:5px;
                    }
                    &:hover{
                        background-color: #0f406c;
                    }
                    &.disabled{
                        background-color: #ccc; 
                        &:hover{
                            background-color: #ccc; 
                        }
                    }
                }
            }
            /*二维码*/
            .qrCodeImg{
                /* position: absolute; */
                height:139px;
                width:139px;
                /* left:40% !important;
                right:0 !important;
                bottom:12%; */
                margin-top: 10px;
                margin-left: 85px;
                z-index: 999;
            }
        }
        .login_form_google{
            width: 280px;
            position: absolute;
            top: 317px;
            left: 0;
            bottom: 0;
            color: #fff;
            line-height: 20px;
            text-align: center;
            font-weight: bold;
            font-size: 13px;
            cursor: pointer;
            user-select: none;
            &>a{
                color:#fff;
            }
        }
        .loginMainBox{
            .login-title{
                height: 18px;
                line-height: 18px;
                font-size: 16px;
                color: #889aa4;
                margin-top: 12px;
                margin-left: 12px;
                padding-bottom: 8px;
                font-weight: 700;
            }
            .login-tip{
                position: absolute;
                top: 10px;
                right: 68px;
                display: block;
                .poptip{
                    background-color: #e6f9fc;
                    line-height: 16px;
                    position: relative;
                    z-index: 9999;
                    border: 1px solid #0073be;
                    padding: 5px 10px;
                    .poptip-arrow {
                        position: absolute;
                        z-index: 10;
                        top: 8px;
                        right: 0;
                        span{
                            position: absolute;
                            width: 0;
                            height: 0;
                            border-color: hsla(0,0%,100%,0);
                            border-style: solid;
                            overflow: hidden;
                            top: 0;
                            left: 0;
                            border-width: 6px 0 6px 6px;
                            border-left-color: #e6f4fc;
                        }
                        em {
                            position: absolute;
                            width: 0;
                            height: 0;
                            border-color: hsla(0,0%,100%,0);
                            border-style: solid;
                            overflow: hidden;
                            top: 0;
                            left: 0;
                            border-width: 6px 0 6px 6px;
                            border-left-color: #0073be;
                            border-right-color: #0073be;
                        }
                    }
                    .poptip-content {
                        font-size: 12px;
                        font-weight: 400;
                        color: #0073be;
                    }
                }
            }
            .qrDesc{
                font-size: 12px;
                color: #666;
                width: 160px;
                margin: auto;
                overflow: hidden;
                line-height: 17px;
                margin-top: 230px;
                .qrDesc_right{
                    position: relative;
                    left: 50px;
                    top: -35px;
                }
            }
            .scanMain{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                .qrcode-img {
                    position: relative;
                    margin: 20px auto;
                    font-size: 14px;
                    -webkit-box-shadow: 0 0 8px #ddd;
                    box-shadow: 0 0 8px #ddd;
                    opacity: 1;
                    width: 140px;
                    height: 140px;
                    .qrcode-error {
                        background: hsla(0,0%,100%,.95);
                        position: absolute;
                        left: 0;
                        top: 0;
                        z-index: 9999;
                        width: 100%;
                        height: 100%;
                        p {
                            font-weight: 700;
                            color: #222;
                            margin-top: 38px;
                            margin-bottom: 8px;
                            text-align: center;
                        }
                        .refresh {
                            background: #f40;
                            width: 110px;
                            height: 34px;
                            line-height: 34px;
                            text-align: center;
                            margin: 0 auto;
                            background: #ff9000;
                            border-color: #ff9000;
                            display: block;
                            color: #fff;
                            border-radius: 3px;
                            font-size: 14px;
                            cursor: pointer;
                        }
                    }
                    canvas {
                        margin: 5px;
                    }
                }
                .login-error{
                    text-align: center;
                    color: #222;
                    font-weight: 700;
                }
            }
            /*二维码切换登录*/
            .icon-qrcode{
                position: absolute;
                right: 5px;
                top: 5px;
                font-size: 52px;
                line-height: 52px;
                cursor: pointer;
                width: 56px;
                z-index:999
            }

.login-content {
                width: 100%;
                margin: 0 auto;
                padding-top: 55px;
                .qrcode-success {
                    text-align: center;
                    margin-top: 20px;
                    .iconfont {
                        color: #c5c5c5;
                        font-size: 36px;
                    }
                    h4,p {
                        margin-top: 10px;
                        font-size: 14px;
                    }
                }
            }
        }
    }
}
.login_ft{
	bottom: 0;
    .login_ft_main{
        line-height: 60px;
        text-align: center;
        font-size: 14px;
    }
}
/*登录对话框*/
.loginDialog{
	height:300px;
	width: 500px;
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	z-index: 199;
    .loginDialog_hd{
        height:35px;
        background-color: #0190D4;
        position: relative;
        h2{
            height:35px;
            line-height: 35px;
            font-size: 14px;
            color: #fff;
            padding: 0 20px;
        }
        .loginDialog_remove{
            position: absolute;
            top:0;
            bottom:0;
            right:5px;
            height:20px;
            width: 20px;
            background-color: #f30;
            cursor: pointer;
            margin: auto;
            text-align: center;
            &i{
                line-height: 20px;
                font-size: 18px;
                color: #fff;
            }
            &:hover{
                background-color: #f00;
            }
        }
    }
    .loginDialog_bd{
        width: 100%;
        height:215px;
        background-color: #fff;
    }
    .loginDialog_ft{
        height:50px;
        width: 100%;
        border-top: 1px solid #ccc;
        background-color: #f5f5f5;
        &:after{
            content: "";
            display: block;
            clear: both;
        }
        button{
            display: block;
            padding: 0 12px;
            font-size: 14px;
            margin-top: 11px;
            height:28px;
            line-height: 28px;
            text-align: center;
            cursor: pointer;
            color: #333333;
            background-color: #e9e9e9;
            float: right;
            margin-right:10px;
        }
        .loginDialog_confirmBtn{
            background-color: #5cb85c;
            color: #fff;
            &:hover{
                background-color: #47a447;
            }
        }
        .loginDialog_cancelmBtn:hover{
            background-color: #ddd;
        }
    }
}
.loginMask{
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color: #000;
	opacity: 0.5;
	z-index: 198;
}
#loginMsg{
	height:170px;
	width: 400px;
	top:10%;
	bottom: unset;
    z-index: 200;
    .loginDialog_bd{
        height:85px;
        line-height: 85px;
        padding-left: 20px;
        font-size: 14px;
    }
}
.dropdown{
    border: 1px solid #bebebe;
    border-radius: 3px;
    width: 100px;
    position: absolute;
    right: 20px;
    top: 229px;
    background: #fff;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.2);
    box-shadow: 0 0 10px rgba(0,0,0,.2);
    z-index: 100;
    overflow: auto;
    cursor: default;
    li{
        margin: 5px;
        :hover{
            background: #0190D4;
            color: #fff;
        }
        &.sceneActive{
            background: #0190D4;
            color: #fff;
        }
    }
}
.hideIframe{
    display:none;
}
</style>

<template>
    <div class="bg">
        <div class="login_hd">
            <div class="login_hd_logo" :style="logoStyle">
            
            </div>
        </div>
        <div class="login_bd">
            <div class="login_bd_bg" :style="bgStyle"></div>
            <div class="login_form">
                <div id="showQr" class="loginMainBox" :hidden="currLoginType!='com'">
                    <img @click="changeQr"  class="icon-qrcode" :src="scanIcon" :hidden="!config.isScan"/>
                    <div class="login-tip" :hidden="!config.isScan">
                        <div class="poptip">
                            <div class="poptip-arrow">
                                <em></em>
                                <span></span>
                            </div>
                            <div class="poptip-content">扫码登录</div>
                        </div>
                    </div>
                    <div class="login_form_bd">
                        <div class="error_tips"></div>
                        <input type="hidden" name="directAction" value="">
                        <input type="hidden" name="refererurl" value="">
                        <div class="login_field">
                            <label>用户名/邮箱</label>
                            <input class="login_field_text" v-model="username" type="text" id="txtUserName" name="userName" placeholder="用户名" autofocus required autocomplete="off" @keyup.enter="loginFunc">
                            <i class="fa fa-user"></i>
                        </div>
                        <div class="login_field">
                            <label>登录密码</label>
                            <input class="login_field_text" v-model="password" type="text" onfocus="this.type='password'" id="txtPassword" name="password" placeholder="请输入密码" required autocomplete="off" @keyup.enter="loginFunc">
                            <i class="fa fa-unlock-alt"></i>
                        </div>
                        <div class="saveCheckbox_box">
                            <label for="saveCheckbox"><i :class="'fa '+(isCheckRu?'fa-check-square-o':'fa-square-o')"></i>记住用户名</label>
                            <input type="checkbox" id="saveCheckbox" style="display:none;" v-model="isCheckRu" @change="rememberUserEvent">
                        </div>
                        <div class="login_form_btn">
                            <div class="login_btn_area">
                                <button class="loginBtn" @click="loginFunc">登&nbsp;&nbsp;录</button>
                            </div>
                        </div>
                        <div class="login_form_foot">
                            <span class="forgetPw" @click="resetPw"><i class="fa fa-lock"></i><span style="margin-left: 5px">忘记密码?</span></span>
                            <span class="login_form_app"><i class="miniIcon" data-type="app"></i><span style="margin-left: 5px">APP下载</span></span>
                        </div>
                        <div style="display:none;">
                            <form id="singleSign" action="" method="post">
                                <input type="hidden" name="username" v-model="username">
                                <input type="hidden" name="password" v-model="password">
                                <input type="hidden" name="service" value="">
                                <input type="hidden" name="loginUrl" value="">
                                <input type="hidden" name="submit1" value="true">
                            </form>
                        </div>
                    </div>
                </div>
                <div id="showCom" class="loginMainBox" :hidden="!(config.isScan&&currLoginType=='scan')">
                    <div class="login-title">扫码登录</div>
                    <div class="login-tip">
                        <div class="poptip">
                            <div class="poptip-arrow">
                                <em></em>
                                <span></span>
                            </div>
                            <div class="poptip-content">密码登录</div>
                        </div>
                    </div>
                    <img @click="changeCom" class="icon-qrcode" :src="comIcon" alt=""/>
                    <div style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">
                        
                        <div class="login-error" style="display: none">登录失败!</div>
                        <div class="qrcode-img"  style="display: none">
                            <canvas height="130" width="130" style="height: 130px; width: 130px;"></canvas>
                            <div class="qrcode-error">
                                <p>二维码失效</p>
                                <button type="button" class="refresh">刷新二维码</button>
                            </div>
                        </div>
                    </div>
                    <div class="login-content nc-outer-box" style="display: none">
                        <div class="qrcode-login">
                            <div class="qrcode-success">
                                
                                <p>扫描成功！</p>
                                <h4>请在手机上根据提示确认登录</h4>
                            </div>
                        </div>
                    </div>
                    <div class="qrDesc">
                        <div>
                            
                        </div>
                        <div class="qrDesc_right">
                            <span> 打开<a style="color: blue">海创科技App</a><br>
                            扫一扫登录</span>
                        </div>
                    </div>
                </div>
                <div id="qrcode"></div>
            </div>
        </div>
        <div class="login_ft">
            <div class="login_ft_main" id="login_copyright">{{this.config.copyright}}</div>
        </div>
    </div>
</template>
<script>
import {baseLogin} from "./api/login";
import md5 from "md5";
import {projectName} from './config'
import 'font-awesome/css/font-awesome.css'
import{setToken,getUserId,setUserId,removeUserId} from "./utils/auth.js"
export default {
    components:{
        
    },
    data(){
        return {
            comIcon:"./assets/computer.png",
            scanIcon:"./assets/qrcode_3.png",
            username:"",
            password:"",
            config:{
                title:"中海创科技",
                loginLogoImg:"./assets/Logo1.png",
                loginLogoImg_height:56,
                loginLogoImg_width:206,
                loginBgImg:"./assets/background.png",
                copyright:"版权所有 © 2020-2025 中海创科技",
                isSingleLogin:false,
                isScan:true,
            },
            currLoginType:"com",
            rememberUserId:getUserId(),

}
    },
    computed:{
        bgStyle(){
            return {
                "background-image":"url("+this.config.loginBgImg+")",
            }
        },
        logoStyle(){
            return {
                "background-image":"url("+this.config.loginLogoImg+")",
                "height":this.config.loginLogoImg_height+"px",
                "width":this.config.loginLogoImg_width+"px",
            }
        },
        isCheckRu(){
            return !!this.rememberUserId;
        },
    },
    mounted(){
        if(this.isCheckRu){
            this.username=this.rememberUserId;
        }
    },
    methods:{
        loginFunc(){
            this.defaultLogin();
            console.log(this.username);
            console.log(this.password);
        },
        defaultLogin() {
            /*this.$refs.loginForm.validate(valid => {
                if (valid) {*/
                    this.loading = true;
                    baseLogin({ username: this.username.trim(), password: md5(this.password) }).then(response => {
                        const data = response
                        setToken(data.token)
                        if(this.isCheckRu){
                            setUserId(this.username);
                        }else{
                            removeUserId();
                        }
                        location=window.HIVUI_SETTING.mainPageUrl?window.HIVUI_SETTING.mainPageUrl:("/"+projectName+"/hivuiMain/index.html#/")
                    }).catch(error => {
                        this.loading = false;
                    })
                /*} else {
                    console.log("error submit!!");
                    return false;
                }
            });*/
        },
        changeQr(){
            this.currLoginType="scan";
        },
        changeCom(){
            this.currLoginType="com";
        },
        rememberUserEvent(){
            if(this.isCheckRu){
                this.rememberUserId="";
            }else{
                this.rememberUserId=true;
            }
        },
        resetPw(){

}
    }
}
</script>
<style lang="less">
*{
	margin:0;
	padding: 0;
	box-sizing: border-box;
}
a{
	text-decoration: none;
}
ul,li{
	list-style: none;
}
button{
	outline: none;
	border: none;
}
html,body{
	height:100%;
	width: 100%;
    background: #fff;
}
input,body,button{
	font-family: "Microsoft YaHei",proxima-nova,"Helvetica Neue",arial,helvetica,clean,sans-serif;
}
body{
	font-size: 14px;
	color: #333;
}
.bg{
    height:100%;
    width:100%;
    position: relative;
}
.login_hd,.login_ft{
	height:100px;
	width: 100%;
	position: fixed;
	z-index: 99;
	left:0;
}
.login_hd_main,.login_ft_main{
	width: 1000px;
	height:100%;
	margin:0 auto;
}
.login_hd{
    top:0;
    .login_hd_logo{
        height: 60px;
        width: 265px;
        position: absolute;
        top:50px;
        left:50px;
        background:no-repeat;
        img{
            height:80px;
            width: 80px;
            margin-right: 90px;
            margin-top: 10px;
            float: right;
        }
        .login_hd_logo_tip{
            height: 32px;
            width: 84px;
            display: inline-block;
            padding: 0 20px;
            font-size: 22px;
            color: #fff;
            position: absolute;
            right: -104px;
            top: 0;
            bottom: 0;
            margin: auto;
            &:after{
                content:"";
                height:20px;
                width:2px;
                position:absolute;
                top:0;
                bottom:0;
                left: 0px;
                background-color:#8691a8;
                margin:auto;
            }
        }
    }
}
.login_bd{
	overflow: hidden;
	min-width: 1210px;
	position: relative;
	height:100%;
    background-color: #fff;
    .login_bd_bg {
        background:  no-repeat center center;
        background-size:100%;
        position: absolute;
        height: 100%;
        width: 100%;
    }
    .login_form{
        width: 370px;
        height: 360px;
        margin: auto;
        position: absolute;
        top: 0;
        left: 40%;
        right: 0;
        bottom: 0;
        background-color: #fff;
        padding: 1px;
        z-index: 100;
        box-shadow: 0 0 5px 1px rgba(0,0,0,0.5);
        .login_form_hd{
            color: #333;
            font-weight: bold;
            padding: 0 18px;
            box-sizing: border-box;
            width: 100%;
            font-size: 16px;
            text-align: left;
            line-height: 44px;
            height:44px;
            border-bottom: 1px solid #ccc;
        }
        .login_form_bd{
            min-height: 231px;
            height:100%;
            position: relative;
            padding: 24px 40px 0;
            .login_form_foot{
                line-height: 40px;
                margin-top: 20px;
                &i{
                    color: #0190D4;
                }
                .login_form_app,.login_download_app{
                    color: #0190D4;
                    float:right;
                    cursor:pointer;
                    &:hover{
                        color: #0f406c;
                        &i{
                            color: #0f406c;
                        }
                    }
                }
                .miniIcon{
                    display: inline-block;
                    height:16px;
                    width: 16px;
                    background-position: center center;
                    background-size: 100%;
                    margin-left: 20px;
                    vertical-align: middle;
                    &[data-type="app"]{
                        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjNGM0JDQ0E0OTc2NTExRUJBNzIxQTZFMjg4NTg2N0FDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjNGM0JDQ0E1OTc2NTExRUJBNzIxQTZFMjg4NTg2N0FDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6M0YzQkNDQTI5NzY1MTFFQkE3MjFBNkUyODg1ODY3QUMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6M0YzQkNDQTM5NzY1MTFFQkE3MjFBNkUyODg1ODY3QUMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz65Y/jqAAADAElEQVR42gzOTWgcVRwA8P/7mJmdjzfZ2W6TNM2u3ebSYBNqNSaKiqCgbYUWGi8ebBPwIIrtRewHSNSIoIIIFU2VHop4aMFlPYiVXlI0EinkoEnapKZ1szG7ze52srOzb97Ozjx7/N1+iIfy0jz8PB//EUSog3OE3Auhj/ibhrnLBQlxh3VERe3p5YcP6m+9EKPLN+OPv/d8YXf6IdoCW0T3mRCuipue2qPoYIVqPdC7UlEx20w//iwjd3umSrimqqzs+k4m5m7gqPr4S/T0IX12qeYG7CG9bSxwV0j45pZO0NgUYTqFkOi0UtVAaBfP4idsv1R0jz3Z63nBSlnk0mqrjSILE49i22y3Oa1WNCjSRB32s6DHb6/d/rcwz18+CGeOK9vFf5b+CywK0bbScTok9fT5lkIRh4ln0JvjcHQUpVEj//cjHNTCQmN0TM3p2mod1n2NMWRYHCvJhLcB+/rWzp6AcrG5VNrIDHiFn9Zn54o/FnYslCoTr+z44g07m2oEHkQ1E1ebkMQbky/uDX1477Otwl9ZgJ1fT2WU4X2vPw/PZfunL/isGX973DZKD+RO/2EN9JY4Ogalapjq2339Fxi6s54/ZVfedSpI/rCIZi6L3F59YjxgpnZHGGjknFzc5gdyna8mmY1hasZ3es2Th8Td1cgTRtKK27fw8FNQuLd8MT8oGMCBD3j/+yE5IYffWcnP35IyaEl59XcJ48vmiLj2Z7zZuv3lNZk4WTZOhY99GBDjyHRcb1hmYlUYhRv3gwobHdRMc312beDtyXBwWDn9Te3CnEDOri4VpIyQfUZK2bAV229CnITGUjRktq586ibTGQ4Ppmfold8YdIOju1To1NDQo5/LShV4wA2qEwZlt8pE2gpq5w6v3SiNXJ2Ldu+JE4iLyA4IIJDok1/FpbwM+jQvWtbqmW7L2gyhikBbBMhKzJBDQaFbvJVCnBw70iDXv/toBdOFOnTLRIYGtchM9IbpThkP2U5UHbBoK6aRYmYkfm0/nH+V/C/AALR/bXSBworaAAAAAElFTkSuQmCC");
                    }
                    &[data-type="desk"]{
                        background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjJGRUFBRDNFOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJGRUFBRDNGOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MkZFQUFEM0M5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MkZFQUFEM0Q5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7jOkn1AAABSElEQVR42mL8//8/AymApXzd08fvfv36+58Rh4o///7LCrLZqPCEmQgCuYwMaWeINPv/TGOQDUC8OEkx2kzoHw63MTMxrjv/Yf/Nz1AnATE/JzMjIwMIYwO7rn3iZGWcHCGL0PDt1z9czrj7+qf7xNtAxslKDTMFbiCDCY+jP/3469B7C8J27L318O0vfBpuvfwhUXLpyftfEC7QFQpVl888/AZyEjsLFtdffvodGJRff/07dvcLkCvGy6IrzXnkDpCddmbN2Xf/cYD9Nz+Bwj3tTNOWZxARkA0hM+8JcDH//osSrEBuiau4uSI3hOupww8NpTJ3iXuvf37//Y8J1V3AuNeQ4AA6DMjWk+E0keeCxR9ewJJxFuiei4+/wUVwhtKbL39su28yMTGsz1QG2oCUQnCAE/e+1G58+vrzbzRxRlKTN0CAAQB1Gu32zyWjpAAAAABJRU5ErkJggg==");
                    }
                }
            }
            .error_tips{
                position: absolute;
                line-height: 30px;
                font-size: 12px;
                color: #f60000;
                text-align: center;
                top:0;
                left:0;
                right: 0;
                width: 100%;
                margin:auto;
            }
            .login_field{
                position:relative;
                padding-bottom: 20px;
                label{
                    line-height: 35px;
                    display: block;
                    height: 35px;
                    font-size: 16px;
                }
                i{
                    font-size: 20px;
                    color: #aaa;
                    width: 35px;
                    text-align: center;
                    line-height: 40px;
                    height: 40px;
                    position: absolute;
                    top: 35px;
                    left:0;
                    margin:auto;
                }
                .login_field_text{
                    height:40px;
                    width: 100%;
                    line-height: 40px;
                    border:1px solid #ccc;
                    border-radius: 5px;
                    background-color: #fff;
                    font-size: 16px;
                    color: #000;
                    padding-left: 35px;
                    box-sizing: border-box;
                    font-family: "Microsoft YaHei",proxima-nova,"Helvetica Neue",arial,helvetica,clean,sans-serif;
                    &::input-placeholder{
                        color:#ccc;
                    }
                }
            }
            .saveCheckbox_box{
                height: 35px;
                line-height: 35px;
                padding-left: 30px;
                position:relative;
                top:-10px;
                label{
                    cursor: pointer;
                    user-select:none;
                }
                i{
                    font-size: 24px;
                    position: absolute;
                    top:0;
                    left:2px;
                    bottom:0;
                    margin:auto;
                    height: 25px;
                    width: 25px;
                    color:#888;
                    cursor: pointer;
                    text-align: center;
                }
                .occasion{
                    float: right;
                    &:after{
                        content: "";
                        background:  no-repeat;
                        width: 14px;
                        height: 18px;
                        position: absolute;
                        top: 30%;
                        pointer-events: none;
                        right:1px;
                    }
                    #selectStyle{
                        border: none;
                        outline: none;
                        width: 62px;
                        appearance: none;
                        -webkit-appearance: none;
                        -moz-appearance: none;
                    }
                }
            }
            .forgetPw{
                /* float: right; */
                color: #0190D4;
                cursor: pointer;
                margin-left: 5px;
                &:hover{
                    color: blue;
                    i{
                        color: blue;
                    }
                }
            }
            .login_form_btn{
                font-size: 13px;
                margin-top: 0px;
                .loginBtn{
                    /* background-color: #135189; */
                    background-color: #06c; 
                    width: 100%;
                    height:40px;
                    border:none;
                    border-radius: 5px;
                    color: #fff;
                    font-size: 16px;
                    font-weight: bold;
                    text-align: center;
                    cursor: pointer;
                    display: inline-block;
                    &:hover{
                        background-color: #0f406c;
                    }
                }
            }
            /*二维码*/
            .qrCodeImg{
                /* position: absolute; */
                height:139px;
                width:139px;
                /* left:40% !important;
                right:0 !important;
                bottom:12%; */
                margin-top: 10px;
                margin-left: 85px;
                z-index: 999;
            }
        }
        .login_form_google{
            width: 280px;
            position: absolute;
            top: 317px;
            left: 0;
            bottom: 0;
            color: #fff;
            line-height: 20px;
            text-align: center;
            font-weight: bold;
            font-size: 13px;
            cursor: pointer;
            user-select: none;
            &>a{
                color:#fff;
            }
        }
        .loginMainBox{
            .login-title{
                height: 18px;
                line-height: 18px;
                font-size: 16px;
                color: #889aa4;
                margin-top: 12px;
                margin-left: 12px;
                padding-bottom: 8px;
                font-weight: 700;
            }
            .login-tip{
                position: absolute;
                top: 10px;
                right: 68px;
                display: block;
                .poptip{
                    background-color: #e6f9fc;
                    line-height: 16px;
                    position: relative;
                    z-index: 9999;
                    border: 1px solid #0073be;
                    padding: 5px 10px;
                    .poptip-arrow {
                        position: absolute;
                        z-index: 10;
                        top: 8px;
                        right: 0;
                        span{
                            position: absolute;
                            width: 0;
                            height: 0;
                            border-color: hsla(0,0%,100%,0);
                            border-style: solid;
                            overflow: hidden;
                            top: 0;
                            left: 0;
                            border-width: 6px 0 6px 6px;
                            border-left-color: #e6f4fc;
                        }
                        em {
                            position: absolute;
                            width: 0;
                            height: 0;
                            border-color: hsla(0,0%,100%,0);
                            border-style: solid;
                            overflow: hidden;
                            top: 0;
                            left: 0;
                            border-width: 6px 0 6px 6px;
                            border-left-color: #0073be;
                            border-right-color: #0073be;
                        }
                    }
                    .poptip-content {
                        font-size: 12px;
                        font-weight: 400;
                        color: #0073be;
                    }
                }
            }
            .qrDesc{
                font-size: 12px;
                color: #666;
                width: 160px;
                margin: auto;
                overflow: hidden;
                line-height: 17px;
                margin-top: 230px;
                .qrDesc_right{
                    position: relative;
                    left: 50px;
                    top: -35px;
                }
            }
            .scanMain{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                .qrcode-img {
                    position: relative;
                    margin: 20px auto;
                    font-size: 14px;
                    -webkit-box-shadow: 0 0 8px #ddd;
                    box-shadow: 0 0 8px #ddd;
                    opacity: 1;
                    width: 140px;
                    height: 140px;
                    .qrcode-error {
                        background: hsla(0,0%,100%,.95);
                        position: absolute;
                        left: 0;
                        top: 0;
                        z-index: 9999;
                        width: 100%;
                        height: 100%;
                        p {
                            font-weight: 700;
                            color: #222;
                            margin-top: 38px;
                            margin-bottom: 8px;
                            text-align: center;
                        }
                        .refresh {
                            background: #f40;
                            width: 110px;
                            height: 34px;
                            line-height: 34px;
                            text-align: center;
                            margin: 0 auto;
                            background: #ff9000;
                            border-color: #ff9000;
                            display: block;
                            color: #fff;
                            border-radius: 3px;
                            font-size: 14px;
                            cursor: pointer;
                        }
                    }
                    canvas {
                        margin: 5px;
                    }
                }
                .login-error{
                    text-align: center;
                    color: #222;
                    font-weight: 700;
                }
            }
            /*二维码切换登录*/
            .icon-qrcode{
                position: absolute;
                right: 5px;
                top: 5px;
                font-size: 52px;
                line-height: 52px;
                cursor: pointer;
                width: 56px;
                z-index:999
            }

Ignore Space Show notes View project/hivuiLogin/api/login.js
import request from '../utils/request' import {codeProjectName,requestUrl} from '../config' import qs from 'qs'; let hi_request=null; if(window.HIVUI_SETTING&&window.HIVUI_SETTING.request){ hi_request=window.HIVUI_SETTING.request; } function _request(opt){ if(hi_request){ return hi_request(opt); }else{ return request(opt); } } const __base=(window.HIVUI_SETTING.serverUrl\|\|codeProjectName); const baseUrl = __base+"/login/pw-login"; export function baseLogin(param) { return _request({ url: baseUrl, method: 'post', data: param, }) } import request from '../utils/request' import {codeProjectName,requestUrl} from '../config' import qs from 'qs'; let hi_request=null; if(window.HIVUI_SETTING&&window.HIVUI_SETTING.request){ hi_request=window.HIVUI_SETTING.request; } function _request(opt){ if(hi_request){ return hi_request(opt); }else{ return request(opt); } } const baseUrl = (window.HIVUI_SETTING.serverUrl\|\|codeProjectName)+"/login/pw-login"; export function baseLogin(param) { return _request({ url: baseUrl, method: 'post', data: param, }) }

Ignore Space Show notes View

project/hivuiLogin/api/login.js

Ignore Space Show notes View project/hivuiMain/api/login.js
import request from '../utils/request' import {codeProjectName} from '../config' import qs from 'qs'; let hi_request=null; if(window.HIVUI_SETTING&&window.HIVUI_SETTING.request){ hi_request=window.HIVUI_SETTING.request; } function _request(opt){ if(hi_request){ return hi_request(opt); }else{ return request(opt); } } const __base=(window.HIVUI_SETTING.serverUrl\|\|codeProjectName); const baseUrl = __base+"/login/pw-login"; export function baseLogin(param) { return _request({ url: baseUrl, method: 'post', data: param, }) } export function logout(param) { return _request({ url: __base+"/login/sso-logout", method: 'post', data: param, }) } import request from '../utils/request' import {codeProjectName} from '../config' import qs from 'qs'; let hi_request=null; if(window.HIVUI_SETTING&&window.HIVUI_SETTING.request){ hi_request=window.HIVUI_SETTING.request; } function _request(opt){ if(hi_request){ return hi_request(opt); }else{ return request(opt); } } const baseUrl = (window.HIVUI_SETTING.serverUrl\|\|codeProjectName)+"/login/pw-login"; export function baseLogin(param) { return _request({ url: baseUrl, method: 'post', data: param, }) }

Ignore Space Show notes View

project/hivuiMain/api/login.js

Ignore Space Show notes View project/hivuiMain/api/menu.js
/** * 菜单权限列表：eaptpl.pro/ptpz.dir/xtgn.dir/gnqxcz.modeldir/data.datadir/yhcdqxlb.store/SqlEntity_NTqEeq7n.sqlentity /amrept-web/hcm/xtgl/xtfg/xtsy/funcdir/sygn.func 首页左侧菜单数据集： eaptpl.pro/ptpz.dir/xtgn.dir/sy.modeldir/datadir.datadir/syzccd.store/SqlEntity_r3hx80TL.sqlentity 菜单权限列表：eaptpl.pro/ptpz.dir/xtgn.dir/gnqxcz.modeldir/data.datadir/yhcdqxlb.store/SqlEntity_NTqEeq7n.sqlentity 取数功能路径：/project/xtgl/xtfg/xtsy/funcdir/sygn.func 测试地址：http://192.168.1.183:5001/amrept-web/project/ptpz/xtgj/sjdxzs/funcdir/sjdxzs.func cxf 跨域查询 url: http://192.168.100.183:5001/amrept-web/server/WebServiceWadl/{projectN}/cxfService/query 方式：get 参数： "body":查询条件 "modelFilePath":数据集业务路径 "queryCdion": "pageSize":每页数据条数 "pageNum":页数 "treePath": "funcpath":功能路径 "queryCache":是否应用查询缓存跨域保存 URL: http://192.168.100.183:5001/amrept-web/server/WebServiceWadl/{projectN}/cxfService/save 方式：get 参数：同上 / import { projectName,codeProjectName } from '../config' import request from '../utils/request' import qs from 'qs'; let hi_request=null; if(window.HIVUI_SETTING&&window.HIVUI_SETTING.request){ hi_request=window.HIVUI_SETTING.request; } function _request(opt){ if(hi_request){ return hi_request(opt); }else{ return request(opt); } } const __base=(window.HIVUI_SETTING.serverUrl\|\|codeProjectName); const queryUrl = (import.meta.env.VITE_APP_QUERYDATA\|\|process.env.VITE_APP_QUERYDATA).replace("[projectName]",projectName) export function getMenus() { ///amrept-web/data/query.do /let body={ "queryCdions": { "join": "and", "items": [ { "sign": "in", "name": "isShow", "desc": "", "dataType": "dbString", "value": [1,3,5], "enabled": true } ] } } return request({ url: queryUrl, method: 'post', data: qs.stringify({ modelFilePath: `${projectName}.pro/ptpz.dir/xtgn.dir/gnqxcz.modeldir/data.datadir/yhcdqxlb.store/SqlEntity_NTqEeq7n.sqlentity`, __funcpath: `/${projectName}/xtgl/xtfg/xtsy/funcdir/sygn.func`, pageNum: -1, pageSize: -1, __body:JSON.stringify(body) }) })/ return _request({ url: __base+"/login/user/menu", method: 'get', }) } //首面左侧快速导航 export function getQuickNav() { ///amrept-web/data/query.do let body={ "queryCdions": { "join": "and", "items": [ { "sign": "in", "name": "isShow", "desc": "", "dataType": "dbString", "value": [4,5], "enabled": true } ] } } return _request({ url: queryUrl, method: 'post', data: qs.stringify({ modelFilePath: `${projectName}.pro/ptpz.dir/xtgn.dir/gnqxcz.modeldir/data.datadir/yhcdqxlb.store/SqlEntity_NTqEeq7n.sqlentity`, __funcpath: `/${projectName}/xtgl/xtfg/xtsy/funcdir/sygn.func`, pageNum: -1, pageSize: -1, __body:JSON.stringify(body) }) }) } export function getPortalMenus() { ///amrept-web/data/query.do let body={ "queryCdions": { "join": "and", "items": [ { "sign": "in", "name": "isShow", "desc": "", "dataType": "dbString", "value": [6], "enabled": true } ] } } return _request({ url: queryUrl, method: 'post', data: qs.stringify({ modelFilePath: `${projectName}.pro/ptpz.dir/xtgn.dir/gnqxcz.modeldir/data.datadir/yhcdqxlb.store/SqlEntity_NTqEeq7n.sqlentity`, __funcpath: `/${projectName}/xtgl/xtfg/xtsy/funcdir/sygn.func`, pageNum: -1, pageSize: -1, __body:JSON.stringify(body) }) }) } //最近使用 export function getLeastRecentlyUsed(username) { ///amrept-web/data/query.do let body={ "queryCdions": { "join": "and", "items": [ { "sign": "eq", "name": "FUSERNAME", "desc": "", "dataType": "dbString", "value": username, "enabled": true } ] } } return _request({ url: queryUrl, method: 'post', data: qs.stringify({ modelFilePath: `${projectName}.pro/ptpz.dir/xtgn.dir/zjyy.modeldir/datadir.datadir/zjyy.store/SqlEntity_DrYlHLl6.sqlentity`, __funcpath: `/${projectName}/xtgl/xtfg/xtsy/funcdir/sygn.func`, pageNum: 1, pageSize: 10, __body:JSON.stringify(body) }) }) } //最近使用 export function getPermissions(username) { ///amrept-web/data/query.do let body={ "queryCdions": { "join": "and", "items": [ { "sign": "eq", "name": "userName", "desc": "", "dataType": "dbString", "value": username, "enabled": true } ] } } return _request({ url: queryUrl, method: 'post', data: qs.stringify({ modelFilePath: `${projectName}.pro/ptpz.dir/xtgn.dir/gnqxcz.modeldir/data.datadir/qxurllb.store/SqlEntity_nAIsAP3H.sqlentity`, __funcpath: `/${projectName}/xtgl/xtfg/xtsy/funcdir/sygn.func`, pageNum: -1, pageSize: -1, __body:JSON.stringify(body) }) }) } /* * 菜单权限列表：eaptpl.pro/ptpz.dir/xtgn.dir/gnqxcz.modeldir/data.datadir/yhcdqxlb.store/SqlEntity_NTqEeq7n.sqlentity /amrept-web/hcm/xtgl/xtfg/xtsy/funcdir/sygn.func 首页左侧菜单数据集： eaptpl.pro/ptpz.dir/xtgn.dir/sy.modeldir/datadir.datadir/syzccd.store/SqlEntity_r3hx80TL.sqlentity 菜单权限列表：eaptpl.pro/ptpz.dir/xtgn.dir/gnqxcz.modeldir/data.datadir/yhcdqxlb.store/SqlEntity_NTqEeq7n.sqlentity 取数功能路径：/project/xtgl/xtfg/xtsy/funcdir/sygn.func 测试地址：http://192.168.1.183:5001/amrept-web/project/ptpz/xtgj/sjdxzs/funcdir/sjdxzs.func cxf 跨域查询 url: http://192.168.100.183:5001/amrept-web/server/WebServiceWadl/{projectN}/cxfService/query 方式：get 参数： "body":查询条件 "modelFilePath":数据集业务路径 "queryCdion": "pageSize":每页数据条数 "pageNum":页数 "treePath": "funcpath":功能路径 "queryCache":是否应用查询缓存跨域保存 URL: http://192.168.100.183:5001/amrept-web/server/WebServiceWadl/{projectN}/cxfService/save 方式：get 参数：同上 / import { projectName,codeProjectName } from '../config' import request from '../utils/request' import qs from 'qs'; let hi_request=null; if(window.HIVUI_SETTING&&window.HIVUI_SETTING.request){ hi_request=window.HIVUI_SETTING.request; } function _request(opt){ if(hi_request){ return hi_request(opt); }else{ return request(opt); } } const queryUrl = (import.meta.env.VITE_APP_QUERYDATA\|\|process.env.VITE_APP_QUERYDATA).replace("[projectName]",projectName) export function getMenus() { ///amrept-web/data/query.do /let body={ "queryCdions": { "join": "and", "items": [ { "sign": "in", "name": "isShow", "desc": "", "dataType": "dbString", "value": [1,3,5], "enabled": true } ] } } return request({ url: queryUrl, method: 'post', data: qs.stringify({ modelFilePath: `${projectName}.pro/ptpz.dir/xtgn.dir/gnqxcz.modeldir/data.datadir/yhcdqxlb.store/SqlEntity_NTqEeq7n.sqlentity`, __funcpath: `/${projectName}/xtgl/xtfg/xtsy/funcdir/sygn.func`, pageNum: -1, pageSize: -1, __body:JSON.stringify(body) }) })*/ return _request({ url: (window.HIVUI_SETTING.serverUrl\|\|codeProjectName)+"/login/user/menu", method: 'get', }) } //首面左侧快速导航 export function getQuickNav() { ///amrept-web/data/query.do let body={ "queryCdions": { "join": "and", "items": [ { "sign": "in", "name": "isShow", "desc": "", "dataType": "dbString", "value": [4,5], "enabled": true } ] } } return _request({ url: queryUrl, method: 'post', data: qs.stringify({ modelFilePath: `${projectName}.pro/ptpz.dir/xtgn.dir/gnqxcz.modeldir/data.datadir/yhcdqxlb.store/SqlEntity_NTqEeq7n.sqlentity`, __funcpath: `/${projectName}/xtgl/xtfg/xtsy/funcdir/sygn.func`, pageNum: -1, pageSize: -1, __body:JSON.stringify(body) }) }) } export function getPortalMenus() { ///amrept-web/data/query.do let body={ "queryCdions": { "join": "and", "items": [ { "sign": "in", "name": "isShow", "desc": "", "dataType": "dbString", "value": [6], "enabled": true } ] } } return _request({ url: queryUrl, method: 'post', data: qs.stringify({ modelFilePath: `${projectName}.pro/ptpz.dir/xtgn.dir/gnqxcz.modeldir/data.datadir/yhcdqxlb.store/SqlEntity_NTqEeq7n.sqlentity`, __funcpath: `/${projectName}/xtgl/xtfg/xtsy/funcdir/sygn.func`, pageNum: -1, pageSize: -1, __body:JSON.stringify(body) }) }) } //最近使用 export function getLeastRecentlyUsed(username) { ///amrept-web/data/query.do let body={ "queryCdions": { "join": "and", "items": [ { "sign": "eq", "name": "FUSERNAME", "desc": "", "dataType": "dbString", "value": username, "enabled": true } ] } } return _request({ url: queryUrl, method: 'post', data: qs.stringify({ modelFilePath: `${projectName}.pro/ptpz.dir/xtgn.dir/zjyy.modeldir/datadir.datadir/zjyy.store/SqlEntity_DrYlHLl6.sqlentity`, __funcpath: `/${projectName}/xtgl/xtfg/xtsy/funcdir/sygn.func`, pageNum: 1, pageSize: 10, __body:JSON.stringify(body) }) }) } //最近使用 export function getPermissions(username) { ///amrept-web/data/query.do let body={ "queryCdions": { "join": "and", "items": [ { "sign": "eq", "name": "userName", "desc": "", "dataType": "dbString", "value": username, "enabled": true } ] } } return _request({ url: queryUrl, method: 'post', data: qs.stringify({ modelFilePath: `${projectName}.pro/ptpz.dir/xtgn.dir/gnqxcz.modeldir/data.datadir/qxurllb.store/SqlEntity_nAIsAP3H.sqlentity`, __funcpath: `/${projectName}/xtgl/xtfg/xtsy/funcdir/sygn.func`, pageNum: -1, pageSize: -1, __body:JSON.stringify(body) }) }) }

Ignore Space Show notes View

project/hivuiMain/api/menu.js

/**
 * 
菜单权限列表：eaptpl.pro/ptpz.dir/xtgn.dir/gnqxcz.modeldir/data.datadir/yhcdqxlb.store/SqlEntity_NTqEeq7n.sqlentity
/amrept-web/hcm/xtgl/xtfg/xtsy/funcdir/sygn.func

首页左侧菜单数据集：
eaptpl.pro/ptpz.dir/xtgn.dir/sy.modeldir/datadir.datadir/syzccd.store/SqlEntity_r3hx80TL.sqlentity
菜单权限列表：eaptpl.pro/ptpz.dir/xtgn.dir/gnqxcz.modeldir/data.datadir/yhcdqxlb.store/SqlEntity_NTqEeq7n.sqlentity
取数功能路径：/project/xtgl/xtfg/xtsy/funcdir/sygn.func
测试地址：http://192.168.1.183:5001/amrept-web/project/ptpz/xtgj/sjdxzs/funcdir/sjdxzs.func

cxf 跨域查询
	url: http://192.168.100.183:5001/amrept-web/server/WebServiceWadl/{projectN}/cxfService/query
	方式：get
	参数：
	"body":查询条件
	"modelFilePath":数据集业务路径
	"queryCdion":
	"pageSize":每页数据条数
	"pageNum":页数
	"treePath":
	"funcpath":功能路径
	"queryCache":是否应用查询缓存

跨域保存
	URL: http://192.168.100.183:5001/amrept-web/server/WebServiceWadl/{projectN}/cxfService/save
	方式：get
	参数：同上

*/
import { projectName,codeProjectName } from '../config'
import request from '../utils/request'
import qs from 'qs';
let hi_request=null;
if(window.HIVUI_SETTING&&window.HIVUI_SETTING.request){
	hi_request=window.HIVUI_SETTING.request;
}
function _request(opt){
  if(hi_request){
    return hi_request(opt);
  }else{
    return request(opt);
  }
}
const __base=(window.HIVUI_SETTING.serverUrl||codeProjectName);
const queryUrl = (import.meta.env.VITE_APP_QUERYDATA||process.env.VITE_APP_QUERYDATA).replace("[projectName]",projectName)
export function getMenus() {
	///amrept-web/data/query.do
	/*let body={
		"queryCdions": {
			"join": "and",
			"items": [
				{
					"sign": "in",
					"name": "isShow",
					"desc": "",
					"dataType": "dbString",
					"value": [1,3,5],
					"enabled": true
				}
			]
		}
	}
	return request({
		url: queryUrl,
		method: 'post',
		data: qs.stringify({
			modelFilePath: `${projectName}.pro/ptpz.dir/xtgn.dir/gnqxcz.modeldir/data.datadir/yhcdqxlb.store/SqlEntity_NTqEeq7n.sqlentity`,
			__funcpath: `/${projectName}/xtgl/xtfg/xtsy/funcdir/sygn.func`,
			pageNum: -1,
			pageSize: -1,
			__body:JSON.stringify(body)
		})
	})*/

return _request({
		url: __base+"/login/user/menu",
		method: 'get',
	})

}
//首面左侧快速导航
export function getQuickNav() {
	///amrept-web/data/query.do
	let body={
		"queryCdions": {
			"join": "and",
			"items": [
				{
					"sign": "in",
					"name": "isShow",
					"desc": "",
					"dataType": "dbString",
					"value": [4,5],
					"enabled": true
				}
			]
		}
	}
	return _request({
		url: queryUrl,
		method: 'post',
		data: qs.stringify({
			modelFilePath: `${projectName}.pro/ptpz.dir/xtgn.dir/gnqxcz.modeldir/data.datadir/yhcdqxlb.store/SqlEntity_NTqEeq7n.sqlentity`,
			__funcpath: `/${projectName}/xtgl/xtfg/xtsy/funcdir/sygn.func`,
			pageNum: -1,
			pageSize: -1,
			__body:JSON.stringify(body)
		})
	})
}

export function getPortalMenus() {
	///amrept-web/data/query.do
	let body={
		"queryCdions": {
			"join": "and",
			"items": [
				{
					"sign": "in",
					"name": "isShow",
					"desc": "",
					"dataType": "dbString",
					"value": [6],
					"enabled": true
				}
			]
		}
	}
	return _request({
		url: queryUrl,
		method: 'post',
		data: qs.stringify({
			modelFilePath: `${projectName}.pro/ptpz.dir/xtgn.dir/gnqxcz.modeldir/data.datadir/yhcdqxlb.store/SqlEntity_NTqEeq7n.sqlentity`,
			__funcpath: `/${projectName}/xtgl/xtfg/xtsy/funcdir/sygn.func`,
			pageNum: -1,
			pageSize: -1,
			__body:JSON.stringify(body)
		})
	})
}
//最近使用
export function getLeastRecentlyUsed(username) {
	///amrept-web/data/query.do
	let body={
		"queryCdions": {
			"join": "and",
			"items": [
				{
					"sign": "eq",
					"name": "FUSERNAME",
					"desc": "",
					"dataType": "dbString",
					"value": username,
					"enabled": true
				}
			]
		}
	}
	return _request({
		url: queryUrl,
		method: 'post',
		data: qs.stringify({
			modelFilePath: `${projectName}.pro/ptpz.dir/xtgn.dir/zjyy.modeldir/datadir.datadir/zjyy.store/SqlEntity_DrYlHLl6.sqlentity`,
			__funcpath: `/${projectName}/xtgl/xtfg/xtsy/funcdir/sygn.func`,
			pageNum: 1,
			pageSize: 10,
			__body:JSON.stringify(body)
		})
	})
}

//最近使用
export function getPermissions(username) {
	///amrept-web/data/query.do
	let body={
		"queryCdions": {
			"join": "and",
			"items": [
				{
					"sign": "eq",
					"name": "userName",
					"desc": "",
					"dataType": "dbString",
					"value": username,
					"enabled": true
				}
			]
		}
	}
	return _request({
		url: queryUrl,
		method: 'post',
		data: qs.stringify({
			modelFilePath: `${projectName}.pro/ptpz.dir/xtgn.dir/gnqxcz.modeldir/data.datadir/qxurllb.store/SqlEntity_nAIsAP3H.sqlentity`,
			__funcpath: `/${projectName}/xtgl/xtfg/xtsy/funcdir/sygn.func`,
			pageNum: -1,
			pageSize: -1,
			__body:JSON.stringify(body)
		})
	})
}

/**
 * 
菜单权限列表：eaptpl.pro/ptpz.dir/xtgn.dir/gnqxcz.modeldir/data.datadir/yhcdqxlb.store/SqlEntity_NTqEeq7n.sqlentity
/amrept-web/hcm/xtgl/xtfg/xtsy/funcdir/sygn.func

跨域保存
	URL: http://192.168.100.183:5001/amrept-web/server/WebServiceWadl/{projectN}/cxfService/save
	方式：get
	参数：同上

*/
import { projectName,codeProjectName } from '../config'
import request from '../utils/request'
import qs from 'qs';
let hi_request=null;
if(window.HIVUI_SETTING&&window.HIVUI_SETTING.request){
	hi_request=window.HIVUI_SETTING.request;
}
function _request(opt){
  if(hi_request){
    return hi_request(opt);
  }else{
    return request(opt);
  }
}
const queryUrl = (import.meta.env.VITE_APP_QUERYDATA||process.env.VITE_APP_QUERYDATA).replace("[projectName]",projectName)
export function getMenus() {
	///amrept-web/data/query.do
	/*let body={
		"queryCdions": {
			"join": "and",
			"items": [
				{
					"sign": "in",
					"name": "isShow",
					"desc": "",
					"dataType": "dbString",
					"value": [1,3,5],
					"enabled": true
				}
			]
		}
	}
	return request({
		url: queryUrl,
		method: 'post',
		data: qs.stringify({
			modelFilePath: `${projectName}.pro/ptpz.dir/xtgn.dir/gnqxcz.modeldir/data.datadir/yhcdqxlb.store/SqlEntity_NTqEeq7n.sqlentity`,
			__funcpath: `/${projectName}/xtgl/xtfg/xtsy/funcdir/sygn.func`,
			pageNum: -1,
			pageSize: -1,
			__body:JSON.stringify(body)
		})
	})*/

return _request({
		url: (window.HIVUI_SETTING.serverUrl||codeProjectName)+"/login/user/menu",
		method: 'get',
	})

Ignore Space Show notes View project/hivuiMain/store/modules/user.js
import {baseLogin, logout} from '@main/api/login' import { getToken, setToken, removeToken } from '@main/utils/auth' import md5 from '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: {}, 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 }, 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 } }, actions: { load({ commit, state }) { }, // user login login({ commit }, userInfo) { const { username, password } = userInfo return new Promise((resolve, reject) => { baseLogin({ username: username.trim(), password: md5(password) }).then(response => { const data = response commit('SET_TOKEN', data.token) setToken(data.token) resolve() }).catch(error => { reject(error) }) }) }, // get user info getInfo({ commit, state }) { /return new Promise((resolve, reject) => { getInfo(state.token).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 = { bzid: info.fbzid, id: info.fuserid, name: info.fusername, weixin: info.fweixin, qq: info.fqq, mbPhone: info.fmbphone, email: info.femail, roleid: info.froleid, rolename: info.frolename, enterpriseid: info.fenterpriseid, enterprisename: info.fenterprisename, shopid: info.fshopid, shopname: info.fshopname, //org } // 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) => { logout(state.token).then(() => { commit('SET_TOKEN', '') commit('SET_ROLES', []) removeToken() resetRouter() 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() }) } } } export default user import {baseLogin, } from '@main/api/login' import { getToken, setToken, removeToken } from '@main/utils/auth' import md5 from '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: {}, 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 }, 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 } }, actions: { load({ commit, state }) { }, // user login login({ commit }, userInfo) { const { username, password } = userInfo return new Promise((resolve, reject) => { baseLogin({ username: username.trim(), password: md5(password) }).then(response => { const data = response commit('SET_TOKEN', data.token) setToken(data.token) resolve() }).catch(error => { reject(error) }) }) }, // get user info getInfo({ commit, state }) { /return new Promise((resolve, reject) => { getInfo(state.token).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 = { bzid: info.fbzid, id: info.fuserid, name: info.fusername, weixin: info.fweixin, qq: info.fqq, mbPhone: info.fmbphone, email: info.femail, roleid: info.froleid, rolename: info.frolename, enterpriseid: info.fenterpriseid, enterprisename: info.fenterprisename, shopid: info.fshopid, shopname: info.fshopname, //org } // 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) => { logout(state.token).then(() => { commit('SET_TOKEN', '') commit('SET_ROLES', []) removeToken() resetRouter() 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() }) } } } export default user

Ignore Space Show notes View

project/hivuiMain/store/modules/user.js

import {baseLogin, logout} from '@main/api/login'
import { getToken, setToken, removeToken } from '@main/utils/auth'
import md5 from '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: {},
    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
  },
  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
    }
  },
  actions: { 
    load({ commit, state }) {
      
    },
    // user login
    login({ commit }, userInfo) {
      const { username, password } = userInfo
      return new Promise((resolve, reject) => {
        baseLogin({ username: username.trim(), password: md5(password) }).then(response => {
          const data = response
          commit('SET_TOKEN', data.token)
          setToken(data.token)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

// get user info
    getInfo({ commit, state }) {
      /*return new Promise((resolve, reject) => {
        getInfo(state.token).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 = {
            bzid: info.fbzid,
            id: info.fuserid,
            name: info.fusername,
            weixin: info.fweixin,
            qq: info.fqq,
            mbPhone: info.fmbphone,
            email: info.femail,
            roleid: info.froleid,
            rolename: info.frolename,
            enterpriseid: info.fenterpriseid,
            enterprisename: info.fenterprisename,
            shopid: info.fshopid,
            shopname: info.fshopname,
            //org
          }

// 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) => {
        logout(state.token).then(() => {
          commit('SET_TOKEN', '')
          commit('SET_ROLES', [])
          removeToken()
          resetRouter()
          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()
      })
    }
  }
}

export default user

import {baseLogin, } from '@main/api/login'
import { getToken, setToken, removeToken } from '@main/utils/auth'
import md5 from '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: {},
    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
  },
  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
    }
  },
  actions: { 
    load({ commit, state }) {
      
    },
    // user login
    login({ commit }, userInfo) {
      const { username, password } = userInfo
      return new Promise((resolve, reject) => {
        baseLogin({ username: username.trim(), password: md5(password) }).then(response => {
          const data = response
          commit('SET_TOKEN', data.token)
          setToken(data.token)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

// get user info
    getInfo({ commit, state }) {
      /*return new Promise((resolve, reject) => {
        getInfo(state.token).then(response => {

// user logout
    logout({ commit, state }) {
      /*return new Promise((resolve, reject) => {
        logout(state.token).then(() => {
          commit('SET_TOKEN', '')
          commit('SET_ROLES', [])
          removeToken()
          resetRouter()
          resolve()
        }).catch(error => {
          reject(error)
        })
      })*/
    },

// 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()
      })
    }
  }
}

export default user

Ignore Space Show notes View project/hivuiMain/views/layout/components/Header.vue
<template> <div class="pl-header"> <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="@main/assets/logo.png" :width="sideWidth" v-if="logoSrc==''"> <img :src="logoSrc" :width="sideWidth" v-if="logoSrc!=''"> </div> <div v-else @click="hideTitle(true)"> <img src="@main/assets/logo_min.png" 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="@main/assets/logo.png" :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 == 'level'" > <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.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> </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 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> </div> </template> <script> // import pinyin from 'js-pinyin';//ie 下有问题编译不过 import vueContextMenu from "@main/components/contextMenu"; import { removeToken } from '@main/utils/auth' export default { components:{vueContextMenu}, 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' } } }, 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\|\|[]; }, 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 (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; } }, watch:{ searchWord(newVal,oldVal){ this.doSearch(newVal); } }, mounted(){ document.addEventListener('click',this.hideSeachResult) }, 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.stopPropagation(); if(item.type== "link"){ window.open(item.resUrl,item.name); return; } var _url=item.url; if(item.type== "widthToken"){ _url=item.url+"&access_token="+this.token; } if(item.url){ item.target=='tab'? this.addTab(_url,item.name,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(){ removeToken(); await this.$store.dispatch("user/logout").then(()=>{ 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.FURI, name:item.NAME });//inject 提供的方法只能传一个参数 }, hideTitle(name){ this.$emit('hideTitle', name); } } } </script> <template> <div class="pl-header"> <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="@main/assets/logo.png" :width="sideWidth" v-if="logoSrc==''"> <img :src="logoSrc" :width="sideWidth" v-if="logoSrc!=''"> </div> <div v-else @click="hideTitle(true)"> <img src="@main/assets/logo_min.png" 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="@main/assets/logo.png" :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 == 'level'" > <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.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> </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 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> </div> </template> <script> // import pinyin from 'js-pinyin';//ie 下有问题编译不过 import vueContextMenu from "@main/components/contextMenu"; export default { components:{vueContextMenu}, 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' } } }, 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\|\|[]; }, 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 (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; } }, watch:{ searchWord(newVal,oldVal){ this.doSearch(newVal); } }, mounted(){ document.addEventListener('click',this.hideSeachResult) }, 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.stopPropagation(); if(item.type== "link"){ window.open(item.resUrl,item.name); return; } var _url=item.url; if(item.type== "widthToken"){ _url=item.url+"&access_token="+this.token; } if(item.url){ item.target=='tab'? this.addTab(_url,item.name,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) } }, handleLogout(){ window.location.href = window.location.origin + '/amrept-web/loginOut.do'; }, 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.FURI, name:item.NAME });//inject 提供的方法只能传一个参数 }, hideTitle(name){ this.$emit('hideTitle', name); } } } </script>

Ignore Space Show notes View

project/hivuiMain/views/layout/components/Header.vue

import { removeToken } from '@main/utils/auth'
export default {
    components:{vueContextMenu},
    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'
            }
        }
    },  
    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||[];
        },
        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 (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;
        }
    },
    watch:{ 
        searchWord(newVal,oldVal){
            this.doSearch(newVal);
        }
    },
    mounted(){ 
        document.addEventListener('click',this.hideSeachResult)
    },
    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();

// 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.stopPropagation();
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }
            var _url=item.url;
            if(item.type== "widthToken"){
                _url=item.url+"&access_token="+this.token;
            }
            if(item.url){
                item.target=='tab'? this.addTab(_url,item.name,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(){
            removeToken();
            await this.$store.dispatch("user/logout").then(()=>{
                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.FURI,
                name:item.NAME
            });//inject 提供的方法只能 传一个参数
        },   
        hideTitle(name){
            this.$emit('hideTitle', name);
        }
    }
}
</script>

<template>
    <div class="pl-header">  
        <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="@main/assets/logo.png" :width="sideWidth" v-if="logoSrc==''">
                        <img :src="logoSrc" :width="sideWidth" v-if="logoSrc!=''">
                    </div>
                    <div v-else @click="hideTitle(true)">
                        <img src="@main/assets/logo_min.png" 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="@main/assets/logo.png"  :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 == 'level'" >
                <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.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>
                </li>
                <li v-if="item.type=='split'"><div class="line"></div></li>                
            </template>
            
            <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>
    </div>
</template>
<script>
// import pinyin from 'js-pinyin';//ie 下有问题 编译不过
 
import vueContextMenu from "@main/components/contextMenu";
export default {
    components:{vueContextMenu},
    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'
            }
        }
    },  
    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||[];
        },
        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 (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;
        }
    },
    watch:{ 
        searchWord(newVal,oldVal){
            this.doSearch(newVal);
        }
    },
    mounted(){ 
        document.addEventListener('click',this.hideSeachResult)
    },
    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();

// 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.stopPropagation();
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }
            var _url=item.url;
            if(item.type== "widthToken"){
                _url=item.url+"&access_token="+this.token;
            }
            if(item.url){
                item.target=='tab'? this.addTab(_url,item.name,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)
            }
        },
        handleLogout(){
            window.location.href = window.location.origin + '/amrept-web/loginOut.do';
        },
        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.FURI,
                name:item.NAME
            });//inject 提供的方法只能 传一个参数
        },   
        hideTitle(name){
            this.$emit('hideTitle', name);
        }
    }
}
</script>

Show line notes below