🎨 详情弹窗按运单/异常拆成两块并统一成描述列表

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

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

原先这些字段带 link: true，渲染成 el-link 但没有任何点击行为，
看着可点却没反应，一并去掉。

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 },
+export const detailWaybillFields = [
-  { label: '车牌号', prop: 'vehicleNo', link: true },
+  { 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 },

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">
+            <el-descriptions :column="2" border size="small">
-              <template v-for="field in detailFields" :key="field.prop">
+              <el-descriptions-item
-                <div :class="{ 'is-wide': field.span === 2 }">
+                v-for="field in detailExceptionFields"
-                  <dt>{{ field.label }}</dt>
+                :key="field.prop"
-                  <dd>
+                :label="field.label"
-                    <el-link v-if="field.link && detail[field.prop]" type="primary">
+                :span="field.span === 2 ? 2 : 1"
-                      {{ detail[field.prop] }}
+              >
-                    </el-link>
+                {{ detailValue(field.prop) }}
-                    <span v-else>{{ detail[field.prop] || '-' }}</span>
+              </el-descriptions-item>
-                  </dd>
+            </el-descriptions>
-                </div>
-              </template>
-            </dl>
           </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__search-grid {
-  .exception-disposal-page__detail-grid {
     grid-template-columns: 1fr;
   }
 }