diff --git a/web-admin/src/views/pl/etc-vehicle-recharge-apply/columnFilterDefs.ts b/web-admin/src/views/pl/etc-vehicle-recharge-apply/columnFilterDefs.ts
new file mode 100644
index 000000000..cb8dfd883
--- /dev/null
+++ b/web-admin/src/views/pl/etc-vehicle-recharge-apply/columnFilterDefs.ts
@@ -0,0 +1,134 @@
+import type { ColumnFilterDef } from '@/composables/useClientColumnFilters'
+
+const RECHARGE_TYPE_OPTIONS = [{ value: 'etc', label: 'ETC' }]
+
+const RECHARGE_STATUS_OPTIONS = [
+  { value: 'draft', label: '草稿' },
+  { value: 'in_approval', label: '审批中' },
+  { value: 'rejected', label: '已驳回' },
+  { value: 'disbursed', label: '已发放' },
+  { value: 'cancelled', label: '已作废' }
+]
+
+/** ETC 申请列表列头漏斗（服务端）。 */
+export const plVehicleRechargeApplyColumnFilterDefs: ColumnFilterDef[] = [
+  { prop: 'applyNo', label: '申请单号', type: 'text', queryKey: 'applyNo' },
+  { prop: 'licensePlate', label: '车牌号', type: 'text', queryKey: 'licensePlate' },
+  {
+    prop: 'rechargeType',
+    label: '充值类型',
+    type: 'enum',
+    queryKey: 'rechargeType',
+    enumOptions: RECHARGE_TYPE_OPTIONS
+  },
+  {
+    prop: 'applyDate',
+    label: '申请日期',
+    type: 'datetime',
+    queryKeyFrom: 'applyDateFrom',
+    queryKeyTo: 'applyDateTo'
+  },
+  { prop: 'odometerKm', label: '期初公里数', type: 'number', queryKeyPrefix: 'odometerKm' },
+  { prop: 'applicantName', label: '申请人', type: 'text', queryKey: 'applicantName' },
+  { prop: 'remark', label: '备注', type: 'text', queryKey: 'remark' },
+  {
+    prop: 'status',
+    label: '状态',
+    type: 'enum',
+    queryKey: 'status',
+    enumOptions: RECHARGE_STATUS_OPTIONS
+  },
+  {
+    prop: 'createTime',
+    label: '创建时间',
+    type: 'datetime',
+    queryKeyFrom: 'createTimeFrom',
+    queryKeyTo: 'createTimeTo'
+  }
+]
+
+/** ETC 审批列表列头漏斗（服务端；在申请 defs 基础上增加当前节点）。 */
+export const plVehicleRechargeApprovalColumnFilterDefs: ColumnFilterDef[] = [
+  ...plVehicleRechargeApplyColumnFilterDefs.filter((d) => d.prop !== 'createTime'),
+  { prop: 'currentNodeName', label: '当前节点', type: 'text', queryKey: 'currentNodeName' },
+  {
+    prop: 'createTime',
+    label: '创建时间',
+    type: 'datetime',
+    queryKeyFrom: 'createTimeFrom',
+    queryKeyTo: 'createTimeTo'
+  }
+]
+
+/** ETC 发放看板列头漏斗（服务端）。 */
+export const plVehicleRechargeDisburseColumnFilterDefs: ColumnFilterDef[] = [
+  { prop: 'applyNo', label: '申请单号', type: 'text', queryKey: 'applyNo' },
+  {
+    prop: 'applyDate',
+    label: '申请日期',
+    type: 'datetime',
+    queryKeyFrom: 'applyDateFrom',
+    queryKeyTo: 'applyDateTo'
+  },
+  { prop: 'applicantName', label: '申请人', type: 'text', queryKey: 'applicantName' },
+  { prop: 'odometerKm', label: '期初公里数', type: 'number', queryKeyPrefix: 'odometerKm' },
+  {
+    prop: 'applyStatus',
+    label: '申请状态',
+    type: 'enum',
+    queryKey: 'applyStatus',
+    enumOptions: RECHARGE_STATUS_OPTIONS
+  },
+  { prop: 'licensePlate', label: '车牌号', type: 'text', queryKey: 'licensePlate' },
+  {
+    prop: 'rechargeType',
+    label: '充值类型',
+    type: 'enum',
+    queryKey: 'rechargeType',
+    enumOptions: RECHARGE_TYPE_OPTIONS
+  },
+  { prop: 'rechargeOrderNo', label: '充值订单号', type: 'text', queryKey: 'rechargeOrderNo' },
+  {
+    prop: 'rechargeDate',
+    label: '充值日期',
+    type: 'datetime',
+    queryKeyFrom: 'rechargeDateFrom',
+    queryKeyTo: 'rechargeDateTo'
+  },
+  { prop: 'cardNo', label: '卡号', type: 'text', queryKey: 'cardNo' },
+  { prop: 'gasStation', label: '加油站/渠道', type: 'text', queryKey: 'gasStation' },
+  { prop: 'amount', label: '金额(元)', type: 'number', queryKeyPrefix: 'amount' },
+  {
+    prop: 'recordCreateByName',
+    label: '登记人',
+    type: 'text',
+    queryKey: 'recordCreateByName'
+  }
+]
+
+/** ETC 审批人设置（客户端）。与油卡共用同一套节点筛选定义。 */
+export const plVehicleRechargeWorkflowColumnFilterDefs: ColumnFilterDef[] = [
+  { prop: 'nodeName', label: '节点名称', type: 'text' },
+  {
+    prop: 'actionType',
+    label: '节点动作',
+    type: 'enum',
+    enumOptions: [
+      { value: 'approve', label: '审批' },
+      { value: 'disburse', label: '发放登记' }
+    ],
+    getValue: (row) => row.actionType || row.action_type || 'approve'
+  },
+  { prop: 'nodeOrder', label: '节点顺序', type: 'number' },
+  { prop: 'approverName', label: '审批人', type: 'text' },
+  {
+    prop: 'configStatus',
+    label: '配置状态',
+    type: 'enum',
+    enumOptions: [
+      { value: 'configured', label: '已配置' },
+      { value: 'unconfigured', label: '未配置' }
+    ],
+    getValue: (row) => ((row.approverId ?? row.approver_id) ? 'configured' : 'unconfigured')
+  }
+]
diff --git a/web-admin/src/views/pl/etc-vehicle-recharge-apply/index.vue b/web-admin/src/views/pl/etc-vehicle-recharge-apply/index.vue
new file mode 100644
index 000000000..0d4feb953
--- /dev/null
+++ b/web-admin/src/views/pl/etc-vehicle-recharge-apply/index.vue
@@ -0,0 +1,1212 @@
+<!-- ETC充值申请 -->
+<template>
+  <div class="page-container">
+    <section class="panel">
+
+
+      <div class="list-toolbar">
+        <div class="list-toolbar-row">
+          <ListQuickSearchInput
+            v-model="quickSearchKeyword"
+            placeholder="申请单号/车牌"
+            @search="handleQuickSearch"
+            @clear="handleQuickSearchClear"
+          />
+          <el-button class="btn-main" type="primary" @click="handleAdd">
+            <el-icon><Plus /></el-icon>新增申请
+          </el-button>
+          <ListToolbarOverflow :items="toolbarOverflowItems">
+            <template #export>
+              <ListExportDropdown
+                :export-fn="vehicleRechargeApplyApi.export"
+                :get-filter-params="getRechargeApplyExportFilterParams"
+                :has-selection="true"
+                :selected-ids="selectedRows.map((r) => r.id)"
+                :visible-columns="rechargeApplyExportColumns"
+                :additional-menu-items="rechargeApplyZipMenuItems"
+                filename="ETC充值申请.xlsx"
+              />
+            </template>
+          </ListToolbarOverflow>
+
+          <ListToolbarEndActions
+            :loading="loading"
+            :column-defs="listColumnDefs"
+            v-model:visible-columns="visibleColumns"
+            v-model:check-all="checkAll"
+            :is-indeterminate="isIndeterminate"
+            @refresh="fetchData"
+            @reset-columns="handleResetColumns"
+          />
+        </div>
+      </div>
+
+      <div class="list-body list-wrap">
+        <div class="table-scroll bx-list-table-wrap">
+          <ListTable
+            table-key="pl-etc-vehicle-recharge-apply"
+          class="list-table"
+          :data="tableData"
+          v-loading="loading"
+          stripe
+          row-key="id"
+          @selection-change="handleSelectionChange"
+          @row-dblclick="handleView"
+        >
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column
+            type="index"
+            label="序号"
+            width="68"
+            align="center"
+            header-align="center"
+            :index="(index) => (pagination.page - 1) * pagination.pageSize + index + 1"
+          />
+          <el-table-column prop="applyNo" label="申请单号" min-width="170" show-overflow-tooltip>
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">申请单号</span>
+                <ColumnHeaderFilter
+                  prop="applyNo"
+                  label="申请单号"
+                  type="text"
+                  :is-active="isFilterActive('applyNo')"
+                  :model-value="filters.applyNo || null"
+                  @update:model-value="(v) => setFilterState('applyNo', v)"
+                />
+              </div>
+            </template>
+
+            <template #default="{ row }">
+              <el-link type="primary" @click="handleView(row)">{{ row.applyNo }}</el-link>
+            </template>
+          </el-table-column>
+          <el-table-column
+            v-if="isColumnVisible('licensePlate')"
+            prop="licensePlate"
+            label="车牌号"
+            min-width="160"
+            show-overflow-tooltip
+            align="center"
+          >
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">车牌号</span>
+                <ColumnHeaderFilter
+                  prop="licensePlate"
+                  label="车牌号"
+                  type="text"
+                  :is-active="isFilterActive('licensePlate')"
+                  :model-value="filters.licensePlate || null"
+                  @update:model-value="(v) => setFilterState('licensePlate', v)"
+                />
+              </div>
+            </template>
+
+            <template #default="{ row }">
+              {{ formatPlVehiclePlateDisplay(row.licensePlate, undefined, vehicleTrailerLookup) }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            v-if="isColumnVisible('rechargeType')"
+            prop="rechargeType"
+            label="充值类型"
+            min-width="100"
+            align="center"
+          >
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">充值类型</span>
+                <ColumnHeaderFilter
+                  prop="rechargeType"
+                  label="充值类型"
+                  type="enum"
+                  :enum-options="enumOptionsFor('rechargeType')"
+                  :is-active="isFilterActive('rechargeType')"
+                  :model-value="filters.rechargeType || null"
+                  @update:model-value="(v) => setFilterState('rechargeType', v)"
+                />
+              </div>
+            </template>
+
+            <template #default="{ row }">
+              <el-tag :type="getPlRechargeTypeTagType(row.rechargeType)" size="small">
+                {{ getPlRechargeTypeLabel(row.rechargeType) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column
+            v-if="isColumnVisible('applyDate')"
+            prop="applyDate"
+            label="申请日期"
+            min-width="120"
+            align="center"
+          >
+<template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">申请日期</span>
+                <ColumnHeaderFilter
+                  prop="applyDate"
+                  label="申请日期"
+                  type="datetime"
+                  :is-active="isFilterActive('applyDate')"
+                  :model-value="filters.applyDate || null"
+                  @update:model-value="(v) => setFilterState('applyDate', v)"
+                />
+              </div>
+            </template>
+          </el-table-column>
+
+<el-table-column
+            v-if="isColumnVisible('odometerKm')"
+            prop="odometerKm"
+            label="期初公里数"
+            min-width="110"
+            align="center"
+          >
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">期初公里数</span>
+                <ColumnHeaderFilter
+                  prop="odometerKm"
+                  label="期初公里数"
+                  type="number"
+                  :is-active="isFilterActive('odometerKm')"
+                  :model-value="filters.odometerKm || null"
+                  @update:model-value="(v) => setFilterState('odometerKm', v)"
+                />
+              </div>
+            </template>
+            <template #default="{ row }">{{ row.odometerKm ?? '—' }}</template>
+          </el-table-column>
+          <el-table-column
+            v-if="isColumnVisible('applicantName')"
+            prop="applicantName"
+            label="申请人"
+            min-width="100"
+            align="center"
+          >
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">申请人</span>
+                <ColumnHeaderFilter
+                  prop="applicantName"
+                  label="申请人"
+                  type="text"
+                  :is-active="isFilterActive('applicantName')"
+                  :model-value="filters.applicantName || null"
+                  @update:model-value="(v) => setFilterState('applicantName', v)"
+                />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            v-if="isColumnVisible('attachmentUrls')"
+            prop="attachmentUrls"
+            label="附件"
+            min-width="220"
+            align="left"
+            header-align="left"
+          >
+            <template #default="{ row }">
+              <PlPlanDocumentAttachmentCell
+                :attachments="toRechargeAttachmentItems(row.attachmentUrls)"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column
+            v-if="isColumnVisible('remark')"
+            prop="remark"
+            label="备注"
+            min-width="160"
+            align="center"
+            header-align="center"
+            show-overflow-tooltip
+          >
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">备注</span>
+                <ColumnHeaderFilter
+                  prop="remark"
+                  label="备注"
+                  type="text"
+                  :is-active="isFilterActive('remark')"
+                  :model-value="filters.remark || null"
+                  @update:model-value="(v) => setFilterState('remark', v)"
+                />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            v-if="isColumnVisible('status')"
+            prop="status"
+            label="状态"
+            min-width="100"
+            align="center"
+          >
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">状态</span>
+                <ColumnHeaderFilter
+                  prop="status"
+                  label="状态"
+                  type="enum"
+                  :enum-options="enumOptionsFor('status')"
+                  :is-active="isFilterActive('status')"
+                  :model-value="filters.status || null"
+                  @update:model-value="(v) => setFilterState('status', v)"
+                />
+              </div>
+            </template>
+
+            <template #default="{ row }">
+              <el-tag :type="getPlRechargeApplyStatusTagType(row.status)" size="small">
+                {{ getPlRechargeApplyStatusLabel(row.status) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column
+            v-if="isColumnVisible('createTime')"
+            prop="createTime"
+            label="创建时间"
+            min-width="170"
+            align="center"
+          >
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">创建时间</span>
+                <ColumnHeaderFilter
+                  prop="createTime"
+                  label="创建时间"
+                  type="datetime"
+                  :is-active="isFilterActive('createTime')"
+                  :model-value="filters.createTime || null"
+                  @update:model-value="(v) => setFilterState('createTime', v)"
+                />
+              </div>
+            </template>
+            <template #default="{ row }">{{ formatPlDateTime(row.createTime) }}</template>
+          </el-table-column>
+        </ListTable>
+
+        
+        </div>
+        <div>
+          <div class="pagination list-pager-bar">
+          <div class="list-pager-selected">
+            已选 <span class="sel-num">{{ selectedRows.length }}</span> 项
+          </div>
+
+          <el-pagination
+            v-model:current-page="pagination.page"
+            v-model:page-size="pagination.pageSize"
+            :total="pagination.total"
+            :page-sizes="[10, 20, 100, 500]"
+            layout="total, sizes, prev, pager, next"
+            @size-change="fetchData"
+            @current-change="fetchData"
+          />
+        </div>
+        </div>
+      </div>
+    </section>
+
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      width="720px"
+      align-center
+      class="dialog-form-layout order-module-dialog-mask"
+      destroy-on-close
+      @closed="resetForm"
+    >
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-position="right"
+        label-width="100px"
+        class="pl-dialog-form"
+        scroll-to-error
+      >
+        <div class="form-grid-2">
+          <el-form-item v-if="formData.applyNo" label="申请单号">
+            <el-input v-model="formData.applyNo" disabled />
+          </el-form-item>
+          <el-form-item label="申请人" prop="applicantId">
+            <el-select
+              v-model="formData.applicantId"
+              filterable
+              placeholder="请选择申请人"
+              style="width: 100%"
+            >
+              <el-option
+                v-for="user in userOptions"
+                :key="user.userId"
+                :label="user.displayName"
+                :value="user.userId"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="车牌号" prop="licensePlate">
+            <PlVehicleSelect
+              v-model="formData.licensePlate"
+              vehicle-type="self"
+              placeholder="请选择自有车牌"
+            />
+          </el-form-item>
+          <el-form-item label="充值类型" prop="rechargeType">
+            <el-input model-value="ETC" disabled />
+          </el-form-item>
+          <el-form-item label="申请日期" prop="applyDate">
+            <el-date-picker v-model="formData.applyDate" type="date" value-format="YYYY-MM-DD" style="width: 100%" />
+          </el-form-item>
+          <el-form-item label="期初公里数" prop="odometerKm">
+            <el-input-number
+              v-model="formData.odometerKm"
+              :min="0"
+              :precision="1"
+              style="width: 100%"
+              placeholder="请输入期初公里数"
+            />
+          </el-form-item>
+          <el-form-item label="附件" prop="attachmentUrls" class="form-col-span-2">
+            <AttachmentUploadField
+              ref="attachmentUploadRef"
+              v-model="formData.attachmentUrls"
+              folder="pl/vehicle-recharge/apply"
+              accept="image/*,.pdf"
+              :limit="5"
+              @update:model-value="() => formRef?.validateField('attachmentUrls')"
+            />
+          </el-form-item>
+          <el-form-item label="备注" class="form-col-span-2">
+            <el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="备注" />
+          </el-form-item>
+        </div>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogVisible = false">
+            <el-icon><Close /></el-icon>取消
+          </el-button>
+          <el-button
+            class="btn-ghost"
+            :loading="submitLoading"
+            :disabled="saveAndSubmitLoading"
+            @click="handleSubmit"
+          >
+            <el-icon><Check /></el-icon>保存
+          </el-button>
+          <el-button
+            class="btn-main"
+            type="primary"
+            :loading="saveAndSubmitLoading"
+            :disabled="submitLoading"
+            @click="handleSaveAndSubmit"
+          >
+            <el-icon><Upload /></el-icon>保存并提交
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <SystemViewDialog
+      v-model:visible="viewVisible"
+      :title="viewDetail?.applyNo || '申请详情'"
+      :sections="viewSections"
+      :loading="viewLoading"
+      width="960px"
+      modal-class="order-module-dialog-mask"
+      append-to-body
+    >
+      <template v-if="viewingRecord && ['draft', 'rejected'].includes(viewingRecord.status)" #hero-actions>
+        <el-button
+          class="btn-ghost"
+          :loading="workflowSubmitLoadingMap[viewingRecord!.id]"
+          @click="handleWorkflowSubmit(viewingRecord!)"
+        >
+          <el-icon><Upload /></el-icon>提交
+        </el-button>
+        <el-button class="btn-main" type="primary" @click="handleEdit(viewingRecord!)">
+          <el-icon><Edit /></el-icon>编辑
+        </el-button>
+        <el-button
+          class="btn-ghost"
+          type="warning"
+          :loading="cancelLoadingMap[viewingRecord!.id]"
+          @click="handleViewCancel"
+        >
+          <el-icon><CircleClose /></el-icon>作废
+        </el-button>
+      </template>
+      <template v-else-if="canWithdraw(viewingRecord)" #hero-actions>
+        <el-button
+          class="btn-ghost"
+          :loading="!!withdrawLoadingMap[viewingRecord!.id]"
+          @click="handleWithdraw(viewingRecord!)"
+        >
+          <el-icon><RefreshLeft /></el-icon>撤回
+        </el-button>
+      </template>
+      <template #approval-flow>
+        <BxApprovalFlowTabs
+          section-title="审批记录"
+          :nodes="viewApprovalFlowNodes"
+          :history="viewApprovalHistoryItems"
+          :loading="viewLoading"
+        />
+      </template>
+      <template #record-attachments>
+        <AttachmentUploadField
+          :model-value="viewDetail?.record?.attachmentUrls || ''"
+          disabled
+          compact
+        />
+      </template>
+    </SystemViewDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import mittBus from '@/utils/sys/mittBus'
+import ListQuickSearchInput from '@/components/business/list-quick-search-input/index.vue'
+import ColumnHeaderFilter from '@/components/business/column-header-filter/index.vue'
+import ListToolbarEndActions from '@/components/business/list-toolbar-end-actions/index.vue'
+import ListToolbarOverflow from '@/components/business/list-toolbar-overflow/index.vue'
+import type { ListToolbarOverflowItem } from '@/components/business/list-toolbar-overflow/types'
+import ListExportDropdown from '@/components/business/list-export-dropdown/index.vue'
+import {
+  overflowClearFiltersItem,
+  overflowEditItem,
+  overflowExportPlaceholder
+} from '@/utils/list-toolbar-overflow-items'
+import { usePersistedListColumns } from '@/composables/usePersistedListColumns'
+import { useServerColumnFilters } from '@/composables/useServerColumnFilters'
+import { useColumnSort } from '@/composables/useColumnSort'
+import { plVehicleRechargeApplyColumnFilterDefs } from '@/views/pl/etc-vehicle-recharge-apply/columnFilterDefs'
+import {
+  Check,
+  CircleClose,
+  Close,
+  Edit,
+  Plus,
+  RefreshLeft,
+  Upload
+} from '@element-plus/icons-vue'
+import {
+  vehicleApi,
+  vehicleRechargeApplyApi,
+  type PlanDocumentAttachmentItem,
+  type Vehicle,
+  type VehicleRechargeApply
+} from '@/api/pl'
+import { pickBxData, pickBxPageResult } from '@/utils/http/bx'
+import { fetchAllPagedRecords } from '@/utils/fetch-paged-list'
+import { fetchUserOptions } from '@/api/admin'
+import AttachmentUploadField from '@/components/business/attachment-upload-field/index.vue'
+import PlPlanDocumentAttachmentCell from '@/components/business/pl-plan-document-attachment-cell/index.vue'
+import PlVehicleSelect from '@/components/business/pl/PlVehicleSelect.vue'
+import SystemViewDialog, { type ViewSection } from '@/components/business/system-view-dialog/index.vue'
+import BxApprovalFlowTabs from '@/components/bx/base/BxApprovalFlowTabs.vue'
+import { useUserStore } from '@/store/modules/user'
+import {
+  buildVehicleTrailerLookup,
+  formatPlDateTime,
+  formatPlVehiclePlateDisplay,
+  getPlRechargeApplyStatusLabel,
+  getPlRechargeApplyStatusTagType,
+  getPlRechargeTypeLabel,
+  getPlRechargeTypeTagType,
+  mapVehicleRechargeApprovalFlowToNodes
+} from '@/utils/pl-display'
+import { syncViewRowFromFlatList } from '@/utils/view-dialog-refresh'
+
+const userStore = useUserStore()
+const route = useRoute()
+const router = useRouter()
+
+const listColumnDefs = [
+  { prop: 'licensePlate', label: '车牌号' },
+  { prop: 'rechargeType', label: '充值类型' },
+  { prop: 'applyDate', label: '申请日期' },
+  { prop: 'odometerKm', label: '期初公里数' },
+  { prop: 'applicantName', label: '申请人' },
+  { prop: 'attachmentUrls', label: '附件' },
+  { prop: 'remark', label: '备注' },
+  { prop: 'status', label: '状态' },
+  { prop: 'createTime', label: '创建时间', defaultVisible: false }
+]
+
+const {
+  visibleColumns,
+  checkAll,
+  isIndeterminate,
+  isColumnVisible,
+  resetToDefault
+} = usePersistedListColumns('pl-etc-vehicle-recharge-apply-list-columns-v2', listColumnDefs)
+
+
+const {
+  filters,
+  hasActiveFilters,
+  setFilterState,
+  clearAllFilters,
+  isFilterActive,
+  toQueryParams,
+  resetToInitial,
+  watchVisibleColumns
+} = useServerColumnFilters(plVehicleRechargeApplyColumnFilterDefs, {
+  onChange: () => handleSearch()
+})
+
+const toolbarOverflowItems = computed<ListToolbarOverflowItem[]>(() => {
+  const row = selectedRows.value.length === 1 ? selectedRows.value[0] : null
+  const draftOrRejected = !!row && ['draft', 'rejected'].includes(row.status)
+  return [
+    overflowEditItem({
+      disabled: !draftOrRejected,
+      onClick: () => handleToolbarEdit()
+    }),
+    {
+      key: 'submit',
+      label: '提交',
+      icon: Upload,
+      disabled: !draftOrRejected,
+      loading: !!(row && workflowSubmitLoadingMap[row.id]),
+      onClick: () => handleToolbarWorkflowSubmit()
+    },
+    {
+      key: 'cancel',
+      label: '作废',
+      icon: CircleClose,
+      type: 'warning',
+      disabled: !draftOrRejected,
+      loading: !!(row && cancelLoadingMap[row.id]),
+      onClick: () => handleToolbarCancel()
+    },
+    {
+      key: 'withdraw',
+      label: '撤回',
+      icon: RefreshLeft,
+      disabled: !row || !canWithdraw(row),
+      loading: !!(row && withdrawLoadingMap[row.id]),
+      onClick: () => handleToolbarWithdraw()
+    },
+    overflowExportPlaceholder(),
+    overflowClearFiltersItem(hasActiveFilters.value, () => clearAllFilters())
+  ]
+})
+
+const {
+  sortField,
+  sortOrder,
+  setSort,
+  clearSort,
+  isSortActive,
+  toQueryParams: toSortQueryParams,
+  watchVisibleColumns: watchSortVisibleColumns
+} = useColumnSort({
+  onChange: () => handleSearch()
+})
+
+provide('crmColumnSort', {
+  setSort,
+  clearSort,
+  isSortActive,
+  sortField,
+  sortOrder
+})
+
+function enumOptionsFor(prop: string) {
+  const def = plVehicleRechargeApplyColumnFilterDefs.find((d) => d.prop === prop)
+  return (def?.enumOptions || []).map((o) => ({ ...o, count: 0 }))
+}
+
+function toRechargeAttachmentItems(raw?: string | null): PlanDocumentAttachmentItem[] {
+  return String(raw || '')
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean)
+    .map((url, index) => ({
+      url,
+      label: `附件${index + 1}`
+    }))
+}
+
+const visibleFilterProps = computed(() => {
+  const props: string[] = ['applyNo']
+  for (const def of listColumnDefs) {
+    if (isColumnVisible(def.prop)) props.push(def.prop)
+  }
+  return props
+})
+watchVisibleColumns(visibleFilterProps)
+watchSortVisibleColumns(visibleFilterProps)
+
+function handleResetColumns() {
+  resetToDefault()
+  resetToInitial()
+}
+
+const currentUserId = computed(() => {
+  const info = userStore.info as Record<string, unknown> | undefined
+  return String(info?.id || info?.userId || '')
+})
+
+const userOptions = ref<
+  Array<{ userId: string; nickName: string; displayName: string }>
+>([])
+
+const loading = ref(false)
+const submitLoading = ref(false)
+const saveAndSubmitLoading = ref(false)
+const cancelLoadingMap = reactive<Record<string, boolean>>({})
+const withdrawLoadingMap = reactive<Record<string, boolean>>({})
+const workflowSubmitLoadingMap = reactive<Record<string, boolean>>({})
+const tableData = ref<VehicleRechargeApply[]>([])
+const selectedRows = ref<VehicleRechargeApply[]>([])
+
+function canWithdraw(row?: VehicleRechargeApply | null) {
+  if (!row) return false
+  return (
+    row.status === 'in_approval' &&
+    String(row.applicantId || '') === String(currentUserId.value || '')
+  )
+}
+
+function buildListQueryParams(): Record<string, any> {
+  const params: Record<string, any> = { ...toQueryParams(), ...toSortQueryParams() }
+  const keyword = quickSearchKeyword.value.trim()
+  if (keyword) params.q = keyword
+  delete params.rechargeTypeNe
+  delete params.rechargeTypeIn
+  params.rechargeType = 'etc'
+  return params
+}
+
+function getRechargeApplyExportFilterParams() {
+  return buildListQueryParams()
+}
+
+const rechargeApplyZipMenuItems = [
+  {
+    command: 'filtered-zip',
+    label: '导出筛选结果（数据及附件 ZIP）',
+    withIds: false,
+    payloadExtra: { exportFormat: 'archive_zip' },
+    filename: 'ETC充值申请.zip'
+  },
+  {
+    command: 'selected-zip',
+    label: '导出已选（数据及附件 ZIP）',
+    withIds: true,
+    payloadExtra: { exportFormat: 'archive_zip' },
+    filename: 'ETC充值申请.zip'
+  }
+]
+
+const rechargeApplyExportColumns = computed(() => {
+  const cols = [...visibleColumns.value]
+  if (!cols.includes('applyNo')) cols.unshift('applyNo')
+  return cols
+})
+
+const vehicleOptions = ref<Vehicle[]>([])
+const vehicleTrailerLookup = computed(() => buildVehicleTrailerLookup(vehicleOptions.value))
+const quickSearchKeyword = ref('')
+
+
+const pagination = reactive({
+  page: 1,
+  pageSize: 20,
+  total: 0
+})
+
+const dialogVisible = ref(false)
+const dialogTitle = ref('')
+const isEdit = ref(false)
+const formRef = ref()
+const attachmentUploadRef = ref<InstanceType<typeof AttachmentUploadField>>()
+
+const formData = reactive({
+  id: '',
+  applyNo: '',
+  applicantId: '',
+  licensePlate: '',
+  rechargeType: 'etc' as const,
+  applyDate: '',
+  odometerKm: null as number | null,
+  attachmentUrls: '',
+  remark: ''
+})
+
+const formRules = {
+  applicantId: [{ required: true, message: '请选择申请人', trigger: 'change' }],
+  licensePlate: [{ required: true, message: '请选择车牌号', trigger: 'change' }],
+  rechargeType: [{ required: true, message: '请选择充值类型', trigger: 'change' }],
+  applyDate: [{ required: true, message: '请选择申请日期', trigger: 'change' }],
+  odometerKm: [
+    {
+      required: true,
+      message: '请输入期初公里数',
+      trigger: 'change',
+      validator: (_rule: unknown, value: number | null, callback: (e?: Error) => void) => {
+        if (value === null || value === undefined || Number.isNaN(Number(value))) {
+          callback(new Error('请输入期初公里数'))
+          return
+        }
+        if (Number(value) < 0) {
+          callback(new Error('期初公里数不能为负数'))
+          return
+        }
+        callback()
+      }
+    }
+  ],
+  attachmentUrls: [
+    {
+      required: true,
+      message: '请上传附件',
+      trigger: 'change',
+      validator: (_rule: unknown, value: string, callback: (e?: Error) => void) => {
+        const urls = String(value || '')
+          .split(',')
+          .map((s) => s.trim())
+          .filter(Boolean)
+        if (!urls.length) {
+          callback(new Error('请上传附件'))
+          return
+        }
+        callback()
+      }
+    }
+  ]
+}
+
+const viewVisible = ref(false)
+const viewLoading = ref(false)
+const viewDetail = ref<VehicleRechargeApply | null>(null)
+const viewingRecord = ref<VehicleRechargeApply | null>(null)
+let viewRequestId = 0
+watch(viewVisible, (visible) => {
+  if (!visible) viewRequestId += 1
+}, { flush: 'sync' })
+
+async function refreshViewIfOpen(editedId?: string) {
+  if (!viewVisible.value || !viewingRecord.value?.id) return
+  if (editedId && viewingRecord.value.id !== editedId) return
+  syncViewRowFromFlatList(viewingRecord, tableData.value)
+  const requestId = ++viewRequestId
+  viewLoading.value = true
+  try {
+    const res = await vehicleRechargeApplyApi.get(viewingRecord.value.id)
+    if (requestId === viewRequestId && viewVisible.value) viewDetail.value = res.data ?? res
+  } finally {
+    if (requestId === viewRequestId) viewLoading.value = false
+  }
+}
+
+const viewApprovalFlowNodes = computed(() =>
+  mapVehicleRechargeApprovalFlowToNodes(viewDetail.value?.approvalFlow || [])
+)
+const viewApprovalHistoryItems = computed(() =>
+  mapVehicleRechargeApprovalFlowToNodes(viewDetail.value?.approvalHistory || [], {
+    withRoundPrefix: true
+  })
+)
+
+const viewSections = computed<ViewSection[]>(() => {
+  const d = viewDetail.value
+  if (!d) return []
+  const record = d.record
+  const sections: ViewSection[] = [
+    {
+      title: '申请信息',
+      fields: [
+        { label: '申请单号', value: d.applyNo },
+        { label: '车牌号', value: d.licensePlate },
+        {
+          label: '充值类型',
+          value: getPlRechargeTypeLabel(d.rechargeType),
+          tagType: getPlRechargeTypeTagType(d.rechargeType)
+        },
+        { label: '申请日期', value: d.applyDate },
+        { label: '期初公里数', value: d.odometerKm != null ? String(d.odometerKm) : '—' },
+        { label: '申请人', value: d.applicantName || '—' },
+        {
+          label: '状态',
+          value: getPlRechargeApplyStatusLabel(d.status),
+          tagType: getPlRechargeApplyStatusTagType(d.status)
+        },
+        { label: '当前节点', value: d.currentNodeName || '—' },
+        { label: '备注', value: d.remark || '—', span: 2 }
+      ]
+    },
+    { title: '', fields: [], slot: 'approval-flow' }
+  ]
+  if (record) {
+    sections.push({
+      title: '发放信息',
+      fields: [
+        { label: '充值订单号', value: record.rechargeOrderNo || '—', long: false },
+        { label: '充值日期', value: record.rechargeDate || '—' },
+        {
+          label: '充值金额',
+          value: record.amount != null ? `${Number(record.amount).toFixed(2)} 元` : '—'
+        },
+        { label: '卡号', value: record.cardNo || '—', long: false, fullSpan: false },
+        { label: '加油站/渠道', value: record.gasStation || '—' },
+        { label: '发放人', value: record.createByName || '—' },
+        { label: '备注', value: record.remark || '—', span: true }
+      ],
+      slotTitle: '发放附件',
+      slot: 'record-attachments'
+    })
+  } else {
+    sections.push({
+      title: '发放信息',
+      fields: [{ label: '发放信息', value: '暂无', span: true }]
+    })
+  }
+  return sections
+})
+
+async function loadUserOptions() {
+  try {
+    const res = await fetchUserOptions()
+    const data: unknown = (res as { data?: unknown })?.data ?? res ?? []
+    userOptions.value = (Array.isArray(data) ? data : []).map((u: Record<string, unknown>) => {
+      const name = String(u.label || u.nickName || '')
+      const account = String(u.userNo || '')
+      return {
+        userId: String(u.value ?? u.id ?? ''),
+        nickName: name,
+        displayName: account ? `${name}（${account}）` : name
+      }
+    })
+  } catch {
+    userOptions.value = []
+  }
+}
+
+async function loadVehicleOptions() {
+  try {
+    vehicleOptions.value = await fetchAllPagedRecords<Vehicle>(async (page, pageSize) => {
+      const res = await vehicleApi.list({ page, pageSize })
+      return pickBxPageResult<Vehicle>(res)
+    })
+  } catch {
+    vehicleOptions.value = []
+  }
+}
+
+async function fetchData() {
+  loading.value = true
+  try {
+    const res = await vehicleRechargeApplyApi.list({
+      ...buildListQueryParams(),
+      page: pagination.page,
+      pageSize: pagination.pageSize
+    })
+    const data = res.data ?? res
+    tableData.value = data.items || []
+    pagination.total = data.total || 0
+    mittBus.emit('rechargeSummaryRefresh')
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleSearch() {
+  pagination.page = 1
+  fetchData()
+}
+
+function handleReset() {
+  clearAllFilters()
+  quickSearchKeyword.value = ''
+  pagination.page = 1
+  fetchData()
+}
+
+function handleQuickSearch() {
+  pagination.page = 1
+  fetchData()
+}
+
+function handleQuickSearchClear() {
+  quickSearchKeyword.value = ''
+  pagination.page = 1
+  fetchData()
+}
+
+function handleSelectionChange(rows: VehicleRechargeApply[]) {
+  selectedRows.value = rows
+}
+
+function resetForm() {
+  formData.id = ''
+  formData.applyNo = ''
+  formData.applicantId = ''
+  formData.licensePlate = ''
+  formData.rechargeType = 'etc'
+  formData.applyDate = ''
+  formData.odometerKm = null
+  formData.attachmentUrls = ''
+  formData.remark = ''
+}
+
+async function handleAdd() {
+  resetForm()
+  isEdit.value = false
+  dialogTitle.value = '新增ETC充值申请'
+  formData.applyDate = new Date().toISOString().slice(0, 10)
+  formData.applicantId = currentUserId.value
+  await loadUserOptions()
+  dialogVisible.value = true
+}
+
+async function handleEdit(row: VehicleRechargeApply) {
+  isEdit.value = true
+  dialogTitle.value = '编辑ETC充值申请'
+  await loadUserOptions()
+  Object.assign(formData, {
+    id: row.id,
+    applyNo: row.applyNo,
+    applicantId: row.applicantId || '',
+    licensePlate: row.licensePlate,
+    rechargeType: 'etc',
+    applyDate: row.applyDate,
+    odometerKm: row.odometerKm ?? null,
+    attachmentUrls: row.attachmentUrls || '',
+    remark: row.remark || ''
+  })
+  dialogVisible.value = true
+}
+
+async function handleView(row: VehicleRechargeApply) {
+  const requestId = ++viewRequestId
+  viewingRecord.value = row
+  viewDetail.value = row
+  viewVisible.value = true
+  viewLoading.value = true
+  try {
+    const res = await vehicleRechargeApplyApi.get(row.id)
+    if (requestId === viewRequestId && viewVisible.value) viewDetail.value = res.data ?? res
+  } finally {
+    if (requestId === viewRequestId) viewLoading.value = false
+  }
+}
+
+function handleToolbarWorkflowSubmit() {
+  if (selectedRows.value.length !== 1) {
+    ElMessage.warning('请先勾选一条申请')
+    return
+  }
+  handleWorkflowSubmit(selectedRows.value[0])
+}
+
+async function handleWorkflowSubmit(row: VehicleRechargeApply) {
+  if (!['draft', 'rejected'].includes(row.status)) {
+    ElMessage.warning('仅草稿或已驳回的申请可提交')
+    return
+  }
+  await ElMessageBox.confirm('确定提交该申请进入审批吗？', '提示', { type: 'warning' })
+  workflowSubmitLoadingMap[row.id] = true
+  try {
+    await vehicleRechargeApplyApi.submit(row.id)
+    ElMessage.success('已提交审批')
+    await fetchData()
+    await refreshViewIfOpen(row.id)
+  } finally {
+    workflowSubmitLoadingMap[row.id] = false
+  }
+}
+
+function handleToolbarEdit() {
+  if (selectedRows.value.length !== 1) {
+    ElMessage.warning('请先勾选一条申请')
+    return
+  }
+  handleEdit(selectedRows.value[0])
+}
+
+function handleToolbarCancel() {
+  if (selectedRows.value.length !== 1) {
+    ElMessage.warning('请先勾选一条申请')
+    return
+  }
+  handleCancel(selectedRows.value[0])
+}
+
+function handleToolbarWithdraw() {
+  if (selectedRows.value.length !== 1) {
+    ElMessage.warning('请先勾选一条申请')
+    return
+  }
+  handleWithdraw(selectedRows.value[0])
+}
+
+async function handleWithdraw(row: VehicleRechargeApply) {
+  if (!canWithdraw(row)) {
+    ElMessage.warning('仅本人申请且审批中的单据可撤回')
+    return
+  }
+  try {
+    await ElMessageBox.confirm(
+      '确定撤回该ETC充值申请？撤回后变为草稿，可修改后再提交。',
+      '撤回确认',
+      {
+        confirmButtonText: '确定撤回',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }
+    )
+  } catch {
+    return
+  }
+  withdrawLoadingMap[row.id] = true
+  try {
+    await vehicleRechargeApplyApi.withdraw(row.id)
+    ElMessage.success('已撤回')
+    await fetchData()
+    await refreshViewIfOpen(row.id)
+  } catch (e: any) {
+    ElMessage.error(e?.message || '撤回失败')
+  } finally {
+    withdrawLoadingMap[row.id] = false
+  }
+}
+
+async function handleViewCancel() {
+  if (!viewingRecord.value) return
+  await handleCancel(viewingRecord.value)
+  viewVisible.value = false
+}
+
+/** 校验并保存申请，成功返回 id；校验失败返回 null */
+async function saveApplyForm(): Promise<string | null> {
+  await formRef.value?.validate()
+  if (attachmentUploadRef.value?.hasUploading?.()) {
+    ElMessage.warning('附件上传中，请稍候')
+    return null
+  }
+  const payload = {
+    applicantId: formData.applicantId,
+    licensePlate: formData.licensePlate,
+    rechargeType: formData.rechargeType,
+    applyDate: formData.applyDate,
+    odometerKm: formData.odometerKm,
+    attachmentUrls: formData.attachmentUrls,
+    remark: formData.remark || undefined
+  }
+  if (isEdit.value) {
+    const res = await vehicleRechargeApplyApi.update(formData.id, payload)
+    const saved = pickBxData<VehicleRechargeApply>(res)
+    return saved?.id || formData.id
+  }
+  const res = await vehicleRechargeApplyApi.create(payload)
+  const saved = pickBxData<VehicleRechargeApply>(res)
+  const id = saved?.id || ''
+  if (!id) {
+    ElMessage.error('保存成功但未返回申请单 ID，请从列表重新操作')
+    return null
+  }
+  // 保存成功后记下 id，后续提交失败再点会走更新而非重复新建
+  formData.id = id
+  formData.applyNo = saved.applyNo || formData.applyNo
+  isEdit.value = true
+  dialogTitle.value = '编辑ETC充值申请'
+  return id
+}
+
+async function handleSubmit() {
+  submitLoading.value = true
+  try {
+    const wasEdit = isEdit.value
+    const id = await saveApplyForm()
+    if (!id) return
+    ElMessage.success(wasEdit ? '保存成功' : '创建成功')
+    dialogVisible.value = false
+    await fetchData()
+    await refreshViewIfOpen(id)
+  } finally {
+    submitLoading.value = false
+  }
+}
+
+async function handleSaveAndSubmit() {
+  await formRef.value?.validate()
+  if (attachmentUploadRef.value?.hasUploading?.()) {
+    ElMessage.warning('附件上传中，请稍候')
+    return
+  }
+  await ElMessageBox.confirm('确定保存并提交该申请进入审批吗？', '提示', { type: 'warning' })
+  saveAndSubmitLoading.value = true
+  try {
+    const id = await saveApplyForm()
+    if (!id) {
+      await fetchData()
+      return
+    }
+    await vehicleRechargeApplyApi.submit(id)
+    ElMessage.success('已保存并提交审批')
+    dialogVisible.value = false
+    await fetchData()
+    await refreshViewIfOpen(id)
+  } catch (e: any) {
+    // 校验取消 / 二次确认取消不刷列表；保存成功但提交失败时刷新以便列表可见草稿
+    if (e !== 'cancel' && e?.toString?.() !== 'cancel') {
+      await fetchData()
+    }
+  } finally {
+    saveAndSubmitLoading.value = false
+  }
+}
+
+async function handleCancel(row: VehicleRechargeApply) {
+  const { promptOptionalCancelReason } = await import('@/utils/prompt-cancel-reason')
+  const reason = await promptOptionalCancelReason({
+    title: '作废申请',
+    message: '确定作废该申请吗？作废原因选填。'
+  })
+  if (reason === null) return
+  cancelLoadingMap[row.id] = true
+  try {
+    await vehicleRechargeApplyApi.cancel(row.id, { cancelReason: reason || undefined })
+    ElMessage.success('已作废')
+    fetchData()
+  } finally {
+    cancelLoadingMap[row.id] = false
+  }
+}
+
+
+// 卡片按车牌、类型跳到申请页；沿用列筛选，使清除筛选和导出保持一致。
+function applySummaryFilter() {
+  const plate = route.query.rechargePlate
+  const kind = route.query.rechargeKind
+  if (typeof plate !== 'string' || String(kind) !== 'etc') return
+  Object.keys(filters).forEach((key) => delete filters[key])
+  filters.licensePlate = { text: plate }
+  quickSearchKeyword.value = ''
+  pagination.page = 1
+  const query = { ...route.query }
+  delete query.rechargePlate
+  delete query.rechargeKind
+  void router.replace({ path: route.path, query })
+}
+
+watch(() => [route.query.rechargePlate, route.query.rechargeKind], () => {
+  if (!route.path.endsWith('/etc-vehicle-recharge-apply') || !route.query.rechargePlate) return
+  applySummaryFilter()
+  fetchData()
+})
+
+onMounted(async () => {
+  applySummaryFilter()
+  await Promise.all([loadVehicleOptions(), loadUserOptions()])
+  fetchData()
+})
+</script>
diff --git a/web-admin/src/views/pl/etc-vehicle-recharge-approval/index.vue b/web-admin/src/views/pl/etc-vehicle-recharge-approval/index.vue
new file mode 100644
index 000000000..48ebb1a71
--- /dev/null
+++ b/web-admin/src/views/pl/etc-vehicle-recharge-approval/index.vue
@@ -0,0 +1,835 @@
+<!-- ETC充值审批（待办/已办） -->
+<template>
+  <div class="page-container">
+    <section class="panel">
+      <PlPlanTypeTabs
+        :model-value="activeTab"
+        :tabs="APPROVAL_TABS"
+        @change="handleTabChange"
+      />
+
+      <div class="list-toolbar">
+        <div class="list-toolbar-row">
+          <span class="list-toolbar-selected">已选 {{ selectedRows.length }} 项</span>
+          <el-button
+            v-if="hasActiveFilters"
+            class="btn-ghost"
+            @click="clearAllFilters"
+          >
+            <el-icon><Filter /></el-icon>清空列过滤
+          </el-button>
+          <el-button
+            v-if="activeTab === 'pending'"
+            class="btn-main"
+            type="primary"
+            :disabled="!canApproveSelected"
+            @click="openHandleDialog(selectedRows[0])"
+          >
+            <el-icon><Check /></el-icon>处理
+          </el-button>
+          <el-button class="btn-ghost" :disabled="selectedRows.length !== 1" @click="openView(selectedRows[0])">
+            <el-icon><View /></el-icon>查看
+          </el-button>
+          <ListToolbarEndActions :loading="loading" @refresh="fetchData" />
+        </div>
+      </div>
+
+      <div class="list-body list-wrap">
+        <ListTable
+          table-key="pl-etc-vehicle-recharge-approval"
+          class="list-table"
+          :data="tableData"
+          v-loading="loading"
+          stripe
+          @selection-change="(rows) => (selectedRows = rows)"
+          @row-dblclick="openView"
+        >
+          <el-table-column type="selection" width="48" align="center" />
+          <el-table-column type="index" label="序号" width="68" align="center" />
+          <el-table-column prop="applyNo" label="申请单号" min-width="160" show-overflow-tooltip>
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">申请单号</span>
+                <ColumnHeaderFilter
+                  prop="applyNo"
+                  label="申请单号"
+                  type="text"
+                  :is-active="isFilterActive('applyNo')"
+                  :model-value="filters.applyNo || null"
+                  @update:model-value="(v) => setFilterState('applyNo', v)"
+                />
+              </div>
+            </template>
+            <template #default="{ row }">
+              <el-link type="primary" @click="openView(row)">{{ row.applyNo }}</el-link>
+            </template>
+          </el-table-column>
+          <el-table-column prop="licensePlate" label="车牌号" min-width="160" show-overflow-tooltip align="center">
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">车牌号</span>
+                <ColumnHeaderFilter
+                  prop="licensePlate"
+                  label="车牌号"
+                  type="text"
+                  :is-active="isFilterActive('licensePlate')"
+                  :model-value="filters.licensePlate || null"
+                  @update:model-value="(v) => setFilterState('licensePlate', v)"
+                />
+              </div>
+            </template>
+            <template #default="{ row }">
+              {{ formatPlVehiclePlateDisplay(row.licensePlate, undefined, vehicleTrailerLookup) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="rechargeType" label="充值类型" min-width="100" align="center">
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">充值类型</span>
+                <ColumnHeaderFilter
+                  prop="rechargeType"
+                  label="充值类型"
+                  type="enum"
+                  :enum-options="enumOptionsFor('rechargeType')"
+                  :is-active="isFilterActive('rechargeType')"
+                  :model-value="filters.rechargeType || null"
+                  @update:model-value="(v) => setFilterState('rechargeType', v)"
+                />
+              </div>
+            </template>
+            <template #default="{ row }">
+              <el-tag :type="getPlRechargeTypeTagType(row.rechargeType)" size="small">
+                {{ getPlRechargeTypeLabel(row.rechargeType) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="applyDate" label="申请日期" min-width="120" align="center">
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">申请日期</span>
+                <ColumnHeaderFilter
+                  prop="applyDate"
+                  label="申请日期"
+                  type="datetime"
+                  :is-active="isFilterActive('applyDate')"
+                  :model-value="filters.applyDate || null"
+                  @update:model-value="(v) => setFilterState('applyDate', v)"
+                />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="odometerKm" label="期初公里数" min-width="110" align="center">
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">期初公里数</span>
+                <ColumnHeaderFilter
+                  prop="odometerKm"
+                  label="期初公里数"
+                  type="number"
+                  :is-active="isFilterActive('odometerKm')"
+                  :model-value="filters.odometerKm || null"
+                  @update:model-value="(v) => setFilterState('odometerKm', v)"
+                />
+              </div>
+            </template>
+            <template #default="{ row }">{{ row.odometerKm ?? '—' }}</template>
+          </el-table-column>
+          <el-table-column prop="applicantName" label="申请人" min-width="100" align="center">
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">申请人</span>
+                <ColumnHeaderFilter
+                  prop="applicantName"
+                  label="申请人"
+                  type="text"
+                  :is-active="isFilterActive('applicantName')"
+                  :model-value="filters.applicantName || null"
+                  @update:model-value="(v) => setFilterState('applicantName', v)"
+                />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="attachmentUrls" label="附件" min-width="220" align="left" header-align="left">
+            <template #default="{ row }">
+              <PlPlanDocumentAttachmentCell
+                :attachments="toRechargeAttachmentItems(row.attachmentUrls)"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="remark"
+            label="备注"
+            min-width="160"
+            align="center"
+            show-overflow-tooltip
+          >
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">备注</span>
+                <ColumnHeaderFilter
+                  prop="remark"
+                  label="备注"
+                  type="text"
+                  :is-active="isFilterActive('remark')"
+                  :model-value="filters.remark || null"
+                  @update:model-value="(v) => setFilterState('remark', v)"
+                />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="currentNodeName" label="当前节点" min-width="120" show-overflow-tooltip>
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">当前节点</span>
+                <ColumnHeaderFilter
+                  prop="currentNodeName"
+                  label="当前节点"
+                  type="text"
+                  :is-active="isFilterActive('currentNodeName')"
+                  :model-value="filters.currentNodeName || null"
+                  @update:model-value="(v) => setFilterState('currentNodeName', v)"
+                />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="status" label="状态" min-width="100" align="center">
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">状态</span>
+                <ColumnHeaderFilter
+                  prop="status"
+                  label="状态"
+                  type="enum"
+                  :enum-options="enumOptionsFor('status')"
+                  :is-active="isFilterActive('status')"
+                  :model-value="filters.status || null"
+                  @update:model-value="(v) => setFilterState('status', v)"
+                />
+              </div>
+            </template>
+            <template #default="{ row }">
+              <el-tag :type="getPlRechargeApplyStatusTagType(row.status)" size="small">
+                {{ getPlRechargeApplyStatusLabel(row.status) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="createTime" label="创建时间" min-width="170" align="center">
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">创建时间</span>
+                <ColumnHeaderFilter
+                  prop="createTime"
+                  label="创建时间"
+                  type="datetime"
+                  :is-active="isFilterActive('createTime')"
+                  :model-value="filters.createTime || null"
+                  @update:model-value="(v) => setFilterState('createTime', v)"
+                />
+              </div>
+            </template>
+            <template #default="{ row }">{{ formatPlDateTime(row.createTime) }}</template>
+          </el-table-column>
+        </ListTable>
+        <div class="pagination list-pager-bar">
+          <el-pagination
+            v-model:current-page="pager.page"
+            v-model:page-size="pager.pageSize"
+            :total="pager.total"
+            layout="total, sizes, prev, pager, next"
+            @size-change="fetchData"
+            @current-change="fetchData"
+          />
+        </div>
+      </div>
+    </section>
+
+    <SystemViewDialog
+      v-model:visible="viewVisible"
+      :title="viewDetail?.applyNo || '申请详情'"
+      :sections="viewSections"
+      width="960px"
+      modal-class="order-module-dialog-mask"
+      append-to-body
+    >
+      <template v-if="activeTab === 'pending' && viewDetail" #hero-actions>
+        <el-button type="primary" @click="openHandleDialog(viewDetail)">
+          <el-icon><Check /></el-icon>处理
+        </el-button>
+      </template>
+      <template #approval-flow>
+        <BxApprovalFlowTabs
+          section-title="审批记录"
+          :nodes="viewApprovalFlowNodes"
+          :history="viewApprovalHistoryItems"
+        />
+      </template>
+      <template #apply-attachments>
+        <AttachmentUploadField
+          :model-value="viewDetail?.attachmentUrls || ''"
+          disabled
+          compact
+        />
+      </template>
+      <template #record-attachments>
+        <AttachmentUploadField
+          :model-value="viewDetail?.record?.attachmentUrls || ''"
+          disabled
+          compact
+        />
+      </template>
+    </SystemViewDialog>
+
+    <el-dialog
+      v-model="handleVisible"
+      :title="handleDetail?.applyNo || '审批处理'"
+      width="1280px"
+      align-center
+      class="dialog-form-layout"
+      :close-on-click-modal="false"
+      destroy-on-close
+    >
+      <el-form label-position="top" class="dialog-form">
+        <!-- 上方：审批信息 -->
+        <div class="handle-section">
+          <div class="handle-section__title">审批信息</div>
+          <div class="form-grid-4">
+            <el-form-item label="当前节点">
+              <el-input :model-value="handleDetail?.currentNodeName || '—'" disabled />
+            </el-form-item>
+            <el-form-item label="节点动作">
+              <el-input :model-value="isDisburseNode ? '发放登记' : '审批'" disabled />
+            </el-form-item>
+
+            <template v-if="isDisburseNode">
+              <el-form-item label="充值日期" required>
+                <el-date-picker
+                  v-model="disburseForm.rechargeDate"
+                  type="date"
+                  value-format="YYYY-MM-DD"
+                  style="width: 100%"
+                />
+              </el-form-item>
+              <el-form-item label="充值金额" required>
+                <el-input-number
+                  v-model="disburseForm.amount"
+                  :min="0.01"
+                  :precision="2"
+                  controls-position="right"
+                  style="width: 100%"
+                />
+              </el-form-item>
+              <el-form-item label="卡号">
+                <el-input v-model="disburseForm.cardNo" placeholder="卡号" />
+              </el-form-item>
+              <el-form-item label="加油站/渠道">
+                <el-select
+                  v-model="disburseForm.gasStation"
+                  allow-create
+                  filterable
+                  clearable
+                  placeholder="请选择或输入"
+                  style="width: 100%"
+                >
+                  <el-option v-for="s in PL_GAS_STATION_PRESETS" :key="s" :label="s" :value="s" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="备注" class="form-col-span-half">
+                <el-input v-model="opinion" type="textarea" :rows="2" placeholder="选填；驳回时请填写原因" />
+              </el-form-item>
+              <el-form-item label="发放附件" class="form-col-span-2">
+                <AttachmentUploadField
+                  ref="disburseAttachmentRef"
+                  v-model="disburseForm.attachmentUrls"
+                  folder="pl/vehicle-recharge/record"
+                  accept="image/*,.pdf"
+                  :limit="5"
+                />
+              </el-form-item>
+            </template>
+
+            <el-form-item v-else label="备注" class="form-col-span-2">
+              <el-input
+                v-model="opinion"
+                type="textarea"
+                :rows="3"
+                placeholder="默认同意；驳回时请说明原因"
+              />
+            </el-form-item>
+          </div>
+        </div>
+
+        <!-- 充值申请详情（只读信息元素，对齐查看弹窗） -->
+        <div class="handle-section">
+          <div class="handle-section__title">ETC充值申请详情</div>
+          <ViewKvGrid :fields="handleApplyDetailFields" :columns="4" />
+          <div class="handle-apply-attachments">
+            <div class="handle-apply-attachments__label">附件</div>
+            <AttachmentUploadField
+              :model-value="handleDetail?.attachmentUrls || ''"
+              disabled
+              compact
+            />
+          </div>
+        </div>
+
+        <!-- 审批记录 -->
+        <div class="handle-section">
+          <BxApprovalFlowTabs
+            section-title="审批记录"
+            :nodes="handleApprovalFlowNodes"
+            :history="handleApprovalHistoryItems"
+          />
+        </div>
+      </el-form>
+      <template #footer>
+        <el-button class="btn-ghost" @click="handleVisible = false">
+          <el-icon><Close /></el-icon>取消
+        </el-button>
+        <el-button type="danger" class="btn-ghost" :loading="submitting" @click="handleReject">
+          <el-icon><CloseBold /></el-icon>驳回
+        </el-button>
+        <el-button
+          v-if="!isDisburseNode"
+          type="primary"
+          class="btn-main"
+          :loading="submitting"
+          @click="handleApprove"
+        >
+          <el-icon><Check /></el-icon>通过
+        </el-button>
+        <el-button
+          v-else
+          type="primary"
+          class="btn-main"
+          :loading="submitting"
+          @click="handleDisburse"
+        >
+          <el-icon><Check /></el-icon>确认发放
+        </el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import mittBus from '@/utils/sys/mittBus'
+  import { computed, onMounted, reactive, ref } from 'vue'
+  import { Check, Close, CloseBold, Filter, View } from '@element-plus/icons-vue'
+  import { ElMessage, ElMessageBox } from 'element-plus'
+  import AttachmentUploadField from '@/components/business/attachment-upload-field/index.vue'
+  import ColumnHeaderFilter from '@/components/business/column-header-filter/index.vue'
+  import ListToolbarEndActions from '@/components/business/list-toolbar-end-actions/index.vue'
+  import PlPlanDocumentAttachmentCell from '@/components/business/pl-plan-document-attachment-cell/index.vue'
+  import PlPlanTypeTabs from '@/components/business/pl-plan-type-tabs/index.vue'
+  import SystemViewDialog from '@/components/business/system-view-dialog/index.vue'
+  import ViewKvGrid from '@/components/business/system-view-dialog/ViewKvGrid.vue'
+  import type { ViewField } from '@/components/business/system-view-dialog/types'
+  import BxApprovalFlowTabs from '@/components/bx/base/BxApprovalFlowTabs.vue'
+  import { useServerColumnFilters } from '@/composables/useServerColumnFilters'
+  import { plVehicleRechargeApprovalColumnFilterDefs } from '@/views/pl/etc-vehicle-recharge-apply/columnFilterDefs'
+  import {
+    vehicleApi,
+    vehicleRechargeApplyApi,
+    vehicleRechargeApprovalApi,
+    type PlanDocumentAttachmentItem,
+    type Vehicle,
+    type VehicleRechargeApply
+  } from '@/api/pl'
+  import { pickBxPageResult } from '@/utils/http/bx'
+  import { fetchAllPagedRecords } from '@/utils/fetch-paged-list'
+  import {
+    buildVehicleTrailerLookup,
+    formatPlDateTime,
+    formatPlVehiclePlateDisplay,
+    getPlRechargeApplyStatusLabel,
+    getPlRechargeApplyStatusTagType,
+    getPlRechargeTypeLabel,
+    getPlRechargeTypeTagType,
+    mapVehicleRechargeApprovalFlowToNodes,
+    PL_GAS_STATION_PRESETS
+  } from '@/utils/pl-display'
+  import { refreshMenuBadges } from '@/utils/menu-badge-registry'
+  import { useMenuStore } from '@/store/modules/menu'
+
+  const {
+    filters,
+    hasActiveFilters,
+    setFilterState,
+    clearAllFilters,
+    isFilterActive,
+    toQueryParams
+  } = useServerColumnFilters(plVehicleRechargeApprovalColumnFilterDefs, {
+    onChange: () => {
+      pager.page = 1
+      fetchData()
+    }
+  })
+
+  function enumOptionsFor(prop: string) {
+    const def = plVehicleRechargeApprovalColumnFilterDefs.find((d) => d.prop === prop)
+    return (def?.enumOptions || []).map((o) => ({ ...o, count: 0 }))
+  }
+
+  const APPROVAL_TABS = [
+    { label: '待我审批', name: 'pending' },
+    { label: '我已办', name: 'done' }
+  ]
+
+  const menuStore = useMenuStore()
+
+  async function refreshListAndBadges() {
+    await fetchData()
+    void refreshMenuBadges(menuStore.menuList)
+  }
+
+  const DEFAULT_APPROVAL_OPINION = '同意'
+
+  const loading = ref(false)
+  const submitting = ref(false)
+  const activeTab = ref<'pending' | 'done'>('pending')
+  const tableData = ref<VehicleRechargeApply[]>([])
+  const selectedRows = ref<VehicleRechargeApply[]>([])
+  const pager = reactive({ page: 1, pageSize: 20, total: 0 })
+  const vehicleOptions = ref<Vehicle[]>([])
+  const vehicleTrailerLookup = computed(() => buildVehicleTrailerLookup(vehicleOptions.value))
+
+  const viewVisible = ref(false)
+  const viewDetail = ref<VehicleRechargeApply | null>(null)
+  const handleVisible = ref(false)
+  const handleDetail = ref<VehicleRechargeApply | null>(null)
+  let viewRequestId = 0
+  let handleRequestId = 0
+  watch(viewVisible, (visible) => {
+    if (!visible) viewRequestId += 1
+  }, { flush: 'sync' })
+  watch(handleVisible, (visible) => {
+    if (!visible) handleRequestId += 1
+  }, { flush: 'sync' })
+  const opinion = ref(DEFAULT_APPROVAL_OPINION)
+  const disburseForm = reactive({
+    rechargeDate: '',
+    amount: null as number | null,
+    cardNo: '',
+    gasStation: '',
+    attachmentUrls: ''
+  })
+  const disburseAttachmentRef = ref<InstanceType<typeof AttachmentUploadField>>()
+
+  const canApproveSelected = computed(
+    () => activeTab.value === 'pending' && selectedRows.value.length === 1
+  )
+  const isDisburseNode = computed(
+    () => (handleDetail.value?.currentNodeActionType || 'approve') === 'disburse'
+  )
+
+  const viewApprovalFlowNodes = computed(() =>
+    mapVehicleRechargeApprovalFlowToNodes(viewDetail.value?.approvalFlow || [])
+  )
+  const viewApprovalHistoryItems = computed(() =>
+    mapVehicleRechargeApprovalFlowToNodes(viewDetail.value?.approvalHistory || [], {
+      withRoundPrefix: true
+    })
+  )
+
+  const handleApprovalFlowNodes = computed(() =>
+    mapVehicleRechargeApprovalFlowToNodes(handleDetail.value?.approvalFlow || [])
+  )
+  const handleApprovalHistoryItems = computed(() =>
+    mapVehicleRechargeApprovalFlowToNodes(handleDetail.value?.approvalHistory || [], {
+      withRoundPrefix: true
+    })
+  )
+
+  const handleApplyDetailFields = computed((): ViewField[] => {
+    const d = handleDetail.value
+    if (!d) return []
+    return [
+      { label: '申请单号', value: d.applyNo },
+      { label: '申请人', value: d.applicantName || '—' },
+      {
+        label: '车牌号',
+        value: formatPlVehiclePlateDisplay(d.licensePlate, undefined, vehicleTrailerLookup.value)
+      },
+      {
+        label: '充值类型',
+        value: getPlRechargeTypeLabel(d.rechargeType),
+        tagType: getPlRechargeTypeTagType(d.rechargeType)
+      },
+      { label: '申请日期', value: d.applyDate },
+      { label: '期初公里数', value: d.odometerKm != null ? String(d.odometerKm) : '—' },
+      {
+        label: '状态',
+        value: getPlRechargeApplyStatusLabel(d.status),
+        tagType: getPlRechargeApplyStatusTagType(d.status)
+      },
+      { label: '创建时间', value: formatPlDateTime(d.createTime) },
+      { label: '备注', value: d.remark || '—', span: true }
+    ]
+  })
+
+  function toRechargeAttachmentItems(raw?: string | null): PlanDocumentAttachmentItem[] {
+    return String(raw || '')
+      .split(',')
+      .map((s) => s.trim())
+      .filter(Boolean)
+      .map((url, index) => ({
+        url,
+        label: `附件${index + 1}`
+      }))
+  }
+
+  function resetOpinionForDetail(detail: VehicleRechargeApply | null) {
+    const disburse = (detail?.currentNodeActionType || 'approve') === 'disburse'
+    opinion.value = disburse ? '' : DEFAULT_APPROVAL_OPINION
+  }
+
+  const viewSections = computed(() => {
+    const d = viewDetail.value
+    if (!d) return []
+    const record = d.record
+    const sections: Array<Record<string, unknown>> = [
+      {
+        title: '申请信息',
+        fields: [
+          { label: '申请单号', value: d.applyNo },
+          {
+            label: '车牌号',
+            value: formatPlVehiclePlateDisplay(d.licensePlate, undefined, vehicleTrailerLookup.value)
+          },
+          {
+            label: '充值类型',
+            value: getPlRechargeTypeLabel(d.rechargeType),
+            tagType: getPlRechargeTypeTagType(d.rechargeType)
+          },
+          { label: '申请日期', value: d.applyDate },
+          { label: '期初公里数', value: d.odometerKm != null ? String(d.odometerKm) : '—' },
+          { label: '申请人', value: d.applicantName || '—' },
+          {
+            label: '状态',
+            value: getPlRechargeApplyStatusLabel(d.status),
+            tagType: getPlRechargeApplyStatusTagType(d.status)
+          },
+          { label: '当前节点', value: d.currentNodeName || '—' },
+          { label: '备注', value: d.remark || '—', span: 2 as const }
+        ]
+      },
+      { title: '申请附件', fields: [], slot: 'apply-attachments' },
+      { title: '', fields: [], slot: 'approval-flow' }
+    ]
+    if (record) {
+      sections.push({
+        title: '发放信息',
+        fields: [
+          { label: '充值订单号', value: record.rechargeOrderNo || '—', long: false },
+          { label: '充值日期', value: record.rechargeDate || '—' },
+          {
+            label: '充值金额',
+            value: record.amount != null ? `${Number(record.amount).toFixed(2)} 元` : '—'
+          },
+          { label: '卡号', value: record.cardNo || '—', long: false, fullSpan: false },
+          { label: '加油站/渠道', value: record.gasStation || '—' },
+          { label: '发放人', value: record.createByName || '—' },
+          { label: '备注', value: record.remark || '—', span: true }
+        ],
+        slotTitle: '发放附件',
+        slot: 'record-attachments'
+      })
+    } else {
+      sections.push({
+        title: '发放信息',
+        fields: [{ label: '发放信息', value: '暂无', span: true }]
+      })
+    }
+    return sections
+  })
+
+  async function loadVehicleOptions() {
+    try {
+      vehicleOptions.value = await fetchAllPagedRecords<Vehicle>(async (page, pageSize) => {
+        const res = await vehicleApi.list({ page, pageSize })
+        return pickBxPageResult<Vehicle>(res)
+      })
+    } catch {
+      vehicleOptions.value = []
+    }
+  }
+
+  async function fetchData() {
+    loading.value = true
+    try {
+      const api = activeTab.value === 'pending' ? vehicleRechargeApprovalApi.pending : vehicleRechargeApprovalApi.done
+      const params: Record<string, any> = {
+        page: pager.page,
+        pageSize: pager.pageSize,
+        ...toQueryParams()
+      }
+      delete params.rechargeTypeNe
+      delete params.rechargeTypeIn
+      params.rechargeType = 'etc'
+      const res = await api(params)
+      const data: any = (res as any)?.data ?? res
+      tableData.value = data?.items || []
+      pager.total = data?.total || 0
+      mittBus.emit('rechargeSummaryRefresh')
+      selectedRows.value = []
+    } finally {
+      loading.value = false
+    }
+  }
+
+  function handleTabChange(name: string) {
+    activeTab.value = name === 'done' ? 'done' : 'pending'
+    pager.page = 1
+    fetchData()
+  }
+
+  async function openView(row: VehicleRechargeApply) {
+    const requestId = ++viewRequestId
+    viewDetail.value = row
+    viewVisible.value = true
+    try {
+      const res = await vehicleRechargeApplyApi.get(row.id)
+      if (requestId === viewRequestId && viewVisible.value) viewDetail.value = (res as any)?.data ?? res
+    } catch {
+      // keep list row as fallback
+    }
+  }
+
+  async function openHandleDialog(row: VehicleRechargeApply) {
+    const requestId = ++handleRequestId
+    handleDetail.value = row
+    resetOpinionForDetail(row)
+    disburseForm.rechargeDate = new Date().toISOString().slice(0, 10)
+    disburseForm.amount = null
+    disburseForm.cardNo = ''
+    disburseForm.gasStation = ''
+    disburseForm.attachmentUrls = ''
+    handleVisible.value = true
+    try {
+      const res = await vehicleRechargeApplyApi.get(row.id)
+      if (requestId !== handleRequestId || !handleVisible.value) return
+      handleDetail.value = (res as any)?.data ?? res
+      resetOpinionForDetail(handleDetail.value)
+    } catch {
+      // keep list row as fallback
+    }
+  }
+
+  async function handleApprove() {
+    if (!handleDetail.value) return
+    submitting.value = true
+    try {
+      await vehicleRechargeApprovalApi.approve(handleDetail.value.id, {
+        opinion: opinion.value.trim() || DEFAULT_APPROVAL_OPINION
+      })
+      ElMessage.success('已通过')
+      handleVisible.value = false
+      viewVisible.value = false
+      await refreshListAndBadges()
+    } finally {
+      submitting.value = false
+    }
+  }
+
+  async function handleReject() {
+    if (!handleDetail.value) return
+    const text = opinion.value.trim()
+    if (!text || text === DEFAULT_APPROVAL_OPINION) {
+      ElMessage.warning('驳回时请填写备注')
+      return
+    }
+    await ElMessageBox.confirm('确定驳回该申请吗？', '提示', { type: 'warning' })
+    submitting.value = true
+    try {
+      await vehicleRechargeApprovalApi.reject(handleDetail.value.id, { opinion: text })
+      ElMessage.success('已驳回')
+      handleVisible.value = false
+      viewVisible.value = false
+      await refreshListAndBadges()
+    } finally {
+      submitting.value = false
+    }
+  }
+
+  async function handleDisburse() {
+    if (!handleDetail.value) return
+    if (!disburseForm.rechargeDate || !disburseForm.amount || disburseForm.amount <= 0) {
+      ElMessage.warning('请填写充值日期和金额')
+      return
+    }
+    if (disburseAttachmentRef.value?.hasUploading?.()) {
+      ElMessage.warning('附件上传中，请稍候')
+      return
+    }
+    submitting.value = true
+    try {
+      await vehicleRechargeApprovalApi.disburse(handleDetail.value.id, {
+        applyId: handleDetail.value.id,
+        licensePlate: handleDetail.value.licensePlate,
+        rechargeType: 'etc',
+        rechargeDate: disburseForm.rechargeDate,
+        amount: disburseForm.amount,
+        cardNo: disburseForm.cardNo || undefined,
+        gasStation: disburseForm.gasStation || undefined,
+        attachmentUrls: disburseForm.attachmentUrls || undefined
+      })
+      ElMessage.success('发放登记成功')
+      handleVisible.value = false
+      viewVisible.value = false
+      await refreshListAndBadges()
+    } finally {
+      submitting.value = false
+    }
+  }
+
+  onMounted(() => {
+    loadVehicleOptions()
+    fetchData()
+  })
+</script>
+
+<style scoped lang="scss">
+  .handle-section {
+    & + & {
+      margin-top: 20px;
+      padding-top: 16px;
+      border-top: 1px solid var(--mint-border, #e2e8f0);
+    }
+
+    &__title {
+      margin-bottom: 12px;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--mint-text, #1e293b);
+      line-height: 1.4;
+
+      &::before {
+        content: '';
+        display: inline-block;
+        width: 3px;
+        height: 14px;
+        margin-right: 8px;
+        vertical-align: -2px;
+        border-radius: 2px;
+        background: var(--primary, #10b981);
+      }
+    }
+  }
+
+  .handle-apply-attachments {
+    margin-top: 14px;
+
+    &__label {
+      margin-bottom: 6px;
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--mint-text-muted, #64748b);
+      line-height: 1.4;
+    }
+  }
+
+  /* 四列栅格中占两列（如：加油站右侧的备注） */
+  .form-grid-4 > .form-col-span-half {
+    grid-column: span 2;
+  }
+</style>
diff --git a/web-admin/src/views/pl/etc-vehicle-recharge-record/index.vue b/web-admin/src/views/pl/etc-vehicle-recharge-record/index.vue
new file mode 100644
index 000000000..0f46567f2
--- /dev/null
+++ b/web-admin/src/views/pl/etc-vehicle-recharge-record/index.vue
@@ -0,0 +1,1139 @@
+<!-- ETC充值发放管理 -->
+<template>
+  <div class="page-container">
+    <section class="panel">
+
+
+      <div class="list-toolbar">
+        <div class="list-toolbar-row">
+          <ListQuickSearchInput
+            v-model="quickSearchKeyword"
+            placeholder="申请单号/车牌"
+            @search="handleQuickSearch"
+            @clear="handleQuickSearchClear"
+          />
+          <el-button
+            class="btn-main"
+            type="primary"
+            :disabled="
+              selectedRows.length !== 1 ||
+              ['in_approval', 'disbursed', 'cancelled', 'rejected', 'draft'].includes(
+                selectedRows[0].applyStatus
+              )
+            "
+            @click="handleToolbarDisburse"
+          >
+            <el-icon><Money /></el-icon>发放
+          </el-button>
+          <ListToolbarOverflow :items="toolbarOverflowItems">
+            <template #export>
+              <ListExportDropdown
+                :export-fn="vehicleRechargeRecordApi.export"
+                :get-filter-params="getRechargeDisburseExportFilterParams"
+                :has-selection="true"
+                :selected-ids="selectedRows.map((r) => r.applyId)"
+                :visible-columns="rechargeDisburseExportColumns"
+                :additional-menu-items="rechargeDisburseZipMenuItems"
+                filename="ETC充值发放.xlsx"
+              />
+            </template>
+          </ListToolbarOverflow>
+
+          <ListToolbarEndActions
+            :loading="loading"
+            :column-defs="listColumnDefs"
+            v-model:visible-columns="visibleColumns"
+            v-model:check-all="checkAll"
+            :is-indeterminate="isIndeterminate"
+            @refresh="fetchData"
+            @reset-columns="handleResetColumns"
+          />
+        </div>
+      </div>
+
+      <div class="list-body list-wrap">
+        <div class="table-scroll bx-list-table-wrap">
+          <ListTable
+            table-key="pl-etc-vehicle-recharge-record"
+          class="list-table"
+          :data="tableData"
+          v-loading="loading"
+          stripe
+          row-key="applyId"
+          @selection-change="handleSelectionChange"
+          @row-dblclick="handleView"
+        >
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column
+            type="index"
+            label="序号"
+            width="68"
+            align="center"
+            header-align="center"
+            :index="(index) => (pagination.page - 1) * pagination.pageSize + index + 1"
+          />
+          <el-table-column prop="applyNo" label="申请单号" min-width="170" show-overflow-tooltip fixed="left">
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">申请单号</span>
+                <ColumnHeaderFilter
+                  prop="applyNo"
+                  label="申请单号"
+                  type="text"
+                  :is-active="isFilterActive('applyNo')"
+                  :model-value="filters.applyNo || null"
+                  @update:model-value="(v) => setFilterState('applyNo', v)"
+                />
+              </div>
+            </template>
+
+            <template #default="{ row }">
+              <el-link type="primary" @click="handleView(row)">{{ row.applyNo }}</el-link>
+            </template>
+          </el-table-column>
+          <el-table-column
+            v-if="isColumnVisible('applyDate')"
+            prop="applyDate"
+            label="申请日期"
+            min-width="120"
+            align="center"
+          >
+<template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">申请日期</span>
+                <ColumnHeaderFilter
+                  prop="applyDate"
+                  label="申请日期"
+                  type="datetime"
+                  :is-active="isFilterActive('applyDate')"
+                  :model-value="filters.applyDate || null"
+                  @update:model-value="(v) => setFilterState('applyDate', v)"
+                />
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column
+            v-if="isColumnVisible('applicantName')"
+            prop="applicantName"
+            label="申请人"
+            min-width="100"
+            align="center"
+          >
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">申请人</span>
+                <ColumnHeaderFilter
+                  prop="applicantName"
+                  label="申请人"
+                  type="text"
+                  :is-active="isFilterActive('applicantName')"
+                  :model-value="filters.applicantName || null"
+                  @update:model-value="(v) => setFilterState('applicantName', v)"
+                />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            v-if="isColumnVisible('odometerKm')"
+            prop="odometerKm"
+            label="期初公里数"
+            min-width="110"
+            align="right"
+          >
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">期初公里数</span>
+                <ColumnHeaderFilter
+                  prop="odometerKm"
+                  label="期初公里数"
+                  type="number"
+                  :is-active="isFilterActive('odometerKm')"
+                  :model-value="filters.odometerKm || null"
+                  @update:model-value="(v) => setFilterState('odometerKm', v)"
+                />
+              </div>
+            </template>
+            <template #default="{ row }">
+              {{ row.odometerKm != null ? Number(row.odometerKm).toFixed(1) : '—' }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            v-if="isColumnVisible('applyStatus')"
+            prop="applyStatus"
+            label="申请状态"
+            min-width="100"
+            align="center"
+          >
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">申请状态</span>
+                <ColumnHeaderFilter
+                  prop="applyStatus"
+                  label="申请状态"
+                  type="enum"
+                  :enum-options="enumOptionsFor('applyStatus')"
+                  :is-active="isFilterActive('applyStatus')"
+                  :model-value="filters.applyStatus || null"
+                  @update:model-value="(v) => setFilterState('applyStatus', v)"
+                />
+              </div>
+            </template>
+
+            <template #default="{ row }">
+              <el-tag :type="getPlRechargeApplyStatusTagType(row.applyStatus)" size="small">
+                {{ getPlRechargeApplyStatusLabel(row.applyStatus) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column
+            v-if="isColumnVisible('licensePlate')"
+            prop="licensePlate"
+            label="车牌号"
+            min-width="160"
+            show-overflow-tooltip
+            align="center"
+          >
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">车牌号</span>
+                <ColumnHeaderFilter
+                  prop="licensePlate"
+                  label="车牌号"
+                  type="text"
+                  :is-active="isFilterActive('licensePlate')"
+                  :model-value="filters.licensePlate || null"
+                  @update:model-value="(v) => setFilterState('licensePlate', v)"
+                />
+              </div>
+            </template>
+
+            <template #default="{ row }">
+              {{ formatPlVehiclePlateDisplay(row.licensePlate, undefined, vehicleTrailerLookup) }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            v-if="isColumnVisible('rechargeType')"
+            prop="rechargeType"
+            label="充值类型"
+            min-width="100"
+            align="center"
+          >
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">充值类型</span>
+                <ColumnHeaderFilter
+                  prop="rechargeType"
+                  label="充值类型"
+                  type="enum"
+                  :enum-options="enumOptionsFor('rechargeType')"
+                  :is-active="isFilterActive('rechargeType')"
+                  :model-value="filters.rechargeType || null"
+                  @update:model-value="(v) => setFilterState('rechargeType', v)"
+                />
+              </div>
+            </template>
+
+            <template #default="{ row }">
+              <el-tag :type="getPlRechargeTypeTagType(row.rechargeType)" size="small">
+                {{ getPlRechargeTypeLabel(row.rechargeType) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column
+            v-if="isColumnVisible('rechargeOrderNo')"
+            prop="rechargeOrderNo"
+            label="充值订单号"
+            min-width="170"
+            show-overflow-tooltip
+          >
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">充值订单号</span>
+                <ColumnHeaderFilter
+                  prop="rechargeOrderNo"
+                  label="充值订单号"
+                  type="text"
+                  :is-active="isFilterActive('rechargeOrderNo')"
+                  :model-value="filters.rechargeOrderNo || null"
+                  @update:model-value="(v) => setFilterState('rechargeOrderNo', v)"
+                />
+              </div>
+            </template>
+            <template #default="{ row }">{{ row.rechargeOrderNo || '—' }}</template>
+          </el-table-column>
+          <el-table-column
+            v-if="isColumnVisible('rechargeDate')"
+            prop="rechargeDate"
+            label="充值日期"
+            min-width="120"
+            align="center"
+          >
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">充值日期</span>
+                <ColumnHeaderFilter
+                  prop="rechargeDate"
+                  label="充值日期"
+                  type="datetime"
+                  :is-active="isFilterActive('rechargeDate')"
+                  :model-value="filters.rechargeDate || null"
+                  @update:model-value="(v) => setFilterState('rechargeDate', v)"
+                />
+              </div>
+            </template>
+
+            <template #default="{ row }">{{ row.rechargeDate || '—' }}</template>
+          </el-table-column>
+          <el-table-column
+            v-if="isColumnVisible('cardNo')"
+            prop="cardNo"
+            label="卡号"
+            min-width="130"
+            show-overflow-tooltip
+          >
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">卡号</span>
+                <ColumnHeaderFilter
+                  prop="cardNo"
+                  label="卡号"
+                  type="text"
+                  :is-active="isFilterActive('cardNo')"
+                  :model-value="filters.cardNo || null"
+                  @update:model-value="(v) => setFilterState('cardNo', v)"
+                />
+              </div>
+            </template>
+            <template #default="{ row }">{{ row.cardNo || '—' }}</template>
+          </el-table-column>
+          <el-table-column
+            v-if="isColumnVisible('gasStation')"
+            prop="gasStation"
+            label="加油站/渠道"
+            min-width="130"
+            show-overflow-tooltip
+          >
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">加油站/渠道</span>
+                <ColumnHeaderFilter
+                  prop="gasStation"
+                  label="加油站/渠道"
+                  type="text"
+                  :is-active="isFilterActive('gasStation')"
+                  :model-value="filters.gasStation || null"
+                  @update:model-value="(v) => setFilterState('gasStation', v)"
+                />
+              </div>
+            </template>
+            <template #default="{ row }">{{ row.gasStation || '—' }}</template>
+          </el-table-column>
+          <el-table-column
+            v-if="isColumnVisible('amount')"
+            prop="amount"
+            label="金额(元)"
+            min-width="110"
+            align="right"
+          >
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">金额(元)</span>
+                <ColumnHeaderFilter
+                  prop="amount"
+                  label="金额(元)"
+                  type="number"
+                  :is-active="isFilterActive('amount')"
+                  :model-value="filters.amount || null"
+                  @update:model-value="(v) => setFilterState('amount', v)"
+                />
+              </div>
+            </template>
+            <template #default="{ row }">
+              {{ row.amount != null ? Number(row.amount).toFixed(2) : '—' }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            v-if="isColumnVisible('recordCreateByName')"
+            prop="recordCreateByName"
+            label="登记人"
+            min-width="100"
+            align="center"
+          >
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">登记人</span>
+                <ColumnHeaderFilter
+                  prop="recordCreateByName"
+                  label="登记人"
+                  type="text"
+                  :is-active="isFilterActive('recordCreateByName')"
+                  :model-value="filters.recordCreateByName || null"
+                  @update:model-value="(v) => setFilterState('recordCreateByName', v)"
+                />
+              </div>
+            </template>
+            <template #default="{ row }">{{ row.recordCreateByName || '—' }}</template>
+          </el-table-column>
+        </ListTable>
+
+        
+        </div>
+        <div>
+          <div class="pagination list-pager-bar">
+          <div class="list-pager-selected">
+            已选 <span class="sel-num">{{ selectedRows.length }}</span> 项
+          </div>
+
+          <el-pagination
+            v-model:current-page="pagination.page"
+            v-model:page-size="pagination.pageSize"
+            :total="pagination.total"
+            :page-sizes="[10, 20, 100, 500]"
+            layout="total, sizes, prev, pager, next"
+            @size-change="fetchData"
+            @current-change="fetchData"
+          />
+        </div>
+        </div>
+      </div>
+    </section>
+
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      width="720px"
+      align-center
+      class="dialog-form-layout order-module-dialog-mask"
+      destroy-on-close
+      @closed="resetForm"
+    >
+      <el-form ref="formRef" :model="formData" :rules="formRules" label-position="right" label-width="100px" class="pl-dialog-form" scroll-to-error>
+        <div v-if="dialogMode === 'disburse' && currentApplyRow" class="apply-summary-block">
+          <div class="apply-summary-title">关联申请</div>
+          <div class="apply-summary-grid">
+            <div><span class="label">申请单号</span>{{ currentApplyRow.applyNo }}</div>
+            <div><span class="label">申请日期</span>{{ currentApplyRow.applyDate }}</div>
+            <div><span class="label">车牌号</span>{{ currentApplyRow.licensePlate }}</div>
+            <div>
+              <span class="label">充值类型</span>
+              {{ getPlRechargeTypeLabel(currentApplyRow.rechargeType) }}
+            </div>
+            <div><span class="label">申请人</span>{{ currentApplyRow.applicantName || '—' }}</div>
+            <div>
+              <span class="label">期初公里数</span>
+              {{
+                currentApplyRow.odometerKm != null
+                  ? `${Number(currentApplyRow.odometerKm).toFixed(1)} km`
+                  : '—'
+              }}
+            </div>
+          </div>
+        </div>
+
+        <div class="form-grid-2">
+          <el-form-item label="充值订单号">
+            <el-input :model-value="formData.rechargeOrderNo || '保存后自动生成'" disabled />
+          </el-form-item>
+          <el-form-item label="登记人">
+            <el-input :model-value="currentUserName" disabled />
+          </el-form-item>
+          <template v-if="dialogMode === 'supplement'">
+            <el-form-item label="车牌号" prop="licensePlate">
+              <PlVehicleSelect
+                v-model="formData.licensePlate"
+                vehicle-type="self"
+                placeholder="请选择自有车牌"
+              />
+            </el-form-item>
+            <el-form-item label="充值类型" prop="rechargeType">
+              <el-input model-value="ETC" disabled />
+            </el-form-item>
+          </template>
+          <el-form-item label="充值日期" prop="rechargeDate">
+            <el-date-picker v-model="formData.rechargeDate" type="date" value-format="YYYY-MM-DD" style="width: 100%" />
+          </el-form-item>
+          <el-form-item label="卡号" prop="cardNo">
+            <el-input v-model="formData.cardNo" placeholder="卡号" />
+          </el-form-item>
+          <el-form-item label="加油站/渠道" prop="gasStation">
+            <el-select
+              v-model="formData.gasStation"
+              filterable
+              allow-create
+              default-first-option
+              placeholder="选择或输入"
+              style="width: 100%"
+            >
+              <el-option v-for="item in PL_GAS_STATION_PRESETS" :key="item" :label="item" :value="item" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="充值金额(元)" prop="amount">
+            <el-input-number v-model="formData.amount" :min="0.01" :precision="2" style="width: 100%" />
+          </el-form-item>
+          <el-form-item label="发放附件" class="form-col-span-2">
+            <AttachmentUploadField
+              ref="attachmentUploadRef"
+              v-model="formData.attachmentUrls"
+              folder="pl/vehicle-recharge/record"
+              accept="image/*,.pdf"
+              :limit="5"
+            />
+          </el-form-item>
+          <el-form-item label="备注" class="form-col-span-2">
+            <el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="备注" />
+          </el-form-item>
+        </div>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogVisible = false">
+            <el-icon><Close /></el-icon>取消
+          </el-button>
+          <el-button type="primary" :loading="submitLoading" @click="handleSubmit">
+            <el-icon><Check /></el-icon>确定
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <SystemViewDialog
+      v-model:visible="viewVisible"
+      :title="viewingRecord?.applyNo || '发放详情'"
+      :sections="viewSections"
+      :loading="viewLoading"
+      width="960px"
+      modal-class="order-module-dialog-mask"
+      append-to-body
+    >
+      <template v-if="viewingRecord" #hero-actions>
+        <el-button
+          v-if="viewingRecord.applyStatus === 'pending'"
+          class="btn-main"
+          type="primary"
+          @click="handleDisburse(viewingRecord)"
+        >
+          <el-icon><Money /></el-icon>发放
+        </el-button>
+        <template v-if="viewingRecord.applyStatus === 'disbursed' && viewingRecord.recordId">
+          <el-button class="btn-main" type="primary" @click="handleEdit(viewingRecord)">
+            <el-icon><Edit /></el-icon>编辑
+          </el-button>
+          <el-button
+            class="btn-ghost"
+            type="danger"
+            :loading="deleteLoadingMap[viewingRecord.recordId]"
+            @click="handleViewDelete"
+          >
+            <el-icon><Delete /></el-icon>撤销发放
+          </el-button>
+        </template>
+      </template>
+      <template #approval-flow>
+        <BxApprovalFlowTabs
+          section-title="审批记录"
+          :nodes="viewApprovalFlowNodes"
+          :history="viewApprovalHistoryItems"
+          :loading="viewLoading"
+        />
+      </template>
+      <template #record-attachments>
+        <AttachmentUploadField
+          :model-value="
+            viewApplyDetail?.record?.attachmentUrls ||
+            viewingRecord?.recordAttachmentUrls ||
+            ''
+          "
+          disabled
+          compact
+        />
+      </template>
+    </SystemViewDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import mittBus from '@/utils/sys/mittBus'
+import ListQuickSearchInput from '@/components/business/list-quick-search-input/index.vue'
+import ColumnHeaderFilter from '@/components/business/column-header-filter/index.vue'
+import ListToolbarEndActions from '@/components/business/list-toolbar-end-actions/index.vue'
+import ListExportDropdown from '@/components/business/list-export-dropdown/index.vue'
+import ListToolbarOverflow from '@/components/business/list-toolbar-overflow/index.vue'
+import type { ListToolbarOverflowItem } from '@/components/business/list-toolbar-overflow/types'
+import {
+  overflowClearFiltersItem,
+  overflowDeleteItem,
+  overflowEditItem,
+  overflowExportPlaceholder
+} from '@/utils/list-toolbar-overflow-items'
+import { usePersistedListColumns } from '@/composables/usePersistedListColumns'
+import { useServerColumnFilters } from '@/composables/useServerColumnFilters'
+import { useColumnSort } from '@/composables/useColumnSort'
+import { plVehicleRechargeDisburseColumnFilterDefs } from '@/views/pl/etc-vehicle-recharge-apply/columnFilterDefs'
+import { Check, Close, Delete, Edit, Filter, Money, Plus } from '@element-plus/icons-vue'
+import {
+  vehicleApi,
+  vehicleRechargeApplyApi,
+  vehicleRechargeRecordApi,
+  type Vehicle,
+  type VehicleRechargeApply,
+  type VehicleRechargeDisburseBoardItem
+} from '@/api/pl'
+import { pickBxPageResult } from '@/utils/http/bx'
+import { fetchAllPagedRecords } from '@/utils/fetch-paged-list'
+import AttachmentUploadField from '@/components/business/attachment-upload-field/index.vue'
+import PlVehicleSelect from '@/components/business/pl/PlVehicleSelect.vue'
+import SystemViewDialog, { type ViewSection } from '@/components/business/system-view-dialog/index.vue'
+import BxApprovalFlowTabs from '@/components/bx/base/BxApprovalFlowTabs.vue'
+import { useUserStore } from '@/store/modules/user'
+import {
+  buildVehicleTrailerLookup,
+  formatPlVehiclePlateDisplay,
+  getPlRechargeApplyStatusLabel,
+  getPlRechargeApplyStatusTagType,
+  getPlRechargeTypeLabel,
+  getPlRechargeTypeTagType,
+  mapVehicleRechargeApprovalFlowToNodes,
+  PL_GAS_STATION_PRESETS
+} from '@/utils/pl-display'
+
+type DialogMode = 'disburse' | 'edit' | 'supplement'
+
+const userStore = useUserStore()
+const currentUserName = computed(() => userStore.info?.userName || '—')
+
+const loading = ref(false)
+
+const listColumnDefs = [
+  { prop: 'applyDate', label: '申请日期' },
+  { prop: 'applicantName', label: '申请人' },
+  { prop: 'odometerKm', label: '期初公里数' },
+  { prop: 'applyStatus', label: '申请状态' },
+  { prop: 'licensePlate', label: '车牌号' },
+  { prop: 'rechargeType', label: '充值类型' },
+  { prop: 'rechargeOrderNo', label: '充值订单号' },
+  { prop: 'rechargeDate', label: '充值日期' },
+  { prop: 'cardNo', label: '卡号' },
+  { prop: 'gasStation', label: '加油站/渠道' },
+  { prop: 'amount', label: '金额(元)' },
+  { prop: 'recordCreateByName', label: '登记人' }
+]
+
+const {
+  visibleColumns,
+  checkAll,
+  isIndeterminate,
+  isColumnVisible,
+  resetToDefault
+} = usePersistedListColumns('pl-etc-vehicle-recharge-record-list-columns', listColumnDefs)
+
+
+const {
+  filters,
+  hasActiveFilters,
+  setFilterState,
+  clearAllFilters,
+  isFilterActive,
+  toQueryParams,
+  resetToInitial,
+  watchVisibleColumns
+} = useServerColumnFilters(plVehicleRechargeDisburseColumnFilterDefs, {
+  onChange: () => handleSearch()
+})
+
+const {
+  sortField,
+  sortOrder,
+  setSort,
+  clearSort,
+  isSortActive,
+  toQueryParams: toSortQueryParams,
+  watchVisibleColumns: watchSortVisibleColumns
+} = useColumnSort({
+  onChange: () => handleSearch()
+})
+
+provide('crmColumnSort', {
+  setSort,
+  clearSort,
+  isSortActive,
+  sortField,
+  sortOrder
+})
+
+function enumOptionsFor(prop: string) {
+  const def = plVehicleRechargeDisburseColumnFilterDefs.find((d) => d.prop === prop)
+  return (def?.enumOptions || []).map((o) => ({ ...o, count: 0 }))
+}
+
+const visibleFilterProps = computed(() => {
+  const props: string[] = ['applyNo']
+  for (const def of listColumnDefs) {
+    if (isColumnVisible(def.prop)) props.push(def.prop)
+  }
+  return props
+})
+watchVisibleColumns(visibleFilterProps)
+watchSortVisibleColumns(visibleFilterProps)
+
+function handleResetColumns() {
+  resetToDefault()
+  resetToInitial()
+}
+
+const submitLoading = ref(false)
+const deleteLoadingMap = reactive<Record<string, boolean>>({})
+const tableData = ref<VehicleRechargeDisburseBoardItem[]>([])
+const selectedRows = ref<VehicleRechargeDisburseBoardItem[]>([])
+
+function buildListQueryParams(): Record<string, any> {
+  const params: Record<string, any> = { ...toQueryParams(), ...toSortQueryParams() }
+  const keyword = quickSearchKeyword.value.trim()
+  if (keyword) params.q = keyword
+  delete params.rechargeTypeNe
+  delete params.rechargeTypeIn
+  params.rechargeType = 'etc'
+  return params
+}
+
+function getRechargeDisburseExportFilterParams() {
+  return buildListQueryParams()
+}
+
+const rechargeDisburseZipMenuItems = [
+  {
+    command: 'filtered-zip',
+    label: '导出筛选结果（数据及附件 ZIP）',
+    withIds: false,
+    payloadExtra: { exportFormat: 'archive_zip' },
+    filename: 'ETC充值发放.zip'
+  },
+  {
+    command: 'selected-zip',
+    label: '导出已选（数据及附件 ZIP）',
+    withIds: true,
+    payloadExtra: { exportFormat: 'archive_zip' },
+    filename: 'ETC充值发放.zip'
+  }
+]
+
+const rechargeDisburseExportColumns = computed(() => {
+  const cols = [...visibleColumns.value]
+  if (!cols.includes('applyNo')) cols.unshift('applyNo')
+  return cols
+})
+
+const vehicleOptions = ref<Vehicle[]>([])
+const vehicleTrailerLookup = computed(() => buildVehicleTrailerLookup(vehicleOptions.value))
+const quickSearchKeyword = ref('')
+
+
+const pagination = reactive({
+  page: 1,
+  pageSize: 20,
+  total: 0
+})
+
+const dialogVisible = ref(false)
+const dialogTitle = ref('')
+const dialogMode = ref<DialogMode>('disburse')
+const currentApplyRow = ref<VehicleRechargeDisburseBoardItem | null>(null)
+const formRef = ref()
+const attachmentUploadRef = ref<InstanceType<typeof AttachmentUploadField>>()
+
+const formData = reactive({
+  id: '',
+  rechargeOrderNo: '',
+  applyId: '',
+  licensePlate: '',
+  rechargeType: 'etc' as const,
+  rechargeDate: '',
+  cardNo: '',
+  gasStation: '',
+  amount: null as number | null,
+  attachmentUrls: '',
+  remark: ''
+})
+
+const formRules = computed(() => ({
+  licensePlate:
+    dialogMode.value === 'supplement'
+      ? [{ required: true, message: '请选择车牌号', trigger: 'change' }]
+      : [],
+  rechargeType:
+    dialogMode.value === 'supplement'
+      ? [{ required: true, message: '请选择充值类型', trigger: 'change' }]
+      : [],
+  rechargeDate: [{ required: true, message: '请选择充值日期', trigger: 'change' }],
+  amount: [{ required: true, message: '请输入充值金额', trigger: 'blur' }]
+}))
+
+const viewVisible = ref(false)
+const viewLoading = ref(false)
+const viewingRecord = ref<VehicleRechargeDisburseBoardItem | null>(null)
+const viewApplyDetail = ref<VehicleRechargeApply | null>(null)
+let viewRequestId = 0
+watch(viewVisible, (visible) => {
+  if (!visible) viewRequestId += 1
+}, { flush: 'sync' })
+
+function refreshViewIfOpen(editedApplyId?: string) {
+  if (!viewVisible.value || !viewingRecord.value?.applyId) return
+  if (editedApplyId && viewingRecord.value.applyId !== editedApplyId) return
+  const updated = tableData.value.find(row => row.applyId === viewingRecord.value!.applyId)
+  if (updated) viewingRecord.value = updated
+  void loadViewApplyDetail(viewingRecord.value.applyId)
+}
+
+const viewApprovalFlowNodes = computed(() =>
+  mapVehicleRechargeApprovalFlowToNodes(viewApplyDetail.value?.approvalFlow || [])
+)
+const viewApprovalHistoryItems = computed(() =>
+  mapVehicleRechargeApprovalFlowToNodes(viewApplyDetail.value?.approvalHistory || [], {
+    withRoundPrefix: true
+  })
+)
+
+const viewSections = computed<ViewSection[]>(() => {
+  const row = viewingRecord.value
+  if (!row) return []
+  const sections: ViewSection[] = [
+    {
+      title: '申请信息',
+      fields: [
+        { label: '申请单号', value: row.applyNo },
+        { label: '申请日期', value: row.applyDate },
+        {
+          label: '申请状态',
+          value: getPlRechargeApplyStatusLabel(row.applyStatus),
+          tagType: getPlRechargeApplyStatusTagType(row.applyStatus)
+        },
+        { label: '车牌号', value: row.licensePlate },
+        {
+          label: '充值类型',
+          value: getPlRechargeTypeLabel(row.rechargeType),
+          tagType: getPlRechargeTypeTagType(row.rechargeType)
+        },
+        { label: '申请人', value: row.applicantName || '—' },
+        {
+          label: '期初公里数',
+          value: row.odometerKm != null ? `${Number(row.odometerKm).toFixed(1)} km` : '—'
+        },
+        { label: '申请备注', value: row.applyRemark || '—', span: 2 }
+      ]
+    },
+    { title: '', fields: [], slot: 'approval-flow' }
+  ]
+  if (row.recordId) {
+    const record = viewApplyDetail.value?.record
+    sections.push({
+      title: '发放信息',
+      fields: [
+        { label: '充值订单号', value: record?.rechargeOrderNo || row.rechargeOrderNo || '—', long: false },
+        { label: '充值日期', value: record?.rechargeDate || row.rechargeDate || '—' },
+        {
+          label: '充值金额',
+          value:
+            (record?.amount ?? row.amount) != null
+              ? `${Number(record?.amount ?? row.amount).toFixed(2)} 元`
+              : '—'
+        },
+        { label: '卡号', value: record?.cardNo || row.cardNo || '—', long: false, fullSpan: false },
+        { label: '加油站/渠道', value: record?.gasStation || row.gasStation || '—' },
+        {
+          label: '发放人',
+          value: record?.createByName || row.recordCreateByName || '—'
+        },
+        {
+          label: '备注',
+          value: record?.remark || row.recordRemark || '—',
+          span: true
+        }
+      ],
+      slotTitle: '发放附件',
+      slot: 'record-attachments'
+    })
+  }
+  return sections
+})
+
+async function loadViewApplyDetail(applyId: string) {
+  const requestId = ++viewRequestId
+  viewLoading.value = true
+  try {
+    const res = await vehicleRechargeApplyApi.get(applyId)
+    if (requestId !== viewRequestId || !viewVisible.value) return
+    viewApplyDetail.value = (res as { data?: VehicleRechargeApply }).data ?? (res as VehicleRechargeApply)
+  } catch {
+    if (requestId === viewRequestId) viewApplyDetail.value = null
+  } finally {
+    if (requestId === viewRequestId) viewLoading.value = false
+  }
+}
+
+async function loadVehicleOptions() {
+  try {
+    vehicleOptions.value = await fetchAllPagedRecords<Vehicle>(async (page, pageSize) => {
+      const vehicles = await vehicleApi.list({ page, pageSize })
+      return pickBxPageResult<Vehicle>(vehicles)
+    })
+  } catch {
+    vehicleOptions.value = []
+  }
+}
+
+async function fetchData() {
+  loading.value = true
+  try {
+    const res = await vehicleRechargeRecordApi.disburseBoard({
+      ...buildListQueryParams(),
+      page: pagination.page,
+      pageSize: pagination.pageSize
+    })
+    const data = res.data ?? res
+    tableData.value = data.items || []
+    pagination.total = data.total || 0
+    mittBus.emit('rechargeSummaryRefresh')
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleSearch() {
+  pagination.page = 1
+  fetchData()
+}
+
+function handleReset() {
+  clearAllFilters()
+  quickSearchKeyword.value = ''
+  pagination.page = 1
+  fetchData()
+}
+
+function handleQuickSearch() {
+  pagination.page = 1
+  fetchData()
+}
+
+function handleQuickSearchClear() {
+  quickSearchKeyword.value = ''
+  pagination.page = 1
+  fetchData()
+}
+
+function handleSelectionChange(rows: VehicleRechargeDisburseBoardItem[]) {
+  selectedRows.value = rows
+}
+
+function resetForm() {
+  formData.id = ''
+  formData.rechargeOrderNo = ''
+  formData.applyId = ''
+  formData.licensePlate = ''
+  formData.rechargeType = 'etc'
+  formData.rechargeDate = ''
+  formData.cardNo = ''
+  formData.gasStation = ''
+  formData.amount = null
+  formData.attachmentUrls = ''
+  formData.remark = ''
+  currentApplyRow.value = null
+}
+
+function handleDisburse(row: VehicleRechargeDisburseBoardItem) {
+  if (row.applyStatus === 'in_approval') {
+    ElMessage.warning('审批中的申请请到「ETC充值审批」菜单完成发放登记')
+    return
+  }
+  resetForm()
+  dialogMode.value = 'disburse'
+  dialogTitle.value = '发放登记'
+  currentApplyRow.value = row
+  formData.applyId = row.applyId
+  formData.licensePlate = row.licensePlate
+  formData.rechargeType = 'etc'
+  formData.rechargeDate = new Date().toISOString().slice(0, 10)
+  dialogVisible.value = true
+}
+
+async function handleSupplement() {
+  resetForm()
+  dialogMode.value = 'supplement'
+  dialogTitle.value = '无申请补录'
+  formData.rechargeDate = new Date().toISOString().slice(0, 10)
+  await loadVehicleOptions()
+  dialogVisible.value = true
+}
+
+async function handleEdit(row: VehicleRechargeDisburseBoardItem) {
+  if (!row.recordId) return
+  resetForm()
+  dialogMode.value = 'edit'
+  dialogTitle.value = '编辑发放登记'
+  currentApplyRow.value = row
+  const res = await vehicleRechargeRecordApi.get(row.recordId)
+  const detail = res.data ?? res
+  Object.assign(formData, {
+    id: detail.id,
+    rechargeOrderNo: detail.rechargeOrderNo,
+    applyId: detail.applyId || row.applyId,
+    licensePlate: detail.licensePlate || row.licensePlate,
+    rechargeType: 'etc',
+    rechargeDate: detail.rechargeDate,
+    cardNo: detail.cardNo || '',
+    gasStation: detail.gasStation || '',
+    amount: Number(detail.amount),
+    attachmentUrls: detail.attachmentUrls || '',
+    remark: detail.remark || ''
+  })
+  dialogVisible.value = true
+}
+
+function handleView(row: VehicleRechargeDisburseBoardItem) {
+  viewingRecord.value = row
+  viewApplyDetail.value = null
+  viewVisible.value = true
+  void loadViewApplyDetail(row.applyId)
+}
+
+const toolbarOverflowItems = computed<ListToolbarOverflowItem[]>(() => {
+  const row = selectedRows.value.length === 1 ? selectedRows.value[0] : null
+  const disbursed = !!row && row.applyStatus === 'disbursed' && !!row.recordId
+  return [
+    overflowEditItem({
+      disabled: !disbursed,
+      onClick: () => handleToolbarEdit()
+    }),
+    overflowDeleteItem({
+      label: '撤销发放',
+      disabled: !disbursed,
+      loading: !!(row?.recordId && deleteLoadingMap[row.recordId]),
+      onClick: () => handleToolbarDelete()
+    }),
+    {
+      key: 'supplement',
+      label: '无申请补录',
+      icon: Plus,
+      onClick: () => handleSupplement()
+    },
+    overflowExportPlaceholder(),
+    overflowClearFiltersItem(hasActiveFilters.value, () => clearAllFilters())
+  ]
+})
+
+function handleToolbarDisburse() {
+  if (selectedRows.value.length !== 1) {
+    ElMessage.warning('请先勾选一条申请')
+    return
+  }
+  handleDisburse(selectedRows.value[0])
+}
+
+function handleToolbarEdit() {
+  if (selectedRows.value.length !== 1) {
+    ElMessage.warning('请先勾选一条申请')
+    return
+  }
+  handleEdit(selectedRows.value[0])
+}
+
+function handleToolbarDelete() {
+  if (selectedRows.value.length !== 1) {
+    ElMessage.warning('请先勾选一条申请')
+    return
+  }
+  handleDelete(selectedRows.value[0])
+}
+
+async function handleViewDelete() {
+  if (!viewingRecord.value) return
+  await handleDelete(viewingRecord.value)
+  viewVisible.value = false
+}
+
+async function handleSubmit() {
+  await formRef.value?.validate()
+  if (attachmentUploadRef.value?.hasUploading?.()) {
+    ElMessage.warning('附件上传中，请稍候')
+    return
+  }
+  submitLoading.value = true
+  try {
+    const payload = {
+      applyId: formData.applyId || undefined,
+      licensePlate: dialogMode.value === 'supplement' ? formData.licensePlate : undefined,
+      rechargeType: 'etc',
+      rechargeDate: formData.rechargeDate,
+      cardNo: formData.cardNo || undefined,
+      gasStation: formData.gasStation || undefined,
+      amount: formData.amount,
+      attachmentUrls: formData.attachmentUrls || undefined,
+      remark: formData.remark || undefined
+    }
+    if (dialogMode.value === 'edit') {
+      await vehicleRechargeRecordApi.update(formData.id, payload)
+      ElMessage.success('更新成功')
+    } else {
+      await vehicleRechargeRecordApi.create(payload)
+      ElMessage.success('发放登记成功')
+    }
+    dialogVisible.value = false
+    await fetchData()
+    const applyId = formData.applyId || currentApplyRow.value?.applyId
+    if (applyId) refreshViewIfOpen(applyId)
+  } finally {
+    submitLoading.value = false
+  }
+}
+
+async function handleDelete(row: VehicleRechargeDisburseBoardItem) {
+  if (!row.recordId) return
+  await ElMessageBox.confirm('确定撤销该发放登记吗？关联申请将回退为待发放。', '提示', { type: 'warning' })
+  deleteLoadingMap[row.recordId] = true
+  try {
+    await vehicleRechargeRecordApi.delete(row.recordId)
+    ElMessage.success('已撤销发放')
+    fetchData()
+  } finally {
+    deleteLoadingMap[row.recordId] = false
+  }
+}
+
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<style scoped lang="scss">
+.apply-summary-block {
+  margin-bottom: 16px;
+  padding: 12px 14px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--primary-bg);
+}
+
+.apply-summary-title {
+  margin-bottom: 10px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.apply-summary-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px 16px;
+  font-size: 13px;
+  color: var(--text);
+
+  .label {
+    display: inline-block;
+    min-width: 72px;
+    margin-right: 6px;
+    color: var(--text-muted);
+  }
+}
+</style>
diff --git a/web-admin/src/views/pl/etc-vehicle-recharge-workflow/index.vue b/web-admin/src/views/pl/etc-vehicle-recharge-workflow/index.vue
new file mode 100644
index 000000000..a3fa3e541
--- /dev/null
+++ b/web-admin/src/views/pl/etc-vehicle-recharge-workflow/index.vue
@@ -0,0 +1,663 @@
+<!-- ETC充值审批人设置 -->
+<!-- eslint-disable vue/no-v-model-argument -->
+<template>
+  <div class="page-container">
+    <section class="panel">
+      <div class="wf-info-bar">
+        <span><b>流程名称：</b>{{ wfDef.wfName || '-' }}</span>
+        <span>
+          <b>状态：</b>
+          <el-tag :type="statusTagType(wfDef.status)" size="small">
+            {{ statusLabel(wfDef.status) }}
+          </el-tag>
+        </span>
+        <span class="form-tip">ETC 与油卡共用同一套审批人配置</span>
+      </div>
+
+      <div class="list-toolbar">
+        <div class="list-toolbar-row">
+          <ListQuickSearchInput
+            v-model="quickSearchKeyword"
+            placeholder="节点名称/审批人"
+            @search="handleQuickSearch"
+            @clear="handleQuickSearchClear"
+          />
+          <el-button class="btn-main" type="primary" @click="openAddDialog">
+            <el-icon><Plus /></el-icon>新增节点
+          </el-button>
+          <el-button
+            class="btn-ghost"
+            :disabled="selectedRows.length !== 1"
+            @click="handleToolbarEdit"
+          >
+            <el-icon><EditPen /></el-icon>编辑
+          </el-button>
+          <el-button
+            class="btn-ghost"
+            type="danger"
+            :disabled="selectedRows.length !== 1 || !canDeleteByCreator(selectedRows[0])"
+            :title="selectedRows.length === 1 && !canDeleteByCreator(selectedRows[0]) ? CREATOR_DELETE_TIP : ''"
+            :loading="loadingMap.rowDelete"
+            @click="handleToolbarDelete"
+          >
+            <el-icon><Delete /></el-icon>删除
+          </el-button>
+          <el-button class="btn-ghost" :disabled="selectedRows.length !== 1" @click="handleToolbarMoveUp">
+            <el-icon><ArrowUp /></el-icon>上移
+          </el-button>
+          <el-button class="btn-ghost" :disabled="selectedRows.length !== 1" @click="handleToolbarMoveDown">
+            <el-icon><ArrowDown /></el-icon>下移
+          </el-button>
+          <el-button class="btn-ghost" :loading="loadingMap.save" @click="saveNodes">
+            <el-icon><Upload /></el-icon>保存配置
+          </el-button>
+
+          <ListToolbarEndActions
+            :loading="loading"
+            :column-defs="listColumnDefs"
+            v-model:visible-columns="visibleColumns"
+            v-model:check-all="checkAll"
+            :is-indeterminate="isIndeterminate"
+            @refresh="loadWfDef"
+            @reset-columns="resetToDefault"
+          />
+        </div>
+      </div>
+
+      <div class="list-body list-wrap">
+        <div class="list-table-viewport-anchor">
+        <ListTable
+          table-key="pl-etc-vehicle-recharge-workflow"
+          class="list-table"
+          :data="filteredNodes"
+          v-loading="loading"
+          stripe
+          @selection-change="onSelectionChange"
+          @row-dblclick="openEditDialog"
+        >
+          <el-table-column type="selection" width="48" align="center" header-align="center" />
+          <el-table-column type="index" label="序号" width="68" align="center" header-align="center" />
+          <el-table-column
+            prop="nodeName"
+            label="节点名称"
+            min-width="180"
+            align="center"
+            header-align="center"
+            show-overflow-tooltip
+          >
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">节点名称</span>
+                <ColumnHeaderFilter
+                  prop="nodeName"
+                  label="节点名称"
+                  type="text"
+                  :is-active="isFilterActive('nodeName')"
+                  :model-value="filters.nodeName || null"
+                  @update:model-value="(v) => setFilterState('nodeName', v)"
+                />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="actionType"
+            label="节点动作"
+            min-width="120"
+            align="center"
+            header-align="center"
+          >
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">节点动作</span>
+                <ColumnHeaderFilter
+                  prop="actionType"
+                  label="节点动作"
+                  type="enum"
+                  :enum-options="collectUniqueOptions('actionType')"
+                  :is-active="isFilterActive('actionType')"
+                  :model-value="filters.actionType || null"
+                  @update:model-value="(v) => setFilterState('actionType', v)"
+                />
+              </div>
+            </template>
+            <template #default="{ row }">
+              <el-tag
+                :type="(row.actionType || row.action_type || 'approve') === 'disburse' ? 'success' : 'primary'"
+                size="small"
+              >
+                {{ (row.actionType || row.action_type || 'approve') === 'disburse' ? '发放登记' : '审批' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column
+            v-if="isColumnVisible('nodeOrder')"
+            prop="nodeOrder"
+            label="节点顺序"
+            min-width="100"
+            align="center"
+            header-align="center"
+          >
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">节点顺序</span>
+                <ColumnHeaderFilter
+                  prop="nodeOrder"
+                  label="节点顺序"
+                  type="number"
+                  :is-active="isFilterActive('nodeOrder')"
+                  :model-value="filters.nodeOrder || null"
+                  @update:model-value="(v) => setFilterState('nodeOrder', v)"
+                />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            v-if="isColumnVisible('approverName')"
+            prop="approverName"
+            label="审批人"
+            min-width="120"
+            align="center"
+            header-align="center"
+            show-overflow-tooltip
+          >
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">审批人</span>
+                <ColumnHeaderFilter
+                  prop="approverName"
+                  label="审批人"
+                  type="text"
+                  :is-active="isFilterActive('approverName')"
+                  :model-value="filters.approverName || null"
+                  @update:model-value="(v) => setFilterState('approverName', v)"
+                />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            v-if="isColumnVisible('configStatus')"
+            prop="configStatus"
+            label="配置状态"
+            min-width="110"
+            align="center"
+            header-align="center"
+          >
+            <template #header>
+              <div class="col-header-with-filter">
+                <span class="col-header-with-filter__label">配置状态</span>
+                <ColumnHeaderFilter
+                  prop="configStatus"
+                  label="配置状态"
+                  type="enum"
+                  :enum-options="collectUniqueOptions('configStatus')"
+                  :is-active="isFilterActive('configStatus')"
+                  :model-value="filters.configStatus || null"
+                  @update:model-value="(v) => setFilterState('configStatus', v)"
+                />
+              </div>
+            </template>
+            <template #default="{ row }">
+              <el-tag :type="(row.approverId ?? row.approver_id) ? 'success' : 'warning'" size="small">
+                {{ (row.approverId ?? row.approver_id) ? '已配置' : '未配置' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+        </ListTable>
+        </div>
+
+      <div class="pagination list-pager-bar">
+          <div class="list-pager-selected">
+            已选 <span class="sel-num">{{ selectedRows.length }}</span> 项
+          </div>
+      </div>
+      </div>
+    </section>
+
+    <el-dialog
+      v-model="dialogs.addNode"
+      title="新增节点"
+      width="560px"
+      class="dialog-form-layout"
+      align-center
+      destroy-on-close
+      :close-on-click-modal="false"
+    >
+      <el-form
+        ref="addFormRef"
+        :model="formData"
+        :rules="formRules"
+        label-position="top"
+        class="bx-dialog-form"
+        scroll-to-error
+        :scroll-into-view-options="{ behavior: 'smooth', block: 'center' }"
+      >
+        <div class="form-grid-2">
+          <el-form-item label="节点名称" prop="nodeName">
+            <el-input v-model="formData.nodeName" placeholder="请输入节点名称" />
+          </el-form-item>
+          <el-form-item label="节点顺序">
+            <el-input-number v-model="formData.nodeOrder" controls-position="right" :min="1" style="width: 100%" />
+          </el-form-item>
+          <el-form-item label="节点动作" prop="actionType">
+            <el-select v-model="formData.actionType" placeholder="请选择" style="width: 100%">
+              <el-option label="审批" value="approve" />
+              <el-option label="发放登记" value="disburse" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="审批人" style="grid-column: 1 / -1">
+            <el-select
+              v-model="formData.approverId"
+              placeholder="请选择审批人"
+              clearable
+              filterable
+              style="width: 100%"
+              @change="handleApproverChange"
+            >
+              <el-option v-for="u in userOptions" :key="u.id" :label="u.displayName" :value="u.id" />
+            </el-select>
+          </el-form-item>
+        </div>
+      </el-form>
+      <template #footer>
+        <el-button class="btn-ghost" @click="dialogs.addNode = false">
+          <el-icon><Close /></el-icon>取消
+        </el-button>
+        <el-button class="btn-main" type="primary" :loading="loadingMap.addNodeSubmit" @click="submitAddNode">
+          <el-icon><Check /></el-icon>确定
+        </el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog
+      v-model="dialogs.editNode"
+      title="编辑节点"
+      width="560px"
+      class="dialog-form-layout"
+      align-center
+      destroy-on-close
+      :close-on-click-modal="false"
+    >
+      <el-form
+        ref="editFormRef"
+        :model="formData"
+        :rules="formRules"
+        label-position="top"
+        class="bx-dialog-form"
+        scroll-to-error
+        :scroll-into-view-options="{ behavior: 'smooth', block: 'center' }"
+      >
+        <div class="form-grid-2">
+          <el-form-item label="节点名称" prop="nodeName">
+            <el-input v-model="formData.nodeName" placeholder="请输入节点名称" />
+          </el-form-item>
+          <el-form-item label="节点顺序">
+            <el-input-number v-model="formData.nodeOrder" controls-position="right" :min="1" style="width: 100%" />
+          </el-form-item>
+          <el-form-item label="节点动作" prop="actionType">
+            <el-select v-model="formData.actionType" placeholder="请选择" style="width: 100%">
+              <el-option label="审批" value="approve" />
+              <el-option label="发放登记" value="disburse" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="审批人" style="grid-column: 1 / -1">
+            <el-select
+              v-model="formData.approverId"
+              placeholder="请选择审批人"
+              clearable
+              filterable
+              style="width: 100%"
+              @change="handleApproverChange"
+            >
+              <el-option v-for="u in userOptions" :key="u.id" :label="u.displayName" :value="u.id" />
+            </el-select>
+          </el-form-item>
+        </div>
+      </el-form>
+      <template #footer>
+        <el-button class="btn-ghost" @click="dialogs.editNode = false">
+          <el-icon><Close /></el-icon>取消
+        </el-button>
+        <el-button class="btn-main" type="primary" :loading="loadingMap.editNodeSubmit" @click="submitEditNode">
+          <el-icon><Check /></el-icon>确定
+        </el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, computed, onMounted } from 'vue'
+import ColumnHeaderFilter from '@/components/business/column-header-filter/index.vue'
+import ListToolbarEndActions from '@/components/business/list-toolbar-end-actions/index.vue'
+import ListQuickSearchInput from '@/components/business/list-quick-search-input/index.vue'
+import { useClientColumnFilters } from '@/composables/useClientColumnFilters'
+import { usePersistedListColumns } from '@/composables/usePersistedListColumns'
+import { canDeleteByCreator, filterDeletableByCreator, allRowsDeletableByCreator, CREATOR_DELETE_TIP } from '@/utils/creator-delete'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance } from 'element-plus'
+import {
+  Plus,
+  EditPen,
+  Delete,
+  Close,
+  Check,
+  Upload,
+  ArrowUp,
+  ArrowDown
+} from '@element-plus/icons-vue'
+import { workflowApi } from '@/api/bx'
+import { fetchUserOptions } from '@/api/admin'
+import { statusLabel, statusTagType } from '@/utils/bx/format'
+import { plVehicleRechargeWorkflowColumnFilterDefs } from '@/views/pl/etc-vehicle-recharge-apply/columnFilterDefs'
+
+type DialogKey = 'addNode' | 'editNode'
+
+const loadingMap = reactive<Record<string, boolean>>({})
+const dialogs = reactive<Record<DialogKey, boolean>>({
+  addNode: false,
+  editNode: false
+})
+
+const quickSearchKeyword = ref('')
+const appliedQuickSearch = ref('')
+
+const listColumnDefs = [
+  { prop: 'nodeOrder', label: '节点顺序' },
+  { prop: 'approverName', label: '审批人' },
+  { prop: 'configStatus', label: '配置状态' }
+]
+
+const {
+  visibleColumns,
+  checkAll,
+  isIndeterminate,
+  isColumnVisible,
+  resetToDefault
+} = usePersistedListColumns('pl-etc-vehicle-recharge-workflow-list-columns', listColumnDefs)
+
+const loading = ref(false)
+const selectedRows = ref<Record<string, any>[]>([])
+const wfDef = ref<Record<string, any>>({})
+const allNodes = computed(() => wfDef.value.nodes || [])
+const quickFilteredNodes = computed(() => {
+  const kw = appliedQuickSearch.value.trim().toLowerCase()
+  if (!kw) return allNodes.value
+  return allNodes.value.filter(
+    (n: any) =>
+      String(n.nodeName || '')
+        .toLowerCase()
+        .includes(kw) ||
+      String(n.approverName || '')
+        .toLowerCase()
+        .includes(kw)
+  )
+})
+const {
+  filters,
+  filteredRows: filteredNodes,
+  setFilterState,
+  isFilterActive,
+  collectUniqueOptions
+} = useClientColumnFilters(quickFilteredNodes, plVehicleRechargeWorkflowColumnFilterDefs)
+const nodes = allNodes
+const userOptions = ref<
+  { id: string; realName: string; username: string; roles: string; displayName: string }[]
+>([])
+
+const formData = reactive({
+  nodeName: '',
+  nodeOrder: 1,
+  actionType: 'approve' as 'approve' | 'disburse',
+  approverId: null as string | null,
+  approverName: ''
+})
+
+const formRules = {
+  nodeName: [{ required: true, message: '节点名称不能为空', trigger: 'blur' }],
+  actionType: [{ required: true, message: '请选择节点动作', trigger: 'change' }]
+}
+
+const addFormRef = ref<FormInstance>()
+const editFormRef = ref<FormInstance>()
+
+async function loadUsers() {
+  try {
+    const res = await fetchUserOptions()
+    const data: any = (res as any)?.data ?? res ?? []
+    userOptions.value = (Array.isArray(data) ? data : []).map((u: any) => {
+      const name = u.label || u.nickName || ''
+      const account = u.userNo || ''
+      return {
+        id: String(u.value ?? u.id ?? ''),
+        realName: name,
+        username: account,
+        roles: '',
+        displayName: account ? `${name}（${account}）` : name
+      }
+    })
+  } catch {
+    userOptions.value = []
+  }
+}
+
+async function loadWfDef() {
+  loading.value = true
+  try {
+    const res = await workflowApi.getByBizType('vehicle_recharge')
+    wfDef.value = res.data ?? {}
+  } catch {
+    wfDef.value = {}
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  loadWfDef()
+  loadUsers()
+})
+
+function onSelectionChange(rows: Record<string, any>[]) {
+  selectedRows.value = rows
+}
+
+function handleQuickSearch() {
+  appliedQuickSearch.value = quickSearchKeyword.value.trim()
+}
+
+function handleQuickSearchClear() {
+  quickSearchKeyword.value = ''
+  appliedQuickSearch.value = ''
+}
+
+function handleToolbarEdit() {
+  if (selectedRows.value.length !== 1) {
+    ElMessage.warning('请先勾选一条节点')
+    return
+  }
+  openEditDialog(selectedRows.value[0])
+}
+
+function handleToolbarDelete() {
+  if (selectedRows.value.length !== 1) {
+    ElMessage.warning('请先勾选一条节点')
+    return
+  }
+  deleteNode(selectedRows.value[0])
+}
+
+function handleToolbarMoveUp() {
+  if (selectedRows.value.length !== 1) return
+  moveUp(selectedRows.value[0])
+}
+
+function handleToolbarMoveDown() {
+  if (selectedRows.value.length !== 1) return
+  moveDown(selectedRows.value[0])
+}
+
+function buildNodePayload(list: Record<string, any>[]) {
+  return list.map((n, i) => ({
+    id: n.id != null ? String(n.id) : undefined,
+    nodeName: n.nodeName,
+    nodeOrder: i + 1,
+    actionType: n.actionType ?? n.action_type ?? 'approve',
+    approverId: n.approverId ?? n.approver_id ?? null,
+    approverName: n.approverName ?? n.approver_name ?? ''
+  }))
+}
+
+async function saveNodes() {
+  loadingMap.save = true
+  try {
+    await workflowApi.saveNodes(wfDef.value.id, buildNodePayload(nodes.value))
+    ElMessage.success('保存成功')
+    await loadWfDef()
+  } catch (e: any) {
+    ElMessage.error(e.message || '保存失败')
+  } finally {
+    loadingMap.save = false
+  }
+}
+
+function openAddDialog() {
+  Object.assign(formData, {
+    nodeName: '',
+    nodeOrder: nodes.value.length + 1,
+    actionType: 'approve',
+    approverId: null,
+    approverName: ''
+  })
+  dialogs.addNode = true
+}
+
+function openEditDialog(node: Record<string, any>) {
+  Object.assign(formData, {
+    nodeName: node.nodeName,
+    nodeOrder: node.nodeOrder,
+    actionType: (node.actionType ?? node.action_type ?? 'approve') as 'approve' | 'disburse',
+    approverId: node.approverId ?? node.approver_id ?? null,
+    approverName: node.approverName ?? node.approver_name ?? ''
+  })
+  dialogs.editNode = true
+}
+
+function handleApproverChange(userId: string | null) {
+  if (userId == null) {
+    formData.approverName = ''
+    return
+  }
+  const found = userOptions.value.find((u) => u.id === userId)
+  formData.approverName = found ? found.realName : ''
+}
+
+async function submitAddNode() {
+  const valid = await addFormRef.value?.validate().catch(() => false)
+  if (!valid) return
+  loadingMap.addNodeSubmit = true
+  try {
+    const newNodes = [
+      ...nodes.value,
+      {
+        nodeName: formData.nodeName,
+        nodeOrder: formData.nodeOrder,
+        actionType: formData.actionType,
+        approverId: formData.approverId,
+        approverName: formData.approverName
+      }
+    ]
+    await workflowApi.saveNodes(wfDef.value.id, buildNodePayload(newNodes))
+    ElMessage.success('新增成功')
+    dialogs.addNode = false
+    await loadWfDef()
+  } catch (e: any) {
+    ElMessage.error(e.message || '新增失败')
+  } finally {
+    loadingMap.addNodeSubmit = false
+  }
+}
+
+async function submitEditNode() {
+  const valid = await editFormRef.value?.validate().catch(() => false)
+  if (!valid) return
+  loadingMap.editNodeSubmit = true
+  try {
+    const newNodes = nodes.value.map((n: Record<string, any>) =>
+      n.nodeOrder === formData.nodeOrder
+        ? {
+            ...n,
+            nodeName: formData.nodeName,
+            actionType: formData.actionType,
+            approverId: formData.approverId,
+            approverName: formData.approverName
+          }
+        : n
+    )
+    await workflowApi.saveNodes(wfDef.value.id, buildNodePayload(newNodes))
+    ElMessage.success('编辑成功')
+    dialogs.editNode = false
+    await loadWfDef()
+  } catch (e: any) {
+    ElMessage.error(e.message || '编辑失败')
+  } finally {
+    loadingMap.editNodeSubmit = false
+  }
+}
+
+async function deleteNode(node: Record<string, any>) {
+  if (!canDeleteByCreator(node)) {
+    ElMessage.warning(CREATOR_DELETE_TIP)
+    return
+  }
+  await ElMessageBox.confirm(`确定要删除节点「${node.nodeName}」吗？`, '删除确认', {
+    confirmButtonText: '确定删除',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+  loadingMap.rowDelete = true
+  try {
+    const newNodes = nodes.value.filter((n: Record<string, any>) => n.id !== node.id)
+    await workflowApi.saveNodes(wfDef.value.id, buildNodePayload(newNodes))
+    ElMessage.success('删除成功')
+    await loadWfDef()
+  } catch (e: any) {
+    if (e !== 'cancel') ElMessage.error(e.message || '删除失败')
+  } finally {
+    loadingMap.rowDelete = false
+  }
+}
+
+async function moveUp(node: Record<string, any>) {
+  const idx = nodes.value.findIndex((n: Record<string, any>) => n.id === node.id)
+  if (idx <= 0) return
+  const arr = [...nodes.value]
+  const temp = arr[idx]
+  arr[idx] = arr[idx - 1]
+  arr[idx - 1] = temp
+  arr.forEach((n: Record<string, any>, i: number) => (n.nodeOrder = i + 1))
+  try {
+    await workflowApi.saveNodes(wfDef.value.id, buildNodePayload(arr))
+    ElMessage.success('上移成功')
+    await loadWfDef()
+  } catch (e: any) {
+    ElMessage.error(e.message || '上移失败')
+  }
+}
+
+async function moveDown(node: Record<string, any>) {
+  const arr = [...nodes.value]
+  const idx = arr.findIndex((n: Record<string, any>) => n.id === node.id)
+  if (idx < 0 || idx >= arr.length - 1) return
+  const temp = arr[idx]
+  arr[idx] = arr[idx + 1]
+  arr[idx + 1] = temp
+  arr.forEach((n: Record<string, any>, i: number) => (n.nodeOrder = i + 1))
+  try {
+    await workflowApi.saveNodes(wfDef.value.id, buildNodePayload(arr))
+    ElMessage.success('下移成功')
+    await loadWfDef()
+  } catch (e: any) {
+    ElMessage.error(e.message || '下移失败')
+  }
+}
+</script>