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

<template>
	<view class="content-box">

		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="搜索" @clickLeft="back">

		</uni-nav-bar>


		<view class="top-wrapper">
			<view class="searchBox rx-bc">

				<zxz-uni-data-select :localdata="taskList" v-model="formData.taskId" dataValue='id' format='{name}'
					dataKey="name" filterable placeholder="请选择工序" @change="doSearch"></zxz-uni-data-select>
				<u-button @click="doSearch" type="success" size="small" class="u-reset-button" text="搜索">
				</u-button>



			</view>
		</view>

		<view class="list_box">
			<u-list @scrolltolower="scrolltolower">


				<checkbox-group v-for="(item, index) in list" :key="index" @change="e => selectVal(e, item, index)">
					<label class="listBox rx-bs">

						<view class="listBox-sel">
							<checkbox
								v-if='item.rootCategoryLevelId != 11 || (item.rootCategoryLevelId == 11 && item.status != 1)'
								:value="item.code" color="#fff" :disabled="item.disabled" :checked="item.checked" />
						</view>

						<view class="listBox-con">

							<view class="listBox-top rx-bc">
								<view>工单编号：</view>
								<view class="code">{{ item.code}}</view>
							</view>


							<view class="listBox-bottom rx">
								<view class="items">
									<text>工艺路线</text>{{ item.produceRoutingName }}
								</view>


								<view class="items">
									<text>名称</text>{{ item.productName }}
								</view>

								<view class="items">
									<text>生产数量</text>{{ item.formingNum }}{{item.unit}}
								</view>


								<view class="items">
									<text>生产重量</text>{{item.formingWeight}} {{item.weightUnit}}
								</view>


							</view>

						</view>


					</label>

				</checkbox-group>



				<view v-if='list.length == 0' style='margin-top: 20vh;'>
					<u-empty iconSize='150' textSize='32' text='暂无数据'>
					</u-empty>
				</view>

			</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="handleSelect">
					<view> 选择( {{ checkListLen }} ) </view>
				</u-button>
			</view>
		</view>





		<SearchPopup mode="center" v-if='searchShow'>
			<template v-slot:list>
				<u-list @scrolltolower="scrolltolower" class="wl_list">
					<view class="recycleTitle">副产品列表</view>
					<view class="pop_list" v-for="(item, index) in memoList" :key="index">

						<view class="work_box rx-bc">
							<view>工单编号：</view>
							<view class="code">{{item.code}}</view>
						</view>



						<view class="recycleList rx" v-for="(it,idx) in item.recycleList" :key="'RECY' + idx">

							<view class="items">
								<text>副产品{{idx+1}}</text>{{ it.categoryName }}
							</view>


							<view class="items">
								<text>编号</text>{{ it.categoryCode }}
							</view>


						</view>

					</view>
					<view class="recycleTitle mt40">副产品处置</view>

					<view class="content_table" v-for="(item, index) in recyclell" :key="'ll' +index">

						<view class="item rx-sc">
							<view class="rx ww55 ">
								<view class="lable rx-cc">副产品</view>
								<view class="content ">{{item.categoryName}}</view>
							</view>

							<view class="rx ww45">
								<view class="lable rx-cc ww80">编号</view>
								<view class="content ">
									{{item.categoryCode}}
								</view>
							</view>
						</view>
						
						<view class="item rx-sc">
							<view class="rx ww55 ">
								<view class="lable rx-cc">处置</view>
								<view class="content  content_num">
									<zxz-uni-data-select  :localdata="warehouseList" v-model="item.warehouseId"
										dataValue='id' format='{name}' dataKey="name" filterable
										:clear='false'></zxz-uni-data-select>
										
								</view>
							</view>
						
							<view class="rx ww45">
								<view class="lable rx-cc ww80">数量</view>
								<view class="content content_num">
								<input class="uni-input" v-model="item.quantity" type="digit"></input>
								<view class="unit">{{item.weightUnit}}</view>
								</view>
							</view>
						</view>


					</view>

				</u-list>
			</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="handSave">
						确定
					</u-button>

				</view>
			</template>

		</SearchPopup>

	</view>
</template>

<script>
	import {
		tableHeader
	} from '../../common.js'
	import {
		treeByPid,
		listWorkOrderByTaskId,
		getWarehouseList,
		disposeorder
	} from '@/api/pda/workOrder.js'

	import {
		producetaskList
	} from '@/api/common.js'


	import SearchPopup from '../../components/searchPopup.vue'


	let [isEnd] = [false]
	export default {
		components: {

			SearchPopup
		},
		data() {
			return {



				list: [],
				page: 1,


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

				recyclell: [],
		







				formData: {
					taskId: '',

				},

				taskList: [],

				warehouseList: [],

				searchShow: false,



			}
		},

		//选择的列表长度
		computed: {
			checkListLen() {
				return this.memoList.length
			}

		},

		onLoad(option) {



			this.getProducetask()

			this.getWarehouseFn()
		},

		onUnload() {

		},



		methods: {
			_seletedAll() {

				if (!this.seletedAll) {
					this.seletedAll = true

					this.list.map(item => {
						this.$set(item, 'checked', true)
						const idx = this.memoList.findIndex(itm => itm.id === item.id)
						if (idx === -1) {
							this.memoList.push(item)
						}
					})



				} else {
					this.seletedAll = false
					this.list.map(item => {
						this.$set(item, 'checked', false)

						const idx = this.memoList.findIndex(itm => itm.id === item.id)
						if (idx > -1) {
							this.memoList.splice(idx, 1)
						}

					})
				}
			},



			doSearch() {
				this.list = []
				this.getList()

			},

			scrolltolower() {
				if (isEnd) return
				this.page++
				this.getList()
			},

			getList() {
				let param = {
					pageNum: this.page,
					size: 10,
					taskId: this.formData.taskId,

				}

				listWorkOrderByTaskId(param).then(res => {
					this.list = res.list
				})


			},

			//勾选
			selectVal(e, val, index) {
				console.log(val)
				if (val.rootCategoryLevelId == 11 && val.status == 1) {
					return false
				}
				this.list[index].checked = !this.list[index].checked
				this.seletedAll = !this.list.some(item => !item.checked)
				const idx = this.memoList.findIndex(
					item => item.id === this.list[index].id
				)

				if (this.list[index].checked) {
					if (idx === -1) {
						this.memoList.push(this.list[index])
					}
				} else {
					if (idx > -1) {
						this.memoList.splice(idx, 1)
					}
				}

			},



			searchCancel() {
				this.list = []
				this.page = 1
				this.getList()
				this.searchShow = false
			},

			handleSelect() {


				let arr = []
				this.recyclell = []

				this.memoList.forEach(e => {
					e.recycleList.forEach(f => {
						arr.push(f)
					})
				})


				this.recyclell = Array.from(new Set(arr.map(item => JSON.stringify(item)))).map(item => JSON.parse(item))

				this.searchShow = true

			},
			
			handSave() {
				let param = {
					taskId: this.formData.taskId,
					recyclell: this.recyclell,
					memoList: this.memoList
				}
				disposeorder(param).then(res => {
					 console.log(res)
					 	this.searchShow = false
				})
			
			},


			getProducetask() {
				producetaskList().then(res => {
					this.taskList = res
				})
			},

			getWarehouseFn() {
				getWarehouseList().then(res => {
					this.warehouseList = res
				})
			},
		}
	}
</script>

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

	.searchBox {
		background-color: #dedede;
		height: 90rpx;
		padding: 0 20rpx;


		.mt20 {
			margin-top: 20rpx;
		}

		/deep/ .uni-select {
			height: 70rpx;
			width: 520rpx;
			background: #fff !important;
			padding-left: 10rpx;
			border-radius: 5rpx;
			margin-right: 20rpx;
		}

	}


	.list_box {
		flex: 1;
		overflow: hidden;
		padding: 6rpx 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;
		}
	}

	.listBox {
		margin-top: 8rpx;
		padding: 8rpx 24rpx;
		background: #fff;


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

		.listBox-con {
			width: 650rpx;
			font-weight: 400;
		}

		.listBox-top {
			margin-top: 6rpx;
			color: #090A0A;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 800;
		}




	}


	.listBox-bottom,
	.recycleList {
		color: #090A0A;
		font-size: 24rpx;
		font-style: normal;
		flex-wrap: wrap;

		.items {

			width: calc(50% - 1px);
			border-left: 1rpx solid #E3E5E5;
			border-right: 1rpx solid #E3E5E5;
			border-bottom: 1rpx solid #E3E5E5;
			box-sizing: border-box;
            word-break: break-all;
			text {
				display: inline-block;
				background: #F7F9FA;
				padding: 8rpx 10rpx;
				color: #157A2C;

			}

			&:nth-child(1),
			&:nth-child(2) {
				border-top: 1rpx solid #E3E5E5;
				margin-top: 8rpx;
			}

		}

	}


	.wl_list {
		width: 720rpx;
		max-height: 75vh;


		.operate_box {
			margin: 20rpx;
		}


		.recycleTitle {
			margin-top: 12rpx;
			font-size: 28rpx;
			line-height: 24rpx;
			border-left: 6rpx solid #157A2C;
			padding-left: 16rpx;
			color: #157A2C;
			margin-left: 16rpx;

		}

		.mt40 {
			margin-top: 40rpx;
		}

		.pop_list {
			padding: 12rpx 16rpx;

			border-bottom: 2rpx solid #157A2C;


			.work_box {
				color: #090A0A;
				font-size: 28rpx;
				font-style: normal;
				font-weight: 800;
			}



			.recycleList {
				.lable {
					width: 32rpx;
					height: 32rpx;
					line-height: 32rpx;
					text-align: center;
					border-radius: 50%;
					background: #157A2C;
					font-size: 20rpx;
					color: #fff;
					margin-right: 40rpx;
				}
			}

			.it_name {
				width: 350rpx;
				font-size: 24rpx;
			}

			.it_code {
				font-size: 24rpx;
			}
		}
	}


	.content_table {
		width: 700rpx;
		margin: auto;
		margin-top: 20rpx;
		border: 2rpx solid $border-color;

		.item {
			display: flex;
			border-bottom: 2rpx solid $border-color;


			.lable {
				width: 100rpx;
				text-align: center;
				background-color: #F7F9FA;
				font-size: 22rpx;
				border-right: 2rpx solid $border-color;
				flex-shrink: 0;
			}

			.ww80 {
				width: 60rpx;
			}

			.content {
				width: 518rpx;
				min-height: 64rpx;
				font-size: 24rpx;
				line-height: 28rpx;
				font-style: normal;
				font-weight: 400;
				padding: 18rpx 8rpx;
				box-sizing: border-box;
				word-wrap: break-word;
				flex-grow: 1 !important;

			}

				.content_num {
						display: flex;
						align-items: center;
						padding: 0 4rpx;

						/deep/ .uni-input-input {
							border: 2rpx solid #F0F8F2;
							background: #F0F8F2;
							color: $theme-color;
						}

						.unit {
							width: 90rpx;
							text-align: center;
							font-size: 24rpx;
							color: #404446;
						}
					}

			.pd4 {
				padding: 4rpx 8rpx;
			}



			&:last-child {
				border-bottom: none;
			}
		}

		.ww55 {
			width: 55%;
		}

		.ww45 {
			width: 45%;
		}
		
	
	}
</style>