FT/foton-laws-system-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

左侧菜单栏收缩放到右侧

Browse Source
This commit is contained in:
yanyizhou
2021-10-22 14:16:21 +08:00
parent 858f215e53
commit 9cdc77656c
2 changed files with 859 additions and 832 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+279 -278
View File
@@ -12,8 +12,8 @@
<div class="header-right" style="display: inline-block; float: right; margin-right: 20px; color: #fff">
<div class="user-info">
<el-dropdown
trigger="click"
@command="handleCommand"
trigger="click"
@command="handleCommand"
>
<div class="user-box" style="margin-top: 23px;">
<img :src="userAvator" v-if="$store.getters.userInfo.avator">
@@ -27,11 +27,11 @@
</el-dropdown>
</div>
</div>
<!-- <div class="logo">-->
<!-- <img :src="logo" />-->
<!-- </div>-->
<!-- <div class="logo">-->
<!-- <img :src="logo" />-->
<!-- </div>-->
</div>
<!-- <com-header></com-header>-->
<!-- <com-header></com-header>-->
<div class="container-box">
<router-view />
</div>
@@ -41,288 +41,289 @@
</template>
<script>
import {mapGetters, mapState} from 'vuex'
import { webLoginType } from '@/sysConfig'
export default {
name: 'App',
data () {
return {
isBoolean: false
}
},
methods: {
// 点击下拉选项事件
handleCommand (command) {
// 退出登录
if (command === 'loginOut') {
this.$confirm('您确认要退出吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
confirmButtonClass: 'common-button-primary',
roundButton: false
}).then(() => {
if(webLoginType != null && webLoginType === 'idm' ) {
window.location.href= 'http://sso.foton.com.cn/logout?service='
// this.$http.post('logout', {}, res => {
// window.location.href= 'http://testsso1.foton.com.cn/logout?service='
// })
}else if(webLoginType != null && webLoginType === 'dev'){
this.$store.commit('setTypeFlag', 'loginOut')
this.$http.get('logout', {}, {
_this: this
}, res => {
this.$store.dispatch('logout')
this.$router.push('/login')
}, e => {})
}
// this.$http.post('/logout', {}, res => {
// window.location.href = 'http://testsso1.foton.com.cn/oauth2.0/authorize?client_id=app_slrs&redirect_uri=http://127.0.0.1:9090&response_type=code'
// })
// return
// this.$store.commit('setTypeFlag', 'loginOut')
// this.$http.get('logout', {}, {
// _this: this
// }, res => {
// this.$store.dispatch('logout')
// this.$router.push('/login')
// }, e => {})
}).catch(() => {
})
}
},
/**
* @description: 主题设置
* @author: xx
* @date: 2018-08-29 14:56:39
*/
setTheme (theme) {
document.getElementById('app').className = theme
},
/**
* @description: backSpace回退禁用
* @date: 2021-03-01 16:36:55
* @auth: chenxiaoxi
*/
banBackSpace(e) {
var ev = e || window.event;
//各种浏览器下获取事件对象
var obj = ev.relatedTarget || ev.srcElement || ev.target ||ev.currentTarget;
//按下Backspace键
if(ev.keyCode == 8){
var tagName = obj.nodeName //标签名称
//如果标签不是input或者textarea则阻止Backspace
if(tagName!='INPUT' && tagName!='TEXTAREA'){
return this.stopIt(ev);
}
var tagType = obj.type.toUpperCase();//标签类型
//input标签除了下面几种类型，全部阻止Backspace
if(tagName=='INPUT' && (tagType!='TEXT' && tagType!='TEXTAREA' && tagType!='PASSWORD')){
return this.stopIt(ev);
}
//input或者textarea输入框如果不可编辑则阻止Backspace
if((tagName=='INPUT' || tagName=='TEXTAREA') && (obj.readOnly==true || obj.disabled ==true)){
return this.stopIt(ev);
}
}
},
stopIt(ev) {
if(ev.preventDefault){
//preventDefault()方法阻止元素发生默认的行为
ev.preventDefault();
}
if(ev.returnValue){
//IE浏览器下用window.event.returnValue = false;实现阻止元素发生默认的行为
ev.returnValue = false;
}
return false;
},
// 其他标签页修改用户 或者 退出登录
refresh() {
//执行刷新操作，这里我没有写this.$route.go(0),因为整个页面抖动不是很友好
//现将app.vue下面的 头部组件，菜单组件，内容组件隐藏再放出来，实现刷新一样的效果
console.log('我要刷新页面了')
}
},
computed: {
// 获取用户头像
userAvator () {
return this.$store.getters.userInfo.avator || require('@/assets/images/avator_default.png')
},
...mapGetters([
'getWebSocketList', 'getTheme', 'getMenuList'
]),
...mapState(['userInfoModifyTime','isCollapse'])
},
watch: {
// 'userInfoModifyTime'() {
// // console.log('watch global, userInfoModifyTime')
// this.refresh()
// },
getTheme (val) {
// 主题修改
this.setTheme(val)
},
// 监听路由 控制isBoolean
$route () {
if (this.$route.name !== 'Login' && this.$route.name !== 'Home' && !this.$route.meta.isBoolean && this.$route.name !== 'beeEChungLogin' && this.$route.name !== 'beeEnergyLogin' && this.$route.name !== 'mdLawLogin' && this.$route.name !== 'nuoBLogin' && this.$route.name !== 'sTLogin' && this.$route.name !== 'StandardSearch') {
this.isBoolean = true
} else {
this.isBoolean = false
}
}
},
mounted () {
this.setTheme(this.getTheme)
//实现对字符码的截获，keypress中屏蔽了这些功能按键
document.onkeypress = this.banBackSpace
//对功能按键的获取
document.onkeydown = this.banBackSpace
this.visibilitychangeFn = (e) => { //这个方法是监测浏览器窗口发生变化的时候执行
// 切换到当前页面
if (document.hidden == false) {
const userInfoModifyTime = this.userInfoModifyTime
const userInfoModifyTimeInLocalStorage = localStorage.getItem('userInfoModifyTime')
// 用户未切换 不执行任何操作
if (userInfoModifyTime === userInfoModifyTimeInLocalStorage) {
return
}
if (userInfoModifyTimeInLocalStorage === null && webLoginType === 'idm') {
this.$store.dispatch('syncStorageData')
const currentPage = this.$route.name
if (currentPage === 'Login') {return}
this.currentMinute = 3
this.loading && this.loading.close()
this.loading = this.$loading({
lock: true,
// text: 'Loading',
// spinner: 'el-icon-loading',
// background: 'rgba(0, 0, 0, 0.7)'
});
this.messageForLogin && this.messageForLogin.close()
this.messageForLogin = this.$message({
message: `用户已退出，${this.currentMinute}秒后将跳转到登录1页面`,
type: 'warning'
})
this.intervalForLogin = setInterval(() => {
if (this.currentMinute === 0) {
clearInterval(this.intervalForLogin)
this.loading.close()
this.$router.push('/login')
console.log('切换到登录页面', currentPage)
}
this.currentMinute--
this.messageForLogin.message = `用户已退出，${this.currentMinute}秒后将跳转到登录页面`
}, 0)
} else if (userInfoModifyTime !== userInfoModifyTimeInLocalStorage && webLoginType === 'idm') {
this.$store.dispatch('syncStorageData')
console.log('用户信息已更改，同步数据')
this.currentMinute = 3
this.loading && this.loading.close()
this.loading = this.$loading({
lock: true,
// text: 'Loading',
// spinner: 'el-icon-loading',
// background: 'rgba(0, 0, 0, 0.7)'
});
this.messageForHome && this.messageForHome.close()
this.messageForHome = this.$message({
message: `用户已切换，${this.currentMinute}秒后将跳转到用户首页`,
type: 'warning'
})
this.intervalForHome = setInterval(() => {
if (this.currentMinute === 0) {
clearInterval(this.intervalForHome)
this.loading.close()
this.$router.push({
path: '/redirect',
query: '/home2'
})
}
this.currentMinute--
this.messageForHome.message = `用户已切换，${this.currentMinute}秒后将跳转到用户首页`
}, 1000)
// const route = this.$router.resolve('/home')
// this.$router.push({
// path: '/redirect',
// query: '/home'
// })
// location.reload();
}
}
}
document.addEventListener('visibilitychange', this.visibilitychangeFn);
},
beforeDestroy() {
document.onkeypress = null
document.onkeydown = null
document.removeEventListener('visibilitychange', this.visibilitychangeFn)
clearInterval(this.intervalForLogin)
clearInterval(this.intervalForHome)
import {mapGetters, mapState} from 'vuex'
import { webLoginType } from '@/sysConfig'
export default {
name: 'App',
data () {
return {
isBoolean: false
}
},
methods: {
// 点击下拉选项事件
handleCommand (command) {
// 退出登录
if (command === 'loginOut') {
this.$confirm('您确认要退出吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
confirmButtonClass: 'common-button-primary',
roundButton: false
}).then(() => {
if(webLoginType != null && webLoginType === 'idm' ) {
window.location.href= 'http://sso.foton.com.cn/logout?service='
// this.$http.post('logout', {}, res => {
// window.location.href= 'http://testsso1.foton.com.cn/logout?service='
// })
}else if(webLoginType != null && webLoginType === 'dev'){
this.$store.commit('setTypeFlag', 'loginOut')
this.$http.get('logout', {}, {
_this: this
}, res => {
this.$store.dispatch('logout')
this.$router.push('/login')
}, e => {})
}
// this.$http.post('/logout', {}, res => {
// window.location.href = 'http://testsso1.foton.com.cn/oauth2.0/authorize?client_id=app_slrs&redirect_uri=http://127.0.0.1:9090&response_type=code'
// })
// return
// this.$store.commit('setTypeFlag', 'loginOut')
// this.$http.get('logout', {}, {
// _this: this
// }, res => {
// this.$store.dispatch('logout')
// this.$router.push('/login')
// }, e => {})
}).catch(() => {
})
}
},
/**
* @description: 主题设置
* @author: xx
* @date: 2018-08-29 14:56:39
*/
setTheme (theme) {
document.getElementById('app').className = theme
},
/**
* @description: backSpace回退禁用
* @date: 2021-03-01 16:36:55
* @auth: chenxiaoxi
*/
banBackSpace(e) {
var ev = e || window.event;
//各种浏览器下获取事件对象
var obj = ev.relatedTarget || ev.srcElement || ev.target ||ev.currentTarget;
//按下Backspace键
if(ev.keyCode == 8){
var tagName = obj.nodeName //标签名称
//如果标签不是input或者textarea则阻止Backspace
if(tagName!='INPUT' && tagName!='TEXTAREA'){
return this.stopIt(ev);
}
var tagType = obj.type.toUpperCase();//标签类型
//input标签除了下面几种类型，全部阻止Backspace
if(tagName=='INPUT' && (tagType!='TEXT' && tagType!='TEXTAREA' && tagType!='PASSWORD')){
return this.stopIt(ev);
}
//input或者textarea输入框如果不可编辑则阻止Backspace
if((tagName=='INPUT' || tagName=='TEXTAREA') && (obj.readOnly==true || obj.disabled ==true)){
return this.stopIt(ev);
}
}
},
stopIt(ev) {
if(ev.preventDefault){
//preventDefault()方法阻止元素发生默认的行为
ev.preventDefault();
}
if(ev.returnValue){
//IE浏览器下用window.event.returnValue = false;实现阻止元素发生默认的行为
ev.returnValue = false;
}
return false;
},
// 其他标签页修改用户 或者 退出登录
refresh() {
//执行刷新操作，这里我没有写this.$route.go(0),因为整个页面抖动不是很友好
//现将app.vue下面的 头部组件，菜单组件，内容组件隐藏再放出来，实现刷新一样的效果
console.log('我要刷新页面了')
}
},
computed: {
// 获取用户头像
userAvator () {
return this.$store.getters.userInfo.avator || require('@/assets/images/avator_default.png')
},
...mapGetters([
'getWebSocketList', 'getTheme', 'getMenuList'
]),
...mapState(['userInfoModifyTime','isCollapse'])
},
watch: {
// 'userInfoModifyTime'() {
// // console.log('watch global, userInfoModifyTime')
// this.refresh()
// },
getTheme (val) {
// 主题修改
this.setTheme(val)
},
// 监听路由 控制isBoolean
$route () {
if (this.$route.name !== 'Login' && this.$route.name !== 'Home' && !this.$route.meta.isBoolean && this.$route.name !== 'beeEChungLogin' && this.$route.name !== 'beeEnergyLogin' && this.$route.name !== 'mdLawLogin' && this.$route.name !== 'nuoBLogin' && this.$route.name !== 'sTLogin' && this.$route.name !== 'StandardSearch') {
this.isBoolean = true
} else {
this.isBoolean = false
}
}
},
mounted () {
this.setTheme(this.getTheme)
//实现对字符码的截获，keypress中屏蔽了这些功能按键
document.onkeypress = this.banBackSpace
//对功能按键的获取
document.onkeydown = this.banBackSpace
this.visibilitychangeFn = (e) => { //这个方法是监测浏览器窗口发生变化的时候执行
// 切换到当前页面
if (document.hidden == false) {
const userInfoModifyTime = this.userInfoModifyTime
const userInfoModifyTimeInLocalStorage = localStorage.getItem('userInfoModifyTime')
// 用户未切换 不执行任何操作
if (userInfoModifyTime === userInfoModifyTimeInLocalStorage) {
return
}
if (userInfoModifyTimeInLocalStorage === null && webLoginType === 'idm') {
this.$store.dispatch('syncStorageData')
const currentPage = this.$route.name
if (currentPage === 'Login') {return}
this.currentMinute = 3
this.loading && this.loading.close()
this.loading = this.$loading({
lock: true,
// text: 'Loading',
// spinner: 'el-icon-loading',
// background: 'rgba(0, 0, 0, 0.7)'
});
this.messageForLogin && this.messageForLogin.close()
this.messageForLogin = this.$message({
message: `用户已退出，${this.currentMinute}秒后将跳转到登录1页面`,
type: 'warning'
})
this.intervalForLogin = setInterval(() => {
if (this.currentMinute === 0) {
clearInterval(this.intervalForLogin)
this.loading.close()
this.$router.push('/login')
console.log('切换到登录页面', currentPage)
}
this.currentMinute--
this.messageForLogin.message = `用户已退出，${this.currentMinute}秒后将跳转到登录页面`
}, 0)
} else if (userInfoModifyTime !== userInfoModifyTimeInLocalStorage && webLoginType === 'idm') {
this.$store.dispatch('syncStorageData')
console.log('用户信息已更改，同步数据')
this.currentMinute = 3
this.loading && this.loading.close()
this.loading = this.$loading({
lock: true,
// text: 'Loading',
// spinner: 'el-icon-loading',
// background: 'rgba(0, 0, 0, 0.7)'
});
this.messageForHome && this.messageForHome.close()
this.messageForHome = this.$message({
message: `用户已切换，${this.currentMinute}秒后将跳转到用户首页`,
type: 'warning'
})
this.intervalForHome = setInterval(() => {
if (this.currentMinute === 0) {
clearInterval(this.intervalForHome)
this.loading.close()
this.$router.push({
path: '/redirect',
query: '/home2'
})
}
this.currentMinute--
this.messageForHome.message = `用户已切换，${this.currentMinute}秒后将跳转到用户首页`
}, 1000)
// const route = this.$router.resolve('/home')
// this.$router.push({
// path: '/redirect',
// query: '/home'
// })
// location.reload();
}
}
}
document.addEventListener('visibilitychange', this.visibilitychangeFn);
},
beforeDestroy() {
document.onkeypress = null
document.onkeydown = null
document.removeEventListener('visibilitychange', this.visibilitychangeFn)
clearInterval(this.intervalForLogin)
clearInterval(this.intervalForHome)
}
}
</script>
<style lang="less">
#app {
position: relative;
#app {
position: relative;
width: 100%;
height: 100%;
overflow-y: auto;
background-color: #F0F2F5;
//background: url('~@/assets/images/shangqi/home/BG.png') no-repeat;
background-size: 100% 100%;
font-family: MicrosoftYaHei,微软雅黑;
& > div{
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
}
.content-box {
display: flex;
height: 100%;
overflow-y: auto;
background-color: #F0F2F5;
//background: url('~@/assets/images/shangqi/home/BG.png') no-repeat;
background-size: 100% 100%;
font-family: MicrosoftYaHei,微软雅黑;
& > div{
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
}
.content-box {
display: flex;
.sub-container {
height: 100%;
.sub-container {
height: 100%;
flex: 1;
overflow-x: auto;
display: flex;
flex-direction: column;
.container-box {
position: relative;
height: calc(~'100% - 65px');
//flex: 1;
background: #F4F4F4;
overflow-y: auto;
padding: 10px 10px 0;
.pagination {
border-top: 1px solid #f4f4f4;
width: calc(~'100% - 20px');
left: 10px;
}
flex: 1;
overflow-x: auto;
display: flex;
flex-direction: column;
.container-box {
position: relative;
height: calc(~'100% - 65px');
//flex: 1;
background: #F4F4F4;
overflow-y: auto;
padding: 10px 0 10px 0;
//padding: 10px 10px 0;
.pagination {
border-top: 1px solid #f4f4f4;
width: calc(~'100% - 20px');
left: 10px;
}
}
}
/deep/.el-menu--vertical {
background: red;
}
}
/deep/.el-menu--vertical {
background: red;
}
}
</style>
src/components/navMenu/index.vue
+580 -554
View File
File diff suppressed because it is too large Load Diff