aiot-app/pages/pda/components/workCard.vue

<template>

	<view class="card_box" @click="handleDetail">
		<view class="item_box rx-sc" v-if="item.workOrderType != 2">
			<view class="round" v-if='item.index'>{{item.index}}</view>
			<view class="orderId">{{item.code}}  </view>
		</view>
		
		<view class="item_box rx-sc" v-if="item.workOrderType == 2">
			<view class="round" v-if='item.index'>{{item.index}}</view>
			<view class="orderId">{{item.outsourceCode}}  </view>
		</view>
		
		<view class="item_box rx-bc"  v-if="item.workOrderType == 2">
			<view class="item_one  rx-sc">
				<view class="lable">委外名称：</view>
				<view>{{item.outsourceName}}</view>
			</view>
		
		</view>
		
		<view class="item_box rx-bc"  v-if="item.workOrderType == 2">
			<view class="item_one  rx-sc">
				<view>工单来源：</view>
				<view>{{item.code}}</view>
			</view>
		</view>
		
		
		

		<view class="item_box rx-bc">
			<view class="item_one perce50 rx-sc">
				<view class="lable">产品编码：</view>
				<view>{{item.productCode}}</view>
			</view>
			<view class="item_one perce50 rx-sc">
				<view>名称：</view>
				<view>{{item.productName}}</view>
			</view>
		</view>


		<view class="item_box rx-bc">
			<view class="item_one perce50 rx-sc">
				<view class="lable">牌号：</view>
				<view>{{item.brandNo}}</view>
			</view>
			<view class="item_one perce50 rx-sc">
				<view>型号：</view>
				<view>{{item.model}}</view>
			</view>
		</view>


		<view class="item_box rx-bc">
			<view class="item_one perce50 rx-sc">
				<view class="lable">生产数量：</view>
				<view>{{item.formingNum}} {{item.unit}}</view>
			</view>
			<view class="item_one perce50 rx-sc">
				<view>生产重量：</view>
				<view>{{item.formingWeight}} {{item.weightUnit}}</view>
			</view>
		</view>


	<view class="item_box rx-bc">
			<view class="item_one perce50 rx-sc">
				<view>状态：</view>
				<view>{{statusList[item.status]}}</view>
			</view>
			
			
				<view class="item_one perce50 rx-sc">
					<view>报工类型：</view>
					<view class="gylx">{{item.singleReport == 1 ? '单个报工' : '批量报工'}}</view>
				</view>
			
			
		</view>

		<view class="item_box rx-sc">
			
			<view class="item_one perce50 rx-sc">
				<view class="lable">批次号：</view>
				<view class="gylx">{{item.batchNo}}</view>
			</view>
			
			<view class="item_one perce50 rx-sc">
				<view class="lable">工艺路线：</view>
				<view class="gylx">{{item.produceRoutingName}}</view>
			</view>
			
	

		</view>
		
		<view class="item_box rx-sc">
			<view class="item_one rx-sc">
				<view class="lable">生产编号：</view>
				<view class="gylx">{{item.productionCodes}}</view>
			</view>
			
		</view>




	</view>

</template>

<script>
	export default {
		props: {
			
			
			item: {
				type: Object,
				default: () => ({})
			},
		},
		
		data() {
			return {
				statusList:{
					4:'待生产',
					5:'生产中',
					6:'已完成',
					7:'已延期',
					8:'待下达'
				}
			}
		},
		methods: {
			handleDetail() {
	
				this.$emit('handleDetail', this.item)
			}
		}

	}
</script>


<style lang="scss" scoped>
	.card_box {
		width: 750rpx;
		padding: 16rpx 32rpx;
		box-sizing: border-box;
		border-bottom: 2rpx solid #E1E1E1;


		.item_box {
			margin-top: 10rpx;

			.round {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 50%;
				background: $theme-color;
				color: #fff;
				text-align: center;
				font-size: 20rpx;
			}

			.orderId {
				color: #000;
				font-family: PingFang HK;
				font-size: 28rpx;
				font-style: normal;
				font-weight: 600;
				margin-left: 16rpx;
			}

			.item_one {
				width: 100%;
				font-size: 26rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 38rpx;
				word-wrap: break-word;
			}

			.gylx {
				color: $theme-color;
			}

			.perce50 {
				width: 50%;
			}
		}
	}
</style>