aiot-app/pages/salesServiceManagement/accessory/components/selectWork.vue

<template>
	<view class="mainBox">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="选择工单" @clickLeft="backAdd">
		</uni-nav-bar>
		<view class="wapper-top">

		</view>
		<view class="wrapper">
			<u-list @scrolltolower="scrolltolower" class="listContent">
				<checkbox-group v-for="(item, index) in tableList" :key="index" @change="selectVal(item, index)">
					<label>
						<view class="listBox">
							<view class="listBox-sel">
								<checkbox :value="item.id" color="#fff" :checked="item.checked" />
							</view>
							<view class="listBox-con">
								<view class="listBox-bottom">
									<view>
										<text>工单编号：</text>
										<text class="value">{{ item.code }}</text>
									</view>
									<view>
										<text>计划单号：</text>
										<text class="value">{{ item.planCode }}</text>
									</view>
									<view>
										<text>计划名称：</text>
										<text class="value">{{ item.planName }}</text>
									</view>
									<view class="label-s">
										<text>报工人：</text>
										<text class="value">{{ item.executeUserName }}</text>
									</view>
									<view class="label-s">
										<text>验收人：</text>
										<text class="value">{{ item.accepterUserName }}</text>
									</view>
									<view>
										<text>验收时间：</text>
										<text class="value">{{ item.accepterTime }}</text>
									</view>
									<view>
										<text>开始时间：</text>
										<text class="value">{{ item.acceptTime }}</text>
									</view>
									<view>
										<text>结束时间：</text>
										<text class="value">{{ item.finishTime }}</text>
									</view>
									<view>
										<text>计划完成时间：</text>
										<text class="value">{{ item.planFinishTime }}</text>
									</view>
									<view>
										<text>状态：</text>
										<text class="value">已完成</text>
									</view>
								</view>
							</view>
						</view>
					</label>
				</checkbox-group>
				<u-empty class="noDate" style="margin-top: 20vh" v-if="!tableList.length"></u-empty>
			</u-list>
		</view>
		<view class="footer">
			<u-button type="success" size="small" class="u-reset-button" @click="jumpAdd">
				<view class="selBtn">选择( {{ checkListLen }} )</view>
			</u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getSalesWorkOrder
	} from '@/api/salesServiceManagement/workOrder/index.js'
	export default {
		data() {
			return {
				tableList: [],
				checkData: {},
				pageNum: 1,
				isEnd: false,
			}
		},
		computed: {
			checkListLen() {
				if (this.checkData.id) {
					return 1;
				}
				return 0;
			}
		},
		onLoad() {
			this.doSearch();
		},
		methods: {
			doSearch() {
				this.isEnd = false;
				this.page = 1;
				this.getList();
			},
			//获取列表信息
			getList() {
				if (this.isEnd) {
					return;
				}
				uni.showLoading({
					title: '加载中'
				})
				let data = {
					pageNum: this.page,
					size: 10,
				}
				getSalesWorkOrder(data).then(res => {
					if (this.page === 1) {
						this.tableList = res.list;
					} else {
						this.tableList.push(...res.list);
					}
					this.page += 1
					this.isEnd = this.tableList.length >= res.count;
					uni.hideLoading();
				}).catch((e) => {
					uni.hideLoading();
				})
			},
			selectVal(val, index) {
				this.$set(this.tableList[index], 'checked', !this.tableList[index].checked);
				this.tableList.forEach((item, i) => {
					if (item.id != val.id) {
						this.$set(this.tableList[i], 'checked', false)
					}
				})
				if (val.checked) {
					this.checkData = val;
				} else {
					this.checkData = {};
				}
			},
			scrolltolower() {
				if (this.isEnd) {
					return;
				}
				this.getList();
			},
			backAdd() {
				this.back();
			},
			jumpAdd() {
				if (!this.checkData.id) {
					this.$refs.uToast.show({
						type: "warning",
						message: "请选择一条工单数据",
					})
					return;
				}
				uni.$emit('updateWorkData', {
					data: this.checkData,
				})
				this.backAdd();
			}
		}
	}
</script>

<style scoped lang="scss">
	@import url('@/pages/salesServiceManagement/demandList/components/invoice.scss');

	.mainBox {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.wrapper {
			// flex: 1;
			height: calc(100vh - 196rpx);
			overflow: hidden;
		}
	}

	//底部按钮
	.footer {
		height: 45px;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		bottom: 0;
		width: 100%;
		height: 50px;
		border-top: 1px solid #eeecec;
		background-color: #ffffff;
		z-index: 999;

		.bottom {
			margin-left: 10rpx;
		}

		.u-reset-button {
			position: absolute;
			right: 10rpx;
			top: 20rpx;
			width: 150rpx;
		}
	}
</style>