xg_total_process_master_cloud_h5/pages/cw/invoice/WorkPlaceChoose.vue

<template>
	<view style="width: 100%;">
		<u-action-sheet :show="show" @close="onClose">
			<view class="cu-bar bg-white">
				<view class="action text-blue"  @tap="onClose">取消</view>
				<view class="action text-green" @tap="selectUsers">确定</view>
			</view>
			<view style="max-height: 300px; overflow-y: auto;">
				<view v-for="item in data" :key="item.id" style="padding: 10px;">
					<view @tap="onItemClick(item)" style="display: flex; align-items: center;">
						<view style="flex: 1;text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ item.name }}</view>
						<view v-if="item.checked" style="color: #409eff;">已选择</view>
					</view>
				</view>
			</view>
			<view v-if="!allDataLoaded && !loading" style="text-align: center; padding: 10px;">
				<button class="load-more-button" @tap="loadMore">加载更多</button>
			</view>
			<view v-if="loading" style="text-align: center; padding: 10px;">
				Loading...
			</view>
		</u-action-sheet>
	</view>
</template>

<script>
	import workClientService from '@/api/cw/workClientInfo/WorkClientService'

	export default {
		data() {
			return {
				show: false,
				labels:'',
				data: [],
				localMode: '', // 声明一个本地数据属性
				allDataLoaded: false, // 跟踪是否所有数据都已加载
				loading: false, // 跟踪加载状态
				pageSize: 10, // 每页获取的项目数
				currentPage: 1 // 当前页数
			};
		},
		props: {
			value: String,
			placeholder: {
				type: String,
				default: '请选择客户'
			},
			readonly: {
				type: Boolean,
				default: false
			},
			disabled: {
				type: Boolean,
				default: false
			},
		},
		mounted() {
			// this.loadData();
		},
		methods: {
			init() {
				this.pageSize = 10
				this.currentPage = 1
				this.show = true;
				//选项的选择模式，单选或多选，默认为多选
				this.localMode = 'single'
				this.loadData();
			},
			onItemClick(item) {
				if (this.localMode  === 'single') {
					this.data.forEach(node => {
						node.checked = node === item;
					});
				} else {
					item.checked = !item.checked;
				}
			},
			selectUsers() {
				if (this.data.some(item => item.checked)) {
					let checkedItems = this.data.filter(item => item.checked)[0]; // 获取第一个符合条件的元素


					this.$emit('input', checkedItems);
					this.onClose()
				} else {
					uni.showToast({
						title: '请至少选择一条数据',
						icon: 'none',
						duration: 2000
					});
				}

			},
			loadData() {
				this.loading = true; // 开始加载数据，显示loading状态
				workClientService.listTree({ isTrue: '1', current: this.currentPage, size: this.pageSize })
						.then(data => {
							this.loading = false; // 数据加载完成，隐藏loading状态
							// 检查新返回的数据是否已经存在，如果存在，则不添加到原始数据数组中
							let newData = data.records.filter(record => !this.data.some(item => item.id === record.id));
							if (this.currentPage === 1) {
								// 如果是加载第一页，则直接赋值给 data
								this.data = newData.map(item => ({ ...item, checked: false }));
							} else {
								// 如果不是第一页，则追加到原始数据数组后面
								this.data = [...this.data, ...newData.map(item => ({ ...item, checked: false }))];
							}
							if (data.records.length < this.pageSize) {
								this.allDataLoaded = true; // 如果返回的数据少于每页数量，则表示所有数据都已加载
							}
							if (this.value) {
								let keys = this.value.split(',');
								this.data.forEach(node => {
									if (keys.includes(node.id)) {
										node.checked = true;
									}
								});
								this.labels = this.data.filter(node => node.checked).map(node => node.label).join(',');
							}
						})
						.catch(e => {
							this.loading = false; // 数据加载失败，隐藏loading状态
							throw e;
						});
			},


			loadMore() {
				this.currentPage++; // 增加当前页数
				this.loadData(); // 加载更多数据
			},
			onClose() {
				// 在关闭操作中清除已选择标记
				this.data.forEach(item => {
					item.checked = false;
				});
				this.labels = ''; // 清空标签
				this.show = false;
				this.data = []; // 清空原始数据
			},
		}
	};
</script>

<style scoped>
	.load-more-button {
		background-color: #409eff;
		color: #fff;
		border: none;
		padding: 10px 20px;
		border-radius: 4px;
		cursor: pointer;
	}
</style>