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="
                            clientEnvironmentId == 10
                              ? newHandleInput(
                                  sample.qualitySampleTemplateList,
                                  sampleIndex,
                                )
                              : 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" v-if="
                          ['炉水电导率', '给水电导率'].includes(
                            quality.inspectionName,
                          )
                        "></view>
											<view class="table-cell" v-else>
												<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&&clientEnvironmentId!=10" type="primary" @click="save"
					text="保存"></u-button>
				<u-button v-if="type != 'view' && !isCorrelationId && workData.status != 1&&clientEnvironmentId==10" type="primary" @click="exeReportWork"
					text="报工"></u-button>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getById,
		update,
		queryQualityInventory,
		exeReportWork
	} from "@/api/inspectionWork/index.js";
	import {
		handleInput,
		qualityResultsListChange
	} from "./unit.js";
	import dayjs from "dayjs";
	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 || "";
				this.clientEnvironmentId = uni.getStorageSync("userInfo").clientEnvironmentId
				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) => {});
			},
			exeReportWork() {
				this.workData.isUpdate = 1;
				this.tableData.qualityTimeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss');
				this.workData.executeUserId = uni.getStorageSync("userInfo").userId
				this.workData.executeUserName = uni.getStorageSync("userInfo").name
				this.workData.qualityResults=this.tableData[0].qualityResults
				this.setNum();
				let params = {
					...this.workData,
					sampleList: this.tableData,
					planTemplateList: this.workData.templateList,
					templateList: this.workData.templateList,
					qualityInventoryList: this.inventoryList,
				};

				exeReportWork(params)
					.then((msg) => {
						uni.$emit("successInit");
						this.back();
					})
					.catch((e) => {});
			},
			formatQualityResult(value) {
				const map = {
					1: "合格",
					2: "不合格",
					3: "让步接收",
				};
				return map[value] || "";
			},
			//宇信特殊处理
			newHandleInput(arr, index) {
				let num = arr.find(
					(item) => item.inspectionName == "炉水电导率",
				)?.qualityResultContent;
				let num1 = arr.find(
					(item) => item.inspectionName == "给水电导率",
				)?.qualityResultContent;
				console.log(num, num1);

				arr.forEach((item, i) => {
					if (num && num1 && item.inspectionName == "干度值") {
						let val = parseFloat((((num - num1 / 1000) / num) * 100).toFixed(5));
						this.$set(
							this.tableData[index].qualitySampleTemplateList[i],
							"qualityResultContent",
							val,
						);

						this.handleInput(item, val, this.tableData);
					}
				});
			},
			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>