sh-app/scanpages/hj/daily_paper.vue

<template>
	<view class="detail-page">
		<!-- 焊口主标识 -->
		<view class="joint-hero">
			<text class="joint-hero__code">{{ form.WeldJointCode || '--' }}</text>
			<view class="joint-hero__meta">
				<view class="joint-hero__pill">
					<text class="pill-label">管线编码</text>
					<text class="pill-value">{{ form.PipelineCode || '--' }}</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">
				<!-- 材质1 -->
				<view class="card__row">
					<text class="card__label">材质1</text>
					<text class="card__value">{{ form.Material1Code || '--' }}</text>
				</view>
				<!-- 材质2 -->
				<view class="card__row">
					<text class="card__label">材质2</text>
					<text class="card__value">{{ form.Material2Code || '--' }}</text>
				</view>
				<!-- 达因 -->
				<view class="card__row">
					<text class="card__label">达因</text>
					<text class="card__value">{{ form.Size || '--' }}</text>
				</view>
				<!-- 外径 -->
				<view class="card__row">
					<text class="card__label">外径</text>
					<text class="card__value">{{ form.Dia || '--' }}</text>
				</view>
				<!-- DN公称直径 -->
				<view class="card__row">
					<text class="card__label">DN公称直径</text>
					<text class="card__value">{{ form.DNDia || '--' }}</text>
				</view>
				<!-- 壁厚 -->
				<view class="card__row">
					<text class="card__label">壁厚</text>
					<text class="card__value">{{ form.Thickness || '--' }}</text>
				</view>
				<!-- 规格 -->
				<view class="card__row">
					<text class="card__label">规格</text>
					<text class="card__value">{{ form.Specification || '--' }}</text>
				</view>
				<!-- 焊缝类型 -->
				<view class="card__row">
					<text class="card__label">焊缝类型</text>
					<text class="card__value">{{ form.WeldTypeCode || '--' }}</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" @click="handleShowLocationSelect">
					<text class="card__label">焊口位置</text>
					<view class="card__value-wrap card__value-wrap--clickable">
						<text class="card__value" :class="{ 'card__value--placeholder': !form.WeldingLocationCode }">
							{{ form.WeldingLocationCode ? `${form.WeldingLocationCode}(${form.WeldingLocationName || '--'})` : '请选择' }}
						</text>
						<u-icon name="arrow-right" :size="24" color="#bbb" />
					</view>
				</view>
				<!-- 焊接日期 -->
				<view class="card__row">
					<text class="card__label">焊接日期</text>
					<view class="card__value-wrap">
						<input class="card__input" v-model="form.WeldingDateTemp" type="text" placeholder="请输入焊接日期" />
					</view>
				</view>
				<!-- 焊工类型 -->
				<view class="card__row" @click="showTypePicker = true">
					<text class="card__label">焊工类型</text>
					<view class="card__value-wrap card__value-wrap--clickable">
						<text class="card__value" :class="{ 'card__value--placeholder': !form.welderTypeName }">
							{{ form.welderTypeName || '请选择' }}
						</text>
						<u-icon name="arrow-right" :size="24" color="#bbb" />
					</view>
				</view>
				<!-- 焊工 -->
				<view class="card__row">
					<text class="card__label">焊工</text>
					<view class="card__value-wrap">
						<input class="card__input" v-model="form.welderName" type="text" placeholder="请输入焊工" />
					</view>
				</view>
				<!-- 焊接方法 -->
				<view class="card__row">
					<text class="card__label">焊接方法</text>
					<view class="card__value-wrap">
						<input class="card__input" v-model="form.WeldingMethodCode" type="text" placeholder="请输入焊接方法" />
					</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">焊前拍照</text>
					<view class="card__value-wrap">
						<nbd-photo-upload ref="beforePhotoRef" v-model:attachUrl="preWeldAttachUrl" typeName="WeldingDaily_Before" />
					</view>
				</view>
				<!-- 焊后拍照 -->
				<view class="card__row card__row--stack">
					<text class="card__label">焊后拍照</text>
					<view class="card__value-wrap">
						<nbd-photo-upload ref="afterPhotoRef" v-model:attachUrl="postWeldAttachUrl" typeName="WeldingDaily_After" />
					</view>
				</view>
			</view>
		</view>

		<!-- 互检上一工序 -->
		<view class="nav-row" @click="handleMutualCheck">
			<view class="nav-row__left">
				<view class="nav-row__dot"></view>
				<text class="nav-row__label">互检上一工序</text>
			</view>
			<text class="nav-row__arrow">›</text>
		</view>

		<!-- 组对记录 -->
		<view class="section">
			<nbd-record-card title="组对" :list="fitupList" :fields="fitupFields" status-key="CheckResult" status-match="合格" />
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-btns">
			<u-button v-if="!form.WeldingDate" class="btn-submit" size="medium" type="primary" @click="handleReport">填报</u-button>
			<u-button v-if="form.WeldingDailyId" class="btn-point" size="medium" type="primary" @click="handlePoint">点口</u-button>
			<u-button class="btn-cancel" size="medium" @click="handleClose">取消</u-button>
		</view>

		<!-- 焊口位置选择弹窗 -->
		<nbd-select v-model="showLocationPicker" :show-search="true" title="选择焊口位置" :list="locationList" label-key="BaseInfoCode" value-key="BaseInfoId" @confirm="handleConfirmLocation" />

		<!-- 焊工类型选择弹窗 -->
		<nbd-select v-model="showTypePicker" title="选择焊工类型" :list="welderTypeList" label-key="BaseInfoName" value-key="BaseInfoCode" @confirm="handleConfirmType" />
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { reqGetWeldJointByWeldJointId, reqSaveWeldingDailyByWeldJointId, reqGetManualPointSave, reqFitupCheckByWeldJointId } from '@/api/hj.js'
	import { reqWeldingLocation } from '@/api/base.js'
	import { useUserStore } from '@/store'


	const userStore = useUserStore()
	const { userInfo } = userStore

	// ===== 表单数据 =====
	const form = ref({})
	const preWeldAttachUrl = ref('')
	const postWeldAttachUrl = ref('')

	// ===== 弹窗 =====
	const showLocationPicker = ref(false)
	const showTypePicker = ref(false)
	const locationList = ref([])
	const welderTypeList = ref([
		{ BaseInfoName: '打底/盖面', BaseInfoCode: 0 },
		{ BaseInfoName: '打底',     BaseInfoCode: 1 },
		{ BaseInfoName: '盖面',     BaseInfoCode: 2 },
	])

	const beforePhotoRef = ref(null)
	const afterPhotoRef = ref(null)

	// ===== 组对记录 =====
	const weldJointId = ref('')
	const fitupList = ref([])
	const fitupFields = [
		{ label: '坡口类型名称', key: 'GrooveTypeName' },
		{ label: '坡口类型编码', key: 'GrooveTypeCode' },
		{ label: '坡口加工类型', key: 'GrooveProcessType' },
		{ label: '坡口角度', key: 'GrooveAngle' },
		{ label: '组对间隙', key: 'FitupGap' },
		{ label: '错边量', key: 'Misalignment' },
		{ label: '焊缝余高', key: 'WeldReinforcement' },
		{ label: '焊缝高度', key: 'WeldHeight' },
		{ label: '焊缝宽度', key: 'WeldWidth' },
		{ label: '表面缺陷', key: 'SurfaceDefect' },
		{ label: '检查人', key: 'CheckPersonName' },
		{ label: '检查时间', key: 'CheckTime' },
		{ label: '检查结果', key: 'CheckResult', type: 'tag', tagMatch: '合格' },
		{ label: '不合格原因', key: 'UnqualifiedReason', showWhen: { key: 'CheckResult', notEqual: '合格' } },
		{ label: '整改要求', key: 'RectifyRequirement', showWhen: { key: 'CheckResult', notEqual: '合格' } },
		{ label: '照片', key: 'AttachUrl1', type: 'photo', cols: 4 },
	]

	// ===== 弹窗 ========
	const handleShowLocationSelect = () => {
		reqWeldingLocation().then(res => {
			locationList.value = res.data
			showLocationPicker.value = true
		})
	}

	const handleConfirmLocation = (item) => {
		form.value.WeldingLocationCode = item.BaseInfoCode
		form.value.WeldingLocationName = item.BaseInfoName
		form.value.WeldingLocationId = item.BaseInfoId
		showLocationPicker.value = false
	}

	const handleConfirmType = (item) => {
		form.value.welderType = item.BaseInfoCode
		form.value.welderTypeName = item.BaseInfoName
		showTypePicker.value = false
	}

	// ===== 操作 =====
	const handlePoint = async () => {
		await reqGetManualPointSave(form.value.WeldJointId)
		uni.showToast({ title: '点口成功', icon: 'none' })
		setTimeout(() => { uni.navigateBack() }, 1500)
	}

	const handleReport = () => {
		uni.showModal({
			title: '信息提示',
			content: '确定要填报吗？',
			success: async ({ confirm }) => {
				if (confirm) {
					console.log(beforePhotoRef.value?.hasPending())
					const needBefore = beforePhotoRef.value?.hasPending()
					const needAfter = afterPhotoRef.value?.hasPending()
					if (needBefore || needAfter) {
						uni.showLoading({ title: '上传照片中...', mask: true })
						if (needBefore) await beforePhotoRef.value.uploadAll()
						if (needAfter) await afterPhotoRef.value.uploadAll()
						uni.hideLoading()
					}

					await reqSaveWeldingDailyByWeldJointId({
						WeldJointId: form.value.WeldJointId,
						Personid: userInfo.PersonId,
						time: form.value.WeldingDateTemp,
						weldingLocation: form.value.WeldingLocationId || '',
						welderType: form.value.welderType,
						PreWeldAttachUrl: preWeldAttachUrl.value || form.value.PreWeldAttachUrl || '',
						PostWeldAttachUrl: postWeldAttachUrl.value || form.value.PostWeldAttachUrl || ''
					})
					uni.showToast({ title: '保存成功', icon: 'none' })
					setTimeout(() => { uni.navigateBack() }, 1500)
				}
			}
		})
	}

	const handleClose = () => { uni.navigateBack() }

	const handleMutualCheck = () => {
		uni.navigateTo({ url: '/scanpages/hj/make_right?id=' + weldJointId.value })
	}

	// ===== 生命周期 =====
	onLoad((opt) => {
		weldJointId.value = opt.id || ''

		reqGetWeldJointByWeldJointId(opt.id).then(res => {
			form.value = res.data || {}
			if (form.value.CoverWelderName) {
				form.value.welderName = form.value.CoverWelderName
			}
			if (form.value.BackingWelderName) {
				form.value.welderName += '/' + form.value.BackingWelderName
			}
			const now = new Date()
			const today = `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}-${String(now.getDate()).padStart(2,'0')}`
			form.value.WeldingDateTemp = form.value.WeldingDate || today
			form.value.welderType = 0
			form.value.welderTypeName = "打底/盖面"

			// 回显已有照片
			preWeldAttachUrl.value = form.value.PreWeldAttachUrl || ''
			postWeldAttachUrl.value = form.value.PostWeldAttachUrl || ''
		})

		reqFitupCheckByWeldJointId(opt.id).then(res => {
			if (res.code === 1 && res.data) {
				fitupList.value = res.data
			}
		})
	})
</script>

<style lang="scss" scoped>
// 继承全局变量（定义在 uni.scss）
$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;
// 页面专属
$bg: #f0f2f5;
$card-bg: #ffffff;
$border: #e8ecf1;
$shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);

.detail-page {
	background: $bg;
	min-height: 100vh;
	padding-bottom: 180rpx;
}

// ===== 焊口主标识 =====
.joint-hero {
	position: relative;
	margin: 24rpx;
	padding: 36rpx 32rpx 28rpx;
	background: $card-bg;
	border-radius: $app-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;
		}
	}
}

// ---- 互检导航按钮 ----
.nav-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 24rpx;
	padding: 24rpx 28rpx;
	background: $card-bg;
	border-radius: $app-radius;
	border-top: 1rpx solid $border;
	box-shadow: none;
	transition: background 0.2s ease;
	margin-bottom: 28rpx;

	&:active {
		background: #f5f7fa;
	}

	&__left {
		display: flex;
		align-items: center;
		gap: 14rpx;
	}

	&__dot {
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		background: $primary;
		flex-shrink: 0;
	}

	&__label {
		font-size: 28rpx;
		font-weight: 600;
		color: $text;
		letter-spacing: 1rpx;
	}

	&__arrow {
		font-size: 36rpx;
		color: $text-secondary;
		font-weight: 300;
		line-height: 1;
		margin-right: -4rpx;
	}
}
</style>