aiot-app/pages/pda/workOrder/search/matterPop.vue

<template>
	<view>
		<u-popup :show="show" duration='300' :mode='mode' :closeOnClickOverlay='false'>
			<view class="content-box">

				<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(1)" :key="index" class="item100">
											{{ itm.label }}：{{ item[itm.prop] }}
										</view>


									</view>

								</view>


							</label>

						</checkbox-group>

						<view style='margin-top: 20vh;' v-if='list.length == 0'>
							<u-empty iconSize='150' textSize='32' text='暂无数据'>
							</u-empty>
						</view>


					</u-list>
				</view>

				<view class="operate_box rx-sc">
					<u-button size="small" class="u-reset-button" @click="handleClose">取消</u-button>
					<u-button size="small" class="u-reset-button" type="success" @click="save">确认 </u-button>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		tableHeader
	} from '../../common.js'
	import { getInventoryDetails } from '@/api/pda/feeding.js'
	export default {
		props: {
			matterId: [String, Number],

			categoryId: [String, Number],

			mattList: {
				type: Array,
				default: () => {}
			}
		},
		data() {
			return {
				show: true,
				mode: 'right',
				memoList: [],
				list: []

			}
		},

		created() {
			this.getList()
		},
		methods: {
			getList() {
				let param = {
					pageNum: 1,
					size: -1,
					categoryId: this.categoryId
				}
				getInventoryDetails(param).then(res => {
							let list = []
					
							list.push(
								...res.list.map(i => {
									const checked =
										this.mattList.findIndex(itm => itm.id == i.id) > -1
									return {
										checked,
										...i
									}
								})
							)
					
					
					
							this.list = list
				})
			},
			scrolltolower() {},

			save() {
				let _arr = []
				_arr = this.list.filter(f => f.checked)
				this.$emit('mattSave', _arr, this.matterId)
			},

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



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

				if (this.list[index].checked) {
					if (idx === -1) {
						this.memoList.push(this.list[index])

					}
				} else {
					if (idx > -1) {
						this.memoList.splice(idx, 1)
					}
				}

			},

			tableH(type) {
				return tableHeader(type)
			},
			handleClose() {
				this.$emit('close')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content-box {
		width: 80vw;
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		background-color: $page-bg;
	}


	.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;
		}

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

			.item100 {
				width: 100%;
				margin-top: 8rpx;
			}

			.items {
				width: 50%;
				margin-top: 8rpx;
			}
		}
	}

	.operate_box {
		background-color: #fff;
		padding: 10rpx 100rpx;

		/deep/ .u-button {
			width: 160rpx;
		}
	}
</style>