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" v-if='inspectionList.length > 0'>
			<view class="head row rx-sc">
				<view class="item ww30">类型</view>
				<view class="item ww20">废品数量</view>
				<view class="item ww40">处置</view>
				<view class="item ww10">操作</view>
			</view>

			<view class="table">

				<view class="tr row rx-sc" v-for="(it, idx) in inspectionList" :key='idx'>
					<view class="item ww30">
						{{ it.name }}
					</view>
					<view class="item ww20 content_num">

						<input v-if='it.id != -1' class="uni-input" v-model="it.quantity" type="number"
							@input="onKeyInput"></input>
						<view v-else>{{ it.quantity || 0}}</view>
					</view>
					<view class="item ww40 content_num" v-if='it.id != -1'>
						<zxz-uni-data-select :localdata="warehouseList" v-model="it.warehouseId" dataValue='id'
							dataKey="name" filterable format='{name}'></zxz-uni-data-select>
					</view>



					<view class="ww10 rx-ac">
						<uni-icons custom-prefix="iconfont" v-if='it.id != -1' type="icon-shanchu" size="20"
							color="#fa3534" @click="handleDel(idx)"></uni-icons>

					</view>


				</view>


			</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'

	import {

		getWarehouseList,
	} from '@/api/pda/workOrder.js'
	export default {

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

			normalQuality: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {

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


				count: 0,
				warehouseList: []
			}
		},

		created() {
			this.getWarehouse()
			setTimeout(() => {
					this.onKeyInput()
				}, 500)
		},

		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 => {
					if (Number(L.quantity) > 0 && Number(L.quantity) != NaN && L.id != -1) {
						this.count = Number(this.count) + Number(L.quantity)
						this.inspectionList[this.inspectionList.length - 1]['quantity'] = this.count

						this.normalQuality['quantity'] = this.count
					
					}


				})
			},


			getWarehouse() {
				getWarehouseList().then(res => {
					this.warehouseList = res

				})

			}



		}



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


			.ww30 {
				width: 30%;

			}

			.ww20 {
				width: 20%;

			}

			.ww40 {
				width: 40%;

			}

			.ww10 {
				width: 10%;
			}
		}

		.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: 76rpx;
				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;
		}

	}
</style>