uni-zhihuikuangshan/pages/origanization/t-c-c-contacts-info/t-c-c-contacts-info.vue

<template>
	<view class="box">
		<view class="headers">
			<view class="height"></view>
			<view class="headers_input">
				<image src="./icon/searc1.png" mode=""></image>
				<input type="filter" placeholder="搜索" v-model="filterText" />
			</view>
		</view>
		<view class="box_info_nengyuan">
			<image src="./icon/ICE.png" mode=""></image>
			<text>国家能源集团枣泉煤矿</text>
		</view>
		<ly-tree :tree-data="treeData" :ready="ready" node-key="id" ref="tree" :filter-node-method="filterNodeMethod">
		</ly-tree>
	</view>
</template>

<script>
	import LyTree from '@/components/ly-tree/ly-tree.vue'
	export default {
		components: {
			LyTree
		},
		data() {
			return {
				ready: false,
				treeData: [

				],
				searchVal: "",
				filterText: ""
			};
		},
		created() {
			this.ready = true;
			this.getcontactsinfo()
		},
		watch: {
			filterText(val) {
				this.$refs.tree.filter(val);
			}
		},
		methods: {
			getcontactsinfo() {
				this.$api.section_getlisttree({
					txl: "txl"
				}).then((res) => {
					this.treeData = res.data.data
				})
			},
			filterNodeMethod(value, data) {
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
		},
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}

	.box_info_nengyuan {
		width: 100%;
		height: 60px;
		line-height: 60px;
		margin: auto;
		display: flex;
		border-bottom: 1px solid #f5f5f5;
		background-color: #fff;
		/* margin-top: 10px; */
	}

	.box_info_nengyuan>image {
		margin-top: 10px;
		margin-left: 15px;
		width: 40px;
		height: 40px;
	}

	.box_info_nengyuan>text {
		font-size: 18px;
		font-weight: 500;
		margin-left: 10px;
	}

	.headers {
		width: 100%;
		height: 120rpx;
		background-color: #FFF;
		margin-bottom: 20rpx;
	}

	.headers_input {
		width: 80%;
		background-color: #f5f5f5;
		margin: 0 auto;
		border-radius: 40rpx;
		position: relative;
		margin-top: 30rpx;
	}

	.headers_input>input {
		width: 80%;
		margin-left: 50rpx;
		height: 60rpx;
	}

	.headers_input>image {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		z-index: 99999;
		left: 1%;
		top: 16%;
	}

	.height {
		height: 1rpx;
	}

	/deep/.ly-tree-node__label {
		color: #000000;
		font-size: 34rpx;
	}

	>>>.ly-icon-caret-right:before {
		background: url("./icon/zk1.png") no-repeat 0 0px;
		content: '';
		display: block;
		width: 16px;
		height: 16px;
		font-size: 16px;
		background-size: 16px;
	}
	>>>.ly-tree-node__expand-icon.expanded{
		    transform: rotate(0deg);
	}
	>>>.ly-tree-node__expand-icon.expanded:before {
		background: url("./icon/zk2.png") no-repeat 0 0px;
		content: '';
		display: block;
		width: 16px;
		height: 16px;
		font-size: 16px;
		background-size: 16px;
	}

	>>>.ly-tree-node__expand-icon.is-leaf::before {
		background: url("") no-repeat 0 0px;
		content: '';
		display: block;
		width: 16px;
		height: 16px;
		font-size: 16px;
		background-size: 16px;
	}
</style>