zl-opd-view/src/pages/Home.vue

<template>
	<div class="about">
		<v-header />
		<v-sidetree />
		<div class="content-box" :class="{ 'content-collapse': collapse }">
			<el-tabs type="card" v-model="activeTab" closable class="tabWrap" @tab-remove="removeTabHandle">
				 <el-tab-pane v-for="(item, index) in menuTabs" :key="item.name" :label="item.title" :name="item.name">
					<transition name="fade">
						<component :is="item.content"/>
					</transition>
					
				 </el-tab-pane>
			</el-tabs>
		</div>
		
		
	</div>
</template>

<script setup>
	import { watch,ref,markRaw,h} from "vue"
	
	import vHeader from "../components/Header.vue"
	import vSidetree from "../components/Sidetree.vue"
	import { storeToRefs } from 'pinia'
	import { useHomeStore } from "../store/home.js"
	import app from '../utils/app.js'
	import {ElMessageBox,ElMessage} from 'element-plus'
	import loginAPI from "../api/login.js"
   
    const store=useHomeStore()
    const  { collapse ,currentMenu,menuTabs,activeTab} = storeToRefs(store)
   
   
    const removeTabHandle=(tabId)=>{
	   store.closeTab(tabId)
    }
	
	
   watch(currentMenu,async(newMenu,oldMenu) => {
	  if(!newMenu||!newMenu.menuLink){
		  return
	  }
	  loadMenuPage(newMenu.menuLink).then(component => {
		   newMenu["content"]=markRaw(component.default)
		   store.addTab(newMenu)
	   }).catch(e=>{
		   console.log(e)
	   })
	   
	   
   })
   
   const loadMenuPage=(val)=>import(/* @vite-ignore */`/src/pages/${val}`)
   
   
   
   watch(
	  ()=>store.connStatus
   	 ,(newVal,oldVal)=>{
   	   if(newVal!=401){
		   return
	   }
	   openRelogin()
   })
   
   const openRelogin=()=>{
	   return ElMessageBox.prompt('登录已失效，请重新登录',null,{
   		   showCancelButton:false,
   		   showInput:true,
		   inputType:'password',
		   inputPlaceholder:'请输入密码',
		   inputPattern:/\S+/,
		   inputErrorMessage:'密码不能为空',
		   closeOnClickModal:false,
		   beforeClose: async (action, instance, done) => {
			   //console.log(action)
			   //console.log(instance.inputValue)
			   instance.confirmButtonLoading = true
			   try{
				   let resp=await loginAPI.checkLogin({loginId:app.takeSetting('loginId'),pwd:instance.inputValue})
				   
				   done()
			   }
			   catch(err){
				    instance.confirmButtonLoading=false
					ElMessage.error(err);
					console.log(err)
			   }
			   
		   }
		})
   
   }
</script>

<style scoped>
	.tabWrap{
		height:100%;
	}
	.tabWrap:deep(.el-tabs__content){
		height: calc(100% - 58px);
		overflow:auto;
	}
	
	.tabWrap:deep(.el-tabs__content .el-tab-pane){
		height:100%;
		
	}
	
	
	
	.content-box:deep(.el-tabs--card>.el-tabs__header .el-tabs__item .is-icon-close){
		top:-10px !important;
		right:-10px !important;
		/* width:14px; */
		/* visibility: hidden; */
	}
	
	/* .content-box:deep(.el-tabs--card>.el-tabs__header .el-tabs__item:hover){
		padding:0 20px;
	} */
</style>