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

<template>
	<view style="width: 100%;" @tap="open">
		<u--input v-model="labels" suffixIcon="arrow-right" suffixIconStyle="color: #17a2f8" 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>{{title}}</view>
				<view class="action text-green" @tap="selectUser">确定</view>
			</view>
			<view class="allsrc">
				<scroll-view scroll-y class="src1">
					<view v-for="item in tab1" class="tab1" @click="tab1click(item)">
						<text :class="item.id==index1?'tab1_seltext':'tab1_text '"
							class="tab1_text">{{ item.name }}</text>
						<u-badge :absolute="true" :offset="[0,0]" type="primary" :value="getSelect(item.id)"></u-badge>
					</view>
				</scroll-view>
				<scroll-view scroll-y class="src2">
					<view class="tab2">
						<view class="tab2_text" v-for="item in tab2" @click="tab1click2(item)"
							:class="item.check?'current':''">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
			</view>
		</u-action-sheet>
	</view>
</template>

<script>
	import officeService from "@/api/sys/officeService"
	import userService from "@/api/sys/userService"
	export default {
		data() {
			return {
				index1: "",
				tab1: [],
				tab2: [],
				labels: '',
				show: false,
				data: [],
				selectList: [],
				userList: [],
			}
		},
		props: {
			limit: Number,
			value: String,
			size: String,
			placeholder: String,
			title: 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({
				parentId:"1770354728635834369"
			}).then((data) => {
				
				data = data.filter(item => item.type == '3')
				this.tab1 = data
				this.index1 = data[0].id
				userService.officeList().then(res => {
					this.userList = res
					this.userList = this.userList.map(item => ({
						...item,
						check: false
					}));
					this.tab1click(this.tab1[0])
				})
			})

		},
		methods: {
			open() {
				this.show = true;

				if (this.value) {
					let u = this.value.split(",")
					this.$nextTick(() => {
						for (let i = 0; i < this.userList.length; i++) {
							let b = u.filter(t => t==this.userList[i].id)
							if(b.length>0) {
								this.$set(this.userList[i], "check", true);
								this.selectList.push(this.userList[i])
							}
						}
					})
				}
			},

			selectUser() {
				let ids = this.selectList.map((item) => {
					return item.loginName
				}).join(",");
				let names = this.selectList.map((item) => {
					return item.name
				}).join(",");
				this.labels = names
				this.$emit('input', ids)
				this.show = false
			},
			tab1click(e) {
				this.index1 = e.id;
				this.tab2 = this.userList.filter(item => item.officeDTO.id == e.id)

			},
			tab1click2(item) {
				item.check = !item.check
				if (item.check) {
					this.selectList.push(item)
				} else {
					this.selectList = this.selectList.filter(e => item.id != e.id)
				}
			},
			getSelect(id) {
				let s = this.selectList.filter(item => item.officeDTO.id == id)
				return s.length
			}
		}
	}
</script>

<style>
	.allsrc {
		display: flex;
		height: 60vh;
	}

	.src1 {
		flex: 1;
		background: #f5f5f5;
	}

	.tab1 {
		height: 80rpx;
		color: black;
		text-align: center;
		justify-content: center;
		align-items: center;
		display: flex;
		position: relative;
	}

	.tab1_seltext {
		background: #fff;
		padding: 16rpx 40rpx;
		width: 100%;
	}

	.src2 {
		flex: 2;
		background: #fff;
		margin-left: 3rpx;
		margin-right: 3rpx;
		height: 100%;
	}

	.tab2 .u-button {
		width: 40% !important;
		float: left;
		margin: 20rpx;
	}

	.describle {
		text-align: center;
		font-size: 22rpx;
		color: #5ac775;
		height: 40px;
		line-height: 40px;
	}



	.tab2_text {
		height: 40px;
		font-size: 14px;
		line-height: 40px;
	}

	.tab2 .current {
		color: #36a7f3;
	}
</style>