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

<template>
	<view>
		<view class="title_box rx-bc">
			<view class="name">副产品回收</view>
		</view>

		<view class="material">
			<view class="content_table">
				<view class="head row rx-sc">
					<view class="item ww30">物料编码</view>
					<view class="item ww30">物料名称</view>
					<view class="item ww40">重量</view>
				</view>

				<view class="table">

					<view class="tr row rx-sc" v-for="(item, index) in list" :key='index'>
				
						<view class="item ww30">{{item.code}}</view>
						<view class="item ww30">{{isDetails ? item.categoryName :  item.name}}</view>
						<view class="item ww40  content_num">

							<input class="uni-input" v-model="item.recycleQuantity" type="digit" v-if="!isDetails"></input>
							<view v-if="isDetails">{{item.quantity}}</view>
							<view class="unit">{{item.unit}}</view>
							<view class="penalize" v-if="!isDetails" :style="{ color: item.warehouseId ? 'rgb(255 170 42)' : ''}" @click="penalize(index)">处置</view>
                            <view v-if="isDetails"  class="penalize" :style="{ color: item.warehouseId ? 'rgb(255 170 42)' : ''}" @click="handleView(item.warehouseName)">查看</view>
						</view>
					</view>






				</view>


			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => {}
			},
			isDetails: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				
			}
		},
		
		methods: {
			penalize(index) {
				this.$emit('penalize', index)
			},
			
			handleView(name) {
				uni.showToast({
					icon: 'none',
					title: name
				})
			},
		},
	}
</script>

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

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


		}



	}

	.material {
		margin-top: 10rpx;



		.content_table {
			width: 100%;


			.row {
				width: 100%;


				.item {

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

				}

				.ww30 {
					width: 30%;
				}

				.ww40 {
					width: 40%;
				}
			}

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



			.unit {
				width: 100rpx;
				font-size: 24rpx;
				color: #404446;
			}

			.penalize {
				width: 160rpx;
				line-height: 60rpx;
				background: $theme-color;
				font-size: 24rpx;
				text-align: center;
				color: #fff;
			}


		}
	}
</style>