Browse code Merge branch 'master' of http://192.168.4.105:8080/gitbucket/git/08335/hivui-platform-template master
commit 7c0681a22e46e0022c15db2ed2c00d3040769e8d 2 parents 8494446 + 765bf2a caibinghong authored on 5 Oct 2021

Showing 22 changed files

• .env.development
• project/hivuiLogin/App.vue
• project/hivuiLogin/api/login.js
• project/hivuiMain/App.vue
• project/hivuiMain/api/login.js
• project/hivuiMain/api/user.js
• project/hivuiMain/components/contextMenu/index.vue
• project/hivuiMain/components/dialog/index.vue
• project/hivuiMain/components/tabpanel/panel.vue
• project/hivuiMain/index.html
• project/hivuiMain/store/getters.js
• project/hivuiMain/store/index.js
• project/hivuiMain/store/modules/app.js
• project/hivuiMain/store/modules/user.js
• project/hivuiMain/utils/index.js
• project/hivuiMain/views/design/columnsSelect.vue
• project/hivuiMain/views/layout/components/Header.vue
• project/hivuiMain/views/layout/components/Main.vue
• project/hivuiMain/views/layout/components/modifyPw/index.vue
• project/hivuiMain/views/layout/components/tabpanel/panel.vue
• project/setting/desktop/appsetting/js/1.0.0/appsetting.js
• vite-plugin/vite-plugin-func.js

Ignore Space Show notes View .env.development

VITE_APP_BASE_API = 'http://e5.hieap.cn/' VITE_APP_SERVER='e5' # 项目名/工号 VITE_APP_PN = eaptpl/admin VITE_APP_QUERYDATA = '/amrept-web/server/WebServiceWadl/[projectName]/cxfService/queryForm' VITE_APP_SAVEDATA = '/amrept-web/server/WebServiceWadl/[projectName]/cxfService/saveForm' VITE_APP_BASE_API = 'http://e5.hieap.cn/' VITE_APP_SERVER='e5' # 项目名/工号 VITE_APP_PN = eap5csxm/admin VITE_APP_QUERYDATA = '/amrept-web/server/WebServiceWadl/[projectName]/cxfService/queryForm' VITE_APP_SAVEDATA = '/amrept-web/server/WebServiceWadl/[projectName]/cxfService/saveForm'

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" > 登&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> </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, removeToken, 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: window.customSysCofig.loginTitle||"中海创科技", loginLogoImg: window.customSysCofig.loginLogo||"./assets/Logo1.png", loginLogoImg_height: window.customSysCofig.loginLogo_h||56, loginLogoImg_width: window.customSysCofig.loginLogo_w||206, loginBgImg: window.customSysCofig.loginBgImg||"./assets/background.png", copyright: window.customSysCofig.copyright||"版权所有 © 2020-2025 中海创科技", isScan: window.customSysCofig.isScan||false, }, 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) {*/ removeToken(); 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%, 0.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, 0.2); box-shadow: 0 0 10px rgba(0, 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' + (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%); " > <!-- <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, removeToken, 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) {*/ removeToken(); 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%, 0.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, 0.2); box-shadow: 0 0 10px rgba(0, 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/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/sso-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 __base=(window.HIVUI_SETTING.serverUrl||codeProjectName); const baseUrl = __base+"/login/pw-login"; export function baseLogin(param) { return _request({ url: baseUrl, method: 'post', data: param, }) }

Ignore Space Show notes View project/hivuiMain/App.vue

<template> <div class="app"> <transition> <router-view v-if="$store.state.appStatus=='success'" /> </transition> <transition> <div v-if="$store.state.appStatus!='success'" class="loader" > <div class="pl-logo-lg fadeInUp animated"> <img :src="logoSrc" v-if="logoSrc!=''" > </div> <span class="txt"> <span v-for="str in loadTexts">{{str}}</span> <span v-if="$store.state.appStatus=='loading'">{{$lang('sysLoading')||'系统加载中...'}}</span> <span v-if="$store.state.appStatus!='loading'" style="color:red" @click="handleReload" >{{$lang('loadedFailClickRefresh')||'加载失败,点我重试!'}}</span> </span> </div> </transition> </div> </template> <script> import LoginPic from "@main/assets/logo_max.png" export default { data() { return { loadTexts: "", logoSrc: "" }; }, methods: { handleReload() { window.location.reload(); }, detectZoom (){ var ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerCase(); if (window.devicePixelRatio !== undefined) { ratio = window.devicePixelRatio; } else if (~ua.indexOf('msie')) { if (screen.deviceXDPI && screen.logicalXDPI) { ratio = screen.deviceXDPI / screen.logicalXDPI; } } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) { ratio = window.outerWidth / window.innerWidth; } if (ratio){ ratio = Math.round(ratio * 100); } return ratio; }, checkZoom(){ let ratio = this.detectZoom(); if(ratio!=100){ // this.$message.error('警告，浏览器没有按正常比例显示会影响部份功能！') } }, }, mounted() { // this.checkZoom(); // window.addEventListener('resize',()=>{ // this.checkZoom(); // }); let me=this; window.Scp = { User: { id: "admin", name: "管理员", deptId: "", deptName: "", positionId: "GLY", postionName: "管理员", bzId: "admin_3", bzName: "管理员岗位3", bzDeptId: ".WLDJT.DGS", bzDeptName: "D公司", bzPositionId: "HQRY", bzPositionName: "后勤人员", orgId: "admin_3", defOrgId: "admin_3" } } window.__guid = new Date().valueOf(); setTimeout(()=>{ window.__sysConfig = _.merge({ events: { onLoad1: function () { } }, projectName: "eaptpl", /*sysProjectMange: { id: __guid++, name: '工程树', iconClass: 'icon-tree', uri: 'amreport/designer/tree/design.do', url: '/amrept-web/amreport/designer/tree/design.do' },*/ sysList: [ ], userInfo:{ id: __guid++, name: '${fusername}', type: 'userInfo', iconClass: 'icon-user', children: [ { id: __guid++, name:'用户编号：${fusername}/${fuserid}', iconClass:'icon-user', }, { id: __guid++, name:'岗位编制：${fbzname}/${fbzid}', iconClass:'icon-user', type:"orgBz", }, { id: __guid++, name:'机构名称：${fuserorgname}/${fuserorgid}', iconClass:'icon-user', }, { id: __guid++, name:'岗位名称：${frolename}', iconClass:'icon-user', }, /*{ id: __guid++, iconClass:'icon-edit', name:'修改用户信息', type:'modifyUserInfo', },*/ { id: __guid++, iconClass:'icon-edit', name:'修改密码', type:'modifyPw', }, ] }, },window.customSysCofig); this.$store.dispatch("app/getSysConfig").then(res=>{ let cfg = this.$store.state.app.config || {}; let loadText = (cfg.sysLoadLogo && cfg.sysLoadLogo.title) || ""; let logoSrc = (cfg.sysLoadLogo && cfg.sysLoadLogo.src) || ""; this.loadTexts=loadText.split(""); this.logoSrc=logoSrc||LoginPic; }); },0); } }; </script> <style scoped> .app { height: 100%; background: linear-gradient( rgb(255, 255, 255) 0px, rgb(243, 248, 253) 50%, rgb(229, 240, 250) ); } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } .loader { position: absolute; top: 50%; left: 50%; margin-top: -50px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -mos-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; } .loader .txt { display: inline-block; word-break: normal; white-space: nowrap; margin: auto; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 3px 5px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.1), 0 20px 20px rgba(0, 0, 0, 0.15); } .loader .txt span { display: inline-block; font-size: 68px !important; padding: 0 5px; -webkit-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; -moz-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; -moz-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; -ms-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; -o-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; color: #0066cc; } .loader .txt span:nth-child(1) { -webkit-animation-delay: 0ms; -moz-animation-delay: 0ms; -ms-animation-delay: 0ms; -o-animation-delay: 0ms; animation-delay: 0ms; } .loader .txt span:nth-child(2) { -webkit-animation-delay: 100ms; -moz-animation-delay: 100ms; -ms-animation-delay: 100ms; -o-animation-delay: 100ms; animation-delay: 100ms; } .loader .txt span:nth-child(3) { -webkit-animation-delay: 200ms; -moz-animation-delay: 200ms; -ms-animation-delay: 200ms; -o-animation-delay: 200ms; animation-delay: 200ms; } .loader .txt span:nth-child(4) { -webkit-animation-delay: 300ms; -moz-animation-delay: 300ms; -ms-animation-delay: 300ms; -o-animation-delay: 300ms; animation-delay: 300ms; } .loader .txt span:nth-child(5) { -webkit-animation-delay: 400ms; -moz-animation-delay: 400ms; -ms-animation-delay: 400ms; -o-animation-delay: 400ms; animation-delay: 400ms; } .loader .txt span:nth-child(6) { -webkit-animation-delay: 500ms; -moz-animation-delay: 500ms; -ms-animation-delay: 500ms; -o-animation-delay: 500ms; animation-delay: 500ms; } .loader .txt span:nth-child(7) { -webkit-animation-delay: 600ms; -moz-animation-delay: 600ms; -ms-animation-delay: 600ms; -o-animation-delay: 600ms; animation-delay: 600ms; } .loader .txt span:nth-child(8) { -webkit-animation-delay: 700ms; -moz-animation-delay: 700ms; -ms-animation-delay: 700ms; -o-animation-delay: 700ms; animation-delay: 700ms; } .loader .txt span:nth-child(9) { -webkit-animation-delay: 800ms; -moz-animation-delay: 800ms; -ms-animation-delay: 800ms; -o-animation-delay: 800ms; animation-delay: 800ms; } .loader .txt span:nth-child(10) { -webkit-animation-delay: 900ms; -moz-animation-delay: 900ms; -ms-animation-delay: 900ms; -o-animation-delay: 900ms; animation-delay: 900ms; } .loader .txt span:last-child { display: block; padding-top: 15px; font-size: 16px !important; text-shadow: none; color: #0272bd; text-shadow: none; animation: none; -webkit-animation: none; } @-webkit-keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } @-moz-keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } @-mos-keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } @-o-keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } @keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } </style> <template> <div class="app"> <transition> <router-view v-if="$store.state.appStatus=='success'" /> </transition> <transition> <div v-if="$store.state.appStatus!='success'" class="loader" > <div class="pl-logo-lg fadeInUp animated"> <img :src="logoSrc" v-if="logoSrc!=''" > </div> <span class="txt"> <span v-for="str in loadTexts">{{str}}</span> <span v-if="$store.state.appStatus=='loading'">{{$lang('sysLoading')||'系统加载中...'}}</span> <span v-if="$store.state.appStatus!='loading'" style="color:red" @click="handleReload" >{{$lang('loadedFailClickRefresh')||'加载失败,点我重试!'}}</span> </span> </div> </transition> </div> </template> <script> import LoginPic from "@main/assets/logo_max.png" export default { data() { let cfg = this.$store.state.app.config || {}; let loadText = (cfg.sysLoadLogo && cfg.sysLoadLogo.title) || ""; let logoSrc = (cfg.sysLoadLogo && cfg.sysLoadLogo.src) || ""; return { loadTexts: loadText.split(""), logoSrc: logoSrc||LoginPic }; }, methods: { handleReload() { window.location.reload(); }, detectZoom (){ var ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerCase(); if (window.devicePixelRatio !== undefined) { ratio = window.devicePixelRatio; } else if (~ua.indexOf('msie')) { if (screen.deviceXDPI && screen.logicalXDPI) { ratio = screen.deviceXDPI / screen.logicalXDPI; } } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) { ratio = window.outerWidth / window.innerWidth; } if (ratio){ ratio = Math.round(ratio * 100); } return ratio; }, checkZoom(){ let ratio = this.detectZoom(); if(ratio!=100){ // this.$message.error('警告，浏览器没有按正常比例显示会影响部份功能！') } } }, mounted() { // this.checkZoom(); // window.addEventListener('resize',()=>{ // this.checkZoom(); // }); } }; </script> <style scoped> .app { height: 100%; background: linear-gradient( rgb(255, 255, 255) 0px, rgb(243, 248, 253) 50%, rgb(229, 240, 250) ); } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } .loader { position: absolute; top: 50%; left: 50%; margin-top: -50px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -mos-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; } .loader .txt { display: inline-block; word-break: normal; white-space: nowrap; margin: auto; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 3px 5px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.1), 0 20px 20px rgba(0, 0, 0, 0.15); } .loader .txt span { display: inline-block; font-size: 68px !important; padding: 0 5px; -webkit-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; -moz-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; -moz-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; -ms-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; -o-animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; animation: text cubic-bezier(0.75, 0, 0.5, 1) 1.2s infinite; color: #0066cc; } .loader .txt span:nth-child(1) { -webkit-animation-delay: 0ms; -moz-animation-delay: 0ms; -ms-animation-delay: 0ms; -o-animation-delay: 0ms; animation-delay: 0ms; } .loader .txt span:nth-child(2) { -webkit-animation-delay: 100ms; -moz-animation-delay: 100ms; -ms-animation-delay: 100ms; -o-animation-delay: 100ms; animation-delay: 100ms; } .loader .txt span:nth-child(3) { -webkit-animation-delay: 200ms; -moz-animation-delay: 200ms; -ms-animation-delay: 200ms; -o-animation-delay: 200ms; animation-delay: 200ms; } .loader .txt span:nth-child(4) { -webkit-animation-delay: 300ms; -moz-animation-delay: 300ms; -ms-animation-delay: 300ms; -o-animation-delay: 300ms; animation-delay: 300ms; } .loader .txt span:nth-child(5) { -webkit-animation-delay: 400ms; -moz-animation-delay: 400ms; -ms-animation-delay: 400ms; -o-animation-delay: 400ms; animation-delay: 400ms; } .loader .txt span:nth-child(6) { -webkit-animation-delay: 500ms; -moz-animation-delay: 500ms; -ms-animation-delay: 500ms; -o-animation-delay: 500ms; animation-delay: 500ms; } .loader .txt span:nth-child(7) { -webkit-animation-delay: 600ms; -moz-animation-delay: 600ms; -ms-animation-delay: 600ms; -o-animation-delay: 600ms; animation-delay: 600ms; } .loader .txt span:nth-child(8) { -webkit-animation-delay: 700ms; -moz-animation-delay: 700ms; -ms-animation-delay: 700ms; -o-animation-delay: 700ms; animation-delay: 700ms; } .loader .txt span:nth-child(9) { -webkit-animation-delay: 800ms; -moz-animation-delay: 800ms; -ms-animation-delay: 800ms; -o-animation-delay: 800ms; animation-delay: 800ms; } .loader .txt span:nth-child(10) { -webkit-animation-delay: 900ms; -moz-animation-delay: 900ms; -ms-animation-delay: 900ms; -o-animation-delay: 900ms; animation-delay: 900ms; } .loader .txt span:last-child { display: block; padding-top: 15px; font-size: 16px !important; text-shadow: none; color: #0272bd; text-shadow: none; animation: none; -webkit-animation: none; } @-webkit-keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } @-moz-keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } @-mos-keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } @-o-keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } @keyframes text { 0% { color: #0066cc; } 40% { color: #fff; } 70%, 100% { color: #0066cc; } } </style>

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/sso-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 __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, }) }

Ignore Space Show notes View project/hivuiMain/api/user.js 0 → 100644

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); //获取用户信息 export function getInfo(param) { return _request({ url: window.HIVUI_SETTING.userInfo||(__base+"/sys/user/detail"), method: 'post', data: param, }) } //获取多岗列表 export function getBzList(param) { return _request({ url: __base+"/sys/user/detail-list", method: 'post', data: param, }) } //切换编制岗位 export function changeBz(param) { return _request({ url: __base+"/sys/user/switch-bz", method: 'post', data: param, }) } //修改密码 export function modifyPassword(param) { return _request({ url: __base+"/sys/user/update-pwd", method: 'post', data: param, }) }

Ignore Space Show notes View project/hivuiMain/components/contextMenu/index.vue

<template> <div class="context-menu context-menu-container" :class="openPosition" v-if="visible" :style="contextMenuPosition" v-click-outside="close" @click="close" @mouseenter="visble=true" @mouseleave="visible=false" ref="contextMenu" > <ul> <context-menu-item :field="field" v-for="(menuItem, index) in menuItems" :item="menuItem" :key="index"> </context-menu-item> </ul> </div> </template> <script> /* eslint-disable prefer-destructuring */ import ContextMenuItem from './ContextMenuItem.vue'; /** * A simple context menu component * * ```html * <ContextMenu :menu-items="[....]"/> * ``` */ export default { props: { menuItems: { type: Array, required: true, }, field:{ type:String, default:'title' } }, provide(){ let me=this; return { getActiveKey(){ return me.activeKey; }, setActiveKey(key){ me.activeKey = key; } } }, data() { return { visible: false, activeKey:'', contextMenuPosition: { top: 0, left: 0, }, openPosition: 'context-menu-open-right', }; }, methods: { close() { this.visible = false; }, /** * Accepts an Object with an `x, y` position or an instance of Event */ open(position) { this.visible = true; this.$nextTick(() => { let x = 0; let y = 0; if (typeof position !== 'undefined' && typeof position === 'object') { if (position instanceof Event) { const windowWidth = window.innerWidth; // const contextMenuWidth = this.$refs.contextMenu.getBoundingClientRect().width; //ie getBoundingClientRect null const contextMenuWidth = this.$refs.contextMenu.offsetWidth; let pageX = position.pageX; let pageY = position.pageY; // let elRect = position.currentTarget.getBoundingClientRect(); //ie getBoundingClientRect null let elRect = (position.currentTarget||position.target).getBoundingClientRect(); if( position.type != "contextmenu"){ pageX = elRect.left; pageY = elRect.top+elRect.height; if(pageX>=(windowWidth - contextMenuWidth*2)){ this.openPosition = 'context-menu-open-left'; x = windowWidth<(pageX+contextMenuWidth)?(windowWidth-contextMenuWidth):pageX; }else{ this.openPosition = 'context-menu-open-right'; x = pageX; } }else{ if (pageX >= (windowWidth - contextMenuWidth)) { this.openPosition = 'context-menu-open-left'; x = windowWidth - contextMenuWidth - 10; } else { this.openPosition = 'context-menu-open-right'; x = pageX; } } y = pageY; } else { x = position.x; y = position.y; } } this.contextMenuPosition = { left: `${x}px`, top: `${y}px`, }; }); }, }, components: { 'context-menu-item': ContextMenuItem, }, directives: { 'click-outside': { inserted: function (el) { document.body.appendChild(el) }, bind(el, binding, vnode) { el.clickOutsideEvent = (event) => { // here I check that click was outside the el and his childrens if (!(el === event.target || el.contains(event.target))) { // and if it did, call method provided in attribute value vnode.context[binding.expression](event); } }; document.body.addEventListener('click', el.clickOutsideEvent); }, unbind(el) { document.body.removeEventListener('click', el.clickOutsideEvent); }, } }, }; </script> <style lang="less"> @context-menu-border-radius: 0px; .context-menu-container { position: absolute; user-select: none; z-index: 100; } .context-menu { background: #fff; border-radius: @context-menu-border-radius; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); ul { margin: 0; padding: 0; list-style: none; :first-child { border-top-right-radius: @context-menu-border-radius; border-top-left-radius: @context-menu-border-radius; } :last-child { border-bottom-right-radius: @context-menu-border-radius; border-bottom-left-radius: @context-menu-border-radius; } li { position: relative; padding: 5px; display: block; line-height: 25px; cursor: pointer; .label { display: flex; white-space: nowrap; .iconfont{ margin-right: 5px; } .item-label { margin-right: 10px; } .children-indicator{ margin-left:auto; } } &.item-disabled { cursor: not-allowed; opacity: 0.3; } ul { display: none; } &.item-active{ background: #0066cc; >.label{ color:#fff; } } &:hover { background: #0066cc; >.label{ color:#fff; } > ul { position: absolute; // left: calc(100% + 2px); left:100%; top: 0; display: inline-block; min-width: 100px; } } } } &.context-menu-open-left { ul { li { &:hover { > ul { left: auto; // right: calc(100% + 2px); right: 100%; } } } } } } </style> <template> <div class="context-menu context-menu-container" :class="openPosition" v-if="visible" :style="contextMenuPosition" v-click-outside="close" @click="close" @mouseenter="visble=true" @mouseleave="visible=false" ref="contextMenu" > <ul> <context-menu-item :field="field" v-for="(menuItem, index) in menuItems" :item="menuItem" :key="index"> </context-menu-item> </ul> </div> </template> <script> /* eslint-disable prefer-destructuring */ import ContextMenuItem from './ContextMenuItem.vue'; /** * A simple context menu component * * ```html * <ContextMenu :menu-items="[....]"/> * ``` */ export default { props: { menuItems: { type: Array, required: true, }, field:{ type:String, default:'title' } }, provide(){ let me=this; return { getActiveKey(){ return me.activeKey; }, setActiveKey(key){ me.activeKey = key; } } }, data() { return { visible: false, activeKey:'', contextMenuPosition: { top: 0, left: 0, }, openPosition: 'context-menu-open-right', }; }, methods: { close() { this.visible = false; }, /** * Accepts an Object with an `x, y` position or an instance of Event */ open(position) { this.visible = true; this.$nextTick(() => { let x = 0; let y = 0; if (typeof position !== 'undefined' && typeof position === 'object') { if (position instanceof Event) { const windowWidth = window.innerWidth; // const contextMenuWidth = this.$refs.contextMenu.getBoundingClientRect().width; //ie getBoundingClientRect null const contextMenuWidth = this.$refs.contextMenu.offsetWidth; let pageX = position.pageX; let pageY = position.pageY; // let elRect = position.currentTarget.getBoundingClientRect(); //ie getBoundingClientRect null let elRect = (position.currentTarget||position.target).getBoundingClientRect(); if( position.type != "contextmenu"){ pageX = elRect.left; pageY = elRect.top+elRect.height; if(pageX>=(windowWidth - contextMenuWidth*2)){ this.openPosition = 'context-menu-open-left'; x = windowWidth<(pageX+contextMenuWidth)?(windowWidth-contextMenuWidth):pageX; }else{ this.openPosition = 'context-menu-open-right'; x = pageX; } }else{ if (pageX >= (windowWidth - contextMenuWidth)) { this.openPosition = 'context-menu-open-left'; x = windowWidth - contextMenuWidth - 10; } else { this.openPosition = 'context-menu-open-right'; x = pageX; } } y = pageY; } else { x = position.x; y = position.y; } } this.contextMenuPosition = { left: `${x}px`, top: `${y}px`, }; }); }, }, components: { 'context-menu-item': ContextMenuItem, }, directives: { 'click-outside': { inserted: function (el) { document.body.appendChild(el) }, bind(el, binding, vnode) { el.clickOutsideEvent = (event) => { // here I check that click was outside the el and his childrens if (!(el === event.target || el.contains(event.target))) { // and if it did, call method provided in attribute value vnode.context[binding.expression](event); } }; document.body.addEventListener('click', el.clickOutsideEvent); }, unbind(el) { document.body.removeEventListener('click', el.clickOutsideEvent); }, } }, }; </script> <style lang="less"> @context-menu-border-radius: 0px; .context-menu-container { position: absolute; user-select: none; z-index: 100; } .context-menu { background: #fff; border-radius: @context-menu-border-radius; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); ul { margin: 0; padding: 0; list-style: none; :first-child { border-top-right-radius: @context-menu-border-radius; border-top-left-radius: @context-menu-border-radius; } :last-child { border-bottom-right-radius: @context-menu-border-radius; border-bottom-left-radius: @context-menu-border-radius; } li { position: relative; padding: 5px; display: block; line-height: 25px; cursor: pointer; .label { // display: flex; white-space: nowrap; .iconfont{ margin-right: 5px; } .item-label { margin-right: 10px; } .children-indicator{ float: right; } } &.item-disabled { cursor: not-allowed; opacity: 0.3; } ul { display: none; } &.item-active{ background: #0066cc; >.label{ color:#fff; } } &:hover { background: #0066cc; >.label{ color:#fff; } > ul { position: absolute; // left: calc(100% + 2px); left:100%; top: 0; display: inline-block; min-width: 100px; } } } } &.context-menu-open-left { ul { li { &:hover { > ul { left: auto; // right: calc(100% + 2px); right: 100%; } } } } } } </style>

Ignore Space Show notes View project/hivuiMain/components/dialog/index.vue

<template> <transition> <div class="pl-dialog-wrap" v-show="visible"> <vue-draggable-resizable ref="cmp-VueDraggable" class="pl-dialog" class-name-handle="pl-dialog-resize" :w="w" :h="h" :z="zindex" :minWidth="width" :minHeight="height" :x="x" :y="y" @dragging="onDrag" @resizing="onResize" :parent="true" :dragHandle="dragHandle" :enableNativeDrag="true" > <div class="pl-dialog-head" ref="dom-head"> <div class="title"> {{title}} </div> <i class="icon-close iconfont close" @click="handleCancel"></i> </div> <div class="pl-dialog-body" ref="dom-body" :style="bdStyle"> <div class="pl-dialog-content" ref="dom-content"> <div v-html="content"></div> <slot v-if="!content"></slot> </div> </div> <div class="pl-dialog-foot" ref="dom-foot" v-if="hasfoot"> <slot name="footer"> <button class="pl-btn pl-btn-round" @click="handleCancel">取消</button> <button class="pl-btn pl-btn-round pl-btn-primary" @click="handleOk">确定</button> </slot> </div> </vue-draggable-resizable> <div class="pl-dialog-shadow" v-if="shade"></div> </div> </transition> </template> <script> //https://mauricius.github.io/vue-draggable-resizable/?path=/info/styling--style-resizing import VueDraggableResizable from "vue-draggable-resizable"; export default { components: { VueDraggableResizable }, data() { return { w: this.width, h: this.height, x: 0, y: 0, dragHandle: ".pl-dialog-head", zindex: 10000, bdStyle:{ height:null }, visible:false, content:null }; }, props:{ title:{ type:String, default:'提示' }, width:{ type:Number, default:200 }, height:{ type:Number, default:200 }, offset:{ type:String, default:'' }, hasfoot:{ type:Boolean, default:true }, shade:{ type:Boolean, default:true } }, mounted() { document.body.appendChild(this.$el); }, updated(){ this.resizeBody(); }, beforeDestroy(){ this.$el.remove(); }, methods: { winResize(){ let parentW = document.documentElement.offsetWidth, parentH = document.documentElement.offsetHeight || 0; this.winWidth=parentW; this.winHeight=parentH; }, setContent(html){ this.content = html; }, show(){ //v-if="visible" 显示会准 v-show会不准 this.visible=true; this.x = (document.documentElement.offsetWidth - this.w)/2; this.y = (document.documentElement.offsetHeight - this.h)/2; if(this.offset=='rb'){ this.x = (document.documentElement.offsetWidth - this.w); this.y = (document.documentElement.offsetHeight - this.h); } this.$nextTick(r=>{ //因为不会准 所以 重新计算 let dragable = this.$refs['cmp-VueDraggable']; dragable.resetBoundsAndMouseState(); dragable.rawWidth = this.w; dragable.rawHeight = this.h; dragable.rawLeft = this.x; dragable.rawTop = this.y; dragable.left = this.x; dragable.top = this.y; [dragable.parentWidth, dragable.parentHeight] = dragable.getParentSize(); dragable.rawRight = dragable.parentWidth - dragable.rawWidth - dragable.rawLeft dragable.rawBottom = dragable.parentHeight - dragable.rawHeight - dragable.rawTop }) }, hide(){ this.visible=false; }, resizeBody(){ if(!this.$refs['dom-head'])return; const headRect = this.$refs['dom-head'].getBoundingClientRect(); const footRect = this.$refs['dom-foot'].getBoundingClientRect(); this.bdStyle.height = (this.h - headRect.height - footRect.height)+'px'; }, onResize: function(x, y, width, height) { this.x = x; this.y = y; this.w = width; this.h = height; this.resizeBody(); }, onDrag: function(x, y) { this.x = x; this.y = y; }, handleOk(){ let backVal = this.$emit('onOk'); this.hide(); }, handleCancel(){ this.$emit('onCancel'); this.hide(); } } }; </script> <style lang="less"> .pl-dialog-wrap { position: fixed; left: 0; top: 0; width: 100%; height: 100%; } .pl-dialog-shadow { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; background: rgba(0, 0, 0, 0.3); } .pl-dialog { background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); position: relative; >.pl-dialog-head { padding: 15px 10px; border-top: 2px #0066cc solid; background: #efefef; cursor: move; height: 16px; overflow: hidden; > .close { position: absolute; right: 8px; top: 12px; font-size: 24px; color:#666; cursor: pointer; &:hover{ color:red; transform: rotate(-90); -webkit-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } } } >.pl-dialog-body { overflow: auto; .pl-dialog-content{ padding: 8px; } } >.pl-dialog-foot{ height: 35px; overflow: hidden; padding: 10px; text-align: right; background-color:#f3f3f3; .pl-btn+.pl-btn{ margin-left: 15px; } } .pl-dialog-resize { position: absolute; height: 4px; width: 4px; display: block!important; } .pl-dialog-resize-tl { top: 0px; left: 0px; cursor: nw-resize; } .pl-dialog-resize-tm { top: 0; left: 4px; right:4px; width:auto; cursor: n-resize; } .pl-dialog-resize-tr { top: 0; right:0; cursor: ne-resize; } .pl-dialog-resize-ml { top: 4px; bottom:4px; left: 0; height: auto; cursor: w-resize; } .pl-dialog-resize-mr { top: 4px; bottom: 4px; right: 0; height: auto; cursor: e-resize; } .pl-dialog-resize-bl { bottom: 0; left: 0; cursor: sw-resize; } .pl-dialog-resize-bm { bottom: 0; left: 4px; right: 4px; width:auto; cursor: s-resize; } .pl-dialog-resize-br { bottom: 0; right: 0; cursor: se-resize; } } </style> <template> <transition> <div class="pl-dialog-wrap" v-show="visible"> <vue-draggable-resizable ref="cmp-VueDraggable" class="pl-dialog" class-name-handle="pl-dialog-resize" :w="w" :h="h" :z="zindex" :minWidth="width" :minHeight="height" :x="x" :y="y" @dragging="onDrag" @resizing="onResize" :parent="true" :dragHandle="dragHandle" :enableNativeDrag="true" > <div class="pl-dialog-head" ref="dom-head"> <div class="title"> {{title}} </div> <i class="icon-close iconfont close" @click="handleCancel"></i> </div> <div class="pl-dialog-body" ref="dom-body" :style="bdStyle"> <div class="pl-dialog-content" ref="dom-content"> <div v-html="content"></div> <slot v-if="!content"></slot> </div> </div> <div class="pl-dialog-foot" ref="dom-foot" v-if="hasfoot"> <slot name="footer"> <button class="pl-btn pl-btn-round" @click="handleCancel">取消</button> <button class="pl-btn pl-btn-round pl-btn-primary" @click="handleOk">确定</button> </slot> </div> </vue-draggable-resizable> <div class="pl-dialog-shadow" v-if="shade"></div> </div> </transition> </template> <script> //https://mauricius.github.io/vue-draggable-resizable/?path=/info/styling--style-resizing import VueDraggableResizable from "vue-draggable-resizable"; export default { components: { VueDraggableResizable }, data() { return { w: this.width, h: this.height, x: 0, y: 0, dragHandle: ".pl-dialog-head", zindex: 10000, bdStyle:{ height:null }, visible:false, content:null }; }, props:{ title:{ type:String, default:'提示' }, width:{ type:Number, default:200 }, height:{ type:Number, default:200 }, offset:{ type:String, default:'' }, hasfoot:{ type:Boolean, default:true }, shade:{ type:Boolean, default:true } }, mounted() { document.body.appendChild(this.$el); }, updated(){ this.resizeBody(); }, beforeDestroy(){ this.$el.remove(); }, methods: { winResize(){ let parentW = document.documentElement.offsetWidth, parentH = document.documentElement.offsetHeight || 0; this.winWidth=parentW; this.winHeight=parentH; }, setContent(html){ this.content = html; }, show(){ //v-if="visible" 显示会准 v-show会不准 this.visible=true; this.x = (document.documentElement.offsetWidth - this.w)/2; this.y = (document.documentElement.offsetHeight - this.h)/2; if(this.offset=='rb'){ debugger this.x = (document.documentElement.offsetWidth - this.w); this.y = (document.documentElement.offsetHeight - this.h); } this.$nextTick(r=>{ //因为不会准 所以 重新计算 let dragable = this.$refs['cmp-VueDraggable']; dragable.resetBoundsAndMouseState(); dragable.rawWidth = this.w; dragable.rawHeight = this.h; dragable.rawLeft = this.x; dragable.rawTop = this.y; dragable.left = this.x; dragable.top = this.y; [dragable.parentWidth, dragable.parentHeight] = dragable.getParentSize(); dragable.rawRight = dragable.parentWidth - dragable.rawWidth - dragable.rawLeft dragable.rawBottom = dragable.parentHeight - dragable.rawHeight - dragable.rawTop }) }, hide(){ this.visible=false; }, resizeBody(){ if(!this.$refs['dom-head'])return; const headRect = this.$refs['dom-head'].getBoundingClientRect(); const footRect = this.$refs['dom-foot'].getBoundingClientRect(); this.bdStyle.height = (this.h - headRect.height - footRect.height)+'px'; }, onResize: function(x, y, width, height) { this.x = x; this.y = y; this.w = width; this.h = height; this.resizeBody(); }, onDrag: function(x, y) { this.x = x; this.y = y; }, handleOk(){ let backVal = this.$emit('onOk'); this.hide(); }, handleCancel(){ this.$emit('onCancel'); this.hide(); } } }; </script> <style lang="less"> .pl-dialog-wrap { position: fixed; left: 0; top: 0; width: 100%; height: 100%; } .pl-dialog-shadow { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; background: rgba(0, 0, 0, 0.3); } .pl-dialog { background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); position: relative; >.pl-dialog-head { padding: 15px 10px; border-top: 2px #0066cc solid; background: #efefef; cursor: move; height: 16px; overflow: hidden; > .close { position: absolute; right: 8px; top: 12px; font-size: 24px; color:#666; cursor: pointer; &:hover{ color:red; transform: rotate(-90); -webkit-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } } } >.pl-dialog-body { overflow: auto; .pl-dialog-content{ padding: 8px; } } >.pl-dialog-foot{ height: 35px; overflow: hidden; padding: 10px; text-align: right; background-color:#f3f3f3; .pl-btn+.pl-btn{ margin-left: 15px; } } .pl-dialog-resize { position: absolute; height: 4px; width: 4px; display: block!important; } .pl-dialog-resize-tl { top: 0px; left: 0px; cursor: nw-resize; } .pl-dialog-resize-tm { top: 0; left: 4px; right:4px; width:auto; cursor: n-resize; } .pl-dialog-resize-tr { top: 0; right:0; cursor: ne-resize; } .pl-dialog-resize-ml { top: 4px; bottom:4px; left: 0; height: auto; cursor: w-resize; } .pl-dialog-resize-mr { top: 4px; bottom: 4px; right: 0; height: auto; cursor: e-resize; } .pl-dialog-resize-bl { bottom: 0; left: 0; cursor: sw-resize; } .pl-dialog-resize-bm { bottom: 0; left: 4px; right: 4px; width:auto; cursor: s-resize; } .pl-dialog-resize-br { bottom: 0; right: 0; cursor: se-resize; } } </style>

Ignore Space Show notes View project/hivuiMain/components/tabpanel/panel.vue

<template> <div class="pl-tabs-panel" :title="title" v-show="active" > <div class="pl-loading pl-loading-fixed" v-show="url&&!loaded" ref="dom-loader"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <iframe v-if="hasUrl" @load="handleIframeLoad" :name="'iframe'+name" ref="iframe"></iframe> <slot v-if="!hasUrl"></slot> </div> </template> <script> export default { name:'PTabpanel', props:{ close:[String,Number,Boolean], itemData:Object, title:{ type:String, default:"" }, name:{ type:[String,Number], default:"" }, url:{ type:[String], default:"" }, index:[String,Number] }, data(){ return { scrollTop: 0, loaded: false, hasUrl:!(this.url==null||this.url=='') } }, computed:{ active(){ const active = this.$parent.currentName === this.name; return active; } }, watch:{ active(val){ let ifm = this.$refs["iframe"]; if(val){ this.setIframeSrc(); if (ifm&&ifm.contentDocument) { this.$nextTick(()=>{ //保持原有的滚动位置 ifm.contentDocument.documentElement.scrollTop=this.scrollTop; }); } }else{ if (ifm&&ifm.contentDocument) { //保持原有的滚动位置 this.scrollTop = ifm.contentDocument.documentElement.scrollTop; } } } }, updated() { this.$parent.$emit('tab-nav-update'); }, mounted(){ if(this.active){ // console.log('___________ mounted active ! setIframeSrc') this.setIframeSrc(); } }, beforeDestroy() { // this.offIframeScroll(); }, methods:{ setIframeSrc(){ let ifm = this.$refs['iframe']; if(!this.hasUrl||this.loaded==true){ if (ifm&&ifm.contentDocument) { ifm.contentWindow.document.body.scrollTop = this.scrollTop; } return; } if(ifm&&this.url.indexOf("about:blank")<0){ this.loaded = false; ifm.setAttribute('src',this.url); }else{ this.loaded = true; } }, reload(){ let ifm = this.$refs['iframe']; this.loaded=false; // console.log(' reload this page :',ifm.src,ifm.contentWindow.window.location.href); ifm.contentWindow.location.reload(); }, handleIframeLoad(evt){ // if(this.active==false){ // //如果没有被激活，就不加载 // return; // } let ifm = this.$refs['iframe']; if(this.title==""&& ifm.contentWindow.document.title!=""){ this.$emit("update:title", ifm.contentWindow.document.title); } if(ifm.src!=''&&ifm.src!=="about:blank"){ this.loaded=true; }else{ if(ifm.contentWindow.document.body.innerHTML==""||ifm.contentWindow.document.head.innerHTML==""){ this.loaded=false; }else{ this.loaded=true; } } if (ifm.contentDocument) { ifm.contentWindow.window.addEventListener('beforeunload',()=>{ this.loaded=false;//右击刷新 时进行加载状态 }); } this.loaded&&this.$emit('onIframeLoad',this,evt); }, } } </script> <template> <div class="pl-tabs-panel" :title="title" v-show="active" > <div class="pl-loading pl-loading-fixed" v-show="url&&!loaded" ref="dom-loader"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <iframe v-if="hasUrl" @load="handleIframeLoad" :name="'iframe'+name" ref="iframe"></iframe> <slot v-if="!hasUrl"></slot> </div> </template> <script> export default { name:'PTabpanel', props:{ close:[String,Number,Boolean], itemData:Object, title:{ type:String, default:"" }, name:{ type:[String,Number], default:"" }, url:{ type:[String], default:"" }, index:[String,Number] }, data(){ debugger return { scrollTop: 0, loaded: false, hasUrl:!(this.url==null||this.url=='') } }, computed:{ active(){ const active = this.$parent.currentName === this.name; return active; } }, watch:{ active(val){ let ifm = this.$refs["iframe"]; if(val){ this.setIframeSrc(); if (ifm&&ifm.contentDocument) { this.$nextTick(()=>{ //保持原有的滚动位置 ifm.contentDocument.documentElement.scrollTop=this.scrollTop; }); } }else{ if (ifm&&ifm.contentDocument) { //保持原有的滚动位置 this.scrollTop = ifm.contentDocument.documentElement.scrollTop; } } } }, updated() { this.$parent.$emit('tab-nav-update'); }, mounted(){ debugger if(this.active){ // console.log('___________ mounted active ! setIframeSrc') this.setIframeSrc(); } }, beforeDestroy() { // this.offIframeScroll(); }, methods:{ setIframeSrc(){ debugger let ifm = this.$refs['iframe']; if(!this.hasUrl||this.loaded==true){ if (ifm&&ifm.contentDocument) { ifm.contentWindow.document.body.scrollTop = this.scrollTop; } return; } if(ifm&&this.url.indexOf("about:blank")<0){ this.loaded = false; ifm.setAttribute('src',this.url); }else{ this.loaded = true; } }, reload(){ let ifm = this.$refs['iframe']; this.loaded=false; // console.log(' reload this page :',ifm.src,ifm.contentWindow.window.location.href); ifm.contentWindow.location.reload(); }, handleIframeLoad(evt){ // if(this.active==false){ // //如果没有被激活，就不加载 // return; // } let ifm = this.$refs['iframe']; if(this.title==""&& ifm.contentWindow.document.title!=""){ this.$emit("update:title", ifm.contentWindow.document.title); } if(ifm.src!=''&&ifm.src!=="about:blank"){ this.loaded=true; }else{ if(ifm.contentWindow.document.body.innerHTML==""||ifm.contentWindow.document.head.innerHTML==""){ this.loaded=false; }else{ this.loaded=true; } } if (ifm.contentDocument) { ifm.contentWindow.window.addEventListener('beforeunload',()=>{ this.loaded=false;//右击刷新 时进行加载状态 }); } this.loaded&&this.$emit('onIframeLoad',this,evt); }, } } </script>

Ignore Space Show notes View project/hivuiMain/index.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>EAP5-Admin-Main</title> <% if(htmlWebpackPlugin.vite){%> <!--预览时 公共库--> <link rel="stylesheet" href="/assets_platform/element-ui/index.css"> <script src="/assets_platform/vue/vue.min.js"></script> <script src="/assets_platform/vuex/vuex.min.js"></script> <script src="/assets_platform/vue-router/vue-router.min.js"></script> <script src="/assets_platform/element-ui/index.js"></script> <script src="/assets_platform/eap/eap.umd.min.js"></script> <%}%> <% if(!htmlWebpackPlugin.vite){%> <link rel="stylesheet" href="/${serverName}/render/assets_platform/element-ui/index.css"> <script src="/${serverName}/render/assets_platform/vue/vue.min.js"></script> <script src="/${serverName}/render/assets_platform/vuex/vuex.min.js"></script> <script src="/${serverName}/render/assets_platform/vue-router/vue-router.min.js"></script> <script src="/${serverName}/render/assets_platform/element-ui/index.js"></script> <!--发布时 公共库--> <!-- <script src="/${serverName}/render/assets_platform/vendor_dll/vuelibs.dll.js"></script> --> <script src="/${serverName}/render/assets_platform/vendor_dll/vendor.dll.js"></script> <script src="/${serverName}/render/assets_platform/eap/eap.umd.min.js"></script> <%}%> <!-- <script src="/eaptpl/setting/desktop/appsetting/js/1.0.0/appsetting.js" type="text/javascript"></script> --> </head> <body> <div id="app"> <div style="padding:50px 0;text-align:center;"> <div> <img id="main_loading_logo" src="" /> </div> <div>系统正在预览初始化中...<a href="javascript:location.reload();">【点我刷新】</a></div> </div> </div> <script> //window.onload=()=>{ debugger;let _img=window.customSysCofig&&window.customSysCofig.sysLoadLogo&&window.customSysCofig.sysLoadLogo.src; document.getElementById("main_loading_logo").src=(_img||"./assets/logo_max.png"); //} </script> <% if(htmlWebpackPlugin.vite==true){%> <script type="module" src="./index.js"></script> <%}%> <!-- built files will be auto injected --> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>EAP5-Admin-Main</title> <% if(htmlWebpackPlugin.vite){%> <!--预览时 公共库--> <link rel="stylesheet" href="/assets_platform/element-ui/index.css"> <script src="/assets_platform/vue/vue.min.js"></script> <script src="/assets_platform/vuex/vuex.min.js"></script> <script src="/assets_platform/vue-router/vue-router.min.js"></script> <script src="/assets_platform/element-ui/index.js"></script> <script src="/assets_platform/eap/eap.umd.min.js"></script> <%}%> <% if(!htmlWebpackPlugin.vite){%> <link rel="stylesheet" href="/${serverName}/render/assets_platform/element-ui/index.css"> <script src="/${serverName}/render/assets_platform/vue/vue.min.js"></script> <script src="/${serverName}/render/assets_platform/vuex/vuex.min.js"></script> <script src="/${serverName}/render/assets_platform/vue-router/vue-router.min.js"></script> <script src="/${serverName}/render/assets_platform/element-ui/index.js"></script> <!--发布时 公共库--> <!-- <script src="/${serverName}/render/assets_platform/vendor_dll/vuelibs.dll.js"></script> --> <script src="/${serverName}/render/assets_platform/vendor_dll/vendor.dll.js"></script> <script src="/${serverName}/render/assets_platform/eap/eap.umd.min.js"></script> <%}%> <!-- <script src="/eaptpl/setting/desktop/appsetting/js/1.0.0/appsetting.js" type="text/javascript"></script> --> </head> <body> <div id="app"> <div style="padding:50px 0;text-align:center;"> <div> <img src="./assets/logo_max.png" /> </div> <div>系统正在预览初始化中...<a href="javascript:location.reload();">【点我刷新】</a></div> </div> </div> <script> function changeLayout(name) { window.localStorage.setItem('layout', name) window.location.reload(); } var Scp = { User: { id: "admin", name: "管理员", deptId: "", deptName: "", positionId: "GLY", postionName: "管理员", bzId: "admin_3", bzName: "管理员岗位3", bzDeptId: ".WLDJT.DGS", bzDeptName: "D公司", bzPositionId: "HQRY", bzPositionName: "后勤人员", orgId: "admin_3", defOrgId: "admin_3" } } var __guid = new Date().valueOf(); var __sysConfig = { events: { onLoad1: function () { } }, projectName: "eaptpl", sysProjectMange: { id: __guid++, name: '工程树', iconClass: 'icon-tree', uri: 'amreport/designer/tree/design.do', url: '/amrept-web/amreport/designer/tree/design.do' }, sysLoadLogo: { src: '', title: '中海创科技' }, sysLogo: { src: '', title: '中海创科技' }, //默认门户 对应自定义门户功能 sysSetTabs: [ { title: '任务中心', id: __guid++, close: false, url: '#taskCenter', }, { title: '首页', id: __guid++, close: false, type: 'home', actived: true //默认选中 } // ,{ // title:'工作台', // id: __guid++, // close:false, // type:'work' // } ], //默认 打开功能 sysDefTabs: [ // { // id: __guid++, // title:"设计", // url:'http://192.168.7.109:9090/#/design', // close:true, // }, // { // id: __guid++, // title:"百度功能测试", // url:'http://www.baidu.com', // close:true // }, // { // id: __guid++, // title:"bing", // url:'https://cn.bing.com/', // close:true // } ], sysList: [ ], sysFuncMenus: [ { id: __guid++, name: '系统管理', url: window.HIVUI_SETTING.sysManageUrl + "/?pn=" + window.HIVUI_SETTING.projectName, iconClass: 'icon-set-fill', target: '_blank', type: 'widthToken', }, { id: __guid++, name: '<font color=red>邮件系统</font>', url: 'http://hcmail.histron.cn:8001/webmail/index.do?osName=windows', iconClass: 'icon-mail', target: '_blank', }, { type: 'split' }, { id: __guid++, name: '布局', type: 'layout', iconClass: 'icon-user', children: [ { id: 'vertical', name: '上下布局', handler: function () { changeLayout(this.id) } }, { id: 'level', name: '左右布局', handler: function () { changeLayout(this.id) } } ] }, { type: 'split' }, { id: __guid++, name: '用户信息', type: 'userInfo', iconClass: 'icon-user', children: [ { id: __guid++, name: '部门：AF10', iconClass: 'icon-user', actived: true }, { id: __guid++, html: '<font color=red>访问下属111</font>', name: '<font color=red>访问下属</font>', iconClass: 'icon-user', children: [ { name: "张三", id: __guid++ }, { name: "李四", id: __guid++ }, ] }, { id: __guid++, name: '修改密码', iconClass: '', handler: function () { alert('访问下属'); } } ] }, { type: 'split' } ], } </script> <% if(htmlWebpackPlugin.vite==true){%> <script type="module" src="./index.js"></script> <%}%> <!-- built files will be auto injected --> </body> </html>

Ignore Space Show notes View project/hivuiMain/store/getters.js

const getters = { token: state => state.user.token, userName: state => state.user.name, userId: state => state.user.id, showPwDialog:state => state.user.showPwDialog, powerList:state=>state.app.powerList, menusList: state=>state.app.menusList, menus: state=>state.app.menus, defTabs: state => state.app.defTabs, navs: state => state.app.navs, navsLatelyUse: state => state.app.latelyNavs, portalList: state => state.portal.list, portalSysList: state => state.portal.sysList, portalColumns: state => state.portal.columns, } export default getters const getters = { token: state => state.user.token, userName: state => state.user.name, userId: state => state.user.id, powerList:state=>state.app.powerList, menusList: state=>state.app.menusList, menus: state=>state.app.menus, defTabs: state => state.app.defTabs, navs: state => state.app.navs, navsLatelyUse: state => state.app.latelyNavs, portalList: state => state.portal.list, portalSysList: state => state.portal.sysList, portalColumns: state => state.portal.columns } export default getters

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

// import Vue from 'vue' // import Vuex from 'vuex' import app from './modules/app' import portal from './modules/portal' import user from './modules/user' import getters from './getters' Vue.use(Vuex) export default new Vuex.Store({ modules:{ portal, app, user }, getters, state: { appStatus:'loading'//failed , loading ,success }, mutations: { SET_appStatus(state,str){ state.appStatus = str; } }, actions: { async initApp(me){ // await me.dispatch('user/load') //await me.dispatch('app/getPowers')//权限 // console.log('//权限 end') await me.dispatch('app/getMenus')//菜单 // console.log('//菜单 end') await me.dispatch('user/getInfo')//获取用户信息 // console.log('//获取用户信息 end') await me.dispatch('user/getBzList')//获取多岗信息 // console.log('//获取多岗信息 end') // await me.dispatch('app/getLatelyUse')//最近使用 // console.log('//最近使用 end') //await me.dispatch('app/getQuickNav')//快速导航 // console.log('//快速导航 end') // await me.dispatch('portal/loadColumns')//栏目功能 // console.log('//栏目功能 end') // await me.dispatch('portal/loadList')//工作台门户列表 // console.log('//工作台门户列表 end') // await me.dispatch('portal/loadSysList')//系统门户列表 // console.log('//系统门户列表 end') }, setAppLoad({state,commit},status){ commit('SET_appStatus',status); } } }) // import Vue from 'vue' // import Vuex from 'vuex' import app from './modules/app' import portal from './modules/portal' import user from './modules/user' import getters from './getters' Vue.use(Vuex) export default new Vuex.Store({ modules:{ portal, app, user }, getters, state: { appStatus:'loading'//failed , loading ,success }, mutations: { SET_appStatus(state,str){ state.appStatus = str; } }, actions: { async initApp(me){ // await me.dispatch('user/load') //await me.dispatch('app/getPowers')//权限 // console.log('//权限 end') await me.dispatch('app/getMenus')//菜单 // console.log('//菜单 end') // await me.dispatch('app/getLatelyUse')//最近使用 // console.log('//最近使用 end') //await me.dispatch('app/getQuickNav')//快速导航 // console.log('//快速导航 end') // await me.dispatch('portal/loadColumns')//栏目功能 // console.log('//栏目功能 end') // await me.dispatch('portal/loadList')//工作台门户列表 // console.log('//工作台门户列表 end') // await me.dispatch('portal/loadSysList')//系统门户列表 // console.log('//系统门户列表 end') }, setAppLoad({state,commit},status){ commit('SET_appStatus',status); } } })

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

import { getMenus, getQuickNav,getLeastRecentlyUsed,getPermissions } from '../../api/menu' const portal = { namespaced: true, state: { powerList:[], menusList:[], menus:[], defTabs: [], navs: [], latelyNavs:[], config:[], }, mutations: { SET_powerList: (state, powerList) => { state.powerList = powerList }, SET_menusList: (state, menusList) => { state.menusList = menusList }, SET_menus: (state, menus) => { state.menus = menus }, SET_defTabs: (state, data) => { state.defTabs = data }, SET_navs: (state, navs) => { state.navs = navs }, SET_latelyNavs: (state, latelyNavs) => { state.latelyNavs = latelyNavs }, SET_config: (state, config) => { state.config = config }, }, actions: { //取功能菜单 async getMenus({ commit, state }) { await getMenus().then(res => { if(res.status==500){ if(window.HIVUI_SETTING.loginUrl){ location=window.HIVUI_SETTING.loginUrl; }else{ location="/"+projectName+"/hivuiLogin/index.html#/"; } } const data = res.dataPack; commit('SET_menusList', [...data]); console.log(`SET_menusList:`,data); let treeData=[...data],defTabs=[]; /*5.0字段替换3.0*/ let fieldConversion={ isActive:"fisactive", isOffline:"fisoffline", isShow:"fshow", name:"fresname", orderIndex:"forder", parentId:"frespguid", resId:"fresguid", resUrl:"fresurl", type:"frestype", } treeData=fieldChange([...treeData]); getActiveItem(treeData); /*替换*/ function fieldChange(_arr){ _arr.map(item=>{ if(item.children&&item.children.length>0){ fieldChange(item.children); } for(let i in fieldConversion){ if(typeof(item[fieldConversion[i]])!="undefined"){ item[i]=item[fieldConversion[i]]; delete item[fieldConversion[i]]; } } return item; }); return _arr; } /*获取默认打开项*/ function getActiveItem(_arr){ _arr.map(item=>{ //构建 树 map if(item.children&&item.children.length>0){ getActiveItem(item.children); } for(let i = (state.defTabs||[]).length-1;i>=0;i--){ if(state.defTabs[i].resId!=item.resId){ defTabs.push(item); break; } } }); } commit('SET_defTabs', [...defTabs,...state.defTabs]); console.info('menusTree:',treeData); commit('SET_menus', treeData); return data; }); }, //取左侧快速 async getQuickNav({ commit, state }) { await getQuickNav().then(res => { const data = res.data.dataPack.rows; console.log(`getQuickNav`) let defTabs=[],flag=false; data.map(item=>{ flag=false; for(let i = state.defTabs.length-1;i>=0;i--){ if(state.defTabs[i].resId==item.resId){ flag = true; break; } } if(item.isActive&&!flag) defTabs.push(item); }); commit('SET_defTabs', [...defTabs,...state.defTabs]); commit('SET_navs', data); return data; }); }, setQuickNav({ commit, state },data){ commit('SET_navs', data); }, async getLatelyUse({ commit, state }){ let me =this; await getLeastRecentlyUsed(me.state.user.id).then(res => { const data = res.data.dataPack.rows; commit('SET_latelyNavs', data); return data; }); }, //取功能权限 async getPowers({ commit, state }) { await getPermissions(this.state.user.id).then(res => { const data = res.data.dataPack.rows; commit('SET_powerList', [...data]); }); }, getSysConfig({ commit, state }){ commit('SET_config', window.__sysConfig); } } } export default portal import { getMenus, getQuickNav,getLeastRecentlyUsed,getPermissions } from '../../api/menu' const portal = { namespaced: true, state: { powerList:[], menusList:[], menus:[], defTabs: [], navs: [], latelyNavs:[], config:window.__sysConfig }, mutations: { SET_powerList: (state, powerList) => { state.powerList = powerList }, SET_menusList: (state, menusList) => { state.menusList = menusList }, SET_menus: (state, menus) => { state.menus = menus }, SET_defTabs: (state, data) => { state.defTabs = data }, SET_navs: (state, navs) => { state.navs = navs }, SET_latelyNavs: (state, latelyNavs) => { state.latelyNavs = latelyNavs }, }, actions: { //取功能菜单 async getMenus({ commit, state }) { await getMenus().then(res => { if(res.status==500){ if(window.HIVUI_SETTING.loginUrl){ location=window.HIVUI_SETTING.loginUrl; }else{ location="/"+projectName+"/hivuiLogin/index.html#/"; } } const data = res.dataPack; commit('SET_menusList', [...data]); console.log(`SET_menusList:`,data); let treeData=[...data],defTabs=[]; /*5.0字段替换3.0*/ let fieldConversion={ isActive:"fisactive", isOffline:"fisoffline", isShow:"fshow", name:"fresname", orderIndex:"forder", parentId:"frespguid", resId:"fresguid", resUrl:"fresurl", type:"frestype", } treeData=fieldChange([...treeData]); getActiveItem(treeData); /*替换*/ function fieldChange(_arr){ _arr.map(item=>{ if(item.children&&item.children.length>0){ fieldChange(item.children); } for(let i in fieldConversion){ if(typeof(item[fieldConversion[i]])!="undefined"){ item[i]=item[fieldConversion[i]]; delete item[fieldConversion[i]]; } } return item; }); return _arr; } /*获取默认打开项*/ function getActiveItem(_arr){ _arr.map(item=>{ //构建 树 map if(item.children&&item.children.length>0){ getActiveItem(item.children); } for(let i = (state.defTabs||[]).length-1;i>=0;i--){ if(state.defTabs[i].resId!=item.resId){ defTabs.push(item); break; } } }); } commit('SET_defTabs', [...defTabs,...state.defTabs]); console.info('menusTree:',treeData); commit('SET_menus', treeData); return data; }); }, //取左侧快速 async getQuickNav({ commit, state }) { await getQuickNav().then(res => { const data = res.data.dataPack.rows; console.log(`getQuickNav`) let defTabs=[],flag=false; data.map(item=>{ flag=false; for(let i = state.defTabs.length-1;i>=0;i--){ if(state.defTabs[i].resId==item.resId){ flag = true; break; } } if(item.isActive&&!flag) defTabs.push(item); }); commit('SET_defTabs', [...defTabs,...state.defTabs]); commit('SET_navs', data); return data; }); }, setQuickNav({ commit, state },data){ commit('SET_navs', data); }, async getLatelyUse({ commit, state }){ let me =this; await getLeastRecentlyUsed(me.state.user.id).then(res => { const data = res.data.dataPack.rows; commit('SET_latelyNavs', data); return data; }); }, //取功能权限 async getPowers({ commit, state }) { await getPermissions(this.state.user.id).then(res => { const data = res.data.dataPack.rows; commit('SET_powerList', [...data]); }); }, } } export default portal

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

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

import getScroll from './getScroll' export function getTargetRect(target) { return target !== window ? target.getBoundingClientRect() : { top: 0, left: 0, bottom: 0 }; } export function getOffset(element, target) { const elemRect = element.getBoundingClientRect(); const targetRect = getTargetRect(target); const scrollTop = getScroll(target, true); const scrollLeft = getScroll(target, false); const docElem = window.document.body; const clientTop = docElem.clientTop || 0; const clientLeft = docElem.clientLeft || 0; return { top: elemRect.top - targetRect.top + scrollTop - clientTop, left: elemRect.left - targetRect.left + scrollLeft - clientLeft, width: elemRect.width, height: elemRect.height, }; } export function getDefaultTarget() { return typeof window !== 'undefined' ? window : null; } /** * @method setUrlValue * @description 设置地址栏参数值 * @param url * @param pName * @param pValue * * @example: urlAppend("http://www.fdauto.com","userid=03870");�����http://www.fdauto.com?userid=03870;1` * urlAppend("http://www.fdauto.com?userid=03870","bumen=aj")�����http://www.fdauto.com?userid=03870&bumen=aj; */ export function setUrlValue(url, key, value) { var returnUrl = '' if (url.indexOf('?') == -1) { returnUrl += url + '?' + key + '=' + value } else { if (url.indexOf('?' + key + '=') == -1 && url.indexOf('&' + key + '=') == -1) { returnUrl += url + '&' + key + '=' + value } else { var isDone = false var startIndex = 0 var endIndex = url.length - 1 var parm = '?' + key + '=' for (var i = 0; i < url.length; i++) { if (url.substr(i, parm.length) == parm) { startIndex = i + parm.length for (var j = startIndex; j < url.length; j++) { if (url[j] == '&') { endIndex = j break } else if (j == url.length - 1) { endIndex = url.length } } isDone = true break } } if (!isDone) { parm = '&' + key + '=' for (var i = 0; i < url.length; i++) { if (url.substr(i, parm.length) == parm) { startIndex = i + parm.length for (var j = startIndex; j < url.length; j++) { if (url[j] == '&') { endIndex = j break } else if (j == url.length - 1) { endIndex = url.length } } break } } } var parmKeyValue = parm + url.substring(startIndex, endIndex) returnUrl = url.replace(parmKeyValue, parm + value) } } return returnUrl } /** * @method getUrlValue * @description 获取地址栏参数值 * @param name * string * @param url * string * @example: getUrlValue("p","http://www.baidu.com?p=5"); */ export function getUrlValue(url, name) { var str = url || window.location.search; if (str.indexOf("&" + name) != -1 || str.indexOf("?" + name) != -1) { var pos_start = "" if (str.indexOf("?" + name) > -1) pos_start = str.indexOf("?" + name) + name.length + 2; else pos_start = str.indexOf("&" + name) + name.length + 2; var pos_end = str.indexOf("&", pos_start); if (pos_end == -1) { return str.substring(pos_start); } else { return str.substring(pos_start, pos_end) } } else { return ""; } } export function getUrlSearch(url) { var name, value; var str = url; //取得整个地址栏 var num = str.indexOf("?") str = str.substr(num + 1); //取得所有参数 stringvar.substr(start [, length ] var arr = str.split("&"); //各个参数放到数组里 var search ={}; for (var i = 0; i < arr.length; i++) { num = arr[i].indexOf("="); if (num > 0) { name = arr[i].substring(0, num); value = arr[i].substr(num + 1); search[name] = value; } } return search; } /** * var str='这是一个测试的字符串：{0} {1}'.format('Hello','world'); * var str='这是一个测试的字符串：{str0} {str1}'.format({str0:'Hello',str1:'world'}); */ export function strFormat(str, args) { var result = str; if (arguments.length > 0) { if (arguments.length == 2 && typeof (args) == "object") { for (var key in args) { if (args[key] != undefined) { var reg = new RegExp("({" + key + "})", "g"); result = result.replace(reg, args[key]); } } } else { for (var i = 1; i < arguments.length; i++) { if (arguments[i] != undefined) { var reg = new RegExp("({)" + (i - 1) + "(})", "g"); result = result.replace(reg, arguments[i]); } } } } return result; } export function closeWindow(errorUrl){ if (document.all) { if (window.location.pathname == window.parent.location.pathname) { window.opener = null; window.open('', '_top'); window.top.close(); } } else { window.close(); } window.location.href = errorUrl || "about:blank"; } import getScroll from './getScroll' export function getTargetRect(target) { return target !== window ? target.getBoundingClientRect() : { top: 0, left: 0, bottom: 0 }; } export function getOffset(element, target) { const elemRect = element.getBoundingClientRect(); const targetRect = getTargetRect(target); const scrollTop = getScroll(target, true); const scrollLeft = getScroll(target, false); const docElem = window.document.body; const clientTop = docElem.clientTop || 0; const clientLeft = docElem.clientLeft || 0; return { top: elemRect.top - targetRect.top + scrollTop - clientTop, left: elemRect.left - targetRect.left + scrollLeft - clientLeft, width: elemRect.width, height: elemRect.height, }; } export function getDefaultTarget() { return typeof window !== 'undefined' ? window : null; } /** * @method setUrlValue * @description 设置地址栏参数值 * @param url * @param pName * @param pValue * * @example: urlAppend("http://www.fdauto.com","userid=03870");�����http://www.fdauto.com?userid=03870;1` * urlAppend("http://www.fdauto.com?userid=03870","bumen=aj")�����http://www.fdauto.com?userid=03870&bumen=aj; */ export function setUrlValue(url, key, value) { var returnUrl = '' if (url.indexOf('?') == -1) { returnUrl += url + '?' + key + '=' + value } else { if (url.indexOf('?' + key + '=') == -1 && url.indexOf('&' + key + '=') == -1) { returnUrl += url + '&' + key + '=' + value } else { var isDone = false var startIndex = 0 var endIndex = url.length - 1 var parm = '?' + key + '=' for (var i = 0; i < url.length; i++) { if (url.substr(i, parm.length) == parm) { startIndex = i + parm.length for (var j = startIndex; j < url.length; j++) { if (url[j] == '&') { endIndex = j break } else if (j == url.length - 1) { endIndex = url.length } } isDone = true break } } if (!isDone) { parm = '&' + key + '=' for (var i = 0; i < url.length; i++) { if (url.substr(i, parm.length) == parm) { startIndex = i + parm.length for (var j = startIndex; j < url.length; j++) { if (url[j] == '&') { endIndex = j break } else if (j == url.length - 1) { endIndex = url.length } } break } } } var parmKeyValue = parm + url.substring(startIndex, endIndex) returnUrl = url.replace(parmKeyValue, parm + value) } } return returnUrl } /** * @method getUrlValue * @description 获取地址栏参数值 * @param name * string * @param url * string * @example: getUrlValue("p","http://www.baidu.com?p=5"); */ export function getUrlValue(url, name) { var str = url || window.location.search; if (str.indexOf("&" + name) != -1 || str.indexOf("?" + name) != -1) { var pos_start = "" if (str.indexOf("?" + name) > -1) pos_start = str.indexOf("?" + name) + name.length + 2; else pos_start = str.indexOf("&" + name) + name.length + 2; var pos_end = str.indexOf("&", pos_start); if (pos_end == -1) { return str.substring(pos_start); } else { return str.substring(pos_start, pos_end) } } else { return ""; } } export function getUrlSearch(url) { var name, value; var str = url; //取得整个地址栏 var num = str.indexOf("?") str = str.substr(num + 1); //取得所有参数 stringvar.substr(start [, length ] var arr = str.split("&"); //各个参数放到数组里 var search ={}; for (var i = 0; i < arr.length; i++) { num = arr[i].indexOf("="); if (num > 0) { name = arr[i].substring(0, num); value = arr[i].substr(num + 1); search[name] = value; } } return search; } /** * var str='这是一个测试的字符串：{0} {1}'.format('Hello','world'); * var str='这是一个测试的字符串：{str0} {str1}'.format({str0:'Hello',str1:'world'}); */ export function strFormat(str, args) { var result = str; if (arguments.length > 0) { if (arguments.length == 2 && typeof (args) == "object") { for (var key in args) { if (args[key] != undefined) { var reg = new RegExp("({" + key + "})", "g"); result = result.replace(reg, args[key]); } } } else { for (var i = 1; i < arguments.length; i++) { if (arguments[i] != undefined) { var reg = new RegExp("({)" + (i - 1) + "(})", "g"); result = result.replace(reg, arguments[i]); } } } } return result; }

Ignore Space Show notes View project/hivuiMain/views/design/columnsSelect.vue

<template> <Dialog ref="cmp-dd" :title="dialogTitle" :width="650" :height="465"> <div class="pl-design-row pl-row transfer-tip"> <div class="pl-design-col pl-col-11"> <div class="pl-field"> <div class="pl-field-lb">{{$lang("setHeight")||"设置高度"}}</div> <div class="pl-field-val"> <input class="pl-field-text" type="text" v-model="panelHeight" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" /> </div> </div> </div> <div class="pl-design-col pl-col-2"></div> <div class="pl-design-col pl-col-11"> &nbsp;&nbsp; <i class="move iconfont icon-moveSort2"></i>{{$lang("dragOrderFlag")||"拖动排序标识"}} <!-- <i class="del iconfont icon-close"></i>删除标识 --> </div> </div> <div class="pl-design-row pl-row transfer-box"> <div class="pl-design-col pl-col-11"> <v-jstree ref="cmp-tree" :data="columns" show-checkbox multiple allow-batch collapse text-field-name="name" @item-click="itemClick"></v-jstree> </div> <!-- <div class="pl-design-col pl-col-11"> <div class="transfer-item" v-for="(item,index) in columns" @click="item.checked=!item.checked"> <i class="iconfont" :class="item.checked?'icon-checkbox':'icon-checkbox-empty'"></i> <span>{{item.title}}</span> </div> </div> --> <div class="pl-design-col pl-col-2"> <div><i class="iconfont icon-arrow-right-circle" @click="handleMoveRight"></i></div> <div><i class="iconfont icon-arrow-left-circle" @click="handleMoveLeft"></i></div> <div><i class="iconfont icon-arrow-rightMore-circle" @click="handleMoveAllRight"></i></div> <div><i class="iconfont icon-arrow-leftMore-circle" @click="handleMoveAllLeft"></i></div> </div> <div class="pl-design-col pl-col-11" ref="dom-selected"> <div class="transfer-item" v-for="(item,index) in selectList" :resId="item.resId"> <i class="move iconfont icon-moveSort2"></i> <i class="iconfont" :class="item.selected?'icon-checkbox':'icon-checkbox-empty'" @click="item.selected=!item.selected" ></i> <span @click="item.selected=!item.selected">{{item.name}}</span> <!-- <i class="del iconfont icon-close"></i> --> </div> </div> </div> <template slot="footer"> <button class="pl-btn pl-btn-round" @click="handleCancel">{{$lang("cancel")||"取消"}}</button> <button v-if="!isEdit" class="pl-btn pl-btn-round pl-btn-primary" @click="handleOk">{{$lang("ok")||"确定"}}</button> <button v-if="isEdit" class="pl-btn pl-btn-round pl-btn-primary" @click="handleEdit">{{$lang("ok")||"确定"}}</button> </template> </Dialog> </template> <script> import findIndex from 'lodash/findIndex'; import cloneDeep from 'lodash/cloneDeep'; import VJstree from 'vue-jstree' import Dialog from "@main/components/dialog"; import Sortable from 'sortablejs'; import {strFormat} from '@main/utils/index'; export default { props:['portalPanel'], components:{ Dialog,VJstree }, data(){ return { columns:[], defHeight:300, panelHeight:300,//面板高度 selectList:[],//存放选中的栏目列表 Sortable:null,//拖拽对象 /** * 提取字段 */ fields:['resId','resKey','resUrl','parentId','type','isShow','name','selected'] } }, computed:{ // columns(){ // let data = cloneDeep(this.$store.getters.portalColumns); // return data; // }, isEdit(){ return !!this.portalPanel; }, dialogTitle(){ let title=''; if(this.portalPanel){ let paths = this.portalPanel.paths; title = strFormat(this.$lang("editSerialRowLayout"),paths[0]+1,paths[1]+1,paths[2]+1); }else{ title = this.$lang("addColunms")||"添加门户栏目" } return title; } }, mounted(){ let me=this; me.Sortable&&me.Sortable.destroy(); me.$nextTick(r=>{ me.Sortable = new Sortable(me.$refs['dom-selected'], { group: "transfer-item", handle: '.move', // handle's class animation: 150, onEnd(evt){ // let itemEl = evt.item, // list = [...me.selectList]; // list[evt.oldIndex] = list.splice(evt.newIndex, 1, list[evt.oldIndex])[0]; // me.$set(me,'selectList',list); // console.log(me.selectList); } }) }); if(me.$store.getters.portalColumns.length==0){ me.$store.dispatch('portal/loadColumns').then((res)=>{ me.columns = cloneDeep(me.$store.getters.portalColumns); }); }else{ me.columns = cloneDeep(me.$store.getters.portalColumns); } }, beforeDestroy(){ this.Sortable&&this.Sortable.destroy(); }, methods:{ resetForm(){ let me=this; me.panelHeight = me.defHeight; me.Sortable=null; me.$set(me,'selectList',[]); }, setForm(data){ console.log("portal->columnsSelect.vue :" ,data); let me=this,columns = []; data.columns.map(item=>{ let tplObj={}; me.fields.map(key=>{ tplObj[key] = item[key]; }); tplObj.selected=false; columns.push(tplObj); }); me.panelHeight = data.height||me.defHeight; me.$set(me,'selectList',columns); }, show(){ this.$refs['cmp-dd'].show(); this.$nextTick(()=>{ this.resetTreeSeleted(); }) }, hide(){ this.$refs['cmp-dd'].hide(); }, /** * 因为拖动后排序，所以要重新获取 */ getSelectList(){ let me=this,arr=[]; let els = me.$refs['dom-selected'].children; for(let i=0,l=els.length;i<l;i++){ let resId = els[i].getAttribute('resId'); for(let n=0,k=me.selectList.length;n<k;n++){ if(me.selectList[n].resId==resId){ arr[i] = me.selectList.splice(n,1)[0]; break; } } } return arr; }, handleCancel(){ let me=this; me.$set(me,'selectList',[]); me.hide() }, handleOk(){ let me=this,data=[]; let list = me.getSelectList(); list.map(item=>{ let tplObj={}; me.fields.map(key=>{ tplObj[key] = item[key]; }); data.push(tplObj); }); let h = parseFloat(me.panelHeight); h = isNaN(h)?me.defHeight:h; me.$emit('onOk',data,h); me.resetForm(); me.hide(); }, handleEdit(){ let me=this,columns=[],newData={...this.portalPanel}; let list = me.getSelectList(); list.map(item=>{ let tplObj={}; me.fields.map(key=>{ tplObj[key] = item[key]; }); columns.push(tplObj); }); let h = parseFloat(me.panelHeight); h = isNaN(h)?me.defHeight:h; Object.assign(newData,{columns,height:h}); console.log("portal->columnsSelect.vue -> onUpdate:" ,newData); me.$emit('onUpdate',newData); me.resetForm(); me.hide(); }, resetTreeSeleted(){ let me=this,$tree = me.$refs['cmp-tree'],data=$tree.data; me.setNodesChecks(data,false); }, setNodesChecks(nodes,checked){ let dd = (nodes)=>{ nodes.map(item=>{ item.selected=checked; item.children&&dd(item.children); }); } dd(nodes); }, getTreeLeafs(){ let data=[]; let $tree = this.$refs['cmp-tree'],nodes=$tree.data; let dd = (nodes)=>{ nodes.map(item=>{ if(item.children.length==0){ item.selectList=false; data.push(item); } item.children&&dd(item.children); }); } dd(nodes); return data; }, getTreeChecked(){ let data=[]; let $tree = this.$refs['cmp-tree'],nodes=$tree.data; let dd = (nodes)=>{ nodes.map(item=>{ if(item.selected&&(!item.children||item.children.length==0)){ data.push(item); } item.children&&dd(item.children); }); } dd(nodes); return data; }, handleMoveLeft(){ let me = this,chks=[],unChks = []; me.selectList.map((item,index)=>{ if(item.selected){ chks.push(item); }else{ unChks.push(item) } }); me.$set(me,'selectList',unChks); me.resetTreeSeleted(); }, handleMoveAllLeft(){ let me=this; me.$set(me,'selectList',[]); me.resetTreeSeleted(); }, handleMoveRight(){ let me=this, chks = me.getTreeChecked(), oldSelds = me.selectList, newSelds = []; chks.map(item=>{ let tplObj = {},hasItem = findIndex(oldSelds,o=>{ return o.resId == item.resId; }); if(hasItem==-1){ me.fields.map(key=>{ tplObj[key] = item[key]; }); tplObj.selected = false; newSelds.push(tplObj); } }); chks.length&&me.$set(me,'selectList',[...newSelds,...oldSelds]); me.resetTreeSeleted(); }, handleMoveAllRight(){ let me = this; me.$set(me,'selectList',me.getTreeLeafs()); me.resetTreeSeleted(); }, itemClick (node, item, e) { return; let index = findIndex(this.selectList,o =>o.id == node.id); if(index==-1){ if(node.model.selected){ this.selectList.push({ id:node.model.id, pid:node.model.pid, title:node.model.title, href:node.model.resUrl, loadType:node.model.loadType||'iframe' }); }else{ this.selectList.splice(index,1); } }else{ this.selectList.splice(index,node.model.selected?0:1); } } } } </script> <style lang="less" scoped> .transfer-tip{ padding-bottom:5px; color:#999; } .transfer-box { >.pl-col-11{ border: 1px #ddd solid; height: 300px; padding:5px; overflow: auto; box-shadow: inset 0px 0px 20px 1px rgba(0,0,0,0.05); } >.pl-col-2{ text-align: center; padding-top: 70px; .iconfont{ display: block; font-size:24px; color:#999; cursor: pointer; margin-bottom: 15px; &:hover{ color:#0066cc; } } } .transfer-item{ padding:5px; &:hover{ color:#0066cc; background: #efefef; } >.iconfont{ margin-right:5px; } >.move{ cursor: move; } >.del{ float:right; cursor: pointer; } } } </style> <template> <Dialog ref="cmp-dd" :title="dialogTitle" :width="650" :height="465"> <div class="pl-design-row pl-row transfer-tip"> <div class="pl-design-col pl-col-11"> <div class="pl-field"> <div class="pl-field-lb">{{$lang("setHeight")||"设置高度"}}</div> <div class="pl-field-val"> <input class="pl-field-text" type="text" v-model="panelHeight" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" /> </div> </div> </div> <div class="pl-design-col pl-col-2"></div> <div class="pl-design-col pl-col-11"> &nbsp;&nbsp; <i class="move iconfont icon-moveSort2"></i>{{$lang("dragOrderFlag")||"拖动排序标识"}} <!-- <i class="del iconfont icon-close"></i>删除标识 --> </div> </div> <div class="pl-design-row pl-row transfer-box"> <div class="pl-design-col pl-col-11"> <v-jstree ref="cmp-tree" :data="columns" show-checkbox multiple allow-batch collapse text-field-name="name" @item-click="itemClick"></v-jstree> </div> <!-- <div class="pl-design-col pl-col-11"> <div class="transfer-item" v-for="(item,index) in columns" @click="item.checked=!item.checked"> <i class="iconfont" :class="item.checked?'icon-checkbox':'icon-checkbox-empty'"></i> <span>{{item.title}}</span> </div> </div> --> <div class="pl-design-col pl-col-2"> <div><i class="iconfont icon-arrow-right-circle" @click="handleMoveRight"></i></div> <div><i class="iconfont icon-arrow-left-circle" @click="handleMoveLeft"></i></div> <div><i class="iconfont icon-arrow-rightMore-circle" @click="handleMoveAllRight"></i></div> <div><i class="iconfont icon-arrow-leftMore-circle" @click="handleMoveAllLeft"></i></div> </div> <div class="pl-design-col pl-col-11" ref="dom-selected"> <div class="transfer-item" v-for="(item,index) in selectList" :resId="item.resId"> <i class="move iconfont icon-moveSort2"></i> <i class="iconfont" :class="item.selected?'icon-checkbox':'icon-checkbox-empty'" @click="item.selected=!item.selected" ></i> <span @click="item.selected=!item.selected">{{item.name}}</span> <!-- <i class="del iconfont icon-close"></i> --> </div> </div> </div> <template slot="footer"> <button class="pl-btn pl-btn-round" @click="handleCancel">{{$lang("cancel")||"取消"}}</button> <button v-if="!isEdit" class="pl-btn pl-btn-round pl-btn-primary" @click="handleOk">{{$lang("ok")||"确定"}}</button> <button v-if="isEdit" class="pl-btn pl-btn-round pl-btn-primary" @click="handleEdit">{{$lang("ok")||"确定"}}</button> </template> </Dialog> </template> <script> import findIndex from 'lodash/findIndex'; import cloneDeep from 'lodash/cloneDeep'; import VJstree from 'vue-jstree' import Dialog from "@main/components/dialog"; import Sortable from 'sortablejs'; import {strFormat} from '@main/utils/index'; export default { props:['portalPanel'], components:{ Dialog,VJstree }, data(){ return { columns:[], defHeight:300, panelHeight:300,//面板高度 selectList:[],//存放选中的栏目列表 Sortable:null,//拖拽对象 /** * 提取字段 */ fields:['resId','resKey','resUrl','parentId','type','isShow','name','selected'] } }, computed:{ // columns(){ // let data = cloneDeep(this.$store.getters.portalColumns); // return data; // }, isEdit(){ return !!this.portalPanel; }, dialogTitle(){ let title=''; if(this.portalPanel){ let paths = this.portalPanel.paths; title = strFormat(this.$lang("editSerialRowLayout"),paths[0]+1,paths[1]+1,paths[2]+1); }else{ title = this.$lang("addColunms")||"添加门户栏目" } debugger return title; } }, mounted(){ let me=this; me.Sortable&&me.Sortable.destroy(); me.$nextTick(r=>{ me.Sortable = new Sortable(me.$refs['dom-selected'], { group: "transfer-item", handle: '.move', // handle's class animation: 150, onEnd(evt){ // let itemEl = evt.item, // list = [...me.selectList]; // list[evt.oldIndex] = list.splice(evt.newIndex, 1, list[evt.oldIndex])[0]; // me.$set(me,'selectList',list); // console.log(me.selectList); } }) }); if(me.$store.getters.portalColumns.length==0){ me.$store.dispatch('portal/loadColumns').then((res)=>{ me.columns = cloneDeep(me.$store.getters.portalColumns); }); }else{ me.columns = cloneDeep(me.$store.getters.portalColumns); } }, beforeDestroy(){ this.Sortable&&this.Sortable.destroy(); }, methods:{ resetForm(){ let me=this; me.panelHeight = me.defHeight; me.Sortable=null; me.$set(me,'selectList',[]); }, setForm(data){ console.log("portal->columnsSelect.vue :" ,data); let me=this,columns = []; data.columns.map(item=>{ let tplObj={}; me.fields.map(key=>{ tplObj[key] = item[key]; }); tplObj.selected=false; columns.push(tplObj); }); me.panelHeight = data.height||me.defHeight; me.$set(me,'selectList',columns); }, show(){ this.$refs['cmp-dd'].show(); this.$nextTick(()=>{ this.resetTreeSeleted(); }) }, hide(){ this.$refs['cmp-dd'].hide(); }, /** * 因为拖动后排序，所以要重新获取 */ getSelectList(){ let me=this,arr=[]; let els = me.$refs['dom-selected'].children; for(let i=0,l=els.length;i<l;i++){ let resId = els[i].getAttribute('resId'); for(let n=0,k=me.selectList.length;n<k;n++){ if(me.selectList[n].resId==resId){ arr[i] = me.selectList.splice(n,1)[0]; break; } } } return arr; }, handleCancel(){ let me=this; me.$set(me,'selectList',[]); me.hide() }, handleOk(){ let me=this,data=[]; let list = me.getSelectList(); list.map(item=>{ let tplObj={}; me.fields.map(key=>{ tplObj[key] = item[key]; }); data.push(tplObj); }); let h = parseFloat(me.panelHeight); h = isNaN(h)?me.defHeight:h; me.$emit('onOk',data,h); me.resetForm(); me.hide(); }, handleEdit(){ let me=this,columns=[],newData={...this.portalPanel}; let list = me.getSelectList(); list.map(item=>{ let tplObj={}; me.fields.map(key=>{ tplObj[key] = item[key]; }); columns.push(tplObj); }); let h = parseFloat(me.panelHeight); h = isNaN(h)?me.defHeight:h; Object.assign(newData,{columns,height:h}); console.log("portal->columnsSelect.vue -> onUpdate:" ,newData); me.$emit('onUpdate',newData); me.resetForm(); me.hide(); }, resetTreeSeleted(){ let me=this,$tree = me.$refs['cmp-tree'],data=$tree.data; me.setNodesChecks(data,false); }, setNodesChecks(nodes,checked){ let dd = (nodes)=>{ nodes.map(item=>{ item.selected=checked; item.children&&dd(item.children); }); } dd(nodes); }, getTreeLeafs(){ let data=[]; let $tree = this.$refs['cmp-tree'],nodes=$tree.data; let dd = (nodes)=>{ nodes.map(item=>{ if(item.children.length==0){ item.selectList=false; data.push(item); } item.children&&dd(item.children); }); } dd(nodes); return data; }, getTreeChecked(){ let data=[]; let $tree = this.$refs['cmp-tree'],nodes=$tree.data; let dd = (nodes)=>{ nodes.map(item=>{ if(item.selected&&(!item.children||item.children.length==0)){ data.push(item); } item.children&&dd(item.children); }); } dd(nodes); return data; }, handleMoveLeft(){ let me = this,chks=[],unChks = []; me.selectList.map((item,index)=>{ if(item.selected){ chks.push(item); }else{ unChks.push(item) } }); me.$set(me,'selectList',unChks); me.resetTreeSeleted(); }, handleMoveAllLeft(){ let me=this; me.$set(me,'selectList',[]); me.resetTreeSeleted(); }, handleMoveRight(){ let me=this, chks = me.getTreeChecked(), oldSelds = me.selectList, newSelds = []; chks.map(item=>{ let tplObj = {},hasItem = findIndex(oldSelds,o=>{ return o.resId == item.resId; }); if(hasItem==-1){ me.fields.map(key=>{ tplObj[key] = item[key]; }); tplObj.selected = false; newSelds.push(tplObj); } }); chks.length&&me.$set(me,'selectList',[...newSelds,...oldSelds]); me.resetTreeSeleted(); }, handleMoveAllRight(){ let me = this; me.$set(me,'selectList',me.getTreeLeafs()); me.resetTreeSeleted(); }, itemClick (node, item, e) { return; let index = findIndex(this.selectList,o =>o.id == node.id); if(index==-1){ if(node.model.selected){ this.selectList.push({ id:node.model.id, pid:node.model.pid, title:node.model.title, href:node.model.resUrl, loadType:node.model.loadType||'iframe' }); }else{ this.selectList.splice(index,1); } }else{ this.selectList.splice(index,node.model.selected?0:1); } } } } </script> <style lang="less" scoped> .transfer-tip{ padding-bottom:5px; color:#999; } .transfer-box { >.pl-col-11{ border: 1px #ddd solid; height: 300px; padding:5px; overflow: auto; box-shadow: inset 0px 0px 20px 1px rgba(0,0,0,0.05); } >.pl-col-2{ text-align: center; padding-top: 70px; .iconfont{ display: block; font-size:24px; color:#999; cursor: pointer; margin-bottom: 15px; &:hover{ color:#0066cc; } } } .transfer-item{ padding:5px; &:hover{ color:#0066cc; background: #efefef; } >.iconfont{ margin-right:5px; } >.move{ cursor: move; } >.del{ float:right; cursor: pointer; } } } </style>

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> <template v-if="sysUserInfo.children&&sysUserInfo.children.length"> <div class="item" @mouseenter="handleFuncMenus(sysUserInfo,$event)"> <div class="tip"> <i class="iconfont" :class="sysUserInfo.iconClass"></i> </div> <span class="title" v-html="sysUserInfo.html||sysUserInfo.name"></span> <i class="iconfont icon-arrow-down" v-if="sysUserInfo.children"></i> </div> </template> </li> <li><div class="line"></div></li> <li v-if="hasSetting"> <div class="item" :title="$lang('customWorkbench')||'自定义工作台'"> <a href="#design" target='_blank'><i class="iconfont icon-set-fill"></i></a> </div> </li> <li> <div class="item" :title="$lang('logout')||'退出系统'"> <a @click="handleLogout"><i class="iconfont icon-tuichu"></i></a> </div> </li> </ul> <vueContextMenu ref="cmp-funcMenu" :menu-items="menuItems" field="name"></vueContextMenu> <modifyPw></modifyPw> </div> </template> <script> // import pinyin from 'js-pinyin';//ie 下有问题 编译不过 import vueContextMenu from "@main/components/contextMenu"; import modifyPw from "@main/views/layout/components/modifyPw"; import {changeBz} from "@main/api/user"; import { removeToken } from '@main/utils/auth' export default { components:{ vueContextMenu, modifyPw, }, inject:['addTab','showTab','hideTab'], props:{ hasTitle:{ type: Boolean, }, sideWidth:{ type: String, } }, data(){ return { menuItems:[], searchWord:"", searchList:[], seldIndex:0, menuShow:false, searchMenusStyle:{ display:'none', left:0, top:0, width:0, // maxHeight:'50%', // overflow:'auto' }, sysListStyle:{ display:'none', left:0, top:0, }, latelyUseStyle:{ display:'none', left:0, top:0, maxHeight:'50%', overflow:'auto' }, } }, computed:{ hasSetting(){ let cfg = this.$store.state.app.config||{}; return cfg.sysSetTabs&&cfg.sysSetTabs.length; }, sysList(){ let cfg = this.$store.state.app.config||{}; return cfg.sysList||[]; }, sysUserInfo(){ let me=this; let cfg = this.$store.state.app.config||{}; function replaceData(str){ if(!str)return ''; var _arr=str.match(/\${(\S*?)}/g); if(_arr&&_arr.length>0){ for(let i of _arr){ var _data=me.userInfo[i.match(/\${(\S*)}/)[1]]; if(typeof(_data)!="undefined"){ str=str.replace(i,_data); } } } return str; } let _userInfo=cfg.userInfo; if(_userInfo){ _userInfo.name=replaceData(_userInfo.name); if(_userInfo.children&&_userInfo.children.length>0){ _userInfo.children=_userInfo.children.map((item)=>{ item.name=replaceData(item.name); switch(item.type){ case "modifyUserInfo": item.handler=me.modifyUserInfo; break; case "modifyPw": item.handler=me.modifyPw; break; case "orgBz": if(Array.isArray(me.bzList)&&me.bzList.length>1){ item.children=[]; for(let i of me.bzList){ item.children.push({ iconClass:'icon-user', name:`${i.fbzname}/${i.fbzid}`, handler:function(){ me.__changeOrgBz(`${i.fbzid}`); } }); } } break; } return item; }); } } return _userInfo||[]; }, sysProjectManage(){ let cfg = this.$store.state.app.config||{}; let item = cfg.sysProjectMange||{},flag=false; this.$store.state.app.powerList.forEach(p=>{ if(p.resUrl.indexOf(item.uri)>-1){ flag = true; return true; } }); if(flag){ return cfg.sysProjectMange; }else{ return null; } }, sysFuncMenus(){ let cfg = this.$store.state.app.config||{}; let menus = cfg.sysFuncMenus||[]; return menus; }, logoSrc(){ let cfg = this.$store.state.app.config||{}; return (cfg.sysLogo&&cfg.sysLogo.src)||''; }, MlogoSrc(){ let cfg = this.$store.state.app.config||{}; return (cfg.MsysLogo&&cfg.MsysLogo.src)||''; }, layout(){ return window.localStorage.getItem('layout'); }, navsLatelyUse(){ return this.$store.getters.navsLatelyUse; }, token(){ return this.$store.getters.token; }, userInfo(){ return this.$store.state.user.userInfo; }, bzList(){ return this.$store.state.user.bzList; }, }, watch:{ searchWord(newVal,oldVal){ this.doSearch(newVal); } }, mounted(){ document.addEventListener('click',this.hideSeachResult); this.$store.dispatch("app/getSysConfig"); }, 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(){ await this.$store.dispatch("user/logout").then(()=>{ //removeToken(); 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); }, //切岗 __changeOrgBz(bzid){ changeBz({ bzid:bzid }).then(res=>{ window.location.reload(); }); }, modifyPw(){ this.$store.dispatch("user/showPwDialog",true); }, modifyUserInfo(){ }, } } </script> <style lang="scss" scoped> .pl-header{ z-index: 99; } </style> <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(){ await this.$store.dispatch("user/logout").then(()=>{ //removeToken(); 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>

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

<template> <div class="pl-main"> <p-tabs ref="cmp-tabs" v-model="defTabKey" @onActiveTab="handleActiveTab" @onRemoveTab="handleRemoveTab" @onRemoveAllTab="handleRemoveAllTab" @onRemoveLeft="handleRemoveLeftTab" @onRemoveRight="handleRemoveRightTab" @onRemoveOther="handleRemoveOtherTab" @onFullScreen="handleFullScreen" > <p-tabpanel v-for="(item,index) in tabList" :key="item.id" :close="item.close" :title.sync="item.title" :name="item.id" :url="item.url" :itemData="item" @onIframeLoad="handleIframeLoad" @onBeforeClose="handleBeforeClose" @onSelected="handleSelected" @onBeforeRefresh="handleBeforeRefresh" > <template v-if="item.type&&item.type=='home'"> <PortalSys :itemData="item" ref="protalSysHome" ></PortalSys> </template> <template v-if="item.type&&item.type=='work'"> <PortalUser :itemData="item" ref="portalUserWork" ></PortalUser> </template> </p-tabpanel> </p-tabs> </div> </template> <script> import { baseURL, codeProjectName,requestUrl } from "@main/config"; import { PTabs, PTabpanel } from "@main/components/tabpanel"; import PortalUser from "@main/views/Portal/user"; import PortalSys from "@main/views/Portal/sys"; import { getUrlValue, setUrlValue,getUrlSearch,closeWindow } from "@main/utils"; // import { type } from "os"; import md5 from "md5"; import { utils } from "hi-ui"; export default { inject: ["addTab", "showTab", "hideTab"], components: { PTabs, PTabpanel, PortalUser, PortalSys, }, data() { let cfg = this.$store.state.app.config || {}; let defTabs = cfg.sysDefTabs || []; let setTabs = cfg.sysSetTabs || []; let list = [], defTabKey = ""; defTabs = setTabs.concat(defTabs); defTabs.map((item, i) => { let id = item.url ? md5(item.url) : item.id; //强转成 url md5 id item.actived && (defTabKey = id); if (item.url && getUrlValue(item.url, "__tabId") == "") { //关系到用户调用，防止Scp.context.closeCurPage取不到__tabId出错 item.url = utils.string.setUrlValue(item.url, "__tabId", id); } list.push({ title: item.title, url: item.url, close: item.close, id: id, type: item.type, }); }); console.log('page default open tabs :',defTabs); //系统菜单 后台默认配激活 let menusDef2Tabs = this.$store.getters.defTabs, uriStr = ""; console.log('menus default open tabs :',defTabs); menusDef2Tabs.map((item, i) => { uriStr = baseURL + codeProjectName + item.resUrl; let id = md5(uriStr); uriStr = utils.string.setUrlValue(uriStr, "__tabId", id); list.push({ title: item.name, url: uriStr, close: true, id: id, type: item.type, }); }); // console.log('系统菜单',list); //第三方跳转过来地址自动打开功能tab let menusList = this.$store.getters.menusList; let searchObj = getUrlSearch(decodeURIComponent(this.$router.currentRoute.fullPath)); for (let i = menusList.length - 1; i >= 0; i--) { if ((menusList[i].type=="func"||menusList[i].type=="flow" )&& searchObj.portal_func == menusList[i].resUrl) { console.log('跳转进来的功能：',searchObj.portal_func); //?portal_func=/project/rjwhzx/rjzcgl/funcdir/zcmcx.func&id=11111 delete searchObj.portal_func; let uriStr = baseURL + codeProjectName + menusList[i].resUrl; let id = md5(uriStr); uriStr = utils.string.setUrlValue(uriStr, "__tabId", md5(uriStr)); for(let key in searchObj){ uriStr = utils.string.setUrlValue(uriStr,key,searchObj[key]); } let inMenu = false; for (let j = list.length - 1; j >= 0; j--) { if (list[j].id == id) { inMenu = true; break; } } if (inMenu) break; defTabKey = id; list.push({ id: id, title: menusList[i].name, url: uriStr, close: true, actived:true //默认选中 }); break; } } console.log('sys default tabs :', list); return { defTabKey: defTabKey || "", tabList: list, sysConfig: this.$store.state.app.config, isFullScreen: false, }; }, mounted() { // console.log('主界面初始化~！'); let me = this, cTabs = this.$refs["cmp-tabs"]; window.Sys = { isVue: true, addEvent(evtName, fn) { //onLoad Bus.$on(evtName, fn); }, tabPanel: { autoResize() { cTabs.resize(); }, }, getSideNavs() { return [...me.$store.getters.navs]; }, setSideNavs(data) { if (data == null && !(data instanceof Array)) return; //me.$store.dispatch("app/setQuickNav", data); }, /** * @param {} url * @param {} title * @param {} uid * @param {} onLoad //iframe 加载后 * @param {} nearest //标签页是否紧接在其右侧打开 * @param {} renderedFn //渲染回调 */ addTab(url, title, uid, onLoad, nearest, renderedFn) { if (!(url == "" || url == "about:blank")) { uid = md5(url); } let tabs = me.tabList.filter((item, index) => { return item.id == uid; }); if (tabs.length) { me.defTabKey = uid; me.$nextTick( (function (fn) { return function () { let tab = cTabs.getItemObj(uid); fn && fn(tab); }; })(renderedFn) ); return; } if (getUrlValue(url, "__tabId") == "") { //关系到用户调用，防止Scp.context.closeCurPage取不到__tabId出错 url = utils.string.setUrlValue(url, "__tabId", uid); } me.tabList.push({ title: title, url: url, close: true, id: uid, listeners: { load: onLoad, }, }); me.defTabKey = uid; // window.____renderFunc = renderedFn; me.$nextTick( (function (fn, _uid) { return function () { let tab = cTabs.getItemObj(_uid); fn && fn(tab); }; })(renderedFn, uid) ); console.log(' addTab ',me.tabList); }, getTab(uid) { return cTabs.getItemObj(uid); }, seldTab(uid) { cTabs.defTabKey = uid; }, getSeldTab() { return cTabs.getSeldItemObj(); }, refreshTab(uid) { let tab = cTabs.getItemObj(uid); tab && tab.tabPanelIframeEl.contentWindow.window.location.reload(); }, //closeTab colseTab(uid) { cTabs.closeItem(uid); }, colseSeldTab() { cTabs.closeCurItem(); }, }; window.SysPage={ newPage : function(title, url, params, method, target) { var uid = md5(url), tab; function formSubmit(cfg){ cfg.autoDestroy = true; var form = me.creatForm(cfg); form.submit(); } if(method=="get"){ //get 不刷新 var tab = top.Sys.getTab(uid); if(tab){ top.Sys.seldTab(uid); return; } } if(target=="opening"){ var cfg = { url : utils.string.setUrlValue(url,"__tabId",uid), data : params, target : '_blank', method : method || "get" }; formSubmit(cfg); //打开新标签 return; }else if(target=="me"){ //本页：框架页的本页面 var cfg = { url : url, data : params, target : '_self', method : method || "get" }; formSubmit(cfg); }else{ if (target == "_self"){ tab = top.Sys.getSeldTab(); if(top.Sys.isVue){ var titleEl = tab.tabEl.querySelector('.pl-tabs-itemTxt'); titleEl.innerText = ""; }else{ tab.tabEl.find('.sys-tab-item-text').html(""); } }else{ /*** * uid 让框架页可以关闭自己 closeCurPage */ if(top.Sys.isVue){ //6个参数，第7个是vue渲染后回调 top.Sys.addTab("about:blank",title,uid,null,true,function(tab){ var cfg = { url : utils.string.setUrlValue(url,"__tabId",uid), data : params, target : null, method : method || "get" }; //var titleEl = tab.tabEl.querySelector('.pl-tabs-itemTxt'); //titleEl.innerText = ""; cfg.target = tab.tabPanelIframeEl.getAttribute('name'); formSubmit(cfg); }); }else{ var cfg = { url : utils.string.setUrlValue(url,"__tabId",uid), data : params, target : null, method : method || "get" }; //Sys.addTab(url, title, uid, callback) tab = top.Sys.addTab("about:blank",title,uid); tab.tabEl.find('.sys-tab-item-text').html(""); cfg.target = tab.tabPanelIframeEl.getAttribute('name'); formSubmit(cfg); } } } }, /** * 通过url 进行对应的目标功能 调用目标页的callback方法 * @param id * @param url */ closePage : function(id,url) { if (!top.Sys) { closeWindow() return; } var uid = md5(url||""), tab; if(!window.parent.Sys){ return; } var tab = window.parent.Sys.getTab(uid); if(tab){ window.parent.Sys.seldTab(uid); //var _scp = tab.tabPanelIframeEl.contentWindow.window.Scp; //if(_scp){ // _scp.context&&_scp.context.callback&&_scp.context.callback.call(_scp.context); //} }else{ if(url.trim()!=""){ var tab = window.parent.Sys.addTab(url,"",null,null,true); } } if (id) { window.parent.Sys.colseTab(id); }else{ window.parent.Sys.colseSeldTab(); } }, closeCurPage:function(){ if(!window.parent.Sys){ return; } var id = getUrlValue('__tabId',window.location.search); window.parent.Sys.colseTab(id); }, setPageTitle:function(title){ if(!window.parent.Sys){ return; } var openway = getUrlValue('openway'); if(openway=="openwin")return; var tab = window.parent.Sys.getSeldTab(); if(title!=""){ tab.tabEl.find('.sys-tab-item-text').html(title); window.parent.Sys.tabPanel.autoResize(); } } }; if (this.defTabKey == "" && this.tabList.length) this.defTabKey = this.tabList[0].id; //默认如果指向下面两个的话，标识一下已经加载过 if (this.$refs["protalSysHome"]) { //this.$store.dispatch("portal/loadSysList"); //重新加载系统门户列表 // console.log('加载系统门户列表~！'); let itemData = this.$refs["protalSysHome"][0].itemData; if (itemData.id == this.defTabKey) { this.$refs["protalSysHome"][0].actived = true; } } if (this.$refs["portalUserWork"]) { //this.$store.dispatch("portal/loadList"); //重新加载工作台门户列表 // console.log('加载工作台门户列表~！'); let itemData = this.$refs["portalUserWork"][0].itemData; if (itemData.id == this.defTabKey) { this.$refs["portalUserWork"][0].actived = true; } } let events = this.sysConfig.events; if (events) { this.$nextTick((r) => { events.onLoad && events.onLoad(); }); } }, methods: { //将框架页里头的a 标签进行转换 initATagUrl(el) { let aList = el.querySelectorAll("a"); aList.forEach(function (aTag, i) { if (aTag.href) { var httpUrl = new RegExp( "^((https|http|ftp|rtsp|mms)?://)" ); if ( httpUrl.test( aTag.href.replace(window.location.origin, "") ) ) { return false; } if (!aTag.onclick) { if (aTag.target == "_blank") { aTag.addEventListener("click", function (evt) { evt.preventDefault(); evt.stopPropagation(); var tabTitle = ""; if (aTag.title) { tabTitle = aTag.title; } var url = this.getAttribute("href"); var reg = /^\//gi; Sys.addTab(url, tabTitle, "", "", true); return false; }); } } } }); window.Sys.tabPanel.autoResize(); }, handleBeforeRefresh(panel, evt) { if (panel.itemData.type == "home") { // this.$store.state.app.sysList=[]; //this.$store.dispatch("portal/loadSysList"); //重新加载系统门户列表 return false; } if (panel.itemData.type == "work") { // this.$store.state.app.list=[]; //this.$store.dispatch("portal/loadList"); //重新加载工作台门户列表 return false; } }, handleIframeLoad(panelCmp, evt) { let me = this, key = panelCmp.name; let ifm = panelCmp.$refs["iframe"]; let tabData = panelCmp.itemData; if (tabData.listeners) { tabData.listeners.load && tabData.listeners.load(); } //转换A标签 me.initATagUrl(ifm.contentWindow.document.body); window.__UserInfo = { orgId: "", operator: "", }; if (panelCmp.title == null || panelCmp.title == "") { let cTabs = me.$refs["cmp-tabs"]; cTabs.resize(); } }, handleBeforeClose(panel, evt) { let ifm = panel.$refs["iframe"]; try { let flag = ifm.contentWindow.Scp.context.beforeunloadFn(evt, 1); return flag; } catch (e) { !document.all && window.console.log( "iframe : Scp.context.beforeunloadFn();" ); } }, handleActiveTab(panel) { if (!panel) return; if (panel.itemData.type == "home") { this.$refs["protalSysHome"][0].doRender(); } if (panel.itemData.type == "work") { this.$refs["portalUserWork"][0].doRender(); } try { let tab = this.$refs["cmp-tabs"].getItemObj(panel.name); tab && tab.tabPanelIframeEl.contentWindow .$(tab.tabPanelIframeEl.contentDocument) .trigger("iframeActiving", [panel.name]); } catch (e) { console.log("iframeActiving error!"); } }, //面板上面的事件特别处理，现在暂时没用 handleSelected(item) { return; let key = item.id; let ifm = this.$refs["dom-iframe" + key][0]; try { let __orgId = ifm.contentWindow.Scp.User.getId(); let __operator = ifm.contentWindow.Scp.User.getOperator(); window.__UserInfo = { orgId: __orgId, operator: __operator, }; } catch (e) {} }, handleRemoveTab(targetName) { let tabs = this.tabList; let activeName = this.defTabKey; if (activeName === targetName) { tabs.forEach((tab, index) => { if (tab.close && tab.id === targetName) { let nextTab = tabs[index + 1] || tabs[index - 1]; if (nextTab) { activeName = nextTab.id; } } }); } this.defTabKey = activeName; tabs = tabs.filter((tab) => { return tab.close == false || tab.id !== targetName; }); console.log('handleRemoveTab') this.$set(this, "tabList", tabs); if (this.tabList.length == 0) { this.defTabKey = "tabPanel_home"; } }, handleRemoveAllTab() { let tabs = this.tabList; this.tabList = tabs.filter((tab) => { return !tab.close; }); let l = this.tabList.length; this.defTabKey = l ? this.tabList[l - 1].id : ""; }, handleRemoveLeftTab(name, index) { let tabs = this.tabList; let defTabKey = this.defTabKey; this.tabList = tabs.filter((tab, i) => { if (tab.id == defTabKey && i < index) { //当前的选中，是在关闭区内 defTabKey = name; } return tab.close == false || i >= index; }); this.defTabKey = defTabKey; }, handleRemoveRightTab(name, index) { let tabs = this.tabList; let defTabKey = this.defTabKey; this.tabList = tabs.filter((tab, i) => { if (tab.id == defTabKey && i > index) { //当前的选中，是在关闭区内 defTabKey = name; } return tab.close == false || i <= index; }); this.defTabKey = defTabKey; }, handleRemoveOtherTab(name, index) { let tabs = this.tabList; tabs = tabs.filter((tab, i) => { return tab.close == false || i == index; }); this.$set(this, "tabList", tabs); this.defTabKey = name; }, handleFullScreen() { this.$emit("onFullScreen"); // screenfull.toggle() }, creatForm(opt){ let that=this; var _opt={ autoShow:false, cancelAction:false, url:null, target:null, action:null, method:null, params:null, data:null, autoDestroy:false, _id:utils.string.id(8), }; Object.assign(_opt,opt); var _formTpl=`<form id="${_opt._id}"><input type="submit" value="submit" id="submit_${_opt._id}"/></form>`; var _el=document.createElement("div"); _el.innerHTML=_formTpl; document.getElementsByTagName("body")[0].appendChild(_el); var _form=_el.getElementsByTagName("form")[0]; this.setTarget=(str)=>{ _opt.target = str; _form.setAttribute('target',str); } this.setUrl=(str)=>{ this.formateUrl(str); var url = utils.string.setUrlValue(_opt.url,"_____r",new Date().getTime()); _form.setAttribute('action',url); } this.setMethod=(str)=>{ _opt.method = str||'get'; _form.setAttribute('method',str); } this.setParams=(params)=>{ _opt.params = params; } this.setData=(obj)=>{ _opt.data = obj||{}; if(_opt.method=="get"&&_opt.url!=null){ var parms =_opt.url.split("?")[1], item,i=0,len; if(parms!=null){ parms = parms.split("&"); for(i=0,len=parms.length;i<len;i++){ item = parms[i].split("="); _opt.data[item[0]]=item[1]; } } } _.each(_opt.data,function(value,key){ if(_.isObject(value)){ value = JSON.stringify(value); } var _hiddenInput=document.createElement("input"); _hiddenInput.setAttribute("type","hidden"); _form.appendChild(_hiddenInput); _hiddenInput.setAttribute('name',key); _hiddenInput.setAttribute('value',value); }); } this.removeData=()=>{ _opt.data = null; _form.children().remove(); } this.addData=(data)=>{ _opt.data = _.extend({},_opt.data||{},data||{}); _form.children().remove(); this.setData(_opt.data); } this.delData=(keys)=>{ _.each(keys||[],function(val,i){ if((val in _opt.data)){ delete _opt.data[val]; } }); _form.children().remove(); this.setData(_opt.data); } this.formateUrl=(url)=>{ var params= this.formateParams(_opt.params); if(!url)return; _opt.url = url; if(params){ if(_opt.url.indexOf('?')>0){ _opt.url+='&'+params; }else{ _opt.url+='?'+params; } } } this.formateParams=(obj)=>{ if(obj==null) return null; return $.param(obj||{}); } this.submit=()=>{ if(_opt.cancelAction) return; _opt.cancelAction = false; if(_opt.autoDestroy){ setTimeout(function(){ _form.submit() //_form.find('#submit'+me.id).click();//谷歌下面要用 按钮才有效果 },0); setTimeout(function(){that.destroy();},1000); }else{ _form.submit(); } } this.destroy=()=>{ _el.remove(); } this.setTarget(_opt.target); this.setMethod(_opt.method); this.setUrl(_opt.url); this.setData(_opt.data); return that; }, }, }; </script> <style scoped> </style> <template> <div class="pl-main"> <p-tabs ref="cmp-tabs" v-model="defTabKey" @onActiveTab="handleActiveTab" @onRemoveTab="handleRemoveTab" @onRemoveAllTab="handleRemoveAllTab" @onRemoveLeft="handleRemoveLeftTab" @onRemoveRight="handleRemoveRightTab" @onRemoveOther="handleRemoveOtherTab" @onFullScreen="handleFullScreen" > <p-tabpanel v-for="(item,index) in tabList" :key="item.id" :close="item.close" :title.sync="item.title" :name="item.id" :url="item.url" :itemData="item" @onIframeLoad="handleIframeLoad" @onBeforeClose="handleBeforeClose" @onSelected="handleSelected" @onBeforeRefresh="handleBeforeRefresh" > <template v-if="item.type&&item.type=='home'"> <PortalSys :itemData="item" ref="protalSysHome" ></PortalSys> </template> <template v-if="item.type&&item.type=='work'"> <PortalUser :itemData="item" ref="portalUserWork" ></PortalUser> </template> </p-tabpanel> </p-tabs> </div> </template> <script> import { baseURL, codeProjectName,requestUrl } from "@main/config"; import { PTabs, PTabpanel } from "@main/components/tabpanel"; import PortalUser from "@main/views/Portal/user"; import PortalSys from "@main/views/Portal/sys"; import { getUrlValue, setUrlValue,getUrlSearch } from "@main/utils"; // import { type } from "os"; import md5 from "md5"; export default { inject: ["addTab", "showTab", "hideTab"], components: { PTabs, PTabpanel, PortalUser, PortalSys, }, data() { debugger let cfg = this.$store.state.app.config || {}; let defTabs = cfg.sysDefTabs || []; let setTabs = cfg.sysSetTabs || []; let list = [], defTabKey = ""; defTabs = setTabs.concat(defTabs); defTabs.map((item, i) => { let id = item.url ? md5(item.url) : item.id; //强转成 url md5 id item.actived && (defTabKey = id); if (item.url && getUrlValue(item.url, "__tabId") == "") { //关系到用户调用，防止Scp.context.closeCurPage取不到__tabId出错 item.url = setUrlValue(item.url, "__tabId", id); } list.push({ title: item.title, url: item.url, close: item.close, id: id, type: item.type, }); }); console.log('page default open tabs :',defTabs); //系统菜单 后台默认配激活 let menusDef2Tabs = this.$store.getters.defTabs, uriStr = ""; console.log('menus default open tabs :',defTabs); menusDef2Tabs.map((item, i) => { uriStr = baseURL + codeProjectName + item.resUrl; let id = md5(uriStr); uriStr = setUrlValue(uriStr, "__tabId", id); list.push({ title: item.name, url: uriStr, close: true, id: id, type: item.type, }); }); // console.log('系统菜单',list); //第三方跳转过来地址自动打开功能tab let menusList = this.$store.getters.menusList; let searchObj = getUrlSearch(decodeURIComponent(this.$router.currentRoute.fullPath)); for (let i = menusList.length - 1; i >= 0; i--) { if ((menusList[i].type=="func"||menusList[i].type=="flow" )&& searchObj.portal_func == menusList[i].resUrl) { console.log('跳转进来的功能：',searchObj.portal_func); //?portal_func=/project/rjwhzx/rjzcgl/funcdir/zcmcx.func&id=11111 delete searchObj.portal_func; let uriStr = baseURL + codeProjectName + menusList[i].resUrl; let id = md5(uriStr); uriStr = setUrlValue(uriStr, "__tabId", md5(uriStr)); for(let key in searchObj){ uriStr = setUrlValue(uriStr,key,searchObj[key]); } let inMenu = false; for (let j = list.length - 1; j >= 0; j--) { if (list[j].id == id) { inMenu = true; break; } } if (inMenu) break; defTabKey = id; list.push({ id: id, title: menusList[i].name, url: uriStr, close: true, actived:true //默认选中 }); break; } } debugger console.log('sys default tabs :', list); return { defTabKey: defTabKey || "", tabList: list, sysConfig: this.$store.state.app.config, isFullScreen: false, }; }, mounted() { // console.log('主界面初始化~！'); let me = this, cTabs = this.$refs["cmp-tabs"]; window.Sys = { isVue: true, addEvent(evtName, fn) { //onLoad Bus.$on(evtName, fn); }, tabPanel: { autoResize() { cTabs.resize(); }, }, getSideNavs() { return [...me.$store.getters.navs]; }, setSideNavs(data) { if (data == null && !(data instanceof Array)) return; //me.$store.dispatch("app/setQuickNav", data); }, /** * @param {} url * @param {} title * @param {} uid * @param {} onLoad //iframe 加载后 * @param {} nearest //标签页是否紧接在其右侧打开 * @param {} renderedFn //渲染回调 */ addTab(url, title, uid, onLoad, nearest, renderedFn) { if (!(url == "" || url == "about:blank")) { uid = md5(url); } let tabs = me.tabList.filter((item, index) => { return item.id == uid; }); if (tabs.length) { me.defTabKey = uid; me.$nextTick( (function (fn) { return function () { let tab = cTabs.getItemObj(uid); fn && fn(tab); }; })(renderedFn) ); return; } if (getUrlValue(url, "__tabId") == "") { //关系到用户调用，防止Scp.context.closeCurPage取不到__tabId出错 url = setUrlValue(url, "__tabId", uid); } me.tabList.push({ title: title, url: url, close: true, id: uid, listeners: { load: onLoad, }, }); me.defTabKey = uid; // window.____renderFunc = renderedFn; me.$nextTick( (function (fn, _uid) { return function () { let tab = cTabs.getItemObj(_uid); fn && fn(tab); }; })(renderedFn, uid) ); console.log(' addTab ',me.tabList); }, getTab(uid) { return cTabs.getItemObj(uid); }, seldTab(uid) { cTabs.defTabKey = uid; }, getSeldTab() { return cTabs.getSeldItemObj(); }, refreshTab(uid) { let tab = cTabs.getItemObj(uid); tab && tab.tabPanelIframeEl.contentWindow.window.location.reload(); }, //closeTab colseTab(uid) { cTabs.closeItem(uid); }, colseSeldTab() { cTabs.closeCurItem(); }, }; if (this.defTabKey == "" && this.tabList.length) this.defTabKey = this.tabList[0].id; //默认如果指向下面两个的话，标识一下已经加载过 if (this.$refs["protalSysHome"]) { //this.$store.dispatch("portal/loadSysList"); //重新加载系统门户列表 // console.log('加载系统门户列表~！'); let itemData = this.$refs["protalSysHome"][0].itemData; if (itemData.id == this.defTabKey) { this.$refs["protalSysHome"][0].actived = true; } } if (this.$refs["portalUserWork"]) { //this.$store.dispatch("portal/loadList"); //重新加载工作台门户列表 // console.log('加载工作台门户列表~！'); let itemData = this.$refs["portalUserWork"][0].itemData; if (itemData.id == this.defTabKey) { this.$refs["portalUserWork"][0].actived = true; } } let events = this.sysConfig.events; if (events) { this.$nextTick((r) => { events.onLoad && events.onLoad(); }); } }, methods: { //将框架页里头的a 标签进行转换 initATagUrl(el) { let aList = el.querySelectorAll("a"); aList.forEach(function (aTag, i) { if (aTag.href) { var httpUrl = new RegExp( "^((https|http|ftp|rtsp|mms)?://)" ); if ( httpUrl.test( aTag.href.replace(window.location.origin, "") ) ) { return false; } if (!aTag.onclick) { if (aTag.target == "_blank") { aTag.addEventListener("click", function (evt) { evt.preventDefault(); evt.stopPropagation(); var tabTitle = ""; if (aTag.title) { tabTitle = aTag.title; } var url = this.getAttribute("href"); var reg = /^\//gi; console.log( "onload replace links href,on iframe ", Scp.Setting.appRoot, url ); if ( !reg.test(url) && url.indexOf(Scp.Setting.appRoot) < 0 ) { url = Scp.Setting.appRoot + url; } Sys.addTab(url, tabTitle, "", "", true); return false; }); } } } }); window.Sys.tabPanel.autoResize(); }, handleBeforeRefresh(panel, evt) { if (panel.itemData.type == "home") { // this.$store.state.app.sysList=[]; //this.$store.dispatch("portal/loadSysList"); //重新加载系统门户列表 return false; } if (panel.itemData.type == "work") { // this.$store.state.app.list=[]; //this.$store.dispatch("portal/loadList"); //重新加载工作台门户列表 return false; } }, handleIframeLoad(panelCmp, evt) { let me = this, key = panelCmp.name; let ifm = panelCmp.$refs["iframe"]; let tabData = panelCmp.itemData; if (tabData.listeners) { tabData.listeners.load && tabData.listeners.load(); } //转换A标签 me.initATagUrl(ifm.contentWindow.document.body); window.__UserInfo = { orgId: "", operator: "", }; if (panelCmp.title == null || panelCmp.title == "") { let cTabs = me.$refs["cmp-tabs"]; cTabs.resize(); } }, handleBeforeClose(panel, evt) { let ifm = panel.$refs["iframe"]; try { let flag = ifm.contentWindow.Scp.context.beforeunloadFn(evt, 1); return flag; } catch (e) { !document.all && window.console.log( "iframe : Scp.context.beforeunloadFn();" ); } }, handleActiveTab(panel) { if (!panel) return; if (panel.itemData.type == "home") { this.$refs["protalSysHome"][0].doRender(); } if (panel.itemData.type == "work") { this.$refs["portalUserWork"][0].doRender(); } try { let tab = this.$refs["cmp-tabs"].getItemObj(panel.name); tab && tab.tabPanelIframeEl.contentWindow .$(tab.tabPanelIframeEl.contentDocument) .trigger("iframeActiving", [panel.name]); } catch (e) { console.log("iframeActiving error!"); } }, //面板上面的事件特别处理，现在暂时没用 handleSelected(item) { return; let key = item.id; let ifm = this.$refs["dom-iframe" + key][0]; try { let __orgId = ifm.contentWindow.Scp.User.getId(); let __operator = ifm.contentWindow.Scp.User.getOperator(); window.__UserInfo = { orgId: __orgId, operator: __operator, }; } catch (e) {} }, handleRemoveTab(targetName) { let tabs = this.tabList; let activeName = this.defTabKey; if (activeName === targetName) { tabs.forEach((tab, index) => { if (tab.close && tab.id === targetName) { let nextTab = tabs[index + 1] || tabs[index - 1]; if (nextTab) { activeName = nextTab.id; } } }); } this.defTabKey = activeName; tabs = tabs.filter((tab) => { return tab.close == false || tab.id !== targetName; }); console.log('handleRemoveTab') this.$set(this, "tabList", tabs); if (this.tabList.length == 0) { this.defTabKey = "tabPanel_home"; } }, handleRemoveAllTab() { let tabs = this.tabList; this.tabList = tabs.filter((tab) => { return !tab.close; }); let l = this.tabList.length; this.defTabKey = l ? this.tabList[l - 1].id : ""; }, handleRemoveLeftTab(name, index) { let tabs = this.tabList; let defTabKey = this.defTabKey; this.tabList = tabs.filter((tab, i) => { if (tab.id == defTabKey && i < index) { //当前的选中，是在关闭区内 defTabKey = name; } return tab.close == false || i >= index; }); this.defTabKey = defTabKey; }, handleRemoveRightTab(name, index) { let tabs = this.tabList; let defTabKey = this.defTabKey; this.tabList = tabs.filter((tab, i) => { if (tab.id == defTabKey && i > index) { //当前的选中，是在关闭区内 defTabKey = name; } return tab.close == false || i <= index; }); this.defTabKey = defTabKey; }, handleRemoveOtherTab(name, index) { let tabs = this.tabList; tabs = tabs.filter((tab, i) => { return tab.close == false || i == index; }); this.$set(this, "tabList", tabs); this.defTabKey = name; }, handleFullScreen() { this.$emit("onFullScreen"); // screenfull.toggle() }, }, }; </script> <style scoped> </style>

Ignore Space Show notes View project/hivuiMain/views/layout/components/modifyPw/index.vue 0 → 100644

<template> <el-dialog :title="modalTitle" :visible.sync="showDialog" width="500px" :close-on-click-modal="false" :modal-append-to-body="false" :show-close="false" > <el-form ref="form" :model="formData" :rules="rules"> <el-form-item label="旧密码:" :label-width="formLabelWidth" prop="oldPw"> <el-input ref="oldPw" type="password" v-model="formData.oldPw" autocomplete="off" placeholder="请输入旧密码" ></el-input> </el-form-item> <el-form-item label="新密码:" :label-width="formLabelWidth" prop="newPw"> <el-input ref="newPw" type="password" v-model="formData.newPw" autocomplete="off" @input="onChange" placeholder="请输入4-25个数字、字母或符号组合" ></el-input> </el-form-item> <el-progress :style="pwStrengthStyle()" :percentage="currPwStrength.num" :color="currPwStrength.color" :format="format"></el-progress> <el-form-item label="确认新密码:" :label-width="formLabelWidth" prop="newPw2"> <el-input ref="newPw2" type="password" v-model="formData.newPw2" autocomplete="off" placeholder="再次确认新密码" ></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="cancel" :loading="dialogLoading">取 消</el-button> <el-button type="primary" @click="submit" :loading="dialogLoading">确 定</el-button> </div> </el-dialog> </template> <script> import { modifyPassword } from '@main/api/user' export default { data(){ var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('请再次输入密码')); } else if (value !== this.formData.newPw) { callback(new Error('两次输入密码不一致!')); } else { callback(); } }; return { modalTitle:"修改密码", formLabelWidth:"100px", formData:{ oldPw:'', newPw:'', newPw2:'', }, dialogLoading:false, rules: { oldPw: [{ required: true, message: "请输入旧密码", trigger: "blur" }], newPw: [ { required: true, message: "请输入新密码", trigger: "blur" }, { min:4,max:25, message: "请输入4-25个数字、字母或符号组合", trigger: "blur" }, ], newPw2: [ { required: true, message: "请再次输入新密码", trigger: "blur" }, { validator:validatePass, trigger: "blur" }, ], }, currPwStrength:{}, pwStrength:[ { num:33, desc:'弱', color:'#f56c6c', }, { num:66, desc:'中', color:'#e6a23c', }, { num:100, desc:'强', color:'#67c23a', }, ], }; }, computed:{ showDialog(){ return this.$store.getters.showPwDialog; }, }, mounted(){ }, methods:{ submit(){ this.$refs.form.validate((valid) => { if(valid){ modifyPassword({ oldPwd:this.formData.oldPw, newPwd:this.formData.newPw, }).then(res=>{ if(res.status!=200){ this.$store.dispatch("user/showPwDialog",false); this.dialogLoading=false; this.formData={ oldPw:'', newPw:'', newPw2:'', }; } }); }else{ } }); }, cancel(){ this.$store.dispatch("user/showPwDialog",false); this.dialogLoading=false; this.formData={ oldPw:'', newPw:'', newPw2:'', }; }, onChange(val){ var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g"); var enoughRegex = new RegExp("(?=.{4,}).*", "g"); if(strongRegex.test(val)){ this.currPwStrength=this.pwStrength[2]; }else if(mediumRegex.test(val)){ this.currPwStrength=this.pwStrength[1]; }else if(enoughRegex.test(val)){ this.currPwStrength=this.pwStrength[0]; }else{ this.currPwStrength={}; } }, format(){ return this.currPwStrength.desc; }, pwStrengthStyle(){ return `margin-left:calc(${this.formLabelWidth} + 15px);margin-bottom:10px;width:calc(100% - ${this.formLabelWidth})` }, } } </script>

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

<template> <div class="pl-tabs-panel" :title="title" v-show="active" > <div class="pl-loading pl-loading-fixed" v-show="url&&!loaded" ref="dom-loader"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <iframe v-if="!hasUrl" :src="url" @load="handleIframeLoad" :name="'iframe'+name" ref="iframe"></iframe> <slot v-if="hasUrl"></slot> </div> </template> <script> export default { name:'PTabpanel', props:{ close:[String,Number,Boolean], itemData:Object, title:{ type:String, default:"" }, name:{ type:[String,Number], default:"" }, url:{ type:[String], default:"" }, index:[String,Number] }, data(){ return { loaded: false, hasUrl:this.url==null||this.url=='' } }, computed:{ active(){ const active = this.$parent.currentName === this.name; return active; } }, updated() { this.$parent.$emit('tab-nav-update'); }, methods:{ handleIframeLoad(evt){ let ifm = this.$refs['iframe']; if(ifm&&ifm.src!=="about:blank"){ this.loaded=true; }else{ if(ifm&&ifm.contentWindow.document.body.innerHTML==""){ this.loaded=false; }else{ this.loaded=true; } } this.loaded&&this.$emit('onIframeLoad',this,evt); } } } </script> <template> <div class="pl-tabs-panel" :title="title" v-show="active" > <div class="pl-loading pl-loading-fixed" v-show="url&&!loaded" ref="dom-loader"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <iframe v-if="!hasUrl" :src="url" @load="handleIframeLoad" :name="'iframe'+name" ref="iframe"></iframe> <slot v-if="hasUrl"></slot> </div> </template> <script> export default { name:'PTabpanel', props:{ close:[String,Number,Boolean], itemData:Object, title:{ type:String, default:"" }, name:{ type:[String,Number], default:"" }, url:{ type:[String], default:"" }, index:[String,Number] }, data(){ debugger return { loaded: false, hasUrl:this.url==null||this.url=='' } }, computed:{ active(){ const active = this.$parent.currentName === this.name; return active; } }, updated() { this.$parent.$emit('tab-nav-update'); }, methods:{ handleIframeLoad(evt){ debugger let ifm = this.$refs['iframe']; if(ifm&&ifm.src!=="about:blank"){ this.loaded=true; }else{ if(ifm&&ifm.contentWindow.document.body.innerHTML==""){ this.loaded=false; }else{ this.loaded=true; } } this.loaded&&this.$emit('onIframeLoad',this,evt); } } } </script>

Ignore Space Show notes View project/setting/desktop/appsetting/js/1.0.0/appsetting.js

var root = "http://192.168.4.106:7777" var server = "/e5"; var oauth = "/e5"; var projectName = "${projectName}" var pName = projectName.split("/")[0]; var user = projectName.split("/")[1]; var deployDir = ""; //登录页url var loginUrl = root + server + "/login/index.html?pn=" + pName + "/" + user; //首页url var mainPageUrl = root + server + "/main/index.html?pn=" + pName + "/" + user; deployDir = "/e5/render"; serverName = server; if (window._global && window._global.env == 'dev') { deployDir = "" serverName = "" //登录页url var loginUrl = deployDir + "/" + pName + "/hivuiLogin/index.html#/"; //首页url var mainPageUrl = deployDir + "/" + pName + "/hivuiMain/index.html#/"; } var HIVUI_SETTING = { //项目名 projectName: projectName, //请求对象 request: eap.request, //服务器域名 url: root, serverName: serverName, //默认服务url serverUrl: root + server, //授权服务url oauth: root + oauth, //用户信息 userInfo: root + server + "/sys/user/detail", //登录页url loginUrl: loginUrl, //首页url mainPageUrl: mainPageUrl, //系统管理url sysManageUrl: "http://192.168.4.193:5188", //数据保存url saveUrl: root + server + "/data/save", //'/data/save', //数据查询url queryUrl: root + server + "/data/query", //'/data/query', //数据策略url policyUrl: root + server + "/data/policy", //附件上传url upload: root + server + "/file/upload", //附件下载url download: root + server + "/file/download", //附件查看url review: root + server + "/file/review", //流程信息url getFlowInfo: root + server + "/flow/open", getApprovalInfo: root + server + "/flow/getApprovalInfo", processFlow: root + server + "/flow/processFlow", queryTask: root + server + "/flow/queryTask", withdrawtask: root + server + "/flow/withdrawtask", taskDiagram: root + server + "/flow/taskDiagram", openOrdernumber: root + server + "/flow/openOrdernumber", //默认查询操作符 queryOperate: 'like', //默认组件配置 defaultCmp: { "DtToolbar": { "buttons": [ { "kind": "add", "text": "添加" }, { "kind": "del", "text": "删除" }, { "kind": "reset", "text": "取消" }, { "kind": "save", "text": "保存" } ] } } } window.__guid = new Date().valueOf(); //切换布局 function changeLayout(name) { window.localStorage.setItem('layout', name); window.location.reload(); } window.customSysCofig={ //默认门户 对应自定义门户功能 sysSetTabs: [ { title: '任务中心', id: __guid++, close: false, url: '#taskCenter', }, { title: '首页', id: __guid++, close: false, type: 'home', actived: true //默认选中 } // ,{ // title:'工作台', // id: __guid++, // close:false, // type:'work' // } ], //默认 打开功能 sysDefTabs: [ // { // id: __guid++, // title:"设计", // url:'http://192.168.7.109:9090/#/design', // close:true, // }, ], //头部菜单 sysFuncMenus: [ { id: __guid++, name: '系统管理', url: window.HIVUI_SETTING.sysManageUrl + "/?pn=" + window.HIVUI_SETTING.projectName, iconClass: 'icon-set-fill', target: '_blank', type: 'widthToken', }, /*{ id: __guid++, name: '<font color=red>邮件系统</font>', url: 'http://hcmail.histron.cn:8001/webmail/index.do?osName=windows', iconClass: 'icon-mail', target: '_blank', },*/ { type: 'split' }, { id: __guid++, name: '布局', type: 'layout', iconClass: 'icon-user', children: [ { id: 'vertical', name: '上下布局', handler: function () { changeLayout(this.id) } }, { id: 'level', name: '左右布局', handler: function () { changeLayout(this.id) } } ] }, { type: 'split' }, ], //首页加载logo sysLoadLogo: { src: '', title: '中海创科技' }, //首页头部logo sysLogo: { src: '', title: '中海创科技' }, //首页mini图标 MsysLogo: { src: '', title: '中海创科技' }, //登录页配置 //登录页logo loginLogo:"", //logo高 loginLogo_h:null, //logo宽 loginLogo_w:null, //登录页背景 loginBgImg:"", //标题 //loginTitle:"", //版权 copyright:"版权所有 © 2020-2025 中海创科技", //是否开启扫码登录 //isScan:false, }; var root = "http://192.168.4.106:7777" var server = "/e5"; var oauth = "/e5"; var projectName = "${projectName}" var pName=projectName.split("/")[0]; var user=projectName.split("/")[1]; var deployDir = ""; if (window._global && window._global.env == 'prd') deployDir = "/freemark/render"; var HIVUI_SETTING = { //项目名 projectName: projectName, //请求对象 request: eap.request, //服务器域名 url: root, //默认服务url serverUrl: root + server, //授权服务url oauth: root + oauth, //登录页url loginUrl: deployDir + "/" + pName + "/hivuiLogin/index.html#/", //首页url mainPageUrl: deployDir + "/" + pName + "/hivuiMain/index.html#/", //系统管理url sysManageUrl: "http://192.168.4.193:5188", //数据保存url saveUrl: root + server + "/data/save", //'/data/save', //数据查询url queryUrl: root + server + "/data/query", //'/data/query', //数据策略url policyUrl: root + server + "/data/policy", //附件上传url upload: root + server + "/file/upload", //附件下载url download: root + server + "/file/download", //附件查看url review: root + server + "/file/review", //流程信息url getFlowInfo: root + server + "/flow/open", getApprovalInfo: root + server + "/flow/getApprovalInfo", processFlow: root + server + "/flow/processFlow", queryTask: root + server + "/flow/queryTask", withdrawtask: root + server + "/flow/withdrawtask", taskDiagram: root + server + "/flow/taskDiagram", openOrdernumber: root + server + "/flow/openOrdernumber", //默认查询操作符 queryOperate: 'like', //默认组件配置 defaultCmp: { "DtDataSet": { "test": 1 } } }

Ignore Space Show notes View vite-plugin/vite-plugin-func.js

var querystring = require('querystring'); var url = require('url'); const fs = require('fs') var https = require('https'); var request = require('request'); var ejs = require('ejs'); function myPlugin(rawOptions) { const options = { isProduction: process.env.NODE_ENV === 'production', ...rawOptions, root: process.cwd(), }; let postData; let config; return { name: 'vite-plugin-func', // 必须的，将会显示在 warning 和 error 中 configResolved(resolvedConfig) { // 存储最终解析的配置 config = resolvedConfig }, configureServer(server) { server.middlewares.use((req, res, next) => { console.log(new Date(), 'req.url:', req.url) if (req.url.indexOf(".flow") != -1 || req.url.indexOf(".func") != -1) { let url = req.url; let post = ''; postData = ''; let path let fmodelpath = url.split("?")[0] if (fmodelpath.endsWith(".flow")) { var post_data = { fmodelpath: fmodelpath } path = process.env.VITE_APP_BASE_API + process.env.VITE_APP_SERVER + "/flow/open?pn="; } else { var post_data = { __viewItemId: "" }; path = process.env.VITE_APP_BASE_API + process.env.VITE_APP_SERVER + fmodelpath + "?pn=" } // let pn = url.split("/")[1]; const TokenKey = 'EAP-Token'; req.on('data', (chunk) => { post += chunk; postData = querystring.parse(post); // console.log(new Date(), 'PostData:', postData); }); var Cookies = {}; if (req.headers.cookie != null) { req.headers.cookie.split(';').forEach(l => { var parts = l.split('='); Cookies[parts[0].trim()] = (parts[1] || '').trim(); }); } let token = Cookies[TokenKey]; let requestUrl = path + process.env.VITE_APP_PN; request({ url: requestUrl, method: "POST", json: true, headers: { "token": token, "Authorization": "Bearer " + token, "Content-Type": "application/json;charset=UTF-8" }, body: post_data }, function (error, response, body) { if (!error && response.statusCode == 200) { // console.log(body) // 请求成功的处理逻辑 let pcform; if (body) { if (fmodelpath.endsWith(".flow") && body.outParameter) { pcform = body.outParameter.task.bizpcform; } else if (fmodelpath.endsWith(".func") && body.dataPack) { pcform = body.dataPack.path; } } if (!pcform) { res.writeHead(500, { "Content-Type": "application/json;charset=UTF-8" }); res.end(JSON.stringify(body)); return; } // var fullPath = "eaptpl/12112/mokuai/shitumulu/biaodan/dtv/1.0.0/desktop/index.html"; let content; try { content = fs.readFileSync(pcform, { encoding: 'utf8' }) } catch (e) { res.writeHead(404, { "Content-Type": "application/json;charset=UTF-8" }); res.end("pcform error!"); return; } const statusCode = 200; if (!body) throw new Error(`No body text found for the ${statusCode} status code`); var html = ejs.render(content, rawOptions) let postDataStr = JSON.stringify(postData || {}); let varName = options.varName || 'viteRequestData'; let varGlobal = JSON.stringify(options.global || {}); let funcName = new Date().valueOf(); let queryScript = ` function _viteGetQuery${funcName}() { var url = window.location.search; var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&"); for(var i = 0; i < strs.length; i ++) { theRequest[strs[i].split("=")[0]]=decodeURI(strs[i].split("=")[1]); } } return theRequest; }` let titleStr = html.match(/<head(.*?)>/g)[0] || ""; html = html.replace( /<head(.*?)>/g, `${titleStr}<script>${queryScript};window.${varName} = Object.assign(_viteGetQuery${funcName}(),${postDataStr}); window._global=${varGlobal}</script>` ) res.writeHead(statusCode, { // 'Content-Length': html.length, 'Content-Type': 'html' }); res.write(html) res.end(); } else { res.writeHead(200, { 'Content-Type': 'html' }); let projectName = process.env.VITE_APP_PN.split("/")[0]; let html = ` <script src="/assets_platform/eap/eap.umd.min.js"></script> <script> window._global ={ env :"dev" } </script> <script src="/${projectName}/setting/desktop/appsetting/js/1.0.0/appsetting.js" type="text/javascript"></script> <script> window.location.href=window.HIVUI_SETTING.loginUrl; </script> ` res.end(html); // res.end(requestUrl + ":" + JSON.stringify(error) + JSON.stringify(body)); } }, (msg) => { res.writeHead(404, { "Content-Type": "application/json;charset=UTF-8" }); res.end(JSON.stringify(msg)); // console.log(msg) }); return; } else { next(); } }) }, } } export default myPlugin; var querystring = require('querystring'); var url = require('url'); const fs = require('fs') var https = require('https'); var request = require('request'); var ejs = require('ejs'); function myPlugin(rawOptions) { const options = { isProduction: process.env.NODE_ENV === 'production', ...rawOptions, root: process.cwd(), }; let postData; let config; return { name: 'vite-plugin-func', // 必须的，将会显示在 warning 和 error 中 configResolved(resolvedConfig) { // 存储最终解析的配置 config = resolvedConfig }, configureServer(server) { server.middlewares.use((req, res, next) => { console.log(new Date(), 'req.url:', req.url) if (req.url.indexOf(".flow") != -1 || req.url.indexOf(".func") != -1) { let url = req.url; postData = ''; let path let fmodelpath = url.split("?")[0] if (fmodelpath.endsWith(".flow")) { var post_data = { fmodelpath: fmodelpath } path = process.env.VITE_APP_BASE_API + process.env.VITE_APP_SERVER + "/flow/open?pn="; } else { var post_data = { __viewItemId: "" }; path = process.env.VITE_APP_BASE_API + process.env.VITE_APP_SERVER + fmodelpath + "?pn=" } // let pn = url.split("/")[1]; const TokenKey = 'EAP-Token'; req.on('data', (chunk) => { post += chunk; postData = querystring.parse(post); // console.log(new Date(), 'PostData:', postData); }); var Cookies = {}; if (req.headers.cookie != null) { req.headers.cookie.split(';').forEach(l => { var parts = l.split('='); Cookies[parts[0].trim()] = (parts[1] || '').trim(); }); } let token = Cookies[TokenKey]; let requestUrl = path + process.env.VITE_APP_PN; request({ url: requestUrl, method: "POST", json: true, headers: { "token": token, "Authorization": "Bearer " + token, "Content-Type": "application/json;charset=UTF-8" }, body: post_data }, function (error, response, body) { if (!error && response.statusCode == 200) { // console.log(body) // 请求成功的处理逻辑 let pcform; if (body) { if (fmodelpath.endsWith(".flow") && body.outParameter) { pcform = body.outParameter.task.bizpcform; } else if (fmodelpath.endsWith(".func") && body.dataPack) { pcform = body.dataPack.path; } } if (!pcform) { res.writeHead(500, { "Content-Type": "application/json;charset=UTF-8" }); res.end(JSON.stringify(body)); return; } // var fullPath = "eaptpl/12112/mokuai/shitumulu/biaodan/dtv/1.0.0/desktop/index.html"; let content; try { content = fs.readFileSync(pcform, { encoding: 'utf8' }) } catch (e) { res.writeHead(404, { "Content-Type": "application/json;charset=UTF-8" }); res.end("pcform error!"); return; } const statusCode = 200; if (!body) throw new Error(`No body text found for the ${statusCode} status code`); var html = ejs.render(content, rawOptions) let postDataStr = JSON.stringify(postData || {}); let varName = options.varName || 'viteRequestData'; let varGlobal = JSON.stringify(options.global || {}); let funcName = new Date().valueOf(); let queryScript = ` function _viteGetQuery${funcName}() { var url = window.location.search; var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&"); for(var i = 0; i < strs.length; i ++) { theRequest[strs[i].split("=")[0]]=decodeURI(strs[i].split("=")[1]); } } return theRequest; }` let titleStr = html.match(/<head(.*?)>/g)[0] || ""; html = html.replace( /<head(.*?)>/g, `${titleStr}<script>${queryScript};window.${varName} = Object.assign(_viteGetQuery${funcName}(),${postDataStr}); window._global=${varGlobal}</script>` ) res.writeHead(statusCode, { // 'Content-Length': html.length, 'Content-Type': 'html' }); res.write(html) res.end(); } else { res.writeHead(body.status, { "Content-Type": "application/json;charset=UTF-8" }); res.end(requestUrl + ":" + JSON.stringify(error) + JSON.stringify(body)); } }, (msg) => { res.writeHead(404, { "Content-Type": "application/json;charset=UTF-8" }); res.end(JSON.stringify(msg)); // console.log(msg) }); return; } else { next(); } }) }, } } export default myPlugin;

Show line notes below