671 lines
16 KiB
Vue
671 lines
16 KiB
Vue
<template>
|
||
<view class="detail-page">
|
||
<!-- 焊口主标识 -->
|
||
<view class="joint-hero">
|
||
<text class="joint-hero__code">{{ form.MaterialCode || '--' }}</text>
|
||
<view class="joint-hero__meta">
|
||
<view class="joint-hero__pill">
|
||
<text class="pill-label">材料编码</text>
|
||
<text class="pill-value">{{ form.Code || '--' }}</text>
|
||
</view>
|
||
<view class="joint-hero__pill">
|
||
<text class="pill-label">材料名称</text>
|
||
<text class="pill-value">{{ form.MaterialName }}</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.HeatNo || '--' }}
|
||
</text>
|
||
</view>
|
||
<view class="card__row">
|
||
<text class="card__label">批号</text>
|
||
<text class="card__value">{{ form.BatchNo || '--' }}</text>
|
||
</view>
|
||
<view class="card__row">
|
||
<text class="card__label">规格</text>
|
||
<text class="card__value">{{ form.MaterialSpec || '--' }}</text>
|
||
</view>
|
||
<view class="card__row">
|
||
<text class="card__label">单位</text>
|
||
<text class="card__value">{{ form.MaterialUnit || '--' }}</text>
|
||
</view>
|
||
<view class="card__row card__row--stack">
|
||
<text class="card__label">材料描述</text>
|
||
<text class="card__value">{{ form.MaterialDef || '--' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 防腐记录 -->
|
||
<nbd-anti-record :params="{ materialCode: form.MaterialCode, projectId: currentProject.ProjectId }" />
|
||
|
||
<!-- 防腐填报 -->
|
||
<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="showPaintCodePicker = true">
|
||
<text class="card__label">防腐等级</text>
|
||
<view class="card__value-wrap card__value-wrap--clickable">
|
||
<text class="card__value" :class="{ 'card__value--placeholder': !antiForm.AnticorrosionLevel }">
|
||
{{ antiForm.AnticorrosionLevel || '请选择防腐等级' }}
|
||
</text>
|
||
<u-icon name="arrow-down" :size="24" color="#bbb" />
|
||
</view>
|
||
</view>
|
||
<!-- 中间漆 -->
|
||
<view class="card__row">
|
||
<text class="card__label">中间漆</text>
|
||
<view class="card__value-wrap">
|
||
{{ antiForm.IntermediatePaint || '--' }}
|
||
</view>
|
||
</view>
|
||
<!-- 面漆 -->
|
||
<view class="card__row">
|
||
<text class="card__label">面漆</text>
|
||
<view class="card__value">
|
||
{{ antiForm.Topcoat || '--' }}
|
||
</view>
|
||
</view>
|
||
<!-- 漆膜厚度 -->
|
||
<view class="card__row">
|
||
<text class="card__label">漆膜厚度</text>
|
||
<view class="card__value-wrap">
|
||
<input class="card__input" v-model="antiForm.FilmThickness" type="digit"
|
||
placeholder="请输入漆膜厚度" />
|
||
<text class="card__unit">μm</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="antiForm.SandBlasting" placeholder="请输入"
|
||
:maxlength="200" auto-height />
|
||
</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="antiForm.RustSandBlasting" placeholder="请输入"
|
||
:maxlength="200" auto-height />
|
||
</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">
|
||
<text class="card__label">自检结果</text>
|
||
<view class="card__value-wrap card__value-wrap--clickable">
|
||
<nbd-check-btn v-model="antiForm.CheckResult" passKey="合格" failKey="不合格" passText="合格" failText="不合格" />
|
||
</view>
|
||
</view>
|
||
|
||
<view
|
||
class="fail-section"
|
||
:class="{ 'is-visible': failVisible, 'is-enter': failAnimating, 'is-leave': failLeaving }"
|
||
>
|
||
<!-- 不合格原因 -->
|
||
<view class="card__row card__row--stack">
|
||
<text class="card__label">不合格原因</text>
|
||
<view class="card__value-wrap">
|
||
<textarea class="remark-input" v-model="antiForm.UnqualifiedReason" placeholder="请输入"
|
||
:maxlength="200" auto-height />
|
||
</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="antiForm.RectifyRequirement" placeholder="请输入"
|
||
:maxlength="200" auto-height />
|
||
</view>
|
||
</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="antiForm.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="photoRef" v-model:attachUrl="files" typeName="AntiRust" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<nbd-submit-bar text="提交" :loading="submitting" @click="handleSubmit" />
|
||
</view>
|
||
|
||
<nbd-select v-model="showPaintCodePicker" title="选择防腐等级" :list="paintCodeList" label-key="PaintCode" value-key="Id"
|
||
@confirm="selectPaintCode" />
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import { storeToRefs } from 'pinia'
|
||
import { watch, nextTick } from 'vue'
|
||
import { useUserStore } from '@/store'
|
||
import { reqMaterialInfoByMaterialCode, reqPaintCodeList, reqSaveAntiCorrosionCheck } from '@/api/hj.js'
|
||
|
||
const userStore = useUserStore()
|
||
const { userInfo, currentProject } = storeToRefs(userStore)
|
||
const form = ref({})
|
||
const showPaintCodePicker = ref(false)
|
||
const paintCodeList = ref([])
|
||
|
||
const files = ref('')
|
||
|
||
// 防腐填报
|
||
const antiForm = ref({
|
||
AnticorrosionLevel: '', // 防腐等级（显示用）
|
||
PaintId: '', // 防腐代码字典ID
|
||
IntermediatePaint: '', // 中间漆
|
||
Topcoat: '', // 面漆
|
||
FilmThickness: '', // 漆膜厚度 （两位小数，单位μm）
|
||
RustSandBlasting: '', // 除锈喷砂信息
|
||
SandBlasting: '', // 喷砂信息
|
||
Remark: '', // 备注
|
||
CheckResult: '合格', // 检查结果
|
||
UnqualifiedReason: '', // 不合格原因
|
||
RectifyRequirement: '', // 整改要求
|
||
})
|
||
|
||
const photoRef = ref(null)
|
||
const submitting = ref(false)
|
||
const failVisible = ref(antiForm.value.CheckResult === '不合格')
|
||
const failAnimating = ref(false)
|
||
const failLeaving = ref(false)
|
||
|
||
watch(() => antiForm.value.CheckResult, async (val) => {
|
||
if (val === '不合格') {
|
||
failVisible.value = true
|
||
await nextTick()
|
||
failAnimating.value = true
|
||
failLeaving.value = false
|
||
} else {
|
||
failLeaving.value = true
|
||
failAnimating.value = false
|
||
setTimeout(() => {
|
||
failVisible.value = false
|
||
failLeaving.value = false
|
||
}, 250)
|
||
}
|
||
})
|
||
|
||
|
||
const fetchPaintCodes = async () => {
|
||
try {
|
||
const res = await reqPaintCodeList()
|
||
if (res.code === 1 && res.data) {
|
||
paintCodeList.value = res.data
|
||
}
|
||
} catch (err) {
|
||
console.error('获取防腐等级列表失败:', err)
|
||
}
|
||
}
|
||
|
||
const selectPaintCode = (item) => {
|
||
antiForm.value.PaintId = item.Id
|
||
antiForm.value.AnticorrosionLevel = item.PaintCode
|
||
antiForm.value.IntermediatePaint = item.IntermediatePaint
|
||
antiForm.value.Topcoat = item.Topcoat
|
||
|
||
showPaintCodePicker.value = false
|
||
}
|
||
|
||
onLoad((opt) => {
|
||
fetchPaintCodes()
|
||
if (opt?.id) {
|
||
loadData(opt.id)
|
||
}
|
||
})
|
||
|
||
const loadData = async (id) => {
|
||
try {
|
||
uni.showLoading({ title: '加载中...', mask: true })
|
||
const res = await reqMaterialInfoByMaterialCode(encodeURIComponent(id))
|
||
if (res.code === 1 && res.data) {
|
||
form.value = res.data
|
||
}
|
||
} catch (err) {
|
||
console.error('加载焊口数据失败:', err)
|
||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||
} finally {
|
||
uni.hideLoading()
|
||
}
|
||
}
|
||
|
||
const handleSubmit = async () => {
|
||
// if (!antiForm.value.PaintId) {
|
||
// uni.showToast({ title: '请选择防腐等级', icon: 'none' })
|
||
// return
|
||
// }
|
||
if( !antiForm.value.UnqualifiedReason && antiForm.value.CheckResult === '不合格') {
|
||
uni.showToast({ title: '请输入不合格原因', icon: 'none' })
|
||
return
|
||
}
|
||
if( !antiForm.value.RectifyRequirement && antiForm.value.CheckResult === '不合格') {
|
||
uni.showToast({ title: '请输入整改要求', icon: 'none' })
|
||
return
|
||
}
|
||
uni.showModal({
|
||
title: '确认提交',
|
||
content: '确定提交防腐处理结果吗？',
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
submitting.value = true
|
||
if (photoRef.value?.hasPending()) {
|
||
uni.showLoading({ title: '上传照片中...', mask: true })
|
||
await photoRef.value.uploadAll()
|
||
uni.hideLoading()
|
||
}
|
||
let data = {
|
||
ProjectId: currentProject.value.ProjectId, // 项目ID
|
||
MaterialCode: form.value.MaterialCode, // 材料编码
|
||
AnticorrosionLevel: antiForm.value.AnticorrosionLevel, // 防腐等级
|
||
PaintId: antiForm.value.PaintId, // 防腐代码字典ID
|
||
FilmThickness: antiForm.value.FilmThickness, // 漆膜厚度
|
||
SandBlasting: antiForm.value.SandBlasting, // 喷砂信息
|
||
RustSandBlasting: antiForm.value.RustSandBlasting, // 除锈喷砂信息
|
||
Remark: antiForm.value.Remark, // 备注
|
||
CheckResult: antiForm.value.CheckResult, // 检查结果
|
||
UnqualifiedReason: antiForm.value.UnqualifiedReason, // 不合格原因
|
||
RectifyRequirement: antiForm.value.RectifyRequirement, // 整改要求
|
||
CheckPerson: userInfo.value.PersonId, // 检查人员
|
||
CheckTime: uni.formatTime(new Date().getTime(), 'YYYY-MM-DD HH:mm'), // 检查时间
|
||
CreateUser: userInfo.PersonId, // 创建人员
|
||
AttachUrl1: files.value, // 照片
|
||
}
|
||
console.log("提交数据==============>",data)
|
||
try {
|
||
const res = await reqSaveAntiCorrosionCheck(data)
|
||
if (res.code === 1) {
|
||
uni.showToast({ title: '提交成功', icon: 'success' })
|
||
setTimeout(() => uni.navigateBack(), 1500)
|
||
} else {
|
||
uni.showToast({ title: res.msg || '提交失败', icon: 'none' })
|
||
}
|
||
} catch (err) {
|
||
console.error('提交防腐填报失败:', err)
|
||
uni.showToast({ title: '提交失败', icon: 'none' })
|
||
} finally {
|
||
submitting.value = false
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
$primary: #2979ff;
|
||
$primary-light: #e8f0fe;
|
||
$primary-mid: #d0ddff;
|
||
$primary-dark: #1a56cc;
|
||
$bg: #f4f2ee;
|
||
$text: #0f1724;
|
||
$text-secondary: #6b7c93;
|
||
$border: #e8ecf1;
|
||
$card-bg: #fefdfb;
|
||
$radius: 16rpx;
|
||
$shadow-md: 0 2rpx 12rpx rgba(0, 0, 0, 0.04), 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
|
||
|
||
.detail-page {
|
||
min-height: 100vh;
|
||
background: $bg;
|
||
padding-bottom: 180rpx;
|
||
}
|
||
|
||
// ===== 焊口主标识 =====
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
|
||
// ===== 动效关键帧 =====
|
||
@keyframes fadeUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(24rpx);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes breathe {
|
||
0%, 100% {
|
||
opacity: 0.6;
|
||
}
|
||
50% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
// ===== 区块标题 =====
|
||
.section {
|
||
margin: 0 24rpx 20rpx;
|
||
animation: fadeUp 0.5s ease-out both;
|
||
|
||
&:nth-child(2) { animation-delay: 0.05s; }
|
||
&:nth-child(3) { animation-delay: 0.15s; }
|
||
|
||
&__header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
margin-bottom: 14rpx;
|
||
padding: 0 6rpx;
|
||
}
|
||
|
||
&__bar {
|
||
width: 6rpx;
|
||
height: 26rpx;
|
||
background: linear-gradient(180deg, $primary, #6ba3ff);
|
||
border-radius: 3rpx;
|
||
flex-shrink: 0;
|
||
animation: breathe 2.5s ease-in-out infinite;
|
||
}
|
||
|
||
&__title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: $text;
|
||
letter-spacing: 0.5rpx;
|
||
}
|
||
|
||
.img-box {
|
||
padding: 20rpx;
|
||
border-radius: 16rpx;
|
||
background-color: #ffffff;
|
||
}
|
||
}
|
||
|
||
// ===== 信息卡片 =====
|
||
.card {
|
||
background: $card-bg;
|
||
border-radius: $radius;
|
||
overflow: hidden;
|
||
box-shadow: $shadow-md;
|
||
|
||
&__row {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 22rpx 28rpx;
|
||
border-bottom: 1rpx solid $border;
|
||
transition: background 0.25s ease;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
&:active {
|
||
background: #f5f4f1;
|
||
}
|
||
|
||
&--stack {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
|
||
.card__label {
|
||
width: auto;
|
||
padding-left: 16rpx;
|
||
margin-bottom: 12rpx;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 4rpx;
|
||
height: 16rpx;
|
||
background: $primary-mid;
|
||
border-radius: 2rpx;
|
||
}
|
||
}
|
||
|
||
.card__value {
|
||
width: 100%;
|
||
text-align: left;
|
||
}
|
||
|
||
.card__value-wrap {
|
||
width: 100%;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.card__input {
|
||
text-align: left;
|
||
min-height: 132rpx;
|
||
}
|
||
|
||
.remark-input {
|
||
width: 100%;
|
||
text-align: left;
|
||
font-size: 28rpx;
|
||
color: $text;
|
||
padding: 20rpx 24rpx;
|
||
background: #f7f8fa;
|
||
border-radius: 12rpx;
|
||
line-height: 1.6;
|
||
min-height: 140rpx;
|
||
box-sizing: border-box;
|
||
|
||
&::placeholder {
|
||
color: #b0bec5;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&__label {
|
||
width: 180rpx;
|
||
font-size: 26rpx;
|
||
color: $text-secondary;
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
padding-left: 16rpx;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 4rpx;
|
||
height: 16rpx;
|
||
background: $primary-mid;
|
||
border-radius: 2rpx;
|
||
}
|
||
}
|
||
|
||
&__value {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
color: $text;
|
||
font-weight: 500;
|
||
text-align: left;
|
||
|
||
&--placeholder {
|
||
color: #888888;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
|
||
&__value-wrap {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
gap: 8rpx;
|
||
|
||
&--clickable {
|
||
min-height: 48rpx;
|
||
justify-content: flex-end;
|
||
}
|
||
}
|
||
|
||
&__unit {
|
||
font-size: 24rpx;
|
||
color: $text-secondary;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
&__input {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
color: $text;
|
||
text-align: left;
|
||
height: 48rpx;
|
||
|
||
&::placeholder {
|
||
color: #b0bec5;
|
||
}
|
||
}
|
||
}
|
||
|
||
// ===== 不合格区域切换动画 =====
|
||
.fail-section {
|
||
max-height: 0;
|
||
overflow: hidden;
|
||
opacity: 0;
|
||
transform: translateY(-20rpx);
|
||
transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.25s ease;
|
||
|
||
&.is-visible {
|
||
max-height: 600rpx;
|
||
}
|
||
|
||
&.is-enter {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
&.is-leave {
|
||
max-height: 0;
|
||
opacity: 0;
|
||
transform: translateY(-20rpx);
|
||
}
|
||
}
|
||
</style>
|