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">废品数量</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 List" :key='idx'>
						<view class="item ww35">
							{{ it.name }}
						</view>
						<view class="item ww45 content_num">
							<input class="uni-input" v-model="it.quantity" type="digit"></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 {
		getLastTreeByPid,

	} from '@/api/pda/workOrder.js'
	import baTreePicker from '@/components/ba-tree-picker/ba-tree-picker.vue'
	export default {

		components: {
			baTreePicker,
		},

		data() {
			return {




				classificationList: [],
				selectedData: [],

				List: []
			}
		},

		created() {
			this.getLastTree()
		},

		methods: {

			getLastTree() {
				getLastTreeByPid(this.$route.query.inspectionId).then(res => {
					this.List = res
				})
			},



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

			},

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


			},

			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: 800rpx;
	}
</style>