realty/virgo.wzfrontend/console/src/components/common/projectItemTree.vue

<template>
	<div class="hui-left-tree">
		<div class="hui-left-tree-title">
			<svg-icon name="zhuangshi" width="16" height="20"></svg-icon>
			<span class="hui-left-tree-sub">{{title}}</span>
		</div>
		<div class="hui-left-tree-content">
			<el-collapse>
				<el-collapse-item v-for="item in treeData" :key="item.id">
					<template slot="title">
						<i class="iconfont huifont-shuzhuangcaidantubiao"></i>
						<span class="el-collapse-name">{{item.name}}</span>
					</template>
					<div>
						<el-tree :data="item.projectItemTargetList" :props="defaultProps">
							<div class="custom-tree-node" slot-scope="{ node, data }">
								<div class="label">{{node.label}}</div>
								<div :class="nowData.id === data.id ? 'active':''" @click.stop="nodeClick(data)"
									v-if="hasRoom ? data.roomId : true">
									<i :class="iconfontClass"></i>
								</div>
							</div>
						</el-tree>
					</div>
				</el-collapse-item>
			</el-collapse>
		</div>
	</div>

</template>

<script>
	import {
		getHouseTree,
	} from '@/httpApi/space'
	import {
		roomList
	} from '@/uitls'
	export default {
		props: {
			title: {
				type: String,
				default: '空间列表'
			},
			iconfontClass: {
				type: String,
				default: 'iconfont huifont-shexiangtou'
			},
			type: {
				type: String,
				default: ''
			},
			hasRoom: {
				type: Boolean,
				default: false
			},
			isCancel: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				treeData: [],
				defaultProps: {
					children: 'children',
					label: 'name'
				},
				nowData: {}
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				getHouseTree(this.$store.getters.project.id).then(res => {
					if (res.state) {
						if (!this.hasRoom) {
							this.defaultProps['label'] = 'name';
							this.treeData = res.data.projectItemList.map(node => {
								node.projectItemTargetList = node.projectItemTargetList.map(target => {
									target['bimIntegrateId'] = node.bimIntegrateId;
									target['projectItemName'] = node.name;
									if (this.type === 'isInit' && !this.nowData.id) {
										this.nodeClick(target, 'isInit');
									}
									return target;
								})
								return node;
							});
							if (this.treeData.length === 0) this.nodeClick({}, 'isInit');
						} else {
							this.defaultProps['label'] = 'optionName';
							this.treeData = roomList(res.data.projectItemList || []);
							let roomData = [];
							for (let i = 0; i < this.treeData.length; i++) {
								if (this.treeData[i].projectItemTargetList) {
									for (let k = 0; k < this.treeData[i].projectItemTargetList.length; k++) {
										if (this.treeData[i].projectItemTargetList[k].projectItemTargetRoomList) {
											roomData = roomData.concat(this.treeData[i].projectItemTargetList[k]
												.projectItemTargetRoomList);
										}
									}
								}
							}
							if (this.type === 'isInit' && !this.nowData.id) this.nodeClick(roomData[0], 'isInit');
						}
					}
				})
			},
			nodeClick(item, type) {
				if (this.isCancel) {
					this.nowData = this.nowData.id === item.id ? {} : item;
					this.$emit('treeclick', this.nowData, type);
				} else {
					if (this.nowData.id === item.id) return;
					this.nowData = item;
					this.$emit('treeclick', this.nowData, type);
				}
			}
		}
	}
</script>

<style></style>