aiot-app/components/ba-tree-picker/ba-tree-picker.vue

<!-- 树形层级选择器-->
<!-- 1、支持单选、多选 -->
<template>
	<view>
		<view class="tree-cover" :class="{ show: showDialog }" @tap="_cancel"></view>
		<view class="tree-dialog" :class="{ show: showDialog }">
			<view class="tree-bar">
				<view class="tree-bar-cancel" :style="{ color: cancelColor }" hover-class="hover-c" @tap="_cancel">取消
				</view>
				<view class="tree-bar-title" :style="{ color: titleColor }">{{ title }}</view>
				<view class="tree-bar-confirm" :style="{ color: confirmColor }" hover-class="hover-c" @tap="_confirm">
					{{ multiple ? '确定' : '' }}
				</view>
			</view>
			<slot name="toolbar"></slot>
			<view class="tree-view">
				<scroll-view class="tree-list" :scroll-y="true">
					<block v-for="(item, index) in treeList" :key="index">
						<view class="tree-item" :style="[
								{
									paddingLeft: item.level * 30 + 'rpx'
								}
							]" :class="{
								itemBorder: border === true,
								show: item.isShow
							}">
							<view class="item-label">
								<view class="item-icon uni-inline-item" @tap.stop="_onItemSwitch(item, index)">
									<!-- 有下级：箭头（收起 → 右指，展开 → 下指）；无下级：留空占位保持对齐 -->
									<u-icon
										v-if="!item.isLastLevel"
										:name="item.isShowChild ? 'arrow-down' : 'arrow-right'"
										:color="switchColor || '#8a94a6'"
										size="28"
									></u-icon>
									<view v-else class="item-icon-empty"></view>
								</view>
								<!--
									交互约定：左侧（图标 + 名称）点击 = 展开 / 收起下一级，没有下级时不响应；
									右侧圆圈才是选中（单选时选中即关闭并回传）。
								-->
								<view class="uni-flex-item uni-inline-item" @tap.stop="_onItemSwitch(item, index)">
									<view class="item-name">
										{{ item.name + (item.childCount ? '(' + item.childCount + ')' : '') }}
									</view>
									<view class="item-check" v-if="selectParent ? true : item.isLastLevel"
										hover-class="hover-c" @tap.stop="_onItemSelect(item, index)">
										<view class="item-check-yes" v-if="item.checkStatus == 1"
											:class="{ radio: !multiple }" :style="{ 'border-color': confirmColor }">
											<view class="item-check-yes-part"
												:style="{ 'background-color': confirmColor }"></view>
										</view>
										<view class="item-check-yes" v-else-if="item.checkStatus == 2"
											:class="{ radio: !multiple }" :style="{ 'border-color': confirmColor }">
											<view class="item-check-yes-all"
												:style="{ 'background-color': confirmColor }"></view>
										</view>
										<view class="item-check-no" v-else :class="{ radio: !multiple }"
											:style="{ 'border-color': confirmColor }"></view>
									</view>
								</view>
							</view>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		emits: ['select-change', 'select-row'],
		name: 'ba-tree-picker',
		props: {
			valueKey: {
				type: String,
				default: 'id'
			},
			textKey: {
				type: String,
				default: 'name'
			},
			childrenKey: {
				type: String,
				default: 'children'
			},
			localdata: {
				type: Array,
				default: function() {
					return []
				}
			},
			localTreeList: {
				//在已经格式化好的数据
				type: Array,
				default: function() {
					return []
				}
			},
			selectedData: {
				type: Array,
				default: function() {
					return []
				}
			},
			title: {
				type: String,
				default: ''
			},
			multiple: {
				// 是否可以多选
				type: Boolean,
				default: true
			},
			selectParent: {
				//是否可以选父级
				type: Boolean,
				default: true
			},
			confirmColor: {
				// 确定按钮颜色
				type: String,
				default: '' // #0055ff
			},
			cancelColor: {
				// 取消按钮颜色
				type: String,
				default: '' // #757575
			},
			titleColor: {
				// 标题颜色
				type: String,
				default: '' //
			},
			switchColor: {
				// 节点切换图标颜色
				type: String,
				default: '' // #666
			},
			border: {
				// 是否有分割线
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				showDialog: false,
				treeList: []
			}
		},
		computed: {},
		methods: {
			_show() {
				console.log('--------_show-------')
				console.log(this.localdata)
				this.showDialog = true
			},
			_hide() {
				this.showDialog = false
			},
			_cancel() {
				this._hide()
				this.$emit('cancel', '')
			},
			_confirm() {
				console.log(this.treeList)
				//多选
				let selectedList = [] //如果子集全部选中，只返回父级 id
				let selectedAllList = [] // 只返回选中最底层
				let selectedNames
				let currentLevel = -1
				this.treeList.forEach((item, index) => {
					if (currentLevel >= 0 && item.level > currentLevel) {
						console.log(item.name)
						selectedAllList.push({
							id: item.id,
							name: item.name
						})
					} else {
						if (item.checkStatus === 2) {
							if (item.isShowChild == false) {
								selectedAllList.push({
									id: item.id,
									name: item.name
								})
							}

							currentLevel = item.level
							selectedNames = selectedNames ? selectedNames + ' / ' + item.name : item.name
						} else {
							currentLevel = -1
						}
					}
				})
				console.log('_confirm', selectedList)
				this._hide()
				this.$emit('select-change', selectedList, selectedNames, selectedAllList)
			},
			//格式化原数据（原数据为tree结构）
			_formatTreeData(list = [], level = 0, parentItem, isShowChild = true) {
				let nextIndex = 0
				let parentId = -1
				let initCheckStatus = 0

				if (parentItem) {
					nextIndex = this.treeList.findIndex(item => item.id === parentItem.id) + 1
					parentId = parentItem.id

					if (!this.multiple) {
						//单选
						initCheckStatus = 0
					} else initCheckStatus = parentItem.checkStatus == 2 ? 2 : 0
				}
				list.forEach(item => {
					let isLastLevel = true
					if (item && item[this.childrenKey]) {
						let children = item[this.childrenKey]
						if (Array.isArray(children) && children.length > 0) {
							isLastLevel = false
						}
					}

					let itemT = {
						id: item[this.valueKey],
						name: item[this.textKey],
						level,
						isLastLevel,
						isShow: isShowChild,
						isShowChild: false,
						checkStatus: initCheckStatus,
						orCheckStatus: 0,
						parentId,
						rootCategoryLevelId: item.rootCategoryLevelId,
						children: item[this.childrenKey],
						childCount: item[this.childrenKey] ? item[this.childrenKey].length : 0,
						childCheckCount: 0,
						childCheckPCount: 0
					}

					if (this.selectedData.indexOf(itemT.id) >= 0) {
						itemT.checkStatus = 2
						itemT.orCheckStatus = 2
						itemT.childCheckCount = itemT.children ? itemT.children.length : 0
						this._onItemParentSelect(itemT, nextIndex)
					}

					this.treeList.splice(nextIndex, 0, itemT)
					nextIndex++
				})
				console.log('this.treeList--------------------------')
				console.log(this.treeList)
			},
			// 节点打开、关闭切换
			_onItemSwitch(item, index) {
				// console.log(item)
				//console.log('_itemSwitch')
				if (item.isLastLevel === true) {
					return
				}
				item.isShowChild = !item.isShowChild
				if (item.children) {
					this._formatTreeData(item.children, item.level + 1, item)
					item.children = undefined
				} else {
					this._onItemChildSwitch(item, index)
				}
			},
			_onItemChildSwitch(item, index) {
				//console.log('_onItemChildSwitch')
				const firstChildIndex = index + 1
				if (firstChildIndex > 0)
					for (var i = firstChildIndex; i < this.treeList.length; i++) {
						let itemChild = this.treeList[i]
						if (itemChild.level > item.level) {
							if (item.isShowChild) {
								if (itemChild.parentId === item.id) {
									itemChild.isShow = item.isShowChild
									if (!itemChild.isShow) {
										itemChild.isShowChild = false
									}
								}
							} else {
								itemChild.isShow = item.isShowChild
								itemChild.isShowChild = false
							}
						} else {
							return
						}
					}
			},
			// 节点选中、取消选中
			_onItemSelect(item, index) {
				
				console.log('item-----------------------')
				console.log(item)
				if (!this.multiple) {
					//单选
					item.checkStatus = item.checkStatus == 0 ? 2 : 0

					this.treeList.forEach((v, i) => {
						if (i != index) {
							this.treeList[i].checkStatus = 0
						} else {
							this.treeList[i].checkStatus = 2
						}
					})

					let selectedList = []
					let selectedNames
					let rootCategoryLevelId
					selectedList.push(item.id)
					selectedNames = item.name
					rootCategoryLevelId = item?.rootCategoryLevelId
					this._hide()
					console.log('selectedList-----------------------')
					this.$emit('select-change', selectedList, selectedNames, rootCategoryLevelId)
					this.$emit('select-row', item)
					return
				}

				let oldCheckStatus = item.checkStatus
				switch (oldCheckStatus) {
					case 0:
						item.checkStatus = 2
						item.childCheckCount = item.childCount
						item.childCheckPCount = 0
						break
					case 1:
					case 2:
						item.checkStatus = 0
						item.childCheckCount = 0
						item.childCheckPCount = 0
						break
					default:
						break
				}
				//子节点 全部选中
				this._onItemChildSelect(item, index)
				//父节点 选中状态变化
				this._onItemParentSelect(item, index, oldCheckStatus)
			},
			_onItemChildSelect(item, index) {
				//console.log('_onItemChildSelect')
				let allChildCount = 0
				if (item.childCount && item.childCount > 0) {
					index++
					while (index < this.treeList.length && this.treeList[index].level > item.level) {
						let itemChild = this.treeList[index]
						itemChild.checkStatus = item.checkStatus
						if (itemChild.checkStatus == 2) {
							itemChild.childCheckCount = itemChild.childCount
							itemChild.childCheckPCount = 0
						} else if (itemChild.checkStatus == 0) {
							itemChild.childCheckCount = 0
							itemChild.childCheckPCount = 0
						}
						// console.log('>>>>index：', index, 'item：', itemChild.name, '  status：', itemChild
						// 	.checkStatus)
						index++
					}
				}
			},
			_onItemParentSelect(item, index, oldCheckStatus) {
				//console.log('_onItemParentSelect')
				//console.log(item)
				const parentIndex = this.treeList.findIndex(itemP => itemP.id == item.parentId)
				//console.log('parentIndex：' + parentIndex)
				if (parentIndex >= 0) {
					let itemParent = this.treeList[parentIndex]
					let oldCheckStatusParent = itemParent.checkStatus

					if (oldCheckStatus == 1) {
						itemParent.childCheckPCount -= 1
					} else if (oldCheckStatus == 2) {
						itemParent.childCheckCount -= 1
					}
					if (item.checkStatus == 1) {
						itemParent.childCheckPCount += 1
					} else if (item.checkStatus == 2) {
						itemParent.childCheckCount += 1
					}

					if (itemParent.childCheckCount <= 0 && itemParent.childCheckPCount <= 0) {
						itemParent.childCheckCount = 0
						itemParent.childCheckPCount = 0
						itemParent.checkStatus = 0
					} else if (itemParent.childCheckCount >= itemParent.childCount) {
						itemParent.childCheckCount = itemParent.childCount
						itemParent.childCheckPCount = 0
						itemParent.checkStatus = 2
					} else {
						itemParent.checkStatus = 1
					}
					//console.log('itemParent：', itemParent)
					this._onItemParentSelect(itemParent, parentIndex, oldCheckStatusParent)
				}
			},
			// 重置数据
			_reTreeList() {
				this.treeList.forEach((v, i) => {
					this.treeList[i].checkStatus = v.orCheckStatus
				})
			},
			_initTree() {
				this.treeList = []
				this._formatTreeData(this.localdata)
			}
		},
		watch: {
			localdata() {
				this._initTree()
			},
			localTreeList() {
				this.treeList = this.localTreeList
			}
		},
		mounted() {
			this._initTree()
		}
	}
</script>

<style scoped>
	.tree-cover {
		position: fixed;
		top: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		left: 0rpx;
		z-index: 100;
		background-color: rgba(0, 0, 0, 0.4);
		opacity: 0;
		transition: all 0.3s ease;
		visibility: hidden;
	}

	.tree-cover.show {
		visibility: visible;
		opacity: 1;
	}

	.tree-dialog {
		position: fixed;
		top: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		left: 0rpx;
		background-color: #fff;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		z-index: 102;
		top: 20%;
		transition: all 0.3s ease;
		transform: translateY(100%);
	}

	.tree-dialog.show {
		transform: translateY(0);
	}

	.tree-bar {
		/* background-color: #fff; */
		height: 90rpx;
		padding-left: 25rpx;
		padding-right: 25rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		border-bottom-width: 1rpx !important;
		border-bottom-style: solid;
		border-bottom-color: #f5f5f5;
		font-size: 32rpx;
		color: #757575;
		line-height: 1;
	}

	.tree-bar-confirm {
		color: #0055ff;
		padding: 15rpx;
	}

	.tree-bar-title {}

	.tree-bar-cancel {
		color: #757575;
		padding: 15rpx;
	}

	.tree-view {
		flex: 1;
		padding: 20rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		overflow: hidden;
		height: 100%;
	}

	.tree-list {
		flex: 1;
		height: 100%;
		overflow: hidden;
	}

	.tree-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 1;
		height: 0;
		opacity: 0;
		transition: 0.2s;
		overflow: hidden;
	}

	.tree-item.show {
		height: 90rpx;
		opacity: 1;
	}

	.tree-item.showchild:before {
		transform: rotate(90deg);
	}

	.tree-item.last:before {
		opacity: 0;
	}

	.item-icon {
		width: 28rpx;
		height: 28rpx;
		margin-right: 8rpx;
		padding-right: 20rpx;
		padding-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 无下级节点：空占位，宽度与箭头一致，保证名称左对齐 */
	.item-icon-empty {
		width: 28rpx;
		height: 28rpx;
	}

	.item-label {
		flex: 1;
		display: flex;
		align-items: center;
		height: 100%;
		line-height: 1.2;
	}

	.item-name {
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 450rpx;
	}

	.item-check {
		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.item-check-yes,
	.item-check-no {
		width: 20px;
		height: 20px;
		border-top-left-radius: 20%;
		border-top-right-radius: 20%;
		border-bottom-right-radius: 20%;
		border-bottom-left-radius: 20%;
		border-top-width: 1rpx;
		border-left-width: 1rpx;
		border-bottom-width: 1rpx;
		border-right-width: 1rpx;
		border-style: solid;
		border-color: #0055ff;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
	}

	.item-check-yes-part {
		width: 12px;
		height: 12px;
		border-top-left-radius: 20%;
		border-top-right-radius: 20%;
		border-bottom-right-radius: 20%;
		border-bottom-left-radius: 20%;
		background-color: #0055ff;
	}

	.item-check-yes-all {
		margin-bottom: 5px;
		border: 2px solid #007aff;
		border-left: 0;
		border-top: 0;
		height: 12px;
		width: 6px;
		transform-origin: center;
		/* #ifndef APP-NVUE */
		transition: all 0.3s;
		/* #endif */
		transform: rotate(45deg);
	}

	.item-check .radio {
		border-top-left-radius: 50%;
		border-top-right-radius: 50%;
		border-bottom-right-radius: 50%;
		border-bottom-left-radius: 50%;
	}

	.item-check .radio .item-check-yes-b {
		border-top-left-radius: 50%;
		border-top-right-radius: 50%;
		border-bottom-right-radius: 50%;
		border-bottom-left-radius: 50%;
	}

	/*
	 * 单选（radio）选中态：直接实色填充成圆点。
	 * .item-check-yes-all 本来是用 border 拼出来的对勾（rotate(45deg)），
	 * 那是多选的勾选样式，套在单选圆圈里会显示成一个斜块。
	 * 这里覆盖成实心圆点：颜色优先用行内传入的 confirmColor，没传时用兜底色，
	 * 保证不传 confirmColor 的调用方（如 Assign.vue）也能看出哪一项被选中。
	 */
	.item-check .radio .item-check-yes-all {
		width: 100%;
		height: 100%;
		margin-bottom: 0;
		border: 0;
		transform: none;
		background-color: #0055ff;
		border-top-left-radius: 50%;
		border-top-right-radius: 50%;
		border-bottom-right-radius: 50%;
		border-bottom-left-radius: 50%;
	}

	.hover-c {
		opacity: 0.6;
	}

	.itemBorder {
		border-bottom: 1px solid #e5e5e5;
	}
</style>