aiot-app/pages/pda/picking/index/index.vue

<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="nav_box rx-sc" v-if='tabType == 1'>
				<view class="nav_item " :class="{active: pickStatus == 0}" @click="handNav(0)">未领料({{navObj.unclaimedQuantity}})</view>
				<view class="nav_item" :class="{active: pickStatus == 1}" @click="handNav(1)">已领料({{navObj.claimedQuantity}})</view>
			</view>
		</view>

		<view class="list_box">
			<u-list @scrolltolower="scrolltolower" v-if="tabType == 1">
				<pickCard v-if='dataList.length' :list="dataList"> </pickCard>
				
				
			    <view  v-else style='margin-top: 20vh;'>
					<u-empty  iconSize='150'  textSize='32' text='暂无工单'>
					</u-empty>
				</view>
				
			</u-list>

		</view>

		<view class="bottom-wrapper rx-bc" v-if='pickStatus == 0'>
			<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>

<script>
	import pickCard from '../components/pickCard.vue'
	import {
		workorderPage
	} from '@/api/pda/workOrder.js'
	
	import { pickStatistics } from '@/api/pda/picking.js'
	let [isEnd] = [false]

	export default {
		components: {
			pickCard
		},
		data() {
			return {
				tabType: 1,
				pickStatus: 0,

                navObj: {
					unclaimedQuantity: 0,
					claimedQuantity: 0
				},

				page: 1,
				size: 5,

				dataList: [],
				seletedAll: false, //全选状态
				

			}
		},

		//选择的列表长度
		computed: {
			checkListLen() {
				let _fitArr = this.dataList.filter(f => f.checked)
				return _fitArr.length
			}

		},
		
		onLoad(option) {
			this.pickStatus = option.pickStatus || 0
		},

		onShow() {
			this.page = 1
				this.dataList = []
			this.getList()
			this.getpickTics()
		},
		

		methods: {


			async getList() {
				let params = {
					pageNum: this.page,
					size: this.size,
					pickStatus: this.pickStatus,

				}

				isEnd = false
				const res = await workorderPage(params)


				if (params.page === 1) {
					this.dataList = []
				}

				let _list = res.list.map(m => {
					return {
						checked: false,
						...m
					}
				})

				this.dataList.push(..._list)
				isEnd = this.dataList.length >= res.count

			},
			
			getpickTics() {
				pickStatistics().then(res => {
					this.navObj = res
				})
			},


			handTab(type) {
				if (type != this.tabType) {
					this.tabType = type
				}
			},

			handNav(type) {
				if (type != this.pickStatus) {
					this.pickStatus = type
					
					this.page = 1
					this.dataList = []
					this.getList()
				}
			},


			scrolltolower() {
				if (isEnd) return
				this.page++
				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() {
				let url 
			  	url = '/pages/pda/picking/details'
				
				let arr = []
				this.dataList.forEach(e => {
					if(e.checked) {
						arr.push(e.id)
					}
				})
				let _arr = JSON.stringify(arr)
				url += `?arr=${encodeURIComponent(_arr)}`
				uni.navigateTo({
					url
				})
			},


			// 相机扫码
			HandlScanCode() {
				let _this = this
				uni.scanCode({
					success: function(res) {
						console.log(res)
					}
				})
				//_this.Scancodedate('res')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content-box {
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		background-color: $page-bg;
	}


	.tab_box {
		width: 100%;
		height: 68rpx;
		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;
		}
	}


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