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 == '物品清单'">
						<checkbox-group v-for="(item, index) in pickOutInList" :key="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>

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


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

								<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>
						</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: [],
				pickOutInVOList: []
			}
		},

		created() {
			EventBus.$on('outEvent', this.handleEvent);
		},
		methods: {
			open(obj) {
				console.log(obj, 999)
				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 => {

					this.pickOutInList = res.pickOutInList
					this.bomMaterialList = res.bomMaterialList
					this.pickOutInVOList = res.pickOutInVOList
					this.$forceUpdate()
				})
			},

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

			close() {
				this.show = false
			},

			handleEvent(data) {
				console.log('Received event with data:', data);

			},

			tableH(type) {
				return tableHeader(type)
			},


			scrolltolower() {},

			addPicking(id) {
				const storageKey = Date.now() + "";

				let arr = []
				uni.setStorageSync(storageKey, arr);
				uni.navigateTo({
					url: `/pages/pda/workOrder/search/index?id=${id}&storageKey=${storageKey}&isType=zdy&taskId=${this.outObj.taskId}&classIds=[1,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-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: 750rpx;
		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%;
			}
		}
	}
</style>