aiot-app/pages/pda/sample/components/inspectionBom.vue

<template>
	<view>
		<view class="title_box rx-bc">
			<view class="name">质检</view>
		</view>




		<view class="content_table2">
			<view class="head row rx-sc">
				<view class="item ww35">名称</view>
				<view class="item ww45">废品数量 ({{ count|| 0 }})</view>
				<view class="item ww20">操作</view>
			</view>

			<view class="table">
				<u-list @scrolltolower="scrolltolower" class="z_list">
					<view class="tr row rx-sc" v-for="(it, idx) in inspectionList" :key='idx'>
						<view class="item ww35">
							{{ it.name }}
						</view>
						<view class="item ww45 content_num">
							<input class="uni-input" v-model="it.quantity" type="number" @input="onKeyInput"></input>
						</view>


						<view class="ww20 rx-ac">
							<uni-icons custom-prefix="iconfont" type="icon-shanchu" size="20" color="#fa3534"
								@click="handleDel(idx)"></uni-icons>
							<uni-icons type="eye-filled" size="20" @click="handleView(it)"></uni-icons>
						</view>


					</view>
				</u-list>

			</view>





		</view>






		<!-- <ba-tree-picker ref="treePicker" :selectedData='selectedData' key="verify" :multiple="false"
			@select-change="confirm" title="选择分类" :localdata="classificationList" valueKey="id" textKey="name"
			childrenKey="children" multiple :selectParent='false' /> -->

	</view>
</template>

<script>
	import baTreePicker from '@/components/ba-tree-picker/ba-tree-picker.vue'
	export default {

		components: {
			baTreePicker,
		},
		props: {
			inspectionList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {

				// classificationList: [],
				// selectedData: [],


				count: 0,
			}
		},

		created() {

		},

		methods: {




			// confirm(id, name, list) {
			// 	this.List = list
			// 	this.selectedData = []
			// 	this.selectedData = this.List.map(m => {
			// 		return m.id
			// 	})

			// },

			handleDel(idx) {
				this.inspectionList.splice(idx, 1)

			},
			onKeyInput() {
				this.count = 0
				this.inspectionList.map(L => {
					this.count = Number(this.count) + Number(L.quantity)
				})
			},

			handleView(it) {

			},

			scrolltolower() {},
		}



	}
</script>

<style lang="scss" scoped>
	.title_box {
		margin-top: 28rpx;

		.name {
			font-size: 28rpx;
			font-style: normal;
			font-weight: 400;
			color: $theme-color;
			padding-left: 20rpx;

			position: relative;

			&:before {
				position: absolute;
				content: '';
				left: 0rpx;
				top: 0rpx;
				bottom: 0rpx;
				width: 4rpx;
				height: 28rpx;
				background: $theme-color;
				margin: auto;
			}


		}

	}


	.btn_box {
		height: 60rpx;
		width: 140rpx;
		background: $theme-color;
		font-size: 26rpx;
		font-style: normal;
		font-weight: 400;
		font-size: 24rpx;
		color: #fff;
		border-radius: 4rpx;
		margin-left: 40rpx;


	}



	.content_table2 {
		width: 100%;
		margin-top: 18rpx;

		.row {
			width: 100%;


			.item {
				color: #404446;
				font-size: 28rpx;
				padding-left: 12rpx;

			}

			.color157 {
				color: $theme-color;
			}

			.ww20 {
				width: 20%;
			}

			.ww35 {
				width: 35%;

			}

			.ww45 {
				width: 45%;
			}
		}

		.head {
			height: 64rpx;
			background: #F7F9FA;
			border-top: 2rpx solid #E3E5E5;
			border-left: 2rpx solid #E3E5E5;

			.item {
				height: 64rpx;
				line-height: 64rpx;
				border-right: 2rpx solid #E3E5E5;
				box-sizing: border-box;
			}
		}



		.tr {
			border-top: 2rpx solid #E3E5E5;
			border-left: 2rpx solid #E3E5E5;


			.item {
				font-size: 24rpx;
				min-height: 64rpx;
				display: flex;
				align-items: center;
				border-right: 2rpx solid #E3E5E5;
				box-sizing: border-box;
				white-space: normal;
				word-break: break-all;

			}

			&:last-child {
				border-bottom: 2rpx solid #E3E5E5;

			}
		}
	}


	.content_num {
		display: flex;
		align-items: center;
		padding: 0 4rpx;

		/deep/ .uni-input-input {
			border: 2rpx solid #F0F8F2;
			background: #F0F8F2;
			color: $theme-color;
		}

	}

	.z_list {
		max-height: 400rpx;
	}
</style>