ezhizao_dms_app/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>

	</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 {
		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 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: 100
		},
		{
			name: 'allCarriers',
			label: '箱号',
			align: 'center',
			width: 60
		},
		{
			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)
	}

	function handleAdd() {
		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;
		/* 选中之后样式 */
	}

	.zb-table .item-tr {
		flex-direction: row;
	}
</style>