feat: add pallet label printing

This commit is contained in:
2026-09-09 17:27:00 +08:00
parent 8f6d4fc03e
commit a47a7e9767
6 changed files with 137 additions and 2 deletions
@@ -6,6 +6,7 @@ import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.v
import DetailPageLayout from '@/shared/components/DetailPageLayout.vue'
import LoadErrorState from '@/shared/components/LoadErrorState.vue'
import StatusBadge from '@/shared/components/StatusBadge.vue'
import PalletLabelPrintDialog from './PalletLabelPrintDialog.vue'
import { loadingListStatusLabel } from '../status'
import type { ApiErrorDetails } from '@/shared/api/http'
import type { LoadingDetail, LoadingHistory, LoadingItem, LoadingListMode, LoadingListSummary, PreloadSummary } from '../api/platformLoadingLists'
@@ -151,6 +152,7 @@ function formatNumber(value?: number | null, digits = 3) {
<p>{{ mode === 'preload' ? '核对运输信息、确认预装并维护逐条仓库备注' : '查看已完成装柜明细和柜次费用' }}</p>
</div>
<div v-if="detail && summary" class="detail-page-header__actions">
<PalletLabelPrintDialog v-if="summary.warehouseId" :plan-id="summary.planId" :warehouse-id="summary.warehouseId" :disabled="!summary.containerNo || summary.status === 'EDITING'" />
<template v-if="canEditItemRemark">
<el-button v-if="canEditTransport" @click="emit('edit')"><Pencil :size="16" />{{ summary.containerNo ? '纠正集装箱号 / 航次' : '补录集装箱号 / 航次' }}</el-button>
<el-button type="primary" :loading="confirmSaving" :disabled="!preloadSummary?.readiness.canConfirm" @click="emit('confirmPreload')"><Check :size="16" />确认预装</el-button>
@@ -0,0 +1,65 @@
<script setup lang="ts">
import { computed, ref } from 'vue'
import { Printer } from '@lucide/vue'
import { ElMessage } from 'element-plus'
import AppDialog from '@/shared/components/AppDialog.vue'
import LoadErrorState from '@/shared/components/LoadErrorState.vue'
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
import { preparePalletLabels, printPalletLabels, type PalletLabelManifest } from '../api/platformLoadingLists'
const props = defineProps<{ planId: string; warehouseId: string; disabled?: boolean }>()
const open = ref(false)
const loading = ref(false)
const printing = ref(false)
const error = ref<ApiErrorDetails | null>(null)
const manifest = ref<PalletLabelManifest | null>(null)
const scope = ref<'ALL' | 'WAREHOUSE'>('ALL')
const warehouseCode = ref('')
const count = ref(1)
const selectedGroup = computed(() => manifest.value?.groups.find((group) => group.destinationWarehouseCode === warehouseCode.value) || null)
const disabledConfirm = computed(() => !manifest.value?.totalCount || (scope.value === 'WAREHOUSE' && (!selectedGroup.value || count.value < 1 || count.value > selectedGroup.value.totalCount)))
async function show() {
open.value = true; loading.value = true; error.value = null; manifest.value = null
try {
manifest.value = await preparePalletLabels(props.planId, props.warehouseId)
warehouseCode.value = manifest.value.groups[0]?.destinationWarehouseCode || ''
count.value = manifest.value.groups[0]?.totalCount || 1
} catch (cause) { error.value = getApiErrorDetails(cause, '托盘码清单加载失败') }
finally { loading.value = false }
}
function onWarehouseChange() { count.value = selectedGroup.value?.totalCount || 1 }
async function print() {
if (!manifest.value) return
printing.value = true; error.value = null
try {
const blob = await printPalletLabels(props.planId, props.warehouseId,
scope.value === 'WAREHOUSE' ? warehouseCode.value : undefined,
scope.value === 'WAREHOUSE' ? count.value : undefined)
const url = URL.createObjectURL(blob); const anchor = document.createElement('a')
anchor.href = url; anchor.download = `${manifest.value.containerNo}-托盘码.pdf`; anchor.click(); URL.revokeObjectURL(url)
ElMessage.success(`已生成 ${scope.value === 'ALL' ? manifest.value.totalCount : count.value} 张托盘码`)
} catch (cause) { error.value = getApiErrorDetails(cause, '托盘码打印失败') }
finally { printing.value = false }
}
</script>
<template>
<el-button :disabled="disabled" @click="show"><Printer :size="16" />打印托盘码</el-button>
<AppDialog v-model="open" title="散货托盘码" width="min(760px, calc(100vw - 28px))" confirm-text="生成 PDF" :loading="loading" :confirm-loading="printing" :confirm-disabled="disabledConfirm" @confirm="print">
<LoadErrorState v-if="error" compact title="托盘码操作失败" :message="error.message" :show-retry="false" />
<template v-if="manifest">
<el-alert type="info" :closable="false" :title="`编号规则:${manifest.containerNo}-FBA仓编码-三位序号;一件代发托盘不在此清单。`" />
<el-radio-group v-model="scope" class="print-scope"><el-radio value="ALL">全部打印({{ manifest.totalCount }} 张)</el-radio><el-radio value="WAREHOUSE">按 FBA 仓补打</el-radio></el-radio-group>
<div v-if="scope === 'WAREHOUSE'" class="print-options"><el-select v-model="warehouseCode" placeholder="选择 FBA 仓" @change="onWarehouseChange"><el-option v-for="group in manifest.groups" :key="group.destinationWarehouseCode" :label="`${group.destinationWarehouseCode} · ${group.totalCount} 张`" :value="group.destinationWarehouseCode" /></el-select><el-input-number v-model="count" :min="1" :max="selectedGroup?.totalCount || 1" /><span>张(从该仓第 1 张起)</span></div>
<el-table :data="manifest.groups" border max-height="300"><el-table-column label="FBA 仓编码" prop="destinationWarehouseCode" width="170" /><el-table-column label="FBA 仓名称" prop="destinationWarehouseName" min-width="180"><template #default="{ row }">{{ row.destinationWarehouseName || '—' }}</template></el-table-column><el-table-column label="托盘数" prop="totalCount" width="100" align="right" /><el-table-column label="编号范围" min-width="230"><template #default="{ row }">{{ row.labels[0]?.palletCode || '—' }}<template v-if="row.labels.length > 1"> ~ {{ row.labels[row.labels.length - 1]?.palletCode }}</template></template></el-table-column></el-table>
</template>
</AppDialog>
</template>
<style scoped>
.print-scope { display:flex; margin:18px 0 12px; }
.print-options { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.print-options .el-select { width:240px; }
</style>