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

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



		<u-form labelPosition="left" :model="formData" labelWidth="140" labelAlign="left" class="baseForm">
			<u-form-item label="质检类型:" class="required-form" prop="assetType">
				<zxz-uni-data-select :localdata="typeList" v-model="formData.parentId" dataValue='id' format='{name}'
					dataKey="name" filterable></zxz-uni-data-select>

				<view class="btn_box rx-cc" @click="add">新增质检</view>
			</u-form-item>
		</u-form>


		<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"></uni-icons>
								
								<uni-icons custom-prefix="iconfont" type="icon-eye" size="20"
									color="#157A2C"></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 {
		getTwoTreeByPid,
		treeByPid

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

		components: {
			baTreePicker,

		},

		data() {
			return {


				typeList: [],
				formData: {
					parentId: null
				},
				classificationList: [],
				selectedData: [
					'1772569297810362370', '1772569381088268289', '1773270364621639681'
				],

				List: []
			}
		},

		created() {
			this.getTwoTree()
		},

		methods: {
			getTwoTree() {
				getTwoTreeByPid(12).then(res => {
					this.typeList = res
				})
			},

			add() {
				if (!this.formData.parentId) {
					uni.showToast({
						icon: 'none',
						title: '请先选择质检类型'
					})
					return false
				} else {
					let params = {
						'ids': [this.formData.parentId]
					}


					treeByPid(params).then(res => {
						this.classificationList = res[0].children
						this.$refs.treePicker._show()
					})
				}
			},

			confirm(id, name, list) {

				this.List = list


			},

			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%;

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