From d0770c8e8301f7e4c381c975d3740c2f2956c537 Mon Sep 17 00:00:00 2001
From: "weicw1996@qq.com" <weicw1996@qq.com>
Date: Mon, 5 Oct 2026 08:18:02 +0800
Subject: [PATCH] =?UTF-8?q?:art:=20=E8=AF=A6=E6=83=85=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E6=8C=89=E8=BF=90=E5=8D=95/=E5=BC=82=E5=B8=B8=E6=8B=86?=
 =?UTF-8?q?=E6=88=90=E4=B8=A4=E5=9D=97=E5=B9=B6=E7=BB=9F=E4=B8=80=E6=88=90?=
 =?UTF-8?q?=E6=8F=8F=E8=BF=B0=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

原「异常信息」一块混了运单字段与上报字段，且用的是 dl/dt/dd 自定义栅格。
现拆成「运单信息」与「异常信息」两个 section-card，都用 el-descriptions，
与编辑弹窗的分区口径和视觉一致。

拆出的两个字段配置与编辑弹窗同源同序，只读展示；原 detailFields 的十个字段
一个不少。同时删掉因此不再使用的 __detail-grid 样式与它的响应式断点。

原先这些字段带 link: true，渲染成 el-link 但没有任何点击行为，
看着可点却没反应，一并去掉。
---
 src/option/transit/exception-disposal.js | 18 ++++--
 src/views/transit/exception-disposal.vue | 71 +++++++++---------------
 2 files changed, 39 insertions(+), 50 deletions(-)

diff --git a/src/option/transit/exception-disposal.js b/src/option/transit/exception-disposal.js
index dc13640..3d21662 100644
--- a/src/option/transit/exception-disposal.js
+++ b/src/option/transit/exception-disposal.js
@@ -86,14 +86,20 @@ export const tableColumns = [
   { label: '状态', prop: 'disposalStatusName', minWidth: 120 },
 ];
 
-export const detailFields = [
-  { label: '配载单号/总单号', prop: 'loadingOrMasterNo', link: true },
-  { label: '运单号', prop: 'waybillNo', link: true },
-  { label: '项目', prop: 'projectName', link: true },
-  { label: '车牌号', prop: 'vehicleNo', link: true },
+// 详情/跟进弹窗的只读信息，按来源分两块：
+// 「运单信息」是上报时从运单复制的字段，「异常信息」是司机上报的内容。
+// 与编辑弹窗的分区口径一致，改动时两处要一起改。
+export const detailWaybillFields = [
+  { label: '运单号', prop: 'waybillNo' },
+  { label: '配载单号/总单号', prop: 'loadingOrMasterNo' },
+  { label: '车牌号', prop: 'vehicleNo' },
+  { label: '项目', prop: 'projectName' },
+  { label: '承运商', prop: 'carrierName' },
+];
+
+export const detailExceptionFields = [
   { label: '上报人', prop: 'reporterName' },
   { label: '上报时间', prop: 'reportTime' },
-  { label: '承运商', prop: 'carrierName' },
   { label: '异常类型', prop: 'exceptionTypeName' },
   { label: '异常原因', prop: 'exceptionReason' },
   { label: '上报说明', prop: 'reportDescription', span: 2 },
diff --git a/src/views/transit/exception-disposal.vue b/src/views/transit/exception-disposal.vue
index 3928d0b..dafa07c 100644
--- a/src/views/transit/exception-disposal.vue
+++ b/src/views/transit/exception-disposal.vue
@@ -297,20 +297,29 @@
         </el-form>
 
         <template v-else>
+          <section-card title="运单信息">
+            <el-descriptions :column="3" border size="small">
+              <el-descriptions-item
+                v-for="field in detailWaybillFields"
+                :key="field.prop"
+                :label="field.label"
+              >
+                {{ detailValue(field.prop) }}
+              </el-descriptions-item>
+            </el-descriptions>
+          </section-card>
+
           <section-card title="异常信息">
-            <dl class="exception-disposal-page__detail-grid">
-              <template v-for="field in detailFields" :key="field.prop">
-                <div :class="{ 'is-wide': field.span === 2 }">
-                  <dt>{{ field.label }}</dt>
-                  <dd>
-                    <el-link v-if="field.link && detail[field.prop]" type="primary">
-                      {{ detail[field.prop] }}
-                    </el-link>
-                    <span v-else>{{ detail[field.prop] || '-' }}</span>
-                  </dd>
-                </div>
-              </template>
-            </dl>
+            <el-descriptions :column="2" border size="small">
+              <el-descriptions-item
+                v-for="field in detailExceptionFields"
+                :key="field.prop"
+                :label="field.label"
+                :span="field.span === 2 ? 2 : 1"
+              >
+                {{ detailValue(field.prop) }}
+              </el-descriptions-item>
+            </el-descriptions>
           </section-card>
 
           <section-card title="现场照片">
@@ -431,7 +440,8 @@
 import { ArrowDown, ArrowUp, Rank, Refresh, Setting } from '@element-plus/icons-vue';
 import { mapGetters } from 'vuex';
 import {
-  detailFields,
+  detailExceptionFields,
+  detailWaybillFields,
   disposalStatusOptions,
   editWaybillFields,
   exceptionCategoryOptions,
@@ -454,7 +464,8 @@ export default {
       ArrowUp,
       searchFields,
       tableColumns,
-      detailFields,
+      detailExceptionFields,
+      detailWaybillFields,
       followColumns,
       exceptionTypeOptions,
       editWaybillFields,
@@ -826,33 +837,6 @@ export default {
   word-break: break-all;
 }
 
-.exception-disposal-page__detail-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px 24px;
-  margin: 0;
-
-  div {
-    display: grid;
-    grid-template-columns: 120px minmax(0, 1fr);
-    align-items: start;
-  }
-
-  .is-wide {
-    grid-column: 1 / -1;
-  }
-
-  dt {
-    color: #606266;
-    text-align: right;
-  }
-
-  dd {
-    margin: 0 0 0 12px;
-    word-break: break-all;
-  }
-}
-
 .exception-disposal-page__photos {
   display: flex;
   flex-wrap: wrap;
@@ -914,8 +898,7 @@ export default {
 }
 
 @media screen and (max-width: 760px) {
-  .exception-disposal-page__search-grid,
-  .exception-disposal-page__detail-grid {
+  .exception-disposal-page__search-grid {
     grid-template-columns: 1fr;
   }
 }