style(admin): unify dialog layouts and dense readonly presentation

src/modules/container-loading/pages/SmartLoadingWorkbenchView.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import InlineHelp from '@/shared/components/InlineHelp.vue'
 import SmartLoadingCandidateInbounds from '../components/SmartLoadingCandidateInbounds.vue'
+import { containerDialogTitle } from '../containerDialogTitle'
 import '@/styles/adminDensity.css'
 import { computed, onMounted, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -38,6 +40,12 @@ const noDraft = ref(false)
 const editingQuantityId = ref('')
 const assignOpen = ref(false)
 const selectedCandidate = ref<SmartLoadingCandidateRow | null>(null)
+const assignmentTitle = computed(() => {
+  const candidate = selectedCandidate.value
+  const action = candidate?.unitType === 'SEALED_PALLET' ? '整托加入当前柜次' : candidate?.coLoadGroupId ? '整组加入当前柜次' : '按入仓码分配箱数'
+  const code = candidate?.palletNo?.trim() || candidate?.groupNo?.trim() || candidate?.inboundCode?.trim()
+  return code ? `${action} · ${code}` : action
+})
 const assignForm = reactive({ packageCount: 1 })
 const quantityDrafts = reactive<Record<string, number>>({})
 const planGroupsByInboundId = ref(new Map<string, SmartLoadingPlanCoLoadGroup>())
@@ -307,7 +315,7 @@ async function remove(source: object) {
   const message = row.coLoadGroup
     ? `确认整组移除 ${row.coLoadGroup.groupNo}（${groupMemberLabel(row.coLoadGroup)}、${row.packageCount} 箱）吗？组内所有入仓片段将联动移除。`
     : `确认从计划移除入仓码“${item.inboundCode || '—'}”的 ${item.packageCount} 箱吗？`
-  await ElMessageBox.confirm(message, row.coLoadGroup ? '移除同柜不可拆组' : '移除装柜明细', { customClass: 'admin-density-confirm', type: 'warning', confirmButtonText: row.coLoadGroup ? '移除整组' : '移除', cancelButtonText: '取消' }).catch(() => false).then(async (confirmed) => {
+  await ElMessageBox.confirm(message, containerDialogTitle(row.coLoadGroup ? '移除同柜不可拆组' : '移除装柜明细', container.value), { customClass: 'admin-density-confirm', type: 'warning', confirmButtonText: row.coLoadGroup ? '移除整组' : '移除', cancelButtonText: '取消' }).catch(() => false).then(async (confirmed) => {
     if (!confirmed || !plan.value) return
     mutating.value = true
     mutationError.value = null
@@ -386,7 +394,7 @@ onMounted(load)
         <el-alert v-if="plan.status === 'LOADING' && plan.canEdit" type="warning" :closable="false" show-icon title="已下发 PDA，仍可维护未完成的装柜明细" description="新增、增加或移除未拣明细会刷新 PDA 明细与版本；PDA 端需要刷新后继续操作。" />
         <el-alert v-else-if="!plan.canEdit" :type="plan.finalCompletionStatus === 'COMPLETED' ? 'success' : 'info'" :closable="false" show-icon :title="plan.finalCompletionStatus === 'IN_PROGRESS' ? '正在最终确认，装柜方案暂时只读' : plan.finalCompletionStatus === 'COMPLETED' ? '装柜已完成，方案永久只读' : '当前装柜方案只读'" :description="plan.blockedReason || '请刷新计划获取最新作业状态。'" />
         <DataTable :data="displayedPlanItems" :columns="itemColumns" :loading="loading || mutating" stripe preference-key="smart-loading-items" column-settings-mode="hide" empty-text="暂无已分配货物">
-          <template #toolbar-start><div><h2>{{ displayContainerNo(container) }} 装柜方案</h2><p>智能建议必须经人工核对。</p></div></template>
+          <template #toolbar-start><div><h2>{{ displayContainerNo(container) }} 装柜方案 <InlineHelp title="装柜说明"><p>智能建议必须经人工核对。</p><p>系统基于装柜仓库、物流渠道、可用箱数及 150% 容量上限校验。</p></InlineHelp></h2></div></template>
           <template #actions="{ row }"><div class="row-actions density-actions"><el-button data-tone="danger" class="density-action" v-if="canDelete && editable && row.canRemove" size="small" type="danger" plain @click="remove(row)">删除</el-button></div></template>
           <template #order="{ row }"><SmartLoadingCandidateInbounds :members="row.palletMembers" :sealed-pallet="row.unitType === 'SEALED_PALLET'" :fallback-inbound-code="row.inboundCode" /></template>
           <template #customerName="{ row }"><LineClampText :content="row.customerName" /></template>
@@ -396,7 +404,7 @@ onMounted(load)
           <template #volume="{ row }">{{ formatNumber(Number(row.volumeCbm || 0)) }} m³</template><template #weight="{ row }">{{ formatNumber(Number(row.grossWeightKg || 0),1) }} kg</template>
         </DataTable>
         <DataTable :data="displayedCandidates" :columns="candidateColumns" :loading="loading || mutating" stripe preference-key="smart-loading-candidates" column-settings-mode="hide" empty-text="当前仓库暂无可装柜货物">
-          <template #toolbar-start><div><h2>候选货物</h2><p>系统基于装柜仓库、物流渠道、可用箱数及 150% 容量上限校验。</p></div></template>
+          <template #toolbar-start><div><h2>候选货物</h2></div></template>
           <template #actions="{ row }"><el-button data-tone="primary" class="density-action" v-if="canAssign && assignable" size="small" type="primary" plain :disabled="candidateBlocked(row as SmartLoadingCandidateRow)" @click="openAssign(row)">加入</el-button></template>
           <template #candidateInbounds="{ row }"><SmartLoadingCandidateInbounds :candidate="row as SmartLoadingCandidate" /></template>
           <template #customerName="{ row }"><LineClampText :content="row.customerName" /></template>
@@ -408,7 +416,35 @@ onMounted(load)
       </template>
       </template>
     </template>
-    <AppDialog class="admin-density-dialog" v-model="assignOpen" :title="selectedCandidate?.unitType === 'SEALED_PALLET' ? '整托加入当前柜次' : selectedCandidate?.coLoadGroupId ? '整组加入当前柜次' : '按入仓码分配箱数'" :confirm-loading="mutating" :confirm-disabled="Boolean(selectedCandidate?.blockReason || selectedCandidate?.locked)" :confirm-text="selectedCandidate?.unitType === 'SEALED_PALLET' ? '确认整托分配' : selectedCandidate?.coLoadGroupId ? '确认整组分配' : '确认分配'" @confirm="assign"><div v-if="selectedCandidate" class="assign-dialog"><p><strong>{{ selectedCandidate.palletNo || selectedCandidate.groupNo || selectedCandidate.inboundCode || '入仓码暂缺' }}</strong></p><template v-if="selectedCandidate.coLoadGroupId"><p>组内 {{ selectedCandidate.memberOrderCount }} 票、{{ selectedCandidate.inboundFragmentCount }} 个入仓片段，共 {{ selectedCandidate.groupTotalBoxes }} 箱</p><p v-for="summary in selectedCandidate.memberOrderSummaries" :key="summary">{{ summary }}</p><el-alert :title="selectedCandidate.blockReason || '同柜且不可拆：全部订单及其入仓片段按完整箱数一次加入，不能部分输入或单独移除。'" :type="selectedCandidate.blockReason ? 'error' : 'warning'" :closable="false" /></template><template v-else-if="selectedCandidate.unitType === 'SEALED_PALLET'"><p>托盘号 {{ selectedCandidate.palletNo || '—' }} · 整托 {{ selectedCandidate.availablePackageCount }} 箱</p><SmartLoadingCandidateInbounds :candidate="selectedCandidate" /><el-alert title="该封托托盘将作为一个不可拆分单元整托加入；装柜阶段复用此托盘，不会重新生成工作托盘。" type="warning" :closable="false" /></template><template v-else><p>{{ selectedCandidate.goodsSummary || '货物摘要暂缺' }} · 可用 {{ selectedCandidate.availablePackageCount }} 箱</p><el-form class="density-form" label-position="top"><el-form-item label="本次计划装柜箱数" required><el-input-number v-model="assignForm.packageCount" :min="1" :max="selectedCandidate.availablePackageCount" :step="1" controls-position="right" placeholder="请输入本次分配箱数" /></el-form-item></el-form><el-alert :title="explainCandidate(selectedCandidate)" type="info" :closable="false" /><small>只记录数量，具体上柜箱号未核验。</small></template></div></AppDialog>
+    <AppDialog class="admin-density-dialog" v-model="assignOpen" :title="assignmentTitle" width="min(780px, calc(100vw - 28px))" :fullscreenable="Boolean(selectedCandidate?.coLoadGroupId || selectedCandidate?.unitType === 'SEALED_PALLET')" :confirm-loading="mutating" :confirm-disabled="Boolean(selectedCandidate?.blockReason || selectedCandidate?.locked)" :confirm-text="selectedCandidate?.unitType === 'SEALED_PALLET' ? '确认整托分配' : selectedCandidate?.coLoadGroupId ? '确认整组分配' : '确认分配'" @confirm="assign">
+      <div v-if="selectedCandidate" class="density-dialog-sections">
+        <section class="density-dialog-section" data-tone="work">
+          <el-form class="density-form">
+            <table class="density-table density-table--editable assignment-table" aria-label="加入当前柜次"><tbody>
+              <tr><th>来源编号</th><td>{{ selectedCandidate.palletNo || selectedCandidate.groupNo || selectedCandidate.inboundCode || '入仓码暂缺' }}</td><th>当前柜次</th><td>{{ container?.cabinetNo || displayContainerNo(container) }}</td></tr>
+              <tr v-if="selectedCandidate.coLoadGroupId"><th>整组范围</th><td colspan="3">组内 {{ selectedCandidate.memberOrderCount }} 票、{{ selectedCandidate.inboundFragmentCount }} 个入仓片段，共 {{ selectedCandidate.groupTotalBoxes }} 箱</td></tr>
+              <tr v-else-if="selectedCandidate.unitType === 'SEALED_PALLET'"><th>整托箱数</th><td colspan="3">整托 {{ selectedCandidate.availablePackageCount }} 箱</td></tr>
+              <template v-else>
+                <tr><th>货物摘要</th><td colspan="3"><LineClampText :content="selectedCandidate.goodsSummary || '货物摘要暂缺'" /></td></tr>
+                <tr><th>可用箱数</th><td>{{ selectedCandidate.availablePackageCount }} 箱</td><td colspan="2"><el-form-item label="本次计划装柜箱数" label-position="left" label-width="140px" required><el-input-number v-model="assignForm.packageCount" :min="1" :max="selectedCandidate.availablePackageCount" :step="1" controls-position="right" placeholder="请输入本次分配箱数" /></el-form-item></td></tr>
+              </template>
+            </tbody></table>
+          </el-form>
+        </section>
+        <template v-if="selectedCandidate.coLoadGroupId">
+          <section class="density-dialog-section" data-tone="source"><table class="density-table" aria-label="同柜组成员"><thead><tr><th>组内订单及入仓片段</th></tr></thead><tbody><tr v-for="summary in selectedCandidate.memberOrderSummaries" :key="summary"><td>{{ summary }}</td></tr></tbody></table></section>
+          <el-alert :title="selectedCandidate.blockReason || '同柜且不可拆：全部订单及其入仓片段按完整箱数一次加入，不能部分输入或单独移除。'" :type="selectedCandidate.blockReason ? 'error' : 'warning'" :closable="false" />
+        </template>
+        <template v-else-if="selectedCandidate.unitType === 'SEALED_PALLET'">
+          <section class="density-dialog-section" data-tone="source"><h3 class="density-dialog-section__title">托盘入仓组成</h3><SmartLoadingCandidateInbounds :candidate="selectedCandidate" /></section>
+          <el-alert title="该封托托盘将作为一个不可拆分单元整托加入；装柜阶段复用此托盘，不会重新生成工作托盘。" type="warning" :closable="false" />
+        </template>
+        <template v-else>
+          <el-alert :title="explainCandidate(selectedCandidate)" type="info" :closable="false" />
+          <p class="density-dialog-note">只记录数量，具体上柜箱号未核验。</p>
+        </template>
+      </div>
+    </AppDialog>
   </section>
   </AdminPage>
 </template>
@@ -444,8 +480,8 @@ onMounted(load)
 .package-count-summary strong { font-size: var(--admin-font-body); font-weight: 600; }
 .package-count-summary small { color: var(--cc-muted); font-size: var(--admin-font-caption); }
 .workbench :deep(.package-count-editor .el-input-number) { width: 100%; min-width: 0; }
-.assign-dialog p { margin: 0 0 var(--admin-space-4); }
-.assign-dialog :deep(.el-input-number) { width: 100%; }
+.assignment-table { table-layout: fixed; }
+.assignment-table th { width: 90px; }
 .candidate-group { display: grid; width: 100%; min-width: 0; gap: 3px; }
 .candidate-group :deep(.el-tag),.candidate-group :deep(.el-tag__content),.candidate-group :deep(.line-clamp-text) { max-width: 100%; min-width: 0; }
 .candidate-group :deep(.line-clamp-text) { width: 100%; color: var(--cc-muted); font-size: var(--admin-font-caption); }