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 ListData" :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='DTOList.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'
	export default {
		props: {
			matterId: [String, Number],

			DTOList: {
				type: Array,
				default: () => {}
			},

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

			}
		},
		computed: {
			ListData() {
				console.log(this.mattList)
				let list = []

				list.push(

					...this.DTOList.map(i => {
						const checked =
							this.mattList.findIndex(itm => itm.id == i.id) > -1
							console.log(checked)
							return {
								checked,
								...i
							}
					})
				)





				this.list = list

				return list
			}
		},
		methods: {
			scrolltolower() {},

			save() {
				this.$emit('mattSave', this.memoList, 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>