FE_DQ-Client-Mini-Code/pages/assignAB/assignAB.vue

<template>
	<view class="ass-content">
		<view class="flex-align-start">
			<view class="ass-label">
				<text>A角选择</text>
			</view>
			<view class="assign-view">
				<view class="cu-bar search">
					<view class="search-form round">
						<input type="text" v-model="filterText" placeholder="请输入" confirm-type="search"></input>
						<text class="cuIcon-search"></text>
					</view>
				</view>

				<ly-tree :tree-data="data"
					:props="defaultProps" 
					ref="tree" 
					node-key="id" 
					show-radio 		
					checkOnlyLeaf		
					@check="handleCheck"
					@radio-change="handleRadioChange"
					@node-click="handleNodeClick" 
					:filter-node-method="filterNode" 
					child-visible-for-filter-node
				/>
			</view>
		</view>
		
		<view class="flex-align-start mat15">
			<view class="ass-label">
				<text>B角选择</text>
			</view>
			<view class="assign-view">
				<view class="cu-bar search">
					<view class="search-form round">
						<input type="text" v-model="filterText" placeholder="请输入" confirm-type="search"></input>
						<text class="cuIcon-search"></text>
					</view>
				</view>
		
				<ly-tree :tree-data="data"
					:props="defaultProps" 
					ref="tree" 
					node-key="id" 
					show-radio 		
					checkOnlyLeaf		
					@check="handleCheck"
					@radio-change="handleRadioChange"
					@node-click="handleNodeClick" 
					:filter-node-method="filterNode" 
					child-visible-for-filter-node
				/>
			</view>
		</view>
		
		<view class="flex-align-start mat15">
			<view class="ass-label">
				<text>已选员工</text>
			</view>
			<view class="AB-input">
				<view class="flex">
					<input disabled type="text" :value="'A角: '+A" placeholder="请选择A角"/>
					<text class="cuIcon-roundclosefill" @click="A = ''"></text>
				</view>
				<view class="flex mat15">
					<input disabled type="text" :value="'B角: '+B" placeholder="请选择B角"/>
					<text class="cuIcon-roundclosefill" @click="B = ''"></text>
				</view>
			</view>
		</view>
		
		<view class="mat40 flex-justify-center ass-foot-btn">
			<navigator url="/pages/user/user" open-type="redirect">
				<button class="cu-btn block def-btn margin-tb-sm lg round mar15" @click="bindPhoneClick">确定</button>
			</navigator>
			<navigator url="/pages/investigation/investigation" open-type="redirect">
				<button class="cu-btn block cancel-btn margin-tb-sm lg round mal15" @click="bindPhoneClick">取消</button>
			</navigator>
		</view>
	</view>
</template>

<script>
	import LyTree from '@/components/ly-tree/ly-tree.vue'
	export default {
		components: {
			LyTree
		},
		data() {
			return {
				filterNodeData: null,
				filterText: '',
				A: '小明',
				B: '小红',
				data: [{
					id: 1,
					label: '一级 1',
					children: [{
						id: 4,
						label: '二级 1-1',
						children: [{
							id: 9,
							label: '三级 1-1-1'
						}, {
							id: 10,
							label: '三级 1-1-2'
						}]
					}]
				}, {
					id: 2,
					label: '一级 2',
					children: [{
						id: 5,
						label: '二级 2-1'
					}, {
						id: 6,
						label: '二级 2-2'
					}]
				}, {
					id: 3,
					label: '一级 3',
					children: [{
						id: 7,
						label: '二级 3-1'
					}, {
						id: 8,
						label: '二级 3-2'
					}]
				}],
				defaultProps: {
					children: 'children',
					label: 'label'
				}
			};
		},
		
		onLoad() {
			// 如果初始化树时设置节点选择需要做适当延时，可以在下一个事件轮询中执行
			this.$nextTick(() => {
				this.$refs.tree.setCheckedKeys([6])
			})
		},
		watch: {
			filterText(val) {
				this.$refs.tree.filter(val);
			}
		},
		// 如果不需要不用到这些方法，需要删除相应代码，打印大量日志会造成性能损耗
		methods: {
			// 只有在"点击"修改的指定节点会触发(也就是说这个方法只会触发一次)，obj中包含当前选中
			handleCheck(obj) {
				// obj: {
				// 	checkedKeys: [9, 5], // 当前选中节点的id数组
				// 	checkedNodes: [{...}, {...}], // 当前选中节点数组
				// 	data: {...}, // 当前节点的数据
				// 	halfCheckedKeys: [1, 4, 2], // 半选中节点的id数组
				// 	halfCheckedNodes: [{...}, {...}, {...}], // 半选中节点的数组
				// 	node: Node {...} // 当前节点实例
				// }
				
				console.log('handleCheck', obj);
			},
			
			// 只要节点的选中状态改变就触发（包括设置默认选中，点击选中/取消选中），会被触发多次
			handleRadioChange(obj) {
				console.log('handleRadioChange', obj);
			},
			
			handleNodeClick(obj) {
				console.log('handleNodeClick', JSON.stringify(obj));
				console.log('getNodePath', this.$refs.tree.getNodePath(obj.data));
			},
			// 查询过滤
			filterNode(value, data) {
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			
			// handleCheck(obj) {
			// 	if (obj.node.checked) {
			// 		this.placeholder = `过滤"${obj.data.label}"的子节点`;
			// 		this.filterNodeData = obj.data;
			// 	} else {
			// 		this.placeholder = `过滤所有节点`;
			// 		this.filterNodeData = null;
			// 	}
				
			// 	// filter(val, nodeData),假如要搜索A节点下面的数据，那么nodeData代表treeData中A节点的数据
			// 	this.$refs.tree.filter(this.filterText, this.filterNodeData);
			// }
		}
	};
</script>

<style lang="scss" scoped>
	.ass-content{
		padding: 40rpx 40rpx;
		.ass-foot-btn .cu-btn.lg{
			padding: 0 100rpx;
		}
	}
	.ass-label{
		color: #00B9FF;
		font-size: 28rpx;
		margin-right: 40rpx;
	}
	.assign-view{
		border-radius: 20rpx;
		background-color: #fff;
		box-shadow: 0 0 16rpx #ccc;
		height: 600rpx;
		overflow-x: hidden;
		overflow-y: scroll;
	}
	.cu-bar .search-form{
		border-radius: 20rpx;
		background-color: #f5f5f5;
		height: 72rpx;
		line-height: 72rpx;
		input{
			height: 72rpx;
			line-height: 72rpx;
			padding: 0 40rpx;
		}
		.cuIcon-search{
			margin: 0 20rpx;
		}
	}
	.AB-input{
		view{
			background-color: #f5f5f5;
			color: #666;
			padding: 20rpx 40rpx;
			border-radius: 20rpx;
			text{
				color: #B2B2B2;
			}
		}
	}
</style>