377 lines
11 KiB
Vue
377 lines
11 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">{{ $t('upgradePlan.Back') }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal_title_text">{{ $t('Header.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-${menu.key}`" >
|
|
<a-menu-item :key="`item-${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="`sub-${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, watch } 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 {t,locale} = useI18n()
|
|
|
|
const store:any = useStore()
|
|
let userDetail:any= computed(()=>{
|
|
return store.state.UserHabit.userDetail
|
|
})
|
|
const state:any = reactive({
|
|
userDetailLanguage:computed(()=>store.state.UserHabit.userDetail.language),
|
|
// 5,7
|
|
rootSubmenuKeys: [],
|
|
openKeys: [],
|
|
selectedKeys: [],
|
|
nowPageName:'All User',//当前页面名称
|
|
});
|
|
let routers:any = ref([])
|
|
|
|
const syncMenuStatus = (path:string)=>{
|
|
if(!state.rootSubmenuKeys.length)return
|
|
let matched = false
|
|
state.rootSubmenuKeys.some((item:any)=>{
|
|
if(item.children){
|
|
const target = item.children.find((child:any)=>child.route === path)
|
|
if(target){
|
|
state.selectedKeys = [target.key]
|
|
state.openKeys = [`sub-${item.key}`]
|
|
state.nowPageName = target.name
|
|
matched = true
|
|
return true
|
|
}
|
|
}else if(item.route === path){
|
|
state.selectedKeys = [`item-${item.key}`]
|
|
state.openKeys = []
|
|
state.nowPageName = item.name
|
|
matched = true
|
|
return true
|
|
}
|
|
return false
|
|
})
|
|
if(!matched){
|
|
state.selectedKeys = []
|
|
}
|
|
}
|
|
|
|
|
|
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)]
|
|
console.log(event.item)
|
|
state.nowPageName = event.item.name
|
|
router.push({path:event.item.route})
|
|
}
|
|
let setBack = ()=>{
|
|
router.push('/home');
|
|
}
|
|
watch(()=>state.userDetailLanguage,(newVal)=>{
|
|
if(locale.value == newVal || !newVal)return
|
|
locale.value = newVal
|
|
var vuex_systemUser: any = sessionStorage.getItem("vuex_systemUser");
|
|
let langList = []
|
|
if(vuex_systemUser == 5 || vuex_systemUser == 7){
|
|
langList = adminRouter.schoolOrEnterprise(t);
|
|
}else{
|
|
langList = adminRouter.all(t);
|
|
}
|
|
langList.forEach((item:any,index) => {
|
|
state.rootSubmenuKeys[index].name = item.name
|
|
})
|
|
})
|
|
onMounted(() => {
|
|
store.dispatch('getLangType').then(()=>{
|
|
}).catch(()=>{
|
|
})
|
|
var vuex_systemUser: any = sessionStorage.getItem("vuex_systemUser");
|
|
if(vuex_systemUser == 5 || vuex_systemUser == 7){
|
|
state.rootSubmenuKeys = adminRouter.schoolOrEnterprise(t);
|
|
}else{
|
|
state.rootSubmenuKeys = adminRouter.all(t);
|
|
}
|
|
const route = router.currentRoute.value
|
|
const isMenuRoute = state.rootSubmenuKeys.some((item:any) => item.route === route.path || item.children?.some((child:any)=>child.route === route.path))
|
|
// 如果是管理员首页或未匹配菜单，才重定向到首个菜单；否则保持当前路由，避免刷新回到 allUser
|
|
if (route.path === "/administrator" || !isMenuRoute) {
|
|
router.push(state.rootSubmenuKeys[0].route)
|
|
}
|
|
syncMenuStatus(router.currentRoute.value.path)
|
|
//储存所有用户id和name
|
|
Https.axiosGet(Https.httpUrls.getAllUserId,).then((rv: any) => {
|
|
if (rv) {
|
|
store.commit('setAllUserList',rv);
|
|
}
|
|
})
|
|
if(vuex_systemUser == 3){
|
|
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)
|
|
|
|
})
|
|
watch(()=>router.currentRoute.value.path,(path)=>{
|
|
syncMenuStatus(path)
|
|
},{immediate:true})
|
|
onBeforeMount(()=>{
|
|
state.selectedKeys = []
|
|
})
|
|
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-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>
|