aiot-app/pages/pda/jobBooking/components/workInProgressList.vue

<template>
	<view class="container">
		<view class="d-table">
			<!-- type="selection"  @selection-change="selectionChange" -->
			<uni-table border stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
				<!-- 	<uni-th align="center"> -->
					
				<!-- 		<checkbox-group @change="handlerChecked">
							<checkbox :checked="isAllChecked" value="1" />
						</checkbox-group> -->
					<!-- </uni-th> -->
					<uni-th align="center">序号</uni-th>
					<uni-th align="center">批次号</uni-th>
					<uni-th align="center">名称</uni-th>
					<uni-th align="center">牌号</uni-th>
					<uni-th align="center">型号</uni-th>
					<uni-th align="center">数量</uni-th>
					<uni-th align="center">投料数量</uni-th>
					<uni-th align="center">重量</uni-th>

					<uni-th align="center">是否合格</uni-th>
					<uni-th align="center">操作</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				
				<uni-tr v-for="(item, index) in itemData" :key="index">
<!-- 					<uni-td>
						<checkbox-group @change="handlerCheckedTow($event, index, item)">
							<checkbox :checked="item.selected" value="1" />
						</checkbox-group>
					</uni-td> -->
					<uni-td>{{ index + 1 }}</uni-td>
					<uni-td>
						<input class="uni-input" v-model="item.batchNo"></input>
					</uni-td>
					<uni-td>
						{{ item.name + '-在制品' }}
					</uni-td>
					<uni-td>
						{{  item.brandNu  }}
					</uni-td>

					<uni-td>
						{{ item.modelType }}
					</uni-td>
					<uni-td>
						 {{ item.extInfo.sourceQuantity || 0 }}{{ item.unit }}
					</uni-td>
					
					<uni-td>
						 {{ item.extInfo.newWeight || 0 }}{{ item.extInfo.weightUnit }}
					</uni-td>
					<uni-td>
						<u-button>拆批</u-button>
						<u-button>删除</u-button>
                    </uni-td>
				</uni-tr>
			</uni-table>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		tableData: {
			type: Array,
			default: () => []
		},
		itemData: {
			type: Object,
			default: () => { }
		},

	},

	data() {
		return {
			pickerIndex: 0,
			isAllChecked: true,
			listArr: [],
			selectedIndexs: []
		};
	},
	watch:{
		tableData:{
			handler(v){
				this.listArr =v;
			},
			immediate:true,
			deep:true
		}
	},
	
	methods: {
		handlerCheckedTow(e, index, item) {
			console.log(item);
			if (e.detail.value.length) {
				// this.$set(this.tableData[index], 'selected', true);
				item.selected = true;
			} else {
				// this.$set(this.tableData[index], 'selected', false);
				item.selected = false;
			}
			this.listArr[index] =item;
			// this.$emit('tableDataFn', this.tableData);

			console.log(this.tableData);
			this.$nextTick(() => {
				let a = this.listArr.filter(v => v.selected);
				if (a.length && a.length == this.listArr.length) {
					this.isAllChecked = true;
				} else {
					this.isAllChecked = false;
				}
			})

			
		},

		//全选
		handlerChecked(e) {

	
			console.log(this.listArr);
			if (e.detail.value.length) {
				// 全选

				this.listArr.map(item => {
					item.selected = true;
				})


			} else {
				// 未选中
				this.listArr.map(item => {
					item.selected = false;
				})

			}
			this.listArr = [];

			this.$set(this, 'listArr', this.listArr);

			this.listArr = this.tableData;

			this.$emit('tableDataFn', this.tableData);
		},


		blurNum(workReportInfo) {

			this.$emit('tableDataFn', this.tableData);
		},
		handlerChange(item, index) {
			// this.$emit('tableDataFn', this.tableData);
			console.log(item, index);
		},

		selectionChange(e) {

			this.selectedIndexs = e.detail.index;
		},
	}

}
</script>

<style lang="scss" scoped>
::v-deep .uni-select--mask{
	position: relative !important;
}
.container {
	padding: 10rpx;
	overflow: auto;

	checkbox {
		transform: scale(0.8);
	}
}

.uni-input {
	width: 150rpx;
	border: 1px solid #F0F8F2;
	background: #F0F8F2;
	color: #157A2C;
}

/deep/.uni-table {
	min-width: 100vw !important;

	.uni-table-td,
	.uni-table-th {
		padding: 20rpx 10rpx !important;
		text-align: center !important;
		font-weight: normal !important;
		font-size: 26rpx !important;
	}

	.uni-table-text {
		font-size: 26rpx !important;
	}
}
</style>