aiot-app/pages/pda/components/outsourceList.vue

<template>
	<view>
		<u-popup :show="show" :mode='mode' :closeOnClickOverlay='false'>


			<view class="card_box">

				<view class="item_box rx-bc">
					<view class="item_one  perce50 rx-sc">
						<view class="lable">委外名称：</view>
						<view>{{ outObj.name }}</view>
					</view>

					<view class="item_one  perce50 rx-sc">
						<view class="lable">委外类型：</view>
						<view>{{ outObj.type == 4 ? '带料委外' : '无料委外' }}</view>
					</view>

				</view>

			</view>

			<u-tabs :list="tabList" @click="handTab" lineWidth="30" lineColor="#157A2C" :activeStyle="{
				           color: '#157A2C',
				        }" :inactiveStyle="{
							  color: '#303133',
				           
				        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
			</u-tabs>
			<view class="box_list">


				<u-list @scrolltolower="scrolltolower" class="z_list">

					<view v-if="actTab == '物品清单'">
						<view class="rx-bc">
							<view style="margin-left: 24rpx">
								<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>勾选：<text style="color: #157A2C">{{ checkListLen ||  0 }}个</text> </view>
						</view>


						<checkbox-group v-for="(item, index) in pickOutInList" :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> {{ item.name }}</view>
										<view class="code">
											{{ item.rootCategoryLevelId == 4 ?  item.codeNumber :  item.code}}
										</view>
									</view>

									<view class="listBox-bottom rx">
										<view v-for="(itm, index) in tableH(item.rootCategoryLevelId)" :key="index"
											class="items" v-if="!itm.formatter">
											<text>{{ itm.label }}</text>{{ item[itm.prop] }}
										</view>




										<view class="items"
											v-if='(item.rootCategoryLevelId == 1 && item.isConsumable == 1) &&  item.rootCategoryLevelId != 11 && item.rootCategoryLevelId != 4 '>
											<text>可用库存</text>{{ item.availableCountBase }} {{item.unit}}
										</view>


										<view class="items"
											v-if='([1,9,23].includes(Number(item.rootCategoryLevelId)) && item.isConsumable == 0) '>
											<text>刻码</text>{{item.extInfo.engrave }}
										</view>


										<view class="items"
											v-if='([1,9,23].includes(Number(item.rootCategoryLevelId)) && item.isConsumable == 0) '>
											<text>物料代号</text>{{item.extInfo.materielCode }}
										</view>


										<view class="items"
											v-if='([1,23].includes(Number(item.rootCategoryLevelId)) && item.isConsumable == 0) '>
											<text>客户代号</text>{{item.extInfo.clientCode }}
										</view>


									</view>

								</view>


							</label>

						</checkbox-group>



					</view>

					<view v-if="actTab  == '带料清单'">

						<view class="title_box rx-bc">
							<view></view>
							<view class="right_box rx-ec">
								<u-button type="success" size="small" class="u-reset-button" @click="addPicking(2)"
									text="添加"></u-button>
							</view>
						</view>
						<view v-for="(item, index) in bomMaterialList" :key="index">
							<label class="listBox rx-bs">

								<view class="listBox-sel">
									<view class="round">{{index + 1}}</view>
								</view>

								<view class="listBox-con">


									<view class="listBox-bottom rx">

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


										<view class="items">
											<text>编码</text>{{ item.code  }}
										</view>


										<view v-for="(itm, index) in tableH(item.rootCategoryLevelId)" :key="index"
											class="items" v-if="!itm.formatter">
											<text>{{ itm.label }}</text>{{ item[itm.prop] }}
										</view>

										<view class="items" v-if="item.isDemandQuantity">
											<text>数量</text>{{ item.demandQuantity  }}
										</view>
										<view class="items content_num" v-if="!item.isDemandQuantity">
											<text>数量</text> <input style="8rpx !important"
												v-model="item.demandQuantity"></input>
										</view>



									</view>

								</view>


							</label>

						</view>


					</view>

					<view v-if="actTab  == '产出清单'">

						<view class="title_box rx-bc">
							<view></view>
							<view class="right_box rx-ec">
								<u-button type="success" size="small" class="u-reset-button" @click="addPicking(3)"
									text="添加"></u-button>
							</view>
						</view>

						<view v-for="(item, index) in standardOutputList" :key="index">
							<label class="listBox rx-bs">

								<view class="listBox-sel">
									<view class="round">{{index + 1}}</view>
								</view>

								<view class="listBox-con">


									<view class="listBox-bottom rx">

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


										<view class="items">
											<text>编码</text>{{ item.code  }}
										</view>


										<view v-for="(itm, index) in tableH(item.rootCategoryLevelId)" :key="index"
											class="items" v-if="!itm.formatter">
											<text>{{ itm.label }}</text>{{ item[itm.prop] }}
										</view>




									</view>

								</view>


							</label>

						</view>

					</view>


				</u-list>

				<view class="operate_box  rx-bc">
					<u-button size="small" class="u-reset-button" @click="close">
						取消
					</u-button>
					<u-button type="success" size="small" class="u-reset-button" @click="handOK">
						提交
					</u-button>

				</view>



			</view>

		</u-popup>
	</view>


</template>

<script>
	import {
		checkOutsourceMaterial
	} from '@/api/pda/workOrder.js'
	import {
		tableHeader
	} from '../common.js'
	import {
		EventBus
	} from '@/utils/eventBus.js'
	export default {
		data() {
			return {
				mode: 'center',
				show: false,
				topHight: 20 || 20,

				outObj: {},

				tabList: [{
						name: '物品清单'
					},
					{
						name: '带料清单'
					},
					{
						name: '产出清单'
					}
				],

				actTab: '物品清单',

				bomMaterialList: [],
				pickOutInList: [],
				materialList: [],
				standardOutputList: [],

				isFirstTask: null,

				clientEnvironmentId: uni.getStorageSync("userInfo") && uni.getStorageSync("userInfo")
					.clientEnvironmentId, // *1 主环境-601环境   2 soll-索尔环境    3 tg-碳谷环境


				seletedAll: false, //全选状态
				checkListLen: 0
			}
		},

		created() {
			EventBus.$on('outEvent', this.handleEvent);
		},


		computed: {


		},


		methods: {
			open(obj) {
				this.outObj = obj

				this.outsourceMaterialFn()
				this.show = true
			},

			outsourceMaterialFn() {
				let param = {
					taskId: this.outObj.taskId,
					taskIds: this.outObj.taskIds,
					workOrderId: this.outObj.workOrderId

				}
				checkOutsourceMaterial(param).then(res => {
					if (this.clientEnvironmentId == 3 && res.isFirstTask == 1) {
						this.pickOutInList = [...res.pickOutInList, ...res.materialList]
					} else {
						this.pickOutInList = res.pickOutInList
					}


					this.bomMaterialList = res.bomMaterialList.map((m) => {
						return {
							...m,
							isDemandQuantity: true

						}
					})
					this.standardOutputList = res.standardOutputList
					this.$forceUpdate()
				})
			},

			handTab(item) {
				this.actTab = item.name
			},

			close() {
				EventBus.$off('outEvent');
				this.show = false
			},

			handleEvent({
				message
			}) {
				if (message.pid == 3) {
					this.standardOutputList = message.memoList
				} else {
					if (message.pid == 2) {
						this.bomMaterialList = message.memoList
					}
				}


			},

			tableH(type) {
				return tableHeader(type)
			},
			//勾选
			selectVal(e, val, index) {
				this.pickOutInList[index].checked = !this.pickOutInList[index].checked
				this.checkListLen = this.pickOutInList.filter(f => f.checked == true).length
			},

			_seletedAll() {

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

					this.pickOutInList.map(item => {
						this.$set(item, 'checked', true)

					})



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

				this.checkListLen = this.pickOutInList.filter(f => f.checked == true).length
			},



			scrolltolower() {},

			addPicking(id) {
				const storageKey = Date.now() + "";
				let arr = null
				if (id == 3) {
					arr = [{
						standardOutputList: this.standardOutputList,
					}]

				} else {
					arr = [{
						bomMaterialList: this.bomMaterialList,
					}]
				}

				uni.setStorageSync(storageKey, arr);
				uni.navigateTo({
					url: `/pages/pda/workOrder/search/index?id=${id}&storageKey=${storageKey}&isType=zdy&taskId=${this.outObj.taskId}&classIds=[1,23,9]`
				})
			},

			handOK() {

			},
		}
	}
</script>

<style lang="scss" scoped>
	.z_list {
		max-height: 860rpx;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.box_list {
		min-height: 100rpx;
		width: 96vw;

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

	.operate_box {
		padding: 10rpx 32rpx;

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

	/deep/ .u-tabs__wrapper__nav {
		background: #f5f5f5 !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-sel{
			
			margin-top: 10rpx;
			margin-right: 8rpx;
			.round {
				width: 32rpx;
				height: 32rpx;
				line-height: 32rpx;
				text-align: center;
				border-radius: 50%;
				background: $theme-color;
				font-size: 24rpx;
				font-style: normal;
				font-weight: 400;
				color: #fff;
			}
		}
		

		.round {
			width: 32rpx;
			height: 32rpx;
			line-height: 32rpx;
			text-align: center;
			border-radius: 50%;
			background: $theme-color;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			color: #fff;
		}

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

			}

		}
	}



	.card_box {
		width: 92vw;
		padding: 16rpx 32rpx;
		box-sizing: border-box;
		border-bottom: 2rpx solid #E1E1E1;


		.item_box {
			margin-top: 10rpx;



			.item_one {
				width: 100%;
				font-size: 26rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 38rpx;
				word-wrap: break-word;
			}

			.gylx {
				color: $theme-color;
			}

			.perce50 {
				width: 50%;
			}
		}
	}


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

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


	}
</style>