337 lines
9.7 KiB
Vue
337 lines
9.7 KiB
Vue
<template>
|
|
<div class="administrator_page">
|
|
<div class="administrator_page_left">
|
|
<div class="administrator_title ">
|
|
<div class="modal_title_text" @click="setBack">
|
|
<i class="fi fi-sr-left"></i>
|
|
<div class="modal_title_intro administrator_title_text">Back</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal_title_text">Administrator</div>
|
|
<a-menu
|
|
id="dddddd"
|
|
class="menu_list_content"
|
|
theme="dark"
|
|
v-model:openKeys="openKeys"
|
|
v-model:selectedKeys="selectedKeys"
|
|
mode="inline"
|
|
@click="handleClick"
|
|
>
|
|
<div v-for="(menu) in rootSubmenuKeys" :key="menu.key" >
|
|
<a-menu-item :key="menu.key" :name="menu.name" :route="menu.route" v-if="!menu.children">
|
|
<template #icon>
|
|
<span :class="['icon','iconfont', 'menu_icon', menu.icon]"></span>
|
|
</template>
|
|
<span class="menu_title" :title="menu.name">{{menu.name}}</span>
|
|
</a-menu-item>
|
|
<a-sub-menu :key="menu.key" v-else>
|
|
<template #icon>
|
|
<span :class="['icon','iconfont', 'menu_icon', menu.icon]"></span>
|
|
</template>
|
|
<template #expandIcon><span :class="['icon','iconfont', 'menu_icon', menu.expandIcon]"></span></template>
|
|
<template #title><span class="menu_title" :title="menu.name">{{menu.name}}</span></template>
|
|
<div >
|
|
<a-menu-item v-for="child in menu.children" :key="child.key" :name="child.name" :route="child.route"><span class="menu_title" :title="child.name">{{child.name}}</span></a-menu-item>
|
|
</div>
|
|
</a-sub-menu>
|
|
</div>
|
|
</a-menu>
|
|
</div>
|
|
<div class="administrator_page_right">
|
|
<div class="administrator_page_right_header">
|
|
<div class="page_name">
|
|
<div v-show="!routers.length" class="page_name_title">{{nowPageName}}</div>
|
|
<a-breadcrumb v-show="routers.length" :routes="routers">
|
|
<template #itemRender="{ route, routes, paths }">
|
|
<span v-if="routes.indexOf(route) === routes.length - 1">
|
|
{{ route.breadcrumbName }}
|
|
</span>
|
|
<router-link v-else :to="`${paths.join('/')}`">
|
|
{{ route.breadcrumbName }}
|
|
</router-link>
|
|
</template>
|
|
</a-breadcrumb>
|
|
</div>
|
|
</div>
|
|
<div class="administrator_page_right_content">
|
|
<router-view v-slot="{ Component }">
|
|
<keep-alive>
|
|
<component :is="Component" />
|
|
</keep-alive>
|
|
</router-view>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
<script lang="ts">
|
|
import { LoadingOutlined } from "@ant-design/icons-vue";
|
|
import { message, Upload } from "ant-design-vue";
|
|
import { defineComponent, onMounted, h, ref, nextTick, computed,reactive, toRefs, onBeforeMount } from "vue";
|
|
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
|
|
import { Https } from "@/tool/https";
|
|
import { useStore } from "vuex";
|
|
import { useRouter,useRoute } from 'vue-router'
|
|
import { adminRouter } from "@/tool/adminRouter";
|
|
import GO from "@/tool/GO";
|
|
import { country } from "@/tool/country";
|
|
import { getUploadUrl } from "@/tool/util";
|
|
// import { forEach } from "jszip";
|
|
import scaleImage from "@/component/HomePage/scaleImage.vue";
|
|
import { openGuide,driverObj__,driverIndex__ } from "@/tool/guide";
|
|
import { useI18n } from "vue-i18n";
|
|
import store from "@/store";
|
|
export default defineComponent({
|
|
components: {
|
|
MailOutlined,
|
|
AppstoreOutlined,
|
|
SettingOutlined,
|
|
},
|
|
props: ["msg",'sketchCatecoryList'],
|
|
setup() {
|
|
const router = useRouter()
|
|
// const route:any = useRoute()
|
|
const store:any = useStore()
|
|
let userDetail:any= computed(()=>{
|
|
return store.state.UserHabit.userDetail
|
|
})
|
|
const state:any = reactive({
|
|
|
|
// 5,7
|
|
rootSubmenuKeys: [],
|
|
openKeys: [],
|
|
selectedKeys: ['sub1'],
|
|
nowPageName:'All User',//当前页面名称
|
|
});
|
|
let routers:any = ref([])
|
|
|
|
|
|
const onOpenChange = (openKeys: string[]) => {
|
|
const latestOpenKey:any = openKeys.find(key => state.openKeys.indexOf(key) === -1);
|
|
if (state.rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
|
|
state.openKeys = openKeys;
|
|
} else {
|
|
state.openKeys = latestOpenKey ? [latestOpenKey] : [];
|
|
}
|
|
};
|
|
let handleClick = (event:any) => {
|
|
// state.selectedKeys = [Number(event.key)]
|
|
state.nowPageName = event.item.name
|
|
router.push({path:event.item.route})
|
|
}
|
|
let setBack = ()=>{
|
|
router.push('/home');
|
|
}
|
|
onMounted(() => {
|
|
if(userDetail.value.systemUser == 5 || userDetail.value.systemUser == 7){
|
|
state.rootSubmenuKeys = adminRouter.schoolOrEnterprise;
|
|
}else{
|
|
state.rootSubmenuKeys = adminRouter.all;
|
|
}
|
|
const route = router.currentRoute.value
|
|
if(state.rootSubmenuKeys.some((item:any) => item.route === route.path) || route.path == "/administrator"){
|
|
router.push(state.rootSubmenuKeys[0].route)
|
|
}else{
|
|
router.push('/administrator')
|
|
}
|
|
// state.rootSubmenuKeys.forEach((item:any) => {
|
|
// if(item.children){
|
|
// item.children.forEach((item:any) => {
|
|
// if(item.route == router.currentRoute.value.path){
|
|
// state.selectedKeys[0] = item.key
|
|
// }
|
|
// });
|
|
// }else{
|
|
// if(item.route == router.currentRoute.value.path){
|
|
// state.selectedKeys[0] = item.key
|
|
// }
|
|
// }
|
|
// });
|
|
//储存所有用户id和name
|
|
Https.axiosGet(Https.httpUrls.getAllUserId,).then((rv: any) => {
|
|
if (rv) {
|
|
store.commit('setAllUserList',rv);
|
|
}
|
|
})
|
|
Https.axiosGet(Https.httpUrls.getCities,).then((rv: any) => {
|
|
if (rv) {
|
|
store.commit('setAllCitiesList',rv);
|
|
}
|
|
})
|
|
Https.axiosGet(Https.httpUrls.getAllGenerateFuncName,).then((rv: any) => {
|
|
if (rv) {
|
|
store.commit('setAllGenerateType',rv);
|
|
}
|
|
})
|
|
let allCountry = country
|
|
sessionStorage.setItem('allCountry',JSON.stringify(allCountry));
|
|
// state.nowPageName = state.rootSubmenuKeys[0].name
|
|
// router.push(state.rootSubmenuKeys[0].route)
|
|
|
|
})
|
|
onBeforeMount(()=>{
|
|
state.selectedKeys = ['sub1']
|
|
})
|
|
return {
|
|
...toRefs(state),
|
|
onOpenChange,
|
|
routers,
|
|
handleClick,
|
|
setBack,
|
|
};
|
|
},
|
|
data(prop) {
|
|
return {
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
},
|
|
watch:{
|
|
// newWindowState:{
|
|
// handler(newVal,oldVal){
|
|
// console.log(newVal);
|
|
// if(newVal){
|
|
// this.newWindow?.close();
|
|
// }
|
|
// }
|
|
// },
|
|
|
|
},
|
|
methods: {
|
|
|
|
|
|
},
|
|
});
|
|
</script>
|
|
<style lang="less">
|
|
.administrator_page {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
background: rgba(243,244,248,0.4);
|
|
.administrator_title{
|
|
display: flex;
|
|
align-items: center;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 222;
|
|
.modal_title_text{
|
|
cursor: pointer;
|
|
display: flex;
|
|
margin-bottom: 0;
|
|
font-size: 1.8rem;
|
|
}
|
|
.administrator_title_text{
|
|
line-height: 1;
|
|
}
|
|
.modal_title_text:hover .administrator_title_text{
|
|
text-decoration: underline;
|
|
}
|
|
i{
|
|
font-size: 1.2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 1rem;
|
|
}
|
|
}
|
|
.administrator_page_left{
|
|
width: 20%;
|
|
padding-top: 20px;
|
|
.modal_title_text{
|
|
// font-size: var(--aida-fsize1-8);
|
|
line-height: 10rem;
|
|
text-align: center;
|
|
}
|
|
.ant-menu-dark.menu_list_content{
|
|
padding-left: 1.8rem;
|
|
// width: 30rem;
|
|
width: 100%;
|
|
height: calc(100% - 16rem);
|
|
background: #FFFFFF;
|
|
flex-shrink: 0;
|
|
overflow-y: auto;
|
|
&::-webkit-scrollbar{
|
|
width: 0;
|
|
}
|
|
.menu_icon{
|
|
font-size: 2.4rem;
|
|
color: #808185;
|
|
}
|
|
|
|
.ant-menu-item{
|
|
padding-left: 3.1rem !important;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 6.6rem;
|
|
border-radius: 3.3rem 0px 0px 3.3rem;
|
|
box-sizing: border-box;
|
|
|
|
&.ant-menu-item-only-child{
|
|
padding-left: 5.6rem !important;
|
|
}
|
|
|
|
}
|
|
|
|
.ant-menu-submenu-title{
|
|
padding-left: 3.1rem !important;
|
|
height: 6.6rem;
|
|
|
|
}
|
|
.ant-menu-inline.ant-menu-sub{
|
|
background: #FFFFFF;
|
|
padding-left: 4rem;
|
|
}
|
|
|
|
.menu_title{
|
|
font-size: 1.8rem;
|
|
font-family: Adobe Heiti Std;
|
|
font-weight: normal;
|
|
color: #808185;
|
|
}
|
|
.ant-menu-item-selected{
|
|
background: #F3F4F8;
|
|
|
|
.menu_title{
|
|
color: #000;
|
|
}
|
|
|
|
.menu_icon{
|
|
color: #808185;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.administrator_page_right{
|
|
flex: 1;
|
|
width: 80%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.administrator_page_right_header{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 6.6rem;
|
|
padding: 0 2.8rem 0 3.0rem;
|
|
|
|
.page_name{
|
|
border-left: solid .4rem #161F29;
|
|
.page_name_title,.ant-breadcrumb-link{
|
|
font-size: 1.8rem;
|
|
font-weight: normal;
|
|
color: #333333;
|
|
padding-left: 1.2rem;
|
|
line-height: 1.8rem;
|
|
}
|
|
}
|
|
}
|
|
.administrator_page_right_content{
|
|
height: 100%;
|
|
padding-left: 3rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|