shj-app/scanpages/hj/daily_audit_detail.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 class="joint-hero__pill">
					<text class="pill-label">提交人</text>
					<text class="pill-value">{{ form.SubmitPersonName || '--' }}</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">材质1</text>
					<text class="card__value">{{ form.Material1Code || '--' }}</text>
				</view>
				<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>
				<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.WeldTypeCode || '--' }}</text>
				</view>
				<view class="card__row">
					<text class="card__label">焊口属性</text>
					<text class="card__value">{{ form.JointAttribute || '--' }}</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">焊口位置</text>
					<text class="card__value">{{ form.WeldingLocationCode || '--' }}</text>
				</view>
				<view class="card__row">
					<text class="card__label">焊接日期</text>
					<text class="card__value">{{ fmtDate(form.WeldingDate) }}</text>
				</view>
				<view class="card__row">
					<text class="card__label">盖面焊工</text>
					<text class="card__value">{{ form.CoverWelderCode || '--' }}</text>
				</view>
				<view class="card__row">
					<text class="card__label">打底焊工</text>
					<text class="card__value">{{ form.BackingWelderCode || '--' }}</text>
				</view>
				<view class="card__row">
					<text class="card__label">焊接方法</text>
					<text class="card__value">{{ form.WeldingMethodCode || '--' }}</text>
				</view>
				<view class="card__row">
					<text class="card__label">焊接模式</text>
					<text class="card__value">{{ form.WeldingMode || '--' }}</text>
				</view>
				<view class="card__row">
					<text class="card__label">焊丝</text>
					<text class="card__value">{{ form.WeldingWireCode || '--' }}</text>
				</view>
				<view class="card__row">
					<text class="card__label">焊条</text>
					<text class="card__value">{{ form.WeldingRodCode || '--' }}</text>
				</view>
				<view class="card__row">
					<text class="card__label">提交时间</text>
					<text class="card__value">{{ fmtDateTime(form.SubmitDate) }}</text>
				</view>
				<view class="card__row">
					<text class="card__label">审核状态</text>
					<text class="card__value">{{ form.AuditStateText || '--' }}</text>
				</view>
				<view class="card__row">
					<text class="card__label">班组审核人</text>
					<text class="card__value">{{ form.TeamAuditManName || '--' }}</text>
				</view>
				<view class="card__row">
					<text class="card__label">班组审核时间</text>
					<text class="card__value">{{ fmtDateTime(form.TeamAuditDate) }}</text>
				</view>
				<view class="card__row">
					<text class="card__label">专工审核人</text>
					<text class="card__value">{{ form.ProfessionalAuditManName || '--' }}</text>
				</view>
				<view class="card__row">
					<text class="card__label">专工审核时间</text>
					<text class="card__value">{{ fmtDateTime(form.ProfessionalAuditDate) }}</text>
				</view>
				<!-- 焊前拍照 -->
				<view class="card__row card__row--stack">
					<text class="card__label">焊前拍照</text>
					<view class="card__value-wrap">
						<nbd-photo-view :attachUrl="form.BeforePhotoUrl || ''" :cols="4" />
					</view>
				</view>
				<!-- 焊后拍照 -->
				<view class="card__row card__row--stack">
					<text class="card__label">焊后拍照</text>
					<view class="card__value-wrap">
						<nbd-photo-view :attachUrl="form.AfterPhotoUrl || ''" :cols="4" />
					</view>
				</view>
				<!-- 明细附件 -->
				<view class="card__row card__row--stack" v-if="form.AttachUrl">
					<text class="card__label">附件</text>
					<view class="card__value-wrap">
						<nbd-photo-view :attachUrl="form.AttachUrl" :cols="4" />
					</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view v-if="canEdit" class="bottom-btns">
			<u-button class="btn-delete" size="mini" type="error" :disabled="submitting" :loading="submitting"
				@click="handleDelete">删除</u-button>
			<u-button class="btn-audit" size="mini" type="primary" :disabled="submitting" :loading="submitting"
				@click="handleTeamAudit">班组审核</u-button>
			<u-button class="btn-audit" size="mini" type="primary" :disabled="submitting" :loading="submitting"
				@click="handleProfessionalAudit">专工审核</u-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		useUserStore,
		useMenuStore
	} from '@/store'
	import {
		reqPendingWeldingDailyDetail,
		reqTeamAuditWeldingDaily,
		reqAuditWeldingDaily,
		reqDeleteWeldingDaily
	} from '@/api/hj.js'

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

	const tempDetailId = ref('')
	const form = ref({})
	const submitting = ref(false)
	const auditState = computed(() => Number(form.value.AuditState))
	const isTeamPending = computed(() => auditState.value === 0)
	const isProfessionalPending = computed(() => auditState.value === 1 && !!form.value.TeamAuditDate)

	const runAction = ({
		title,
		request
	}) => {
		if (submitting.value) return
		uni.showModal({
			title: '信息提示',
			content: `确定${title}该日报吗？`,
			success: async ({
				confirm
			}) => {
				if (!confirm) return
				submitting.value = true
				try {
					await request()
				} catch (err) {
					submitting.value = false
					return
				}
				uni.showToast({
					title: '操作成功',
					icon: 'none'
				})
				submitting.value = false
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}
		})
	}

	const handleTeamAudit = () => {
		runAction({
			title: '班组审核',
			request: () => reqTeamAuditWeldingDaily({
				TempDetailIds: [tempDetailId.value],
				AuditMan: userInfo.PersonId
			})
		})
	}

	const handleProfessionalAudit = () => {
		runAction({
			title: '专工审核',
			request: () => reqAuditWeldingDaily({
				TempDetailIds: [tempDetailId.value],
				AuditMan: userInfo.PersonId
			})
		})
	}

	const handleDelete = () => {
		if (submitting.value) return
		uni.showModal({
			title: '信息提示',
			content: '确定删除该日报吗？',
			success: async ({
				confirm
			}) => {
				if (!confirm) return
				submitting.value = true
				try {
					await reqDeleteWeldingDaily({
						TempDetailIds: [tempDetailId.value]
					})
				} catch (err) {
					submitting.value = false
					return
				}
				uni.showToast({
					title: '删除成功',
					icon: 'none'
				})
				submitting.value = false
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}
		})
	}

	// ===== 工具 =====
	const fmtDate = (val) => {
		if (!val) return '--'
		return String(val).slice(0, 10)
	}

	const fmtDateTime = (val) => {
		if (!val) return '--'
		return String(val).slice(0, 16).replace('T', ' ')
	}

	// ===== 生命周期 =====
	onLoad((opt) => {
		tempDetailId.value = opt.id || ''
		// 接口报错时 request.js 已统一 toast，这里 catch 住避免未处理 Promise 异常
		reqPendingWeldingDailyDetail(opt.id).then(res => {
			form.value = res.data || {}
		}).catch(() => {})
	})
</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;
	$card-bg: #ffffff;
	$shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);

	.detail-page {
		background: #f0f2f5;
		padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
	}

	// ===== 焊口主标识（同 daily_paper） =====
	.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;
			}
		}
	}

	.bottom-btns {
		padding: 16rpx 20rpx;
		padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
		gap: 12rpx;
		z-index: 20;

		:deep(.u-btn) {
			flex: 1;
			min-width: 0;
			height: 64rpx;
			margin: 0;
			padding: 0 8rpx !important;
			font-size: 24rpx;
		}
	}
</style>