style(styles): 调整表单项标签行高及间距

- 将.el-form-item--default的标签行高从18px改为14px - 为.el-form-item--default和.el-form-item添加底部外边距14px - 保持.el-form-item--label-right标签垂直居中对齐效果不变
refactor(process-config): 重构过程配置弹窗为手写 el-dialog
2026-08-14 08:53:33 +08:00 · 2026-08-14 08:46:39 +08:00 · 2026-08-14 08:29:01 +08:00 · 2026-08-14 08:18:49 +08:00 · 2026-08-14 08:18:45 +08:00
11 changed files with 315 additions and 273 deletions
@@ -31,3 +31,16 @@
  3. option：将 `expireStatus` 列的 `search: true → search: false`（否则会在搜索网格里多渲染一个空输入框）；`searchIndex` 设为 ≥ 真实搜索列数（vehicle: `4 → 6`；ship 已是 `6`），使 `columnLen ≤ searchIndex`，Avue 不再显示「展开」按钮。
 - 原理：Avue `header-search3.js` 中 `#search-menu` 插槽内容渲染进 `menu-form`，位于默认搜索/重置按钮之后、展开按钮之前；`order: -1` 将标签推到按钮左侧。
 - 验证：`node --check` 两个 option 文件通过；页面刷新即可见效果。
+
+## process-config.vue 弹窗重构为手写 el-dialog（对齐 customer-archive 风格）
+
+- 需求：用户要求 `/business/process-config.vue` 排版风格改成和 `/vehicle/customer-archive.vue` 一样，保持风格统一。
+- 根因：两页弹窗架构根本不同——customer-archive 用手写 `<el-dialog>` + `section-card` 分组 + `#footer` 按钮；process-config 原用 Avue 内置弹窗（`#basicInfo-form`/`#nodeConfigJson-form` 插槽 + `#menu-form-before` 保存按钮）。要真正统一，只能把 process-config 改成手写弹窗。
+- 模板改动（已完成）：
+  - 移除 avue-crud 的 `:before-open`/`@row-save`/`@row-update`/`@row-del` 与 `#menu-form-before`、`#basicInfo-form`、`#nodeConfigJson-form` 插槽。
+  - 在 `</avue-crud>` 后新增手写 `<el-dialog class="process-dialog" v-model="processBox" width="92%" top="4vh" append-to-body @closed="resetProcess">`，内部 `<el-form ref="processForm" :model="form" label-width="calc(6em + 24px)" :disabled="dialogReadonly" class="process-form dialog-form-label-fixed">`，含 3 个 `section-card`：基本信息 / 现行过程节点（时间线）/ 节点设置（节点表格）；`#footer` 含 保存草稿(plain) + 保存并启用(primary) + 取消/关闭。
+  - 顶部「新建过程配置」、表格「查看/编辑」链接改调 `openProcessConfig()` / `openProcessConfig(row, true)` / `openProcessConfig(row, false)`。
+- 脚本改动（本次完成）：删除 Avue 生命周期方法 `beforeOpen/rowSave/rowUpdate/submitRow/stopSubmitLoading/handleProcessConfigSave`；新增 `openProcessConfig(row, readonly)`（load 详情后 `this.form=data` + `selectedProjectId` + `parseNodeConfig` + 开框；新增则清空表单 + `resetNodeRows`）、`submitProcessConfig(mode)`（`this.$refs.processForm.validate` → `syncNodeFields` → `normalizeRow` → `validateRow` → `confirmDuplicateVoucher` → `api.submit`，成功后关框并刷新）、`resetProcess()`（`@closed` 重置 `dialogReadonly/submitting/submitStatus/form/selectedProjectId` + `resetNodeRows` + `clearValidate`）。`data()` 已含 `processBox/submitting`、`computed.dialogTitle`；`rowDel`/`handleCopy`/`handleAction` 不变（独立 API 调用）。
+- option 改动（已完成）：`src/option/business/process-config.js` 置 `saveBtn/updateBtn/addBtn/viewBtn/editBtn/delBtn:false`，关闭 Avue 内置弹窗按钮。
+- 样式：新增 `:deep(.process-dialog .el-dialog__body){max-height:72vh;overflow:auto}`，对齐 customer-archive 的 `.archive-dialog` 滚动行为（长内容时 body 滚动、footer 固定）。
+- 验证：`vite build --outDir /tmp/pc-build-check` 全量编译通过（仅动态导入 chunk 警告，与本改动无关）；之前 `npm run build` 失败仅因沙箱 safe-delete 守卫清理旧 dist/ 触发，非代码错误。
@@ -177,6 +177,10 @@ export const option = {
  ]),
  saveBtn: false,
  updateBtn: false,
+  addBtn: false,
+  viewBtn: false,
+  editBtn: false,
+  delBtn: false,
  dialogTop: '10px',
  dialogWidth: '96%',
  menuWidth: 220,
@@ -113,7 +113,7 @@ export const option = {
        value: 'projectName',
      },
      filterable: true,
-      span: 12,
+      span: 8,
      minWidth: 180,
      rules: textRule('项目名称', 100, true),
    },
@@ -128,7 +128,7 @@ export const option = {
      prop: 'projectCode',
      hide: true,
      disabled: true,
-      span: 12,
+      span: 8,
      minWidth: 150,
      rules: textRule('项目编号', 50),
    },
@@ -137,7 +137,7 @@ export const option = {
      prop: 'undertakeDeptName',
      hide: true,
      disabled: true,
-      span: 12,
+      span: 8,
      minWidth: 150,
      rules: textRule('承办部门', 50, true),
    },
@@ -146,7 +146,7 @@ export const option = {
      prop: 'projectFundLimit',
      hide: true,
      disabled: true,
-      span: 12,
+      span: 8,
      minWidth: 200,
      rules: [nonNegativeRule('项目资金使用额度')],
    },
@@ -155,7 +155,7 @@ export const option = {
      prop: 'usedFundLimit',
      hide: true,
      disabled: true,
-      span: 12,
+      span: 8,
      minWidth: 220,
      value: 0,
      rules: [nonNegativeRule('已使用项目资金额度')],
@@ -165,7 +165,7 @@ export const option = {
      prop: 'remainingFundLimit',
      hide: true,
      disabled: true,
-      span: 12,
+      span: 8,
      minWidth: 230,
      value: 0,
      rules: [nonNegativeRule('剩余项目资金使用额度')],
@@ -174,7 +174,7 @@ export const option = {
      label: '申请临时额度（万元）',
      prop: 'applyLimit',
      formslot: true,
-      span: 12,
+      span: 8,
      minWidth: 180,
      rules: [
        { required: true, message: '请输入申请临时额度', trigger: 'blur' },
@@ -187,7 +187,7 @@ export const option = {
      type: 'date',
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD',
-      span: 12,
+      span: 8,
      minWidth: 140,
      rules: [{ required: true, message: '请选择申请有效期至', trigger: 'change' }],
    },
@@ -806,3 +806,16 @@
 .el-form-item__label {
  margin-left: 12px !important;
 }
+
+.el-form-item--default .el-form-item__label {
+  line-height: 14px;
+}
+.el-form-item--label-right .el-form-item__label {
+  align-items: center;
+}
+.el-form-item--default {
+  margin-bottom: 14px;
+}
+.el-form-item {
+  margin-bottom: 14px;
+}
@@ -13681,7 +13681,7 @@ export default {
    min-width: 56px;
    height: 22px;
    margin: 0 14px;
-    border-bottom: 3px solid #303133;
+    border-bottom: 4px solid #e4e7ed;
  }

  &__transport-plan-waybill-card {
@@ -13859,9 +13859,9 @@ export default {
    &::before {
      flex: 1;
      order: 2;
-      height: 2px;
+      height: 4px;
      content: '';
-      background: #606266;
+      background: #e4e7ed;
    }

    b.end {
@@ -134,7 +134,7 @@ export default {
 .route-map__node { display: grid; flex: 0 0 150px; justify-items: center; gap: 6px; text-align: center; strong { font-size: 16px; white-space: nowrap; } small { color: #606266; white-space: nowrap; } }
 .route-map__progress { color: #409eff !important; }
 .route-badge { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 4px; background: #67c23a; color: #fff; font-weight: 600; &.start { background: #409eff; } &.end { background: #e6a23c; } }
-.route-map__line { flex: 1 0 64px; min-width: 64px; height: 32px; border-bottom: 2px solid #606266; }
+.route-map__line { flex: 1 0 64px; min-width: 64px; height: 32px; border-bottom: 6px solid #e4e7ed; }
 .execution-detail-heading { padding: 20px 24px 12px; h3 { margin: 0; padding-left: 12px; border-left: 4px solid #409eff; font-size: 16px; } }
 .segment-detail { padding: 16px 24px; border-top: 1px solid #eff1f7; header { display: flex; align-items: center; justify-content: space-between; margin: -16px -24px 8px; padding: 12px 24px; cursor: pointer; background: #fafbfc; h3 { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0; font-size: 16px; } em { color: #409eff; font-style: normal; } } }
 .segment-detail__progress { color: #606266; font-size: 14px; font-weight: 400; }
@@ -651,7 +651,7 @@ export default {
 .route-overview { display: flex; align-items: flex-start; justify-content: flex-end; padding-top: 8px; overflow-x: auto; }
 .route-overview__node { display: grid; flex: 0 0 130px; justify-items: center; gap: 6px; text-align: center; strong { font-size: 16px; white-space: nowrap; } small { color: #606266; white-space: nowrap; } }
 .route-badge { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 4px; background: #67c23a; color: #fff; font-weight: 600; &.start { background: #409eff; } &.end { background: #e6a23c; } }
-.route-overview__line { flex: 1 0 56px; min-width: 56px; height: 32px; margin-top: 0; border-bottom: 2px solid #606266; }
+.route-overview__line { flex: 1 0 56px; min-width: 56px; height: 32px; margin-top: 0; border-bottom: 6px solid #e4e7ed; }
 .segment-header { min-height: 46px; padding: 0 20px; border-bottom: 1px solid #eff1f7; font-weight: 600; em { color: #409eff; font-style: normal; } }
 .segment-content { padding: 16px 24px; }
 .dispatch-form { :deep(.el-form-item) { margin-bottom: 16px; } :deep(.el-input), :deep(.el-select), :deep(.el-date-editor), :deep(.el-input-number) { width: 100%; } }
@@ -2446,7 +2446,7 @@ export default {
  .loading-detail__value { display: flex; flex-wrap: wrap; gap: 8px; text-align: left; }
  .loading-detail__steps { display: flex; align-items: flex-start; overflow-x: auto; padding: 8px 4px 16px; }
  .loading-detail__step { position: relative; min-width: 190px; flex: 1; text-align: center; }
-  .loading-detail__step:not(:last-child)::after { position: absolute; z-index: 0; top: 16px; left: calc(50% + 25px); width: calc(100% - 50px); height: 2px; content: ''; background: #606266; }
+  .loading-detail__step:not(:last-child)::after { position: absolute; z-index: 0; top: 16px; left: calc(50% + 25px); width: calc(100% - 50px); height: 6px; content: ''; background: #e4e7ed; }
  .loading-detail__step-line { display: flex; align-items: center; justify-content: center; }
  .loading-detail__step-dot { position: relative; z-index: 1; display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; color: #fff; border-radius: 4px; font-weight: 600; }
  .loading-detail__step-dot.start { background: #409eff; }.loading-detail__step-dot.middle { background: #67c23a; }.loading-detail__step-dot.end { background: #e6a23c; }
@@ -76,7 +76,7 @@
                  <div class="route-point">
                    <span :class="['route-node', node.type]">{{ node.text }}</span>
                    <div class="route-detail">
-                      <strong>{{ node.name }}</strong>
+                      <el-tooltip placement="top"><template #content>{{ node.name }}</template><strong>{{ node.name }}</strong></el-tooltip>
                      <span v-for="line in node.lines" :key="line">{{ line }}</span>
                    </div>
                  </div>
@@ -516,8 +516,8 @@ export default {
    }
  }
  .route-connector {
-    width: clamp(180px, 20vw, 344px);
-    flex: 0 0 clamp(180px, 20vw, 344px);
+    width: clamp(180px, 20vw, 266px);
+    flex: 0 0 clamp(180px, 20vw, 266px);
    padding-top: 2px;
    margin: 0 -6px;
    small {
@@ -530,8 +530,8 @@ export default {
      line-height: 1.2;
    }
    :deep(.el-progress-bar__outer) {
-      height: 8px !important;
-      background-color: #f1f2f5;
+      height: 6px !important;
+      background-color: #e4e7ed;
    }
    :deep(.el-progress-bar__inner) {
      background-color: #409eff;
@@ -543,6 +543,8 @@ export default {
    header {
      margin-bottom: 10px;
      font-weight: 600;
+      font-size: 14px;
+      text-align: center;
    }
    .el-link {
      display: flex;
@@ -8,10 +8,6 @@
      v-model="form"
      ref="crud"
      :permission="permissionList"
-      :before-open="beforeOpen"
-      @row-save="rowSave"
-      @row-update="rowUpdate"
-      @row-del="rowDel"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
@@ -25,7 +21,7 @@
          type="primary"
          icon="el-icon-plus"
          v-if="hasPermission('process_config_add')"
-          @click="$refs.crud.rowAdd()"
+          @click="openProcessConfig()"
          >新建过程配置
        </el-button>
        <el-button
@@ -46,27 +42,6 @@
        </el-button>
      </template>

-      <template #menu-form-before="{ disabled }">
-        <template v-if="!dialogReadonly">
-          <el-button
-            plain
-            :loading="disabled"
-            :disabled="disabled"
-            @click="handleProcessConfigSave('draft')"
-          >
-            保存草稿
-          </el-button>
-          <el-button
-            type="primary"
-            :loading="disabled"
-            :disabled="disabled"
-            @click="handleProcessConfigSave('enabled')"
-          >
-            保存并启用
-          </el-button>
-        </template>
-      </template>
-
      <template #status="{ row }">
        <el-tag :type="statusTagType(row.status)">
          {{ row.statusName || displayStatus(row.status) }}
@@ -79,101 +54,154 @@
        </span>
      </template>

-      <template #basicInfo-form>
-        <section-card title="基本信息">
-          <el-form
-            :model="form"
-            label-position="right"
-            label-width="calc(6em + 24px)"
-          >
-            <el-row :gutter="18">
-              <el-col :span="6">
-                <el-form-item label="配置名称" required>
-                  <el-input
-                    v-model="form.configName"
-                    :disabled="dialogReadonly"
-                    maxlength="100"
-                    placeholder="请输入"
-                  />
-                </el-form-item>
-              </el-col>
-              <el-col :span="6">
-                <el-form-item label="项目" required>
-                  <el-select
-                    v-model="selectedProjectId"
-                    clearable
-                    filterable
-                    remote
-                    :remote-method="loadProjectOptions"
-                    :loading="projectLoading"
-                    :disabled="dialogReadonly"
-                    placeholder="请选择"
-                    style="width: 100%"
-                    @change="handleProjectChange"
-                  >
-                    <el-option
-                      v-for="item in projectOptions"
-                      :key="item.id"
-                      :label="formatProjectLabel(item)"
-                      :value="String(item.id)"
-                    />
-                  </el-select>
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="运输完成时限">
-                  <div class="process-config-page__finish-days">
-                    <span>默认</span>
-                    <el-input
-                      v-model="form.defaultFinishDays"
-                      :disabled="dialogReadonly"
-                      maxlength="3"
-                      placeholder="请输入"
-                      @input="handleFinishDaysInput"
-                    />
-                    <span>天后完成运输</span>
-                  </div>
-                </el-form-item>
-              </el-col>
-              <el-col :span="24">
-                <el-form-item label="备注">
-                  <el-input
-                    v-model="form.remark"
-                    type="textarea"
-                    :rows="4"
-                    :disabled="dialogReadonly"
-                    maxlength="500"
-                    show-word-limit
-                    placeholder="请输入"
-                  />
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </el-form>
-        </section-card>
+      <template #menu="{ row, index }">
+        <el-link
+          type="primary"
+          v-if="hasPermission('process_config_view')"
+          @click="openProcessConfig(row, true)"
+        >
+          查看
+        </el-link>
+        <el-link
+          type="primary"
+          v-if="canEdit(row)"
+          @click="openProcessConfig(row, false)"
+        >
+          编辑
+        </el-link>
+        <el-link
+          type="primary"
+          v-if="hasPermission('process_config_copy')"
+          @click="handleCopy(row)"
+        >
+          复制
+        </el-link>
+        <el-link
+          type="primary"
+          v-if="canEnable(row)"
+          @click="handleAction('enable', row)"
+        >
+          启用
+        </el-link>
+        <el-link
+          type="primary"
+          v-if="canDisable(row)"
+          @click="handleAction('disable', row)"
+        >
+          停用
+        </el-link>
+        <el-link
+          type="danger"
+          v-if="canDelete(row)"
+          @click="rowDel(row)"
+        >
+          删除
+        </el-link>
      </template>
+    </avue-crud>

-      <template #nodeConfigJson-form>
-        <div class="process-config-page__custom-form">
-          <section-card title="现行过程节点">
-            <div class="process-config-page__timeline" v-if="enabledNodes.length">
-              <div class="process-config-page__timeline-line"></div>
-              <div
-                v-for="node in enabledNodes"
-                :key="node.key"
-                class="process-config-page__timeline-item"
-              >
-                <span class="process-config-page__timeline-dot"></span>
-                <div class="process-config-page__timeline-name">{{ node.name }}</div>
-                <div class="process-config-page__timeline-desc">
-                  <div v-for="text in timelineDescriptions(node)" :key="text">{{ text }}</div>
+    <el-dialog
+      :title="dialogTitle"
+      append-to-body
+      v-model="processBox"
+      width="92%"
+      top="4vh"
+      class="process-dialog"
+      @closed="resetProcess"
+    >
+      <el-form
+        ref="processForm"
+        :model="form"
+        label-position="right"
+        label-width="calc(6em + 24px)"
+        :disabled="dialogReadonly"
+        class="process-form dialog-form-label-fixed"
+      >
+        <section-card title="基本信息">
+          <el-row :gutter="18">
+            <el-col :span="6">
+              <el-form-item label="配置名称" required>
+                <el-input
+                  v-model="form.configName"
+                  :disabled="dialogReadonly"
+                  maxlength="100"
+                  placeholder="请输入"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item label="项目" required>
+                <el-select
+                  v-model="selectedProjectId"
+                  clearable
+                  filterable
+                  remote
+                  :remote-method="loadProjectOptions"
+                  :loading="projectLoading"
+                  :disabled="dialogReadonly"
+                  placeholder="请选择"
+                  style="width: 100%"
+                  @change="handleProjectChange"
+                >
+                  <el-option
+                    v-for="item in projectOptions"
+                    :key="item.id"
+                    :label="formatProjectLabel(item)"
+                    :value="String(item.id)"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="运输完成时限">
+                <div class="process-config-page__finish-days">
+                  <span>默认</span>
+                  <el-input
+                    v-model="form.defaultFinishDays"
+                    :disabled="dialogReadonly"
+                    maxlength="3"
+                    placeholder="请输入"
+                    @input="handleFinishDaysInput"
+                  />
+                  <span>天后完成运输</span>
                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="备注">
+                <el-input
+                  v-model="form.remark"
+                  type="textarea"
+                  :rows="4"
+                  :disabled="dialogReadonly"
+                  maxlength="500"
+                  show-word-limit
+                  placeholder="请输入"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </section-card>
+
+        <section-card title="现行过程节点">
+          <div class="process-config-page__timeline" v-if="enabledNodes.length">
+            <div class="process-config-page__timeline-line"></div>
+            <div
+              v-for="node in enabledNodes"
+              :key="node.key"
+              class="process-config-page__timeline-item"
+            >
+              <span class="process-config-page__timeline-dot"></span>
+              <div class="process-config-page__timeline-name">{{ node.name }}</div>
+              <div class="process-config-page__timeline-desc">
+                <div v-for="text in timelineDescriptions(node)" :key="text">{{ text }}</div>
              </div>
            </div>
-            <el-empty v-else description="请在节点设置中勾选过程节点" :image-size="72" />
-          </section-card>
+          </div>
+          <el-empty v-else description="请在节点设置中勾选过程节点" :image-size="72" />
+        </section-card>

-          <section-card title="节点设置">
+        <section-card title="节点设置">
          <el-table
            class="process-config-page__node-table"
            border
@@ -357,55 +385,21 @@
              </template>
            </el-table-column>
          </el-table>
-          </section-card>
-        </div>
-      </template>
+        </section-card>
+      </el-form>

-      <template #menu="{ row, index }">
-        <el-link
-          type="primary"
-          v-if="hasPermission('process_config_view')"
-          @click="$refs.crud.rowView(row, index)"
-        >
-          查看
-        </el-link>
-        <el-link
-          type="primary"
-          v-if="canEdit(row)"
-          @click="$refs.crud.rowEdit(row, index)"
-        >
-          编辑
-        </el-link>
-        <el-link
-          type="primary"
-          v-if="hasPermission('process_config_copy')"
-          @click="handleCopy(row)"
-        >
-          复制
-        </el-link>
-        <el-link
-          type="primary"
-          v-if="canEnable(row)"
-          @click="handleAction('enable', row)"
-        >
-          启用
-        </el-link>
-        <el-link
-          type="primary"
-          v-if="canDisable(row)"
-          @click="handleAction('disable', row)"
-        >
-          停用
-        </el-link>
-        <el-link
-          type="danger"
-          v-if="canDelete(row)"
-          @click="rowDel(row)"
-        >
-          删除
-        </el-link>
+      <template #footer>
+        <template v-if="!dialogReadonly">
+          <el-button plain :loading="submitting" :disabled="submitting" @click="submitProcessConfig('draft')">
+            保存草稿
+          </el-button>
+          <el-button type="primary" :loading="submitting" :disabled="submitting" @click="submitProcessConfig('enabled')">
+            保存并启用
+          </el-button>
+        </template>
+        <el-button @click="processBox = false">{{ dialogReadonly ? '关闭' : '取消' }}</el-button>
      </template>
-    </avue-crud>
+    </el-dialog>

    <empty-pagination
      :page="page"
@@ -519,6 +513,8 @@ export default {
      },
      selectionList: [],
      submitStatus: 1,
+      processBox: false,
+      submitting: false,
    };
  },
  computed: {
@@ -540,6 +536,10 @@ export default {
    enabledNodes() {
      return this.nodeRows.filter(item => item.enabled);
    },
+    dialogTitle() {
+      if (this.dialogReadonly) return '查看过程配置';
+      return this.form.id ? '编辑过程配置' : '新增过程配置';
+    },
  },
  created() {
    this.resetNodeRows();
@@ -853,11 +853,6 @@ export default {
      }
      return true;
    },
-    stopSubmitLoading(loading) {
-      if (typeof loading === 'function') {
-        loading();
-      }
-    },
    needsDuplicateVoucherConfirm() {
      const signNode = this.nodeRows.find(item => item.key === 'sign');
      const returnNode = this.nodeRows.find(item => item.key === 'return');
@@ -887,39 +882,74 @@ export default {
        }
      );
    },
-    submitRow(row, done, loading, status = this.submitStatus) {
+    openProcessConfig(row, readonly = false) {
+      this.dialogReadonly = readonly;
      this.submitStatus = 1;
-      this.syncNodeFields();
-      const submitRow = this.normalizeRow({ ...row, status });
-      if (!this.validateRow(submitRow)) {
-        this.stopSubmitLoading(loading);
+      if (row && row.id) {
+        api.getDetail(row.id).then(res => {
+          const data = res.data.data || {};
+          this.form = data;
+          this.selectedProjectId = data.projectIds ? String(data.projectIds) : '';
+          this.ensureSelectedProjectOption();
+          this.parseNodeConfig(data);
+          this.processBox = true;
+        });
        return;
      }
-      this.confirmDuplicateVoucher()
-        .then(() => api.submit(submitRow))
-        .then(() => {
-          this.onLoad(this.page);
-          this.$message({ type: 'success', message: '操作成功!' });
-          done();
-        })
-        .catch(error => {
-          if (error !== 'cancel' && error !== 'close') {
-            window.console.log(error);
-          }
-          this.stopSubmitLoading(loading);
-        });
+      this.form = {
+        configName: '',
+        projectIds: '',
+        projectNames: '',
+        defaultFinishDays: '',
+        remark: '',
+        status: 0,
+      };
+      this.selectedProjectId = '';
+      this.resetNodeRows();
+      this.processBox = true;
    },
-    rowSave(row, done, loading) {
-      this.submitRow(row, done, loading);
+    submitProcessConfig(mode) {
+      this.$refs.processForm.validate(valid => {
+        if (!valid) return;
+        this.submitting = true;
+        this.submitStatus = mode === 'draft' ? 2 : 1;
+        this.syncNodeFields();
+        const submitRow = this.normalizeRow({ ...this.form, status: this.submitStatus });
+        if (!this.validateRow(submitRow)) {
+          this.submitting = false;
+          return;
+        }
+        this.confirmDuplicateVoucher()
+          .then(() => api.submit(submitRow))
+          .then(() => {
+            this.submitting = false;
+            this.processBox = false;
+            this.onLoad(this.page);
+            this.$message({ type: 'success', message: '操作成功!' });
+          })
+          .catch(error => {
+            this.submitting = false;
+            if (error !== 'cancel' && error !== 'close') {
+              window.console.log(error);
+            }
+          });
+      });
    },
-    rowUpdate(row, index, done, loading) {
-      this.submitRow(row, done, loading);
-    },
-    handleProcessConfigSave(mode) {
-      this.submitStatus = mode === 'draft' ? 2 : 1;
-      if (this.$refs.crud && typeof this.$refs.crud.rowSave === 'function') {
-        this.$refs.crud.rowSave();
-      }
+    resetProcess() {
+      this.dialogReadonly = false;
+      this.submitting = false;
+      this.submitStatus = 1;
+      this.form = {
+        configName: '',
+        projectIds: '',
+        projectNames: '',
+        defaultFinishDays: '',
+        remark: '',
+        status: 0,
+      };
+      this.selectedProjectId = '';
+      this.resetNodeRows();
+      this.$refs.processForm?.clearValidate();
    },
    rowDel(row) {
      this.$confirm('确定将选择数据删除?', {
@@ -963,35 +993,6 @@ export default {
      }
      this.selectionClear();
    },
-    beforeOpen(done, type) {
-      this.dialogReadonly = type === 'view';
-      this.submitStatus = 1;
-      if (type === 'add') {
-        this.form = {
-          configName: '',
-          projectIds: '',
-          projectNames: '',
-          defaultFinishDays: '',
-          remark: '',
-          status: 0,
-        };
-        this.selectedProjectId = '';
-        this.resetNodeRows();
-        done();
-        return;
-      }
-      if (['edit', 'view'].includes(type)) {
-        api.getDetail(this.form.id).then(res => {
-          this.form = res.data.data || {};
-          this.selectedProjectId = this.form.projectIds ? String(this.form.projectIds) : '';
-          this.ensureSelectedProjectOption();
-          this.parseNodeConfig(this.form);
-          done();
-        });
-        return;
-      }
-      done();
-    },
    searchReset() {
      this.query = {};
      this.applyDefaultDeptSearch();
@@ -1239,5 +1240,10 @@ export default {
  :deep(.el-table__body tr:nth-child(even) > td.el-table__cell) {
    background: #fafafa;
  }
+
+  :deep(.process-dialog .el-dialog__body) {
+    max-height: 72vh;
+    overflow: auto;
+  }
 }
 </style>
@@ -153,15 +153,16 @@
    destroy-on-close
    :before-close="beforeUploadDialogClose"
  >
-    <el-form
-      ref="uploadFormRef"
-      :model="editing"
-      :rules="rules"
-      label-position="right"
-      label-width="auto"
-      class="voucher-manage-page__upload-form"
-    >
-      <el-form-item label="项目名称" prop="projectId"
+    <section-card>
+      <el-form
+        ref="uploadFormRef"
+        :model="editing"
+        :rules="rules"
+        label-position="right"
+        label-width="auto"
+        class="voucher-manage-page__upload-form"
+      >
+        <el-form-item label="项目名称" prop="projectId"
        ><el-select
          v-model="editing.projectId"
          class="voucher-manage-page__project-select"
@@ -169,13 +170,13 @@
          filterable
          placeholder="请选择"
          @change="changeProject"
-          ><el-option
-            v-for="item in projectOptions"
-            :key="item.id"
-            :label="item.projectName"
-            :value="item.id" /></el-select
-      ></el-form-item>
-      <el-form-item label="执行凭证" prop="fileUrl"
+        ><el-option
+          v-for="item in projectOptions"
+          :key="item.id"
+          :label="item.projectName"
+          :value="item.id" /></el-select
+        ></el-form-item>
+        <el-form-item label="执行凭证" prop="fileUrl"
        ><el-upload
          action="#"
          accept=".zip,.7z"
@@ -183,26 +184,28 @@
          :limit="1"
          :on-change="selectVoucherFile"
          :on-remove="clearFile"
-          ><el-button
-            type="primary"
-            :loading="uploading"
-            :disabled="!editing.projectId || uploading"
-            >上传</el-button
-          ><template #tip
-            ><span class="voucher-manage-page__upload-tip"
-              >支持 zip、7z 格式，采用分片上传，上传中断后可在“上传进度”继续上传。</span
-            ></template
-          ></el-upload
+        ><el-button
+          type="primary"
+          :loading="uploading"
+          :disabled="!editing.projectId || uploading"
+        >上传</el-button
+        ><template #tip
+        ><span class="voucher-manage-page__upload-tip"
+        >支持 zip、7z 格式，采用分片上传，上传中断后可在“上传进度”继续上传。</span
+        ></template
+        ></el-upload
        ><el-progress
          v-if="uploading || editing.fileTaskId"
          :percentage="uploadPercent"
          :status="uploadPercent === 100 ? 'success' : undefined"
          class="voucher-manage-page__upload-progress"
-      /></el-form-item>
-      <el-form-item label="关联运输批次" prop="waybillImportBatchIds"
+        /></el-form-item>
+        <el-form-item label="关联运输批次" prop="waybillImportBatchIds"
        ><el-button type="primary" @click="openBatchDialog">选择</el-button></el-form-item
-      >
-    </el-form>
+        >
+      </el-form>
+    </section-card>
+
    <el-table :data="selectedBatches" border
      ><el-table-column type="index" label="序号" width="80" /><el-table-column
        prop="batchNo"
@@ -405,6 +408,7 @@ import md5 from 'js-md5';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { getList as getProjectList } from '@/api/business/project-apply';
 import * as api from '@/api/business/voucher-manage';
+import SectionCard from '@/components/section-card/main.vue';

 const loading = ref(false),
  rows = ref([]),
Author	SHA1	Message	Date
gxwebsoft	c68ce66405	style(styles): 调整表单项标签行高及间距 - 将.el-form-item--default的标签行高从18px改为14px - 为.el-form-item--default和.el-form-item添加底部外边距14px - 保持.el-form-item--label-right标签垂直居中对齐效果不变	2026-08-14 08:53:33 +08:00
gxwebsoft	9948c8f33b	refactor(process-config): 重构过程配置弹窗为手写 el-dialog - 将 process-config 弹窗由 Avue 内置弹窗改为手写 el-dialog 对齐 customer-archive 风格 - 移除 avue-crud 原有的弹窗相关生命周期和插槽方法 - 新增 openProcessConfig、submitProcessConfig、resetProcess 等方法管理弹窗状态和数据提交 - 更新模板结构，新增具备基本信息、过程节点、节点设置的表单布局和底部操作按钮 - 关闭原 avue-crud 弹窗的内置按钮，改由手写对话框控制操作 - 优化样式，增加弹窗内部滚动，保持 footer 固定 - 微调业务组件样式，调整边框和表单布局宽度以适配新弹窗设计	2026-08-14 08:46:39 +08:00
gxwebsoft	2b4179f3cd	style(business): 调整分隔线高度和颜色及表单标签样式 - 将分隔线高度从2px调整为4px - 修改分隔线背景色为#e4e7ed，替换原来的#606266 - 为.el-form-item--default .el-form-item__label设置行高18px - 为.el-form-item--label-right .el-form-item__label添加垂直居中样式	2026-08-14 08:29:01 +08:00
gxwebsoft	bac0da2b5f	Merge remote-tracking branch 'origin/master'	2026-08-14 08:18:49 +08:00
gxwebsoft	9e5fbfd2d4	style(business): 调整多处组件样式优化详情页视觉效果 - 修改 loading-manage.vue 中流程线条高度和颜色为6px浅灰色 - 在 master-order.vue 添加节点名称悬浮提示，调整进度条宽度和高度，居中标题字号 - 更新 master-order-detail.vue 路由线条样式加粗为6px浅灰色 - 优化 master-order-dispatch.vue 路由线条宽度改为6px浅灰色 - voucher-manage.vue 表单结构新增 section-card 容器组件，上传区和关联运输批次按钮布局优化 - voucher-manage.vue 引入 SectionCard 组件用于包裹上传表单区域	2026-08-14 08:18:45 +08:00