464 lines
14 KiB
Vue
464 lines
14 KiB
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>
|