You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
210 lines
4.7 KiB
210 lines
4.7 KiB
<template> |
|
<el-container :style="appMain" ref="main" v-show="!flag.loading"> |
|
<el-header v-show="state.size.headHeight != '0px'" class="app-head" :height="state.size.headHeight"> |
|
|
|
<Head :title="title" @updatePwd="pwd => emit('updatePwd', pwd)" @logout="emit('logout')" :styleAble="styleAble" |
|
:sizeAble="sizeAble" :langAble="langAble" :center="center" :username="username" :closeAble="closeAble" |
|
:logo="logo" /> |
|
</el-header> |
|
<el-container id="container"> |
|
<el-aside v-show="state.size.asideWidth != '0px'" :width="state.size.asideWidth"> |
|
<MenuTree :data="menus" :type="type" /> |
|
</el-aside> |
|
<el-main class="app-main"> |
|
<router-view /> |
|
</el-main> |
|
</el-container> |
|
</el-container> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { reactive, onMounted, ref, onBeforeUnmount } from "vue"; |
|
import { useStore } from "vuex"; |
|
import { useRouter } from "vue-router"; |
|
import { MenuTree, Head, Api } from "noob-mengyxu" |
|
|
|
const { state, commit, dispatch } = useStore(); |
|
const emit = defineEmits(['updatePwd', 'logout']); |
|
const router = useRouter() |
|
const appMain = reactive({ |
|
height: window.innerHeight + 'px', |
|
backgroundColor: state.style.bodyBg |
|
}); |
|
const main = ref(); |
|
const flag = reactive({ |
|
showHeader: true, |
|
showAside: true, |
|
loading: false |
|
}) |
|
let interval = 0; |
|
|
|
const props = defineProps({ |
|
title: { |
|
type: String, |
|
default: null, |
|
}, |
|
menus: { |
|
type: Array<any>(), |
|
default: null |
|
}, |
|
type: { |
|
type: String, |
|
default: 'def', |
|
}, |
|
styleAble: { |
|
type: Boolean, |
|
default: true, |
|
}, |
|
sizeAble: { |
|
type: Boolean, |
|
default: true, |
|
}, |
|
langAble: { |
|
type: Boolean, |
|
default: true, |
|
}, |
|
center: { |
|
type: String, |
|
default: 'home', |
|
}, |
|
checkUser: { |
|
type: Boolean, |
|
default: true, |
|
}, |
|
username: { |
|
type: String, |
|
default: null, |
|
}, |
|
closeAble: { |
|
type: Boolean, |
|
default: false, |
|
}, |
|
logo: { |
|
type: String, |
|
default: null, |
|
}, |
|
}); |
|
|
|
const onResize = () => { |
|
const height = window.innerHeight; |
|
appMain.height = height + 'px'; |
|
commit('initSize', height); |
|
} |
|
|
|
const getUser = (first?) => { |
|
if (!props.checkUser) { |
|
return; |
|
} |
|
first && (flag.loading = true); |
|
Api.pub.getInfo().then((rsp) => { |
|
first && (flag.loading = false); |
|
if (rsp) { |
|
commit('updateState', ['user', rsp]); |
|
} else { |
|
router.push('/login'); |
|
} |
|
}); |
|
}; |
|
|
|
const onLogout = () => { |
|
Api.pub.logout().then(rsp => { |
|
getUser(); |
|
}); |
|
} |
|
|
|
onMounted(() => { |
|
router.push("/") |
|
getUser(true); |
|
interval = setInterval(getUser, 5000); |
|
window.onresize = onResize; |
|
onResize(); |
|
}); |
|
|
|
onBeforeUnmount(() => { |
|
clearInterval(interval); |
|
}) |
|
|
|
</script> |
|
|
|
<style lang='scss'> |
|
@charset "UTF-8"; |
|
|
|
body { |
|
font-size: v-bind('state.size.fontSize') !important; |
|
font-family: "Microsoft YaHei"; |
|
width: 100%; |
|
height: 100%; |
|
overflow: hidden; |
|
padding: 0px; |
|
margin: 0px; |
|
} |
|
|
|
.app-main { |
|
box-shadow: 2px 2px 5px 3px #e5e6eb; |
|
border-radius: 4px; |
|
margin: 3px 0px 0px 3px !important; |
|
padding: v-bind('state.size.mainPad') !important; |
|
height: v-bind('state.size.mainHeight'); |
|
} |
|
|
|
.el-header, |
|
.main-head, |
|
.main-table { |
|
padding: 0; |
|
} |
|
|
|
#app, |
|
#container, |
|
.app-main { |
|
background-color: v-bind('state.style.bodyBg'); |
|
color: v-bind('state.style.color'); |
|
font-size: v-bind('state.size.fontSize'); |
|
} |
|
|
|
.app-head { |
|
padding: 0px !important; |
|
} |
|
|
|
.form-item { |
|
margin-right: v-bind('state.size.searchMargin'); |
|
|
|
&.full { |
|
width: 100%; |
|
margin-right: 0px; |
|
} |
|
} |
|
|
|
#app { |
|
|
|
.el-input, |
|
.el-textarea { |
|
--el-input-bg-color: v-bind('state.style.itemBg') !important; |
|
--el-input-text-color: v-bind('state.style.color') !important; |
|
} |
|
|
|
.el-popper { |
|
--el-bg-color-overlay: v-bind('state.style.itemBg') !important; |
|
--el-fill-color-light: v-bind('state.style.bodyBg') !important; |
|
text-align: left; |
|
} |
|
|
|
.el-dialog { |
|
--el-dialog-bg-color: v-bind('state.style.bodyBg') !important; |
|
} |
|
|
|
.el-drawer { |
|
--el-drawer-bg-color: v-bind('state.style.bodyBg') !important; |
|
} |
|
|
|
* { |
|
--el-text-color-regular: : v-bind('state.style.color') !important; |
|
--el-text-color-primary: v-bind('state.style.color') !important; |
|
--el-disabled-bg-color: v-bind('state.style.itemBg') !important; |
|
} |
|
|
|
*::selection { |
|
background-color: v-bind('state.style.selectionBg'); |
|
color: v-bind('state.style.selectionColor'); |
|
} |
|
} |
|
</style> |