@@ -24,6 +24,8 @@ const loadError = ref('')
const warehouses = ref < MerchantWarehouse [ ] > ( [ ] )
const warehouseError = ref ( '' )
const warehousesLoading = ref ( false )
function formatInventoryTime ( value ? : string ) { return value ? value . replace ( 'T' , ' ' ) . slice ( 0 , 19 ) : '—' }
function cartonStatusLabel ( value : string ) { return ( { AVAILABLE : '可用' , MERGED : '已合箱' , OUTBOUNDED : '已出库' } as Record < string , string > ) [ value ] || '—' }
function warehouseLabel ( warehouseId : string ) {
const warehouse = warehouses . value . find ( item => String ( item . id ) === String ( warehouseId ) )
return warehouse ? ` ${ warehouse . warehouseName } · ${ warehouse . warehouseCode } ` : '—'
@@ -141,7 +143,7 @@ onMounted(() => { void load(); void loadWarehouses() })
< section class = "return-inventory-page" >
< div class = "page-heading" > < div > < h2 > { { props . cartonOnly ? '退货箱号管理' : '退货库存管理' } } < / h2 > < p > { { props . cartonOnly ? '查询签收及合箱生成的退货箱号、箱规和箱内 SKU 明细。' : '库存数量以仓库 PDA 确认实收后的入账数量为准。' } } < / p > < / div > < / div >
< el-tabs v-if = "!props.cartonOnly" v-model="activeTab" @tab-change="changeTab"><el-tab-pane label="SKU 汇总库存" name="summary" /><el-tab-pane label="箱号明细" name="cartons" / > < / el-tabs >
< div class = "filter-bar" >
< div class = "filter-bar" : class = "{ 'carton-filters': activeTab === 'cartons' }" >
< el-select v-model = "query.overseasWarehouseId" clearable filterable placeholder="海外仓" :loading="warehousesLoading"><el-option v-for="warehouse in warehouses" :key="warehouse.id" :label="warehouseLabel(String(warehouse.id))" :value="String(warehouse.id)" / > < / el-select >
< el-input v-model = "query.skuCode" clearable placeholder="SKU" @keyup.enter="search" / >
< el-input v-if = "activeTab === 'cartons'" v-model="query.cartonMark" clearable placeholder="箱号 / 箱唛" @keyup.enter="search" / >
@@ -155,7 +157,7 @@ onMounted(() => { void load(); void loadWarehouses() })
< el -table -column label = "操作" width = "110" fixed = "left" > < template # default = "{ row }" > < el-button link type = "primary" @click ="openSkuCartons(row.skuCode)" > 查看箱号 < / el -button > < / template > < / el-table-column >
< el-table-column label = "海外仓" min -width = " 150 " > < template # default = "{ row }" > { { warehouseLabel ( row . overseasWarehouseId ) } } < / template > < / el-table-column > < el-table-column prop = "skuCode" label = "SKU" min -width = " 180 " / >
< el-table-column prop = "productNameZh" label = "中文品名" min -width = " 190 " show -overflow -tooltip / > < el-table-column prop = "availableQuantity" label = "可用库存" min -width = " 120 " align = "right" / >
< el-table-column prop = "cartonQuantity" label = "所在箱数" min -width = " 120 " align = "right" / > < el-table-column prop = "updatedAt" label = "库存更新时间" min -width = " 180 " / >
< el-table-column prop = "cartonQuantity" label = "所在箱数" min -width = " 120 " align = "right" / > < el-table-column prop = "updatedAt" label = "库存更新时间" min -width = " 180 " > < template # default = "{ row }" > < span class = "inventory-time" > { { formatInventoryTime ( row . updatedAt ) } } < / span > < / template > < / el-table-column >
< / el-table >
< el-table v-else-if = "props.cartonOnly" v-loading="loading" :data="cartonSummaryRows" row-key="cartonMark" :empty-text="loadError ? '库存加载失败,请核对权限或重试' : '暂无数据'" >
< el -table -column label = "操作" width = "150" fixed = "left" > < template # default = "{ row }" > < el-button link type = "primary" @click ="openCarton(row.cartonMark)" > 详情 < / el -button > < el-button link type = "primary" @click ="printLabel(row.cartonMark)" > < Printer :size = "14" / > 箱唛 < / el-button > < / template > < / el-table-column >
@@ -167,7 +169,7 @@ onMounted(() => { void load(); void loadWarehouses() })
< el-table-column prop = "sourceBatchNo" label = "签收批次" min -width = " 190 " / >
< el-table-column label = "箱规" min -width = " 160 " > < template # default = "{ row }" > { { row . length && row . width && row . height ? ` ${ row . length } × ${ row . width } × ${ row . height } cm ` : '—' } } < / template > < / el-table-column >
< el-table-column label = "重量" min -width = " 100 " > < template # default = "{ row }" > { { row . weight ? ` ${ row . weight } kg ` : '—' } } < / template > < / el-table-column >
< el-table-column prop = "createdAt" label = "箱号生成时间" min -width = " 175 " / >
< el-table-column prop = "createdAt" label = "箱号生成时间" min -width = " 180 " > < template # default = "{ row }" > < span class = "inventory-time" > { { formatInventoryTime ( row . createdAt ) } } < / span > < / template > < / el-table-column >
< / el-table >
< el-table v-else v-loading = "loading" :data="cartonRows" :empty-text="loadError ? '库存加载失败,请核对权限或重试' : '暂无数据'" >
< el -table -column label = "操作" width = "150" fixed = "left" > < template # default = "{ row }" > < el-button link type = "primary" @click ="openCarton(row.cartonMark)" > 详情 < / el -button > < el-button link type = "primary" @click ="printLabel(row.cartonMark)" > < Printer :size = "14" / > 箱唛 < / el-button > < / template > < / el-table-column >
@@ -175,11 +177,11 @@ onMounted(() => { void load(); void loadWarehouses() })
< el-table-column label = "海外仓" min -width = " 150 " > < template # default = "{ row }" > { { warehouseLabel ( row . overseasWarehouseId ) } } < / template > < / el-table-column > < el-table-column prop = "skuCode" label = "SKU" min -width = " 150 " / >
< el-table-column prop = "productNameZh" label = "中文品名" min -width = " 170 " show -overflow -tooltip / > < el-table-column prop = "quantity" label = "本箱 SKU 数量" min -width = " 135 " align = "right" / >
< el-table-column prop = "cartonSkuTypes" label = "箱内 SKU 种类" min -width = " 130 " align = "right" / > < el-table-column prop = "cartonTotalQuantity" label = "箱内总件数" min -width = " 115 " align = "right" / >
< el-table-column prop = "status" label = "箱状态" min -width = " 100 " / > < el-table-column prop = "sourceBatchNo" label = "签收批次" min -width = " 190 " / > < el-table-column prop = "receivedAt" label = "签收 时间" min -width = " 175 " / >
< el-table-column prop = "status" label = "箱状态" min -width = " 100 " > < template # default = "{ row }" > { { cartonStatusLabel ( row . status ) } } < / template > < / el-table-column > < el-table-column prop = "sourceBatchNo" label = "签收批次" min -width = " 190 " / > < el-table-column prop = "receivedAt" label = "箱号生成 时间" min -width = " 180 " > < template # default = "{ row }" > < span class = "inventory-time" > { { formatInventoryTime ( row . receivedAt ) } } < / span > < / template > < / el-table-column >
< / el-table >
< el-pagination v -model :current-page = "query.page" v -model :page-size = "query.size" :total = "total" layout = "total, prev, pager, next" @ current -change = " load " / >
< el-drawer v-model = "showCartonDetail" title="退货箱明细" size="680px"><template v-if="cartonDetail" >
< el -descriptions :column = "2" border > < el-descriptions-item label = "箱号" > { { cartonDetail . cartonMark } } < / el-descriptions-item > < el-descriptions-item label = "海外仓" > { { warehouseLabel ( cartonDetail . overseasWarehouseId ) } } < / el-descriptions-item > < el-descriptions-item label = "来源退货单" > { { cartonDetail . sourceReturnNo || '—' } } < / el-descriptions-item > < el-descriptions-item label = "签收批次" > { { cartonDetail . sourceBatchNo || '—' } } < / el-descriptions-item > < el-descriptions-item label = "状态" > { { cartonDetail . status } } < / el-descriptions-item > < el-descriptions-item label = "SKU 种类" > { { cartonDetail . skuTypes } } < / el-descriptions-item > < el-descriptions-item label = "箱内总件数" > { { cartonDetail . totalQuantity } } < / el-descriptions-item > < el-descriptions-item label = "箱规" > { { cartonDetail . length && cartonDetail . width && cartonDetail . height ? ` ${ cartonDetail . length } × ${ cartonDetail . width } × ${ cartonDetail . height } cm ` : '—' } } < / el-descriptions-item > < el-descriptions-item label = "重量" > { { cartonDetail . weight ? ` ${ cartonDetail . weight } kg ` : '—' } } < / el-descriptions-item > < / el-descriptions >
< el -descriptions :column = "2" border > < el-descriptions-item label = "箱号" > { { cartonDetail . cartonMark } } < / el-descriptions-item > < el-descriptions-item label = "海外仓" > { { warehouseLabel ( cartonDetail . overseasWarehouseId ) } } < / el-descriptions-item > < el-descriptions-item label = "来源退货单" > { { cartonDetail . sourceReturnNo || '—' } } < / el-descriptions-item > < el-descriptions-item label = "签收批次" > { { cartonDetail . sourceBatchNo || '—' } } < / el-descriptions-item > < el-descriptions-item label = "状态" > { { cartonStatusLabel ( cartonDetail . status ) } } < / el-descriptions-item > < el-descriptions-item label = "SKU 种类" > { { cartonDetail . skuTypes } } < / el-descriptions-item > < el-descriptions-item label = "箱内总件数" > { { cartonDetail . totalQuantity } } < / el-descriptions-item > < el-descriptions-item label = "箱规" > { { cartonDetail . length && cartonDetail . width && cartonDetail . height ? ` ${ cartonDetail . length } × ${ cartonDetail . width } × ${ cartonDetail . height } cm ` : '—' } } < / el-descriptions-item > < el-descriptions-item label = "重量" > { { cartonDetail . weight ? ` ${ cartonDetail . weight } kg ` : '—' } } < / el-descriptions-item > < / el-descriptions >
< div class = "drawer-heading" > < h3 > 箱内 SKU < / h3 > < el-button type = "primary" @click ="printLabel(cartonDetail.cartonMark)" > < Printer :size = "16" / > 打印箱唛 < / el-button > < / div >
< el-table :data = "cartonDetail.items" size = "small" > < el-table-column prop = "skuCode" label = "SKU" min -width = " 170 " / > < el-table-column prop = "productNameZh" label = "中文品名" min -width = " 180 " / > < el-table-column prop = "quantity" label = "数量" min -width = " 100 " align = "right" / > < / el-table >
< / template > < / el-drawer >
@@ -187,6 +189,6 @@ onMounted(() => { void load(); void loadWarehouses() })
< / template >
< style scoped >
. return - inventory - page { padding : 20 px ; } . page - heading { margin - bottom : 14 px ; } h2 { margin : 0 ; font - size : 22 px ; } p { margin : 6 px 0 0 ; color : var ( -- el - text - color - secondary ) ; } . filter - bar { display : grid ; grid - template - columns : repeat ( 3 , minmax ( 150 px , 1 fr ) ) auto ; gap : 10 px ; margin - bottom : 14 px ; } . el - pagination { margin - top : 16 px ; justify - content : flex - end ; } . drawer - heading { display : flex ; align - items : center ; justify - content : space - between ; margin : 24 px 0 12 px ; } . drawer - heading h3 { margin : 0 ; font - size : 16 px ; }
@ media ( max - width : 760 px ) { . return - inventory - page { padding : 12 px ; } . filter - bar { grid - template - columns : 1 fr 1 fr ; } }
. return - inventory - page { padding : 20 px ; } . page - heading { margin - bottom : 14 px ; } h2 { margin : 0 ; font - size : 22 px ; } p { margin : 6 px 0 0 ; color : var ( -- el - text - color - secondary ) ; } . filter - bar { display : grid ; grid - template - columns : repeat ( 2 , minmax ( 180 px , 320 px ) ) auto ; justify - content : start ; gap : 10 px ; margin - bottom : 14 px ; } . filter - bar . carton - filters { grid - template - columns : repeat ( 4 , minmax ( 150 px , 1 fr ) ) 130 px auto ; } . filter - bar > * { min - width : 0 ; } . inventory - time { white - space : nowrap ; } . el - pagination { margin - top : 16 px ; justify - content : flex - end ; } . drawer - heading { display : flex ; align - items : center ; justify - content : space - between ; margin : 24 px 0 12 px ; } . drawer - heading h3 { margin : 0 ; font - size : 16 px ; }
@ media ( max - width : 760 px ) { . return - inventory - page { padding : 12 px ; } . filter - bar , . filter - bar . carton - filters { grid - template - columns : 1 fr 1 fr ; } }
< / style >