fix(frontend): M3 台账/月结/审批三页数据加载与分页——e2e 首跑抓出

calc_settlement_flow e2e 首跑即暴露三处真实缺陷（三页自 2026-10-17 交付起一直「暂无数据」且翻页失效，此前无 e2e 覆盖）： - api/{calc,settlements,approvals}.ts 误用默认导出 `request`（axios 实例，返回 AxiosResponse 未解包），usePagedList 拿到的 data.list 恒 undefined → 三页永远「暂无数据」；改为具名导入 `{ request }`（统一信封解包版） - 三页均无 onMounted 初始加载 → 进页不取数；补 `onMounted(() => void load())` - 三页 AppPagination 用 `v-model:page-num` + `@change`（组件无该事件、也未实现 update:*）→ 翻页失效；统一为 `:page-num/:page-size` + `@page-change/@size-change` - 并入并行会话的操作列 align="center" 样式与 M4 报表页 README 段落验证：e2e calc_settlement_flow 8 步全过（API 预置→台账筛选→重算对话框按回款 ID→版本三态筛选→月结生成→提交锁定→详情抽屉）；type-check 绿 Co-Authored-By: Claude Code <noreply@anthropic.com>
style(backend): 验证码配色切换至 v3 中性色体系
2026-10-19 16:24:18 +08:00 · 2026-10-19 15:55:02 +08:00 · 2026-10-19 15:54:59 +08:00
10 changed files with 118 additions and 69 deletions
--- a/backend/app/core/captcha_image.py
+++ b/backend/app/core/captcha_image.py
@ -27,11 +27,12 @@ _WIDTH, _HEIGHT = 120, 40
 _FONT_SIZE = 25
 _PADDING = 8

-# 与前端配色呼应：墨色字符、青灰干扰、素纸底
-_INK = (15, 54, 70)
-_INTERFERENCE = (126, 156, 170)
-_SPECKLE = (168, 183, 192)
-_PAPER = (247, 246, 242)
+# 与前端 v3 配色呼应（--ys-ink / --ys-ink-2 / --ys-ink-3 / --ys-paper）：
+# 墨色字符、次级墨干扰、辅助墨噪点、纸白底
+_INK = (28, 35, 51)  # #1c2333
+_INTERFERENCE = (91, 101, 119)  # #5b6577
+_SPECKLE = (154, 163, 178)  # #9aa3b2
+_PAPER = (255, 255, 255)  # #ffffff

 _SPECKLE_COUNT = 46
 _INTERFERENCE_LINES = 2
--- a/docs/design/视觉方向预览.html
+++ b/docs/design/视觉方向预览.html
@ -35,7 +35,7 @@

    --ys-radius: 10px;
    --ys-radius-sm: 7px;
-    --ys-font: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', -apple-system,
+    --ys-font: 'Noto Sans SC', 'PingFang SC', -apple-system,
      'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --ys-ease: cubic-bezier(0.25, 0.1, 0.25, 1);

@ -46,8 +46,8 @@
    /* 极微噪点：去除大色块的塑料感（内联 SVG，无外部依赖） */
    --ys-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");

-    /* 品牌字：思源黑体（现代几何黑体；实施时自托管 4 字子集，内网可用） */
-    --ys-font-brand: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    /* 品牌字：思源黑体（现代几何黑体；实施时自托管 4 字子集，内网可用）；栈内禁用微软雅黑等需授权字体 */
+    --ys-font-brand: 'Noto Sans SC', 'Source Han Sans SC', 'HarmonyOS Sans SC', 'PingFang SC', sans-serif;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
@ -556,8 +556,8 @@
        <div class="bc-cap">B · 思源黑体 300 细体 · 0.42em</div>
      </div>
      <div class="bc">
-        <div style="font-family:'Microsoft YaHei',sans-serif;font-weight:600;letter-spacing:.25em;font-size:16px">衍水集团</div>
-        <div class="bc-cap">C · 微软雅黑 600 · 0.25em</div>
+        <div style="font-weight:600;letter-spacing:.25em;font-size:16px">衍水集团</div>
+        <div class="bc-cap">C · 系统默认 600（不指定字体，展示回退效果）· 0.25em</div>
      </div>
    </div>
  </section>
@ -936,7 +936,7 @@
 <script src="echarts.min.js"></script>
 <script>
  /* 仪表盘图表：ECharts 定制主题（圆角柱 / 无网格线 / 浅灰轴标签）——实施时前端引入 echarts 依赖 */
-  const chartFont = "'PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif";
+  const chartFont = "'Noto Sans SC','PingFang SC',sans-serif";
  const rev = echarts.init(document.getElementById('chartRev'), null, { renderer: 'svg' });
  rev.setOption({
    grid: { left: 0, right: 0, top: 6, bottom: 20, containLabel: true },
--- a/frontend/README.md
+++ b/frontend/README.md
@ -79,38 +79,42 @@ pnpm build        # 类型检查 + 生产构建

 ## 视觉设计

-**设计立意**：公司名「衍水」是水，而中文「流水账」字面就是**流水之账**——系统的全部工作正是记录回款怎么流、绩效怎么算。视觉方向由此而生：深水面板 + 流动的层理线，即公司名的意象，也是业务的隐喻。
+**设计立意**：公司名「衍水」是水，而中文「流水账」字面就是**流水之账**——系统的全部工作正是记录回款怎么流、绩效怎么算。视觉方向由此而生：中性灰白的水面纸感 + 靛蓝点缀，安静、克制，长时间核数不累眼。完整规范见 `docs/design/视觉方向预览.html`（2026-10-12 起为 v3「质感版」）。

-**配色**（金色分两档是有意的：亮金只用于深色底、深金只用于浅色底，两处对比度都达标）
+**配色**（靛蓝只作重点点缀——主按钮 / 链接 / 焦点 / 当前菜单，大面积用中性灰白）

 | 名 | 值 | 用途 |
 | --- | --- | --- |
-| 深渊 | `#061A22` | 品牌面板底色 |
-| 沉碧 | `#0F3646` | 面板渐变、水纹线 |
-| 青金 | `#C9A227` | **深色底上**的细线与边框 |
-| 赭金 | `#8F6520` | **浅色底上**的主按钮（配白字约 6.2:1） |
-| 素纸 | `#FAFAF7` | 表单侧底色 |
-| 墨 | `#16262D` | 正文 |
+| 靛蓝 | `#2e4ba8` | 主按钮、链接、焦点、当前菜单（配白字约 7.5:1） |
+| 深靛 | `#223a85` | 主色深阶（按压态） |
+| 淡靛 | `#edf1fa` | 选中底色、浅色强调底 |
+| 纸白 | `#ffffff` | 卡片与面板底色 |
+| 雾灰 | `#f4f5f8` | 页面底色 |
+| 墨 | `#1c2333` | 正文 |
+| 墨灰 | `#5b6577` / `#9aa3b2` | 次级文本 / 辅助文本 |

-**字体**：品牌名用**宋体**（衬线，拟正式、拟账册），正文用系统无衬线，数字与验证码用等宽。
+**字体**：品牌名用**思源黑体**（`Noto Sans SC` / `Source Han Sans SC`，开源可商用），正文用同一无衬线栈，数字与验证码用等宽。**禁止引入微软雅黑、宋体等需商业授权的字体**——CSS 字体栈、设计稿、导出物一律只用开源或免费商用字体（如阿里巴巴普惠体、HarmonyOS Sans）。
 **界面不引入网络字体**——内网环境字体加载不可靠，靠字重、字距与留白做层次更稳妥。新页面请沿用这套字号节奏。

-**落地方式**：品牌色已提升为全局 CSS 变量（`src/assets/styles/index.css` 的 `:root`，`--ys-*` 前缀），登录页与布局、系统管理页面共用；全局还把 `--el-color-primary` 指向赭金，Element Plus 组件默认走品牌色。登录页 scoped 里的同名局部变量只是全局 token 的别名。
+**质感来源**（而非装饰）：表面 1–2% 明度差的微渐变、半透明描边、近距 + 远距分层阴影、内高光 / 内阴影、极微噪点（内联 SVG）、精确排版（字距 / 等宽数字 / 行高节律）。

-**签名元素**：品牌面板的水纹层理线，越往下越密（如潜向深处），载入时用 `stroke-dashoffset` 逐条画出——**一个统一的入场动作，而不是散落的特效**。
+**落地方式**：品牌色已提升为全局 CSS 变量（`src/assets/styles/index.css` 的 `:root`，`--ys-*` 前缀），登录页、布局与各业务页面共用；全局把 `--el-color-primary` 指向靛蓝，并按 Element Plus 公式预计算了 light-3/5/7/8/9 与 dark-2 色阶（不用 `color-mix()`，避免依赖较新浏览器特性）。旧 token 名（深水青 / 金色系列）在 `:root` 中保留映射，存量页面迁移完成后移除。

-**构图**：品牌内容（名称 / 金线 / 系统名 / 主标语 / 环节行）**垂直居中聚成一块**，配一层柔和径向光晕作落点。
+**签名元素**：**渐隐靛蓝水线**——仪表盘等页面标题下的细线（56px，左实右虚）与登录页品牌名下的短线（40px），「衍水」之水的提纯，全站唯一的装饰性元素；登录页右上角另有涟漪同心圆与顶部靛蓝天光作背景（低透明度）。与早期深色面板 + 水纹层理同一意象，品牌连续而非推倒重来。
+
+**构图**：登录页品牌内容（名称 / 标语 / 水线）**垂直居中聚成一块**，配一层柔和径向光晕作落点。
 早期版本用 `space-between` 把品牌与标语顶到两端，中间空出大半屏，两处都成了孤岛——超宽屏会把这种疏离放大得更明显。**内容块要限宽**（`max-width`），否则宽屏下文字会被拉散。

-### 写代码时的三条约定
+### 写代码时的四条约定

 - 覆盖 Element Plus 主题请改 **CSS 变量**（`--el-button-bg-color` 等），不要直接写 `background-color` —— 后者与 `.el-button--primary` 同权重，会受样式注入顺序影响而不稳定
 - 中文可在任意字间断行，**关键文案的断行位置要显式控制**（如主标语拆成两个 `<span>`），交给浏览器自动换行会出现单字独占一行的难看结果
 - 新页面需响应式到移动端、保留键盘焦点可见、并尊重 `prefers-reduced-motion`
+- **确认框统一加 `customClass: 'ys-confirm-box'`，不要再传 `type: 'warning'`** —— Element Plus 的默认 warning 图标会渲染在正文左侧独立成列（多行正文时图标悬在文字块中间），与 v3 靛蓝体系也冲突。全局样式（`src/assets/styles/index.css`）已把图标改为 18px 描边样式并放在标题行左侧，正文与标题文字对齐

 ## 验证码图片

-后端自绘渲染（`backend/app/core/captcha_image.py`），**不再使用 `captcha` 库的默认输出**——那是随机彩色字符 + 重噪点，与界面视觉体系冲突。自绘后字符为墨蓝、底为素纸、干扰线与噪点取自同一套配色。
+后端自绘渲染（`backend/app/core/captcha_image.py`），**不再使用 `captcha` 库的默认输出**——那是随机彩色字符 + 重噪点，与界面视觉体系冲突。自绘后字符为深青色、底为暖白、干扰线与噪点取自同一套配色。

 识别难度由**逐字随机旋转（±14°）+ 垂直抖动（±2px）+ 正弦干扰曲线 + 双层噪点**共同保证，与原实现相当；笔画加了 1px 描边——本系统用户是营销人员，屏幕与年龄跨度大，验证码过难会直接变成支持负担。

@ -178,3 +182,31 @@ E2E_ADMIN_PASSWORD=<开发库admin密码> python e2e/system_management.py

 运行前置同上（需 `E2E_ADMIN_PASSWORD`）。**期间修复的缺陷**：public 端点 300s 响应缓存让登录页拿旧公司名（改 `fetch cache: no-store` + 时间戳绕过磁盘缓存）；业务弹窗分配表与产品明细共用 `items-table` 类导致选择器错位（分配表加专属 `alloc-table` 类）。
 **回归**：既有五脚本（登录 8 / 系统管理 13 / 基础数据 12 / 业务 16 / 参数 7 步）在 allowedRoles 路由扩展与品牌名动态化后全部复跑通过。
+
+## 前端页面（2026-10-19 追加 · M4 ⑤ 报表统计）
+
+| 页面 | 说明 |
+| --- | --- |
+| `/reports/personal-detail` 个人绩效明细（新组「报表统计」order19） | 人员/月份/客户类型/产品类别/岗位筛选；需规 2.4.1 全部列；行展开懒加载台账快照；页脚**全筛选合计**（注明非当前页）；导出/打印 |
+| `/reports/department-summary` 部门绩效汇总（order20） | 月份必填；全公司 5% 独立卡片；团队表（基数/12.5%/5%/占比/调整/净合计/月结冻结额）；展开成员 → 跨页下钻个人明细；未分配桶 |
+| `/reports/business-stats` 业务统计（order21） | 关键字/客户/归属人/状态/业务日期；发货额/回款额/绩效（累计口径提示）；展开下钻回款与台账明细 |
+| `/reports/payment-stats` 回款统计（order22） | 月份/回款日期/客户类型/产品类别；8 档区间表（空桶 0，档位由后端下发）；展开桶下钻分页明细；客户类型/产品类别对比表 |
+| `/reports/print/:code` 报表打印（顶层路由，`menu:false`） | 不挂 BasicLayout（打印不带侧栏/顶栏）；页眉公司信息走 public 端点；循环翻页取全量（上限 2000 行截断提示）；`@media print` A4 横版 + 每页表头；签字栏；PDF 由浏览器「另存为」覆盖 |
+
+- 路由组「报表统计」四页 `allowedRoles: [admin, finance, leader]`（前端菜单 + 后端 `require_roles` 双层；admin 须显式列入）。
+- api 封装 `src/api/reports.ts`（类型 + 查询 + `exportReport` 裸 axios blob；产品类别标签额外覆盖 `mixed`）。
+- 权限：营销后勤「授权范围内」待业务权限清单 #6，当前不开放报表。
+- type-check 与 build 通过（2026-10-19）。e2e `report_flow.py` 待补（需 `E2E_ADMIN_PASSWORD` 环境）。
+
+## 端到端测试（2026-10-19 追加 · M3 台账与月结）
+
+| 脚本 | 覆盖 | 结果 |
+| --- | --- | --- |
+| `e2e/calc_settlement_flow.py` | 绩效核算与月度结算 8 步：登录进台账页 → API 预置（客户/人员/业务/发货/回款/核算，随机远未来月份防碰撞）→ 按归属月筛选见 v1 行 → 重算对话框（原因必填）→ v2 生效 → 版本三态筛选（仅历史 / 仅当前 / 清空=全部）→ 生成月结草稿 → 提交审批（开关显式关闭=自动通过锁定）→ 详情抽屉（按人明细/净工资/锁定状态） | ✓ 全通过（2026-10-19 首跑，修复下述缺陷后） |
+
+运行前置同上（需 `E2E_ADMIN_PASSWORD`）；数据 `e2e_` 前缀 + 随机远未来月份（209x），核算/月结按设计不可删，行数据留档开发库。
+**首跑即抓出三处真实前端缺陷**（M3 台账/月结两页自 2026-10-17 交付起一直「暂无数据」）：
+① `src/api/{calc,settlements,approvals}.ts` 误用默认导出 `request`（axios 实例，返回 AxiosResponse 未解包），列表 `list` 恒为 undefined → 三页永远「暂无数据」；改为具名导入 `{ request }`（信封解包版）。
+② 三页均无 `onMounted` 初始加载 → 进页不取数；补 `onMounted(() => void load())`。
+③ 三页 `AppPagination` 用 `v-model:page-num` + `@change`（组件无该事件、也未实现 `update:*`）→ 翻页失效；统一为 `:page-num/:page-size` + `@page-change/@size-change`（usePagedList 的 onPageChange/onSizeChange）。
+**注意**：e2e 与 `pytest tests/integration` **不可并发**——conftest 每用例整体清空开发库，会清掉 e2e 造的数据造成假失败（本次排查耗时即源于此，两次假失败的报错均为「台账行消失 / 401 登录失效」）。
--- a/frontend/src/api/approvals.ts
+++ b/frontend/src/api/approvals.ts
@ -1,4 +1,4 @@
-import request from './request'
+import { request } from './request'
 import type { PageData } from './types'

 /** 审批单状态：1待财务复核 2待领导审核 3已通过 4已驳回 5已撤回 */
--- a/frontend/src/api/calc.ts
+++ b/frontend/src/api/calc.ts
@ -1,4 +1,4 @@
-import request from './request'
+import { request } from './request'
 import type { PageData } from './types'

 /** 绩效台账行（金额/比例一律 str） */
--- a/frontend/src/api/settlements.ts
+++ b/frontend/src/api/settlements.ts
@ -1,4 +1,4 @@
-import request from './request'
+import { request } from './request'
 import type { PageData } from './types'

 /** 月结状态：1草稿 2待审批 3已审定（=已锁定）4已驳回 */
--- a/frontend/src/assets/styles/index.css
+++ b/frontend/src/assets/styles/index.css
@ -30,8 +30,12 @@
  --ys-text: #1c2333;
  --ys-muted: #5b6577;

-  /* 品牌字：思源黑体（实施时自托管 4 字子集，内网可用） */
-  --ys-font-brand: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  /*
+   * 品牌字：思源黑体（实施时自托管 4 字子集，内网可用）。
+   * 栈内只用开源/免费商用字体 —— 微软雅黑、宋体等需商业授权的系统字体不得入栈。
+   */
+  --ys-font-brand: 'Noto Sans SC', 'Source Han Sans SC', 'HarmonyOS Sans SC', 'PingFang SC',
+    sans-serif;

  /*
   * Element Plus 主色 = 靛蓝（白字对比约 7.5:1）。
@ -60,8 +64,9 @@ body,
 }

 body {
-  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
-    'Microsoft YaHei', Arial, sans-serif;
+  /* 与品牌栈同源：开源字体优先；Helvetica/Arial 仅为西文回退（系统自带，不涉字体文件分发） */
+  font-family: 'Noto Sans SC', 'Source Han Sans SC', 'HarmonyOS Sans SC', 'PingFang SC',
+    'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  color: var(--ys-ink);
  background-color: var(--ys-mist);
--- a/frontend/src/views/calc/ledger/index.vue
+++ b/frontend/src/views/calc/ledger/index.vue
@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'

 import * as calcApi from '@/api/calc'
@ -21,13 +21,15 @@ const filters = reactive({
  is_active: 1 as number | undefined,
 })

-const { records, total, pageNum, pageSize, loading, load, search } = usePagedList<
-  LedgerRow,
-  { settlement_month?: string; is_active?: number }
->(calcApi.listLedger, () => ({
-  settlement_month: filters.settlement_month.trim() || undefined,
-  is_active: filters.is_active,
-}))
+const { records, total, pageNum, pageSize, loading, load, search, onPageChange, onSizeChange } =
+  usePagedList<LedgerRow, { settlement_month?: string; is_active?: number }>(calcApi.listLedger, () => ({
+    settlement_month: filters.settlement_month.trim() || undefined,
+    is_active: filters.is_active,
+  }))
+
+onMounted(() => {
+  void load()
+})

 function resetFilters(): void {
  filters.settlement_month = ''
@ -121,7 +123,7 @@ async function submitRecalc(): Promise<void> {
          </el-tag>
        </template>
      </el-table-column>
-      <el-table-column label="操作" width="90" fixed="right">
+      <el-table-column label="操作" width="90" fixed="right" align="center">
        <template #default="{ row }">
          <el-button
            v-if="row.is_active === 1 && row.calc_type === 1"
@ -136,10 +138,11 @@ async function submitRecalc(): Promise<void> {
    </el-table>

    <AppPagination
-      v-model:page-num="pageNum"
-      v-model:page-size="pageSize"
      :total="total"
-      @change="load"
+      :page-num="pageNum"
+      :page-size="pageSize"
+      @page-change="onPageChange"
+      @size-change="onSizeChange"
    />

    <el-dialog v-model="recalcVisible" title="重算确认" width="460px">
--- a/frontend/src/views/settlements/index.vue
+++ b/frontend/src/views/settlements/index.vue
@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'

 import {
@ -27,10 +27,12 @@ const filters = reactive({
  status: undefined as number | undefined,
 })

-const { records, total, pageNum, pageSize, loading, load, search } = usePagedList<
-  Settlement,
-  { status?: number }
->(listSettlements, () => ({ status: filters.status }))
+const { records, total, pageNum, pageSize, loading, load, search, onPageChange, onSizeChange } =
+  usePagedList<Settlement, { status?: number }>(listSettlements, () => ({ status: filters.status }))
+
+onMounted(() => {
+  void load()
+})

 function resetFilters(): void {
  filters.status = undefined
@ -139,27 +141,30 @@ async function handleSubmit(row: Settlement): Promise<void> {
      <el-table-column label="提交时间" min-width="150">
        <template #default="{ row }">{{ formatDateTime(row.create_time) }}</template>
      </el-table-column>
-      <el-table-column label="操作" width="130" fixed="right">
+      <el-table-column label="操作" width="140" fixed="right" align="center">
        <template #default="{ row }">
-          <el-button link type="primary" @click="openDetail(row)">详情</el-button>
-          <el-button
-            v-if="row.status === 1 || row.status === 4"
-            link
-            type="success"
-            :loading="submitting"
-            @click="handleSubmit(row)"
-          >
-            提交审批
-          </el-button>
+          <div class="table-actions">
+            <el-button link type="primary" @click="openDetail(row)">详情</el-button>
+            <el-button
+              v-if="row.status === 1 || row.status === 4"
+              link
+              type="success"
+              :loading="submitting"
+              @click="handleSubmit(row)"
+            >
+              提交审批
+            </el-button>
+          </div>
        </template>
      </el-table-column>
    </el-table>

    <AppPagination
-      v-model:page-num="pageNum"
-      v-model:page-size="pageSize"
      :total="total"
-      @change="load"
+      :page-num="pageNum"
+      :page-size="pageSize"
+      @page-change="onPageChange"
+      @size-change="onSizeChange"
    />

    <el-drawer v-model="detailVisible" title="月结详情" size="560px">
--- a/frontend/src/views/system/approvals/index.vue
+++ b/frontend/src/views/system/approvals/index.vue
@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'

 import {
@ -47,6 +47,10 @@ const { records, total, pageNum, pageSize, loading, load, search, onPageChange,
    }),
  )

+onMounted(() => {
+  void load()
+})
+
 function resetFilters(): void {
  filters.keyword = ''
  filters.status = undefined
@ -177,7 +181,7 @@ async function submitAction(): Promise<void> {
      <el-table-column label="提交时间" min-width="150">
        <template #default="{ row }">{{ formatDateTime(row.create_time) }}</template>
      </el-table-column>
-      <el-table-column label="操作" width="90" fixed="right">
+      <el-table-column label="操作" width="90" fixed="right" align="center">
        <template #default="{ row }">
          <el-button link type="primary" @click="openDetail(row)">详情</el-button>
        </template>
@ -185,12 +189,11 @@ async function submitAction(): Promise<void> {
    </el-table>

    <AppPagination
-      v-model:page-num="pageNum"
-      v-model:page-size="pageSize"
      :total="total"
-      @change="load"
-      @size-change="onSizeChange"
+      :page-num="pageNum"
+      :page-size="pageSize"
      @page-change="onPageChange"
+      @size-change="onSizeChange"
    />

    <el-drawer v-model="detailVisible" title="审批详情" size="480px">