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">
				<view class="nav_item " :class="{active: pickStatus == 0}" @click="handNav(0)">
					工单({{navObj.unclaimedQuantity || 0}})</view>
				<view class="nav_item" :class="{active: pickStatus == 1}" @click="handNav(1)">
					领料单({{navObj.claimedQuantity || 0}})</view>
				<view class="nav_item" :class="{active: pickStatus == 2}" @click="handNav(2)">
					出库单({{ navObj.outInQuantity || 0 }})</view>

				<view class="menu_box" @click="handleSearch">
					<image class="menu_icon" src="~@/static/pda/menu.svg"></image>
				</view>



			</view>
		</view>

		<view class="list_box">

			<u-list @scrolltolower="scrolltolower">
				<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>


		<SearchPopup mode="top" v-if='searchShow'>
			<template v-slot:list>
				<view class="search_list">


					<u-form labelPosition="left" :model="formData" labelWidth="180" labelAlign="left" class="baseForm">

						<u-form-item label="工艺路线:" class="required-form" borderBottom prop="assetType">

							<zxz-uni-data-select :localdata="produceList" v-model="formData.produceRoutingId"
								dataValue='id' format='{name}' dataKey="name" filterable></zxz-uni-data-select>

						</u-form-item>

					</u-form>

				</view>
			</template>

			<template v-slot:operate>
				<view class="operate_box rx-bc">
					<u-button size="small" class="u-reset-button" @click="searchCancel">
						重置
					</u-button>


					<u-button type="success" size="small" class="u-reset-button" @click="search">
						确定
					</u-button>

				</view>
			</template>

		</SearchPopup>


	</view>
</template>

<script>
	import pickCard from '../components/pickCard.vue'
	import {
		workorderPage,
		producerouting
	} from '@/api/pda/workOrder.js'

	import {
		pickStatistics
	} from '@/api/pda/picking.js'
	import SearchPopup from '../../components/searchPopup.vue'
	let [isEnd] = [false]

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

				formData: {
					produceRoutingId: ''
				},

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

				page: 1,
				size: 10,

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

				searchShow: false,


			}
		},

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

		},

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

			this.produceFn()
		},

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


		methods: {

			search() {
				this.page = 1
				this.getList()
				this.searchShow = false
			},


			async getList() {
				let params = {
					pageNum: this.page,
					size: this.size,
					pickStatus: this.pickStatus,
					customerClient: 2,
					workOrderType: 1,
					produceRoutingId: this.formData.produceRoutingId

				}

				isEnd = false
				const res = await workorderPage(params)


				if (params.pageNum === 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() {

				uni.scanCode({
					success: (res) => {
						console.log(res)
					}
				})
				//_this.Scancodedate('res')
			},


			handleSearch() {
				this.searchShow = true
			},

			searchCancel() {
				this.formData.produceRoutingId = ''
				this.page = 1
				this.getList()
				this.searchShow = false
			},

			produceFn() {
				let param = {
					pageNum: 1,
					size: -1
				}
				producerouting(param).then(res => {
					this.produceList = res.list

				})
			},

		}
	}
</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;
		position: relative;

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

		}

		.menu_box {
			position: absolute;
			right: 20rpx;
			top: 10rpx;

			.menu_icon {
				width: 44rpx;
				height: 44rpx;
			}

		}



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


	.search_list {
		min-height: 100rpx;

		/deep/ .baseForm {
			padding: 0 20rpx;
		}
	}

	.operate_box {
		padding: 10rpx 32rpx;

		/deep/ .u-button {
			width: 40%;
		}
	}
</style>