@@ -0,0 +1,247 @@
< template >
< view class = "page-list" >
<!-- 头部过滤区域 -- >
< view class = "filter-header" >
<!-- 第一行 ： 搜索框 + 刷新 -- >
< view class = "search-row" >
< u-search v-model = "keyword" placeholder="请输入包装编号" :show-action="false" shape="round" bg-color="#f5f6f8" @change="handleSearch" / >
< view class = "refresh-btn" @click ="handleRefresh" >
< u -icon name = "reload" :size = "32" : class = "{ rotating: loading }" > < / u-icon >
< / view >
< / view >
<!-- 第二行 ： 车次关联 + 单位选择 -- >
< view class = "filter-row has-radio" >
< u-radio-group v-model = "hasTrainNumber" @change="onTrainNumberChange" >
< u -radio :name = "true" shape = "button" label = "已关联" > < / u-radio >
< u-radio :name = "false" shape = "button" label = "未关联" > < / u-radio >
< / u-radio-group >
< view class = "unit-select-btn" @click ="handleShowUnitSelect" >
< text class = "unit-name" > { { selectedUnit ? . UnitName || '单位' } } < / text >
< u-icon name = "arrow-down" :size = "18" color = "#999" > < / u-icon >
< / view >
< / view >
< / view >
<!-- 列表内容 -- >
< scroll-view class = "list-scroll" scroll -y @scrolltolower ="loadMore" refresher -enabled
:refresher-triggered = "refreshing" @refresh ="handleRefresh" >
< view class = "list-wrap" >
< view v-for = "(item, index) in listData" :key="item.PackagingManageId || index" class="card-item"
@click ="handleItemClick(item)" >
< view class = "card-header" >
< text class = "card-code" > { { item . PackagingCode || '--' } } < / text >
< text class = "card-tag" : class = "'status-' + item.State" >
{ { getStatus ( item . State ) } }
< / text >
< / view >
< view class = "card-body" >
< view class = "card-row" >
< text class = "row-label" > 包装单位 < / text >
< text class = "row-value" > { { item . UnitName || '--' } } < / text >
< / view >
< view class = "card-row" >
< text class = "row-label" > 预制工作包 < / text >
< text class = "row-value" > { { item . StackingPosition || '--' } } < / text >
< / view >
< view class = "card-row" >
< text class = "row-label" > 车次 < / text >
< text class = "row-value" > { { item . TrainNumber || '未关联' } } < / text >
< / view >
< view class = "card-row" >
< text class = "row-label" > 数量 < / text >
< text class = "row-value" > { { item . ComponentCount || '--' } } < / text >
< / view >
< view class = "card-row" >
< text class = "row-label" > 分类 < / text >
< text class = "row-value" > { { item . CategoryString || '--' } } < / text >
< / view >
< view class = "card-row" >
< text class = "row-label" > 签收人 < / text >
< text class = "row-value" > { { item . ReceiveMan || '--' } } < / text >
< / view >
< view class = "card-row" >
< text class = "row-label" > 签收时间 < / text >
< text class = "row-value" > { { item . ReceiveDate || '--' } } < / text >
< / view >
< / view >
< / view >
<!-- 空状态 -- >
< u-empty v-if = "!loading && listData.length === 0" mode="list" text="暂无数据" > < / u -empty >
<!-- 加载提示 -- >
< view v-if = "loading && listData.length > 0" class="loading-more" >
< u -loading mode = "circle" size = "32" > < / u-loading >
< text > 加载中 ... < / text >
< / view >
<!-- 没有更多 -- >
< view v-if = "!loading && !hasMore && listData.length > 0" class="no-more" >
< text > — 没有更多了 — < / text >
< / view >
< / view >
< / scroll-view >
n <!-- 新增按钮 -- >
< view class = "fab-btn" @click ="handleAdd" >
< u -icon name = "plus" :size = "60" color = "#ffffff" > < / u-icon >
< / view >
<!-- 单位选择弹窗 -- >
< nbd-select v-model = "showUnitSelect" v-model:model="selectedUnit" :show-search="true" title="选择单位" :list="unitList" label-key="UnitName"
value -key = " UnitId " @confirm ="handleUnitConfirm" / >
< / view >
< / template >
< script setup >
import {
ref ,
onMounted ,
computed
} from 'vue'
import {
useUserStore
} from '@/store'
import {
storeToRefs
} from 'pinia'
import {
reqUnitByProjectIdUnitType
} from '@/api/base.js'
import {
reqPackagingInformationList
} from '@/api/hj.js'
const userStore = useUserStore ( )
const {
currentProject
} = storeToRefs ( userStore )
// ===== 搜索 =====
const keyword = ref ( '' )
// ===== 车次关联 true：已关联 false：未关联 =====
const hasTrainNumber = ref ( true )
const onTrainNumberChange = ( ) => {
resetAndLoad ( )
}
// ===== 单位选择 =====
const showUnitSelect = ref ( false )
const selectedUnit = ref ( {
UnitId : '' ,
UnitName : '全部单位'
} )
const unitList = ref ( [ ] )
const handleShowUnitSelect = async ( ) => {
// TODO: 请求单位列表
const res = await reqUnitByProjectIdUnitType ( currentProject . value . ProjectId )
unitList . value = [ { UnitId : '' , UnitName : '全部单位' } , ... ( res . data || [ ] ) ]
showUnitSelect . value = true
}
const handleUnitConfirm = ( item ) => {
selectedUnit . value = item
showUnitSelect . value = false
resetAndLoad ( )
}
// ===== 列表数据 =====
const listData = ref ( [ ] )
const loading = ref ( false )
const refreshing = ref ( false )
const hasMore = ref ( true )
const currentPage = ref ( 1 )
const pageSize = 20
// 加载数据
const fetchData = async ( isRefresh = false ) => {
if ( loading . value || ( ! isRefresh && ! hasMore . value ) ) return
loading . value = true
if ( isRefresh ) {
refreshing . value = true
}
try {
const res = await reqPackagingInformationList ( {
projectId : currentProject . value ? . ProjectId ,
pageIndex : currentPage . value ,
pageSize ,
packagingCode : keyword . value ,
unitId : selectedUnit . value ? . UnitId || '' ,
hasTrainNumber : hasTrainNumber . value
} )
const pageData = res . data ? . getDataList || [ ]
hasMore . value = pageData . length === pageSize
listData . value = [ ... listData . value , ... pageData ]
} catch ( error ) {
console . error ( '加载数据失败:' , error )
uni . showToast ( {
title : '加载失败，请重试' ,
icon : 'none'
} )
} finally {
loading . value = false
refreshing . value = false
}
}
// 重置并重新加载
const resetAndLoad = ( ) => {
currentPage . value = 1
hasMore . value = true
listData . value = [ ]
fetchData ( true )
}
// 下拉刷新
const handleRefresh = ( ) => {
resetAndLoad ( )
}
// 搜索
const handleSearch = ( ) => {
resetAndLoad ( )
}
// 加载更多
const loadMore = ( ) => {
if ( ! loading . value && hasMore . value ) {
currentPage . value ++
fetchData ( false )
}
}
// 到场状态
const getStatus = ( val ) => {
const map = {
'0' : '未到场' ,
'1' : '已发货' ,
'2' : '已到场'
}
return map [ String ( val ) ] || '--'
}
// 列表项点击
const handleItemClick = ( item ) => {
uni . navigateTo ( {
url : ` /pipe/packaging/detail?id= ${ item . PackagingManageId } `
} )
}
// 新增
const handleAdd = ( ) => {
uni . navigateTo ( {
url : '/pipe/packaging/add'
} )
}
// ===== 生命周期 =====
onMounted ( ( ) => {
fetchData ( true )
} )
< / script >
