xg_total_process_master_cloud_h5/components/user-select/user-select-radio.vue

<template>
		<view style="width: 100%;"
			@tap="open"
		>
<!--			<u&#45;&#45;input-->
<!--				v-model="labels"-->
<!--				suffixIcon="arrow-right"-->
<!--				suffixIconStyle="color: #909399"-->
<!--				disabled-->
<!--				disabledColor="#ffffff"-->
<!--				:placeholder="placeholder"-->
<!--				border="none"-->
<!--			></u&#45;&#45;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="selectUsers">确定</view>
			</view>
			<view>
				  <ly-tree :tree-data="data"
					:props="props"
					node-key="id"
					:checkOnClickNode ="true"
					:showRadio="showRadio"
					:show-checkbox ="showCheckBox"
					:checkOnlyLeaf = "checkOnlyLeaf"
					ref="userTree" />
			</view>
		</u-action-sheet>
	</view>
</template>

<script>
	import userService from "@/api/sys/userService"
	export default {
		data() {
			return {
				index: '',
				show: false,
				labels:'',
				type:'',
				data: [],
				treeList: []
			};
		},
		props: {
		    limit: Number,
		    value: String,
		    size: String,
			placeholder: {
			  type: String,
			  default: () => { return '请选择用户' }
			},
		    readonly: {
		      type: Boolean,
		      default: () => { return false }
		    },
			checkOnlyLeaf: {
		      type: Boolean,
		      default: () => { return true }
		    },
			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: 'label'
					}
				}
			}
		  },
		mounted() {
			userService.treeDataRadio({type: 'ydd'}).then((data)=>{
				// 遍历数据结构中的每个部门，为其子集添加父级的 label
				data[0].children.forEach(department => {
					this.addParentLabel(department, department.label, department.id);
				});
				this.data = data
				this.setTreeList(this.data)
				let labelArra = []
				if(this.value){
					let keys = this.value.split(',')
					keys.forEach((id) => {
						this.treeList.forEach((node) => {
						  if (id === node.id) {
							labelArra.push(node.label)
						  }
						})
					 })
					this.labels = labelArra.join(',')
				}
			})
		},
		methods:{
			open (index,type) {
				this.index = index
				this.show = true;
				this.type = type;
				if(this.value){
					this.$nextTick(()=>{
						let keys = this.value.split(',')
						this.$refs.userTree.setCheckedKeys(keys);
					})
				}
			},
			setTreeList (datas) { // 遍历树  获取id数组
			      for (var i in datas) {
			        this.treeList.push(datas[i])
			        if (datas[i].children) {
			          this.setTreeList(datas[i].children)
			        }
			      }
			    },
			selectUsers() {
				let user = this.$refs.userTree.getCheckedNodes().find(item => {
					return item.type === 'user';
				});

				// 如果没有选择任何用户，则显示提示信息
				if (!user) {
					uni.showToast({
						title: '请至少选择一条数据',
						icon: 'none',
						duration: 2000
					});
				} else {
					// 提取用户的 ID 和父级 label，并形成新的对象数组
					let usersWithParentLabel = {
						id: user.id,
						label: user.label,
						parentLabel: user.parentLabel, // 获取父级 label，如果不存在则设置为 null
						parentId: user.parentId
					};

					// 将用户信息传递给其他地方
					this.$emit('input', usersWithParentLabel,this.index,this.type);

					// 在本地更新标签显示
					let names = user.label;
					this.labels = names;
					this.show = false;
				}


			},
			// 给数据结构中的子集添加父级的 label
			addParentLabel(data, parentLabel,parentId) {
				if (data.children) {
					data.children.forEach(child => {
						// 如果子集是用户节点，则添加父级的 label
						if (child.type === 'user') {
							child.parentLabel = parentLabel;
							child.parentId = parentId;
						}
						// 递归调用以处理子集的子集
						this.addParentLabel(child, parentLabel);
					});
				}
			}
		}
	}
</script>