kd-aiot-frontend-mes/src/views/produce/components/outsourcing/outsourceList.vue

<template>
	<!-- 委外下一步 -->
	<div class="card">
		<div class="c_header_title">
			<div class="c_title">委外记录</div>
		</div>
		<div class="card_box">
			<el-descriptions>
				<el-descriptions-item label="委外名称">{{ outObj.name }}</el-descriptions-item>
				<el-descriptions-item label="委外类型">{{ outObj.type == 4 ? '带料委外' : '无料委外' }}</el-descriptions-item>
				<!-- <el-descriptions-item label="直接入库">{{ outObj.isInWarehouse == 1 ? '是' : '否' }}</el-descriptions-item> -->
				<el-descriptions-item label="直接入库">{{ '是' }}</el-descriptions-item>

			</el-descriptions>

		</div>
		<el-tabs v-model="activeName">
			<el-tab-pane label="物品清单" name="0">
				<div class="materialList">
					<div class="u-reset" style="display: flex;" v-if="clientEnvironmentId != 2">
						<el-checkbox color="#fff" v-model="checkedAll" :checked="seletedAll" @change="_seletedAll">全选
						</el-checkbox>
						<div class="gxList">勾选：<span style="color: #157A2C">{{ checkListLen || 0 }}个</span></div>
					</div>
					<!--  -->
					<!-- <el-checkbox-group  v-model="checkList"> -->
						<div v-for="(item, index) in pickOutInList" :key="index">
							<div class="listBox rx-bs">
								
								<div class="listBox-sel">
									<el-checkbox  v-model="item.checked" color="#fff"
										@change="e => selectVal(e, item, index)" 
										v-if='(item.rootCategoryLevelId != 11 || (item.rootCategoryLevelId == 11 && item.status != 1)) && clientEnvironmentId != 2'
										 >
										 </el-checkbox>

								</div>

								<div class="listBox-con">
									<div class="listBox-top rx-bc">
										<div> {{ item.name }}</div>
										<div class="code">
											{{ item.rootCategoryLevelId == 4 ? item.codeNumber : item.code }}
										</div>
									</div>

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




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


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


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


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


										<div class="items" style="width: 15%;"
											v-if='([1, 2, 9, 23].includes(Number(item.rootCategoryLevelId)) && item.isConsumable == 0)'>
											<span>重量:</span>{{ item.extInfo.newWeight }} {{ item.extInfo.weightUnit }}
										</div>


										<div class="items" style="width: 15%;"
											v-if='([1, 2, 9, 23].includes(Number(item.rootCategoryLevelId)) && item.isConsumable == 1)'>
											<span>数量:</span>{{ item.feedQuantity }}
										</div>

										<div class="items" style="width: 15%;"
											v-if='([1, 2, 9, 23].includes(Number(item.rootCategoryLevelId)) && item.isConsumable == 1)'>
											<span>重量:</span>{{ item.weight || 0 }} {{ item.weightUnit }}
										</div>

										<div class="items"
											v-if='([1, 2, 9, 23].includes(Number(item.rootCategoryLevelId)) && item.isConsumable == 1)'>
											<span>规格:</span> {{ item.specification }}
										</div>

										<div class="items"
											v-if='([1, 2, 9, 23].includes(Number(item.rootCategoryLevelId)) && item.isConsumable == 1)'>
											<span>型号:</span> {{ item.modelType }}
										</div>

									</div>

								</div>
							</div>
						</div>
					<!-- </el-checkbox-group> -->
				</div>

			</el-tab-pane>
			<el-tab-pane label="带料清单" name="1">
				<div class="materialList">
					<div class="u-reset">
						<el-button type="primary" size="small" class="u-reset-button" @click="openPicking(2)">
							添加
						</el-button>
					</div>

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


							<div class="listBox-con">


								<div class="listBox-bottom rx">
									<div class="items">
										<span>序号</span>{{ index + 1 }}
									</div>
									<div class="items">
										<span>名称</span>{{ item.name }}
									</div>


									<div class="items">
										<span>编码</span>{{ item.code }}
									</div>


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

									<div class="items" v-if="item.isDemandQuantity && clientEnvironmentId != 2"
										style="width: 15%;">
										<span>数量</span>{{ checkListLen == 0 ? item.demandQuantity : item.count * (
											checkListLen || 1) }}
									</div>
									<div class="items content_num"
										v-if="!item.isDemandQuantity && clientEnvironmentId != 2" style="width: 15%;">
										<span>数量</span> <input style="width: 8px !important"
											v-model="item.demandQuantity"></input>
									</div>

									<div class="items" v-if="item.isDemandQuantity && clientEnvironmentId == 2"
										style="width: 15%;">
										<span>数量</span>{{ item.count * (outObj.formedNumLast || 1) }}
									</div>
									<div class="items content_num"
										v-if="!item.isDemandQuantity && clientEnvironmentId == 2" style="width: 15%;">
										<span>数量</span> <input style="width:8rpx !important"
											v-model="item.demandQuantity"></input>
									</div>



								</div>

							</div>


						</label>

					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="产出清单" name="2">
				<div class="materialList">
					<div class="u-reset">
						<el-button type="primary" size="small" class="u-reset-button" @click="openPicking(3)">
							添加
						</el-button>
					</div>
					<div v-for="(item, index) in standardOutputList" :key="index">
						<label class="listBox rx-bs">

							<div class="listBox-con">


								<div class="listBox-bottom rx">
									<div class="items" style="width: 15%;">
										<span>序号</span>{{ index + 1 }}
									</div>
									<div class="items">
										<span>名称</span>{{ item.name }}
									</div>

									<div class="items">
										<span>编码</span>{{ item.code }}
									</div>


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

									<div class="items content_num">
										<span>数量</span> <input style="width: 8rpx !important"
											v-model="item.demandQuantity"></input>
									</div>




								</div>

							</div>


						</label>

					</div>
				</div>
			</el-tab-pane>
		</el-tabs>

		<div class="operate_box  rx-bc">
			<el-button size="small" class="u-reset-button" @click="close">
				取消
			</el-button>
			<el-button type="primary" size="small" class="u-reset-button" @click="handOK(0)">
				提交
			</el-button>

			<el-button type="primary" size="small" class="u-reset-button" @click="handOK(1)">
				提交并发布
			</el-button>

		</div>

		<pickingList ref="pickingListRef" isType="weiwai" @allSelection="allSelection"></pickingList>
	</div>
</template>

<script>
import {
	// 	checkOutsourceMaterial,
	applyoutsourceSave,
	// 	getWarehouseList
} from '@/api/produce/index.js'



import {
	tableHeader
} from '@/utils/dict/common.js'
// import {
// 	EventBus
// } from '@/utils/eventBus.js'
import pickingList from './pickingList.vue'
export default {
	components: { pickingList },
	data() {
		return {
			checkListLen: 0,
			checkedAll:true,
			checkList: [],
			mode: 'center',
			show: false,
			topHight: 20 || 20,
			activeName: "0",
			outObj: {
				name: '111',
				type: 4,
				isInWarehouse: 1
			},

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

			actTab: '物品清单',
			datapickOutInList: [],
			bomMaterialList: [],
			pickOutInList: [],
			materialList: [],
			standardOutputList: [],

			isFirstTask: null,

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


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

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

	computed: {
		clientEnvironmentId() {
			return this.$store.state.user.info.clientEnvironmentId;
		}
	},

	props: {
		outsourceFormVal: {
			type: Object,
			default: () => { }
		},
	},
	watch: {
		outsourceFormVal: {
			handler(val) {
				console.log(val, 'outsourceFormVal');
				this.outsourceMaterialFn(val);
				this.outObj = val;
			},
			deep: true,
			immediate: true
		}
	},



	methods: {
		// open(obj) {
		// 	// this.outObj = obj;
		// 	this.actTab = '物品清单';
		// 	// this.outsourceMaterialFn()
		// 	// this.getWarehouseFn()
		// },
		allSelection(e, item) {
			if (e == 2) {
				if (item.length) {
					item.map(v => {
						this.bomMaterialList.push(v)
					})
				}
				;
				console.log(this.bomMaterialList);
			} else if (e == 3) {
				if (item.length) {

					this.standardOutputList = item;
				}
			}

		},


		openPicking(id) {
			this.$refs.pickingListRef.open(id);
		},


		outsourceMaterialFn(res) {

			let _arr = []
			_arr = [...res.pickOutInList, ...res.materialList]

			this.pickOutInList = _arr.reduce((acc, item) => {
				const existingItem = acc.find(existing => existing.id === item.id);
				if (!existingItem) {
					acc.push(item);
				}
				return acc;
			}, []);


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

				}
			})

			this.pickOutInList.map(v => {
				v.checked = true;
			})
			
			this.checkListLen = this.pickOutInList.length;

			this.standardOutputList = res.standardOutputList

			// let param = {
			// 	taskId: this.outObj.taskId,
			// 	taskIds: this.outObj.taskIds,
			// 	workOrderId: this.outObj.workOrderId

			// }
			// checkOutsourceMaterial(param).then(res => {




			// 	let _arr = []
			// 	_arr = [...res.pickOutInList, ...res.materialList]
			// 	this.pickOutInList = _arr.reduce((acc, item) => {
			// 		const existingItem = acc.find(existing => existing.id === item.id);
			// 		if (!existingItem) {
			// 			acc.push(item);
			// 		}
			// 		return acc;
			// 	}, []);


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

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


		// 仓库 
		getWarehouseFn() {
			getWarehouseList().then(res => {
				this.warehouseList = res
			})
		},


		handTab(item) {
			this.actTab = item.name
		},
		//关闭弹窗
		close() {
			this.$emit('closeForm')
		},

		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.$forceUpdate()
			this.pickOutInList[index] = val
			this.$set(this, 'pickOutInList', this.pickOutInList)
			
			this.checkListLen = this.pickOutInList.filter(f => f.checked == true).length;
		},

		_seletedAll() {

			console.log(this.seletedAll,this.pickOutInList,'this.seletedAll');
			// this.seletedAll true 是全选 

			if (!this.seletedAll) {
				// 非全选
				this.seletedAll = true;
				this.checkListLen = 0;
				
				this.pickOutInList.map(item => {
					item.checked =false;
				})

				this.$set(this, 'pickOutInList', this.pickOutInList)

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

			}
			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(isRelease) {
			// isRelease? 0 提交 2提交并发布
		
			if (this.checkListLen > 0 && !this.outObj.warehouseId) {
				return this.$message({
					message: "请选择仓库",
					type: "warning"
				})
			}


			// 环境判断
			let _pickOutInList = []

			if (this.clientEnvironmentId == 2) {
				_pickOutInList = this.pickOutInList
			} else {
				_pickOutInList = this.pickOutInList.filter(f => f.checked == true)
			}



			let param = {
				...this.outObj,
				isRelease: isRelease,
				bomMaterialList: this.bomMaterialList,
				pickOutInList: _pickOutInList,
				materialList: this.materialList,
				standardOutputList: this.standardOutputList,
			}
			applyoutsourceSave(param).then(res => {
				return this.$message({
					message: "提交成功",
					type: "scuccess"
				})
				this.checkListLen = 0

			})
		},
	}
}
</script>

<style lang="scss" scoped>
.c_header_title {
	display: flex;
	align-items: center;
	margin-bottom: 0;
	height: 58px;
	margin-bottom: 10px;
	box-sizing: border-box;
	border-bottom: 1px solid var(--border-color-lighter);
}

.operate_box {
	padding: 15px;
	box-shadow: 0px -2px 15px 0px rgba(0, 0, 0, 0.1);
}

.c_title {

	color: #157a2c;
	font-size: 16px;
	font-weight: bold;
}

.materialList {
	height: 55vh;
	overflow-y: auto;
}

.card {
	width: 100%;
	padding: 0 20px;
}

.u-reset {
	width: 100%;
	padding: 5px;
	text-align: right;
}

.listBox-con {
	width: 100%;


}
.gxList{
	margin-left: 10px;
}


.listBox-sel {
	margin: 0 10px
}

.listBox-top {
	display: flex;
	padding: 15px;
	font-size: 14px;
	font-weight: bold;
	border-bottom: 1px solid #ddd;
}

.listBox-bottom {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	margin-bottom: 0;
}

.listBox {
	display: flex;
	align-items: center;
	border: 1px solid #ddd;
	margin-bottom: 20px;
}

.items {
	font-size: 12px;
	width: 28%;
	display: flex;
	align-items: center;

	// border: 1px solid #ddd;
	// border-bottom: 1px solid #ddd;
	// border-right: 0;
	span {
		display: block;
		padding: 10px;
		margin-right: 5px;
		color: #157a2c;
		background-color: #f7f9fa;
	}
}
</style>