aiot-app/pages/pda/feeding/single.vue

<template>
	<view class="content-box">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="出库单" background-color="#F7F9FA"
			color="#404446" @clickLeft="back"></uni-nav-bar>
			
			
			<view class="top-wrapper">
				<view class="searchBox rx-bc">
					<input v-model="keyWord" placeholder="请输入关键字搜索" class="searchInput" />
			
					<view class="rx-sc">
					
						<u-button @click="doSearch" type="success" size="small" class="u-reset-button" text="搜索">
						</u-button>
					</view>
			
				</view>
			</view>
			
			

		<view class="list_box">
			<u-list @scrolltolower="scrolltolower">

				<checkbox-group v-for="(item, index) in list" :key="index" @change="e => selectVal(e, item, index)">
					<label class="listBox rx-bs">

						<view class="listBox-sel">
							<checkbox :value="item.code" color="#fff" :disabled="item.disabled"
								:checked="item.checked" />
						</view>

						<view class="listBox-con">
							<view class="listBox-top rx-bc">
								<view> {{ item.name }}</view>
								<view class="code">{{ item.code}}</view>
							</view>

							<view class="listBox-bottom rx">
								<view v-for="(itm, index) in tableH(item.rootCategoryLevelId)" :key="index"
									class="items" v-if="!itm.formatter">
									<text>{{ itm.label }}</text>{{ item[itm.prop] }}
								</view>
							
								<view 
								v-if="[1,2, 9].includes(item.rootCategoryLevelId)"
									class="items">
									<text>物料代号</text> {{item.extInfo.materielCode }}
								</view>
								
								<view
									v-if="[1,2, 9].includes(item.rootCategoryLevelId)"
									class="items">
									<text>刻码</text> {{item.extInfo.engrave }}
								</view>
								

							</view>

						</view>


					</label>

				</checkbox-group>
				<!--  -->
			</u-list>

		</view>

		<view class="bottom-wrapper rx-bc">
			<view>

			</view>
			<view>
				<u-button type="success" size="small" class="u-reset-button" @click="jumpAdd">
					<view> 选择 </view>
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		tableHeader
	} from './single.js'

	import {
		feedOutInOrder
	} from '@/api/pda/workOrder.js'
	export default {
		data() {
			return {
				taskId: null,
				id: null,
				list: [],
				memoList: [],

				storageKey: null,
				
				keyWord: ''
			}
		},

		onLoad(option) {

			this.id = option.id
			if (option.taskId == 'undefined') {
				this.taskId = null
			} else {
				this.taskId = option.taskId || null
			}
			if (option.storageKey) {
				this.storageKey = option.storageKey

				this.memoList = []


				let _arr = (this.storageKey && uni.getStorageSync(this.storageKey)) || []
				this.memoList = [..._arr[0].modelList, ..._arr[0].equipmentList, ..._arr[0].instanceList, ..._arr[0]
					.aridRegionList, ..._arr[0].turnover, ..._arr[0].palletList, ..._arr[0].revolvingDiskList, ..._arr[
						0].semiProductList
				]


			}

			this.getList()
		},


		onUnload() {
			if (this.storageKey) {
				uni.removeStorage(this.storageKey)
			}

		},


		methods: {

			scrolltolower() {},
			getList() {
				let param = {
					workOrderId: this.id,
					taskId: this.taskId
				}
				feedOutInOrder(param).then(res => {
					this.list.push(
						...res.map(i => {
							const checked =
								this.memoList.findIndex(itm => itm.id === i.id) > -1

							return {
								checked,
								...i,

							}
						})
					)
				})
			},
			
			doSearch() {
				 console.log(this.list)
			},

			tableH(type) {
				return tableHeader(type)
			},

			selectVal(e, val, index) {
				this.list[index].checked = !this.list[index].checked

				const idx = this.memoList.findIndex(
					item => item.id === this.list[index].id
				)

				if (this.list[index].checked) {
					if (idx === -1) {
						this.memoList.push(this.list[index])
					}
				} else {
					if (idx > -1) {
						this.memoList.splice(idx, 1)
					}
				}
			},


			jumpAdd() {
				uni.$emit('setSelectList', this.memoList, this.id)
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-box {
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		background-color: $page-bg;
	}
	
	.searchBox {
		background-color: #dedede;
		height: 90rpx;
		padding: 0 20rpx;
	
		.menu_icon {
			width: 60rpx;
			height: 60rpx;
			margin-right: 20rpx;
		}
	
		input {
			height: 70rpx;
			width: 480rpx;
			background: #f9f9f9 !important;
			padding-left: 10rpx;
			border-radius: 5rpx;
		}
	
	}


	.list_box {
		flex: 1;
		overflow: hidden;
		padding: 4rpx 0;


		.u-list {
			height: 100% !important;
		}


	}


	.listBox {
		margin-top: 8rpx;
		padding: 8rpx 24rpx;
		background: #fff;


		/deep/ .uni-checkbox-input-checked {
			background-color: $theme-color !important;
			border-color: $theme-color !important;
		}

		.listBox-con {
			width: 650rpx;
			font-weight: 400;
		}

		.listBox-top {
			margin-top: 6rpx;
			color: #090A0A;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 800;
		}

		.listBox-bottom {
			color: #090A0A;
			font-size: 24rpx;
			font-style: normal;
			flex-wrap: wrap;

			.items {

				width: calc(50% - 1px);
				border-left: 1rpx solid #E3E5E5;
				border-right: 1rpx solid #E3E5E5;
				border-bottom: 1rpx solid #E3E5E5;
				box-sizing: border-box;
				word-break: break-all;

				text {
					display: inline-block;
					background: #F7F9FA;
					padding: 8rpx 10rpx;
					color: #157A2C;

				}

				&:nth-child(1),
				&:nth-child(2) {
					border-top: 1rpx solid #E3E5E5;
					margin-top: 8rpx;
				}

			}

		}
	}

	.bottom-wrapper {
		height: 80rpx;
		background: #fff;
		padding: 0 32rpx;

		/deep/ .uni-checkbox-input-checked {
			background-color: $theme-color !important;
			border-color: $theme-color !important;
		}
	}
</style>