优化

pages/pda/picking/components/pickCard.vue

@@ -0,0 +1,141 @@
+<template>
+    <view>
+		
+		
+		<view class="card_box"  v-for="(item, index) in List" :key='index'>
+			<view class="item_box rx-sc">
+				<view class="round">{{item.index}}</view>
+				<view class="orderId">{{item.code}}  </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.formingWeight}}</view>
+				</view>
+				<view class="item_one perce50 rx-sc">
+					<view>状态：</view>
+					<view>{{statusList[item.status]}}</view>
+				</view>
+			</view>
+		
+		
+			<view class="item_box rx-sc">
+				<view class="item_one rx-sc">
+					<view class="lable">工艺路线：</view>
+					<view class="gylx">{{item.produceRoutingName}}</view>
+				</view>
+		
+			</view>
+		
+		
+		
+		
+		</view>
+		
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			List: {
+				type: Array,
+				default: () => []
+			},
+		},
+		
+		data() {
+			return {
+				statusList:{
+					4:'待生产',
+					5:'生产中',
+					6:'已完成',
+					7:'已延期',
+					8:'待下达'
+				}
+			}
+		},
+		methods: {
+	
+		}
+
+	}
+</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>

pages/pda/picking/index/index.vue

@@ -1,57 +1,116 @@
 <template>
-		<view class="content-box">
-		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="领料" background-color="#157A2C"
-			color="#fff" @clickLeft="back"  right-icon="scan"  @clickRight="HandlScanCode">
-			</uni-nav-bar>
-			
-			<view class="top-wrapper">
-				<view class="tab_box rx-sc">
-					<view class="tab_item" :class="{active: tabType == 1}" @click="handTab(1)">生产工单列表</view>
-					<view class="tab_item" :class="{active: tabType == 2}" @click="handTab(2)">领料工单列表</view>
-				</view>
+	<view class="content-box">
+		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="领料" background-color="#157A2C" color="#fff"
+			@clickLeft="back" right-icon="scan" @clickRight="HandlScanCode">
+		</uni-nav-bar>
+
+		<view class="top-wrapper">
+			<view class="tab_box rx-sc">
+				<view class="tab_item" :class="{active: tabType == 1}" @click="handTab(1)">生产工单列表</view>
+				<view class="tab_item" :class="{active: tabType == 2}" @click="handTab(2)">领料工单列表</view>
 			</view>
 			
-			<view class="list_box">
-				<u-list @scrolltolower="scrolltolower"  v-if="tabType == 1">
-					
-					</u-list>
-					
-				</view>
-			
-				<view class="bottom-wrapper">
-					5555
-					</view>
+			<view class="nav_box rx-sc" v-if='tabType == 1'>
+				<view class="nav_item " :class="{active: navType == 1}" @click="handNav(1)">未领料</view>
+				<view class="nav_item"  :class="{active: navType == 2}" @click="handNav(2)">已领料</view>
+			</view>
+		</view>
+
+		<view class="list_box">
+			<u-list @scrolltolower="scrolltolower" v-if="tabType == 1">
+				
+                <pickCard :List="dataList"> </pickCard>
+			</u-list>
+
+		</view>
+
+		<view class="bottom-wrapper">
+			5555
+		</view>
 	</view>
 </template>
 
 <script>
+	import pickCard from '../components/pickCard.vue'
+	import {
+		workorderPage
+	} from '@/api/pda/workOrder.js'
+	let [isEnd] = [false]
+	
 	export default {
+		components: {
+			pickCard
+		},
 		data() {
 			return {
 				tabType: 1,
+				navType: 1,
+				
+				page: 1,
+				size: 5,
+				dataList: [],
+				
 			}
 		},
+		
+		onShow() {
+			this.getList()
+		},
+		
 		methods: {
+
+
+		async getList() {
+				let params = {
+					pageNum: this.page,
+					size: this.size,
+					status: [4, 5, 6, 7],
+					
+				}
+
+				isEnd = false
+				const res = await workorderPage(params)
+				console.log(res)
+
+				if (params.page === 1) {
+					this.dataList = []
+				}
+
+				this.dataList.push(...res.list)
+				isEnd = this.dataList.length >= res.count
+
+			},
 			
-			
+
 			handTab(type) {
 				if (type != this.tabType) {
 					this.tabType = type
 				}
 			},
 			
-			scrolltolower() {},
-			
+			handNav(type) {
+				if (type != this.navType) {
+					this.navType = type
+				}
+			},
 			
+
+			scrolltolower() {
+				if (isEnd) return
+				this.page++
+				this.getList()
+			},
+
+
 			// 相机扫码
-			HandlScanCode () {
-			  let _this = this
-			  uni.scanCode({
-			    success: function (res) {
-			     console.log(res)
-			    }
-			  })
-			  //_this.Scancodedate('res')
+			HandlScanCode() {
+				let _this = this
+				uni.scanCode({
+					success: function(res) {
+						console.log(res)
+					}
+				})
+				//_this.Scancodedate('res')
 			},
 		}
 	}
@@ -65,40 +124,61 @@
 		flex-direction: column;
 		background-color: $page-bg;
 	}
-	
-	
+
+
 	.tab_box {
 		width: 100%;
 		height: 68rpx;
-	    background: #fff;
-	
+		background: #fff;
+
 		.tab_item {
 			height: 68rpx;
 			line-height: 68rpx;
 			padding: 0 20rpx;
 			font-size: 32rpx;
 			color: #979C9E;
-	
+
 		}
-	
+
 		.active {
 			box-sizing: border-box;
 			border-bottom: 6rpx solid $theme-color;
 			color: $theme-color;
 		}
-	
-	
+
+
+	}
+
+.nav_box{
+	padding: 6rpx 32rpx;
+	.nav_item{
+		font-size: 28rpx;
+		font-weight: 400;
+		color: $theme-color;
+		background: #F0F8F2;
+		margin-right: 16rpx;
+		padding: 4rpx 16rpx;
+		border-radius: 8rpx;
+		border: 2rpx solid #ACD4B5;
+
 	}
 	
 	
+	
+	.active{
+		background: $theme-color;;
+		border: 2rpx solid  $theme-color;;
+		color: #FFF;
+	}
+}
+
 	.list_box {
 		flex: 1;
 		overflow: hidden;
 		padding: 4rpx 0;
-	
+
 		.u-list {
 			height: 100% !important;
 		}
 	}
-
-</style>
+</style>