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

<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: [],
				seletedAll: false, //全选状态

			}
		},

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

		},
		
		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 = []
				}

				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
				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() {},


			// 相机扫码
			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>