jsy-app/components/custom-land-tree/custom-land-tree.vue

<template>
	<view>
		<view class="uni-select" @click="dropdownTreeClick">
			<view style="position: absolute;width: 100%;height: 100%;left: 0;z-index: 1;"></view>
			<input v-model="inputLabel" placeholder="请选择" class="uni-select__input-text" :disabled="true" />
			<uni-icons :type="dropdownTreeShow? 'top' : 'bottom'" size="14" color="#999" />
		</view>
		<view class="uni-select__selector" v-show="dropdownTreeShow">
			<view class="uni-popper__arrow"></view>
			<!-- <dropdownTree ref="DropdownTreeRef" :data="companys" :labelField="labelField" :valueField="valueField"
				:defaultCheckedKeys="defaultCheckedKeys" expandChecked @change="handleTreeChange"></dropdownTree> -->

			<dropdownTree ref="DropdownTreeRef" :data="companys" @getLand="getLand" @select="selectLand"></dropdownTree>
		</view>
	</view>
</template>

<script>
	import dropdownTree from './dropdownTree.vue'
	import {
		companyTreeSelect
	} from "@/api/system/company.js"
	import {
		getLandAndDevice
	} from "@/api/system/land.js"

	export default {
		name: 'custom-land-tree',
		components: {
			dropdownTree
		},
		props: {
			value: { //父组件v-model绑定的变量
				type: [String, Number],
				default: ""
			},
			defaultLand: {
				type: Object,
				default: null
			},
			selectType: {
				type: [String, Number],
				default: 1 // 1公司，2地块
			}
		},
		model: {
			// 需要双向绑定的 props 变量名称，也就是父组件通过 v-model 与子组件双向绑定的变量
			prop: 'value',
			// 定义由 $emit 传递变量的名称
			event: 'modelValueEmit'
		},
		data() {
			return {
				dropdownTreeShow: false,
				inputLabel: "",
				modelValue: this.value, //接收父组件中传递的v-model绑定的变量
				companys: [],
			}
		},
		watch: {
			// 监听 modelValue 临时变量，如果临时变量发生变化，那么通过 $emit 将新的值传递给父组件
			modelValue(value) {
				// 【注意】modelValueEmit 需要和 model.event 定义的值一致
				this.$emit('modelValueEmit', this.modelValue)
			}
		},
		mounted() {
			this.getCompany();
			if (this.defaultLand) {
				this.setSelectData(this.defaultLand);
			}
		},
		methods: {
			async getCompany() {
				const obj = {
					status: 0,
					delFlag: "0",
					companyTypes: [1, 2, 3],
				}
				const that = this;
				companyTreeSelect(obj).then(response => {
					this.companys = response.data;
				});
			},
			async getLand(e) {
				const query = {
					companyId: e.node.rootCompanyId,
					companyGroupId: e.node.id,
					status: 0,
					delFlag: 0,
					pageNum: 1,
					pageSize: 999,
				}
				getLandAndDevice(query).then(res => {
					this.$refs.DropdownTreeRef.addLand(e, res.rows);
				}).catch(error => {})
			},
			setSelectData(currentItem) {
				if (this.modelValue == currentItem.id) {
					this.dropdownTreeShow = false;
					return;
				}
				this.inputLabel = currentItem.landName;
				this.modelValue = currentItem.id; //子组件变量发生变化，会触发监听，将子组件变化的值传递给父组件的v-model绑定的变量
				this.dropdownTreeShow = false;
			},
			//点击选中节点复选框事件
			selectLand(e) {
				this.setSelectData(e);
				this.$emit('change', e);
			},
			//点击选择
			dropdownTreeClick() {
				this.dropdownTreeShow = !this.dropdownTreeShow;
			},
		}
	}
</script>

<style lang="scss">
	/* 下拉树样式开始 */
	.uni-select__selector {
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
		position: absolute;
		top: calc(100% + 12px);
		left: 0;
		width: 100%;
		background-color: #FFFFFF;
		border: 1px solid #EBEEF5;
		border-radius: 6px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		z-index: 9999;
		padding: 4px 0;
	}

	.uni-popper__arrow,
	.uni-popper__arrow::after {
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border-color: transparent;
		border-style: solid;
		border-width: 6px;
	}

	.uni-popper__arrow {
		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
		top: -6px;
		left: 10%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	.uni-popper__arrow::after {
		content: " ";
		top: 1px;
		margin-left: -6px;
		border-top-width: 0;
		border-bottom-color: #fff;
	}

	.uni-select {
		font-size: 14px;
		border: 1px solid #e5e5e5;
		box-sizing: border-box;
		border-radius: 4px;
		padding: 0 5px;
		padding-left: 10px;
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		user-select: none;
		/* #endif */
		flex-direction: row;
		align-items: center;
		border-bottom: solid 1px #e5e5e5;
		width: 100%;
		flex: 1;
		height: 35px;

		&--disabled {
			background-color: #f5f7fa;
			cursor: not-allowed;
		}
	}

	.uni-select__input-text {
		width: 100%;
		color: #333;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		overflow: hidden;
		font-size: 14px;
	}

	/* 下拉树样式结束 */
</style>