优化
This commit is contained in:
@@ -393,7 +393,7 @@ onBeforeUnmount(clearPhotoUrls)
|
||||
</el-table>
|
||||
</section>
|
||||
<section v-if="selected.receipts?.some(item => item.unitType === 'PARCEL')" class="return-detail-section">
|
||||
<h3 class="section-heading-with-action"><span>包裹签收明细</span><span class="return-label-actions"><el-button type="primary" size="small" @click="printReturnLabel(parcelReceipts)">打印全部包裹唛头({{ parcelReceipts.length }} 个)</el-button><el-button text :aria-expanded="parcelDetailsExpanded" aria-controls="return-parcel-details" @click="parcelDetailsExpanded = !parcelDetailsExpanded">{{ parcelDetailsExpanded ? '收起明细' : '展开明细' }}</el-button></span></h3>
|
||||
<h3 class="section-heading-with-action return-parcel-heading"><span>包裹签收明细</span><span class="return-label-actions"><el-button type="primary" size="small" @click="printReturnLabel(parcelReceipts)">打印全部包裹唛头({{ parcelReceipts.length }} 个)</el-button><el-button text :aria-expanded="parcelDetailsExpanded" aria-controls="return-parcel-details" @click="parcelDetailsExpanded = !parcelDetailsExpanded">{{ parcelDetailsExpanded ? '收起明细' : '展开明细' }}</el-button></span></h3>
|
||||
<div v-show="parcelDetailsExpanded" id="return-parcel-details">
|
||||
<details v-for="receipt in parcelReceipts" :key="`${receipt.receiptNo}-items`" class="return-parcel-items" open>
|
||||
<summary class="return-parcel-items__head"><strong>包裹 {{ receipt.unitCode || receipt.trackingNo || receipt.receiptNo }}</strong><span class="return-parcel-items__summary">{{ receipt.receivedQuantity }} 件<ChevronDown :size="16" aria-hidden="true" /></span></summary>
|
||||
@@ -451,7 +451,7 @@ onBeforeUnmount(clearPhotoUrls)
|
||||
<el-empty v-else description="暂无退货打托照片" :image-size="64" />
|
||||
</section>
|
||||
<section v-if="selected.receipts?.length" class="return-detail-section">
|
||||
<h3 class="section-heading-with-action"><span>签收批次</span><el-button text :aria-expanded="receiptBatchesExpanded" aria-controls="return-receipt-batches" @click="receiptBatchesExpanded = !receiptBatchesExpanded">{{ receiptBatchesExpanded ? '收起批次' : '展开批次' }}</el-button></h3>
|
||||
<h3 class="section-heading-with-action"><span>签收批次</span><span class="return-label-actions"><el-button text :aria-expanded="receiptBatchesExpanded" aria-controls="return-receipt-batches" @click="receiptBatchesExpanded = !receiptBatchesExpanded">{{ receiptBatchesExpanded ? '收起批次' : '展开批次' }}</el-button></span></h3>
|
||||
<div v-show="receiptBatchesExpanded" id="return-receipt-batches">
|
||||
<DataTable :data="selected.receipts" :columns="receiptColumns" row-key="receiptNo" empty-text="暂无签收批次">
|
||||
<template #unitType="{ row }">{{ row.unitType === 'PALLET' ? '托盘' : row.unitType === 'BOX' ? '箱子' : '包裹' }}</template>
|
||||
@@ -519,6 +519,10 @@ onBeforeUnmount(clearPhotoUrls)
|
||||
.section-heading-with-action { display:flex; align-items:center; justify-content:space-between; gap:12px; }
|
||||
.return-label-actions { display:flex; align-items:center; gap:6px; }
|
||||
.return-label-actions :deep(.el-button) { height:28px; margin:0; padding:0 12px; border-radius:6px; font-size:12px; box-shadow:0 2px 5px rgba(33,103,232,.14); }
|
||||
.return-parcel-heading { display:grid; grid-template-columns:800px minmax(0,1fr); gap:0; }
|
||||
.return-parcel-heading .return-label-actions { display:grid; grid-template-columns:134px max-content; gap:6px; justify-content:start; }
|
||||
.return-parcel-heading .return-label-actions :deep(.el-button:first-child) { height:auto; min-height:28px; padding:4px 2px; white-space:normal; }
|
||||
.return-parcel-heading .return-label-actions :deep(.el-button:first-child > span) { line-height:16px; }
|
||||
.return-detail-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid #edf1f5; }
|
||||
.return-detail-grid div { display:flex; min-width:0; min-height:40px; align-items:center; gap:6px; padding:6px 10px; border-right:1px solid #edf1f5; border-bottom:1px solid #edf1f5; }
|
||||
.return-detail-grid span,.return-detail-remark span { flex:0 0 82px; color:#8490a1; font-size:12px; }
|
||||
@@ -539,8 +543,8 @@ onBeforeUnmount(clearPhotoUrls)
|
||||
.return-photo { min-width:0; overflow:hidden; padding:0; border:1px solid #dfe6ef; border-radius:6px; color:#526176; background:#fff; cursor:pointer; }
|
||||
.return-photo img,.return-photo>span { display:flex; width:100%; height:120px; align-items:center; justify-content:center; object-fit:cover; background:#f4f7fb; }
|
||||
.return-photo small { display:block; overflow:hidden; padding:7px; text-overflow:ellipsis; white-space:nowrap; }
|
||||
.return-parcel-items { margin:10px 16px 16px; overflow:hidden; border:1px solid #dfe6ef; border-radius:8px; background:#fbfcfe; }
|
||||
.return-parcel-items__head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; color:#26364f; background:#f3f7fc; border-bottom:1px solid #e7edf5; }
|
||||
.return-parcel-items { width:calc(100% - 32px); max-width:760px; box-sizing:border-box; margin:8px 16px 12px; overflow:hidden; border:1px solid #dfe6ef; border-radius:8px; background:#fbfcfe; }
|
||||
.return-parcel-items__head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px; color:#26364f; font-size:13px; background:#f3f7fc; border-bottom:1px solid #e7edf5; }
|
||||
.return-parcel-items__head span { color:#1764c0; font-size:12px; font-weight:600; }
|
||||
.return-parcel-items__head { cursor:pointer; list-style:none; }
|
||||
.return-parcel-items__head::-webkit-details-marker { display:none; }
|
||||
@@ -548,9 +552,10 @@ onBeforeUnmount(clearPhotoUrls)
|
||||
.return-parcel-items__summary { display:flex; align-items:center; gap:12px; }
|
||||
.return-parcel-items__summary svg { transition:transform .15s ease; }
|
||||
.return-parcel-items:not([open]) .return-parcel-items__summary svg { transform:rotate(-90deg); }
|
||||
.return-parcel-items__list { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:8px; padding:10px; }
|
||||
.return-parcel-item { display:grid; grid-template-columns:minmax(110px,1fr) minmax(100px,1.4fr) auto; align-items:center; gap:10px; min-height:38px; padding:7px 10px; border:1px solid #edf1f5; border-radius:6px; background:#fff; }
|
||||
.return-parcel-item__sku { color:#2c3c55; font-weight:600; }
|
||||
.return-parcel-items__list { display:grid; grid-template-columns:minmax(0,1fr); gap:6px; padding:8px; }
|
||||
/* Match the 300px table columns above, accounting for the parcel card's inset and 8px gaps. */
|
||||
.return-parcel-item { display:grid; grid-template-columns:minmax(0,272px) minmax(0,292px) minmax(0,1fr); align-items:center; gap:8px; min-height:32px; box-sizing:border-box; padding:5px 8px; border:1px solid #edf1f5; border-radius:6px; background:#fff; font-size:12px; }
|
||||
.return-parcel-item__sku { min-width:0; overflow-wrap:anywhere; color:#2c3c55; font-weight:600; }
|
||||
.return-parcel-item__name { overflow:hidden; color:#8490a1; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
|
||||
.return-parcel-item strong { color:#1764c0; white-space:nowrap; }
|
||||
@media (max-width: 760px) { .return-create-form { grid-template-columns:1fr; } }
|
||||
|
||||
Reference in New Issue
Block a user