<template>
<view class="uni-container">
<view class="uni-container-order-detail-pipe">
<view class="order-content-item">
<view class="cu-detail-item title-wrap" @click="isExpandPipe = !isExpandPipe">
<text class="item-title">小票明细</text>
<!-- 折叠/展开图标：根据 isExpandPipe 切换 -->
<text class="fold-icon">{{ isExpandPipe ? '▲' : '▼' }}</text>
</view>
<view v-show="isExpandPipe" class="content-wrap">
<view class="list-container">
<cu-list-row :data-source="pipeList" :rows="pipeRows"></cu-list-row>
</view>
</view>
</view>
</view>
<view class="uni-container-order-detail-part">
<view class="order-content-item">
<view class="cu-detail-item title-wrap" @click="isExpandPart = !isExpandPart">
<text class="item-title">零件明细</text>
<!-- 折叠/展开图标：根据 isExpandPipe 切换 -->
<text class="fold-icon">{{ isExpandPart ? '▲' : '▼' }}</text>
</view>
<view v-show="isExpandPart" class="content-wrap">
<view class="list-container">
<cu-list-row :data-source="pipePartList" :rows="partRows"></cu-list-row>
</view>
</view>
</view>
</view>
<view class="uni-container-order-detail-weld">
<view class="order-content-item">
<view class="cu-detail-item title-wrap" @click="isExpandWeld = !isExpandWeld">
<text class="item-title">焊缝明细</text>
<!-- 折叠/展开图标：根据 isExpandPipe 切换 -->
<text class="fold-icon">{{ isExpandWeld ? '▲' : '▼' }}</text>
</view>
<view v-show="isExpandWeld" class="content-wrap">
<view class="list-container">
<cu-list-row :data-source="pipeWeldList" :rows="weldRows"></cu-list-row>
</view>
</view>
</view>
</view>
<uni-popup ref="popup" type="bottom" @mask-click="handlePopupClose">
<view class="popup-content">
<uni-search-bar
v-model="tempSearchKeyword"
placeholder="输入搜索关键词"
clear-button="always"
cancel-button="none"
@confirm="handleSearchConfirm"
@input="handleSearchInput"
@clear="handleClearSearch"
>
</uni-search-bar>
<scroll-view scroll-y style="max-height: 400rpx">
<view
v-for="(item, idx) in popupDataList"
:key="idx"
class="popup-item"
@click="selectItem(item)"
>
<text>{{ item }}</text>
</view>
<view v-if="popupDataList.length === 0" class="popup-placeholder">
<text class="placeholder-text">暂无数据</text>
</view>
</scroll-view>
</view>
</uni-popup>
</view>
</template>
<script setup>
import {ref, onActivated} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import * as serve from '@/api/modules/piping'
import {findBatchDropList, findHeatDropList} from "@/api/modules/piping/pre/prePipeFeedBack";
const router = useRouter()
const route = useRoute()
const isExpandPipe = ref(true)
const isExpandWeld = ref(true)
const isExpandPart = ref(true)
const popup = ref(null)
const popupType = ref('')
const currentItemIndex = ref(null)
const currentWeldingItemIndex = ref(null)
const tempSearchKeyword = ref('')
let searchTimeout = null
const popupDataList = ref([])
const isSelected = ref(false)
const drawClick = (item) => {
debugger
uni.navigateTo({
url: '/pages/piping/pre/pipePdfView?drawFilePath=' + (item || '')
})
}
const pipeRows = ref([
{
title: '管号',
dataIndex: 'pipeNo',
options: {
isTitle: true
}
},
{
title: '项目号',
dataIndex: 'projectNo'
},
{
title: '版本号',
dataIndex: 'pipeVersion'
},
{
title: '是否最新版',
dataIndex: 'isTopVersion'
},
{
title: '是否删除',
dataIndex: 'isDelete'
},
{
title: '是否暂停',
dataIndex: 'isPause'
},
{
title: '暂停原因',
dataIndex: 'pauseReason'
},
{
title: '暂停预计解除时间',
dataIndex: 'preResumeDate',
customRender: (text) => formatDate(text) // 日期格式化
},
// 技术规格列
{
title: '材质',
dataIndex: 'matDefinition'
},
{
title: '图号',
dataIndex: 'drawNo',
action: {
name: '查看图纸',
type: 'tag',
onClick: (item, record) => drawClick(record.drawFilePath)
}
},
{
title: '页号',
dataIndex: 'pageNo'
},
{
title: '管径壁厚',
dataIndex: 'pipeDiaThickness'
},
{
title: '长度',
dataIndex: 'length'
},
{
title: '重量',
dataIndex: 'weight'
},
{
title: '内表面积',
dataIndex: 'inSurface'
},
{
title: '外表面积',
dataIndex: 'outSurface'
},
{
title: '分段',
dataIndex: 'block'
},
{
title: '是否裸管',
dataIndex: 'isBarePipe'
},
{
title: '寸口数',
dataIndex: 'inch'
},
{
title: '内场寸口数',
dataIndex: 'inInch'
},
{
title: '外场寸口数',
dataIndex: 'outInch'
},
{
title: '安装三维坐标X',
dataIndex: 'instLocationx'
},
{
title: '安装三维坐标Y',
dataIndex: 'instLocationy'
},
{
title: '安装三维坐标Z',
dataIndex: 'instLocationz'
},
{
title: '是否继承',
dataIndex: 'isInherit'
},
// 生产信息列
{
title: '预制备注',
dataIndex: 'preRemark'
},
{
title: '下料人',
dataIndex: 'cutUserNo'
},
{
title: '下料完成时间',
dataIndex: 'cutFinishDate',
customRender: (text) => formatDate(text) // 日期格式化
},
{
title: '装配人',
dataIndex: 'assyUserNo'
},
{
title: '装配完成时间',
dataIndex: 'assyFinishDate',
customRender: (text) => formatDate(text) // 日期格式化
},
{
title: '焊接人',
dataIndex: 'weldingUserNo'
},
{
title: '焊接完成时间',
dataIndex: 'weldingFinishDate',
customRender: (text) => formatDate(text) // 日期格式化
},
{
title: '焊前报验时间',
dataIndex: 'weldingPreFinishDate',
customRender: (text) => formatDate(text) // 日期格式化
},
{
title: '焊后报验时间',
dataIndex: 'weldingPostFinishDate',
customRender: (text) => formatDate(text) // 日期格式化
},
// 区域与交付列
{
title: '生产大区域',
dataIndex: 'bigAreaNo'
},
{
title: '生产中区域',
dataIndex: 'middleAreaNo'
},
{
title: '生产小区域',
dataIndex: 'smallAreaNo'
},
{
title: '安装完成时间',
dataIndex: 'instFinishDate',
customRender: (text) => formatDate(text) // 日期格式化
},
{
title: '吊装完成时间',
dataIndex: 'liftingDate',
customRender: (text) => formatDate(text) // 日期格式化
},
{
title: '表面处理方式',
dataIndex: 'treatment'
},
{
title: '内场交出时间',
dataIndex: 'infieldHandoverDate',
customRender: (text) => formatDate(text) // 日期格式化
},
{
title: '涂装交出时间',
dataIndex: 'paintHandoverDate',
customRender: (text) => formatDate(text) // 日期格式化
},
{
title: '涂装返回时间',
dataIndex: 'paintBackHandoverReceiveDate',
customRender: (text) => formatDate(text) // 日期格式化
},
{
title: '装筐时间',
dataIndex: 'inTaryDate',
customRender: (text) => formatDate(text) // 日期格式化
}
])
const weldRows = ref([
{
title: '焊缝编号',
dataIndex: 'weldNo',
width: 150,
fixed: 'left'
},
{
title: '焊缝长度(mm)',
dataIndex: 'weldLength',
customRender: (value) => (value ? `${value} mm` : '-')
},
// 连接部件信息
{
title: '部件1管号',
dataIndex: 'p1PipeNo'
},
{
title: '部件1零件号',
dataIndex: 'p1PartNo'
},
{
title: '部件2管号',
dataIndex: 'p2PipeNo'
},
{
title: '部件2零件号',
dataIndex: 'p2PartNo'
},
// 焊接规格信息
{
title: '连接类型',
dataIndex: 'weldConnTypeShort'
},
{
title: '车间/现场标记',
dataIndex: 'shopFieldFlag'
},
{
title: '口径(mm)',
dataIndex: 'caliber',
customRender: (value) => (value ? `${value} mm` : '-')
},
{
title: '壁厚(mm)',
dataIndex: 'thickness',
customRender: (value) => (value ? `${value} mm` : '-')
},
{
title: '寸口数',
dataIndex: 'weldInchQty'
},
{
title: '部件1材质',
dataIndex: 'p1Material'
},
{
title: '部件2材质',
dataIndex: 'p2Material'
},
{
title: '是否为管焊缝',
dataIndex: 'isPipeWeld',
customRender: (value) => (value !== null ? (value ? '是' : '否') : '-')
},
{
title: '船体分类',
dataIndex: 'hullClass'
},
// 工艺与认证信息
{
title: 'WPS编号',
dataIndex: 'wpsNo',
action: {
name: '修改WPS编号',
type: 'tag',
onClick: (item, record) => wpsNoClick(item, record.index, record.id)
}
},
{
title: '焊材规格',
dataIndex: 'weldingMatSpec'
},
{
title: '批号',
dataIndex: 'batchNo'
},
{
title: '证书号',
dataIndex: 'certNo'
},
// 人员与时间信息
{
title: '装配人工号',
dataIndex: 'assyUserNo'
},
{
title: '装配人姓名',
dataIndex: 'assyUserName'
},
{
title: '装配完成日期',
dataIndex: 'assyFinishDate',
customRender: (text) => formatDate(text)
},
{
title: '焊工工号',
dataIndex: 'weldingUserNo'
},
{
title: '焊工姓名',
dataIndex: 'weldingUserName'
},
{
title: '焊接完成日期',
dataIndex: 'weldingFinishDate',
customRender: (text) => formatDate(text)
}
])
const batchNoClick = (type, row, index) => {
popupType.value = type
currentItemIndex.value = index
tempSearchKeyword.value = '' // 清空临时搜索词
popupDataList.value = []
isSelected.value = true
// 初始加载全部数据，不进行搜索
queryHeatOrBatchList('')
popup.value.open()
}
const wpsNoClick = (type, index, id) => {
currentWeldingItemIndex.value = index
uni.navigateTo({
url: '/pages/piping/pre/selectWpsNo?weldId=' + id
})
}
const handleSearchInput = () => {
clearTimeout(searchTimeout)
searchTimeout = setTimeout(() => {
// 实时搜索（防抖）
searchData()
}, 300)
}
const handleSearchConfirm = () => {
searchData()
}
// 搜索数据
const searchData = async () => {
await queryHeatOrBatchList(tempSearchKeyword.value)
}
const queryHeatOrBatchList = async (keyword) => {
const matNo = pipePartList.value[currentItemIndex.value].matNo
const heatNo = pipePartList.value[currentItemIndex.value].heatNo
try {
let res
if (popupType.value === 'heatNo') {
res = await findHeatDropList({
matNo,
heatNo: keyword || '' // 使用传入的关键词
})
} else if (popupType.value === 'batchNo') {
res = await findBatchDropList({
matNo,
heatNo,
batchNo: keyword || '' // 使用传入的关键词
})
}
popupDataList.value = res.data || []
} catch (e) {
console.error('搜索失败:', e)
uni.showToast({title: '搜索失败', icon: 'none'})
}
}
const partRows = ref([
{
title: '零件编号',
dataIndex: 'partNo'
},
{
title: '零件长度(mm)',
dataIndex: 'length',
customRender: (value) => `${value} mm` // 添加单位
},
{
title: '零件类型',
dataIndex: 'partType'
},
{
title: '材料名称',
dataIndex: 'material'
},
{
title: '零件尺寸规格',
dataIndex: 'partSize'
},
{
title: '物资编码',
dataIndex: 'matNo'
},
{
title: '零件重量',
dataIndex: 'weight',
customRender: (value) => (value ? `${value} kg` : '-') // 重量带单位
},
{
title: '是否弯管',
dataIndex: 'isBending',
customRender: (value) => (value ? '是' : '否') // 布尔值转中文
},
{
title: '坡口数量',
dataIndex: 'grooveQty'
},
{
title: '槽数',
dataIndex: 'slotQty'
},
{
title: '螺纹数量',
dataIndex: 'screwQty'
},
{
title: '壁厚',
dataIndex: 'thickness'
},
{
title: '管径',
dataIndex: 'pipeDia'
},
{
title: '部件类型',
dataIndex: 'accessoryClass'
},
{
title: '涂装代码',
dataIndex: 'paintNo'
},
{
title: '下料备注',
dataIndex: 'cutRemark'
},
{
title: '车间标记',
dataIndex: 'inShopFlag',
customRender: (value) => (value ? '已标记' : '未标记') // 布尔值转中文
},
{
title: '领料单号',
dataIndex: 'shopMatOrderNo'
},
{
title: '炉号',
dataIndex: 'heatNo',
action: {
name: '修改批号',
type: 'tag',
onClick: (item, record) => batchNoClick("heatNo", item, record.index)
}
},
{
title: '批号',
dataIndex: 'batchNo',
action: {
name: '修改批号',
type: 'tag',
onClick: (item, record) => batchNoClick("heatNo", item, record.index)
}
},
{
title: '证书号',
dataIndex: 'certNo'
}
])
const pipeList = ref([])
const pipeWeldList = ref([])
const pipePartList = ref([])
onActivated(() => {
const params = {
pipeNo: route.query.pipeNo,
projectNo: route.query.projectNo,
pipeVersion: route.query.pipeVersion
}
serve.getPipeInfo(params).then((res) => {
pipeList.value = [res.data]
pipeWeldList.value = res.data.pipeWeldList
pipePartList.value = res.data.pipePartList.map((item, index) => {
item.index = index
return item;
});
if (res.data.length > 0) {
uni.showToast({
title: '查询成功',
icon: 'none',
duration: 3000
})
} else {
uni.showToast({
title: '未查询到小票',
icon: 'none',
duration: 3000
})
}
})
debugger
uni.$on('preSelectedWpsNo', (data) => {
if (Array.isArray(data) && data.length > 0 && currentWeldingItemIndex.value !== null) {
const currentIndex = currentWeldingItemIndex.value
if (currentIndex >= 0 && currentIndex < weldingDataList.value.length) {
weldingDataList.value[currentIndex].wpsNo = data[0].wpsNo
weldingDataList.value[currentIndex].weldProcess = data[0].process
weldingDataList.value[currentIndex].weldingMatSpec = data[0].type
weldingDataList.value[currentIndex].rootGrade = data[0].rootGrade
weldingDataList.value[currentIndex].fillGrade = data[0].fillGrade
}
}
})
})
const selectItem = (value) => {
if (popupType.value === 'heatNo') {
pipePartList.value[currentItemIndex.value].heatNo = value
handleHeatNoChange(value, pipePartList.value[currentItemIndex.value])
batchNoClick("batchNo", pipePartList.value[currentItemIndex.value], currentItemIndex.value)
} else {
pipePartList.value[currentItemIndex.value].batchNo = value
handleBatchNoChange(value, pipePartList.value[currentItemIndex.value])
// 关闭弹窗前清空临时搜索词
tempSearchKeyword.value = ''
popup.value.close()
isSelected.value = false
}
}
const handleHeatNoChange = (val, item) => {
item.heatNo = val
console.log('炉号变化:', item)
}
const handleBatchNoChange = (val, item) => {
item.batchNo = val
console.log('批号变化:', item)
}
// 日期格式化函数
function formatDate(date) {
if (!date) return ''
// 处理 Date 对象或时间戳
const d = date instanceof Date ? date : new Date(date)
const year = d.getFullYear()
const month = String(d.getMonth() + 1).padStart(2, '0')
const day = String(d.getDate()).padStart(2, '0')
return `${year}-${month}-${day}`
}
</script>
<style lang="scss" scoped>
.cu-dropdown-content {
padding: 5px 0;
text-align: center;
}
.item-title {
font-size: 36rpx;
font-weight: 600;
color: #2563eb;
margin-bottom: 15rpx;
border-left: 4rpx solid #2563eb;
padding-left: 10rpx;
margin-top: 10rpx;
}
.uni-container {
height: calc(100vh - 100rpx - 1.35rem - env(safe-area-inset-bottom));
background-color: #f8fafc;
overflow: hidden;
overflow-y: scroll;
}
.uni-container-order-detail {
margin-top: 20px;
width: calc(100% - 20px);
min-height: 90rpx;
border-radius: 8px;
background: #fff;
box-shadow: 0 0 3px 0px #0000004a;
padding: 10px;
display: flex;
flex-direction: column;
}
.title-wrap {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.fold-icon {
font-size: 28rpx;
color: #2563eb;
margin-left: 10rpx;
}
.content-wrap {
margin-top: 10rpx;
}
.uni-container-order-detail-pipe {
margin-top: 20px;
width: calc(100% - 20px);
min-height: 90rpx;
border-radius: 8px;
background: #fff;
box-shadow: 0 0 3px 0px #0000004a;
padding: 10px;
display: flex;
flex-direction: column;
}
.uni-container-order-detail-weld {
margin-top: 20px;
width: calc(100% - 20px);
min-height: 90rpx;
border-radius: 8px;
background: #fff;
box-shadow: 0 0 3px 0px #0000004a;
padding: 10px;
display: flex;
flex-direction: column;
}
.uni-container-order-detail-part {
margin-top: 20px;
width: calc(100% - 20px);
min-height: 90rpx;
border-radius: 8px;
background: #fff;
box-shadow: 0 0 3px 0px #0000004a;
padding: 10px;
display: flex;
flex-direction: column;
}
.popup-content {
padding: 30rpx;
background: #fff;
max-height: 70vh;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
}
.popup-item {
padding: 24rpx;
border-bottom: 1rpx solid #f0f0f0;
font-size: 28rpx;
&:active {
background-color: #f8f8f8;
}
}
.list-placeholder,
.popup-placeholder {
display: flex;
justify-content: center;
align-items: center;
padding: 60rpx 0;
}
.placeholder-text {
font-size: 28rpx;
color: #999;
}
.uni-easyinput {
width: 100%;
}
/* 响应式调整 */
@media (max-height: 600px) {
.content-section {
margin-bottom: 100rpx;
}
.data-list {
max-height: 60vh;
}
}
</style>
<template>
<!-- 搜索框 -->
<view class="search-bar">
<input v-model="searchKey" placeholder="请输入WPS NO" />
<cu-button plain @click="search">搜索</cu-button>
</view>
<!-- 数据列表 -->
<scroll-view class="list-container" scroll-y>
<view
v-for="(item, index) in wpsNoList"
:key="index"
class="list-item"
@click="toggleSelection(item)"
>
<view class="item-content">
<checkbox :checked="isSelected(item.wpsNo)" @click="toggleSelection(item)" />
<view class="info-container">
<view class="info-row">
<text>WPS NO : {{ item.wpsNo }}</text>
</view>
<view class="info-row">
<text>焊接方法 : {{ item.process }}</text>
</view>
<view class="info-row">
<text>焊材规格 : {{ item.grade }}</text>
</view>
<view class="info-row">
<text>焊接类型 : {{ item.type }}</text>
</view>
</view>
</view>
</view>
<view v-if="loading" class="loading-text">加载中...</view>
<view v-if="noMoreData" class="no-more-data">没有更多数据了</view>
</scroll-view>
<!-- 底部按钮 -->
<view class="bottom-btn-group">
<cu-button plain @click="cancel">取消</cu-button>
<cu-button @click="confirm">确认</cu-button>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import * as serve from '@/api/modules/piping/pre/prePipeFeedBack'
const route = useRoute()
const searchKey = ref('')
const selectedItems = ref([])
const wpsNoList = ref([])
const weldId = ref(null)
const loading = ref(false)
const noMoreData = ref(false)
// 获取管段数据（支持分页）
const loadPipes = async () => {
if (loading.value) return
loading.value = true
try {
const params = {
weldId: weldId.value
}
serve.getWldPiPeiWpsList(params).then((res) => {
if (res.status === 200) {
wpsNoList.value = res.data || []
}
})
} catch (error) {
console.error('加载数据失败:', error)
uni.showToast({ title: '加载失败', icon: 'none' })
} finally {
loading.value = false
}
}
onMounted(() => {
weldId.value = route.query.weldId
loadPipes()
})
// 搜索时重置页码并重新加载
const search = () => {
noMoreData.value = false
loadPipes()
}
const cancel = () => {
uni.navigateBack()
}
// 判断是否选中
const isSelected = (wpsNo) => {
return selectedItems.value.includes(wpsNo)
}
// 切换选择状态
const toggleSelection = (item) => {
const wpsNoInfo = item.wpsNo + '-' + item.process + '-' + item.grade + '-' + item.type
const index = selectedItems.value.indexOf(wpsNoInfo)
if (index > -1) {
selectedItems.value = selectedItems.value.filter((wps) => wps !== wpsNoInfo)
} else {
selectedItems.value = [...selectedItems.value, wpsNoInfo]
}
}
// 确认选择并返回
const confirm = () => {
const selectedData = wpsNoList.value.filter((item) => {
const combined = item.wpsNo + '-' + item.process + '-' + item.grade + '-' + item.type
return selectedItems.value.includes(combined)
})
if (selectedData.length != 1) {
uni.showToast({ title: '请选择一个WPS NO', icon: 'none' })
return
}
uni.$emit('preSelectedWpsNo', selectedData)
uni.navigateBack()
}
</script>
<style scoped lang="scss">
.title {
font-size: 32rpx;
color: #333;
margin-bottom: 20rpx;
}
.search-bar {
height: 50px;
display: flex;
gap: 10rpx;
margin-bottom: 10rpx;
}
.search-bar input {
flex: 1;
height: 90rpx;
border: 1px solid #ccc;
border-radius: 6rpx;
padding: 0 20rpx;
font-size: 28rpx;
margin-left: 10px;
}
.list-container {
height: 1000rpx;
background-color: #f9f9f9;
border-radius: 8rpx;
margin-bottom: 40rpx;
overflow: hidden;
}
.list-item {
align-items: center;
padding: 20rpx;
border-bottom: 1px solid #eee;
font-size: 28rpx;
}
.bottom-btn-group {
display: flex;
justify-content: space-between;
margin-top: 10rpx;
}
.loading-text,
.no-more-data {
text-align: center;
padding: 20rpx;
font-size: 24rpx;
color: #999;
}
.item-content {
display: flex;
align-items: flex-start;
gap: 20rpx;
}
.info-container {
flex: 1;
}
.info-row {
margin-top: 1rpx;
font-size: 24rpx;
color: #333;
}
</style>
为什么preSelectedWpsNo选择值没能带过来
最新发布
本文介绍了如何在uni-app的开发环境中使用Countdown组件，展示了如何设置目标日期（targetDate）和处理计时结束事件（handleCountdownFinished）。CSS样式还展示了组件在页面布局中的具体位置。
扫一扫
622
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
