aiot-app/pages/qms/inspectionWork/sampleList.vue

<!-- 样品列表页面 -->
<template>
	<view class="mainBox">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" :title="title" @clickLeft="handleClose">
		</uni-nav-bar>

		<!-- <view class="nav-placeholder"></view> -->

		<view class="wrapper">
			<scroll-view class="scroll-wrapper" scroll-y>
				<view class="sample-list">
					<view class="sample-item"
						v-for="(sample, sampleIndex) in  projectId?tableData.filter(item=>item.id==projectId):tableData"
						:key="sampleIndex">
						<view class="sample-header" @click="toggleExpand(sampleIndex)">
							<view class="sample-info">
								<view class="info-row">
									<text class="label">编码:</text>
									<text class="value">{{ sample.categoryCode }}</text>
								</view>
								<view class="info-row">
									<text class="label">名称:</text>
									<text class="value">{{ sample.categoryName }}</text>
								</view>
								<view class="info-row" v-if="sample.batchNo">
									<text class="label">批次号:</text>
									<text class="value">{{ sample.batchNo }}</text>
								</view>
								<view class="info-row" v-if="sample.packageNo">
									<text class="label">包装编码:</text>
									<text class="value">{{ sample.packageNo }}</text>
								</view>
							</view>
							<view class="expand-arrow" :class="{ expanded: expandedItems[sampleIndex] }">›</view>
						</view>

						<view class="quality-table-wrapper" v-if="expandedItems[sampleIndex]">
							<scroll-view class="quality-table-scroll" scroll-x>
								<view class="quality-table">
									<view class="table-header">
										<view class="table-cell">质检项名称</view>
										<view class="table-cell">质检内容</view>
										<view class="table-cell">质检结果</view>
										<view class="table-cell">质检方案编码</view>
										<view class="table-cell">质检方案名称</view>
										<view class="table-cell">质检类型</view>
										<view class="table-cell">工艺参数</view>
									</view>
									<view class="table-body">
										<view class="table-row" v-for="(
                        quality, qualityIndex
                      ) in sample.qualitySampleTemplateList" :key="qualityIndex">
											<view class="table-cell">
												<text class="cell-text"
													:class="{ warn: quality.qualityResults === 2 }">{{ quality.inspectionName }}</text>
											</view>
											<view class="table-cell">
												<u-input v-model="quality.qualityResultContent" placeholder="请输入"
													border="none" @change="
                            handleInput(
                              quality,
                              quality.qualityResultContent,
                              tableData,
                            )
                          " :class="{ warn: quality.qualityResults === 2 }" :disabled="
                            type === 'detail' ||
                            ((!pageName||pageName=='myList') && sample.correlationId)
                          ">
													<template #suffix v-if="quality.unitName">
														<text class="unit">{{ quality.unitName }}</text>
													</template>
												</u-input>
											</view>
											<view class="table-cell">
												<u-input disabled placeholder=" " v-if="type === 'detail' ||
                            ((!pageName||pageName=='myList') && sample.correlationId)" border="surround" :value="
												  quality.qualityResults &&
												  qualityResultsList.find(
												    (item) => item.value == quality.qualityResults,
												  ).text
												">
												</u-input>
												<uni-data-picker v-else v-model="quality.qualityResults"
													placeholder="请选择" :localdata="qualityResultsList"
													@change="qualityResultsListChange(tableData)" :clear-icon="false">
												</uni-data-picker>

											</view>
											<view class="table-cell">
												<text class="cell-text"
													:class="{ warn: quality.qualityResults === 2 }">{{ quality.qualitySchemeTemplateCode }}</text>
											</view>
											<view class="table-cell">
												<text class="cell-text"
													:class="{ warn: quality.qualityResults === 2 }">{{ quality.qualitySchemeTemplateName }}</text>
											</view>
											<view class="table-cell">
												<text class="cell-text"
													:class="{ warn: quality.qualityResults === 2 }">{{ quality.categoryLevelClassName }}</text>
											</view>
											<view class="table-cell parameter-cell">


												<text class="cell-text" :class="{ warn: quality.qualityResults === 2 }">
													<text v-if="quality.textType == 3">
														{{ quality.symbol }}
														{{ quality.minValue }}-{{ quality.maxValue }}
													</text>
													<text v-else-if="quality.textType == 8">
														标准值：{{quality.defaultValue}}{{ quality.unitName||'' }}
														下限：{{ quality.minValue||0 }}{{ quality.unitName||'' }}
														上限：{{ quality.minValue||0 }}{{ quality.unitName||'' }}
													</text>
													<text v-else>
														{{ quality.symbol }} {{ quality.defaultValue }}
													</text>
													<text v-if="quality.textType != 8">
														{{ quality.unitName }}</text>
												</text>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>

						<view class="quality-summary" v-if="sample.qualityResults">
							<view style="min-width: 10px;margin-left: 16rpx;">
								<text>
									{{sample.status==1?'已检':sample.status==2?'已派单':sample.status==3?'已请托':'待检'}}
								</text>

							</view>
							<view>
								<text class="summary-label">样品质检结果:</text>
								<text class="summary-value" :class="getQualityResultClass(sample.qualityResults)">
									{{ formatQualityResult(sample.qualityResults) }}
								</text>
							</view>

						</view>
					</view>

					<view class="empty-state" v-if="!tableData || tableData.length === 0">
						<text>暂无数据</text>
					</view>
				</view>
			</scroll-view>

			<view style="height: 84rpx"></view>
			<view class="footerButton">
				<u-button @click="handleClose" type="default" text="返回"></u-button>
				<u-button v-if="type != 'view'&&!isCorrelationId&&workData.status!=1" type="primary" @click="save"
					text="保存"></u-button>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getById,
		update,
		queryQualityInventory
	} from "@/api/inspectionWork/index.js";
	import {
		handleInput,
		qualityResultsListChange
	} from "./unit.js";
	export default {
		components: {},
		data() {
			return {
				title: "样品列表",
				rowIndex: 0,
				type: "",
				pageName: "",
				tableData: [],
				handleInput,
				qualityResultsListChange,
				isCorrelationId: false,
				expandedItems: {},
				workData: {},
				inventoryList: [],
				projectId: '',
				qualityResultsList: [{
						text: "合格",
						value: 1,
					},
					{
						text: "不合格",
						value: 2,
					},
					{
						text: "让步接收",
						value: 3,
					},
				],
			};
		},
		onLoad(data) {


			if (data.workId) {
				this.projectId = data.projectId
				this.type = data.type || "";
				this.pageName = data.pageName || "";
				getById(data.workId).then((res) => {
					this.workData = res;
					if (data.projectId) {
						const qualitySampleList = res.qualitySampleList.filter(
							(item) => item.id == data.projectId,
						);

						if (qualitySampleList[0].correlationId && !['myInspectionProjectEntrusted',
								'myInspectionProjectTask'
							].includes(this.pageName)) {
							this.isCorrelationId = true
						} else {
							qualitySampleList[0].status = 1
						}
					} else {
						this.isCorrelationId = true
						res.qualitySampleList.forEach(item => {
							if (!item.correlationId || ['myInspectionProjectEntrusted',
									'myInspectionProjectTask'
								].includes(this.pageName)) {
								this.isCorrelationId = false
								item.status = 1
							}
						})
					}



					this.tableData = res.qualitySampleList.map(item => {
						if (!item.qualitySampleTemplateList.length && res.templateList.length) {
							item.qualitySampleTemplateList = JSON.parse(JSON.stringify(res.templateList))
						}

						return item
					});
				});

				this.expandedItems = {};
				this.getQueryQualityInventory(data.workId)
			}
		},
		methods: {
			async getQueryQualityInventory(workId) {
				const res = await queryQualityInventory({
					qualityWorkerId: workId,
					size: -1
				});

				if (res.list.length > 0) {
					this.inventoryList = res.list;
				}
			},
			handleClose() {
				uni.navigateBack();
			},

			handleConfirm() {
				this.tableData.forEach((item) => {
					if (!this.pageName && item.correlationId) {
						return;
					}
					item.status = 1;
				});

				const pages = getCurrentPages();
				const prevPage = pages[pages.length - 2];
				if (prevPage) {
					prevPage.$vm.handleConfirm &&
						prevPage.$vm.handleConfirm(this.tableData, this.rowIndex);
				}

				uni.navigateBack();
			},

			toggleExpand(index) {
				this.$set(this.expandedItems, index, !this.expandedItems[index]);
			},
			setNum() {

				let sampleQualifiedNumber = 0; //  样品合格数
				let sampleNoQualifiedNumber = 0; //  样品不合格数
				let sampleQualificationRate = 0; //样品合格率
				let sampleNoQualificationRate = 0; //样品不合格率

				let qualifiedNumber = 0; // 合格数
				let noQualifiedNumber = 0; //  不合格数
				let qualificationRate = 0; //  合格率
				let noQualificationRate = 0; //不合格率

				this.tableData.forEach(item => {
					if (item.qualityResults == 2) {
						sampleNoQualifiedNumber += item.measureQuantity
					}
				})
				sampleQualifiedNumber = this.workData.sampleQuantity - sampleNoQualifiedNumber

				sampleQualificationRate =
					((sampleQualifiedNumber / this.workData.sampleQuantity) * 100).toFixed(2) || '';
				sampleNoQualificationRate =
					((sampleNoQualifiedNumber / this.workData.sampleQuantity) * 100).toFixed(2) || '';
				if (this.workData.qualityMode == 2 && this.workData.qualityResults == 2) {
					qualifiedNumber = sampleQualifiedNumber
					noQualifiedNumber = this.workData.total - sampleQualifiedNumber

				} else {

					qualifiedNumber = this.workData.total - sampleNoQualifiedNumber
					noQualifiedNumber = sampleNoQualifiedNumber

				}

				qualificationRate =
					((qualifiedNumber / this.workData.total) * 100).toFixed(2) || '';
				noQualificationRate =
					((noQualifiedNumber / this.workData.total) * 100).toFixed(2) || '';
				this.workData.sampleQualifiedNumber = sampleQualifiedNumber
				this.workData.sampleNoQualifiedNumber = sampleNoQualifiedNumber
				this.workData.sampleQualificationRate = sampleQualificationRate
				this.workData.sampleNoQualificationRate = sampleNoQualificationRate
				this.workData.qualifiedNumber = qualifiedNumber
				this.workData.noQualifiedNumber = noQualifiedNumber
				this.workData.qualificationRate = qualificationRate
				this.workData.noQualificationRate = noQualificationRate
				// qualityMode
			},
			/* 保存编辑 */
			save() {
				this.workData.isUpdate = 1;
				this.setNum()
				let params = {
					...this.workData,
					sampleList: this.tableData,
					planTemplateList: this.workData.templateList,
					templateList: this.workData.templateList,
					qualityInventoryList: this.inventoryList
				};

				update(params)
					.then((msg) => {
						uni.$emit('successInit')
						this.back()
					})
					.catch((e) => {});
			},
			formatQualityResult(value) {
				const map = {
					1: "合格",
					2: "不合格",
					3: "让步接收",
				};
				return map[value] || "";
			},

			getQualityResultClass(value) {
				return {
					1: "result-pass",
					2: "result-fail",
					3: "result-concession",
				} [value];
			},
		},
	};
</script>

<style lang="scss" scoped>
	.mainBox {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f3f8fb;
	}

	.nav-placeholder {
		height: calc(var(--status-bar-height, 0px) + 44px);
	}

	.wrapper {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.scroll-wrapper {
		flex: 1;
		height: 0;
		padding: 20rpx;

		.sample-list {
			padding-bottom: 20rpx;

			.sample-item {
				background: #fff;
				border-radius: 30rpx;
				margin-bottom: 20rpx;
				overflow: hidden;
				//   box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
				//   border: 1rpx solid #f0f0f0;

				.quality-summary {
					padding: 24rpx;
					background: #fff;
					border-top: 1rpx solid #f5f3f3;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					font-weight: bold;

					.summary-label {
						color: #333;
						margin-right: 20rpx;
					}

					.summary-value {

						padding: 8rpx 20rpx;
						border-radius: 8rpx;

						&.result-pass {
							color: #52c41a;
							background: #f6ffed;
						}

						&.result-fail {
							color: #ff4d4f;
							background: #fff2f0;
						}

						&.result-concession {
							color: #faad14;
							background: #fffbe6;
						}
					}
				}

				.empty-state {
					padding: 100rpx 0;
					text-align: center;
					font-size: 28rpx;
					color: #999;
				}

				.sample-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 40rpx 40rpx 20rpx 40rpx;
					background: #ffffff;
					box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

					.sample-info {
						flex: 1;
					}

					.info-row {
						display: flex;
						margin-bottom: 8rpx;

						&:last-child {
							margin-bottom: 0;
						}

						.label {
							font-size: 28rpx;
							color: #333;

							font-weight: 800;

							margin-right: 10rpx;
							min-width: 120rpx;
						}

						.value {
							font-size: 26rpx;
							color: #333;
							flex: 1;
							font-weight: 800;
						}
					}

					.expand-arrow {
						font-size: 40rpx;
						color: #999;
						margin-left: 20rpx;
						transform: rotate(0deg);
						transition: transform 0.3s;
						background: #fff;
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

						&.expanded {
							transform: rotate(90deg);
						}
					}
				}

				.quality-table-wrapper {
					// margin: 20rpx;
					margin-top: 0;
					// border-radius: 12rpx;
					overflow: hidden;
					// box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
				}

				// 自定义滚动条样式
				::v-deep .quality-table-scroll ::-webkit-scrollbar {
					width: 6rpx;
					height: 6rpx;
				}

				::v-deep .quality-table-scroll ::-webkit-scrollbar-track {
					background: #f1f1f1;
					border-radius: 3rpx;
				}

				::v-deep .quality-table-scroll ::-webkit-scrollbar-thumb {
					background: #c1c1c1;
					border-radius: 3rpx;
				}

				::v-deep .quality-table-scroll ::-webkit-scrollbar-thumb:hover {
					background: #a8a8a8;
				}

				::v-deep .table-cell:last-child::-webkit-scrollbar {
					width: 4rpx;
				}

				::v-deep .table-cell:last-child::-webkit-scrollbar-track {
					background: #f9f9f9;
					border-radius: 2rpx;
				}

				::v-deep .table-cell:last-child::-webkit-scrollbar-thumb {
					background: #d9d9d9;
					border-radius: 2rpx;
				}

				.quality-table-scroll {
					width: 100%;
				}

				.quality-table {
					min-width: 100%;
					width: 1540rpx;
					background: #fff;
				}

				.table-header {
					display: flex;
					background: #f5f5f5;
					border-bottom: 2rpx solid #e5e5e5;

					.table-cell {
						padding: 24rpx 12rpx;
						font-size: 26rpx;
						font-weight: bold;
						color: #333;
						text-align: center;
						border-right: 1rpx solid #e5e5e5;
						white-space: nowrap;
						flex-shrink: 0;
						display: flex;
						align-items: center;
						justify-content: center;
						background: #f5f5f5;
						width: 200rpx;

						&:last-child {
							border-right: none;
							background: #f5f5f5;
						}

						&:nth-child(2) {
							width: 260rpx;
						}

						&:nth-child(3) {
							width: 220rpx;
						}

						&:nth-child(7) {
							width: 260rpx;
						}
					}
				}

				.table-body {
					.table-row {
						display: flex;
						border-bottom: 1rpx solid #e5e5e5;
						transition: background 0.2s;

						&:nth-child(even) {
							// background: #fafafa;
						}

						&:last-child {
							border-bottom: none;
						}

						.table-cell {
							padding: 20rpx 12rpx;
							font-size: 24rpx;
							// color: #666;
							text-align: center;
							border-right: 1rpx solid #e5e5e5;
							white-space: nowrap;
							flex-shrink: 0;
							display: flex;
							align-items: center;
							justify-content: center;
							width: 200rpx;

							&:last-child {
								border-right: none;
								//   background: #f5f5f5;
							}

							&:nth-child(2) {
								width: 260rpx;
							}

							&:nth-child(3) {
								width: 220rpx;
							}

							&:nth-child(7) {
								width: 260rpx !important;
							}

							.cell-text {
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								max-width: 100%;

								&.warn {
									color: #ff4d4f;
								}
							}

							.unit {
								font-size: 22rpx;
								color: #999;
								margin-left: 6rpx;
							}

							&.parameter-cell {
								max-height: 120rpx;
								overflow-y: auto;
								align-items: flex-start;
								padding: 16rpx 12rpx;
								width: 200rpx;
							}
						}
					}
				}
			}
		}
	}

	.footerButton {
		width: 100%;
		height: 84rpx;
		display: flex;
		position: fixed;
		bottom: 0;
		z-index: 10;
		background-color: #fff;

		/deep/.u-button {
			height: 100%;
		}

		>view {
			flex: 1;
		}
	}

	.warn {
		color: #ff4d4f !important;
	}

	/deep/.text-color {
		font-size: 28rpx;
	}
</style>