CZO_Boss/src/views/system/dept/components/deptItem.vue

<template>
	<div class="ibox">
		<el-popover placement="top" trigger="click">
			<div class="floatdiv">
				<template v-if="data.root"> 123 </template>
				<template v-else>
					<el-button size="mini" @click="updData('0', data)">添加</el-button>
					<el-button size="mini" @click="updData('1', data)">修改</el-button>
					<el-button size="mini" @click="delData(data)">删除</el-button>
				</template>
			</div>
			<span class="title" ref="title" slot="reference" :class="{ shu: !data.children || !data.children }">{{ data.label }}</span>
		</el-popover>
		<div class="line" v-if="data.children && data.children.length != 0">
			<div class="top" ref="top">
				<div class="topline"></div>
			</div>
			<div class="center" ref="center"></div>
			<div class="bottom" ref="bottom" v-for="i in point" :key="i + '' + Math.random() + '' + Math.random()" :style="{ left: i + 'px' }"></div>
		</div>
		<div class="inner">
			<div class="innerbox" ref="box" :style="{ marginRight: mr + 'px' }" v-for="item in data.children" :key="item.id + 'a'">
				<DeptItem :data="item" />
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'DeptItem',
	props: {
		data: Object
	},
	data() {
		return {
			point: [],
			mr: 20
		}
	},
	inject: ['updData', 'delData', 'resetDel'],
	mounted() {
		this.getPos()
	},
	methods: {
		getPos() {
			this.$nextTick(() => {
				let box = this.$refs.box
				if (!box || box.length == 0) return
				let center = this.$refs.center
				let top = this.$refs.top
				let title = this.$refs.title
				this.point = []
				let centerWidth = box[0].offsetWidth / 2 + box[box.length - 1].offsetWidth / 2 + (box.length - 1) * this.mr
				box.forEach((item, index) => {
					if (index != 0 && index != box.length - 1) {
						centerWidth += item.offsetWidth
					}
					this.point.push(item.offsetLeft + item.offsetWidth / 2)
				})
				if (box.length == 1) {
					centerWidth = 1
				}
				center.style.width = centerWidth + 'px'
				center.style.left = box[0].offsetWidth / 2 + 'px'
				top.style.left = centerWidth / 2 + box[0].offsetWidth / 2 - 10 + 'px'
				top.style.marginLeft = 0
				let titleLeft = centerWidth / 2 + box[0].offsetWidth / 2 - title.offsetWidth / 2
				titleLeft = titleLeft < 0 ? 0 : titleLeft
				title.style.left = titleLeft + 'px'
			})
			if (this.$parent.$el.className == 'ibox') {
				this.$parent.getPos()
			}
		}
	}
}
</script>

<style scoped lang="scss">
.ibox {
	width: 100%;
	position: relative;
	display: inline-block;
	font-size: 16px;
}
.ibox span.title {
	display: inline-block;
	width: auto;
	height: 40px;
	line-height: 40px;
	padding: 0 10px;
	background-color: #199ed8;
	border-radius: 5px;
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
	color: #fff;
	margin: 0;
}
.ibox span.shu {
	word-wrap: break-word;
	word-break: break-all;
	white-space: normal;
	width: 16px;
	height: auto;
	line-height: 26px;
	padding: 10px;
	text-align: center;
	box-sizing: content-box;
}
.ibox .inner {
	width: 100%;
	vertical-align: top;
}
.ibox .innerbox {
	display: inline-block;
	position: relative;
	vertical-align: top;
}
.line {
	position: relative;
	width: 100%;
	height: 61px;
}
.line .top {
	position: relative;
	width: 20px;
	top: 0;
}
.line .top .topline {
	position: absolute;
	width: 1px;
	height: 21px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #2538ff;
}
.line .center {
	position: absolute;
	top: 21px;
	height: 1px;
	background-color: #2538ff;
}
.line .bottom {
	position: absolute;
	height: 42px;
	width: 1px;
	background-color: #2538ff;
	top: 22px;
}
.floatdiv {
	white-space: nowrap;
	text-align: center;
	padding: 0;
}
.floatdiv button {
	padding: 5px 10px;
}
</style>