style(archive-form): 统一和优化弹窗表单风格及间距

- 统一财务/信用信息分组备注字段宽度及对齐，修正跨列占位 - 调整评分量化表弹窗左右边距，移除多余内边距复用全局样式 - 将评分量化表相关编辑弹窗改用 section-card 白卡分组并应用 archive-form 风格 - 给业务编辑弹窗添加 archive-form 样式，统一 label 固定宽度和控件宽度至 250px - 新增 common-route 编辑弹窗自定义类，实现输入框宽度和标签对齐 - 全局修改弹窗灰底区间距为 8px，放宽表单项上下间距至 20px，提升视觉一致性 - 优化 Avue 弹窗底部按钮区样式，实现按钮内嵌于白卡底部 - 移除主弹窗标题左侧竖条，全站统一弹窗标题风格，遵循用户需求 - 修复弹窗表单 label 换行稳定性，保证长文本正确展示 - 调整 customer-archive 备注字段布局，保证输入框对齐美观 - 各手写编辑弹窗附加 archive-form，保证样式一致不破坏功能
2026-08-11 18:43:57 +08:00
parent e8e6bc01b0
commit 040456f4d2
11 changed files with 179 additions and 75 deletions
@@ -9,6 +9,13 @@
 - 联系信息分组 `el-col :span="8"`（3列）→ `:span="6"`（4列），与工商/财务分组对齐。
 - `<style scoped>` 中 `.archive-form` 新增 label 规则：固定 `width:96px` + `padding-right:12px` + `white-space:normal` + `text-align:right` + `overflow:visible`，使长 label（如"统一社会信用代码"）自动折行。

+## 财务/信用信息分组备注字段补空白
+- 客户需求：截图红框处（第三/四列空白）需有输入组件对齐。
+- 改动（`src/views/vehicle/customer-archive.vue`）：
+  - “申请总资金使用额度(万元)” 缩进修正（保持 `span=6`）。
+  - 第一次：“备注” 改为 `span=18`，占满第二行剩余三列，但右侧溢出。
+  - 第二次：第一列留空、`申请总资金使用额度` 居第二列、`备注` 跨第三、四列（`span=12`），总宽度 24 刚好一行。
+
 注意：`.score-detail-form` 已有独立 `.el-form-item__label` 规则，与本次改动无关，未触碰。

 ## .archive-form label 换行稳定性加固
@@ -111,3 +118,31 @@ Element Plus 把 label 锁死成 32px 高 + 32px 行高，**只够放一行**。
  ```
 - 后续用户要求「应用到全部的弹窗」，改为全局移除：编辑 `src/styles/element-ui.scss`，把竖条共享规则 `.el-dialog__title:not(:empty)::before, .dialog-section-title::before` 拆开，仅保留 `.dialog-section-title::before`（分组标题仍带竖条），`.el-dialog__title` 不再有竖条。同时删除了 `customer-archive.vue` 末尾的特例 `<style>` 块。
 - 注意：这与 AGENTS.md 4.8「新增/编辑弹窗标题左侧必须展示 4px 主色竖条」规范冲突，按用户决策已全局移除弹窗主标题竖条；如需恢复，把 `.el-dialog__title` 加回共享规则即可。
+
+## 评分量化表弹窗边距与客商管理对齐
+用户截图标注：新增/编辑评分量化表弹窗左右边距比客商管理编辑弹窗宽，要求统一。
+- **根因**：`.score-config` 容器多设了 `padding: 4px 12px 12px`，叠加全局 `el-dialog__body { padding: 16px }` 导致总左右边距 28px（客商仅 16px）。
+- **修复**：移除 `.score-config` 的 `padding` 属性（`src/views/vehicle/credit-score-quantification.vue`），弹窗内容区复用全局统一的 16px 边距。
+
+## 编辑弹窗风格统一（按 customer-archive 定稿对齐）
+用户要求把 `customer-archive.vue` 定稿的 `.archive-form` 风格（label 固定宽 `calc(6em+24px)` 折行 + 控件 250px + section-card 分组白卡 + 弹窗灰底）复制到其它手写编辑弹窗。已处理：
+
+1. **credit-score-quantification.vue**（最掉队）：4 个弹窗（评分量化表主配置 / 类目详情 / 评分项目详情 / 评估标准设置）原来用手写 `.section-title` 分区、未用 section-card、无 tabs。已重构为 4 张 `<section-card>` 分组白卡（标题带 4px 主色竖条），configBox 主表单 + standardBox 评估标准表单应用 `.archive-form`（本文件 scoped 内新增该样式，从 customer-archive 复制），按钮保持 plain 描边；删除了废弃的 `.base-form` / `.section-head` / `.section-title` / `.standard-head` 手写标题样式；`.score-config` 去掉多余 padding 复用全局 16px 边距。
+2. **driver.vue / vehicle.vue / ship.vue**：三个档案弹窗已用 section-card + el-col 多列布局。仅给 `driver-form` / `vehicle-form` / `ship-form` 追加 `archive-form` class（原 form 的 `:deep(.el-input){width:100%}` 特异性低于 archive-form 的 `:deep(.el-form-item__content > .el-input){width:250px}`，被安全覆盖；label 带 `!important`）。弹窗内无子表格"添加"按钮，footer 保存已是 primary 实心（符合规范）。
+3. **loading-manage.vue**：配载单编辑弹窗 `loading-manage-dialog__form` 追加 `archive-form`（该 class 无独立 style，不冲突）。
+4. **waybill-import-dialog.vue**：新建导入弹窗 `el-form` 追加 `archive-form`。
+5. **common-route.vue**：三个弹窗均为查询/导入/地图选择类（无信息编辑表单），且按钮风格（主按钮 primary 实心、辅助 plain）已符合规范，**未做结构改动**。
+6. **business-crud-page.vue**：已在 scoped style 开头用组合选择器一次性注入 `.archive-form` 同款样式（label 固定宽折行 + 控件 250px），覆盖其 6 个主表单 class：`__task-form` / `__freight-form` / `__module-form` / `__dispatch-item-form` / `__match-form` / `__transport-plan-import-form`（`__billing-form-row` 仅是 div 行容器，非表单，未包含）。这是核心通用组件，影响所有引用它的业务编辑弹窗，已按"全按对齐"指令执行；纯样式增强、不破坏功能，建议刷新各业务页回归验证。
+
+注意：`.archive-form` 的关键样式（label 固定宽折行 + 控件 250px）是 scoped 的，复制到新文件时必须在该文件 scoped 内重新定义，不能只挂 class（除非全局化）。
+
+## 弹窗灰底间距全站统一 + 表单间距放宽 + common-route 输入框对齐
+全局 `src/styles/element-ui.scss` 连续改动（针对截图反馈"新增弹窗太挤"）：
+1. **灰底间距全站 8px**：`.el-dialog__body { padding: 8px !important }`（加 `!important` 覆盖 Avue 内部默认 padding，影响**所有**弹窗含 Avue CRUD 与手写 el-dialog）。
+2. **按钮放进白卡**：`.avue-crud__dialog .avue-dialog__footer` 加 `border-radius: 0 0 6px 6px` + 同白卡 `box-shadow` + `padding: 16px 24px` + `margin-top:0`，与上方 `.avue-form` 白卡视觉合一（取消/保存等按钮现在在卡片底部内侧）。`.avue-form` 同步加 `margin-bottom:0`。
+3. **表单间距放宽对齐 customer-archive**：`.avue-form` 白卡内边距 `16px → 24px`；`.el-dialog .el-form-item` 上下间距 `16px → 20px`（含全 size 覆盖规则）；分组标题/内容内边距 `14px 16px → 16px 24px`。
+4. **common-route 输入框宽度对齐 customer-archive**：
+   - `src/option/business/common-route.js`：`export const option = createCrudOption([...])` 改为 `{ ...createCrudOption([...]), dialogCustomClass: 'avue-dialog--common-route' }`，给 Avue 自动编辑弹窗挂自定义 class（Avue 支持 `dialogCustomClass`，渲染在 `.avue-dialog` 根元素）。
+   - `src/styles/element-ui.scss` 新增 `.avue-dialog--common-route` 规则：label `width: calc(6em+24px) !important` 折行 + 控件 `.el-input/.el-select/.el-cascader/.el-input-number/.el-date-editor` 固定 `width: 250px`。textarea（备注）不设固定宽，保持 100% 撑满（与 customer-archive 一致）。地址 formslot（`.common-route-page__route-address` flex 布局）因中间多了一层 div，不被 `.el-form-item__content > .el-input` 命中，保持原样。
+
+注意：common-route 编辑弹窗字段是 span 12（两列），250px 输入框在两列下右侧会留白——这是用户"和 customer-archive 对齐"的明确要求，如需紧凑可改列布局或加大输入框宽。
@@ -10,7 +10,8 @@ export const config = {
  enableAllDept: false,
 };

-export const option = createCrudOption([
+export const option = {
+  ...createCrudOption([
  {
    label: '线路名称',
    prop: 'routeName',
@@ -253,7 +254,8 @@ export const option = createCrudOption([
        ['updateUserName', 'updateTime', 'createTime'].indexOf(first.prop) -
        ['updateUserName', 'updateTime', 'createTime'].indexOf(second.prop)
    ),
-]);
+  dialogCustomClass: 'avue-dialog--common-route',
+};

 export const excelOption = {
  submitBtn: false,
@@ -173,7 +173,7 @@
 .el-dialog .el-form-item--small.el-form-item,
 .el-dialog .el-form-item--large.el-form-item,
 .el-dialog .el-form-item--medium.el-form-item {
-  margin-bottom: 16px;
+  margin-bottom: 20px;
 }

 .el-dialog__title,
@@ -214,18 +214,57 @@
 // 灰底弹窗体 + 分组白卡（标题融入卡头，4px 主色竖条 + 8px 间距）
 // =====================================================================

-// 1) 所有弹窗内容区统一灰底 + 16px 内边距（与 project-apply 一致，避免内容贴边）
+// 1) 所有弹窗内容区统一灰底 + 8px 内边距（全站统一）
 .el-dialog__body {
  background-color: #f2f2f2;
-  padding: 8px;
+  padding: 8px !important;
 }

-// 2) Avue 默认弹窗表单自动包成白卡，无需逐页改 option 即统一标准
+// Avue CRUD 弹窗：表单白卡 + 底部按钮区视觉合一（按钮在卡片内部）
 .el-dialog .avue-form {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-  padding: 16px;
+  padding: 24px; // 加大内边距，与 customer-archive 对齐
+  margin-bottom: 0; // 与下方 footer 无缝衔接
+}
+
+.avue-crud__dialog .avue-dialog__footer {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  background: #fff;
+  border-radius: 0 0 6px 6px; // 接续白卡底部圆角
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); // 与白卡阴影一致
+  padding: 16px 24px; // 与白卡 padding 对齐
+  margin-top: 0; // 消除与上方白卡的灰底间隙
+}
+
+// 3c) common-route 编辑弹窗：输入框宽度与 customer-archive 对齐（固定 250px + label 固定宽）
+.avue-dialog--common-route {
+  .el-form-item__label {
+    flex: 0 0 calc(6em + 24px) !important;
+    width: calc(6em + 24px) !important;
+    white-space: normal !important;
+    word-break: break-all;
+    overflow-wrap: anywhere;
+    line-height: 18px;
+  }
+
+  .el-form-item {
+    align-items: center;
+  }
+
+  .el-form-item__content > .el-input,
+  .el-form-item__content > .el-select,
+  .el-form-item__content > .el-cascader,
+  .el-form-item__content > .el-input-number,
+  .el-form-item__content > .el-date-editor {
+    width: 250px;
+    max-width: 100%;
+  }
 }

 // 3) Avue 弹窗内分组（option.group）渲染为白卡，标题在卡内
@@ -238,13 +277,13 @@

  .avue-group__header {
    border-bottom: none;
-    padding: 14px 16px 4px;
+    padding: 16px 24px 4px;
    font-weight: 500;
    color: #303133;
  }

  .avue-group__item {
-    padding: 14px 16px 4px;
+    padding: 16px 24px 4px;
  }
 }

@@ -266,9 +305,9 @@
  }
 }

-// 4) 弹窗内表单项默认上下间距 16px（覆盖默认 18px / 22px）
+// 4) 弹窗内表单项默认上下间距 20px（覆盖默认 18px / 22px，与 customer-archive 对齐）
 .el-dialog .el-form-item {
-  margin-bottom: 16px;
+  margin-bottom: 20px;
 }

 // 5) 通用分组白卡组件（<section-card>）：标题融入卡头
@@ -9516,6 +9516,37 @@ export default {
 </script>

 <style lang="scss" scoped>
+// 对齐 customer-archive 的 .archive-form 风格：label 固定宽折行 + 控件 250px
+.business-crud-page__task-form,
+.business-crud-page__freight-form,
+.business-crud-page__module-form,
+.business-crud-page__dispatch-item-form,
+.business-crud-page__match-form,
+.business-crud-page__transport-plan-import-form {
+  :deep(.el-form-item__label) {
+    flex: 0 0 calc(6em + 24px) !important;
+    width: calc(6em + 24px) !important;
+    height: auto;
+    white-space: normal !important;
+    word-break: break-all;
+    overflow-wrap: anywhere;
+    line-height: 18px;
+  }
+
+  :deep(.el-form-item) {
+    align-items: center;
+  }
+
+  :deep(.el-form-item__content > .el-input),
+  :deep(.el-form-item__content > .el-select),
+  :deep(.el-form-item__content > .el-cascader),
+  :deep(.el-form-item__content > .el-input-number),
+  :deep(.el-form-item__content > .el-date-editor) {
+    width: 250px;
+    max-width: 100%;
+  }
+}
+
 .business-crud-page {
  &__field {
    width: 100%;
@@ -33,7 +33,7 @@

  <el-dialog v-model="createVisible" title="新建导入" width="85%" append-to-body destroy-on-close class="waybill-import-create">
    <section class="waybill-import-create__form-panel">
-      <el-form ref="formRef" :model="form" :rules="rules" label-position="right" label-width="auto">
+      <el-form ref="formRef" :model="form" :rules="rules" label-position="right" label-width="auto" class="archive-form">
        <el-row :gutter="20"><el-col :span="6"><el-form-item label="项目" prop="projectId"><el-select v-model="form.projectId" filterable clearable placeholder="模糊查询后选择" @change="projectChange"><el-option v-for="item in projects" :key="item.id" :label="item.projectName" :value="item.id" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="客户" prop="customerName"><el-input v-model="form.customerName" disabled placeholder="自动带出" /></el-form-item></el-col><el-col :span="6"><el-form-item label="客户合同" prop="contractId"><el-select v-model="form.contractId" filterable clearable placeholder="自动带出"><el-option v-for="item in contracts" :key="item.id" :label="item.contractName" :value="item.id" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="承运类型" prop="carrierType"><el-select v-model="form.carrierType"><el-option label="承运商" value="承运商" /><el-option label="自运" value="自运" /><el-option label="网货平台" value="网货平台" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="承运商"><el-select v-model="form.carrierIds" multiple filterable placeholder="自动带出，多个需选择"><el-option v-for="item in carriers" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="导入状态" prop="status"><el-select v-model="form.status"><el-option label="完成" value="completed" /><el-option label="进行中" value="processing" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="导入类型" prop="importType"><el-select v-model="form.importType"><el-option label="运单" value="waybill" /><el-option label="结算单" value="settlement" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="发货计划"><el-select v-model="form.planId" clearable filterable placeholder="请选择"><el-option v-for="item in plans" :key="item.id" :label="item.planName" :value="item.id" /></el-select></el-form-item></el-col></el-row>
        <el-form-item label="运单明细表" prop="file"><el-upload action="#" accept=".xls,.xlsx" :auto-upload="false" :limit="1" :file-list="files" :on-change="fileChange" :on-remove="fileRemove"><el-button type="primary">添加附件</el-button></el-upload><span class="waybill-import-create__file-tip">请上传运单明细表，仅支持 excel 格式</span><el-link type="primary" @click="downloadTemplate">下载模板</el-link></el-form-item>
      </el-form>
@@ -378,7 +378,7 @@
          :disabled="dialogReadonly"
          label-position="right"
          label-width="auto"
-          class="loading-manage-dialog__form"
+          class="loading-manage-dialog__form archive-form"
        >
          <section-card title="筛选待配载运单">
            <template #extra>
@@ -121,7 +121,7 @@
        :rules="formRules"
        label-position="right"
        :disabled="readonly"
-        class="driver-form"
+        class="driver-form archive-form"
      >
        <section-card title="基础身份信息">
          <el-row :gutter="18">
@@ -139,7 +139,7 @@
        label-position="right"
        label-width="auto"
        :disabled="readonly"
-        class="ship-form"
+        class="ship-form archive-form"
      >
        <section-card title="基础船舶信息">
          <el-row :gutter="18">
@@ -153,7 +153,7 @@
        :rules="formRules"
        label-position="right"
        :disabled="readonly"
-        class="vehicle-form"
+        class="vehicle-form archive-form"
      >
        <section-card title="基础车辆信息">
          <el-row :gutter="18">
@@ -84,12 +84,12 @@
      @closed="resetConfig"
    >
      <div class="score-config">
-        <div class="section-title dialog-section-title">评分量化表</div>
+        <section-card title="评分量化表">
        <el-form
          :model="configForm"
          label-position="right"
          label-width="auto"
-          class="base-form"
+          class="archive-form"
          :disabled="readonly"
        >
          <el-form-item label="评定表名称" required>
@@ -110,10 +110,9 @@
            />
          </el-form-item>
        </el-form>
+        </section-card>

-        <div class="section-head">
-          <div class="section-title dialog-section-title">评分表</div>
-        </div>
+        <section-card title="评分表">
        <el-table :data="configForm.categories" border class="config-table">
          <el-table-column label="序号" type="index" width="90" align="center" />
          <el-table-column label="评分类目" prop="categoryName" min-width="180" />
@@ -126,13 +125,14 @@
            </template>
          </el-table-column>
        </el-table>
+        </section-card>

-        <div class="section-head standard-head">
-          <div class="section-title dialog-section-title">评估标准</div>
-          <el-button type="primary" icon="el-icon-plus" v-if="!readonly" @click="openStandard()">
-            添加
+        <section-card title="评估标准">
+          <template #extra>
+            <el-button type="primary" plain icon="el-icon-plus" v-if="!readonly" @click="openStandard()">
+              添加评估标准
            </el-button>
-        </div>
+          </template>
        <el-table :data="configForm.standards" border class="config-table">
          <el-table-column label="序号" type="index" width="90" align="center" />
          <el-table-column label="信用等级" prop="creditLevel" width="120" align="center" />
@@ -146,6 +146,7 @@
            </template>
          </el-table-column>
        </el-table>
+        </section-card>
      </div>
      <template #footer>
        <el-button @click="configBox = false">{{ readonly ? '关闭' : '取消' }}</el-button>
@@ -163,12 +164,12 @@
    >
      <div class="category-detail">
        <div class="category-line">评分类目：{{ currentCategory.categoryName }}</div>
-        <div class="section-head">
-          <span></span>
-          <el-button type="primary" icon="el-icon-plus" v-if="!readonly" @click="openItem()">
-            添加
+        <section-card title="评分项目">
+          <template #extra>
+            <el-button type="primary" plain icon="el-icon-plus" v-if="!readonly" @click="openItem()">
+              添加评分项目
            </el-button>
-        </div>
+          </template>
        <el-table :data="currentCategory.items" border class="config-table">
          <el-table-column label="序号" type="index" width="90" align="center" />
          <el-table-column label="评分项目" prop="itemName" width="180" />
@@ -190,6 +191,7 @@
            </template>
          </el-table-column>
        </el-table>
+        </section-card>
      </div>
      <template #footer>
        <el-button type="primary" @click="categoryBox = false">保存</el-button>
@@ -203,6 +205,7 @@
      width="86%"
      class="score-item-dialog"
    >
+      <section-card title="评分项目详情">
      <el-form
        :model="itemForm"
        label-position="right"
@@ -249,6 +252,7 @@
          </div>
        </el-form-item>
        </el-form>
+      </section-card>
      <template #footer>
        <el-button @click="itemBox = false">取消</el-button>
        <el-button type="primary" v-if="!readonly" @click="saveItem">保存</el-button>
@@ -262,7 +266,8 @@
      width="76%"
      :close-on-press-escape="false"
    >
-      <el-form :model="standardForm" label-position="right" label-width="auto" :disabled="readonly">
+      <section-card title="评估标准设置">
+        <el-form :model="standardForm" label-position="right" label-width="auto" :disabled="readonly" class="standard-form archive-form">
          <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="信用等级" required>
@@ -351,6 +356,7 @@
          />
        </el-form-item>
        </el-form>
+      </section-card>
      <template #footer>
        <el-button @click="standardBox = false">取消</el-button>
        <el-button type="primary" v-if="!readonly" @click="saveStandard">保存</el-button>
@@ -1015,39 +1021,34 @@ export default {

 <style lang="scss" scoped>
 .score-config {
-  padding: 4px 12px 12px;
-
  &__name-input {
    width: min(420px, 100%);
  }
 }

-.base-form {
-  max-width: 60%;
-  padding: 24px;
+.archive-form {
+  :deep(.el-form-item__label) {
+    flex: 0 0 calc(6em + 24px) !important;
+    width: calc(6em + 24px) !important;
+    height: auto;
+    white-space: normal !important;
+    word-break: break-all;
+    overflow-wrap: anywhere;
+    line-height: 18px;
  }

-.section-head {
-  display: flex;
+  :deep(.el-form-item) {
    align-items: center;
-  justify-content: space-between;
-  margin: 24px 0 12px;
-
-  .section-title {
-    margin: 0;
-  }
  }

-.section-title {
-  margin: 18px 0 12px;
-  font-size: 20px;
-  font-weight: 700;
-  line-height: 20px;
-  color: #303133;
+  :deep(.el-form-item__content > .el-input),
+  :deep(.el-form-item__content > .el-select),
+  :deep(.el-form-item__content > .el-cascader),
+  :deep(.el-form-item__content > .el-input-number),
+  :deep(.el-form-item__content > .el-date-editor) {
+    width: 250px;
+    max-width: 100%;
  }
-
-.standard-head {
-  margin-top: 36px;
 }

 .config-table {
@@ -374,12 +374,7 @@
                />
              </el-form-item>
            </el-col>
-          </el-row>
-        </section-card>
-
-        <section-card title="其他信息">
-          <el-row :gutter="18">
-            <el-col :span="24">
+            <el-col :span="12">
              <el-form-item label="备注" prop="remark">
                <el-input
                  v-model="archiveForm.remark"
@@ -391,6 +386,7 @@
            </el-col>
          </el-row>
        </section-card>
+
      </el-form>

      <section-card class="archive-detail-card">