aiot-app/pages/repair/select_repair/index.vue

<template>
	<view class="">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="选择设备" @clickLeft="back"></uni-nav-bar>
		<uni-data-picker ref="pickerDeptName" :localdata="treeList" @change="handleChange"
			:map="{text:'name','value':'id'}" v-show="pickerDeptShow">
		</uni-data-picker>
		<view v-if="tableList && tableList.length!==0">
			<view class="p20">
				<radio-group @change="checkboxChange">
					<label  v-for="(item,idx) in tableList" :key="idx" class="flex mb20 h">
						<radio :value="item.assetCode" :checked="item.checked" />
						<view class="flex flexBox">
							<view class="name">
								{{item.assetName}}
							</view>
							<view class="">
								<view class="mb10">{{item.assetCode}}</view>
								<view class="col">{{item.classificationInfo}}</view>
							</view>
						</view>
					</label>
			</radio-group>
			</view>

			<view class="footer">
				<view class="">
					<text class="footer-span-btn" @click="resetEqui">选择设备</text>
					<text class="footer-span-btn" @click="submit">确定({{checkListLen}})</text>
				</view>

			</view>
		</view>
		<view class="" v-else>
			<view class="no_data">
				<view class="center">
					<uni-icons type="chat-filled" size="36"></uni-icons>
				</view>
				<view class="center">
					暂无数据
				</view>

			</view>

			<view class="footer footer-right">

				<view class="center">
					<text class="footer-span-btn" @click="resetEqui">选择设备</text>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import {
		get,
		postJ,
		post
	} from "@/utils/api.js"
	let [page, size, isEnd] = [1, 10, true];
	export default {
		data() {
			return {
				treeList: [],
				pickerDeptShow: false,
				classificationId: "",
				tableList: [],
				selectList: []
			}
		},
		computed: {
			checkListLen() {
				const list = this.tableList.filter((el) => {
					if (el.checked) {
						return el
					}
				})
				return list.length
			}
		},
		onShow() {
			this.getTreeList()
		},
		onReachBottom() {
			if (isEnd) {
				return;
			}
			page++
			this.getList()
		},
		methods: {
			submit() {
				let list = this.tableList.filter(item => item.checked)
				this.$store.dispatch("repair/setSelectEqui", list)
				uni.$emit('selectEqui', list);
				this.back()
			},
			resetEqui() {
				this.tableList = []
				this.pickerDeptShow = true
				this.$refs.pickerDeptName.show()

			},
			checkboxChange(e) {
				console.log(e)
				this.tableList.forEach(item => {
					if (item.assetCode == e.detail.value) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				})
			},
			handleChange(e) {
				let data = e.detail.value[e.detail.value.length - 1]
				this.classificationId = data.value
				page = 1;
				isEnd = true;
				this.getList();

			},
			getList() {
				uni.showLoading({
					title: "数据加载中"
				});
				let par = {
					assetType: "SHENGCHANSHEBEI",
					page,
					size
				}
				
				par[decodeURIComponent(encodeURIComponent('classificationIds[]'))] = this.classificationId
				get(this.apiUrl + '/asset/page', par).then(res => {
					// console.log(res)
					if (res.success) {
						let data = res.data.records;
						let pageTotal = res.data.pages;
						if (page === 1) {
							data.forEach(el => {
								el.num = 0
							})
							this.tableList = data;
						} else {
							data.forEach(element => {
								element.num = 0;
								this.tableList.push(element);
							});
						}
						page < pageTotal ? (isEnd = false) : (isEnd = true);
					}
					uni.hideLoading()
				})
			},
			getTreeList() {
				get(this.apiUrl + "/classify/getClassify?id=1").then(res => {
					if (res.success) {
						this.treeList = res.data[0].children.map(item => {
							item.checked = false
							return item
						})
						this.pickerDeptShow = true
						this.$refs.pickerDeptName.show()
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.uni-data-tree-input {
		display: none;
	}

	.p20 {
		padding: 20rpx 20rpx 100rpx;
	}

	.mb20 {
		margin-bottom: 20rpx;
	}

	.mb10 {
		margin-bottom: 10rpx;
	}

	.flex {
		display: flex;
	}

	.h {
		min-height: 80rpx;
		align-items: top;
		border-bottom: 1px solid #eaeaea;
		padding-bottom: 20rpx;
	}

	.flexBox {
		flex: 1;
		font-size: $uni-font-size-base;
		justify-content: space-between;
		margin-left: 10rpx;

		.col {
			font-size: $uni-font-size-sm;
			color: #555;
		}
	}

	.footer {
		position: fixed;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		bottom: 0;
		width: 100%;
		height: 90rpx;
		text-align: center;
		border-top: 1rpx solid #eeecec;
		background-color: #FFFFFF;

		.bottom {
			font-size: $uni-font-size-lg;
			margin-left: 20rpx;

			.select-all {
				color: $j-primary-green;
			}
		}

		.footer-span-btn {
			height: 30rpx;
			line-height: 30rpx;
			font-size: $uni-font-size-lg;
			color: #ffffff;
			margin-right: 20rpx;
			padding: 10rpx 20rpx;
			text-align: center;
			background-color: $j-primary-green;
			border-radius: 40rpx;
		}
	}

	.footer-right {
		justify-content: flex-end;
	}

	.no_data {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		.center {
			text-align: center;
			color: #555;
			font-size: $uni-font-size-base;
		}
	}
</style>