aiot-app/pages/pda/feeding/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="nav_box">
				<view class="nav_inner">
					<view class="nav_item" :class="{active: feedStatus == 0}" @click="handNav(0)">
						未投料({{navObj.unclaimedQuantity}})
					</view>
					<view class="nav_item" :class="{active: feedStatus == 1}" @click="handNav(1)">
						已投料({{navObj.claimedQuantity}})
					</view>
				</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">
				<feedCard v-if='dataList.length' :list="dataList"> </feedCard>

				<view v-else class="empty-wrapper">
					<u-empty iconSize='150' textSize='32' text='暂无工单'>
					</u-empty>
				</view>
			</u-list>
		</view>

		<view class="bottom-wrapper" v-if='feedStatus == 0'>
			<view class="bottom-inner">
				<view class="check-area">
					<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 class="btn-area">
					<u-button type="success" size="small" class="u-reset-button submit-btn" :disabled="!checkListLen"
						@click="jumpAdd">
						<view> 选择( {{ checkListLen }} ) </view>
					</u-button>
				</view>
			</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' dataKey="name" filterable format='{name}'></zxz-uni-data-select>
						</u-form-item>
					</u-form>
				</view>
			</template>

			<template v-slot:operate>
				<view class="operate_box">
					<u-button size="small" class="u-reset-button reset-btn" @click="searchCancel">
						重置
					</u-button>
					<u-button type="success" size="small" class="u-reset-button confirm-btn" @click="search">
						确定
					</u-button>
				</view>
			</template>
		</SearchPopup>
	</view>
</template>

<script>
	import feedCard from '../components/feedCard.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: {
			feedCard,
			SearchPopup,
		
		},
		data() {
			return {
				tabType: 1,
				feedStatus: 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.feedStatus = option.feedStatus || 0


			if (option.feedStatus == 0 | option.feedStatus == 1) {
				this.page = 1
				this.dataList = []

			}
			this.getList()
			this.produceFn()
		},

		onShow() {

			this.getpickTics()
		},


		methods: {

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


			async getList() {
				let params = {
					pageNum: this.page,
					size: this.size,
					feedStatus: this.feedStatus,
					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({
					type: 'feedStatus'
				}).then(res => {
					this.navObj = res
				})
			},


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

			handNav(type) {
				if (type != this.feedStatus) {
					this.feedStatus = 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/feeding/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;
	}

	.top-wrapper {
		flex-shrink: 0;
		background-color: #fff;
		box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.05);
		z-index: 10;
	}

	.tab_box {
		width: 100%;
		height: 88rpx;
		background: #fff;
		display: flex;
		flex-direction: row;
		align-items: center;

		.tab_item {
			height: 88rpx;
			line-height: 88rpx;
			padding: 0 36rpx;
			font-size: $uni-font-size-base;
			color: $uni-text-color-grey;
			position: relative;
			transition: color 0.3s;
		}

		.active {
			color: $theme-color;
			font-weight: 600;

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 56%;
				height: 6rpx;
				background-color: $theme-color;
				border-radius: 6rpx;
			}
		}
	}

	.nav_box {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 24rpx;
		background-color: #fff;

		.nav_inner {
			display: flex;
			flex-direction: row;
			align-items: center;
			flex: 1;
			flex-wrap: wrap;
			gap: 16rpx;
		}

		.nav_item {
			font-size: $uni-font-size-sm;
			font-weight: 400;
			color: $theme-color;
			background: rgba(21, 122, 44, 0.06);
			padding: 12rpx 32rpx;
			border-radius: 36rpx;
			border: 2rpx solid rgba(21, 122, 44, 0.2);
			transition: all 0.25s ease;
			white-space: nowrap;
		}

		.active {
			background: $theme-color;
			border-color: $theme-color;
			color: #fff;
			font-weight: 500;
			box-shadow: 0 4rpx 16rpx rgba(21, 122, 44, 0.25);
		}

		.menu_box {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 68rpx;
			height: 68rpx;
			border-radius: 50%;
			background-color: $page-bg;
			margin-left: 20rpx;

			&:active {
				opacity: 0.7;
			}

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

	.list_box {
		flex: 1;
		overflow: hidden;
		padding-top: 16rpx;

		.u-list {
			height: 100% !important;
		}
	}

	.empty-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 25vh;
	}

	.bottom-wrapper {
		flex-shrink: 0;
		background: #fff;
		box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
		/* 适配底部安全区域（iPhone X 等机型） */
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.bottom-inner {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			height: 110rpx;
			padding: 0 32rpx;
		}

		.check-area {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: $uni-font-size-sm;
			color: $uni-text-color;
		}

		.btn-area {
			.submit-btn {
				min-width: 200rpx;
				height: 72rpx;
				border-radius: 36rpx;
				font-size: $uni-font-size-sm;
			}
		}

		/deep/ .uni-checkbox-input-checked {
			background-color: $theme-color !important;
			border-color: $theme-color !important;
		}
	}

	.search_list {
		min-height: 100rpx;
		padding: 24rpx 0;

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

	.operate_box {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 32rpx 32rpx;
		gap: 24rpx;

		.reset-btn {
			flex: 1;
			height: 72rpx;
			border-radius: 36rpx;
			font-size: $uni-font-size-sm;
		}

		.confirm-btn {
			flex: 1;
			height: 72rpx;
			border-radius: 36rpx;
			font-size: $uni-font-size-sm;
		}
	}
</style>