调查问卷

src/views/Administrator.vue

@@ -1,6 +1,12 @@
 <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"
@@ -14,7 +20,9 @@
 
                 <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>
+                        <template #icon>
+							<span :class="['icon','iconfont', 'menu_icon', menu.icon]"></span>
+						</template>
                         <span class="menu_title">{{menu.name}}</span>
                     </a-menu-item>
                     <a-sub-menu :key="menu.key" v-else> 
@@ -47,7 +55,11 @@
                 </div>
             </div>
 			<div class="administrator_page_right_content">
-				<router-view/>
+				<router-view v-slot="{ Component }">
+					<keep-alive>
+						<component :is="Component" />
+					</keep-alive>
+				</router-view>
 			</div>
 		</div>
 	</div>	
@@ -78,13 +90,13 @@ export default defineComponent({
     setup() {
 		const router = useRouter()
         const route:any = useRoute()
-		const state = reactive({
+		const state:any = reactive({
 		rootSubmenuKeys: [{
 			name:'Trial User',
 			route:'/administrator/allUser',
 			icon:'yonghu',
 			expandIcon:'icon-xiala',
-			key:'/administrator/allUser',
+			key:'sub1',
 			isShow:true,
 			// children: [
 			//         {
@@ -108,18 +120,41 @@ export default defineComponent({
 			route:'/administrator/testClickData',
 			icon:'shenpi',
 			expandIcon:'icon-xiala',
-			key:'/administrator/testClickData',
+			key:'sub2',
 			isShow:true,
 		},{
 			name:'Trial User Approval',
 			route:'/administrator/trialApproval',
 			icon:'usetime',
-			key:'/administrator/trialApproval',
+			key:'sub3',
 			expandIcon:'icon-xiala',
 			isShow:true,
+		},{
+			name:'Events',
+			icon:'usetime',
+			key:'sub4',
+			expandIcon:'icon-xiala',
+			isShow:true,
+			children: [
+				{
+					name:'Questionnaire Survey',
+					route:'/administrator/questionnaire',
+					icon:'',
+					key:'sub4-1',
+					isShow:true,
+				},
+				// {
+				// 	code:'ROLE_MANAGER',
+				// 	name:'Access Permission',
+				// 	route:'/home/excil2',
+				// 	icon:'',
+				// 	key:'/home/excil33',
+				// 	isShow:true,
+				// },
+			],
 		}],
-		openKeys: ['sub1'],
-		selectedKeys: [],
+		openKeys: [],
+		selectedKeys: ['sub1'],
 		nowPageName:'Trial User',//当前页面名称
 		});
 		let routers:any = ref([])
@@ -134,11 +169,13 @@ export default defineComponent({
 		}
 		};
 		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(() => {
             let cookieInfo = getCookie('userInfo') || ''
             if(cookieInfo){
@@ -149,8 +186,22 @@ export default defineComponent({
                 // getTitle(menuList.value, route.path)
             }else{
             }
-			state.nowPageName = state.rootSubmenuKeys[0].name
-			router.push(state.rootSubmenuKeys[0].route)
+			
+			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
+					}
+				}
+			});
+			// state.nowPageName = state.rootSubmenuKeys[0].name
+			// router.push(state.rootSubmenuKeys[0].route)
             
         })
 		return {
@@ -158,6 +209,7 @@ export default defineComponent({
 			onOpenChange,
 			routers,
 			handleClick,
+			setBack,
 		};
     },
     data(prop) {
@@ -190,7 +242,31 @@ export default defineComponent({
     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{
 		padding-top: 20px;
 		.modal_title_text{
@@ -231,6 +307,7 @@ export default defineComponent({
             }
             .ant-menu-inline.ant-menu-sub{
                 background: #FFFFFF;
+				padding-left: 4rem;
             }
             
             .menu_title{