shj-app/scanpages/hj/weld_appearance.vue

<template>
	<view class="detail-page">
		<!-- 焊口主标识 -->
		<view class="joint-hero">
			<text class="joint-hero__code">{{ info.WeldJointCode || '--' }}</text>
			<view class="joint-hero__meta">
				<view class="joint-hero__pill">
					<text class="pill-label">管线编码</text>
					<text class="pill-value">{{ info.PipelineCode || '--' }}</text>
				</view>
				<view class="joint-hero__pill">
					<text class="pill-label">项目名称</text>
					<text class="pill-value">{{ info.ProjectName || info.ProjectId || '--' }}</text>
				</view>
			</view>
		</view>

		<!-- 外观检测填报 -->
		<view class="section">
			<view class="section__header">
				<view class="section__bar"></view>
				<text class="section__title">焊缝外观检测</text>
			</view>
			<view class="card">
				<view class="card__row">
					<text class="card__label required">外观是否合格</text>
					<view class="card__value-wrap card__value-wrap--clickable">
						<nbd-check-btn v-model="form.qualifiedText" passKey="合格" failKey="不合格" passText="合格"
							failText="不合格" />
					</view>
				</view>
				<view class="card__row">
					<text class="card__label">检测人</text>
					<view class="card__value-wrap">
						<text class="card__value">{{ checkPersonName || '--' }}</text>
					</view>
				</view>
				<view class="card__row card__row--stack">
					<text class="card__label">备注</text>
					<view class="card__value-wrap">
						<textarea class="remark-input" v-model="form.Remark" placeholder="请输入备注信息（选填）"
							:maxlength="200" auto-height />
					</view>
				</view>
				<view class="card__row card__row--stack">
					<text class="card__label required">照片</text>
					<view class="card__value-wrap">
						<nbd-photo-upload ref="photoRef" v-model:attachUrl="form.AttachUrl"
							typeName="WeldAppearance" />
					</view>
				</view>
			</view>
		</view>

		<!-- 外观检测记录 -->
		<view class="section">
			<nbd-history-card title="外观检测" :list="recordList" />
		</view>

		<!-- 提交按钮 -->
		<view class="submit-bar">
			<view class="btn-primary-gradient" @click="handleSubmit">
				<text class="btn-primary-gradient__text">提交结果</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		storeToRefs
	} from 'pinia'
	import {
		useUserStore
	} from '@/store'
	import {
		reqWeldAppearanceJointDetail,
		reqSaveWeldAppearanceCheck
	} from '@/api/hj.js'

	const userStore = useUserStore()
	const {
		userInfo,
		currentProject
	} = storeToRefs(userStore)

	const id = ref('')
	const info = ref({})
	const recordList = ref([])
	const photoRef = ref(null)

	const form = ref({
		qualifiedText: '合格',
		Remark: '',
		AttachUrl: ''
	})

	const checkPersonName = computed(() => userInfo.value?.PersonName || '')

	const toBoolQualified = (val) => {
		if (val === true || val === 1 || val === '1' || val === 'true' || val === '合格') return true
		if (val === false || val === 0 || val === '0' || val === 'false' || val === '不合格') return false
		return !!val
	}

	const normalizeRecords = (list) => {
		if (!Array.isArray(list)) return []
		return list.map((item) => {
			const qualified = toBoolQualified(item.IsQualified)
			return {
				...item,
				IsQualified: qualified,
				CheckPersonName: item.CheckPersonName || item.CheckPerson || '--',
				CheckTime: item.CheckTime || '--',
				AttachUrl: item.AttachUrl || item.AttachUrl1 || ''
			}
		})
	}

	const parseDetail = (data) => {
		if (!data) return {
			joint: {},
			records: []
		}
		if (Array.isArray(data)) {
			return {
				joint: {},
				records: data
			}
		}
		const joint = data.Joint || data.WeldJoint || data.joint || data.JointInfo || data
		const records = data.History || data.Records || data.AppearanceChecks || data.AppearanceCheckList ||
			data.HistoryList || data.CheckRecords || data.list || data.records || []
		return {
			joint: joint && typeof joint === 'object' && !Array.isArray(joint) ? joint : {},
			records: Array.isArray(records) ? records : []
		}
	}

	const loadDetail = async (weldJointId) => {
		try {
			uni.showLoading({
				title: '加载中...',
				mask: true
			})
			const res = await reqWeldAppearanceJointDetail(weldJointId)
			const {
				joint,
				records
			} = parseDetail(res.data)
			info.value = {
				...joint,
				WeldJointId: joint.WeldJointId || weldJointId,
				ProjectName: joint.ProjectName || currentProject.value?.ProjectName || ''
			}
			recordList.value = normalizeRecords(records)
		} catch (error) {
			console.error('获取焊缝外观检测详情失败:', error)
			uni.showToast({
				title: '加载失败',
				icon: 'none'
			})
		} finally {
			uni.hideLoading()
		}
	}

	const handleSubmit = () => {
		const jointId = info.value.WeldJointId || id.value
		if (!jointId) {
			uni.showToast({
				title: '焊口信息缺失',
				icon: 'none'
			})
			return
		}
		if (!form.value.AttachUrl && !photoRef.value?.hasPending()) {
			uni.showToast({
				title: '请上传照片',
				icon: 'none'
			})
			return
		}
		uni.showModal({
			title: '确认提交',
			content: '确定提交吗？',
			success: async ({
				confirm
			}) => {
				if (!confirm) return
				try {
					if (photoRef.value?.hasPending()) {
						uni.showLoading({
							title: '上传照片中...',
							mask: true
						})
						await photoRef.value.uploadAll()
						uni.hideLoading()
					}
					await reqSaveWeldAppearanceCheck({
						ProjectId: currentProject.value?.ProjectId || info.value.ProjectId,
						WeldJointId: jointId,
						IsQualified: form.value.qualifiedText === '合格',
						CheckPerson: userInfo.value?.PersonId,
						CheckTime: uni.formatTime(new Date().getTime(), 'YYYY-MM-DD HH:mm'),
						CreateUser: userInfo.value?.PersonId,
						Remark: form.value.Remark || '',
						AttachUrl: form.value.AttachUrl,
						AppearanceCheckId: ''
					})
					uni.showToast({
						title: '提交成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} catch (error) {
					console.error('保存焊缝外观检测失败:', error)
				}
			}
		})
	}

	onLoad((opt) => {
		if (opt.id) {
			// opt.id = '6c887720-3168-4bb4-a268-7ceef24561a4'
			id.value = opt.id
			loadDetail(opt.id)
		} else {
			uni.showToast({
				title: '请通过扫码进入',
				icon: 'none'
			})
		}
	})
</script>

<style lang="scss" scoped>
	$primary: $app-primary;
	$primary-light: $app-primary-light;
	$primary-mid: $app-primary-mid;
	$primary-dark: $app-primary-dark;
	$text: $app-text;
	$text-secondary: $app-text-secondary;
	$border: $app-border;
	$radius: $app-radius;
	$bg: #f0f2f5;
	$card-bg: #ffffff;
	$shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);

	.detail-page {
		background: $bg;
	}

	.joint-hero {
		position: relative;
		margin: 24rpx;
		padding: 36rpx 32rpx 28rpx;
		background: $card-bg;
		border-radius: $radius;
		box-shadow: $shadow-md;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 4rpx;
			background: linear-gradient(90deg, $primary, #6ba3ff, $primary);
			background-size: 200% 100%;
			animation: shimmer 3s ease-in-out infinite;
		}

		@keyframes shimmer {

			0%,
			100% {
				background-position: 0% 0;
			}

			50% {
				background-position: 100% 0;
			}
		}

		&__code {
			display: block;
			font-size: 52rpx;
			font-weight: 800;
			color: $text;
			line-height: 1.2;
			word-break: break-all;
			font-family: monospace;
			letter-spacing: 2rpx;
			margin-bottom: 28rpx;
			position: relative;
			padding-left: 24rpx;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 6rpx;
				bottom: 6rpx;
				width: 4rpx;
				background: $primary;
				border-radius: 2rpx;
			}
		}

		&__meta {
			display: flex;
			flex-wrap: wrap;
			gap: 12rpx;
		}

		&__pill {
			display: inline-flex;
			width: 100%;
			align-items: center;
			gap: 8rpx;
			background: $primary-light;
			padding: 10rpx 18rpx;
			border-radius: 10rpx;
			border: 1rpx solid $primary-mid;

			.pill-label {
				font-size: 22rpx;
				color: $text-secondary;
				width: 60rpx;
			}

			.pill-value {
				font-size: 24rpx;
				font-weight: 600;
				color: $primary-dark;
				font-family: monospace;
			}
		}
	}

	.submit-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 20rpx 24rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		background: linear-gradient(180deg, rgba(240, 242, 245, 0) 0%, $bg 20%);
	}
</style>