index.vue 2.12 KB
<template>
	<div ref="lpb" class="content_box">
		<el-tabs v-model="activeName" class="tabs" @tab-click="handleClick" type="card" >
			<el-tab-pane label="自然幢信息" name="zrzxx"><zrzxx></zrzxx></el-tab-pane>
			<el-tab-pane label="业主共有" name="yzgy"><yzgy v-if="yzgyLoad"></yzgy></el-tab-pane>
			<el-tab-pane label="登记簿" name="djb"><djb></djb></el-tab-pane>
			<el-tab-pane label="楼盘表" name="lpb"><lpb v-if="lpbLoad"></lpb></el-tab-pane>
			<el-tab-pane label="历史回溯" name="lshs"><lshs></lshs></el-tab-pane>
			<el-tab-pane label="附件材料" name="fjcl" @click="loading"><fjcl ref="fjcl"></fjcl></el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
import zrzxx from "./zrzxx";
import yzgy from "./yzgy";
import djb from "./djb";
import lpb from "./lpb";
import lshs from "./lshs";
import fjcl from "./../zd/fjcl/fjcl";
export default {
	name: "",
	components: {
        zrzxx,yzgy,djb,lpb,lshs,fjcl
    },
	props: {},
	data() {
		return {
			activeName: "zrzxx",
			lpbLoad:false, //默认不加载楼盘表组件
			yzgyLoad:false,
		};
	},
	methods: {
	    loading(){
	      this.$refs.fjcl.isUpload(this.$store.state.zrzbsm);
		},
		handleClick(tab, event) {
			if(!this.lpbLoad){
				this.lpbLoad = tab.name == 'lpb' ? true : false
			}
			if(!this.yzgyLoad){
				this.yzgyLoad = tab.name == 'yzgy' ? true : false
			}
		},
	},
	created() {},
	mounted() {
		this.$store.state.contentWidth = this.$refs.lpb.offsetWidth - 44;
	},
	computed: {},
	watch: {},
};
</script>
<style scoped lang="less">
.content_box{
	padding: 0 0 6px;
//     padding: 0 20px;
// 	.el-tabs{
// 		width: 100%;
// 		height: 100%;
// 		display: flex;
// 		flex-direction: column;
// 	}
// 	/deep/.el-tabs__content{
// 		width: 100%;
// 		height: 100%;
// 		flex:1;
// 		position: unset;
// 	}
// 	.el-tab-pane{
// 		width: 100%;
// 		height: 100%;
// 	}

	.el-tabs{
		height: calc(100% - 50px);
		/deep/ .el-tabs__content{
			//height: 100%;
			 /deep/.el-tab-pane{
			 	height: 100%;
			 }
			background: #eaedf5;
			padding: 0;
		}
		/deep/ .el-tabs__item {
			height: 48px;
		}
		/deep/ .el-tabs__header{
			background-color: #ffffff;
		}
	}
}
</style>