Browse code @中文描述:登录页、主界面多语言替换 @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1 master
1 parent 4bc661e commit b4e9b6cc5c81d16db9c67b4b512ec2df389d3069 20278 authored on 27 Mar 2023

Showing 19 changed files

• assets_platform/tpl_lang/hivuiLogin/zh-CN.js
• assets_platform/tpl_lang/hivuiMain/zh-CN.js
• project/hivuiLogin/components/pwStrength.vue
• project/hivuiLogin/components/resetPw.vue
• project/hivuiLogin/views/index.vue
• project/hivuiLogin/views/miniLogin.vue
• project/hivuiLogin/views/register.vue
• project/hivuiMain/App.vue
• project/hivuiMain/components/dialog/index.vue
• project/hivuiMain/components/tabpanel/tabNav.jsx
• project/hivuiMain/index.html
• project/hivuiMain/store/index.js
• project/hivuiMain/views/layout/components/Header.vue
• project/hivuiMain/views/layout/components/modifyPw/index.vue
• project/hivuiMain/views/layout/components/navbar/index.vue
• project/hivuiMain/views/layout/components/tabpanel/contextMenu.jsx
• project/hivuiMain/views/layout/components/tabpanel/tabNav.vue
• project/hivuiMain/views/layout/components/tabpanel/tabs.jsx
• project/hivuiMain/views/taskCenter.vue

Ignore Space Show notes View assets_platform/tpl_lang/hivuiLogin/zh-CN.js

(function (global, factory) { if (typeof define === "function" && define.amd) { // define('element/locale/eu', ['module', 'exports'], factory); } else if (typeof exports !== "undefined") { factory(module, exports); } else { var mod = { exports: {} }; factory(mod, mod.exports); global.HiVuiTpl = global.HiVuiTpl || {}; global.HiVuiTpl.lang = global.HiVuiTpl.lang || {}; global.HiVuiTpl.lang.zhCN = mod.exports; } })(this, function (module, exports) { 'use strict'; exports.__esModule = true; exports.default = { "login_pw_weak":"弱", "login_pw_middle":"中", "login_pw_strong":"高", "login_reset_phone":"手机号", "login_reset_password_tip":"请输入密码", "login_reset_captcha":"验证码", "login_reset_getCaptcha":"获取验证码", "login_reset_getAgain":"秒后再次获取", "login_reset_reset":"重置密码", "login_reset_def_copyright":"版权所有 © 2021-2025 中海创科技（福建）集团有限公司", "login_reset_phone_tip":"请填写手机号", "login_reset_phone_msg":"请填写正确的手机格式!", "login_reset_password_tip2":"请填写密码", "login_reset_password_msg1":"请输入至少", "login_reset_password_msg2":"位密码！", "login_reset_captcha_msg":"请填写验证码", "login_reset_reset_success":"密码重置成功", "login_main_def_title":"中海创科技", "login_main_def_copyright":"版权所有 © 2020-2025 中海创科技", "login_main_scan_login":"扫码登录", "login_main_user":"用户名/邮箱", "login_main_user_ph":"用户名", "login_main_pw":"登录密码", "login_main_pw_ph":"请输入密码", "login_main_save_user":"记住用户名", "login_main_forget_user":"忘记密码?", "login_main_login_btn":"登录", "login_main_register1":"没有账号，", "login_main_register2":"马上注册！", "login_main_download":"APP下载", "login_main_pw_text":"密码登录", "login_main_login_fail":"登录失败!", "login_main_qr_fail":"二维码失效", "login_main_qr_refresh":"刷新二维码", "login_main_scan_success":"扫描成功！", "login_main_scan_text":"请在手机上根据提示确认登录", "login_main_app_text1":"打开", "login_main_app_text2":"海创科技App", "login_main_app_text3":"扫一扫登录", "login_main_forget_title":"忘记密码", "login_main_valid_user":"请输入用户名！", "login_main_valid_pw":"请输入密码！", "login_register_title":"注册", "login_register_box_title":"注册账号", "login_register_user":"账号", "login_register_phone":"手机号", "login_register_pw1":"请输入密码", "login_register_pw2":"确认密码", "login_register_captcha":"验证码", "login_register_submit":"立即注册", "login_register_tiptext1":"已有账号，", "login_register_tiptext2":"马上登录?", "login_register_valid_user":"请填写账号", "login_register_valid_user2":"账号长度超出，请重新输入！", "login_register_valid_phone":"请填写手机号", "login_register_valid_phone2":"请填写正确的手机格式!", "login_register_valid_pw":"请填写密码!", "login_register_valid_pw_msg":"请输入至少", "login_register_valid_pw_msg2":"位密码！", "login_register_valid_pw2":"请再次填写密码", "login_register_valid_pw2_msg":"两次输入密码不一致!", "login_register_valid_captcha":"请填写验证码", "login_register_success":"注册成功，即将返回登录页", }; module.exports = exports['default']; }); (function (global, factory) { if (typeof define === "function" && define.amd) { // define('element/locale/eu', ['module', 'exports'], factory); } else if (typeof exports !== "undefined") { factory(module, exports); } else { var mod = { exports: {} }; factory(mod, mod.exports); global.HiVuiTpl = global.HiVuiTpl || {}; global.HiVuiTpl.lang = global.HiVuiTpl.lang || {}; global.HiVuiTpl.lang.zhCN = mod.exports; } })(this, function (module, exports) { 'use strict'; exports.__esModule = true; exports.default = { 'el_colorpicker_confirm': '确定', 'el_colorpicker_clear': '清空' }; module.exports = exports['default']; });

Ignore Space Show notes View assets_platform/tpl_lang/hivuiMain/zh-CN.js 0 → 100644

(function (global, factory) { if (typeof define === "function" && define.amd) { // define('element/locale/eu', ['module', 'exports'], factory); } else if (typeof exports !== "undefined") { factory(module, exports); } else { var mod = { exports: {} }; factory(mod, mod.exports); global.HiVuiTpl = global.HiVuiTpl || {}; global.HiVuiTpl.lang = global.HiVuiTpl.lang || {}; global.HiVuiTpl.lang.zhCN = mod.exports; } })(this, function (module, exports) { 'use strict'; exports.__esModule = true; exports.default = { "mainpage_recentlyUsed":"最近使用", "mainpage_projectManage":"项目管理", "mainpage_allFunction":"全部功能", "mainpage_nodata":"暂无数据", "mainpage_searchKey":"搜索关键字", "mainpage_customWorkbench":"自定义工作台", "mainpage_logout":"退出系统", "mainpage_sysLoading":"系统加载中...", "mainpage_loadedFailClickRefresh":"加载失败,点我重试!", "mainpage_dialog_cancel":"取消", "mainpage_dialog_define":"确定", "mainpage_dialog_def_title":"提示", "mainpage_portal_text":"暂无功能权限!", "mainpage_tab_ctxmenu_refresh":"刷新", "mainpage_tab_ctxmenu_close":"关闭", "mainpage_tab_ctxmenu_closeleft":"关闭左侧", "mainpage_tab_ctxmenu_closeright":"关闭右侧", "mainpage_tab_ctxmenu_closeother":"关闭其它", "mainpage_tab_ctxmenu_closeall":"关闭所有", "mainpage_tab_ctxmenu_fullscreen":"全屏", "mainpage_tab_scroll_lt":"左边滚动", "mainpage_tab_scroll_rt":"右边滚动", "mainpage_tab_scroll_more":"更多", "mainpage_store_msg1":"获取", "mainpage_store_msg2":"失败，", "mainpage_store_msg3":"点我重试!", "mainpage_store_sysmenu":"系统菜单", "mainpage_store_userinfo":"用户信息", "mainpage_store_bzlist":"多岗信息", "mainpage_store_lately":"最近使用功能", "mainpage_allfuncmenu_text":"请输入关键词", "mainpage_modifypw_title":"修改密码", "mainpage_modifypw_oldpw":"旧密码:", "mainpage_modifypw_oldpw":"请输入旧密码", "mainpage_modifypw_newpw":"新密码:", "mainpage_modifypw_newpw_ph":"请输入4-25个数字、字母或符号组合", "mainpage_modifypw_valid_pw2_msg":"两次输入密码不一致!", "mainpage_modifypw_valid_pw_empty":"请输入新密码!", "mainpage_modifypw_valid_pw2_empty":"请再次输入新密码!", "mainpage_modifypw_valid_pw2_empty2":"请再次输入密码!", "mainpage_modifypw_newpw2":"确认新密码:", "mainpage_modifypw_newpw2_ph":"再次确认新密码", "mainpage_modifypw_weak":"弱", "mainpage_modifypw_middle":"中", "mainpage_modifypw_strong":"高", "mainpage_modifypw_success":"修改成功！请重新登录", "mainpage_header_null":"空", "mainpage_header_notification_title":"消息提示", "mainpage_taskcenter_untreated":"未处理", "mainpage_app_user":"用户编号", "mainpage_app_orgbz":"岗位编制", "mainpage_app_orgname":"机构名称", "mainpage_app_rolename":"岗位名称", "mainpage_app_modifyPw":"修改密码", }; module.exports = exports['default']; });

Ignore Space Show notes View project/hivuiLogin/components/pwStrength.vue

<template> <div class="pwStrength" id="container"> <el-row> <el-col :span="8"> <el-progress :percentage="onePercentage" :color="oneCustomColors" :format="oneFormat"></el-progress> </el-col> <el-col :span="8"> <el-progress :percentage="twoPercentage" :color="twoCustomColors" :format="twoFormat"></el-progress> </el-col> <el-col :span="8"> <el-progress :percentage="ThreePercentage" :color="ThreeCustomColors" :format="ThreeFormat"></el-progress> </el-col> </el-row> </div> </template> <script> export default { name: "PasswordStrength", model: { event: 'change', prop: 'password' }, props: { //密码 password: { type: [String,Boolean,Number,Object], required: true, default: "", }, minPw:{ type: [String,Boolean,Number,Object], default: 6, } }, watch:{ password(newValue){ const mode = this.checkPasswordStrength(newValue); //逻辑处理 switch (mode) { //初始化状态 case 0: this.content = ''; this.onePercentage = 0; this.twoPercentage = 0; this.ThreePercentage = 0; break; case 1: this.content = $t('login_pw_weak'); this.onePercentage = 100; this.twoPercentage = 0; this.ThreePercentage = 0; break; case 2: this.content = $t('login_pw_middle'); this.onePercentage = 100; this.twoPercentage = 100; this.ThreePercentage = 0; break; case 3: this.content = $t('login_pw_middle'); this.onePercentage = 100; this.twoPercentage = 100; this.ThreePercentage = 0; break; default: this.content = $t('login_pw_strong'); this.onePercentage = 100; this.twoPercentage = 100; this.ThreePercentage = 100; break; } } }, data(){ return{ content:"", onePercentage:0, twoPercentage:0, ThreePercentage:0, oneCustomColors: [ {color: '#7ecef4', percentage: 100} ], twoCustomColors: [ {color: '#fbae65', percentage: 100} ], ThreeCustomColors: [ {color: '#ff7665', percentage: 100} ] } }, methods:{ oneFormat() { return ""; }, twoFormat() { return ""; }, ThreeFormat() { return ""; }, //密码强度验证 checkPasswordStrength(value) { let mode = 0; //正则表达式验证符合要求的 if (value.length < this.minPw) return mode; if (/\d/.test(value)) mode++; //数字 if (/[a-z]/.test(value)) mode++; //小写 if (/[A-Z]/.test(value)) mode++; //大写 if (/\W/.test(value)) mode++; //特殊字符 return mode; } } } </script> <style lang="scss" scoped> @function px2vw($px) { @return ($px / 1920) * 100vw; } .pwStrength{ ::v-deep.el-progress__text { display: none; } ::v-deep.el-progress-bar { padding: 0 px2vw(5); margin: 0px; } ::v-deep.el-progress-bar__outer{ height:px2vw(10); } } </style> <template> <div class="pwStrength" id="container"> <el-row> <el-col :span="8"> <el-progress :percentage="onePercentage" :color="oneCustomColors" :format="oneFormat"></el-progress> </el-col> <el-col :span="8"> <el-progress :percentage="twoPercentage" :color="twoCustomColors" :format="twoFormat"></el-progress> </el-col> <el-col :span="8"> <el-progress :percentage="ThreePercentage" :color="ThreeCustomColors" :format="ThreeFormat"></el-progress> </el-col> </el-row> </div> </template> <script> export default { name: "PasswordStrength", model: { event: 'change', prop: 'password' }, props: { //密码 password: { type: [String,Boolean,Number,Object], required: true, default: "", }, minPw:{ type: [String,Boolean,Number,Object], default: 6, } }, watch:{ password(newValue){ const mode = this.checkPasswordStrength(newValue); //逻辑处理 switch (mode) { //初始化状态 case 0: this.content = ''; this.onePercentage = 0; this.twoPercentage = 0; this.ThreePercentage = 0; break; case 1: this.content = '弱'; this.onePercentage = 100; this.twoPercentage = 0; this.ThreePercentage = 0; break; case 2: this.content = '中'; this.onePercentage = 100; this.twoPercentage = 100; this.ThreePercentage = 0; break; case 3: this.content = '中'; this.onePercentage = 100; this.twoPercentage = 100; this.ThreePercentage = 0; break; default: this.content = '高'; this.onePercentage = 100; this.twoPercentage = 100; this.ThreePercentage = 100; break; } } }, data(){ return{ content:"", onePercentage:0, twoPercentage:0, ThreePercentage:0, oneCustomColors: [ {color: '#7ecef4', percentage: 100} ], twoCustomColors: [ {color: '#fbae65', percentage: 100} ], ThreeCustomColors: [ {color: '#ff7665', percentage: 100} ] } }, methods:{ oneFormat() { return ""; }, twoFormat() { return ""; }, ThreeFormat() { return ""; }, //密码强度验证 checkPasswordStrength(value) { let mode = 0; //正则表达式验证符合要求的 if (value.length < this.minPw) return mode; if (/\d/.test(value)) mode++; //数字 if (/[a-z]/.test(value)) mode++; //小写 if (/[A-Z]/.test(value)) mode++; //大写 if (/\W/.test(value)) mode++; //特殊字符 return mode; } } } </script> <style lang="scss" scoped> @function px2vw($px) { @return ($px / 1920) * 100vw; } .pwStrength{ ::v-deep.el-progress__text { display: none; } ::v-deep.el-progress-bar { padding: 0 px2vw(5); margin: 0px; } ::v-deep.el-progress-bar__outer{ height:px2vw(10); } } </style>

Ignore Space Show notes View project/hivuiLogin/components/resetPw.vue

<template> <div class="reset"> <el-form ref="registerForm" :model="registerForm" :rules="registerRules"> <el-form-item class="register_field" prop="phone"> <el-input ref="phone" v-model="registerForm.phone" type="text" :placeholder="$t('login_reset_phone')"></el-input> </el-form-item> <el-form-item class="register_field" prop="pw"> <el-input ref="pw" v-model="registerForm.pw" type="password" :placeholder="$t('login_reset_password_tip')"></el-input> <pwStrength class="register_pwStrength" v-model="registerForm.pw" :minPw="minPw"></pwStrength> </el-form-item> <el-form-item class="register_field register_row" prop="captcha"> <el-input ref="captcha" v-model="registerForm.captcha" type="text" :placeholder="$t('login_reset_captcha')"></el-input> <el-button class="register_capbtn" :loading="captchaLoading" type="primary" :disabled="captchaTimer==0?false:true" @click="getCaptcha">{{captchaTimer==0?$t('login_reset_getCaptcha'):(captchaTimer+$t('login_reset_getAgain'))}}</el-button> </el-form-item> <el-button class="register_submit" :loading="resetLoading" type="primary" @click="reset">{{$t('login_reset_reset')}}</el-button> </el-form> </div> </template> <script> import { getToken } from "../utils/auth"; import { captcha,resetpw } from "../api/user"; import pwStrength from "../components/pwStrength"; import md5 from "js-md5"; export default { name: "resetPw", components: { pwStrength }, data() { return { registerForm: { phone: "", pw: "", captcha: "", email: "", }, minPw:4, copyRight: window.customSysCofig?.copyright||$t('login_reset_def_copyright'), registerRules: { phone: [ { required: true, message: $t('login_reset_phone_tip'), trigger: "blur" }, { validator: (rule, value, callback)=>{ if (!/^[1]([3-9])[0-9]{9}$/.test(value)) { callback(new Error($t('login_reset_phone_msg'))); } else { callback(); } }, trigger: "blur" }, ], pw: [ { required: true, message: $t('login_reset_password_tip2'), trigger: "blur" }, { validator: (rule, value, callback)=>{ if ((value+"").length<this.minPw) { callback(new Error($t('login_reset_password_msg1')+this.minPw+$t('login_reset_password_msg2'))); } else { callback(); } }, trigger: "blur" }, ], captcha: [ { required: true, message: $t('login_reset_captcha_msg'), trigger: "blur" } ], /*email: [ { required: true, message: "请填写邮箱地址", trigger: "blur" } ]*/ }, captchaLoading:false, resetLoading:false, captchaTimer:0, }; }, model: { prop: "value", event: "valuechange" }, props: { value: { type: Object } }, computed: {}, mounted() {}, methods: { //获取验证码 getCaptcha(){ this.$refs.registerForm.validateField("phone",(errMsg) => { if (!errMsg) { let me=this; me.captchaTimer=60; me.captchaLoading=true; captcha({     "phone": me.registerForm.phone }).then(res=>{ me.captchaLoading=false; }).catch(err=>{ me.captchaLoading=false; }); let _timer=setInterval(()=>{ --me.captchaTimer; if(me.captchaTimer==0){ clearInterval(_timer); } },1000); } }); }, //重置 reset(){ let me=this; this.$refs.registerForm.validate((valid) => { if (valid) { me.resetLoading=true; debugger;resetpw({     "phone":me.registerForm.phone,     "password":md5(me.registerForm.pw),     "captcha":me.registerForm.captcha, }).then(res=>{ me.$message({ message: $t('login_reset_reset_success'), type: 'success' }); me.$emit("resetCb"); }).catch(err=>{ me.resetLoading=false; }); } }); }, }, }; </script> <style lang="scss" scoped> @function px2vw($px) { @return ($px / 1920) * 100vw; } .reset{ padding:px2vw(20) px2vw(50); .register_field{ margin-bottom: px2vw(22); line-height:px2vw(48); ::v-deep.el-input__inner{ line-height:px2vw(48); height:px2vw(48); } .register_pwStrength{ margin-top:px2vw(10); } &.register_row{ ::v-deep.el-form-item__content{ display: flex; align-items:center; } } } .register_capbtn{ width: px2vw(200); height: px2vw(48); line-height: px2vw(48); padding: 0; } .register_submit{ height: px2vw(48); line-height: px2vw(48); padding-top: 0; width: 100%; margin-top:px2vw(10); } .register_tips{ padding-top: px2vw(20); span{ color:#3486d2; cursor: pointer; } } } </style> <template> <div class="reset"> <el-form ref="registerForm" :model="registerForm" :rules="registerRules"> <el-form-item class="register_field" prop="phone"> <el-input ref="phone" v-model="registerForm.phone" type="text" placeholder="手机号"></el-input> </el-form-item> <el-form-item class="register_field" prop="pw"> <el-input ref="pw" v-model="registerForm.pw" type="password" placeholder="请输入密码"></el-input> <pwStrength class="register_pwStrength" v-model="registerForm.pw" :minPw="minPw"></pwStrength> </el-form-item> <el-form-item class="register_field register_row" prop="captcha"> <el-input ref="captcha" v-model="registerForm.captcha" type="text" placeholder="验证码"></el-input> <el-button class="register_capbtn" :loading="captchaLoading" type="primary" :disabled="captchaTimer==0?false:true" @click="getCaptcha">{{captchaTimer==0?"获取验证码":(captchaTimer+"s后再次获取")}}</el-button> </el-form-item> <el-button class="register_submit" :loading="resetLoading" type="primary" @click="reset">重置密码</el-button> </el-form> </div> </template> <script> import { getToken } from "../utils/auth"; import { captcha,resetpw } from "../api/user"; import pwStrength from "../components/pwStrength"; import md5 from "js-md5"; export default { name: "resetPw", components: { pwStrength }, data() { return { registerForm: { phone: "", pw: "", captcha: "", email: "", }, minPw:4, copyRight: "版权所有 © 2021-2025 中海创科技（福建）集团有限公司", registerRules: { phone: [ { required: true, message: "请填写手机号", trigger: "blur" }, { validator: (rule, value, callback)=>{ if (!/^[1]([3-9])[0-9]{9}$/.test(value)) { callback(new Error('请填写正确的手机格式!')); } else { callback(); } }, trigger: "blur" }, ], pw: [ { required: true, message: "请填写密码", trigger: "blur" }, { validator: (rule, value, callback)=>{ if ((value+"").length<this.minPw) { callback(new Error('请输入至少'+this.minPw+'位密码！')); } else { callback(); } }, trigger: "blur" }, ], captcha: [ { required: true, message: "请填写验证码", trigger: "blur" } ], /*email: [ { required: true, message: "请填写邮箱地址", trigger: "blur" } ]*/ }, captchaLoading:false, resetLoading:false, captchaTimer:0, }; }, model: { prop: "value", event: "valuechange" }, props: { value: { type: Object } }, computed: {}, mounted() {}, methods: { //获取验证码 getCaptcha(){ this.$refs.registerForm.validateField("phone",(errMsg) => { if (!errMsg) { let me=this; me.captchaTimer=60; me.captchaLoading=true; captcha({     "phone": me.registerForm.phone }).then(res=>{ me.captchaLoading=false; }).catch(err=>{ me.captchaLoading=false; }); let _timer=setInterval(()=>{ --me.captchaTimer; if(me.captchaTimer==0){ clearInterval(_timer); } },1000); } }); }, //重置 reset(){ let me=this; this.$refs.registerForm.validate((valid) => { if (valid) { me.resetLoading=true; debugger;resetpw({     "phone":me.registerForm.phone,     "password":md5(me.registerForm.pw),     "captcha":me.registerForm.captcha, }).then(res=>{ me.$message({ message: '密码重置成功', type: 'success' }); me.$emit("resetCb"); }).catch(err=>{ me.resetLoading=false; }); } }); }, }, }; </script> <style lang="scss" scoped> @function px2vw($px) { @return ($px / 1920) * 100vw; } .reset{ padding:px2vw(20) px2vw(50); .register_field{ margin-bottom: px2vw(22); line-height:px2vw(48); ::v-deep.el-input__inner{ line-height:px2vw(48); height:px2vw(48); } .register_pwStrength{ margin-top:px2vw(10); } &.register_row{ ::v-deep.el-form-item__content{ display: flex; align-items:center; } } } .register_capbtn{ width: px2vw(200); height: px2vw(48); line-height: px2vw(48); padding: 0; } .register_submit{ height: px2vw(48); line-height: px2vw(48); padding-top: 0; width: 100%; margin-top:px2vw(10); } .register_tips{ padding-top: px2vw(20); span{ color:#3486d2; cursor: pointer; } } } </style>

Ignore Space Show notes View project/hivuiLogin/views/index.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">{{$t('login_main_scan_login')}}</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>{{$t('login_main_user')}}</label> <input class="login_field_text" v-model="username" type="text" id="txtUserName" name="userName" :placeholder="$t('login_main_user_ph')" autofocus required autocomplete="off" @keyup.enter="loginFunc" /> <i class="fa fa-user"></i> </div> <div class="login_field"> <label>{{$t('login_main_pw')}}</label> <input class="login_field_text" v-model="password" type="text" onfocus="this.type='password'" id="txtPassword" name="password" :placeholder="$t('login_main_pw_ph')" 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 >{{$t('login_main_save_user')}}</label > <input type="checkbox" id="saveCheckbox" style="display: none" v-model="isCheckRu" @change="rememberUserEvent" /> <span class="forgetPw" @click="showResetPw" ><i class="fa fa-lock"></i ><span style="margin-left: 5px">{{$t('login_main_forget_user')}}</span></span > </div> <div class="login_form_btn"> <div class="login_btn_area"> <button :style="btnStyle" :class="'loginBtn' + (loginLoading ? ' disabled' : '')" @click="loginFunc" > {{$t('login_main_login_btn')}}<i :hidden="!loginLoading" class="el-icon-loading" ></i> </button> </div> </div> <div class="register_tips"> {{$t('login_main_register1')}} <span @click="goRegisterPage">{{$t('login_main_register2')}}</span> </div> <el-popover v-if="config.appQRcode" class="login_form_appqr" placement="bottom-end" width="190" popper-class="appQRPopper"> <img :src="config.appQRcode"> <span slot="reference" class="login_form_app">{{$t('login_main_download')}}</span> </el-popover> </div> </div> <div id="showCom" class="loginMainBox" :hidden="!(config.isScan && currLoginType == 'scan')" > <div class="login-title">{{$t('login_main_scan_login')}}</div> <div class="login-tip"> <div class="poptip"> <div class="poptip-arrow"> <em></em> <span></span> </div> <div class="poptip-content">{{$t('login_main_pw_text')}}</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">{{$t('login_main_login_fail')}}</div> <div class="qrcode-img" style="display: none"> <canvas height="130" width="130" style="height: 130px; width: 130px" ></canvas> <div class="qrcode-error"> <p>{{$t('login_main_qr_fail')}}</p> <button type="button" class="refresh">{{$t('login_main_qr_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>{{$t('login_main_scan_success')}}</p> <h4>{{$t('login_main_scan_text')}}</h4> </div> </div> </div> <div class="qrDesc"> <div> <!-- <img src="" alt="" /> --> </div> <div class="qrDesc_right"> <span> {{$t('login_main_app_text1')}}<a style="color: blue">{{$t('login_main_app_text2')}}</a><br /> {{$t('login_main_app_text3')}}</span > </div> </div> </div> <div id="qrcode"></div> </div> </div> <el-dialog :title="$t('login_main_forget_title')" :visible.sync="isShowResetPw" width="400px" height="350px" :close-on-click-modal="false" @close="cancelResetPw"> <resetPw res="resetPw" @resetCb="cancelResetPw"></resetPw> </el-dialog> <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 "js-md5"; import { projectName } from "../config"; import "font-awesome/css/font-awesome.css"; import comIcon from "../assets/computer.png" import scanIcon from "../assets/qrcode_3.png" import _loginLogoImg from "../assets/Logo1.png" import _loginBgImg from "../assets/background.png" import { setToken, removeToken, getUserId, setUserId, removeUserId, } from "../utils/auth.js"; import resetPw from "../components/resetPw.vue"; export default { components: {resetPw}, data() { return { comIcon: comIcon, scanIcon: scanIcon, username: "", password: "", config: { title: window.customSysCofig?.loginTitle||$t('login_main_def_title'), loginLogoImg: window.customSysCofig?.loginLogo||_loginLogoImg, loginLogoImg_height: window.customSysCofig?.loginLogo_h||56, loginLogoImg_width: window.customSysCofig?.loginLogo_w||206, loginBgImg: window.customSysCofig?.loginBgImg||_loginBgImg, copyright: window.customSysCofig?.copyright||$t('login_main_def_copyright'), isScan: window.customSysCofig?.isScan||false, mainColor:window.customSysCofig?.mainColor||"#06c", appQRcode:window.customSysCofig?.appQRcode||"", }, currLoginType: "com", rememberUserId: getUserId(), loginLoading: false, isShowResetPw:false, }; }, computed: { btnStyle(){ return { "background-color": this.config.mainColor, }; }, 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; }, }, created() { if (window.HIVUI_SETTING.isSingleLogin) { let loginUrl = window.HIVUI_SETTING.singleLoginUrl; if (loginUrl.endsWith("=")) { loginUrl = loginUrl + window.HIVUI_SETTING.mainPageUrl.replace(/#\//g, ""); } window.location.href = loginUrl; } }, mounted() { if (this.isCheckRu) { this.username = this.rememberUserId; } }, methods: { loginFunc() { this.defaultLogin(); }, defaultLogin() { /*this.$refs.loginForm.validate(valid => { if (valid) {*/ if(!this.username.trim()){ this.$message.error($t('login_main_valid_user')); return; }else if(!this.password){ this.$message.error($t('login_main_valid_pw')); return; } 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(); } if(!window.HIVUI_SETTING.isSingleLogin&&location.hash.indexOf("eapReturnUrl=")!=-1){ location=decodeURIComponent(location.hash.split("eapReturnUrl=")[1]); }else{ 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"; }, showResetPw() { this.isShowResetPw=true; }, cancelResetPw() { this.isShowResetPw=false; }, rememberUserEvent() { if (this.isCheckRu) { this.rememberUserId = ""; } else { this.rememberUserId = true; } }, goRegisterPage(){ this.$router.push("/register"); }, }, }; </script> <style lang="scss"> * { 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_appqr { position: absolute; bottom: 0; right: 40px; .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: 0px; 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: #0f406c; i { color: #0f406c; } } } .login_form_btn { font-size: 13px; margin-top: 20px; .loginBtn { /* background-color: #135189; */ 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 { filter: brightness(0.8); } &.disabled { background-color: #ccc!important; &:hover { filter: brightness(1); } } } } /*二维码*/ .qrCodeImg { /* position: absolute; */ height: 139px; width: 139px; /* left:40% !important; right:0 !important; bottom:12%; */ margin-top: 10px; margin-left: 85px; z-index: 999; } .register_tips{ padding-top: 15px; font-size: 14px; text-align: center; span{ color:#3486d2; cursor: pointer; } } } .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; } .appQRPopper{ text-align: center; img{ width:150px; } } </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" /> <span class="forgetPw" @click="showResetPw" ><i class="fa fa-lock"></i ><span style="margin-left: 5px">忘记密码?</span></span > </div> <div class="login_form_btn"> <div class="login_btn_area"> <button :style="btnStyle" :class="'loginBtn' + (loginLoading ? ' disabled' : '')" @click="loginFunc" > 登&nbsp;&nbsp;录<i :hidden="!loginLoading" class="el-icon-loading" ></i> </button> </div> </div> <div class="register_tips"> 没有账号， <span @click="goRegisterPage">马上注册！</span> </div> <el-popover v-if="config.appQRcode" class="login_form_appqr" placement="bottom-end" width="190" popper-class="appQRPopper"> <img :src="config.appQRcode"> <span slot="reference" class="login_form_app">APP下载</span> </el-popover> </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> <el-dialog title="忘记密码" :visible.sync="isShowResetPw" width="400px" height="350px" :close-on-click-modal="false" @close="cancelResetPw"> <resetPw res="resetPw" @resetCb="cancelResetPw"></resetPw> </el-dialog> <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 "js-md5"; import { projectName } from "../config"; import "font-awesome/css/font-awesome.css"; import comIcon from "../assets/computer.png" import scanIcon from "../assets/qrcode_3.png" import _loginLogoImg from "../assets/Logo1.png" import _loginBgImg from "../assets/background.png" import { setToken, removeToken, getUserId, setUserId, removeUserId, } from "../utils/auth.js"; import resetPw from "../components/resetPw.vue"; export default { components: {resetPw}, data() { return { comIcon: comIcon, scanIcon: scanIcon, username: "", password: "", config: { title: window.customSysCofig?.loginTitle||"中海创科技", loginLogoImg: window.customSysCofig?.loginLogo||_loginLogoImg, loginLogoImg_height: window.customSysCofig?.loginLogo_h||56, loginLogoImg_width: window.customSysCofig?.loginLogo_w||206, loginBgImg: window.customSysCofig?.loginBgImg||_loginBgImg, copyright: window.customSysCofig?.copyright||"版权所有 © 2020-2025 中海创科技", isScan: window.customSysCofig?.isScan||false, mainColor:window.customSysCofig?.mainColor||"#06c", appQRcode:window.customSysCofig?.appQRcode||"", }, currLoginType: "com", rememberUserId: getUserId(), loginLoading: false, isShowResetPw:false, }; }, computed: { btnStyle(){ return { "background-color": this.config.mainColor, }; }, 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; }, }, created() { if (window.HIVUI_SETTING.isSingleLogin) { let loginUrl = window.HIVUI_SETTING.singleLoginUrl; if (loginUrl.endsWith("=")) { loginUrl = loginUrl + window.HIVUI_SETTING.mainPageUrl.replace(/#\//g, ""); } window.location.href = loginUrl; } }, mounted() { if (this.isCheckRu) { this.username = this.rememberUserId; } }, methods: { loginFunc() { this.defaultLogin(); }, defaultLogin() { /*this.$refs.loginForm.validate(valid => { if (valid) {*/ if(!this.username.trim()){ this.$message.error("请输入用户名！"); return; }else if(!this.password){ this.$message.error("请输入密码！"); return; } 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(); } if(!window.HIVUI_SETTING.isSingleLogin&&location.hash.indexOf("eapReturnUrl=")!=-1){ location=decodeURIComponent(location.hash.split("eapReturnUrl=")[1]); }else{ 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"; }, showResetPw() { this.isShowResetPw=true; }, cancelResetPw() { this.isShowResetPw=false; }, rememberUserEvent() { if (this.isCheckRu) { this.rememberUserId = ""; } else { this.rememberUserId = true; } }, goRegisterPage(){ this.$router.push("/register"); }, }, }; </script> <style lang="scss"> * { 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_appqr { position: absolute; bottom: 0; right: 40px; .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: 0px; 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: #0f406c; i { color: #0f406c; } } } .login_form_btn { font-size: 13px; margin-top: 20px; .loginBtn { /* background-color: #135189; */ 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 { filter: brightness(0.8); } &.disabled { background-color: #ccc!important; &:hover { filter: brightness(1); } } } } /*二维码*/ .qrCodeImg { /* position: absolute; */ height: 139px; width: 139px; /* left:40% !important; right:0 !important; bottom:12%; */ margin-top: 10px; margin-left: 85px; z-index: 999; } .register_tips{ padding-top: 15px; font-size: 14px; text-align: center; span{ color:#3486d2; cursor: pointer; } } } .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; } .appQRPopper{ text-align: center; img{ width:150px; } } </style>

Ignore Space Show notes View project/hivuiLogin/views/miniLogin.vue

<template> <div :class="'login_form'+(questType=='ajax'?' dialogLogin':'')"> <div class="loginMainBox"> <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>{{$t('login_main_user')}}</label> <input class="login_field_text" v-model="username" type="text" id="txtUserName" name="userName" :placeholder="$t('login_main_user_ph')" autofocus required autocomplete="off" :readonly="(questType=='ajax'&&oldUserName)?true:false" @keyup.enter="loginFunc" > <i class="fa fa-user"></i> </div> <div class="login_field"> <label>{{$t('login_main_pw')}}</label> <input class="login_field_text" v-model="password" type="text" onfocus="this.type='password'" id="txtPassword" name="password" :placeholder="$t('login_main_pw_ph')" required autocomplete="off" @keyup.enter="loginFunc" > <i class="fa fa-unlock-alt"></i> </div> <div class="login_form_btn"> <div class="login_btn_area"> <button :style="btnStyle" :class="'loginBtn' + (loginLoading ? ' disabled' : '')" @click="loginFunc" > {{$t('login_main_login_btn')}} <i :hidden="!loginLoading" class="el-icon-loading"></i> </button> </div> </div> </div> </div> </div> </template> <script> import { baseLogin } from "../api/login"; import md5 from "js-md5"; import { projectName } from "../config"; import "font-awesome/css/font-awesome.css"; import _loginLogoImg from "../assets/Logo1.png" import _loginBgImg from "../assets/background.png" import { setToken, removeToken, getUserId, setUserId, removeUserId, } from "../utils/auth.js"; import { getUrlValue, } from "../utils/index.js"; export default { components: {}, data() { return { msg: "这是小登录页", oldUserName:(top.window.Scp&&top.window.Scp.User.fuserid)||false, username: (top.window.Scp&&top.window.Scp.User.fuserid)||"", password: "", config: { mainColor:window.customSysCofig?.mainColor||"#06c", }, loginLoading: false, questType:getUrlValue("","questType"), isRefresh:getUrlValue("","isRefresh")=="true"?true:false, }; }, computed:{ btnStyle(){ return { "background-color": this.config.mainColor, }; }, }, mounted() {}, methods: { loginFunc() { this.defaultLogin(); }, defaultLogin() { let me=this; /*this.$refs.loginForm.validate(valid => { if (valid) {*/ if (!me.username.trim()) { me.$message.error($t('login_main_valid_user')); return; } else if (!me.password) { me.$message.error($t('login_main_valid_pw')); return; } removeToken(); me.loginLoading = true; baseLogin({ username: me.username.trim(), password: md5(me.password) }) .then(response => { const data = response; setToken(data.token); if (me.isCheckRu) { setUserId(me.username); } else { removeUserId(); } if(me.questType=="ajax"){ top.window.SysPage.closeMiniLogin(me.isRefresh); }else{ //top.window.SysPage.newPage(me.$route.params.redirectTitle||"",me.$route.params.redirect||"",me.$route.params.pushData||{},"post"); location.reload(); } }) .catch(error => { me.loginLoading = false; }); } } }; </script> <style lang="scss" scoped> * { 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_form { width: 400px; height: 360px; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; padding: 1px; z-index: 100; box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5); &.dialogLogin{ height: 350px; box-shadow:none; } .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; } } } } .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; &[readonly]{ background-color: #eee; color: #666; } &::input-placeholder { color: #ccc; } } } .login_form_btn { font-size: 13px; margin-top: 20px; .loginBtn { /* background-color: #135189; */ 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 { filter: brightness(0.8); } &.disabled { background-color: #ccc !important; &:hover { filter: brightness(1); } } } } } } </style> <template> <div :class="'login_form'+(questType=='ajax'?' dialogLogin':'')"> <div class="loginMainBox"> <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" :readonly="(questType=='ajax'&&oldUserName)?true:false" @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="login_form_btn"> <div class="login_btn_area"> <button :style="btnStyle" :class="'loginBtn' + (loginLoading ? ' disabled' : '')" @click="loginFunc" > 登&nbsp;&nbsp;录 <i :hidden="!loginLoading" class="el-icon-loading"></i> </button> </div> </div> </div> </div> </div> </template> <script> import { baseLogin } from "../api/login"; import md5 from "js-md5"; import { projectName } from "../config"; import "font-awesome/css/font-awesome.css"; import _loginLogoImg from "../assets/Logo1.png" import _loginBgImg from "../assets/background.png" import { setToken, removeToken, getUserId, setUserId, removeUserId, } from "../utils/auth.js"; import { getUrlValue, } from "../utils/index.js"; export default { components: {}, data() { return { msg: "这是小登录页", oldUserName:(top.window.Scp&&top.window.Scp.User.fuserid)||false, username: (top.window.Scp&&top.window.Scp.User.fuserid)||"", password: "", config: { mainColor:window.customSysCofig?.mainColor||"#06c", }, loginLoading: false, questType:getUrlValue("","questType"), isRefresh:getUrlValue("","isRefresh")=="true"?true:false, }; }, computed:{ btnStyle(){ return { "background-color": this.config.mainColor, }; }, }, mounted() {}, methods: { loginFunc() { this.defaultLogin(); }, defaultLogin() { let me=this; /*this.$refs.loginForm.validate(valid => { if (valid) {*/ if (!me.username.trim()) { me.$message.error("请输入用户名！"); return; } else if (!me.password) { me.$message.error("请输入密码！"); return; } removeToken(); me.loginLoading = true; baseLogin({ username: me.username.trim(), password: md5(me.password) }) .then(response => { const data = response; setToken(data.token); if (me.isCheckRu) { setUserId(me.username); } else { removeUserId(); } if(me.questType=="ajax"){ top.window.SysPage.closeMiniLogin(me.isRefresh); }else{ //top.window.SysPage.newPage(me.$route.params.redirectTitle||"",me.$route.params.redirect||"",me.$route.params.pushData||{},"post"); location.reload(); } }) .catch(error => { me.loginLoading = false; }); } } }; </script> <style lang="scss" scoped> * { 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_form { width: 400px; height: 360px; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; padding: 1px; z-index: 100; box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5); &.dialogLogin{ height: 350px; box-shadow:none; } .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; } } } } .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; &[readonly]{ background-color: #eee; color: #666; } &::input-placeholder { color: #ccc; } } } .login_form_btn { font-size: 13px; margin-top: 20px; .loginBtn { /* background-color: #135189; */ 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 { filter: brightness(0.8); } &.disabled { background-color: #ccc !important; &:hover { filter: brightness(1); } } } } } } </style>

Ignore Space Show notes View project/hivuiLogin/views/register.vue

<template> <div class="register"> <div class="register_hd"> <div class="register_logo"> <img :src="config.loginLogoImg"> </div> <div class="register_text">{{$t('login_register_title')}}</div> </div> <div class="register_main" :style="bgStyle"> <div class="register_box"> <h3>{{$t('login_register_box_title')}}</h3> <el-form ref="registerForm" :model="registerForm" :rules="registerRules"> <el-form-item class="register_field" prop="username"> <el-input ref="username" v-model="registerForm.username" type="text" :placeholder="$t('login_register_user')"></el-input> </el-form-item> <el-form-item class="register_field" prop="phone"> <el-input ref="phone" v-model="registerForm.phone" type="text" :placeholder="$t('login_register_phone')"></el-input> </el-form-item> <el-form-item class="register_field" prop="pw1"> <el-input ref="pw1" v-model="registerForm.pw1" type="password" :placeholder="$t('login_register_pw1')"></el-input> <pwStrength class="register_pwStrength" v-model="registerForm.pw1" :minPw="minPw"></pwStrength> </el-form-item> <el-form-item class="register_field" prop="pw2"> <el-input ref="pw2" v-model="registerForm.pw2" type="password" :placeholder="$t('login_register_pw2')"></el-input> </el-form-item> <el-form-item class="register_field register_row" prop="captcha"> <el-input ref="captcha" v-model="registerForm.captcha" type="text" :placeholder="$t('login_register_captcha')"></el-input> <el-button class="register_capbtn" :loading="captchaLoading" type="primary" :disabled="captchaTimer==0?false:true" @click="getCaptcha" >{{captchaTimer==0?$t('login_reset_getCaptcha'):(captchaTimer+$t('login_reset_getAgain'))}}</el-button> </el-form-item> <!-- <el-form-item class="register_field" prop="email"> <el-input ref="email" v-model="registerForm.email" type="text" placeholder="邮箱"></el-input> </el-form-item>--> <el-button class="register_submit" :loading="registerLoading" type="primary" @click="register" >{{$t('login_register_submit')}}</el-button> </el-form> <div class="register_tips"> {{$t('login_register_tiptext1')}} <span @click="goLoginPage">{{$t('login_register_tiptext2')}}</span> </div> </div> </div> <div class="register_ft">{{config.copyright}}</div> </div> </template> <script> import _loginLogoImg from "../assets/Logo1.png" import _registerBgImg from "../assets/register/bg.png" import { captcha, register } from "../api/user"; import pwStrength from "../components/pwStrength"; import md5 from "js-md5"; export default { name: "register", components: { pwStrength }, data() { return { registerForm: { phone: "", pw1: "", pw2: "", captcha: "", email: "" }, minPw: 4, registerRules: { username: [ { required: true, message: $t('login_register_valid_user'), trigger: "blur" }, { validator: (rule, value, callback) => { if ((value + "").length > 20) { callback(new Error($t('login_register_valid_user2'))); } else { callback(); } }, trigger: "blur" } ], phone: [ { required: true, message: $t('login_register_valid_phone'), trigger: "blur" }, { validator: (rule, value, callback) => { if (!/^[1]([3-9])[0-9]{9}$/.test(value)) { callback(new Error($t('login_register_valid_phone2'))); } else { callback(); } }, trigger: "blur" } ], pw1: [ { required: true, message: $t('login_register_valid_pw'), trigger: "blur" }, { validator: (rule, value, callback) => { if ((value + "").length < this.minPw) { callback(new Error($t('login_register_valid_pw_msg') + this.minPw + $t('login_register_valid_pw_msg2'))); } else { callback(); } }, trigger: "blur" } ], pw2: [ { required: true, message: $t('login_register_valid_pw2'), trigger: "blur" }, { validator: (rule, value, callback) => { if (value !== this.registerForm.pw1) { callback(new Error($t('login_register_valid_pw2_msg'))); } else { callback(); } }, trigger: "blur" } ], captcha: [{ required: true, message: $t('login_register_valid_captcha'), trigger: "blur" }] /*email: [ { required: true, message: "请填写邮箱地址", trigger: "blur" } ]*/ }, captchaLoading: false, registerLoading: false, captchaTimer: 0, config: { title: window.customSysCofig?.loginTitle||$t('login_main_def_title'), loginLogoImg: window.customSysCofig?.loginLogo||_loginLogoImg, loginLogoImg_height: window.customSysCofig?.loginLogo_h||56, loginLogoImg_width: window.customSysCofig?.loginLogo_w||206, registerBgImg: window.customSysCofig?.registerBgImg||_registerBgImg, copyright: window.customSysCofig?.copyright||$t('login_main_def_copyright'), }, }; }, model: { prop: "value", event: "valuechange" }, props: { value: { type: Object } }, computed: { bgStyle() { return { "background-image": "url(" + this.config.registerBgImg + ")", }; }, }, mounted() {}, methods: { //获取验证码 getCaptcha() { this.$refs.registerForm.validateField("phone", errMsg => { if (!errMsg) { let me = this; me.captchaTimer = 60; me.captchaLoading = true; captcha({ phone: me.registerForm.phone }) .then(res => { me.captchaLoading = false; }) .catch(err => { me.captchaLoading = false; }); let _timer = setInterval(() => { --me.captchaTimer; if (me.captchaTimer == 0) { clearInterval(_timer); } }, 1000); } }); }, //注册 register() { let me = this; this.$refs.registerForm.validate(valid => { if (valid) { me.registerLoading = true; register({ type: "phone", username:me.registerForm.username, phone: me.registerForm.phone, password: md5(me.registerForm.pw2), captcha: me.registerForm.captcha }) .then(res => { me.$message({ message: $t('login_register_success'), type: "success" }); setTimeout(() => { this.$router.push("/"); }, 1000 * 2); }) .catch(err => { me.registerLoading = false; }); } }); }, goLoginPage() { this.$router.push("/"); } } }; </script> <style lang="scss" scoped> @function px2vw($px) { @return ($px / 1920) * 100vw; } $headH: px2vw(130); $footH: px2vw(172); .register { height: 100%; overflow: hidden; .register_hd { height: $headH; display: flex; align-items: center; padding-top: px2vw(30); padding-left: px2vw(15); .register_logo { width: px2vw(236); height: px2vw(56); margin-right: px2vw(20); img { height: 100%; width: 100%; } } .register_text { font-size: px2vw(22); color: #333; position: relative; padding-left: px2vw(32); &:after { content: ""; display: block; height: px2vw(40); width: px2vw(1); background-color: #7ecef4; position: absolute; top: 0; left: px2vw(10); bottom: 0; margin: auto; } } } .register_main { height: calc(100% - #{$headH} - #{$footH}); position: relative; background: url("../assets/register/bg.png") no-repeat center center; background-size: cover; .register_box { position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: px2vw(1200); height: px2vw(655); border-radius: px2vw(3); background-color: #fff; padding: 0 px2vw(360) px2vw(40); h3 { text-align: center; line-height: px2vw(100); font-size: px2vw(24); color: #333; font-weight: bold; } .register_field { margin-bottom: px2vw(22); line-height: px2vw(48); ::v-deep.el-input__inner { line-height: px2vw(48); height: px2vw(48); } ::v-deep.el-form-item__content{ line-height: px2vw(50); font-size: px2vw(14); } ::v-deep.el-form-item__error{ padding-top: px2vw(4); } .register_pwStrength { margin-top: px2vw(10); } &.register_row { ::v-deep.el-form-item__content { display: flex; align-items: center; } } } .register_capbtn { width: px2vw(200); height: px2vw(48); line-height: px2vw(48); padding: 0; } .register_submit { height: px2vw(48); line-height: px2vw(48); padding-top: 0; width: 100%; margin-top: px2vw(10); } .register_tips { padding-top: px2vw(20); span { color: #3486d2; cursor: pointer; } } } } .register_ft { height: $footH; line-height: $footH; background-color: #e8f1fa; text-align: center; font-size: px2vw(16); color: #999; border-top: px2vw(1) solid #ccc; border-bottom: px2vw(1) solid #ccc; } } </style> <template> <div class="register"> <div class="register_hd"> <div class="register_logo"> <img :src="config.loginLogoImg"> </div> <div class="register_text">注册</div> </div> <div class="register_main" :style="bgStyle"> <div class="register_box"> <h3>注册账号</h3> <el-form ref="registerForm" :model="registerForm" :rules="registerRules"> <el-form-item class="register_field" prop="username"> <el-input ref="username" v-model="registerForm.username" type="text" placeholder="账号"></el-input> </el-form-item> <el-form-item class="register_field" prop="phone"> <el-input ref="phone" v-model="registerForm.phone" type="text" placeholder="手机号"></el-input> </el-form-item> <el-form-item class="register_field" prop="pw1"> <el-input ref="pw1" v-model="registerForm.pw1" type="password" placeholder="请输入密码"></el-input> <pwStrength class="register_pwStrength" v-model="registerForm.pw1" :minPw="minPw"></pwStrength> </el-form-item> <el-form-item class="register_field" prop="pw2"> <el-input ref="pw2" v-model="registerForm.pw2" type="password" placeholder="确认密码"></el-input> </el-form-item> <el-form-item class="register_field register_row" prop="captcha"> <el-input ref="captcha" v-model="registerForm.captcha" type="text" placeholder="验证码"></el-input> <el-button class="register_capbtn" :loading="captchaLoading" type="primary" :disabled="captchaTimer==0?false:true" @click="getCaptcha" >{{captchaTimer==0?"获取验证码":(captchaTimer+"s后再次获取")}}</el-button> </el-form-item> <!-- <el-form-item class="register_field" prop="email"> <el-input ref="email" v-model="registerForm.email" type="text" placeholder="邮箱"></el-input> </el-form-item>--> <el-button class="register_submit" :loading="registerLoading" type="primary" @click="register" >立即注册</el-button> </el-form> <div class="register_tips"> 已有账号， <span @click="goLoginPage">马上登录?</span> </div> </div> </div> <div class="register_ft">{{config.copyright}}</div> </div> </template> <script> import _loginLogoImg from "../assets/Logo1.png" import _registerBgImg from "../assets/register/bg.png" import { captcha, register } from "../api/user"; import pwStrength from "../components/pwStrength"; import md5 from "js-md5"; export default { name: "register", components: { pwStrength }, data() { return { registerForm: { phone: "", pw1: "", pw2: "", captcha: "", email: "" }, minPw: 4, registerRules: { username: [ { required: true, message: "请填写账号", trigger: "blur" }, { validator: (rule, value, callback) => { if ((value + "").length > 20) { callback(new Error("账号长度超出，请重新输入！")); } else { callback(); } }, trigger: "blur" } ], phone: [ { required: true, message: "请填写手机号", trigger: "blur" }, { validator: (rule, value, callback) => { if (!/^[1]([3-9])[0-9]{9}$/.test(value)) { callback(new Error("请填写正确的手机格式!")); } else { callback(); } }, trigger: "blur" } ], pw1: [ { required: true, message: "请填写密码", trigger: "blur" }, { validator: (rule, value, callback) => { if ((value + "").length < this.minPw) { callback(new Error("请输入至少" + this.minPw + "位密码！")); } else { callback(); } }, trigger: "blur" } ], pw2: [ { required: true, message: "请再次填写密码", trigger: "blur" }, { validator: (rule, value, callback) => { if (value !== this.registerForm.pw1) { callback(new Error("两次输入密码不一致!")); } else { callback(); } }, trigger: "blur" } ], captcha: [{ required: true, message: "请填写验证码", trigger: "blur" }] /*email: [ { required: true, message: "请填写邮箱地址", trigger: "blur" } ]*/ }, captchaLoading: false, registerLoading: false, captchaTimer: 0, config: { title: window.customSysCofig?.loginTitle||"中海创科技", loginLogoImg: window.customSysCofig?.loginLogo||_loginLogoImg, loginLogoImg_height: window.customSysCofig?.loginLogo_h||56, loginLogoImg_width: window.customSysCofig?.loginLogo_w||206, registerBgImg: window.customSysCofig?.registerBgImg||_registerBgImg, copyright: window.customSysCofig?.copyright||"版权所有 © 2020-2025 中海创科技", }, }; }, model: { prop: "value", event: "valuechange" }, props: { value: { type: Object } }, computed: { bgStyle() { return { "background-image": "url(" + this.config.registerBgImg + ")", }; }, }, mounted() {}, methods: { //获取验证码 getCaptcha() { this.$refs.registerForm.validateField("phone", errMsg => { if (!errMsg) { let me = this; me.captchaTimer = 60; me.captchaLoading = true; captcha({ phone: me.registerForm.phone }) .then(res => { me.captchaLoading = false; }) .catch(err => { me.captchaLoading = false; }); let _timer = setInterval(() => { --me.captchaTimer; if (me.captchaTimer == 0) { clearInterval(_timer); } }, 1000); } }); }, //注册 register() { let me = this; this.$refs.registerForm.validate(valid => { if (valid) { me.registerLoading = true; register({ type: "phone", username:me.registerForm.username, phone: me.registerForm.phone, password: md5(me.registerForm.pw2), captcha: me.registerForm.captcha }) .then(res => { me.$message({ message: "注册成功，即将返回登录页", type: "success" }); setTimeout(() => { this.$router.push("/"); }, 1000 * 2); }) .catch(err => { me.registerLoading = false; }); } }); }, goLoginPage() { this.$router.push("/"); } } }; </script> <style lang="scss" scoped> @function px2vw($px) { @return ($px / 1920) * 100vw; } $headH: px2vw(130); $footH: px2vw(172); .register { height: 100%; overflow: hidden; .register_hd { height: $headH; display: flex; align-items: center; padding-top: px2vw(30); padding-left: px2vw(15); .register_logo { width: px2vw(236); height: px2vw(56); margin-right: px2vw(20); img { height: 100%; width: 100%; } } .register_text { font-size: px2vw(22); color: #333; position: relative; padding-left: px2vw(32); &:after { content: ""; display: block; height: px2vw(40); width: px2vw(1); background-color: #7ecef4; position: absolute; top: 0; left: px2vw(10); bottom: 0; margin: auto; } } } .register_main { height: calc(100% - #{$headH} - #{$footH}); position: relative; background: url("../assets/register/bg.png") no-repeat center center; background-size: cover; .register_box { position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: px2vw(1200); height: px2vw(655); border-radius: px2vw(3); background-color: #fff; padding: 0 px2vw(360) px2vw(40); h3 { text-align: center; line-height: px2vw(100); font-size: px2vw(24); color: #333; font-weight: bold; } .register_field { margin-bottom: px2vw(22); line-height: px2vw(48); ::v-deep.el-input__inner { line-height: px2vw(48); height: px2vw(48); } ::v-deep.el-form-item__content{ line-height: px2vw(50); font-size: px2vw(14); } ::v-deep.el-form-item__error{ padding-top: px2vw(4); } .register_pwStrength { margin-top: px2vw(10); } &.register_row { ::v-deep.el-form-item__content { display: flex; align-items: center; } } } .register_capbtn { width: px2vw(200); height: px2vw(48); line-height: px2vw(48); padding: 0; } .register_submit { height: px2vw(48); line-height: px2vw(48); padding-top: 0; width: 100%; margin-top: px2vw(10); } .register_tips { padding-top: px2vw(20); span { color: #3486d2; cursor: pointer; } } } } .register_ft { height: $footH; line-height: $footH; background-color: #e8f1fa; text-align: center; font-size: px2vw(16); color: #999; border-top: px2vw(1) solid #ccc; border-bottom: px2vw(1) solid #ccc; } } </style>

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,index) in loadTexts" :key="index">{{str}}</span> <span v-if="$store.state.appStatus=='loading'">{{$lang('sysLoading')||$t('mainpage_sysLoading')}}</span> <span v-if="$store.state.appStatus!='loading'" style="color:red" @click="handleReload" >{{$lang('loadedFailClickRefresh')||$store.state.appStatusMsg||$t('mainpage_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(); window.customSysCofig.thirdParty&&window.customSysCofig.thirdParty.forEach((item)=>{//第三方脚本样式资源引用 let _dom; switch(item.type){ case "js": _dom=document.createElement("script"); _dom.type="text/javascript"; _dom.src=item.link; break; case "css": _dom=document.createElement("link"); _dom.rel="stylesheet"; _dom.href=item.link; break; } document.querySelector("head").appendChild(_dom); }); 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:$t('mainpage_app_user')+'：${fusername}/${fuserid}', iconClass:'icon-user', }, { id: __guid++, name:$t('mainpage_app_orgbz')+'：${fbzname}/${fbzid}', iconClass:'icon-user', type:"orgBz", }, { id: __guid++, name:$t('mainpage_app_orgname')+'：${forgname}/${forgid}', iconClass:'icon-user', }, { id: __guid++, name:$t('mainpage_app_rolename')+'：${frolename}/${froleid}', iconClass:'icon-user', }, /*{ id: __guid++, iconClass:'icon-edit', name:'修改用户信息', type:'modifyUserInfo', },*/ { id: __guid++, iconClass:'icon-edit', name:$t('mainpage_app_modifyPw'), 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,index) in loadTexts" :key="index">{{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')||$store.state.appStatusMsg||'加载失败,点我重试!'}}</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(); window.customSysCofig.thirdParty&&window.customSysCofig.thirdParty.forEach((item)=>{//第三方脚本样式资源引用 let _dom; switch(item.type){ case "js": _dom=document.createElement("script"); _dom.type="text/javascript"; _dom.src=item.link; break; case "css": _dom=document.createElement("link"); _dom.rel="stylesheet"; _dom.href=item.link; break; } document.querySelector("head").appendChild(_dom); }); 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:'机构名称：${forgname}/${forgid}', iconClass:'icon-user', }, { id: __guid++, name:'岗位名称：${frolename}/${froleid}', 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>

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">{{$t('mainpage_dialog_cancel')}}</button> <button class="pl-btn pl-btn-round pl-btn-primary" @click="handleOk">{{$t('mainpage_dialog_define')}}</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:""//this.$t('mainpage_dialog_def_title') }, 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'){ 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/tabNav.jsx

import vueContextMenu from "@main/components/contextMenu"; // import screenfull from 'screenfull' function noop() {} export default { props:{ panels:Array, onTabClick: { type: Function, default: noop }, onTabRemove: { type: Function, default: noop }, onTabCloseAll: { type: Function, default: noop }, hasContextMenu:{ type:Boolean, default:true } }, data(){ return { curContextMenuName:'',//右击tab curContextMenuIndex:null, show:true,//用于强制刷新 } }, watch:{ panels(){ this.show=false; this.$nextTick(()=>{ this.show = true;//用于强制刷新 }); } }, methods:{ resize(){ let tabWidth=0; let children = this.$el.querySelectorAll('li'); Array.prototype.map.call(children, function (el, index, list) { let rct = el.getBoundingClientRect(); tabWidth += rct.width; }); this.$el.style.width = (tabWidth+5)+'px'; let id = this.$parent.currentName; if (this.$refs[id] == null) return; let scrollLeft = this.$refs[id].offsetLeft, scrollArea = this.$refs[id].parentNode.parentNode.parentNode; if (scrollArea.offsetWidth < scrollLeft) { scrollArea.scrollLeft = scrollLeft; } else if (scrollArea.scrollLeft > scrollLeft) { scrollArea.scrollLeft = scrollLeft; } }, onClose(panel,e){ e.stopPropagation(); if(panel.$listeners&&panel.$listeners.onBeforeClose&&panel.$listeners.onBeforeClose(panel,e)===false){ return; } this.$emit('onTabClose',panel.name); }, onActive(panel,evt){ panel.$listeners&&panel.$listeners.onSelected&&panel.$listeners.onSelected(panel,evt) this.$emit('onTabChange',panel); }, onContextMenu(panel,index,e) { if(this.hasContextMenu==false){ return; } e.preventDefault() this.curContextMenuName = panel.name; this.curContextMenuIndex = index, this.$refs['cmp-tabContextMenu'].open(e); }, handleContextMenuRefresh(e) { let panel = this.panels[this.curContextMenuIndex]; if(!panel){return} if(panel.$listeners&&panel.$listeners.onBeforeRefresh&&panel.$listeners.onBeforeRefresh(panel,e)===false){ return; } panel.reload(); // let ifms = panel.$el.querySelectorAll('iframe'); // for(let i=ifms.length-1;i>=0;i--){ // ifms[i].contentWindow.window.location.reload(); // } }, handleContextMenuClose(e) { // e.stopPropagation(); let panel = this.panels[this.curContextMenuIndex]; if(!panel){return} if(panel.$listeners&&panel.$listeners.onBeforeClose&&panel.$listeners.onBeforeClose(panel,e)===false){ return; } this.$emit('onTabClose',panel.name); }, handleContextMenuCloseAll(e) { this.$emit('onTabCloseAll'); }, handleContextMenuCloseRt() { this.$emit('onTabCloseRt',this.curContextMenuName,this.curContextMenuIndex); }, handleContextMenuCloseLt() { this.$emit('onTabCloseLt',this.curContextMenuName,this.curContextMenuIndex); }, handleContextMenuCloseOt() { this.$emit('onTabCloseOt',this.curContextMenuName,this.curContextMenuIndex); }, handleFullScreen(){ // this.FullCreeen(document.documentElement); this.$emit('onFullScreen') }, FullCreeen(element) { // let el = element; // let rfs = // el.requestFullScreen || // el.webkitRequestFullScreen || // el.mozRequestFullScreen || // el.msRequestFullScreen; // // Element.requestFullscreen() 此方法用于发出异步请求使元素进入全屏模式。 // // 调用此API并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式， // // document对象会收到一个fullscreenchange事件，通知调用者当前元素已经进入全屏模式。如果全屏请求不被许可，则会收到一个fullscreenerror事件。 // if (typeof rfs != "undefined" && rfs) { // rfs.call(el); // } else if (typeof window.ActiveXObject != "undefined") { // let wscript = new ActiveXObject("WScript.Shell"); // if (wscript != null) { // wscript.SendKeys("{F11}"); // } // } screenfull.toggle() }, outFullCreeen(element){ // let el = element; // let cfs = el.cancelFullScreen || el.webkitCancelFullScreen || // el.mozCancelFullScreen || el.exitFullScreen; // if (typeof cfs != "undefined" && cfs) { // cfs.call(el); // } else if (typeof window.ActiveXObject != "undefined") { // let wscript = new ActiveXObject("WScript.Shell"); // if (wscript != null) { // wscript.SendKeys("{F11}"); // } // } }, }, render(h){ let { onClose, onActive, onContextMenu, hasContextMenu, show }=this; let tabs = this._l(this.panels,(panel,index)=>{ const nodeProps = { class:{ ['pl-tabs-item']:1, ['pl-tabs-itemSeld']:panel.name == this.$parent.currentName }, attrs:{ id:'tab_'+panel.name } }; const closeTpl = ( <i class="pl-tabs-itemClose iconfont icon-close" on-click={(ev) => { onClose(panel, ev); }}></i> ) const title = panel.title; return ( <li ref={panel.name} on-contextmenu={(ev) => { onContextMenu(panel,index, ev); }}> <div {...nodeProps} on-click={(ev) => {onActive(panel, ev); }}> <span class="pl-tabs-itemTxt sys-tab-item-text">{title}</span> {(panel.close===""||panel.close===true)&&closeTpl} </div> </li> ) }); const ctxMenuProp = { props: { ['menu-items']: [ { title: this.$lang('refresh')||this.$t('mainpage_tab_ctxmenu_refresh'), iconClass: 'icon-refresh', handler: this.handleContextMenuRefresh, }, { title: this.$lang('close')||this.$t('mainpage_tab_ctxmenu_close'), iconClass: 'icon-close-circle', handler: this.handleContextMenuClose, }, { title: this.$lang('closeLeft')||this.$t('mainpage_tab_ctxmenu_closeleft'), iconClass: 'icon-arrow-leftMore-circle', handler: this.handleContextMenuCloseLt, }, { title: this.$lang('closeRight')||this.$t('mainpage_tab_ctxmenu_closeright'), iconClass: 'icon-arrow-rightMore-circle', handler: this.handleContextMenuCloseRt, }, { title: this.$lang('closeOther')||this.$t('mainpage_tab_ctxmenu_closeother'), iconClass: 'icon-closeOther', handler: this.handleContextMenuCloseOt, }, { title: this.$lang('closeAll')||this.$t('mainpage_tab_ctxmenu_closeall'), iconClass: 'icon-closeAll', handler: this.handleContextMenuCloseAll, }, { title: this.$lang('fullScreen')||this.$t('mainpage_tab_ctxmenu_fullscreen'), iconClass: 'icon-quanping', handler: this.handleFullScreen, } ] } }; return ( <div> <ul>{show?tabs:''}</ul> { hasContextMenu&&( <vueContextMenu ref="cmp-tabContextMenu" {...ctxMenuProp}></vueContextMenu> ) } </div> ) }, updated(){ this.$parent.resize(); } } import vueContextMenu from "@main/components/contextMenu"; // import screenfull from 'screenfull' function noop() {} export default { props:{ panels:Array, onTabClick: { type: Function, default: noop }, onTabRemove: { type: Function, default: noop }, onTabCloseAll: { type: Function, default: noop }, hasContextMenu:{ type:Boolean, default:true } }, data(){ return { curContextMenuName:'',//右击tab curContextMenuIndex:null, show:true,//用于强制刷新 } }, watch:{ panels(){ this.show=false; this.$nextTick(()=>{ this.show = true;//用于强制刷新 }); } }, methods:{ resize(){ let tabWidth=0; let children = this.$el.querySelectorAll('li'); Array.prototype.map.call(children, function (el, index, list) { let rct = el.getBoundingClientRect(); tabWidth += rct.width; }); this.$el.style.width = (tabWidth+5)+'px'; let id = this.$parent.currentName; if (this.$refs[id] == null) return; let scrollLeft = this.$refs[id].offsetLeft, scrollArea = this.$refs[id].parentNode.parentNode.parentNode; if (scrollArea.offsetWidth < scrollLeft) { scrollArea.scrollLeft = scrollLeft; } else if (scrollArea.scrollLeft > scrollLeft) { scrollArea.scrollLeft = scrollLeft; } }, onClose(panel,e){ e.stopPropagation(); if(panel.$listeners&&panel.$listeners.onBeforeClose&&panel.$listeners.onBeforeClose(panel,e)===false){ return; } this.$emit('onTabClose',panel.name); }, onActive(panel,evt){ panel.$listeners&&panel.$listeners.onSelected&&panel.$listeners.onSelected(panel,evt) this.$emit('onTabChange',panel); }, onContextMenu(panel,index,e) { if(this.hasContextMenu==false){ return; } e.preventDefault() this.curContextMenuName = panel.name; this.curContextMenuIndex = index, this.$refs['cmp-tabContextMenu'].open(e); }, handleContextMenuRefresh(e) { let panel = this.panels[this.curContextMenuIndex]; if(!panel){return} if(panel.$listeners&&panel.$listeners.onBeforeRefresh&&panel.$listeners.onBeforeRefresh(panel,e)===false){ return; } panel.reload(); // let ifms = panel.$el.querySelectorAll('iframe'); // for(let i=ifms.length-1;i>=0;i--){ // ifms[i].contentWindow.window.location.reload(); // } }, handleContextMenuClose(e) { // e.stopPropagation(); let panel = this.panels[this.curContextMenuIndex]; if(!panel){return} if(panel.$listeners&&panel.$listeners.onBeforeClose&&panel.$listeners.onBeforeClose(panel,e)===false){ return; } this.$emit('onTabClose',panel.name); }, handleContextMenuCloseAll(e) { this.$emit('onTabCloseAll'); }, handleContextMenuCloseRt() { this.$emit('onTabCloseRt',this.curContextMenuName,this.curContextMenuIndex); }, handleContextMenuCloseLt() { this.$emit('onTabCloseLt',this.curContextMenuName,this.curContextMenuIndex); }, handleContextMenuCloseOt() { this.$emit('onTabCloseOt',this.curContextMenuName,this.curContextMenuIndex); }, handleFullScreen(){ // this.FullCreeen(document.documentElement); this.$emit('onFullScreen') }, FullCreeen(element) { // let el = element; // let rfs = // el.requestFullScreen || // el.webkitRequestFullScreen || // el.mozRequestFullScreen || // el.msRequestFullScreen; // // Element.requestFullscreen() 此方法用于发出异步请求使元素进入全屏模式。 // // 调用此API并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式， // // document对象会收到一个fullscreenchange事件，通知调用者当前元素已经进入全屏模式。如果全屏请求不被许可，则会收到一个fullscreenerror事件。 // if (typeof rfs != "undefined" && rfs) { // rfs.call(el); // } else if (typeof window.ActiveXObject != "undefined") { // let wscript = new ActiveXObject("WScript.Shell"); // if (wscript != null) { // wscript.SendKeys("{F11}"); // } // } screenfull.toggle() }, outFullCreeen(element){ // let el = element; // let cfs = el.cancelFullScreen || el.webkitCancelFullScreen || // el.mozCancelFullScreen || el.exitFullScreen; // if (typeof cfs != "undefined" && cfs) { // cfs.call(el); // } else if (typeof window.ActiveXObject != "undefined") { // let wscript = new ActiveXObject("WScript.Shell"); // if (wscript != null) { // wscript.SendKeys("{F11}"); // } // } }, }, render(h){ let { onClose, onActive, onContextMenu, hasContextMenu, show }=this; let tabs = this._l(this.panels,(panel,index)=>{ const nodeProps = { class:{ ['pl-tabs-item']:1, ['pl-tabs-itemSeld']:panel.name == this.$parent.currentName }, attrs:{ id:'tab_'+panel.name } }; const closeTpl = ( <i class="pl-tabs-itemClose iconfont icon-close" on-click={(ev) => { onClose(panel, ev); }}></i> ) const title = panel.title; return ( <li ref={panel.name} on-contextmenu={(ev) => { onContextMenu(panel,index, ev); }}> <div {...nodeProps} on-click={(ev) => {onActive(panel, ev); }}> <span class="pl-tabs-itemTxt sys-tab-item-text">{title}</span> {(panel.close===""||panel.close===true)&&closeTpl} </div> </li> ) }); const ctxMenuProp = { props: { ['menu-items']: [ { title: this.$lang('refresh')||'刷新', iconClass: 'icon-refresh', handler: this.handleContextMenuRefresh, }, { title: this.$lang('close')||'关闭', iconClass: 'icon-close-circle', handler: this.handleContextMenuClose, }, { title: this.$lang('closeLeft')||'关闭左侧', iconClass: 'icon-arrow-leftMore-circle', handler: this.handleContextMenuCloseLt, }, { title: this.$lang('closeRight')||'关闭右侧', iconClass: 'icon-arrow-rightMore-circle', handler: this.handleContextMenuCloseRt, }, { title: this.$lang('closeOther')||'关闭其它', iconClass: 'icon-closeOther', handler: this.handleContextMenuCloseOt, }, { title: this.$lang('closeAll')||'关闭所有', iconClass: 'icon-closeAll', handler: this.handleContextMenuCloseAll, }, { title: this.$lang('fullScreen')||'全屏', iconClass: 'icon-quanping', handler: this.handleFullScreen, } ] } }; return ( <div> <ul>{show?tabs:''}</ul> { hasContextMenu&&( <vueContextMenu ref="cmp-tabContextMenu" {...ctxMenuProp}></vueContextMenu> ) } </div> ) }, updated(){ this.$parent.resize(); } }

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> <link id="fav_icon" rel="icon" href="" type="image/x-icon"> <% 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> <%}%> <script src="/assets_platform/vue-i18n/vue-i18n.js"></script> <!-- element 语言包 --> <script src="/assets_platform/element-ui/lang/zh-CN.js"></script> <!-- <script src="/hiui语言包/hiui-i18n/zh-CN.js"></script> --> <script src="/assets_platform/tpl_lang/hivuiMain/zh-CN.js"></script> <script> // 统一输出语言包 zh-CN 名 try{ Vue.prototype._i18n = new VueI18n({ locale: 'defalut', messages: { 'defalut': HiVuiTpl.lang.zhCN } }); ELEMENT.locale(ELEMENT.lang.zhCN) }catch(e){ console.log('lang--------',e) } </script> <% if(!htmlWebpackPlugin.vite){%> <link rel="stylesheet" href="${serverPath}/render/assets_platform/element-ui/index.css"> <script src="${serverPath}/render/assets_platform/vue/vue.min.js"></script> <script src="${serverPath}/render/assets_platform/vuex/vuex.min.js"></script> <script src="${serverPath}/render/assets_platform/vue-router/vue-router.min.js"></script> <script src="${serverPath}/render/assets_platform/element-ui/index.js"></script> <!--发布时 公共库--> <!-- <script src="${serverPath}/render/assets_platform/vendor_dll/vuelibs.dll.js"></script> --> <script src="${serverPath}/render/assets_platform/vendor_dll/vendor.dll.js"></script> <script src="${serverPath}/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=()=>{ let _img=window.customSysCofig&&window.customSysCofig.sysLoadLogo&&window.customSysCofig.sysLoadLogo.src; document.getElementById("main_loading_logo").src=(_img||(window._global?"./assets/logo_max.png":"./static/img/logo_max.png")); if(window.customSysCofig){ if(window.customSysCofig.syTitle){ document.title=window.customSysCofig.syTitle; } if(window.customSysCofig.favicon){ document.getElementById("fav_icon").href=window.customSysCofig.favicon; } } //} </script> <% if(htmlWebpackPlugin.vite==true){%> <script type="module" src="./index.js"></script> <script> //预览时判断1.5s还没有加载完，自动重刷 var _winLoadedCtrl = window.setInterval(function(){ if(document.getElementById("main_loading_logo")){ window.location.reload(); }else{ window.clearInterval(_winLoadedCtrl); } },5000) </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> <link id="fav_icon" rel="icon" href="" type="image/x-icon"> <% 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="${serverPath}/render/assets_platform/element-ui/index.css"> <script src="${serverPath}/render/assets_platform/vue/vue.min.js"></script> <script src="${serverPath}/render/assets_platform/vuex/vuex.min.js"></script> <script src="${serverPath}/render/assets_platform/vue-router/vue-router.min.js"></script> <script src="${serverPath}/render/assets_platform/element-ui/index.js"></script> <!--发布时 公共库--> <!-- <script src="${serverPath}/render/assets_platform/vendor_dll/vuelibs.dll.js"></script> --> <script src="${serverPath}/render/assets_platform/vendor_dll/vendor.dll.js"></script> <script src="${serverPath}/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=()=>{ let _img=window.customSysCofig&&window.customSysCofig.sysLoadLogo&&window.customSysCofig.sysLoadLogo.src; document.getElementById("main_loading_logo").src=(_img||(window._global?"./assets/logo_max.png":"./static/img/logo_max.png")); if(window.customSysCofig){ if(window.customSysCofig.syTitle){ document.title=window.customSysCofig.syTitle; } if(window.customSysCofig.favicon){ document.getElementById("fav_icon").href=window.customSysCofig.favicon; } } //} </script> <% if(htmlWebpackPlugin.vite==true){%> <script type="module" src="./index.js"></script> <script> //预览时判断1.5s还没有加载完，自动重刷 var _winLoadedCtrl = window.setInterval(function(){ if(document.getElementById("main_loading_logo")){ window.location.reload(); }else{ window.clearInterval(_winLoadedCtrl); } },5000) </script> <%}%> <!-- built files will be auto injected --> </body> </html>

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' import {getUrlValue} from '@main/utils' Vue.use(Vuex) export default new Vuex.Store({ modules:{ portal, app, user }, getters, state: { appStatus:'loading',//failed , loading ,success appStatusMsg:'', }, mutations: { SET_appStatus(state,str){ state.appStatus = str; } }, actions: { async initApp(me){ function setErrorMsg(err,msgHead){ let __data=err.response.data; me.state.appStatusMsg=__data.msg || __data.message; msgHead&&(me.state.appStatusMsg=$t('mainpage_store_msg1')+msgHead+$t('mainpage_store_msg2')+(me.state.appStatusMsg&&(me.state.appStatusMsg+"，"))+$t('mainpage_store_msg3')); delete window.mainPageInitErrorJump; return new Promise((resolve, reject) => { reject(err); }); } window.mainPageInitErrorJump=true; //单点登录票据 if(window.HIVUI_SETTING.url!=location.origin&&window.HIVUI_SETTING.isSingleLogin&&getUrlValue('','ticket')){ function __ssoLogin(){ let returnPageUrl=window.location.origin+window.location.pathname; if(getUrlValue('','returnPage')){ returnPageUrl=getUrlValue('','returnPage'); } let params=window.location.search.slice(1).split("&").filter(item=>{ if(item.indexOf("ticket")==-1 && item.indexOf("returnPage")==-1){ return item } }); location = returnPageUrl+(params.length>0?'?':'')+params.join("&"); } await me.dispatch('user/login').then(res=>{ __ssoLogin(); }).catch(err=>{ __ssoLogin(); });//单点登录 } // await me.dispatch('user/load') //await me.dispatch('app/getPowers')//权限 // console.log('//权限 end') if(!me.state.app.menusList||me.state.app.menusList.length==0){ await me.dispatch('app/getMenus').catch(err=>{ return setErrorMsg(err,$t('mainpage_store_sysmenu')); })//菜单 // console.log('//菜单 end') } if(!me.state.user.userInfo.fuserid){ await me.dispatch('user/getInfo').catch(err=>{ return setErrorMsg(err,$t('mainpage_store_userinfo')); })//获取用户信息 // console.log('//获取用户信息 end') } if(!me.state.user.bzList){ await me.dispatch('user/getBzList').catch(err=>{ return setErrorMsg(err,$t('mainpage_store_bzlist')); })//获取多岗信息 // console.log('//获取多岗信息 end') } if(!me.state.app.latelyNavs&&me.state.app.latelyNavs.length==0){ await me.dispatch('app/getLatelyUse').catch(err=>{ return setErrorMsg(err,$t('mainpage_store_lately')); })//最近使用 // 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') delete window.mainPageInitErrorJump; return new Promise((resolve, reject) => { resolve(); }); }, 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' import {getUrlValue} from '@main/utils' Vue.use(Vuex) export default new Vuex.Store({ modules:{ portal, app, user }, getters, state: { appStatus:'loading',//failed , loading ,success appStatusMsg:'', }, mutations: { SET_appStatus(state,str){ state.appStatus = str; } }, actions: { async initApp(me){ function setErrorMsg(err,msgHead){ let __data=err.response.data; me.state.appStatusMsg=__data.msg || __data.message; msgHead&&(me.state.appStatusMsg="获取"+msgHead+"失败，"+(me.state.appStatusMsg&&(me.state.appStatusMsg+"，"))+"点我重试!"); delete window.mainPageInitErrorJump; return new Promise((resolve, reject) => { reject(err); }); } window.mainPageInitErrorJump=true; //单点登录票据 if(window.HIVUI_SETTING.url!=location.origin&&window.HIVUI_SETTING.isSingleLogin&&getUrlValue('','ticket')){ function __ssoLogin(){ let returnPageUrl=window.location.origin+window.location.pathname; if(getUrlValue('','returnPage')){ returnPageUrl=getUrlValue('','returnPage'); } let params=window.location.search.slice(1).split("&").filter(item=>{ if(item.indexOf("ticket")==-1 && item.indexOf("returnPage")==-1){ return item } }); location = returnPageUrl+(params.length>0?'?':'')+params.join("&"); } await me.dispatch('user/login').then(res=>{ __ssoLogin(); }).catch(err=>{ __ssoLogin(); });//单点登录 } // await me.dispatch('user/load') //await me.dispatch('app/getPowers')//权限 // console.log('//权限 end') if(!me.state.app.menusList||me.state.app.menusList.length==0){ await me.dispatch('app/getMenus').catch(err=>{ return setErrorMsg(err,"系统菜单"); })//菜单 // console.log('//菜单 end') } if(!me.state.user.userInfo.fuserid){ await me.dispatch('user/getInfo').catch(err=>{ return setErrorMsg(err,"用户信息"); })//获取用户信息 // console.log('//获取用户信息 end') } if(!me.state.user.bzList){ await me.dispatch('user/getBzList').catch(err=>{ return setErrorMsg(err,"多岗信息"); })//获取多岗信息 // console.log('//获取多岗信息 end') } if(!me.state.app.latelyNavs&&me.state.app.latelyNavs.length==0){ await me.dispatch('app/getLatelyUse').catch(err=>{ return setErrorMsg(err,"最近使用功能"); })//最近使用 // 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') delete window.mainPageInitErrorJump; return new Promise((resolve, reject) => { resolve(); }); }, setAppLoad({state,commit},status){ commit('SET_appStatus',status); } } })

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

<template> <div class="pl-header " :data-layout="layout"> <ul class="ltArea"> <li v-if="layout=='level'" class="logoStyle"> <div class="pl-logo"> <div v-if="hasTitle" @click="hideTitle(false)"> <img :src="def_sy_logo_horizon" :width="logoWidth" v-if="!logoOpt.src"> <img :src="logoOpt.src" :width="logoOpt.width?(logoOpt.width+'px'):(!logoOpt.height?logoWidth:null)" :height="logoOpt.height&&(logoOpt.height+'px')" :title="logoOpt.title" v-if="logoOpt.src"> </div> <div v-else @click="hideTitle(true)"> <img :src="def_sy_minLogo" v-if="!MlogoOpt.src"> <img :src="MlogoOpt.src" :width="MlogoOpt.width?(MlogoOpt.width+'px'):(!MlogoOpt.height?logoWidth:null)" :height="MlogoOpt.height&&(MlogoOpt.height+'px')" :title="MlogoOpt.title" v-if="MlogoOpt.src"> </div> </div> </li> <li v-else class="logoStyle"> <div class="pl-logo"> <img :src="def_sy_logo" :width="logoWidth" v-if="!logoOpt.src"> <img :src="logoOpt.src" :width="logoOpt.width?(logoOpt.width+'px'):(!logoOpt.height?logoWidth:null)" :height="logoOpt.height&&(logoOpt.height+'px')" :title="logoOpt.title" v-if="logoOpt.src"> </div> </li> <li v-if="sysList.length"> <div class="sysTrigger" ref='dom-sysList' @mouseover="handleShowSysList" @mouseout="handleHideSysList"> <span>{{$lang("projectManage")||$t('mainpage_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}}</span></a> </li> </ul> </li> <li v-if="layout == 'level'" > <div class="sysTrigger" ref="dom-latelyUse" :title='$lang("recentlyUsed")||$t("mainpage_recentlyUsed")' @mouseenter="handleShowLatelyUse" @mouseleave="handleHideLatelyUse"> <i class="icon iconfont icon-time"></i> <span class="title">{{$lang("recentlyUsed")||$t('mainpage_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")||$t('mainpage_nodata')}} </li> </ul> </li> <li v-if="layout == 'level'&&showAllFuncBtn" > <div class="sysTrigger"> <span ref="allFuncBtn" class="title" @mouseenter="allFuncTriggerOpen" @mouseleave="allFuncTriggerClose">{{$lang('allFunction')||$t('mainpage_allFunction')}}</span> <i class="icon iconfont icon-arrow-down"></i> <allFuncMenu ref="allFuncMenu" :triggerObj="allFuncBtnObj" v-add2Body></allFuncMenu> </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')||$t('mainpage_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")||$t('mainpage_nodata')}} </li> </ul> </li> <li v-if="sysProjectManage"> <a :href="sysProjectManage.url" target='_blank' class="item" :title="sysProjectManage.name"> <i class="iconfont" :class="sysProjectManage.iconClass"></i> <span class="title">{{sysProjectManage.name}}</span> </a> </li> <template v-for="item in sysFuncMenus"> <li v-if="item.type!='split'"> <template v-if="item.type=='withNumTips'"> <div class="item" @click.prevent="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html||item.name"></span> <span class="pl-head-tipsNum" :hidden="!(item.tipNum&&item.tipNum!=0)">{{item.tipNum}}</span> </div> </template> <template v-else> <template v-if="item.children&&item.children.length"> <div class="item" @mouseenter="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html||item.name"></span> <i class="iconfont icon-arrow-down" v-if="item.children"></i> </div> </template> <template v-if="!item.children||item.children&&item.children.length==0"> <div class="item" @click.prevent="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html||item.name"></span> <i class="iconfont icon-arrow-down" v-if="item.children"></i> </div> </template> </template> </li> <li v-if="item.type=='split'"><div class="line"></div></li> </template> <!-- <li> <div class="item"> <div class="tip"> <i class="iconfont icon-user"></i> </div> <span class="title">{{this.$store.getters.userId}}/{{this.$store.getters.userName}}</span> <i class="iconfont icon-arrow-down"></i> </div> </li> <li><div class="line"></div></li> --> <!-- 用户信息 --> <li> <template v-if="sysUserInfo.children&&sysUserInfo.children.length"> <div class="item" @mouseenter="handleFuncMenus(sysUserInfo,$event)"> <div class="tip"> <i class="iconfont" :class="sysUserInfo.iconClass"></i> </div> <span class="title" v-html="sysUserInfo.html||sysUserInfo.name"></span> <i class="iconfont icon-arrow-down" v-if="sysUserInfo.children"></i> </div> </template> </li> <li><div class="line"></div></li> <li v-if="hasSetting"> <div class="item" :title="$lang('customWorkbench')||$t('mainpage_customWorkbench')"> <a href="#design" target='_blank'><i class="iconfont icon-set-fill"></i></a> </div> </li> <li> <div class="item" :title="$lang('logout')||$t('mainpage_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 allFuncMenu from './allFuncMenu' import {changeBz} from "@main/api/user"; import { removeToken } from '@main/utils/auth' import def_sy_loading from "@main/assets/logo_max.png" import def_sy_minLogo from "@main/assets/logo_min.png" import def_sy_logo from "@main/assets/logo.png" import def_sy_logo_horizon from "@main/assets/logo_horizon.png" export default { components:{ vueContextMenu, modifyPw, allFuncMenu, }, inject:['addTab','showTab','hideTab'], props:{ hasTitle:{ type: Boolean, }, logoWidth:{ type: String, } }, data(){ return { menuItems:[], searchWord:"", searchList:[], seldIndex:0, menuShow:false, searchMenusStyle:{ display:'none', left:0, top:0, width:0, // maxHeight:'50%', // overflow:'auto' }, sysListStyle:{ display:'none', left:0, top:0, }, latelyUseStyle:{ display:'none', left:0, top:0, maxHeight:'50%', overflow:'auto' }, def_sy_minLogo:def_sy_minLogo, def_sy_logo:def_sy_logo, def_sy_logo_horizon:def_sy_logo_horizon, numTipTimer:null, showAllFuncBtn:window.customSysCofig.isShowAllFunc===false?false:true, isShowAllFuncMenu:false, allFuncBtnObj:{}, } }, computed:{ hasSetting(){ let cfg = this.$store.state.app.config||{}; return cfg.sysSetTabs&&cfg.sysSetTabs.length; }, sysList(){ let cfg = this.$store.state.app.config||{}; return cfg.sysList||[]; }, sysUserInfo(){ let me=this; let cfg = this.$store.state.app.config||{}; function replaceData(str){ if(!str)return ['',false]; var _arr=str.match(/\${(\S*?)}/g); var nullNum=0; if(_arr&&_arr.length>0){ for(let i of _arr){ var _data=me.userInfo[i.match(/\${(\S*)}/)[1]]; if(typeof(_data)!="undefined"){ str=str.replace(i,_data); }else{ str=str.replace(i,me.$t('mainpage_header_null')); nullNum++; } } return [str,nullNum==_arr.length?false:true]; } return [str,true]; } //多岗信息文字模板format function orgBzTplFormat(str,item){ let fieldArr=str.match(/(?<=\${).*?(?=})/g); fieldArr.forEach((_i)=>{ if(typeof(item[_i])!="undefined"){ str=str.replaceAll("${"+_i+"}",item[_i]); } }); return str; } let _userInfo=cfg.userInfo; if(_userInfo){ _userInfo.name=replaceData(_userInfo.name)[0]; if(_userInfo.children&&_userInfo.children.length>0){ _userInfo.children=_userInfo.children.filter((item)=>{ let _rData=replaceData(item.name); item.name=_rData[0]; switch(item.type){ case "modifyUserInfo": item.handler=me.modifyUserInfo; break; case "modifyPw": item.handler=me.modifyPw; break; case "orgBz": if(Array.isArray(me.bzList)&&me.bzList.length>1){ item.children=[]; for(let i of me.bzList){ item.children.push({ iconClass:'icon-user', name:cfg.orgBzTpl?orgBzTplFormat(cfg.orgBzTpl,i):`${i.fbzname}/${i.fbzid}`, handler:function(){ me.__changeOrgBz(`${i.fbzid}`); } }); } } break; } if(_rData[1]){ return item; } }); } } return _userInfo||[]; }, sysProjectManage(){ let cfg = this.$store.state.app.config||{}; let item = cfg.sysProjectMange||{},flag=false; this.$store.state.app.powerList.forEach(p=>{ if(p.resUrl.indexOf(item.uri)>-1){ flag = true; return true; } }); if(flag){ return cfg.sysProjectMange; }else{ return null; } }, sysFuncMenus(){ let cfg = this.$store.state.app.config||{}; let menus = cfg.sysFuncMenus||[]; return menus; }, logoOpt(){ let cfg = this.$store.state.app.config||{}; return (this.layout=="level"&&cfg.sysLogoHorizon?cfg.sysLogoHorizon:cfg.sysLogo)||{}; }, MlogoOpt(){ let cfg = this.$store.state.app.config||{}; return cfg.MsysLogo||{}; }, 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.seldIndex=0; this.doSearch(newVal); } }, mounted(){ let me=this; document.addEventListener('click',me.hideSeachResult); me.$store.dispatch("app/getSysConfig"); me.sysFuncMenus.filter(item=>{ if(item.type=="withNumTips"&&item.numFunc){ function __intervalFunc(){ item.numFunc().then(res=>{ me.$set(item,"tipNum",res.num); if(res.num){ window.SysPage.notificationFunc(me.$t("mainpage_header_notification_title"),item.messageText(res),()=>{ me.handleFuncMenus(item); }); } }).catch(err=>{ clearInterval(me.numTipTimer); }); } clearInterval(me.numTipTimer); me.numTipTimer=setInterval(__intervalFunc,item.numIntervalTime||1000*30); __intervalFunc(); } }); me.allFuncBtnObj=(me.layout == 'level')&&me.showAllFuncBtn&&me.$refs.allFuncBtn.getBoundingClientRect(); }, 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(item.name){ 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'; this.searchMenusStyle.opacity = '1'; }, hideSeachResult(){ this.searchMenusStyle.display ='none'; }, handleChangeSys(item){ if(!item.url)return; if(item.target=="_blank"){ window.open(item.url) }else{ window.location.href=item.url; } }, handleShowSysList(){ this.sysListStyle.display ='block'; let s = this.$refs["dom-sysList"]; let rect = s.getBoundingClientRect(); this.sysListStyle.left = rect.left+'px'; this.sysListStyle.top = rect.top + rect.height +'px'; }, handleHideSysList(){ this.sysListStyle.display ='none'; }, handleFuncMenus(item,$event){ $event&&$event.stopPropagation(); if(item.type== "link"){ window.open(item.resUrl,item.name); return; } var _url=item.url; if(item.type== "widthToken"||item.type== "withToken"){ _url=item.url+"&access_token="+this.token; } if(item.url){ item.target=='tab'? this.addTab({ resUrl:_url, name:item.name, resId:item.id, openType:item.openType, }) : window.open(_url); return }else{ item.handler&&item.handler(); } if(item.children&&item.children.length){ this.menuItems = item.children; this.$refs['cmp-funcMenu'].open($event) } }, async handleLogout(){ await this.$store.dispatch("user/logout").then(()=>{ //removeToken(); if(window.HIVUI_SETTING.isSingleLogin&&window.HIVUI_SETTING.singleLogoutUrl){ location=window.HIVUI_SETTING.singleLogoutUrl; }else{ location=window.HIVUI_SETTING.loginUrl; } }); }, handleShowLatelyUse(){ this.$store.dispatch('app/getLatelyUse')//最近使用 let s = this.$refs["dom-latelyUse"]; let rect = s.getBoundingClientRect(); this.latelyUseStyle.display ='block'; this.latelyUseStyle.left = rect.left+'px'; this.latelyUseStyle.top = rect.top + rect.height +'px'; this.latelyUseStyle.opacity = '1'; }, handleHideLatelyUse(){ this.latelyUseStyle.display ='none'; }, handleOpenLatelyFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } this.addTab({ resUrl:item.resUrl, name:item.name, openType:item.openType, });//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(){ }, //全部功能弹窗 allFuncTrigger(){ let me=this; me.isShowAllFuncMenu=me.isShowAllFuncMenu?false:true; if(me.isShowAllFuncMenu){ me.$refs.allFuncMenu.showBox(); }else{ me.$refs.allFuncMenu.hideBox(); } }, allFuncTriggerOpen(){ let me=this; me.$refs.allFuncMenu.showBox(); }, allFuncTriggerClose(){ let me=this; me.$refs.allFuncMenu.hideBox(); }, } } </script> <style lang="less" scoped> .pl-header{ z-index: 99; } </style> <template> <div class="pl-header " :data-layout="layout"> <ul class="ltArea"> <li v-if="layout=='level'" class="logoStyle"> <div class="pl-logo"> <div v-if="hasTitle" @click="hideTitle(false)"> <img :src="def_sy_logo_horizon" :width="logoWidth" v-if="!logoOpt.src"> <img :src="logoOpt.src" :width="logoOpt.width?(logoOpt.width+'px'):(!logoOpt.height?logoWidth:null)" :height="logoOpt.height&&(logoOpt.height+'px')" :title="logoOpt.title" v-if="logoOpt.src"> </div> <div v-else @click="hideTitle(true)"> <img :src="def_sy_minLogo" v-if="!MlogoOpt.src"> <img :src="MlogoOpt.src" :width="MlogoOpt.width?(MlogoOpt.width+'px'):(!MlogoOpt.height?logoWidth:null)" :height="MlogoOpt.height&&(MlogoOpt.height+'px')" :title="MlogoOpt.title" v-if="MlogoOpt.src"> </div> </div> </li> <li v-else class="logoStyle"> <div class="pl-logo"> <img :src="def_sy_logo" :width="logoWidth" v-if="!logoOpt.src"> <img :src="logoOpt.src" :width="logoOpt.width?(logoOpt.width+'px'):(!logoOpt.height?logoWidth:null)" :height="logoOpt.height&&(logoOpt.height+'px')" :title="logoOpt.title" v-if="logoOpt.src"> </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}}</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'&&showAllFuncBtn" > <div class="sysTrigger"> <span ref="allFuncBtn" class="title" @mouseenter="allFuncTriggerOpen" @mouseleave="allFuncTriggerClose">{{$lang('allFunction')||'全部功能'}}</span> <i class="icon iconfont icon-arrow-down"></i> <allFuncMenu ref="allFuncMenu" :triggerObj="allFuncBtnObj" v-add2Body></allFuncMenu> </div> </li> </ul> <ul class="rtArea"> <li> <div class="pl-search" ref="dom-searchBox" > <input ref="dom-seachTxt" class="pl-search-text" type="text" :placeholder="$lang('searchKey')||'搜索关键字'" v-model.trim="searchWord" @keyup="handleSeachKeyUp" /> <i class="iconfont icon-search"></i> </div> <ul class="pl-menus pl-menus-sub pl-menus-pop" :style="searchMenusStyle" v-add2Body> <li :class="['pl-menus-item',seldIndex==index?'pl-menus-itemSeld':'']" v-for="item,index in searchList" style="width:100%" @click="openFunc(item)"> <a class="title"><span class="txt" v-html="item.html||item.name"></span></a> </li> <li v-show="searchList.length==0&&searchWord.length>0" class="pl-menus-tips"> {{$lang("noData")||"暂无数据"}} </li> </ul> </li> <li v-if="sysProjectManage"> <a :href="sysProjectManage.url" target='_blank' class="item" :title="sysProjectManage.name"> <i class="iconfont" :class="sysProjectManage.iconClass"></i> <span class="title">{{sysProjectManage.name}}</span> </a> </li> <template v-for="item in sysFuncMenus"> <li v-if="item.type!='split'"> <template v-if="item.type=='withNumTips'"> <div class="item" @click.prevent="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html||item.name"></span> <span class="pl-head-tipsNum" :hidden="!(item.tipNum&&item.tipNum!=0)">{{item.tipNum}}</span> </div> </template> <template v-else> <template v-if="item.children&&item.children.length"> <div class="item" @mouseenter="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html||item.name"></span> <i class="iconfont icon-arrow-down" v-if="item.children"></i> </div> </template> <template v-if="!item.children||item.children&&item.children.length==0"> <div class="item" @click.prevent="handleFuncMenus(item,$event)"> <div class="tip"> <i class="iconfont" :class="item.iconClass"></i> </div> <span class="title" v-html="item.html||item.name"></span> <i class="iconfont icon-arrow-down" v-if="item.children"></i> </div> </template> </template> </li> <li v-if="item.type=='split'"><div class="line"></div></li> </template> <!-- <li> <div class="item"> <div class="tip"> <i class="iconfont icon-user"></i> </div> <span class="title">{{this.$store.getters.userId}}/{{this.$store.getters.userName}}</span> <i class="iconfont icon-arrow-down"></i> </div> </li> <li><div class="line"></div></li> --> <!-- 用户信息 --> <li> <template v-if="sysUserInfo.children&&sysUserInfo.children.length"> <div class="item" @mouseenter="handleFuncMenus(sysUserInfo,$event)"> <div class="tip"> <i class="iconfont" :class="sysUserInfo.iconClass"></i> </div> <span class="title" v-html="sysUserInfo.html||sysUserInfo.name"></span> <i class="iconfont icon-arrow-down" v-if="sysUserInfo.children"></i> </div> </template> </li> <li><div class="line"></div></li> <li v-if="hasSetting"> <div class="item" :title="$lang('customWorkbench')||'自定义工作台'"> <a href="#design" target='_blank'><i class="iconfont icon-set-fill"></i></a> </div> </li> <li> <div class="item" :title="$lang('logout')||'退出系统'"> <a @click="handleLogout"><i class="iconfont icon-tuichu"></i></a> </div> </li> </ul> <vueContextMenu ref="cmp-funcMenu" :menu-items="menuItems" field="name"></vueContextMenu> <modifyPw></modifyPw> </div> </template> <script> import pinyin from 'js-pinyin';//ie 下有问题 编译不过 import vueContextMenu from "@main/components/contextMenu"; import modifyPw from "@main/views/layout/components/modifyPw"; import allFuncMenu from './allFuncMenu' import {changeBz} from "@main/api/user"; import { removeToken } from '@main/utils/auth' import def_sy_loading from "@main/assets/logo_max.png" import def_sy_minLogo from "@main/assets/logo_min.png" import def_sy_logo from "@main/assets/logo.png" import def_sy_logo_horizon from "@main/assets/logo_horizon.png" export default { components:{ vueContextMenu, modifyPw, allFuncMenu, }, inject:['addTab','showTab','hideTab'], props:{ hasTitle:{ type: Boolean, }, logoWidth:{ type: String, } }, data(){ return { menuItems:[], searchWord:"", searchList:[], seldIndex:0, menuShow:false, searchMenusStyle:{ display:'none', left:0, top:0, width:0, // maxHeight:'50%', // overflow:'auto' }, sysListStyle:{ display:'none', left:0, top:0, }, latelyUseStyle:{ display:'none', left:0, top:0, maxHeight:'50%', overflow:'auto' }, def_sy_minLogo:def_sy_minLogo, def_sy_logo:def_sy_logo, def_sy_logo_horizon:def_sy_logo_horizon, numTipTimer:null, showAllFuncBtn:window.customSysCofig.isShowAllFunc===false?false:true, isShowAllFuncMenu:false, allFuncBtnObj:{}, } }, computed:{ hasSetting(){ let cfg = this.$store.state.app.config||{}; return cfg.sysSetTabs&&cfg.sysSetTabs.length; }, sysList(){ let cfg = this.$store.state.app.config||{}; return cfg.sysList||[]; }, sysUserInfo(){ let me=this; let cfg = this.$store.state.app.config||{}; function replaceData(str){ if(!str)return ['',false]; var _arr=str.match(/\${(\S*?)}/g); var nullNum=0; if(_arr&&_arr.length>0){ for(let i of _arr){ var _data=me.userInfo[i.match(/\${(\S*)}/)[1]]; if(typeof(_data)!="undefined"){ str=str.replace(i,_data); }else{ str=str.replace(i,"空"); nullNum++; } } return [str,nullNum==_arr.length?false:true]; } return [str,true]; } //多岗信息文字模板format function orgBzTplFormat(str,item){ let fieldArr=str.match(/(?<=\${).*?(?=})/g); fieldArr.forEach((_i)=>{ if(typeof(item[_i])!="undefined"){ str=str.replaceAll("${"+_i+"}",item[_i]); } }); return str; } let _userInfo=cfg.userInfo; if(_userInfo){ _userInfo.name=replaceData(_userInfo.name)[0]; if(_userInfo.children&&_userInfo.children.length>0){ _userInfo.children=_userInfo.children.filter((item)=>{ let _rData=replaceData(item.name); item.name=_rData[0]; switch(item.type){ case "modifyUserInfo": item.handler=me.modifyUserInfo; break; case "modifyPw": item.handler=me.modifyPw; break; case "orgBz": if(Array.isArray(me.bzList)&&me.bzList.length>1){ item.children=[]; for(let i of me.bzList){ item.children.push({ iconClass:'icon-user', name:cfg.orgBzTpl?orgBzTplFormat(cfg.orgBzTpl,i):`${i.fbzname}/${i.fbzid}`, handler:function(){ me.__changeOrgBz(`${i.fbzid}`); } }); } } break; } if(_rData[1]){ return item; } }); } } return _userInfo||[]; }, sysProjectManage(){ let cfg = this.$store.state.app.config||{}; let item = cfg.sysProjectMange||{},flag=false; this.$store.state.app.powerList.forEach(p=>{ if(p.resUrl.indexOf(item.uri)>-1){ flag = true; return true; } }); if(flag){ return cfg.sysProjectMange; }else{ return null; } }, sysFuncMenus(){ let cfg = this.$store.state.app.config||{}; let menus = cfg.sysFuncMenus||[]; return menus; }, logoOpt(){ let cfg = this.$store.state.app.config||{}; return (this.layout=="level"&&cfg.sysLogoHorizon?cfg.sysLogoHorizon:cfg.sysLogo)||{}; }, MlogoOpt(){ let cfg = this.$store.state.app.config||{}; return cfg.MsysLogo||{}; }, 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.seldIndex=0; this.doSearch(newVal); } }, mounted(){ let me=this; document.addEventListener('click',me.hideSeachResult); me.$store.dispatch("app/getSysConfig"); me.sysFuncMenus.filter(item=>{ if(item.type=="withNumTips"&&item.numFunc){ function __intervalFunc(){ item.numFunc().then(res=>{ me.$set(item,"tipNum",res.num); if(res.num){ window.SysPage.notificationFunc("消息提示",item.messageText(res),()=>{ me.handleFuncMenus(item); }); } }).catch(err=>{ clearInterval(me.numTipTimer); }); } clearInterval(me.numTipTimer); me.numTipTimer=setInterval(__intervalFunc,item.numIntervalTime||1000*30); __intervalFunc(); } }); me.allFuncBtnObj=(me.layout == 'level')&&me.showAllFuncBtn&&me.$refs.allFuncBtn.getBoundingClientRect(); }, 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(item.name){ 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'; this.searchMenusStyle.opacity = '1'; }, hideSeachResult(){ this.searchMenusStyle.display ='none'; }, handleChangeSys(item){ if(!item.url)return; if(item.target=="_blank"){ window.open(item.url) }else{ window.location.href=item.url; } }, handleShowSysList(){ this.sysListStyle.display ='block'; let s = this.$refs["dom-sysList"]; let rect = s.getBoundingClientRect(); this.sysListStyle.left = rect.left+'px'; this.sysListStyle.top = rect.top + rect.height +'px'; }, handleHideSysList(){ this.sysListStyle.display ='none'; }, handleFuncMenus(item,$event){ $event&&$event.stopPropagation(); if(item.type== "link"){ window.open(item.resUrl,item.name); return; } var _url=item.url; if(item.type== "widthToken"||item.type== "withToken"){ _url=item.url+"&access_token="+this.token; } if(item.url){ item.target=='tab'? this.addTab({ resUrl:_url, name:item.name, resId:item.id, openType:item.openType, }) : window.open(_url); return }else{ item.handler&&item.handler(); } if(item.children&&item.children.length){ this.menuItems = item.children; this.$refs['cmp-funcMenu'].open($event) } }, async handleLogout(){ await this.$store.dispatch("user/logout").then(()=>{ //removeToken(); if(window.HIVUI_SETTING.isSingleLogin&&window.HIVUI_SETTING.singleLogoutUrl){ location=window.HIVUI_SETTING.singleLogoutUrl; }else{ location=window.HIVUI_SETTING.loginUrl; } }); }, handleShowLatelyUse(){ this.$store.dispatch('app/getLatelyUse')//最近使用 let s = this.$refs["dom-latelyUse"]; let rect = s.getBoundingClientRect(); this.latelyUseStyle.display ='block'; this.latelyUseStyle.left = rect.left+'px'; this.latelyUseStyle.top = rect.top + rect.height +'px'; this.latelyUseStyle.opacity = '1'; }, handleHideLatelyUse(){ this.latelyUseStyle.display ='none'; }, handleOpenLatelyFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } this.addTab({ resUrl:item.resUrl, name:item.name, openType:item.openType, });//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(){ }, //全部功能弹窗 allFuncTrigger(){ let me=this; me.isShowAllFuncMenu=me.isShowAllFuncMenu?false:true; if(me.isShowAllFuncMenu){ me.$refs.allFuncMenu.showBox(); }else{ me.$refs.allFuncMenu.hideBox(); } }, allFuncTriggerOpen(){ let me=this; me.$refs.allFuncMenu.showBox(); }, allFuncTriggerClose(){ let me=this; me.$refs.allFuncMenu.hideBox(); }, } } </script> <style lang="less" scoped> .pl-header{ z-index: 99; } </style>

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

<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="$t('mainpage_modifypw_oldpw')" :label-width="formLabelWidth" prop="oldPw"> <el-input ref="oldPw" type="password" v-model="formData.oldPw" autocomplete="off" :placeholder="$t('mainpage_modifypw_oldpw')" ></el-input> </el-form-item> <el-form-item :label="$t('mainpage_modifypw_newpw')" :label-width="formLabelWidth" prop="newPw"> <el-input ref="newPw" type="password" v-model="formData.newPw" autocomplete="off" @input="onChange" :placeholder="$t('mainpage_modifypw_newpw_ph')" ></el-input> </el-form-item> <el-progress :style="pwStrengthStyle()" :percentage="currPwStrength.num" :color="currPwStrength.color" :format="format"></el-progress> <el-form-item label="$t('mainpage_modifypw_newpw2')" :label-width="formLabelWidth" prop="newPw2"> <el-input ref="newPw2" type="password" v-model="formData.newPw2" autocomplete="off" :placeholder="$t('mainpage_modifypw_newpw2_ph')" ></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="cancel" :loading="dialogLoading">{{$t('mainpage_dialog_cancel')}}</el-button> <el-button type="primary" @click="submit" :loading="dialogLoading">{{$t('mainpage_dialog_define')}}</el-button> </div> </el-dialog> </template> <script> import { modifyPassword } from '@main/api/user' import md5 from "js-md5"; export default { data(){ var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error($t('mainpage_modifypw_valid_pw2_empty2'))); } else if (value !== this.formData.newPw) { callback(new Error($t('mainpage_modifypw_valid_pw2_msg'))); } else { callback(); } }; return { modalTitle:$t('mainpage_modifypw_title'), formLabelWidth:"100px", formData:{ oldPw:'', newPw:'', newPw2:'', }, dialogLoading:false, rules: { oldPw: [{ required: true, message: $t('mainpage_modifypw_oldpw'), trigger: "blur" }], newPw: [ { required: true, message: $t('mainpage_modifypw_valid_pw_empty'), trigger: "blur" }, { min:4,max:25, message: $t('mainpage_modifypw_newpw_ph'), trigger: "blur" }, ], newPw2: [ { required: true, message: $t('mainpage_modifypw_valid_pw2_empty'), trigger: "blur" }, { validator:validatePass, trigger: "blur" }, ], }, currPwStrength:{}, pwStrength:[ { num:33, desc:$t('mainpage_modifypw_weak'), color:'#f56c6c', }, { num:66, desc:$t('mainpage_modifypw_middle'), color:'#e6a23c', }, { num:100, desc:$t('mainpage_modifypw_strong'), color:'#67c23a', }, ], }; }, computed:{ showDialog(){ return this.$store.getters.showPwDialog; }, }, mounted(){ }, methods:{ submit(){ this.$refs.form.validate((valid) => { if(valid){ modifyPassword({ oldPwd:md5(this.formData.oldPw), newPwd:md5(this.formData.newPw), }).then(res=>{ this.$store.dispatch("user/showPwDialog",false); this.dialogLoading=false; this.formData={ oldPw:'', newPw:'', newPw2:'', }; this.$message({ type:"success", message:$t('mainpage_modifypw_success') }); setTimeout(()=>{ this.$store.dispatch("user/logout").then(()=>{ location=window.HIVUI_SETTING.loginUrl; }); },1500); }); }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> <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' import md5 from "js-md5"; 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:md5(this.formData.oldPw), newPwd:md5(this.formData.newPw), }).then(res=>{ this.$store.dispatch("user/showPwDialog",false); this.dialogLoading=false; this.formData={ oldPw:'', newPw:'', newPw2:'', }; this.$message({ type:"success", message:"修改成功！请重新登录" }); setTimeout(()=>{ this.$store.dispatch("user/logout").then(()=>{ location=window.HIVUI_SETTING.loginUrl; }); },1500); }); }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/navbar/index.vue

<template> <div class="pl-navbar" ref="nav"> <div class="allFunc" v-if="showAllFuncBtn"> <span ref="allFuncBtn" class="title" @mouseenter="allFuncTriggerOpen" @mouseleave="allFuncTriggerClose">{{$lang('allFunction')||$t('mainpage_allFunction')}}</span> <i class="icon iconfont icon-arrow-down"></i> <allFuncMenu ref="allFuncMenu" :triggerObj="allFuncBtnObj" v-add2Body></allFuncMenu> </div> <div class="history" ref="dom-latelyUse" :title="$lang('recentlyUsed')||$t('mainpage_recentlyUsed')" @mouseenter="handleShowLatelyUse" @mouseleave="handleHideLatelyUse"> <i class="icon iconfont icon-time"></i> <span class="title">{{$lang('recentlyUsed')||$t('mainpage_recentlyUsed')}}</span> <i class="icon iconfont icon-arrow-down"></i> </div> <div class="menusArea pl-cl" :class="isMenuArrBtn?'hasMenusBtn':''"> <i v-show="isMenuArrBtn" ref="scrollRtBtn" class="arrRt iconfont icon-arrow-right-circle" @mousedown="handleRtMenuScroll" @mouseup="handleMenuScrollEnd" @mouseleave="handleMenuScrollEnd"></i> <i v-show="isMenuArrBtn" ref="scrollLtBtn" class="arrLt iconfont icon-arrow-left-circle" @mousedown="handleLtMenuScroll" @mouseup="handleMenuScrollEnd" @mouseleave="handleMenuScrollEnd"></i> <div class="scroll" ref="domSrcoll"> <p-menu ref="pmenu" mode="horizontal" style="margin:0"> <template v-for="(item,index) in menus" > <p-menu-item v-if="item.isShow&&!(item.children&&item.children.length)" :icon="item.iconClass" @click="handleOpenFunc(item)">{{item.name}}</p-menu-item> <nav-sub-menus :menuitem="item" v-if="item.isShow&&item.children&&item.children.length"></nav-sub-menus> </template> </p-menu> </div> </div> <!-- <ul class="pl-menus pl-menus-horizontal"> <li class="pl-menus-item" v-for="(item,index) in menus"> <a class=""> <i class="icon"></i> <span class="title">{{item.title}}</span> </a> </li> </ul> --> <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')||$t('mainpage_nodata')}} </li> </ul> </div> </template> <script> import {PMenu,PSubMenu,PMenuItem} from '../menus' import allFuncMenu from '../allFuncMenu' import NavSubMenus from './menus' import screenfull from 'screenfull' export default { inject:['addTab'], components:{ PMenu,PSubMenu,PMenuItem,NavSubMenus,allFuncMenu }, data(){ return { menuScrollTimer:null, isMenuArrBtn:false, latelyUseStyle:{ display:'none', left:0, top:0, maxHeight:'50%', overflow:'auto' }, showAllFuncBtn:window.customSysCofig.isShowAllFunc===false?false:true, isShowAllFuncMenu:false, allFuncBtnObj:{}, }; }, computed:{ menus(){ return this.$store.getters.menus; }, navsLatelyUse(){ return this.$store.getters.navsLatelyUse; } }, mounted(){ this.resize(); window.addEventListener('resize',this.resize); this.allFuncBtnObj=this.showAllFuncBtn&&this.$refs.allFuncBtn.getBoundingClientRect(); }, methods:{ resize(){ if (!screenfull.isFullscreen && this.$refs.pmenu.$el) { setTimeout(() => { let c = this.$refs.pmenu.$el.children,w=0; // console.log('---c--', c) for(let i=c.length-1;i>=0;i--){ // console.log('---c[i]', c[i].offsetWidth) w+=c[i].offsetWidth; } // console.log('offsetWidth', w) this.$refs.pmenu.$el.style.width=`${w+2}px`; this.isMenuArrBtn = this.$refs.domSrcoll.offsetWidth<w; this.scrollBtnStatus(); }, 50); } }, handleOpenLatelyFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } this.addTab({ resUrl:item.resUrl, name:item.name, openType:item.openType, });//inject 提供的方法只能 传一个参数 }, handleOpenFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name,item.resId)//,item.resId this.addTab(item);//inject 提供的方法只能 传一个参数 }, handleShowLatelyUse(){ this.$store.dispatch('app/getLatelyUse')//最近使用 let s = this.$refs["dom-latelyUse"]; let rect = s.getBoundingClientRect(); this.latelyUseStyle.display ='block'; this.latelyUseStyle.left = rect.left+'px'; this.latelyUseStyle.top = rect.top + rect.height +'px'; this.latelyUseStyle.opacity = '1'; }, handleHideLatelyUse(){ this.latelyUseStyle.display ='none'; }, handleLtMenuScroll(){ this.handleMenuScrollEnd(); this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft-30; this.menuScrollTimer = setInterval(()=>{ this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft-10; this.scrollBtnStatus(); },50); this.scrollBtnStatus(); }, handleRtMenuScroll(){ this.handleMenuScrollEnd(); this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft+30; this.menuScrollTimer = setInterval(()=>{ this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft+10; this.scrollBtnStatus(); },50); this.scrollBtnStatus(); }, handleMenuScrollEnd(){ clearInterval(this.menuScrollTimer); }, scrollBtnStatus(){ if(!(this.$refs.scrollLtBtn||this.$refs.scrollRtBtn)){ return; } if(this.$refs.domSrcoll.scrollLeft==0){ this.$refs.scrollLtBtn.style.opacity=0.3; }else{ this.$refs.scrollLtBtn.style.opacity=1; } if(this.$refs.domSrcoll.scrollLeft>=this.$refs.pmenu.$el.offsetWidth-this.$refs.domSrcoll.offsetWidth-1){ this.$refs.scrollRtBtn.style.opacity=0.3; }else{ this.$refs.scrollRtBtn.style.opacity=1; } }, //全部功能弹窗 allFuncTrigger(){ let me=this; me.isShowAllFuncMenu=me.isShowAllFuncMenu?false:true; if(me.isShowAllFuncMenu){ me.$refs.allFuncMenu.showBox(); }else{ me.$refs.allFuncMenu.hideBox(); } }, allFuncTriggerOpen(){ let me=this; me.$refs.allFuncMenu.showBox(); }, allFuncTriggerClose(){ let me=this; me.$refs.allFuncMenu.hideBox(); }, } } </script> <template> <div class="pl-navbar" ref="nav"> <div class="allFunc" v-if="showAllFuncBtn"> <span ref="allFuncBtn" class="title" @mouseenter="allFuncTriggerOpen" @mouseleave="allFuncTriggerClose">{{$lang('allFunction')||'全部功能'}}</span> <i class="icon iconfont icon-arrow-down"></i> <allFuncMenu ref="allFuncMenu" :triggerObj="allFuncBtnObj" v-add2Body></allFuncMenu> </div> <div class="history" 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> <div class="menusArea pl-cl" :class="isMenuArrBtn?'hasMenusBtn':''"> <i v-show="isMenuArrBtn" ref="scrollRtBtn" class="arrRt iconfont icon-arrow-right-circle" @mousedown="handleRtMenuScroll" @mouseup="handleMenuScrollEnd" @mouseleave="handleMenuScrollEnd"></i> <i v-show="isMenuArrBtn" ref="scrollLtBtn" class="arrLt iconfont icon-arrow-left-circle" @mousedown="handleLtMenuScroll" @mouseup="handleMenuScrollEnd" @mouseleave="handleMenuScrollEnd"></i> <div class="scroll" ref="domSrcoll"> <p-menu ref="pmenu" mode="horizontal" style="margin:0"> <template v-for="(item,index) in menus" > <p-menu-item v-if="item.isShow&&!(item.children&&item.children.length)" :icon="item.iconClass" @click="handleOpenFunc(item)">{{item.name}}</p-menu-item> <nav-sub-menus :menuitem="item" v-if="item.isShow&&item.children&&item.children.length"></nav-sub-menus> </template> </p-menu> </div> </div> <!-- <ul class="pl-menus pl-menus-horizontal"> <li class="pl-menus-item" v-for="(item,index) in menus"> <a class=""> <i class="icon"></i> <span class="title">{{item.title}}</span> </a> </li> </ul> --> <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> </div> </template> <script> import {PMenu,PSubMenu,PMenuItem} from '../menus' import allFuncMenu from '../allFuncMenu' import NavSubMenus from './menus' import screenfull from 'screenfull' export default { inject:['addTab'], components:{ PMenu,PSubMenu,PMenuItem,NavSubMenus,allFuncMenu }, data(){ return { menuScrollTimer:null, isMenuArrBtn:false, latelyUseStyle:{ display:'none', left:0, top:0, maxHeight:'50%', overflow:'auto' }, showAllFuncBtn:window.customSysCofig.isShowAllFunc===false?false:true, isShowAllFuncMenu:false, allFuncBtnObj:{}, }; }, computed:{ menus(){ return this.$store.getters.menus; }, navsLatelyUse(){ return this.$store.getters.navsLatelyUse; } }, mounted(){ this.resize(); window.addEventListener('resize',this.resize); this.allFuncBtnObj=this.showAllFuncBtn&&this.$refs.allFuncBtn.getBoundingClientRect(); }, methods:{ resize(){ if (!screenfull.isFullscreen && this.$refs.pmenu.$el) { setTimeout(() => { let c = this.$refs.pmenu.$el.children,w=0; // console.log('---c--', c) for(let i=c.length-1;i>=0;i--){ // console.log('---c[i]', c[i].offsetWidth) w+=c[i].offsetWidth; } // console.log('offsetWidth', w) this.$refs.pmenu.$el.style.width=`${w+2}px`; this.isMenuArrBtn = this.$refs.domSrcoll.offsetWidth<w; this.scrollBtnStatus(); }, 50); } }, handleOpenLatelyFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } this.addTab({ resUrl:item.resUrl, name:item.name, openType:item.openType, });//inject 提供的方法只能 传一个参数 }, handleOpenFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name,item.resId)//,item.resId this.addTab(item);//inject 提供的方法只能 传一个参数 }, handleShowLatelyUse(){ this.$store.dispatch('app/getLatelyUse')//最近使用 let s = this.$refs["dom-latelyUse"]; let rect = s.getBoundingClientRect(); this.latelyUseStyle.display ='block'; this.latelyUseStyle.left = rect.left+'px'; this.latelyUseStyle.top = rect.top + rect.height +'px'; this.latelyUseStyle.opacity = '1'; }, handleHideLatelyUse(){ this.latelyUseStyle.display ='none'; }, handleLtMenuScroll(){ this.handleMenuScrollEnd(); this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft-30; this.menuScrollTimer = setInterval(()=>{ this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft-10; this.scrollBtnStatus(); },50); this.scrollBtnStatus(); }, handleRtMenuScroll(){ this.handleMenuScrollEnd(); this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft+30; this.menuScrollTimer = setInterval(()=>{ this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft+10; this.scrollBtnStatus(); },50); this.scrollBtnStatus(); }, handleMenuScrollEnd(){ clearInterval(this.menuScrollTimer); }, scrollBtnStatus(){ if(!(this.$refs.scrollLtBtn||this.$refs.scrollRtBtn)){ return; } if(this.$refs.domSrcoll.scrollLeft==0){ this.$refs.scrollLtBtn.style.opacity=0.3; }else{ this.$refs.scrollLtBtn.style.opacity=1; } if(this.$refs.domSrcoll.scrollLeft>=this.$refs.pmenu.$el.offsetWidth-this.$refs.domSrcoll.offsetWidth-1){ this.$refs.scrollRtBtn.style.opacity=0.3; }else{ this.$refs.scrollRtBtn.style.opacity=1; } }, //全部功能弹窗 allFuncTrigger(){ let me=this; me.isShowAllFuncMenu=me.isShowAllFuncMenu?false:true; if(me.isShowAllFuncMenu){ me.$refs.allFuncMenu.showBox(); }else{ me.$refs.allFuncMenu.hideBox(); } }, allFuncTriggerOpen(){ let me=this; me.$refs.allFuncMenu.showBox(); }, allFuncTriggerClose(){ let me=this; me.$refs.allFuncMenu.hideBox(); }, } } </script>

Ignore Space Show notes View project/hivuiMain/views/layout/components/tabpanel/contextMenu.jsx

const drpMenus={ name:'PTabitem', props:{ }, // inject:[''], data(){ return { menuStyle:{ right:0, left:'initial', top:0, display:'none', overflow:'auto', maxHeight:'50%' } } }, mounted(){ document.body.appendChild(this.$el); document.addEventListener('click',this.hide) }, beforeDestroy(){ this.$el.remove(); document.removeEventListener('click',this.hide) }, methods:{ show(y){ if(y){ this.menuStyle.top=(y||0)+'px'; } this.menuStyle.display='block' }, hide(){ this.menuStyle.display='none' } }, render(h){ const Props={ style:this.menuStyle, on:{ mouseout:()=>{this.hide()}, mouseover:()=>{this.show()} } } return ( <ul class="pl-menus pl-menus-inline pl-menus-sub pl-menus-pop" {...Props}> <li class="pl-menus-item"> <a class="title"> <i class="icon iconfont "></i> <span class="txt">{$lang('refresh')||$t('mainpage_tab_ctxmenu_refresh')}</span> </a> </li> <li class="pl-menus-item"> <a class="title"> <i class="icon iconfont "></i> <span class="txt">{$lang('closeOther')||$t('mainpage_tab_ctxmenu_closeother')}</span> </a> </li> <li class="pl-menus-item"> <a class="title"> <i class="icon iconfont "></i> <span class="txt">{$lang('closeLeft')||$t('mainpage_tab_ctxmenu_closeleft')}</span> </a> </li> <li class="pl-menus-item"> <a class="title"> <i class="icon iconfont "></i> <span class="txt">{$lang('closeRight')||$t('mainpage_tab_ctxmenu_closeright')}</span> </a> </li> <li class="pl-menus-item"> <a class="title"> <i class="icon iconfont "></i> <span class="txt">{$lang('closeAll')||$t('mainpage_tab_ctxmenu_closeall')}</span> </a> </li> </ul> ) } } export default drpMenus; const drpMenus={ name:'PTabitem', props:{ }, // inject:[''], data(){ return { menuStyle:{ right:0, left:'initial', top:0, display:'none', overflow:'auto', maxHeight:'50%' } } }, mounted(){ document.body.appendChild(this.$el); document.addEventListener('click',this.hide) }, beforeDestroy(){ this.$el.remove(); document.removeEventListener('click',this.hide) }, methods:{ show(y){ if(y){ this.menuStyle.top=(y||0)+'px'; } this.menuStyle.display='block' }, hide(){ this.menuStyle.display='none' } }, render(h){ const Props={ style:this.menuStyle, on:{ mouseout:()=>{this.hide()}, mouseover:()=>{this.show()} } } return ( <ul class="pl-menus pl-menus-inline pl-menus-sub pl-menus-pop" {...Props}> <li class="pl-menus-item"> <a class="title"> <i class="icon iconfont "></i> <span class="txt">{$lang('refresh')||'刷新'}</span> </a> </li> <li class="pl-menus-item"> <a class="title"> <i class="icon iconfont "></i> <span class="txt">{$lang('closeOther')||'关闭其它'}</span> </a> </li> <li class="pl-menus-item"> <a class="title"> <i class="icon iconfont "></i> <span class="txt">{$lang('closeLeft')||'关闭左侧'}</span> </a> </li> <li class="pl-menus-item"> <a class="title"> <i class="icon iconfont "></i> <span class="txt">{$lang('closeRight')||'关闭右侧'}</span> </a> </li> <li class="pl-menus-item"> <a class="title"> <i class="icon iconfont "></i> <span class="txt">{$lang('closeAll')||'关闭所有'}</span> </a> </li> </ul> ) } } export default drpMenus;

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

<script> import vueContextMenu from "@main/components/contextMenu"; function noop() {} export default { props:{ panels:Array, onTabClick: { type: Function, default: noop }, onTabRemove: { type: Function, default: noop }, onTabCloseAll: { type: Function, default: noop } }, data(){ return { curContextMenuName:'',//右击tab curContextMenuIndex:null } }, methods:{ resize(){ let tabWidth=0; let children = this.$el.querySelectorAll('li'); Array.prototype.map.call(children, function (el, index, list) { let rct = el.getBoundingClientRect(); tabWidth += rct.width; }); this.$el.style.width = (tabWidth+2)+'px'; let id = this.$parent.currentName; if (this.$refs[id] == null) return; let scrollLeft = this.$refs[id].offsetLeft, scrollArea = this.$refs[id].parentNode.parentNode.parentNode; if (scrollArea.offsetWidth < scrollLeft) { scrollArea.scrollLeft = scrollLeft; } else if (scrollArea.scrollLeft > scrollLeft) { scrollArea.scrollLeft = scrollLeft; } }, onClose(panel,e){ e.stopPropagation(); if(panel.$listeners&&panel.$listeners.onBeforeClose(panel,e)===false){ return; } this.$emit('onTabClose',panel.name); }, onActive(panel,evt){ panel.$listeners&&panel.$listeners.onSelected(panel,evt) this.$emit('onTabChange',panel.name); }, onContextMenu(panel,index,e) { e.preventDefault() this.curContextMenuName = panel.name; this.curContextMenuIndex = index, this.$refs['cmp-tabContextMenu'].open(e); }, handleContextMenuRefresh() { let panel = this.panels[this.curContextMenuIndex]; if(panel){ let ifm = panel.$el.querySelector('iframe'); if (ifm&&ifm.src&&ifm.src.indexOf('about:blank')==-1) { ifm.contentWindow.window.location.reload(); } } }, handleContextMenuClose(e) { // e.stopPropagation(); let panel = this.panels[this.curContextMenuIndex]; if(panel.$listeners&&panel.$listeners.onBeforeClose(panel,e)===false){ return; } this.$emit('onTabClose',panel.name); }, handleContextMenuCloseAll(e) { this.$emit('onTabCloseAll'); }, handleContextMenuCloseRt() { this.$emit('onTabCloseRt',this.curContextMenuName,this.curContextMenuIndex); }, handleContextMenuCloseLt() { this.$emit('onTabCloseLt',this.curContextMenuName,this.curContextMenuIndex); }, handleContextMenuCloseOt() { this.$emit('onTabCloseOt',this.curContextMenuName,this.curContextMenuIndex); } }, render(h){ let { $lang, onClose, onActive, onContextMenu }=this; let tabs = this._l(this.panels,(panel,index)=>{ const nodeProps = { class:{ ['pl-tabs-item']:1, ['pl-tabs-itemSeld']:panel.name == this.$parent.currentName }, attrs:{ id:'tab_'+panel.name } }; const closeTpl = ( <i class="pl-tabs-itemClose iconfont icon-close" on-click={(ev) => { onClose(panel, ev); }}></i> ) return ( <li ref={panel.name} on-contextmenu={(ev) => { onContextMenu(panel,index, ev); }}> <div {...nodeProps} on-click={(ev) => {onActive(panel, ev); }}> <span class="pl-tabs-itemTxt sys-tab-item-text">{panel.title}</span> {(panel.close===""||panel.close===true)&&closeTpl} </div> </li> ) }); const ctxMenuProp = { props: { ['menu-items']: [ { title: $lang('refresh')||$t('mainpage_tab_ctxmenu_refresh'), iconClass: 'icon-refresh', handler: this.handleContextMenuRefresh, }, { title: $lang('close')||$t('mainpage_tab_ctxmenu_close'), iconClass: 'icon-close-circle', handler: this.handleContextMenuClose, }, { title: $lang('closeLeft')||$t('mainpage_tab_ctxmenu_closeleft'), iconClass: 'icon-arrow-leftMore-circle', handler: this.handleContextMenuCloseLt, }, { title: $lang('closeRight')||$t('mainpage_tab_ctxmenu_closeright'), iconClass: 'icon-arrow-rightMore-circle', handler: this.handleContextMenuCloseRt, }, { title: $lang('closeOther')||$t('mainpage_tab_ctxmenu_closeother'), iconClass: 'icon-closeOther', handler: this.handleContextMenuCloseOt, }, { title: $lang('closeAll')||$t('mainpage_tab_ctxmenu_closeall'), iconClass: 'icon-closeAll', handler: this.handleContextMenuCloseAll, }, ] } }; return ( <div> <ul>{tabs}</ul> <vueContextMenu ref="cmp-tabContextMenu" {...ctxMenuProp}></vueContextMenu> </div> ) }, updated(){ this.$parent.resize(); } } </script> <script> import vueContextMenu from "@main/components/contextMenu"; function noop() {} export default { props:{ panels:Array, onTabClick: { type: Function, default: noop }, onTabRemove: { type: Function, default: noop }, onTabCloseAll: { type: Function, default: noop } }, data(){ return { curContextMenuName:'',//右击tab curContextMenuIndex:null } }, methods:{ resize(){ let tabWidth=0; let children = this.$el.querySelectorAll('li'); Array.prototype.map.call(children, function (el, index, list) { let rct = el.getBoundingClientRect(); tabWidth += rct.width; }); this.$el.style.width = (tabWidth+2)+'px'; let id = this.$parent.currentName; if (this.$refs[id] == null) return; let scrollLeft = this.$refs[id].offsetLeft, scrollArea = this.$refs[id].parentNode.parentNode.parentNode; if (scrollArea.offsetWidth < scrollLeft) { scrollArea.scrollLeft = scrollLeft; } else if (scrollArea.scrollLeft > scrollLeft) { scrollArea.scrollLeft = scrollLeft; } }, onClose(panel,e){ e.stopPropagation(); if(panel.$listeners&&panel.$listeners.onBeforeClose(panel,e)===false){ return; } this.$emit('onTabClose',panel.name); }, onActive(panel,evt){ panel.$listeners&&panel.$listeners.onSelected(panel,evt) this.$emit('onTabChange',panel.name); }, onContextMenu(panel,index,e) { e.preventDefault() this.curContextMenuName = panel.name; this.curContextMenuIndex = index, this.$refs['cmp-tabContextMenu'].open(e); }, handleContextMenuRefresh() { let panel = this.panels[this.curContextMenuIndex]; if(panel){ let ifm = panel.$el.querySelector('iframe'); if (ifm&&ifm.src&&ifm.src.indexOf('about:blank')==-1) { ifm.contentWindow.window.location.reload(); } } }, handleContextMenuClose(e) { // e.stopPropagation(); let panel = this.panels[this.curContextMenuIndex]; if(panel.$listeners&&panel.$listeners.onBeforeClose(panel,e)===false){ return; } this.$emit('onTabClose',panel.name); }, handleContextMenuCloseAll(e) { this.$emit('onTabCloseAll'); }, handleContextMenuCloseRt() { this.$emit('onTabCloseRt',this.curContextMenuName,this.curContextMenuIndex); }, handleContextMenuCloseLt() { this.$emit('onTabCloseLt',this.curContextMenuName,this.curContextMenuIndex); }, handleContextMenuCloseOt() { this.$emit('onTabCloseOt',this.curContextMenuName,this.curContextMenuIndex); } }, render(h){ let { $lang, onClose, onActive, onContextMenu }=this; let tabs = this._l(this.panels,(panel,index)=>{ const nodeProps = { class:{ ['pl-tabs-item']:1, ['pl-tabs-itemSeld']:panel.name == this.$parent.currentName }, attrs:{ id:'tab_'+panel.name } }; const closeTpl = ( <i class="pl-tabs-itemClose iconfont icon-close" on-click={(ev) => { onClose(panel, ev); }}></i> ) return ( <li ref={panel.name} on-contextmenu={(ev) => { onContextMenu(panel,index, ev); }}> <div {...nodeProps} on-click={(ev) => {onActive(panel, ev); }}> <span class="pl-tabs-itemTxt sys-tab-item-text">{panel.title}</span> {(panel.close===""||panel.close===true)&&closeTpl} </div> </li> ) }); const ctxMenuProp = { props: { ['menu-items']: [ { title: $lang('refresh')||'刷新', iconClass: 'icon-refresh', handler: this.handleContextMenuRefresh, }, { title: $lang('close')||'关闭', iconClass: 'icon-close-circle', handler: this.handleContextMenuClose, }, { title: $lang('closeLeft')||'关闭左侧', iconClass: 'icon-arrow-leftMore-circle', handler: this.handleContextMenuCloseLt, }, { title: $lang('closeRight')||'关闭右侧', iconClass: 'icon-arrow-rightMore-circle', handler: this.handleContextMenuCloseRt, }, { title: $lang('closeOther')||'关闭其它', iconClass: 'icon-closeOther', handler: this.handleContextMenuCloseOt, }, { title: $lang('closeAll')||'关闭所有', iconClass: 'icon-closeAll', handler: this.handleContextMenuCloseAll, }, ] } }; return ( <div> <ul>{tabs}</ul> <vueContextMenu ref="cmp-tabContextMenu" {...ctxMenuProp}></vueContextMenu> </div> ) }, updated(){ this.$parent.resize(); } } </script>

Ignore Space Show notes View project/hivuiMain/views/layout/components/tabpanel/tabs.jsx

import findIndex from 'lodash/findIndex' import Panel from './panel.vue' import TabNav from './tabNav.jsx' // import Tab from './item' import DrpMenus from './drpMenus' const Tabs = { name: 'PTabs', props: { value: {} }, watch: { value(value) { // let id = 'tab_' + value; // let id =value; // this.$nextTick(r => { // debugger // let tabObj = this.$refs['TabNavs']; // if (tabObj.$refs[id] == null) return; // let scrollLeft = tabObj.$refs[id].$el.offsetLeft, // scrollArea = tabObj.$refs[id].$el.parentNode.parentNode; // if (scrollArea.offsetWidth < scrollLeft) { // scrollArea.scrollLeft = scrollLeft; // } else if (scrollArea.scrollLeft > scrollLeft) { // scrollArea.scrollLeft = scrollLeft; // } // }); this.setCurrentName(value) } }, data() { return { currentName: this.value || this.activeName, contextMenuKey: null, scrollStep: 115, showScroll: false, panels: [] } }, created() { this.$on('tab-nav-update', this.calcPaneInstances.bind(null, true)); }, mounted() { this.calcPaneInstances(); window.addEventListener('resize',this.resize); }, updated() { this.calcPaneInstances(); }, beforeDestroy() { window.removeEventListener('resize',this.resize); }, methods: { setCurrentName(value) { this.currentName = value; //绑定提是v-model所以这里要加一下，这样可以对 props 传进来的value 进行改变 this.$emit('input', value); }, calcPaneInstances() { //收集插槽里头的组件实例，以重新渲染 if (this.$slots.default) { const panelslots = this.$slots.default.filter(vnode => vnode.tag && vnode.componentOptions && vnode.componentOptions.Ctor.options.name === 'PTabpanel'); // update indeed const panels = panelslots.map(({ componentInstance }) => componentInstance); const panelsChanged = !(panels.length === this.panels.length && panels.every((pane, index) => pane === this.panels[index])); if (panelsChanged) { this.panels = panels; } } else if (this.panels.length !== 0) { this.panels = []; } }, closeItem(key) { let me = this; me.$emit('onRemoveTab', key); me.resize(); }, closeCurItem() { this.closeItem(this.currentName); }, getItemIndex(name) { let index = findIndex(this.panels, item => { return item.name == name; }); return index; }, getItem(name) { let index = findIndex(this.panels, item => { return item.name == name; }); if (index > -1) { return this.panels[index]; } return null; }, getItemObj(name) { let panel = this.getItem(name); if (panel == null) return null; return { //.$refs['TabNavs'] tabEl: this.$el.querySelector('#tab_'+name),//null tabPanelEl: panel.$el, tabPanelIframeEl: panel.$el.querySelector('iframe') }; }, getSeldItemObj() { return this.getItemObj(this.currentName); }, resize() { this.$refs['TabNavs'].resize(); this.$refs['domTabBody'].style.height = this.$el.offsetHeight - this.$refs['domTabHead'].offsetHeight + 'px'; let tabScroll = this.$refs['domTabScroll']; this.showScroll = tabScroll.offsetWidth < tabScroll.scrollWidth; }, handleShowDrpMenus(evt) { evt.stopPropagation(); const rects = evt.currentTarget.getClientRects()[0]; this.$refs['cmp-drpMenus'].show(rects.top + rects.height); }, handleHideDrpMenus() { this.$refs['cmp-drpMenus'].hide(); }, handleMoreMenuClick(vm, event) { // this.activeKey = vm.$el.getAttribute('alt'); this.resize(); }, handleScrollLt(step) { let el = this.$refs['domTabScroll']; el.scrollLeft = el.scrollLeft - (step || this.scrollStep); }, handleScrollLtMouseDown() { let me = this; me.scrollPressTimer = setInterval(function () { me.handleScrollLt(10); }, 10); }, handleScrollLtMouseUp() { clearInterval(this.scrollPressTimer); }, handleScrollRt(step) { let el = this.$refs['domTabScroll']; el.scrollLeft = el.scrollLeft + (step || this.scrollStep); }, handleScrollRtMouseDown() { let me = this; me.scrollPressTimer = setInterval(function () { me.handleScrollRt(10); }, 10); }, handleScrollRtMouseUp() { clearInterval(this.scrollPressTimer); }, handleTabChange(name) { this.setCurrentName(name); }, handleTabClose(name) { this.closeItem(name); this.$refs['TabNavs'].$forceUpdate(); }, handleTabCloseAll(){ this.$emit('onRemoveAllTab'); this.$refs['TabNavs'].$forceUpdate(); this.resize(); }, handleTabCloseLt(name,index){ this.$emit('onRemoveLeft',name,index); this.$refs['TabNavs'].$forceUpdate(); this.resize(); }, handleTabCloseRt(name,index){ this.$emit('onRemoveRight',name,index); this.$refs['TabNavs'].$forceUpdate(); this.resize(); }, handleTabCloseOt(name,index){ this.$emit('onRemoveOther',name,index); this.$refs['TabNavs'].$forceUpdate(); this.resize(); }, handleFullScreen(){ this.$emit('onFullScreen') } }, render(h) { let children = this.panels; let navData={ props:{ panels:children }, on:{ onTabChange: this.handleTabChange, onTabClose: this.handleTabClose, onTabCloseAll: this.handleTabCloseAll, onTabCloseLt:this.handleTabCloseLt, onTabCloseRt:this.handleTabCloseRt, onTabCloseOt:this.handleTabCloseOt, onTabCloseOt:this.handleTabCloseOt, onFullScreen: this.handleFullScreen }, ref:'domTabSrcollInner' }; let scrollLtBtn = { style: { display: this.showScroll ? 'inline-block' : 'none' }, on: { //click:this.handleScrollLt, mousedown: this.handleScrollLtMouseDown, mouseup: this.handleScrollLtMouseUp, } }, scrollRtBtn = { style: { display: this.showScroll ? 'inline-block' : 'none' }, on: { //click:this.handleScrollRt, mousedown: this.handleScrollRtMouseDown, mouseup: this.handleScrollRtMouseUp, } }, moreBtn = { on: { mouseover: this.handleShowDrpMenus, mouseout: this.handleHideDrpMenus } }, drpMenus = { props: { children: children }, on: { click: this.handleMoreMenuClick, onTabChange: this.handleTabChange, onTabClose: this.handleTabClose } }, hideSty = { on: { mouseover: this.hideTab, mouseout: this.show, click: ()=>{alert(12313)} } }; return ( <div class="pl-tabs"> <div class="pl-tabs-hd" ref='domTabHead' {...hideSty}> <div class="pl-tabs-tool" ref='domTabTool'> <div class="item" title={$lang('scrollLeft')||$t('mainpage_tab_scroll_lt')} ref='domTabScrollLt' {...scrollLtBtn}> <i class="iconfont icon-arrow-left"></i> </div> <div class="item" title={$lang('scrollRight')||$t('mainpage_tab_scroll_rt')} ref='domTabScrollRt' {...scrollRtBtn}> <i class="iconfont icon-arrow-right"></i> </div> <div class="item" title={$lang('more')||$t('mainpage_tab_scroll_more')} ref='domTabScrollMore' {...moreBtn} > <i class="iconfont icon-arrow-down"></i> <DrpMenus ref="cmp-drpMenus" {...drpMenus}></DrpMenus> </div> </div> <div class="pl-tabs-scroll" ref='domTabScroll'> <TabNav {...navData} ref='TabNavs'></TabNav> </div> </div> <div class="pl-tabpanel-bd" ref='domTabBody'> {this.$slots.default} </div> </div> ) } } export default Tabs; import findIndex from 'lodash/findIndex' import Panel from './panel.vue' import TabNav from './tabNav.jsx' // import Tab from './item' import DrpMenus from './drpMenus' const Tabs = { name: 'PTabs', props: { value: {} }, watch: { value(value) { // let id = 'tab_' + value; // let id =value; // this.$nextTick(r => { // debugger // let tabObj = this.$refs['TabNavs']; // if (tabObj.$refs[id] == null) return; // let scrollLeft = tabObj.$refs[id].$el.offsetLeft, // scrollArea = tabObj.$refs[id].$el.parentNode.parentNode; // if (scrollArea.offsetWidth < scrollLeft) { // scrollArea.scrollLeft = scrollLeft; // } else if (scrollArea.scrollLeft > scrollLeft) { // scrollArea.scrollLeft = scrollLeft; // } // }); this.setCurrentName(value) } }, data() { return { currentName: this.value || this.activeName, contextMenuKey: null, scrollStep: 115, showScroll: false, panels: [] } }, created() { this.$on('tab-nav-update', this.calcPaneInstances.bind(null, true)); }, mounted() { this.calcPaneInstances(); window.addEventListener('resize',this.resize); }, updated() { this.calcPaneInstances(); }, beforeDestroy() { window.removeEventListener('resize',this.resize); }, methods: { setCurrentName(value) { this.currentName = value; //绑定提是v-model所以这里要加一下，这样可以对 props 传进来的value 进行改变 this.$emit('input', value); }, calcPaneInstances() { //收集插槽里头的组件实例，以重新渲染 if (this.$slots.default) { const panelslots = this.$slots.default.filter(vnode => vnode.tag && vnode.componentOptions && vnode.componentOptions.Ctor.options.name === 'PTabpanel'); // update indeed const panels = panelslots.map(({ componentInstance }) => componentInstance); const panelsChanged = !(panels.length === this.panels.length && panels.every((pane, index) => pane === this.panels[index])); if (panelsChanged) { this.panels = panels; } } else if (this.panels.length !== 0) { this.panels = []; } }, closeItem(key) { let me = this; me.$emit('onRemoveTab', key); me.resize(); }, closeCurItem() { this.closeItem(this.currentName); }, getItemIndex(name) { let index = findIndex(this.panels, item => { return item.name == name; }); return index; }, getItem(name) { let index = findIndex(this.panels, item => { return item.name == name; }); if (index > -1) { return this.panels[index]; } return null; }, getItemObj(name) { let panel = this.getItem(name); if (panel == null) return null; return { //.$refs['TabNavs'] tabEl: this.$el.querySelector('#tab_'+name),//null tabPanelEl: panel.$el, tabPanelIframeEl: panel.$el.querySelector('iframe') }; }, getSeldItemObj() { return this.getItemObj(this.currentName); }, resize() { this.$refs['TabNavs'].resize(); this.$refs['domTabBody'].style.height = this.$el.offsetHeight - this.$refs['domTabHead'].offsetHeight + 'px'; let tabScroll = this.$refs['domTabScroll']; this.showScroll = tabScroll.offsetWidth < tabScroll.scrollWidth; }, handleShowDrpMenus(evt) { evt.stopPropagation(); const rects = evt.currentTarget.getClientRects()[0]; this.$refs['cmp-drpMenus'].show(rects.top + rects.height); }, handleHideDrpMenus() { this.$refs['cmp-drpMenus'].hide(); }, handleMoreMenuClick(vm, event) { // this.activeKey = vm.$el.getAttribute('alt'); this.resize(); }, handleScrollLt(step) { let el = this.$refs['domTabScroll']; el.scrollLeft = el.scrollLeft - (step || this.scrollStep); }, handleScrollLtMouseDown() { let me = this; me.scrollPressTimer = setInterval(function () { me.handleScrollLt(10); }, 10); }, handleScrollLtMouseUp() { clearInterval(this.scrollPressTimer); }, handleScrollRt(step) { let el = this.$refs['domTabScroll']; el.scrollLeft = el.scrollLeft + (step || this.scrollStep); }, handleScrollRtMouseDown() { let me = this; me.scrollPressTimer = setInterval(function () { me.handleScrollRt(10); }, 10); }, handleScrollRtMouseUp() { clearInterval(this.scrollPressTimer); }, handleTabChange(name) { this.setCurrentName(name); }, handleTabClose(name) { this.closeItem(name); this.$refs['TabNavs'].$forceUpdate(); }, handleTabCloseAll(){ this.$emit('onRemoveAllTab'); this.$refs['TabNavs'].$forceUpdate(); this.resize(); }, handleTabCloseLt(name,index){ this.$emit('onRemoveLeft',name,index); this.$refs['TabNavs'].$forceUpdate(); this.resize(); }, handleTabCloseRt(name,index){ this.$emit('onRemoveRight',name,index); this.$refs['TabNavs'].$forceUpdate(); this.resize(); }, handleTabCloseOt(name,index){ this.$emit('onRemoveOther',name,index); this.$refs['TabNavs'].$forceUpdate(); this.resize(); }, handleFullScreen(){ this.$emit('onFullScreen') } }, render(h) { let children = this.panels; let navData={ props:{ panels:children }, on:{ onTabChange: this.handleTabChange, onTabClose: this.handleTabClose, onTabCloseAll: this.handleTabCloseAll, onTabCloseLt:this.handleTabCloseLt, onTabCloseRt:this.handleTabCloseRt, onTabCloseOt:this.handleTabCloseOt, onTabCloseOt:this.handleTabCloseOt, onFullScreen: this.handleFullScreen }, ref:'domTabSrcollInner' }; let scrollLtBtn = { style: { display: this.showScroll ? 'inline-block' : 'none' }, on: { //click:this.handleScrollLt, mousedown: this.handleScrollLtMouseDown, mouseup: this.handleScrollLtMouseUp, } }, scrollRtBtn = { style: { display: this.showScroll ? 'inline-block' : 'none' }, on: { //click:this.handleScrollRt, mousedown: this.handleScrollRtMouseDown, mouseup: this.handleScrollRtMouseUp, } }, moreBtn = { on: { mouseover: this.handleShowDrpMenus, mouseout: this.handleHideDrpMenus } }, drpMenus = { props: { children: children }, on: { click: this.handleMoreMenuClick, onTabChange: this.handleTabChange, onTabClose: this.handleTabClose } }, hideSty = { on: { mouseover: this.hideTab, mouseout: this.show, click: ()=>{alert(12313)} } }; return ( <div class="pl-tabs"> <div class="pl-tabs-hd" ref='domTabHead' {...hideSty}> <div class="pl-tabs-tool" ref='domTabTool'> <div class="item" title={$lang('scrollLeft')||'滚动左侧'} ref='domTabScrollLt' {...scrollLtBtn}> <i class="iconfont icon-arrow-left"></i> </div> <div class="item" title={$lang('scrollRight')||'滚动右侧'} ref='domTabScrollRt' {...scrollRtBtn}> <i class="iconfont icon-arrow-right"></i> </div> <div class="item" title={$lang('more')||'更多'} ref='domTabScrollMore' {...moreBtn} > <i class="iconfont icon-arrow-down"></i> <DrpMenus ref="cmp-drpMenus" {...drpMenus}></DrpMenus> </div> </div> <div class="pl-tabs-scroll" ref='domTabScroll'> <TabNav {...navData} ref='TabNavs'></TabNav> </div> </div> <div class="pl-tabpanel-bd" ref='domTabBody'> {this.$slots.default} </div> </div> ) } } export default Tabs;

Ignore Space Show notes View project/hivuiMain/views/taskCenter.vue

<template> <hi-taskcenter ref="hiTask" @openfunc="openfunc" style="background-color:#fff;padding-top:10px;box-sizing:border-box;"></hi-taskcenter> </template> <script> import "hi-taskcenter/hi-taskcenter.css"; import HiTaskcenter from "hi-taskcenter"; export default { components: { HiTaskcenter, }, mounted(){ let me=this; document.addEventListener("iframeActiving",function(e){ //console.log(e.detail); if(top.window.__refreshTaskcenter){ top.window.__refreshTaskcenter=false; me.$refs.hiTask.taskschemeItemClick( { value: "untreated", label: $t('mainpage_taskcenter_untreated'), sel: true }); } }); }, methods: { openfunc(__data1,__data2,__data3) { debugger; top.window.SysPage.newPage(__data2.fpdisplayname,location.origin+(window._global?"":window.HIVUI_SETTING.serverName)+"/"+__data2.fmodelpath,{ fmodelpath:__data2.fmodelpath, version:__data2.fversion, ftaskguid:__data2.ftaskguid, flowstate:__data2.flowstate, forderguid:__data2.forderguid, fnumber:__data2.fordernumber, fbzid:__data2.fbzid, pn:window.HIVUI_SETTING.projectName, }); }, }, }; </script> <template> <hi-taskcenter ref="hiTask" @openfunc="openfunc" style="background-color:#fff;padding-top:10px;box-sizing:border-box;"></hi-taskcenter> </template> <script> import "hi-taskcenter/hi-taskcenter.css"; import HiTaskcenter from "hi-taskcenter"; export default { components: { HiTaskcenter, }, mounted(){ let me=this; document.addEventListener("iframeActiving",function(e){ //console.log(e.detail); if(top.window.__refreshTaskcenter){ top.window.__refreshTaskcenter=false; me.$refs.hiTask.taskschemeItemClick( { value: "untreated", label: "未处理", sel: true }); } }); }, methods: { openfunc(__data1,__data2,__data3) { debugger; top.window.SysPage.newPage(__data2.fpdisplayname,location.origin+(window._global?"":window.HIVUI_SETTING.serverName)+"/"+__data2.fmodelpath,{ fmodelpath:__data2.fmodelpath, version:__data2.fversion, ftaskguid:__data2.ftaskguid, flowstate:__data2.flowstate, forderguid:__data2.forderguid, fnumber:__data2.fordernumber, fbzid:__data2.fbzid, pn:window.HIVUI_SETTING.projectName, }); }, }, }; </script>

Show line notes below