gwlz/jp-mobile/components/jp-office-select/jp-office-select.vue

<template>
	<view style="width: 100%;"
		@tap="open"
	>
		<u--input
			v-model="labels"
			suffixIcon="arrow-right"
			suffixIconStyle="color: #909399"
			disabled
			disabledColor="#ffffff"
			:placeholder="placeholder"
			border="none"
		></u--input>
	
		<u-action-sheet
			:show="show"
			@close="show = false"
		>
		<view class="cu-bar bg-white">
			<view class="action text-blue" @tap="show=false">取消</view>
			<view class="action text-green" @tap="selectOffice">确定</view>
		</view>
		<view>
		  <ly-tree :tree-data="data"
			:props="props" 
			node-key="id" 
			:checkOnClickNode ="true"
			:showRadio="true"
			:show-checkbox ="false"
			:checkOnlyLeaf = "false"
			ref="officeTree" />
		</view>
		</u-action-sheet>
	</view>
</template>

<script>
	import officeService from "@/api/sys/officeService"
	export default {
		data() {
			return {
				labels: '',
				show: false,
				data: [],
				treeList: []
			};
		},
		props: {
		    limit: Number,
		    value: String,
		    size: String,
			placeholder: String,
		    readonly: {
		      type: Boolean,
		      default: () => { return false }
		    },
			checkOnlyLeaf: {
		      type: Boolean,
		      default: () => { return false }
		    },
			showRadio: {
		      type: Boolean,
		      default: () => { return true }
		    },
			showCheckBox: {
			  type: Boolean,
			  default: () => { return false }
			},
		    disabled: {
		      type: Boolean,
		      default: () => { return false }
		    },
			props: {
				type: Object,
				default: () => {
					return {
						children: 'children',
						label: 'name'
					}
				}
			}
		  },
		mounted() {
			officeService.treeData().then((data)=>{
				this.data = data
				this.setTreeList(this.data)
				if(this.value){
					this.treeList.forEach((node) => {
					  if (this.value === node.id) {
						this.labels = node.name
					  }
					})
				}
			})
		},
		methods:{
			open () {
				this.show = true;
				if(this.value){
					this.$nextTick(()=>{
						this.$refs.officeTree.setCheckedKeys( this.value.split(','));
					})
				}
			},
			setTreeList (datas) { // 遍历树  获取id数组
			      for (var i in datas) {
			        this.treeList.push(datas[i])
			        if (datas[i].children) {
			          this.setTreeList(datas[i].children)
			        }
			      }
			},
			selectOffice () {
				let ids = this.$refs.officeTree.getCheckedNodes().map((item)=>{
					return item.id
				}).join(",");
				let names = this.$refs.officeTree.getCheckedNodes().map((item)=>{
					return item.name
				}).join(",");
				this.labels = names
				this.$emit('input', ids)
				this.show = false
			}
		}
	}
</script>