shj-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">
			<nbd-record-card title="组对" :list="fitupList" :fields="fitupFields" status-key="CheckResult"
				status-match="合格" />
		</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">
			<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" @click="handleShowWeldTypeSelect">
					<text class="card__label">焊缝类型</text>
					<view class="card__value-wrap card__value-wrap--clickable">
						<text class="card__value" :class="{ 'card__value--placeholder': !form.WeldTypeCode }">
							{{ form.WeldTypeCode || '请选择' }}
						</text>
						<u-icon name="arrow-right" :size="24" color="#bbb" />
					</view>
				</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" @click="handleShowWeldingMethodSelect">
					<text class="card__label">焊接方法</text>
					<view class="card__value-wrap card__value-wrap--clickable">
						<text class="card__value" :class="{ 'card__value--placeholder': !form.WeldingMethodCode }">
							{{ form.WeldingMethodCode || '请选择' }}
						</text>
						<u-icon name="arrow-right" :size="24" color="#bbb" />
					</view>
				</view>
				<!-- 焊丝 -->
				<view class="card__row" @click="handleShowWireSelect">
					<text class="card__label">焊丝</text>
					<view class="card__value-wrap card__value-wrap--clickable">
						<text class="card__value" :class="{ 'card__value--placeholder': !wireDisplay }">
							{{ wireDisplay || '请选择' }}
						</text>
						<u-icon name="arrow-right" :size="24" color="#bbb" />
					</view>
				</view>
				<!-- 焊条 -->
				<view class="card__row" @click="handleShowRodSelect">
					<text class="card__label">焊条</text>
					<view class="card__value-wrap card__value-wrap--clickable">
						<text class="card__value" :class="{ 'card__value--placeholder': !rodDisplay }">
							{{ rodDisplay || '请选择' }}
						</text>
						<u-icon name="arrow-right" :size="24" color="#bbb" />
					</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="bottom-btns">
			<u-button v-if="canEdit && !form.WeldingDate" class="btn-submit" size="medium" type="primary"
				@click="handleReport">填报</u-button>
			<u-button v-if="canEdit && 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" />

		<!-- 焊缝类型选择弹窗 -->
		<nbd-select v-model="showWeldTypePicker" :show-search="true" title="选择焊缝类型" :list="weldTypeList"
			label-key="BaseInfoCode" value-key="BaseInfoId" @confirm="handleConfirmWeldType" />

		<!-- 焊接方法选择弹窗 -->
		<nbd-select v-model="showWeldingMethodPicker" :show-search="true" title="选择焊接方法" :list="weldingMethodList"
			label-key="BaseInfoCode" value-key="BaseInfoId" @confirm="handleConfirmWeldingMethod" />

		<!-- 焊丝选择弹窗 -->
		<nbd-select v-model="showWirePicker" :show-search="true" title="选择焊丝" :list="wireList"
			label-key="BaseInfoCode" value-key="BaseInfoId" @confirm="handleConfirmWire" />

		<!-- 焊条选择弹窗 -->
		<nbd-select v-model="showRodPicker" :show-search="true" title="选择焊条" :list="rodList"
			label-key="BaseInfoCode" value-key="BaseInfoId" @confirm="handleConfirmRod" />
	</view>
</template>

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


const userStore = useUserStore()
const menuStore = useMenuStore()
const { userInfo } = userStore
const canEdit = computed(() => menuStore.canEditFunc('dailyPaper'))

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

// ===== 弹窗 =====
const showLocationPicker = ref(false)
const showTypePicker = ref(false)
const showWeldTypePicker = ref(false)
const showWeldingMethodPicker = ref(false)
const showWirePicker = ref(false)
const showRodPicker = ref(false)
const locationList = ref([])
const weldTypeList = ref([])
const weldingMethodList = ref([])
const wireList = ref([])
const rodList = 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: 'FitupGap' },
	{ label: '错边量', key: 'Misalignment' },
	{ 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 handleShowWeldTypeSelect = () => {
	reqGetWeldTypeList().then(res => {
		weldTypeList.value = res.data || []
		showWeldTypePicker.value = true
	})
}

const handleConfirmWeldType = (item) => {
	form.value.WeldTypeId = item.BaseInfoId
	form.value.WeldTypeCode = item.BaseInfoCode
	form.value.WeldTypeName = item.BaseInfoName
	showWeldTypePicker.value = false
}

const handleShowWeldingMethodSelect = () => {
	reqGetWeldingMethodList().then(res => {
		weldingMethodList.value = res.data || []
		showWeldingMethodPicker.value = true
	})
}

const handleConfirmWeldingMethod = (item) => {
	form.value.WeldingMethodId = item.BaseInfoId
	form.value.WeldingMethodCode = item.BaseInfoCode
	form.value.WeldingMethodName = item.BaseInfoName
	showWeldingMethodPicker.value = false
}

const CONSUMABLE_WIRE = 1
const CONSUMABLE_ROD = 2

const pickConsumableId = (item) => item?.BaseInfoId || item?.Id || ''
const pickConsumableCode = (item) => item?.BaseInfoCode || item?.Code || ''
const pickConsumableName = (item) => item?.BaseInfoName || item?.Name || pickConsumableCode(item)

const normalizeConsumables = (list) => (Array.isArray(list) ? list : []).map((item) => ({
	...item,
	BaseInfoId: pickConsumableId(item),
	BaseInfoCode: pickConsumableCode(item),
	BaseInfoName: pickConsumableName(item),
}))

const fetchConsumables = async (type) => {
	const res = await reqGetWeldingConsumables(type)
	return normalizeConsumables(res.data)
}

const handleShowWireSelect = () => {
	fetchConsumables(CONSUMABLE_WIRE).then((list) => {
		wireList.value = list
		showWirePicker.value = true
	})
}

const handleConfirmWire = (item) => {
	form.value.WeldingWire = item.BaseInfoId
	form.value.WeldingWireCode = item.BaseInfoCode
	form.value.WeldingWireName = item.BaseInfoName
	showWirePicker.value = false
}

const handleShowRodSelect = () => {
	fetchConsumables(CONSUMABLE_ROD).then((list) => {
		rodList.value = list
		showRodPicker.value = true
	})
}

const handleConfirmRod = (item) => {
	form.value.WeldingRod = item.BaseInfoId
	form.value.WeldingRodCode = item.BaseInfoCode
	form.value.WeldingRodName = item.BaseInfoName
	showRodPicker.value = false
}

const wireDisplay = computed(() => form.value.WeldingWireCode || form.value.WeldingWireName || '')
const rodDisplay = computed(() => form.value.WeldingRodCode || form.value.WeldingRodName || '')

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

const handleReport = () => {
	if (!canEdit.value) {
		uni.showToast({ title: '当前岗位仅可查看', icon: 'none' })
		return
	}
	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,
					// 同步更新焊口焊缝类型 / 焊接方法
					WeldTypeId: form.value.WeldTypeId || '',
					WeldTypeCode: form.value.WeldTypeCode || '',
					WeldingMethodId: form.value.WeldingMethodId || '',
					WeldingMethodCode: form.value.WeldingMethodCode || '',
					WeldingWire: form.value.WeldingWire || '',
					WeldingRod: form.value.WeldingRod || '',
					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 })
}

// 按 Code 回填 Id，保证未重选时提交仍能同步更新焊口
const fillTypeMethodIds = async () => {
	const needWeldType = form.value.WeldTypeCode && !form.value.WeldTypeId
	const needMethod = form.value.WeldingMethodCode && !form.value.WeldingMethodId
	const needWire = (form.value.WeldingWireCode && !form.value.WeldingWire) || (form.value.WeldingWire && !form.value.WeldingWireCode)
	const needRod = (form.value.WeldingRodCode && !form.value.WeldingRod) || (form.value.WeldingRod && !form.value.WeldingRodCode)
	if (!needWeldType && !needMethod && !needWire && !needRod) return
	try {
		const [typeRes, methodRes, wireRes, rodRes] = await Promise.all([
			needWeldType ? reqGetWeldTypeList() : Promise.resolve(null),
			needMethod ? reqGetWeldingMethodList() : Promise.resolve(null),
			needWire ? fetchConsumables(CONSUMABLE_WIRE) : Promise.resolve(null),
			needRod ? fetchConsumables(CONSUMABLE_ROD) : Promise.resolve(null),
		])
		if (typeRes?.data) {
			const hit = typeRes.data.find(i => i.BaseInfoCode === form.value.WeldTypeCode)
			if (hit) {
				form.value.WeldTypeId = hit.BaseInfoId
				form.value.WeldTypeName = hit.BaseInfoName
			}
		}
		if (methodRes?.data) {
			const hit = methodRes.data.find(i => i.BaseInfoCode === form.value.WeldingMethodCode)
			if (hit) {
				form.value.WeldingMethodId = hit.BaseInfoId
				form.value.WeldingMethodName = hit.BaseInfoName
			}
		}
		if (wireRes) {
			const hit = wireRes.find(i =>
				i.BaseInfoId === form.value.WeldingWire || i.BaseInfoCode === form.value.WeldingWireCode
			)
			if (hit) {
				form.value.WeldingWire = hit.BaseInfoId
				form.value.WeldingWireCode = hit.BaseInfoCode
				form.value.WeldingWireName = hit.BaseInfoName
			}
		}
		if (rodRes) {
			const hit = rodRes.find(i =>
				i.BaseInfoId === form.value.WeldingRod || i.BaseInfoCode === form.value.WeldingRodCode
			)
			if (hit) {
				form.value.WeldingRod = hit.BaseInfoId
				form.value.WeldingRodCode = hit.BaseInfoCode
				form.value.WeldingRodName = hit.BaseInfoName
			}
		}
	} catch (e) {
		console.error('回填焊缝类型/焊接方法/焊材ID失败:', e)
	}
}

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

	reqGetWeldJointByWeldJointId(opt.id).then(async (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 || ''

		await fillTypeMethodIds()
	})

	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>