机构和人员的选择支持清除

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

@@ -5,11 +5,18 @@
 		<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 class="tree-bar-left">
+					<view class="tree-bar-cancel" :style="{'color':cancelColor}" hover-class="hover-c" @tap="_cancel">取消
+					</view>
 				</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 class="tree-bar-right">
+					<view v-if="showClear" class="tree-bar-clear" :style="{'color':cancelColor}" hover-class="hover-c" @tap="_clear">
+						清除
+					</view>
+					<view class="tree-bar-confirm" :style="{'color':confirmColor}" hover-class="hover-c" @tap="_confirm">
+						{{multiple?'确定':''}}
+					</view>
 				</view>
 			</view>
 			<view class="tree-view">
@@ -64,7 +71,7 @@
 
 <script>
 	export default {
-		emits: ['select-change'],
+		emits: ['select-change', 'clear'],
 		name: "ba-tree-picker",
 		props: {
 			personNames : {
@@ -129,6 +136,10 @@
 				type: Boolean,
 				default: false
 			},
+			showClear: { // 是否显示清除按钮
+				type: Boolean,
+				default: true
+			},
 		},
 		data() {
 			return {
@@ -167,6 +178,23 @@
 				this._hide()
 				this.$emit("cancel", '');
 			},
+			_clear() {
+				// 清除所有选中状态
+				this.treeList.forEach((item, index) => {
+					this.treeList[index].checkStatus = 0;
+					this.treeList[index].childCheckCount = 0;
+					this.treeList[index].childCheckPCount = 0;
+				});
+				
+				// 关闭对话框
+				this._hide();
+				
+				// 触发选择变更事件，返回空值
+				this.$emit("select-change", [], []);
+				
+				// 触发清除事件
+				this.$emit("clear", '');
+			},
 			_confirm() { //多选
 				let selectedList = []; //如果子集全部选中，只返回父级 id
 				let selectedNames = [];
@@ -508,12 +536,31 @@
 		line-height: 1;
 	}
 
+	.tree-bar-left {
+		display: flex;
+		align-items: center;
+	}
+
+	.tree-bar-right {
+		display: flex;
+		align-items: center;
+		gap: 20rpx;
+	}
+
 	.tree-bar-confirm {
 		color: #0055ff;
 		padding: 15rpx;
 	}
 
-	.tree-bar-title {}
+	.tree-bar-clear {
+		color: #757575;
+		padding: 15rpx;
+	}
+
+	.tree-bar-title {
+		flex: 1;
+		text-align: center;
+	}
 
 	.tree-bar-cancel {
 		color: #757575;