优化

2026-08-14 19:59:32 +08:00
parent f7594ebd39
commit 1540b80c89
29 changed files with 780 additions and 587 deletions
@@ -516,32 +516,45 @@ defineExpose({ saveDraft, submitForReview, updateActualGrossWeight, mayMaintain,
      <form class="measurement-form" @submit.prevent="saveDraft">
        <fieldset :disabled="!mayMaintain || saving">
          <legend class="sr-only">测量草稿</legend>
-          <section class="measurement-section">
-            <div class="measurement-section__heading measurement-panel__heading">
-              <div><h3>原单数据与测量汇总</h3></div>
-            </div>
-            <div class="measurement-data-grid">
-              <label><span>入仓号</span><el-input :model-value="detail.inboundCode || '—'" readonly /></label>
-              <label><span>公司</span><el-input :model-value="detail.companyName || '—'" readonly /></label>
-              <label><span>渠道</span><el-input :model-value="detail.channelName || detail.channelCode || '—'" readonly /></label>
-              <label><span>测量来源</span><el-input :model-value="sourceLabel" readonly /></label>
-              <label><span>当前状态</span><el-input :model-value="processStatusLabel(detail.processStatus)" readonly /></label>
-              <label><span>数据版本</span><el-input :model-value="String(form.version)" readonly /></label>
-              <label><span>确认箱数合计</span><el-input :model-value="formatNumber(confirmedPackageCount, 0)" readonly /></label>
-              <label><span>订单总箱数</span><el-input :model-value="formatNumber(expectedPackageCount, 0)" readonly /></label>
-              <label><span>货物总重量（kg）</span><el-input :model-value="formatNumber(detail.actualGrossWeightKg)" readonly /></label>
-              <label><span>原单总毛重（T.K.GW）</span><el-input-number v-model="form.originalGrossWeightKg" :min="0" :precision="3" controls-position="right" /></label>
-              <label><span>实测总体积（T.CBM）</span><el-input :model-value="formatNumber(detail.actualVolumeCbm, 4)" readonly /></label>
-              <label><span>原单总体积（T.CBM）</span><el-input-number v-model="form.originalVolumeCbm" :min="0" :precision="4" controls-position="right" /></label>
-              <label><span>实测总材积重（kg）</span><el-input :model-value="formatNumber(detail.volumeWeightKg)" readonly /></label>
-              <label><span>原单据号码（CKW）</span><el-input v-model="form.originalDocumentNo" placeholder="请输入原单据号码" maxlength="128" /></label>
-              <label><span>实际品名</span><el-input v-model="form.actualGoodsName" placeholder="请输入实际品名" maxlength="128" /></label>
-            </div>
+          <section class="measurement-section measurement-summary-section">
+            <header class="measurement-summary-header">
+              <div>
+                <span>入仓码</span>
+                <strong>{{ detail.inboundCode || '—' }}</strong>
+                <p>{{ detail.companyName || '客户未命名' }} · {{ detail.channelName || detail.channelCode || '渠道未填写' }}</p>
+              </div>
+              <div class="measurement-summary-status">
+                <el-tag effect="light">{{ processStatusLabel(detail.processStatus) }}</el-tag>
+                <span>{{ sourceLabel }}</span>
+              </div>
+            </header>
+
+            <dl class="measurement-metrics" aria-label="测量结果汇总">
+              <div :class="{ 'measurement-metric--warning': !packageCountMatched }">
+                <dt>实测箱数</dt>
+                <dd>{{ formatNumber(confirmedPackageCount, 0) }} <small>/ 申报 {{ formatNumber(expectedPackageCount, 0) }}</small></dd>
+              </div>
+              <div class="measurement-metric--primary"><dt>货物重量</dt><dd>{{ formatNumber(detail.actualGrossWeightKg) }} <small>kg</small></dd></div>
+              <div><dt>总体积</dt><dd>{{ formatNumber(detail.actualVolumeCbm, 4) }} <small>m³</small></dd></div>
+              <div><dt>材积重</dt><dd>{{ formatNumber(detail.volumeWeightKg) }} <small>kg</small></dd></div>
+            </dl>
+
+            <el-collapse class="measurement-more">
+              <el-collapse-item name="declaration" title="申报信息">
+                <div class="measurement-data-grid">
+                  <label><span>申报箱数</span><el-input :model-value="formatNumber(expectedPackageCount, 0)" readonly /></label>
+                  <label><span>申报毛重（kg）</span><el-input-number v-model="form.originalGrossWeightKg" :min="0" :precision="3" controls-position="right" /></label>
+                  <label><span>申报体积（m³）</span><el-input-number v-model="form.originalVolumeCbm" :min="0" :precision="4" controls-position="right" /></label>
+                  <label><span>实际品名</span><el-input v-model="form.actualGoodsName" placeholder="请输入实际品名" maxlength="128" /></label>
+                  <label><span>原单据号码</span><el-input v-model="form.originalDocumentNo" placeholder="请输入原单据号码" maxlength="128" /></label>
+                </div>
+              </el-collapse-item>
+            </el-collapse>
          </section>

          <section class="measurement-section measurement-items-section">
            <div class="measurement-section__heading">
-              <div><h3>扫描箱测量数据明细</h3><p>每条记录对应一个实际扫描箱；人工只确认该条记录代表的箱数，设备实测值不可在此修改。</p></div>
+              <div><h3>箱规明细</h3></div>
              <el-button v-if="canManualEntry" type="primary" plain :disabled="!mayCreateManualEntry" @click="openManualEntry"><Plus :size="15" />手动录入箱规</el-button>
            </div>

@@ -559,7 +572,10 @@ defineExpose({ saveDraft, submitForReview, updateActualGrossWeight, mayMaintain,
                  <dl class="measurement-row-details">
                    <div><dt>机器编号</dt><dd>{{ row.machineNo || '人工录入' }}</dd></div>
                    <div><dt>测量时间</dt><dd>{{ row.measuredAt ? row.measuredAt.replace('T', ' ') : '—' }}</dd></div>
+                    <div><dt>每箱毛重</dt><dd>{{ formatNumber(row.unitWeightKg) }} kg</dd></div>
+                    <div><dt>单箱体积</dt><dd>{{ formatNumber(row.serverValues.unitVolumeCbm, 4) }} m³</dd></div>
                    <div><dt>箱规周长</dt><dd>{{ formatNumber(row.serverValues.girthCm) }} cm</dd></div>
+                    <div><dt>总材积重</dt><dd>{{ formatNumber(row.serverValues.volumeWeightKg) }} kg</dd></div>
                    <div><dt>备注</dt><dd>{{ row.remark || '—' }}</dd></div>
                  </dl>
                </template>
@@ -585,24 +601,12 @@ defineExpose({ saveDraft, submitForReview, updateActualGrossWeight, mayMaintain,
                  />
                </template>
              </el-table-column>
-              <el-table-column label="每箱毛重(kg)" width="106" align="right">
-                <template #default="{ row }">{{ formatNumber(row.unitWeightKg) }}</template>
-              </el-table-column>
-              <el-table-column label="单箱体积(m³)" width="112" align="right">
-                <template #default="{ row }">{{ formatNumber(row.serverValues.unitVolumeCbm, 4) }}</template>
-              </el-table-column>
-              <el-table-column label="周长(cm)" width="92" align="right">
-                <template #default="{ row }">{{ formatNumber(row.serverValues.girthCm) }}</template>
-              </el-table-column>
-              <el-table-column label="总毛重(kg)" width="104" align="right">
+              <el-table-column label="总重量(kg)" width="112" align="right">
                <template #default="{ row }">{{ formatNumber(row.serverValues.totalWeightKg) }}</template>
              </el-table-column>
              <el-table-column label="总体积(m³)" width="108" align="right">
                <template #default="{ row }">{{ formatNumber(row.serverValues.totalVolumeCbm, 4) }}</template>
              </el-table-column>
-              <el-table-column label="总材积重(kg)" width="116" align="right">
-                <template #default="{ row }">{{ formatNumber(row.serverValues.volumeWeightKg) }}</template>
-              </el-table-column>
              <el-table-column label="图片" width="82" align="center">
                <template #default="{ row }">
                  <el-tooltip :content="row.intelligentImageFileId ? '预览测量图片' : '暂无测量图片'">
@@ -620,7 +624,7 @@ defineExpose({ saveDraft, submitForReview, updateActualGrossWeight, mayMaintain,

      <footer v-if="canEdit || canSubmit" class="measurement-panel__footer">
        <span v-if="isDirty"><AlertTriangle :size="15" />有尚未保存的修改</span>
-        <span v-else>当前显示版本 {{ form.version }}</span>
+        <span v-else>所有修改已保存</span>
        <div>
          <el-button v-if="canEdit" type="primary" plain :loading="saving" :disabled="!mayMaintain" @click="saveDraft"><Save :size="15" />保存测量数据</el-button>
          <el-button v-if="canSubmit" type="primary" :loading="submitting" :disabled="!maySubmit" @click="submitForReview"><Send :size="15" />提交审核</el-button>
@@ -680,20 +684,33 @@ defineExpose({ saveDraft, submitForReview, updateActualGrossWeight, mayMaintain,
 .measurement-panel__actions, .measurement-panel__footer > div { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
 .measurement-panel__actions :deep(.el-button), .measurement-panel__footer :deep(.el-button) { margin-left: 0; }
 .measurement-skeleton { padding: 24px; }
-.measurement-context { padding: 16px 20px; border-bottom: 1px solid var(--cc-border); }
-.measurement-context__identity { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
-.measurement-context__identity > div:first-child { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
-.measurement-context__identity strong { overflow-wrap: anywhere; color: var(--cc-text); font-size: 15px; }
-.measurement-context__identity span { color: var(--cc-muted); font-size: 12px; line-height: 1.5; }
-.measurement-tags { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
-.measurement-tags > span:last-child { color: var(--cc-muted); font-size: 11px; }
-.measurement-metrics { display: none; }
 .measurement-panel > :deep(.el-alert), .measurement-alert { margin: 16px 20px 0; width: auto; }
 .measurement-alert p { margin: 5px 0 0; line-height: 1.55; }
 .measurement-alert ul { margin: 7px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.65; }
 .measurement-alert .el-button { margin-top: 9px; }
 .measurement-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
 .measurement-section { padding: 18px 20px; border-top: 1px solid var(--cc-border); }
+.measurement-summary-section { display: grid; gap: 16px; border-top: 0; }
+.measurement-summary-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
+.measurement-summary-header > div:first-child { display: grid; min-width: 0; gap: 3px; }
+.measurement-summary-header span { color: var(--cc-muted); font-size: 11px; }
+.measurement-summary-header strong { overflow-wrap: anywhere; color: var(--cc-text); font-size: 20px; line-height: 1.3; }
+.measurement-summary-header p { margin: 0; color: var(--cc-muted); font-size: 12px; }
+.measurement-summary-status { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; }
+.measurement-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--cc-border); border-radius: 6px; background: #fff; }
+.measurement-metrics > div { display: grid; min-width: 0; min-height: 78px; align-content: center; gap: 6px; padding: 13px 16px; border-right: 1px solid var(--cc-border); }
+.measurement-metrics > div:last-child { border-right: 0; }
+.measurement-metrics dt { color: var(--cc-muted); font-size: 12px; }
+.measurement-metrics dd { min-width: 0; margin: 0; color: var(--cc-text); font-size: 19px; font-weight: 700; overflow-wrap: anywhere; }
+.measurement-metrics small { color: var(--cc-muted); font-size: 11px; font-weight: 500; }
+.measurement-metric--primary { background: #f0f7ff; }
+.measurement-metric--primary dd { color: var(--cc-primary); font-size: 23px; }
+.measurement-metric--warning { background: var(--el-color-warning-light-9); }
+.measurement-metric--warning dd { color: var(--el-color-warning-dark-2); }
+.measurement-more { border-top: 0; border-bottom: 0; }
+.measurement-more :deep(.el-collapse-item__header) { height: 38px; color: var(--cc-muted); font-size: 12px; }
+.measurement-more :deep(.el-collapse-item__wrap) { border-bottom: 0; }
+.measurement-more :deep(.el-collapse-item__content) { padding: 4px 0 2px; }
 .measurement-section__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
 .measurement-section__heading > div { min-width: 0; }
 .measurement-form-grid, .measurement-data-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
@@ -732,11 +749,11 @@ defineExpose({ saveDraft, submitForReview, updateActualGrossWeight, mayMaintain,
 }

@media (max-width: 720px) {
-  .measurement-panel__heading, .measurement-context__identity, .measurement-section__heading, .measurement-panel__footer { align-items: stretch; flex-direction: column; }
+  .measurement-panel__heading, .measurement-summary-header, .measurement-section__heading, .measurement-panel__footer { align-items: stretch; flex-direction: column; }
  .measurement-panel__actions, .measurement-panel__actions :deep(.el-button), .measurement-panel__footer > div, .measurement-panel__footer :deep(.el-button) { width: 100%; }
  .measurement-panel__actions :deep(.el-button), .measurement-panel__footer :deep(.el-button), .measurement-section__heading :deep(.el-button) { min-height: 44px; }
  .measurement-tags { justify-content: flex-start; }
-  .measurement-context, .measurement-section { padding-right: 14px; padding-left: 14px; }
+  .measurement-section { padding-right: 14px; padding-left: 14px; }
  .measurement-panel > :deep(.el-alert), .measurement-alert { margin-right: 14px; margin-left: 14px; }
  .measurement-form-grid, .measurement-data-grid { grid-template-columns: 1fr; }
  .measurement-row-details { grid-template-columns: 1fr; padding-left: 54px; }