ezhizao_dms_h5/pages/outsourcedInspection/relate.vue

<template>
	<view class="uni-column" style="padding: 24rpx">
		<view class="consultation-container ">
			<view>
				<zb-table :columns="relateColumn" :stripe="true" :fit="false" @dele="dele"
					:data="relateList"></zb-table>
			</view>
		</view>
		<view class='btn uni-row'>
			<button class='bottom-btn right-btn' type="primary" @click="handleContinue">继续扫码</button>
			<button class='bottom-btn right-btn' type="primary" @click="handleConfirm">确认关联</button>
		</view>
		<QrScanner v-if="showQrCodeReader" @decode="onDecodeHandler" @close="qrReaderClose" />
	</view>
	<view
		style="background-color: #99999999; z-index: 5; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;"
		v-if="loading">
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance
	} from 'vue'
	import {
		store
	} from '@/store/index.js'
	import QrScanner from '../vueQrCode/index.vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		getRelateInspectionByCarrier
	} from '@/api/business/processInspection.js'
	import {
		debounce
	} from '../../utils/common';

	const lotReporting = ref(null)
	const workshopId = ref(null);
	const searchRef = ref(null);
	const keyword = ref('')
	const loading = ref(false)
	const relateList = ref([])
	const processInspection = ref(null)
	const showQrCodeReader = ref(false);

	const form = ref([]); //表单数据true
	const checkAll = ref(false); //是否全选

	// 创建一个引用来存储最后一次请求的时间戳
	const lastRequestTimestamp = ref(0);
	const listData = ref([]);
	const allData = ref([])
	const selection = ref([]); //选中数据
	const workshopList = ref([]); //车间数据
	const relateColumn = ref([{
			name: 'lotCode',
			label: '批号',
			align: 'center',
			width: 120
		},
		{
			name: 'allCarriers',
			label: '箱号',
			align: 'center',
			width: 80
		},
		{
			name: 'isMaster',
			label: '主检查单',
			align: 'center',
			width: 80,
			filters: {
				0: '否',
				1: '是'
			}
		},
		{
			name: 'operation',
			type: 'operation',
			label: '关联',
			align: 'center',
			width: 60,
			renders: [{
				name: '删除',
				type: 'warn',
				func: "dele",
				class: "buttonOp"
			}, ]
		}
	])
	onShow(() => {
		init()
	})
	onMounted(() => {
		const instance = getCurrentInstance().proxy
		const eventChannel = instance.getOpenerEventChannel();
		eventChannel.on('outsourcedInspectionRelation', function(data) {
			// console.log(lot.value)
			console.log('outsourcedInspectionRelation', data)
			// 传入当前报工信息 通过当前报工的产品和工序获取检查指导书和分选标准
			relateList.value = data.relateList.map(v => ({
				...v
			}))
			processInspection.value = data
			handleAdd()
		})
	})

	//初始化
	function init() {
		// console.log(store.curDeptDetails)
		// uni.showLoading({
		// 	title: '加载中'
		// });
		checkAll.value = false

	}

	// 搜索按钮操作
	function handleSearch() {
		searchRef.value.open();
	}

	function refreshSearch(input) {
		// console.log(input)
		keyword.value = input
		handleChangeWorkshop(workshopId.value)
	}
	//H5扫码器回调
	function onDecodeHandler(data) {
		showQrCodeReader.value = false;
		let vehicleObj = {
			carrierCode: data
		};
		if (!vehicleObj.carrierCode || vehicleObj.carrierCode == "") {
			uni.showToast({
				icon: "none",
				title: "请扫载具码",
				duration: 1000
			})
			return;
		}
		getRelateInspectionByCarrier({
			...processInspection.value,
			carrierCode: vehicleObj.carrierCode,
		}).then(res => {
			console.log(res)
			if (res.code == 200) {
				if (res.data.length > 0 && res.data.filter(e => !relateList.value
						.some(t => t.lotId === e.lotId)).length > 0) {
					relateList.value.push(...res.data.filter(e => !relateList.value.some(t => t
						.lotId === e
						.lotId)))
				} else {
					uni.showToast({
						title: '载具绑定批次已质检或已绑定',
						icon: 'none'
					})
				}
				debounce(handleAdd, 700)
			} else {
				uni.showToast({
					icon: 'none',
					title: res.msg,
					duration: 2000
				})
			}
		}).catch(err => {
			console.log(err)
		})
	}


	//H5扫码器关闭
	function qrReaderClose() {
		showQrCodeReader.value = false;
	}

	function handleAdd() {
		showQrCodeReader.value = true;
		// const mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module");
		// if (mpaasScanModule) {
		// 	// 调用插件的 mpaasScan 方法
		// 	mpaasScanModule.mpaasScan({
		// 			// 扫码识别类型，参数可多选，qrCode、barCode，
		// 			// 如不设置，默认识别所有扫码类型，可能有些许影响识别效率
		// 			scanType: ["qrCode", "barCode"],
		// 			// 是否隐藏相册，默认false不隐藏
		// 			hideAlbum: false,
		// 		},
		// 		(ret) => {
		// 			let vehicleObj = {
		// 				carrierCode: ret.resp_result
		// 			};
		// 			if (!vehicleObj.carrierCode || vehicleObj.carrierCode == "") {
		// 				uni.showToast({
		// 					icon: "none",
		// 					title: "请扫载具码",
		// 					duration: 1000
		// 				})
		// 				return;
		// 			}
		// 			getRelateInspectionByCarrier({
		// 				...processInspection.value,
		// 				carrierCode: vehicleObj.carrierCode,
		// 			}).then(res => {
		// 				console.log(res)
		// 				if (res.code == 200) {
		// 					if (res.data.length > 0 && res.data.filter(e => !relateList.value
		// 							.some(t => t.lotId === e.lotId)).length > 0) {
		// 						relateList.value.push(...res.data.filter(e => !relateList.value.some(t => t
		// 							.lotId === e
		// 							.lotId)))
		// 					} else {
		// 						uni.showToast({
		// 							title: '载具绑定批次已质检或已绑定',
		// 							icon: 'none'
		// 						})
		// 					}
		// 					debounce(handleAdd, 700)
		// 				} else {
		// 					uni.showToast({
		// 						icon: 'none',
		// 						title: res.msg,
		// 						duration: 2000
		// 					})
		// 				}
		// 			}).catch(err => {
		// 				console.log(err)
		// 			})
		// 		}
		// 	);
		// } else {
		// 	// 测试时用
		// 	getRelateInspectionByCarrier({
		// 		carrierCode: '006522',
		// 		...processInspection.value
		// 	}).then(res => {
		// 		console.log(res)
		// 		if (res.code == 200) {
		// 			console.log(relateList.value)
		// 			console.log(res.data.filter(e => !relateList.value
		// 				.some(t => t.lotId === e.lotId)).length)
		// 			if (res.data.length > 0 && res.data.filter(e => !relateList.value
		// 					.some(t => t.lotId === e.lotId)).length > 0) {
		// 				relateList.value.push(...res.data.filter(e => !relateList.value.some(t => t.lotId === e
		// 					.lotId)))
		// 			} else {
		// 				uni.showToast({
		// 					title: '载具绑定批次已质检或已绑定',
		// 					icon: 'none'
		// 				})
		// 			}
		// 		} else {
		// 			uni.showToast({
		// 				icon: 'none',
		// 				title: res.msg,
		// 				duration: 2000
		// 			})
		// 		}
		// 	}).catch(err => {
		// 		console.log(err)
		// 	})
		// }
		// lotReporting.value.open(data);
	}

	function handleContinue() {
		// lotReporting.value.open('test')
		handleAdd()
	}

	// 全选按钮操作
	function handleAll() {
		//清空选中数据
		selection.value.length = 0;
		if (checkAll.value) {
			//变更选中状态
			checkAll.value = false;
		} else {
			checkAll.value = true;
			listData.value.findIndex(item => handleSelection(item))
		}
	}

	function handleChangeWorkshop(arg) {
		const workshop = workshopList.value.find(v => v.value === arg)
		listData.value = allData.value.filter(v => workshop.depts.some(e => e.deptId === v.quickInfo.deptId) && (v.lotCode
			.includes(keyword.value) || v.productDescription.includes(keyword.value) || v.carrierName.includes(
				keyword.value)))
		selection.value = []
	}


	function isSelected(item) {
		return selection.value.includes(item)
	}

	//
	function handleSelection(item) {
		const buttonIndex = selection.value.findIndex(selectedItem => selectedItem === item);
		if (buttonIndex > -1) {
			selection.value.splice(buttonIndex, 1); // 取消选中
		} else {
			selection.value.push(item); // 选中
		}
		if (selection.value.length == listData.value.length) {
			checkAll.value = true;
		} else {
			checkAll.value = false;
		}
	}

	function dele(ite, index) {
		if (ite.isMaster == 1) {
			uni.showToast({
				icon: 'none',
				title: '主检查单，不可删除'
			})
		} else {
			relateList.value.splice(index, 1);
		}
	}

	function handleConfirm() {
		uni.$emit('relateEvent', relateList.value)
		uni.navigateBack()
	}
</script>

<style lang="scss">
	$nav-height: 60rpx;

	.bottom-btn-container {
		position: fixed;
		top: 80%;
		right: 20rpx;
		left: 20rpx;

		.start-batch-btn {
			margin-bottom: 24rpx;
			border-radius: 8rpx;
			background-color: #00e2a6;
			width: 80%;
		}
	}

	.active {
		flex: 1;
		height: 40rpx;
		background-color: #5e6eff;
		border: 1px solid #5e6eff;
		color: #000000;
	}

	.select {
		flex: 1;
		height: 40rpx;
		// font-size: 20rpx;
		background-color: #5e6eff;
		border: 1px solid #5e6eff;
		color: #ffffff;

	}


	.btn {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		height: 100rpx;
		padding: 16rpx 24rpx;
		align-items: center;
		background-color: #FFFFFF;
		justify-content: space-between;

		.bottom-btn {
			flex: 1;
			font-size: 28rpx;
			color: #FFFFFF;

			&.left-btn {
				// background-color: #a4adb3;
			}

			&.right-btn {
				background-color: #1684fc;
				margin-left: 24rpx;

			}
		}
	}

	.box-bg {
		width: 100%;
		background-color: #F5F5F5;
		padding: 5rpx 0;
		justify-content: space-around;
		align-items: center;

		.input-view {
			width: 100%;
			flex: 4;
			background-color: #f8f8f8;
			height: $nav-height;
			border: 1rpx solid #999;
			border-radius: 15rpx;
			padding: 0 15rpx;
			flex-wrap: nowrap;
			margin: 0 10rpx 20rpx;
			line-height: $nav-height;

			.input-uni-icon {
				line-height: $nav-height;
			}

			.nav-bar-input {
				width: 80%;
				height: $nav-height;
				line-height: $nav-height;
				padding: 0 5rpx;
				background-color: #f8f8f8;
			}
		}

		.search {
			width: 20%;
			text-align: center;
			color: #808080;
			margin-top: -20rpx;
		}
	}

	.list-item {
		background-color: #fff;
		position: relative;
		padding: 16rpx;
		padding-bottom: 24rpx;
		border-radius: 24rpx;
		margin-bottom: 24rpx;

		.title-container {
			justify-content: space-between;
			margin-top: 8rpx;
			margin-bottom: 16rpx;

			.title {
				height: 48rpx;
				align-items: center;

				.label {
					font-size: 32rpx;
					font-weight: bold;

					&.code {
						margin-left: 8rpx;
					}
				}
			}

			.tag {
				border: 1px solid #1ce5b0;
				background-color: #f6fffd;
				padding: 8rpx;
				border-radius: 8rpx;

				.label {
					color: #1ce5b0;
					font-size: 24rpx;
				}

				&.not-start {
					border: 1px solid #bbbbbb;
					background-color: #f5f5f5;

					.label {
						color: #bbbbbb;
					}
				}
			}
		}


		.item-info {
			margin-bottom: 8rpx;

			.label {
				font-size: 28rpx;
				width: 150rpx;
				color: #808080;

				&.right {
					flex: 1;
					color: #000000;
				}
			}
		}
	}

	.selected {
		border: 1rpx solid #c0c4fc;
		background-color: #c0c4fc;
		/* 选中之后样式 */
	}
</style>