aida_front/src/views/Administrator.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 {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: ['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)]
			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
			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-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>