|
|
|
|
<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="updatePwd" @logout="onLogout" :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"
|
|
|
|
|
import md5 from "js-md5";
|
|
|
|
|
|
|
|
|
|
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();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const updatePwd = pwd => {
|
|
|
|
|
pwd.old = md5(pwd.old);
|
|
|
|
|
pwd.new = md5(pwd.new);
|
|
|
|
|
pwd.reNew = md5(pwd.reNew);
|
|
|
|
|
emit('updatePwd', pwd);
|
|
|
|
|
Api.user.updatePwd(pwd);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
router.push("/")
|
|
|
|
|
dispatch("getMenus");
|
|
|
|
|
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>
|
