优化

pages/pda/picking/components/pickCard.vue

@@ -1,88 +1,97 @@
 <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>
+
+		<checkbox-group v-for="(item, index) in list" :key="index" @change="e => selectVal(e, item, index)">
+		     <label>
+			<view class="card_box">
+				<view class="item_box rx-bc">
+					<view class="rx-sc">
+						
+						<checkbox  :checked="item.checked" />
+						<view class="orderId">{{item.code}} </view>
+					</view>
+					<view class="status FAA">未领料</view>
 				</view>
-				<view class="item_one perce50 rx-sc">
-					<view>型号：</view>
-					<view>{{item.model}}</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>
-		
-		
-			<view class="item_box rx-bc">
-				<view class="item_one perce50 rx-sc">
-					<view class="lable">生产数量：</view>
-					<view>{{item.formingWeight}}</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_one perce50 rx-sc">
-					<view>状态：</view>
-					<view>{{statusList[item.status]}}</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>
-		
-		
-			<view class="item_box rx-sc">
-				<view class="item_one rx-sc">
-					<view class="lable">工艺路线：</view>
-					<view class="gylx">{{item.produceRoutingName}}</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>
-		
-		
+			</label>
+
+		</checkbox-group>
+
 	</view>
 </template>
 
 <script>
 	export default {
 		props: {
-			List: {
+			list: {
 				type: Array,
 				default: () => []
 			},
 		},
-		
+
 		data() {
 			return {
-				statusList:{
-					4:'待生产',
-					5:'生产中',
-					6:'已完成',
-					7:'已延期',
-					8:'待下达'
+				statusList: {
+					4: '待生产',
+					5: '生产中',
+					6: '已完成',
+					7: '已延期',
+					8: '待下达'
 				}
 			}
 		},
 		methods: {
-	
+			selectVal(e, val, index) {
+				this.list[index].checked = !this.list[index].checked
+			}
 		}
 
 	}
@@ -92,7 +101,7 @@
 <style lang="scss" scoped>
 	.card_box {
 		width: 750rpx;
-		padding: 16rpx 32rpx;
+		padding: 16rpx 24rpx;
 		box-sizing: border-box;
 		border-bottom: 2rpx solid #E1E1E1;
 
@@ -100,16 +109,7 @@
 		.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;
@@ -118,6 +118,7 @@
 				font-style: normal;
 				font-weight: 600;
 				margin-left: 16rpx;
+				margin-top: 8rpx;
 			}
 
 			.item_one {
@@ -136,6 +137,23 @@
 			.perce50 {
 				width: 50%;
 			}
+
+			.status {
+				font-size: 26rpx;
+
+				&.FAA {
+					color: #FFA929;
+				}
+			}
+			
+			
+			/deep/ .uni-checkbox-input-checked {
+				background-color: $theme-color !important;
+				border-color: $theme-color !important;
+			}
 		}
 	}
+	
+	
+	
 </style>

pages/pda/picking/index/index.vue

@@ -9,23 +9,32 @@
 				<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="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 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>
+
+				<pickCard :list="dataList"> </pickCard>
 			</u-list>
 
 		</view>
 
-		<view class="bottom-wrapper">
-			5555
+		<view class="bottom-wrapper rx-bc">
+			<view>
+				<checkbox v-if="!seletedAll" color="#fff" :checked="seletedAll" @tap="_seletedAll">全选</checkbox>
+				<checkbox class="select-all" color="#fff" v-else :checked="seletedAll" @tap="_seletedAll">取消全选
+				</checkbox>
+			</view>
+			<view>
+				<u-button type="success" size="small" class="u-reset-button" :disabled="!checkListLen" @click="jumpAdd">
+					<view> 选择( {{ checkListLen }} ) </view>
+				</u-button>
+			</view>
 		</view>
 	</view>
 </template>
@@ -36,7 +45,7 @@
 		workorderPage
 	} from '@/api/pda/workOrder.js'
 	let [isEnd] = [false]
-	
+
 	export default {
 		components: {
 			pickCard
@@ -45,27 +54,38 @@
 			return {
 				tabType: 1,
 				navType: 1,
-				
+
 				page: 1,
 				size: 5,
-				dataList: [],
 				
+dataList: [],
+				seletedAll: false, //全选状态
+
+			}
+		},
+
+	//选择的列表长度
+		computed: {
+			checkListLen() {
+				let _fitArr = this.dataList.filter(f => f.checked)
+				return _fitArr.length
 			}
+
 		},
 		
 		onShow() {
 			this.getList()
 		},
-		
+
 		methods: {
 
 
-		async getList() {
+			async getList() {
 				let params = {
 					pageNum: this.page,
 					size: this.size,
 					status: [4, 5, 6, 7],
-					
+
 				}
 
 				isEnd = false
@@ -76,24 +96,31 @@
 					this.dataList = []
 				}
 
-				this.dataList.push(...res.list)
+				let _list = res.list.map(m => {
+					return {
+						checked: false,
+						...m
+					}
+				})
+
+				this.dataList.push(..._list)
 				isEnd = this.dataList.length >= res.count
 
 			},
-			
+
 
 			handTab(type) {
 				if (type != this.tabType) {
 					this.tabType = type
 				}
 			},
-			
+
 			handNav(type) {
 				if (type != this.navType) {
 					this.navType = type
 				}
 			},
-			
+
 
 			scrolltolower() {
 				if (isEnd) return
@@ -101,6 +128,24 @@
 				this.getList()
 			},
 
+			_seletedAll() {
+
+				if (!this.seletedAll) {
+					this.seletedAll = true
+					this.dataList.forEach(e => {
+						e.checked = true
+					})
+
+				} else {
+					this.seletedAll = false
+					this.dataList.forEach(e => {
+						e.checked = false
+					})
+				}
+			},
+
+			jumpAdd() {},
+
 
 			// 相机扫码
 			HandlScanCode() {
@@ -149,28 +194,29 @@
 
 	}
 
-.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;
+	.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;
+		}
 	}
-	
-	
-	
-	.active{
-		background: $theme-color;;
-		border: 2rpx solid  $theme-color;;
-		color: #FFF;
-	}
-}
 
 	.list_box {
 		flex: 1;
@@ -181,4 +227,16 @@
 			height: 100% !important;
 		}
 	}
+
+
+	.bottom-wrapper {
+		height: 80rpx;
+		background: #fff;
+		padding: 0 32rpx;
+
+		/deep/ .uni-checkbox-input-checked {
+			background-color: $theme-color !important;
+			border-color: $theme-color !important;
+		}
+	}
 </style>