51 lines
8.5 KiB
Vue
51 lines
8.5 KiB
Vue
<script setup lang="ts">
|
||
import '@/styles/adminDensity.css'
|
||
import { computed } from 'vue'
|
||
import type { ProcurementCommand } from '../api/procurementCommands'
|
||
import type { PlatformProcurement } from '../procurementTypes'
|
||
import { newCarton, shippedCartons, type PhysicalForm } from '../procurementPhysicalForm'
|
||
const props = defineProps<{ command: ProcurementCommand; detail: PlatformProcurement }>()
|
||
const form = defineModel<PhysicalForm>({ required: true })
|
||
const receipts = computed(() => props.detail.physical.receipts.filter(row => row.active && (props.command === 'receipts/correct' || (row.leg === form.value.leg && row.sourceCartonId === (form.value.leg === 'DOMESTIC' ? form.value.sourceCartonId : null)))))
|
||
const sources = computed(() => props.detail.physical.receipts.filter(row => row.active && row.leg === 'OVERSEAS' && row.goodQuantity > 0))
|
||
const domesticBoxes = computed(() => shippedCartons(props.detail))
|
||
const showReceipt = computed(() => ['overseas-receipts', 'domestic-receipts', 'receipts/correct'].includes(props.command))
|
||
function selectReceipt(id: string) {
|
||
if (props.command !== 'receipts/correct') return
|
||
const row = props.detail.physical.receipts.find(item => item.id === id && item.active)
|
||
if (row) Object.assign(form.value, { leg: row.leg, sourceCartonId: row.sourceCartonId || '', goodQuantity: row.goodQuantity, damagedQuantity: row.damagedQuantity, extraQuantity: row.extraQuantity, receivedAt: row.receivedAt })
|
||
}
|
||
const differenceNames = { SHORTAGE: '短少', DAMAGED: '破损', EXTRA: '多货' }
|
||
</script>
|
||
<template>
|
||
<div class="admin-density">
|
||
<el-alert v-if="command.endsWith('/complete')" title="仅在全部到齐或差异已有明确处置后确认收货完成；登记实收不会自动完成收货。" type="info" :closable="false" />
|
||
<el-alert v-if="command === 'packing/confirm'" :title="`确认第 ${detail.physical.packingVersion || '—'} 版清单。须完成海外收货、样品货款及费用来源关联。`" type="info" :closable="false" />
|
||
<el-alert v-if="command === 'packing/withdraw'" title="撤回未交寄清单后，需要重新确认装箱并核对后续面单和费用。" type="warning" :closable="false" />
|
||
<el-form-item v-if="command === 'dispositions'" label="差异发生段" required><el-radio-group v-model="form.leg" @change="form.sourceCartonId = ''; form.receiptId = ''"><el-radio value="OVERSEAS">海外收货</el-radio><el-radio value="DOMESTIC">国内收货</el-radio></el-radio-group></el-form-item>
|
||
<el-form-item v-if="command === 'receipts/correct'" label="待更正实收" required><el-select v-model="form.receiptId" placeholder="选择有效原实收记录" @change="selectReceipt"><el-option v-for="row in receipts" :key="row.id" :value="row.id" :label="`${row.receiptNo} · ${row.leg === 'OVERSEAS' ? '海外' : '国内'}`" /></el-select><span>保留原记录，更正不能改变运输段或来源箱；已交寄后只能追加更正说明。</span></el-form-item>
|
||
<el-form-item v-if="(showReceipt || command === 'dispositions') && form.leg === 'DOMESTIC'" label="国际交寄原箱" required><el-select v-model="form.sourceCartonId" :disabled="command === 'receipts/correct'" placeholder="选择本单已国际交寄的箱" @change="form.receiptId = ''"><el-option v-for="box in domesticBoxes" :key="box.id" :value="box.id" :label="`${box.cartonNo} · ${box.quantity} 件`" /></el-select></el-form-item>
|
||
<template v-if="showReceipt"><div class="physical-grid"><el-form-item label="合格件数" required><el-input-number v-model="form.goodQuantity" :min="0" :precision="0" controls-position="right" placeholder="本次合格件数" /></el-form-item><el-form-item label="破损件数" required><el-input-number v-model="form.damagedQuantity" :min="0" :precision="0" controls-position="right" placeholder="本次破损件数" /></el-form-item><el-form-item label="多货件数" required><el-input-number v-model="form.extraQuantity" :min="0" :precision="0" controls-position="right" placeholder="本次多到件数" /></el-form-item></div><el-form-item label="实际收货时间" required><el-date-picker v-model="form.receivedAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" /></el-form-item></template>
|
||
<template v-if="command === 'dispositions'"><el-form-item label="差异及处置" required><el-select v-model="form.kind" placeholder="选择差异处理方式" @change="form.receiptId = ''; form.quantity = undefined"><el-option value="SHORTAGE" label="短少 · 客户接受短少" /><el-option value="DAMAGED" label="破损 · 处理破损货物" /><el-option value="EXTRA" label="多货 · 退回多到货物" /></el-select></el-form-item><el-form-item v-if="form.kind !== 'SHORTAGE'" label="对应实收" required><el-select v-model="form.receiptId" placeholder="选择差异来源实收"><el-option v-for="row in receipts" :key="row.id" :value="row.id" :label="`${row.receiptNo} · 破损 ${row.damagedQuantity} / 多货 ${row.extraQuantity}`" /></el-select></el-form-item><el-form-item label="本次处置件数" required><el-input-number v-model="form.quantity" :min="1" :precision="0" controls-position="right" placeholder="填写已完成处置的件数" /></el-form-item></template>
|
||
<el-form-item v-if="command === 'dispositions/revoke'" label="撤销差异处置" required><el-select v-model="form.dispositionId" placeholder="选择有效处置记录"><el-option v-for="row in detail.physical.dispositions.filter(item => item.active)" :key="row.id" :value="row.id" :label="`${row.leg === 'OVERSEAS' ? '海外' : '国内'} · ${differenceNames[row.kind]} ${row.quantity} 件 · ${row.reason}`" /></el-select></el-form-item>
|
||
<template v-if="command === 'packing'">
|
||
<el-alert title="每箱填写箱规、毛重及来源实收件数。草稿允许暂未分配完，确认时必须覆盖全部合格实收。" type="info" :closable="false" />
|
||
<section v-for="(box, index) in form.cartons" :key="index" class="packing-box">
|
||
<div class="packing-heading"><strong>第 {{ index + 1 }} 箱</strong><el-button class="density-action" data-tone="danger" @click="form.cartons.splice(index, 1)">移除本箱</el-button></div>
|
||
<div class="packing-grid"><el-form-item label="箱号" required><el-input v-model="box.cartonNo" maxlength="64" placeholder="填写本单唯一箱号" /></el-form-item><el-form-item label="长（cm）" required><el-input v-model="box.lengthCm" placeholder="最多两位小数" /></el-form-item><el-form-item label="宽（cm）" required><el-input v-model="box.widthCm" placeholder="最多两位小数" /></el-form-item><el-form-item label="高（cm）" required><el-input v-model="box.heightCm" placeholder="最多两位小数" /></el-form-item><el-form-item label="毛重（kg）" required><el-input v-model="box.grossWeightKg" placeholder="最多三位小数" /></el-form-item></div>
|
||
<div v-for="(source, sourceIndex) in box.sources" :key="sourceIndex" class="packing-source"><el-form-item label="海外实收来源" required><el-select v-model="source.receiptId" placeholder="选择有效合格实收"><el-option v-for="receipt in sources" :key="receipt.id" :value="receipt.id" :label="`${receipt.receiptNo} · 合格 ${receipt.goodQuantity} 件`" /></el-select></el-form-item><el-form-item label="本箱分配件数" required><el-input-number v-model="source.quantity" :min="1" :precision="0" placeholder="分配到此箱的件数" controls-position="right" /></el-form-item><el-button class="density-action" data-tone="danger" @click="box.sources.splice(sourceIndex, 1)">移除来源</el-button></div>
|
||
<el-button class="density-action" @click="box.sources.push({ receiptId: '', quantity: undefined })">增加来源</el-button>
|
||
</section><el-button class="density-action" data-tone="primary" @click="form.cartons.push(newCarton())">增加装货箱</el-button>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
<style scoped>
|
||
.physical-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--admin-space-3); }
|
||
.packing-grid { display: grid; grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); gap: var(--admin-space-3); }
|
||
.packing-source { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: var(--admin-space-3); align-items: center; }
|
||
.packing-box { padding-block: var(--admin-space-4); border-bottom: 1px solid var(--cc-border); }
|
||
.packing-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--admin-space-3); }
|
||
:deep(.el-select), :deep(.el-input-number) { width: 100%; }
|
||
@media (max-width: 760px) { .physical-grid, .packing-grid { grid-template-columns: 1fr; } .packing-source { grid-template-columns: 1fr; } }
|
||
</style>
|