mes-app/pages/pro/detail.uvue

<template>
	<uni-navbar-lite :showRight=false :title="title"></uni-navbar-lite>
	<view class="page-container">
		<scroll-view class="page-content" :scroll-y="true" :style="pageContentStyle">
			<view class="section">
				<view class="section-header">
					<view class="section-indicator"></view>
					<text class="section-title">产品信息</text>
				</view>
				<view class="info-card">
					<view class="info-row">
						<text class="info-label">产品编码</text>
						<text class="info-value">{{ productCode }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">产品名称</text>
						<text class="info-value">{{ productName }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">规格型号</text>
						<text class="info-value">{{ specification }}</text>
					</view>
				</view>
			</view>

			<view class="section">
				<view class="section-header">
					<view class="section-indicator"></view>
					<text class="section-title">汇报信息</text>
				</view>
				<view class="info-card">
					<view class="info-row">
						<text class="info-label">汇报数量</text>
						<text class="info-value warning">{{ quantity }} {{ unitName }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">换算吨数</text>
						<text class="info-value primary">{{ quantityTon }} {{ baseUnitName }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">换算比例</text>
						<text class="info-value">{{ conversionRate }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">报工日期</text>
						<text class="info-value">{{ reportDate }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">开始时间</text>
						<text class="info-value">{{ startTime }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">结束时间</text>
						<text class="info-value">{{ endTime }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">汇报人</text>
						<text class="info-value">{{ reporter }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">状态</text>
						<view class="status-badge" :class="'status-' + status">
							<text>{{ statusText }}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="section" v-if="remark && remark.length > 0">
				<view class="section-header">
					<view class="section-indicator"></view>
					<text class="section-title">备注</text>
				</view>
				<view class="info-card">
					<text class="remark-text">{{ remark }}</text>
				</view>
			</view>
		</scroll-view>

		<view class="bottom-buttons" v-if="showBottomButtons">
			<button class="undo-btn" @click="handleUndoConfirm" v-if="hasUndoPermission">退回</button>
			<button class="finish-btn" @click="handleFinish" v-if="hasFinishPermission">完成</button>
		</view>
	</view>
</template>

<script setup lang="uts">
	import { ref, computed, onMounted } from 'vue'
	import { getProReportById, undoConfirmProReport, finishProReport } from '../../api/pro/index'
	import { checkPermission } from '../../utils/permission'

	const reportId = ref<string>('')
	
	const productCode = ref<string>('')
	const productName = ref<string>('')
	const specification = ref<string>('')
	const quantity = ref<string>('')
	const unitName = ref<string>('')
	const quantityTon = ref<string>('')
	const baseUnitName = ref<string>('')
	const conversionRate = ref<string>('')
	const reportDate = ref<string>('')
	const startTime = ref<string>('')
	const endTime = ref<string>('')
	const reporter = ref<string>('')
	const status = ref<string>('')
	const remark = ref<string>('')

	const hasFinishPermission = ref<boolean>(false)
	const hasUndoPermission = ref<boolean>(false)

	const title = computed(() => {
		return '生产汇报详情'
	})

	const showBottomButtons = computed(() => {
		if (!status.value || status.value.length === 0) return false
		return status.value === 'CONFIRMED' && (hasFinishPermission.value || hasUndoPermission.value)
	})

	const pageContentStyle = computed(() => {
		return {
			paddingBottom: showBottomButtons.value ? '130rpx' : '20rpx'
		}
	})

	const statusText = computed(() => {
		switch (status.value) {
			case 'PREPARE': return '草稿'
			case 'CONFIRMED': return '已确认'
			case 'FINISHED': return '已完成'
			case 'CANCEL': return '已取消'
			default: return status.value
		}
	})

	const loadDetail = (): void => {
		if (reportId.value.length === 0) return
		getProReportById(reportId.value).then((response: any) => {
			const res = response as UTSJSONObject
			const data = res["data"] as UTSJSONObject
			
			productCode.value = data['productCode'] != null ? data['productCode'].toString() : ''
			productName.value = data['productName'] != null ? data['productName'].toString() : ''
			specification.value = data['specification'] != null ? data['specification'].toString() : ''
			quantity.value = data['quantity'] != null ? data['quantity'].toString() : ''
			unitName.value = data['unitName'] != null ? data['unitName'].toString() : ''
			quantityTon.value = data['quantityTon'] != null ? data['quantityTon'].toString() : ''
			baseUnitName.value = data['baseUnitName'] != null ? data['baseUnitName'].toString() : ''
			conversionRate.value = data['conversionRate'] != null ? data['conversionRate'].toString() : ''
			reportDate.value = data['reportDate'] != null ? data['reportDate'].toString() : ''
			
			const st = data['startTime'] != null ? data['startTime'].toString() : ''
			startTime.value = st.length > 10 ? st.substring(11, 16) : ''
			
			const et = data['endTime'] != null ? data['endTime'].toString() : ''
			endTime.value = et.length > 10 ? et.substring(11, 16) : ''
			
			reporter.value = data['reporter'] != null ? data['reporter'].toString() : ''
			status.value = data['status'] != null ? data['status'].toString() : ''
			remark.value = data['remark'] != null ? data['remark'].toString() : ''
		}).catch((e) => {
			const error = e as UTSError
			uni.showToast({ title: error?.message.toString() || '加载失败', icon: 'none' })
		})
	}

	const handleBack = (): void => {
		uni.navigateBack()
	}

	const handleUndoConfirm = (): void => {
		uni.showModal({
			title: '提示',
			content: '确认退回报工记录？',
			success: (res) => {
				if (res.confirm) {
					const data = new UTSJSONObject()
					data['reportId'] = parseInt(reportId.value)
					undoConfirmProReport(data).then((r: any) => {
						uni.showToast({ title: '退回成功', icon: 'success' })
						status.value = 'PREPARE'
						uni.setStorageSync('needRefresh', 'true')
						setTimeout(() => {
							uni.navigateBack({ delta: 1 })
						}, 1500)
					}).catch((e) => {
						const error = e as UTSError
						uni.showToast({ title: error?.message.toString() || '退回失败', icon: 'none' })
					})
				}
			}
		})
	}

	const handleFinish = (): void => {
		uni.showModal({
			title: '提示',
			content: '确认完成报工记录？',
			success: (res) => {
				if (res.confirm) {
					const data = new UTSJSONObject()
					data['reportId'] = parseInt(reportId.value)
					finishProReport(data).then((r: any) => {
						uni.showToast({ title: '完成成功', icon: 'success' })
						status.value = 'FINISHED'
						uni.setStorageSync('needRefresh', 'true')
						setTimeout(() => {
							uni.navigateBack({ delta: 1 })
						}, 1500)
					}).catch((e) => {
						const error = e as UTSError
						uni.showToast({ title: error?.message.toString() || '完成失败', icon: 'none' })
					})
				}
			}
		})
	}

	onMounted(() => {
		const pages = getCurrentPages()
		const currentPage = pages[pages.length - 1]
		const options = currentPage.options
		
		hasFinishPermission.value = checkPermission('mes:pro:proreport:finish')
		hasUndoPermission.value = checkPermission('mes:pro:proreport:undoconfirm')
		
		if (options != null && options.id != null) {
			reportId.value = options.id.toString()
			loadDetail()
		}
	})
</script>

<style lang="scss">
	.page-container {
		flex: 1;
		background-color: #e8f0f9;
	}

	.page-content {
		flex: 1;
		padding: 20rpx;
		padding-bottom: 130rpx;
	}

	.section {
		margin-bottom: 20rpx;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 20rpx;
	}

	.section-header {
		flex-direction: row;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.section-indicator {
		width: 6rpx;
		height: 32rpx;
		background-color: #007aff;
		border-radius: 3rpx;
		margin-right: 12rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.info-card {
		background-color: #f8f9fa;
		border-radius: 12rpx;
		padding: 20rpx;
	}

	.info-row {
		flex-direction: row;
		align-items: center;
		padding: 16rpx 0;
		border-bottom: 1rpx solid #e9ecef;

		&:last-child {
			border-bottom: none;
		}
	}

	.info-label {
		font-size: 28rpx;
		color: #666666;
		width: 180rpx;
		flex-shrink: 0;
	}

	.info-value {
		font-size: 28rpx;
		color: #333333;
		flex: 1;

		&.warning {
			color: #faad14;
		}

		&.primary {
			color: #007aff;
		}
	}

	.status-badge {
		font-size: 24rpx;
		padding: 6rpx 16rpx;
		border-radius: 6rpx;

		&.status-PREPARE {
			background-color: #f0f0f0;
			color: #666666;
		}

		&.status-CONFIRMED {
			background-color: #e6f7ff;
			color: #1890ff;
		}

		&.status-FINISHED {
			background-color: #f6ffed;
			color: #52c41a;
		}

		&.status-CANCEL {
			background-color: #fff1f0;
			color: #ff4d4f;
		}
	}

	.remark-text {
		font-size: 28rpx;
		color: #333333;
		line-height: 1.6;
	}

	.bottom-buttons {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
		border-top: 1rpx solid #e5e5e5;
		display: flex;
		flex-direction: row;
		gap: 20rpx;
	}

	.undo-btn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #faad14;
		color: #ffffff;
		font-size: 28rpx;
		font-weight: 600;
		border-radius: 20rpx;
		border: none;
	}

	.finish-btn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #52c41a;
		color: #ffffff;
		font-size: 28rpx;
		font-weight: 600;
		border-radius: 20rpx;
		border: none;
	}

	.back-btn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #007aff;
		color: #ffffff;
		font-size: 28rpx;
		font-weight: 600;
		border-radius: 20rpx;
		border: none;
	}
</style>