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

<!-- 树形层级选择器-->
<!-- 1、支持单选、多选 -->
<template>
	<view class="xmmain">
		<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>
			<view class="tree-view">
				<scroll-view class="tree-list" :scroll-y="true">
					<uni-data-checkbox selectedTextColor='#343434'  :map="map" :multiple="multiple" v-model="bgvalue" :localdata="localdata" @change="checkboxChangeadr"></uni-data-checkbox>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		emits: ['select-change'],
		name: "ba-tree-picker",
		props: {
			map:{
				type: Object,
				default: {},
			},
			mvalue:{
				type: Array,
				default: function() {
					return []
				}
			},
			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: ''
			},
			deptType:{
				type: String,
				default: ''
			},
			multiple: { // 是否可以多选
				type: Boolean,
				default: true
			},
			selectParent: { //是否可以选父级
				type: Boolean,
				default: true
			},
			confirmColor: { // 确定按钮颜色
				type: String,
				default: '' // #FE5706
			},
			cancelColor: { // 取消按钮颜色
				type: String,
				default: '' // #757575
			},
			titleColor: { // 标题颜色
				type: String,
				default: '' //
			},
			switchColor: { // 节点切换图标颜色
				type: String,
				default: '' // #666
			},
			border: { // 是否有分割线
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				showDialog: false,
				treeList: [],
				checkArr:[],
				bgvalue:[1,2]
			}
		},
		computed: {},
		methods: {
			checkboxChangeadr(e){
				this.checkArr=e.detail.data;
			},
			_show() {
				this.showDialog = true
			},
			_hide() {
				this.showDialog = false
			},
			_cancel() {
				this._hide()
				this.$emit("cancel", '');
			},
			_confirm() { //多选
				
				this._hide()
				if(this.checkArr.length>0){
					this.$emit("select-change", this.checkArr);
				}
				// this.$emit("select-change", selectedList, selectedNames);	
			},
		},
		watch: {
			mvalue(data){
				console.log(data,1)
				this.bgvalue=data
			}
		},
		mounted() {
			this.bgvalue=this.mvalue;
			// this._initTree();
		}
	}
</script>

<style scoped>
.xmmain /deep/ .uni-data-checklist	.checklist-group{display: block;}
.xmmain /deep/ .uni-data-checklist .checklist-group .checklist-box{padding: 28rpx 0;margin: 0;}
 
 .xmmain /deep/ .uni-data-checklist .checklist-group .checklist-box .checklist-text{color: #343434;font-size: 34rpx;font-weight: bold;}
.xmmain /deep/ .uni-data-checklist .checklist-group .checklist-box .checkbox__inner{margin-right: 32rpx;}
.xmmain  /deep/ .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checkbox__inner{border-color: #FF440B; background-color: #FF440B;}
 .xmmain /deep/ .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checklist-text{color: #343434;}
.xmbtn{height: 100rpx;display: flex;align-items: center;justify-content: center;
 &.btn1{width: 200rpx;}
 &.btn2{background-color: $uni-color-fa;}
}
	.tree-cover {
		position: fixed;
		top: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		left: 0rpx;
		z-index: 100;
		background-color: rgba(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: 100002;
		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: #FE5706;
		padding: 15rpx;
	}

	.tree-bar-title {}

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

	.tree-view {
		flex: 1;
		padding: 20rpx 36rpx;
		/* #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;
	}

	.switch-on {
		width: 0;
		height: 0;
		border-left: 16rpx solid transparent;
		border-right: 16rpx solid transparent;
		border-top: 20rpx solid #666;
	}

	.switch-off {
		width: 0;
		height: 0;
		border-bottom: 16rpx solid transparent;
		border-top: 16rpx solid transparent;
		border-left: 20rpx solid #666;
	}

	.item-last-dot {
		position: absolute;
		width: 12rpx;
		height: 12rpx;
		border-radius: 100%;
		background: #666;
	}

	.item-icon {
		width: 26rpx;
		height: 30rpx;
		margin-right: 8rpx;
		padding-right: 20rpx;
		padding-left: 20rpx;
	}

	.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; */
		font-size: 34rpx;
		font-weight: bold;
		line-height: 1;
	}

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

	.item-check-yes,
	.item-check-no {
		width: 32rpx;
		height: 32rpx;
		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: #FE5706;
		border-radius: 8rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		 /* background-color: #FE5706; */
	}
	.item-check-yes{
		border: none;
		background-color: #FE5706;
	}

	.item-check-yes-part {
		width: 24rpx;
		height: 6rpx;
		border-top-left-radius: 20%;
		border-top-right-radius: 20%;
		border-bottom-right-radius: 20%;
		border-bottom-left-radius: 20%;
		background-color: #ffffff;
	}

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

	.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%;
	}

	.hover-c {
		opacity: 0.6;
	}

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