实习笔记④

优化凭证查询模块。该模块需要展示一个会计期间内的凭证分录，并提供查看、复制和删除等操作。

后端列表接口返回的是“凭证分录”数据，同一张凭证会对应多条记录。例如凭证字号 0001 包含三条分录，接口会返回三行相同凭证字号的数据。因此，本周工作的重点不仅是调整页面样式，还包括将分录数据重新组织成凭证数据、合并表格行、设计独立查看页面，以及处理上一张和下一张凭证的切换。

经过几轮需求调整后，最终完成了以下内容：

相同“凭证字号”的公共列合并显示
操作列改为“查看”“复制”“删除”文字按钮
新增可复用的记账凭证展示组件
查看凭证由弹窗改为独立路由页面
复用原有列表接口，不新增后端详情接口
详情页支持上一张、下一张凭证切换
表格纵向、横向滚动条统一放在查询页面内部
取消操作列固定定位
配置“凭证查询 → 查看凭证”面包屑导航

1. 模块概述#

凭证查询模块位于 src/views/query/voucher 目录下，主要涉及以下文件：

文件	功能
`index.vue`	凭证查询列表页，负责条件查询、数据分组、行合并和操作入口
`detail.vue`	独立凭证查看页，负责详情展示和上一张、下一张切换
`components/VoucherSheet.vue`	记账凭证公共组件，同时支持查看模式和复制模式
`src/api/query/voucher.js`	凭证列表接口封装
`src/router/index.js`	查看凭证隐藏路由和面包屑配置

1.1 后端数据特点#

后端接口返回的数据结构如下：

1
{
2
  "total": 62,
3
  "code": 200,
4
  "msg": "查询成功",
5
  "rows": [
6
    {
7
      "account": "206009-其他代收代管款项",
8
      "d": 7482,
9
      "j": 0,
10
      "pzh": "0001",
11
      "pzrq": "2006-09-30",
12
      "zy": "代收电教费"
13
    },
14
    {
15
      "account": "206002-作业本款",
16
      "d": 1799.15,
17
      "j": 0,
18
      "pzh": "0001",
19
      "pzrq": "2006-09-30",
20
      "zy": "代收薄本款"
21
    },
22
    {
23
      "account": "102-银行存款",
24
      "d": 0,
25
      "j": 9281.15,
26
      "pzh": "0001",
27
      "pzrq": "2006-09-30",
28
      "zy": "代收薄本电教费"
29
    }
30
  ]
31
}

从数据中可以看出：

pzh：凭证字号，同一张凭证的多条分录拥有相同的凭证字号
pzrq：凭证日期
zy：摘要
account：会计科目
j：借方金额
d：贷方金额

后端返回的 total 是分录数量，而页面需要按“凭证”进行展示和分页。因此，前端需要先按照 pzh 对分录进行分组，再计算实际的凭证数量。

1.2 最终页面流程#

1
index.vue（凭证查询列表）
2
    ↓ 调用 listVoucher
3
按 pzh 对 rows 分组
4
    ↓
5
表格合并公共列
6
    ↓ 点击“查看”
7
通过路由状态携带当前凭证列表
8
    ↓
9
detail.vue（查看凭证）
10
    ↓
11
点击左右箭头切换上一张/下一张

刷新详情页面时，路由状态可能不存在，因此增加了回退流程：

1
detail.vue 页面刷新
2
    ↓
3
读取路由中的单位、年度、期间和凭证字号
4
    ↓
5
再次调用 listVoucher
6
    ↓
7
按 pzh 分组并恢复凭证顺序
8
    ↓
9
定位当前凭证

2. 凭证查询列表页#

2.1 查询条件#

查询页面提供以下条件：

查询项	字段	说明
单位代码	`dwdm`	查询指定单位的数据
会计年度	`year`	查询指定年度
会计期间	`month`	查询指定月份
凭证字号	`pzh`	在前端分组结果中筛选凭证

查询参数初始化如下：

1
const defaultQuery = {
2
  pageNum: 1,
3
  pageSize: 10,
4
  dwdm: "1000",
5
  year: "2006",
6
  month: 9,
7
  pzh: ""
8
}
9

10
const queryParams = reactive({ ...defaultQuery })

列表接口仍然使用原有的 listVoucher：

1
export function listVoucher(query) {
2
  return request({
3
    url: '/voucher/list',
4
    method: 'get',
5
    params: query
6
  })
7
}

为了在前端完成凭证分组和分页，查询时一次获取当前期间的全部分录：

1
async function getList() {
2
  loading.value = true
3
  try {
4
    const response = await listVoucher({
5
      pageNum: 1,
6
      pageSize: 10000,
7
      dwdm: queryParams.dwdm,
8
      year: queryParams.year,
9
      month: queryParams.month
10
    })
11
    sourceRows.value = Array.isArray(response.rows) ? response.rows : []
12
    tableRef.value?.clearSelection()
13
  } finally {
14
    loading.value = false
15
  }
16
}

2.2 按凭证字号分组#

接口返回的是分录数组，而列表页面的操作对象是一整张凭证。因此，使用 Map 按照 pzh 分组：

1
function buildGroups(rows) {
2
  const groupMap = new Map()
3

4
  rows.forEach((rawRow) => {
5
    const row = normalizeEntry(rawRow)
6
    const key = String(row.pzh)
7

8
    if (!groupMap.has(key)) {
9
      groupMap.set(key, {
10
        key,
11
        pzh: row.pzh,
12
        pzrq: row.pzrq,
13
        maker: firstValue(row, ["maker", "zdr", "creatorName", "createBy"]),
14
        reviewer: firstValue(row, ["reviewer", "shr", "reviewerName"]),
15
        bookkeeper: firstValue(row, ["bookkeeper", "jzr", "bookkeeperName"]),
16
        createTime: firstValue(row, ["createTime", "createdAt"]),
17
        attachmentCount: Number(
18
          firstValue(row, ["attachmentCount", "fjzs"], 0)
19
        ),
20
        entries: []
21
      })
22
    }
23

24
    groupMap.get(key).entries.push(row)
25
  })
26

27
  return Array.from(groupMap.values())
28
}

分组后的数据结构如下：

1
{
2
  key: "0001",
3
  pzh: "0001",
4
  pzrq: "2006-09-30",
5
  maker: "—",
6
  reviewer: "—",
7
  bookkeeper: "—",
8
  attachmentCount: 0,
9
  entries: [
10
    {
11
      zy: "代收电教费",
12
      account: "206009-其他代收代管款项",
13
      j: 0,
14
      d: 7482
15
    },
16
    {
17
      zy: "代收薄本款",
18
      account: "206002-作业本款",
19
      j: 0,
20
      d: 1799.15
21
    },
22
    {
23
      zy: "代收薄本电教费",
24
      account: "102-银行存款",
25
      j: 9281.15,
26
      d: 0
27
    }
28
  ]
29
}

通过这种结构，可以明确区分：

凭证级字段：凭证字号、凭证日期、制单人、审核人等
分录级字段：摘要、科目、借方金额、贷方金额

2.3 按凭证分页#

分组后使用计算属性进行凭证级分页：

1
const total = computed(() => availableGroups.value.length)
2

3
const pageGroups = computed(() => {
4
  const maxPage = Math.max(
5
    1,
6
    Math.ceil(total.value / queryParams.pageSize)
7
  )
8

9
  if (queryParams.pageNum > maxPage) {
10
    queryParams.pageNum = maxPage
11
  }
12

13
  const start = (queryParams.pageNum - 1) * queryParams.pageSize
14
  return availableGroups.value.slice(
15
    start,
16
    start + queryParams.pageSize
17
  )
18
})

这样分页组件中的总数表示凭证数量，而不是后端返回的分录数量。

2.4 将凭证重新展开为表格行#

Element Plus 表格仍然需要逐行数据，因此将当前页的凭证重新展开，并增加用于行合并的辅助字段：

1
const tableRows = computed(() => {
2
  return pageGroups.value.flatMap((group) => {
3
    const groupSize = group.entries.length
4

5
    return group.entries.map((entry, index) => ({
6
      ...entry,
7
      _groupKey: group.key,
8
      _groupSize: groupSize,
9
      _groupOffset: index,
10
      _maker: group.maker,
11
      _reviewer: group.reviewer,
12
      _createTime: group.createTime
13
    }))
14
  })
15
})

辅助字段	作用
`_groupKey`	标识当前行属于哪一张凭证
`_groupSize`	当前凭证包含多少条分录
`_groupOffset`	当前分录在凭证中的位置

3. 相同凭证字号合并行#

3.1 合并规则#

参考同类系统的展示方式，同一张凭证的以下列需要纵向合并：

勾选框
凭证日期
凭证字号
制单人
审核人
创建时间
操作

摘要、科目、借方金额和贷方金额仍然逐条显示，因为这些字段属于不同分录。

3.2 `span-method` 实现#

Element Plus 的 el-table 支持通过 span-method 返回每个单元格的行列合并信息：

1
function objectSpanMethod({ row, columnIndex }) {
2
  const mergedColumns = [0, 1, 2, 7, 8, 9, 10]
3

4
  if (!mergedColumns.includes(columnIndex)) {
5
    return {
6
      rowspan: 1,
7
      colspan: 1
8
    }
9
  }
10

11
  if (row._groupOffset === 0) {
12
    return {
13
      rowspan: row._groupSize,
14
      colspan: 1
15
    }
16
  }
17

18
  return {
19
    rowspan: 0,
20
    colspan: 0
21
  }
22
}

实现思路：

判断当前列是否属于需要合并的公共列
如果是凭证第一条分录，rowspan 设置为分录数量
如果不是第一条分录，返回 rowspan: 0 隐藏重复单元格
摘要、科目和金额列始终返回普通单元格

3.3 整组勾选#

由于勾选框也进行了行合并，用户看到的是一张凭证对应一个勾选框。点击时需要同步选中该凭证的所有分录：

1
function handleGroupSelect(selection, row) {
2
  const selected = selection.some(
3
    (item) => getRowKey(item) === getRowKey(row)
4
  )
5

6
  tableRows.value
7
    .filter((item) => item._groupKey === row._groupKey)
8
    .forEach((item) => {
9
      tableRef.value?.toggleRowSelection(item, selected)
10
    })
11
}

4. 操作列优化#

4.1 从图标改为文字按钮#

原页面的操作列只显示一个编辑图标，操作含义不够直观。优化后在单元格中直接显示三个文字按钮：

1
<div class="operation-buttons">
2
  <el-button link type="primary" @click="handleView(row)">
3
    查看
4
  </el-button>
5
  <el-button link type="warning" @click="handleCopy(row)">
6
    复制
7
  </el-button>
8
  <el-button link type="danger" @click="handleDelete(row)">
9
    删除
10
  </el-button>
11
</div>

按钮	颜色	功能
查看	蓝色	跳转到独立查看凭证页面
复制	橙色	打开复制凭证编辑界面
删除	红色	确认后从当前列表移除凭证

4.2 取消操作列固定#

最初操作列使用了：

1
fixed="right"

当表格产生横向滚动时，固定列会覆盖部分内容，并且与参考页面的行为不一致。因此删除固定属性，让操作列和其他列一起参与横向滚动。

最终配置如下：

1
<el-table-column
2
  label="操作"
3
  width="208"
4
  align="center"
5
  class-name="voucher-operation-column"
6
>

5. 页面滚动区域优化#

5.1 问题现象#

优化前，整个后台内容区域会出现纵向滚动条，表格本身只有横向滚动条，导致：

页面标题、查询条件和分页会一起上下滚动
外层页面和表格的滚动行为不统一
页面底部容易被版权区域遮挡
固定操作列与滚动内容的视觉关系不自然

5.2 外层页面固定#

将凭证查询页设置为纵向 Flex 布局，并禁止外层滚动：

1
.voucher-query-page {
2
  --voucher-border-color: #e5e7eb;
3
  display: flex;
4
  flex-direction: column;
5
  height: 100%;
6
  min-height: 0;
7
  overflow: hidden;
8
  background: #f5f7fa;
9
}

5.3 表格区域内部滚动#

表格卡片占用查询条件之外的剩余空间：

1
.table-card {
2
  display: flex;
3
  flex: 1 1 auto;
4
  flex-direction: column;
5
  min-height: 0;
6

7
  :deep(.el-card__body) {
8
    display: flex;
9
    flex: 1 1 auto;
10
    flex-direction: column;
11
    min-height: 0;
12
    padding: 0;
13
  }
14
}

表格外增加单独的自适应容器：

1
.voucher-table-wrapper {
2
  flex: 1 1 auto;
3
  min-height: 0;
4
}
5

6
.voucher-table {
7
  width: 100%;
8
  height: 100%;
9
}

同时为 el-table 设置：

1
<el-table
2
  height="100%"
3
  class="voucher-table"
4
>

这样：

纵向滚动条位于表格内容区域右侧
横向滚动条位于表格内容区域底部
查询条件和分页保持在页面固定位置
外层后台页面不再产生额外滚动条

图片占位：表格内部纵向和横向滚动条效果

6. 记账凭证公共组件#

为了同时支持查看凭证和复制凭证，新增了 VoucherSheet.vue 公共组件。

6.1 组件属性#

1
const props = defineProps({
2
  voucher: {
3
    type: Object,
4
    required: true
5
  },
6
  mode: {
7
    type: String,
8
    default: "view",
9
    validator: (value) => ["view", "copy"].includes(value)
10
  },
11
  canPrevious: {
12
    type: Boolean,
13
    default: false
14
  },
15
  canNext: {
16
    type: Boolean,
17
    default: false
18
  },
19
  showNavigation: {
20
    type: Boolean,
21
    default: true
22
  }
23
})

属性	说明
`voucher`	当前凭证数据
`mode`	`view` 为只读查看，`copy` 为复制编辑
`canPrevious`	是否允许切换上一张
`canNext`	是否允许切换下一张
`showNavigation`	是否在凭证组件内部显示导航按钮

6.2 查看模式与复制模式#

通过计算属性判断组件模式：

1
const isCopyMode = computed(() => props.mode === "copy")

查看模式下：

凭证字号只读
凭证日期只读
摘要和科目以文字展示
借贷金额按金额位数表格展示

复制模式下：

可以修改凭证字号和日期
可以编辑摘要、科目和借贷金额
可以新增或移除分录
可以保存副本到当前列表

6.3 金额位数展示#

参考会计凭证样式，金额区域划分为：

1
const moneyLabels = [
2
  "亿", "千", "百", "十",
3
  "万", "千", "百", "十",
4
  "元", "角", "分"
5
]

金额转换函数：

1
function moneyDigits(value) {
2
  const amount = Number(value || 0)
3
  if (!amount) {
4
    return Array(11).fill("")
5
  }
6

7
  const cents = Math.round(amount * 100)
8
  return String(cents)
9
    .slice(-11)
10
    .padStart(11, " ")
11
    .split("")
12
    .map((digit) => digit.trim())
13
}

这样可以将 9281.15 拆分到“千、百、十、元、角、分”对应的格子中，更接近纸质记账凭证。

6.4 借贷合计#

1
const debitTotal = computed(() =>
2
  form.entries.reduce(
3
    (total, entry) => total + Number(entry.j || 0),
4
    0
5
  )
6
)
7

8
const creditTotal = computed(() =>
9
  form.entries.reduce(
10
    (total, entry) => total + Number(entry.d || 0),
11
    0
12
  )
13
)

复制保存前需要验证借贷金额是否平衡：

1
if (Math.abs(debitTotal - creditTotal) > 0.005) {
2
  proxy.$modal.msgWarning("借贷金额不平衡，请核对后再保存")
3
  return
4
}

图片占位：查看凭证页面

图片占位：复制凭证页面

7. 查看凭证独立路由#

7.1 从弹窗改为独立页面#

第一版查看凭证使用 el-dialog 弹窗。后续需求要求取消弹窗，改为路由跳转并配置面包屑。

独立页面的优点：

查看凭证拥有完整页面空间
浏览器地址可以表示当前凭证
页面刷新后可以重新恢复数据
面包屑和标签页可以显示当前所在位置
更适合后续增加打印、附件等功能

7.2 路由配置#

新增隐藏路由：

1
{
2
  path: '/voucher-detail',
3
  component: Layout,
4
  hidden: true,
5
  redirect: '/query/voucher',
6
  meta: {
7
    title: '凭证查询'
8
  },
9
  children: [
10
    {
11
      path: ':pzh',
12
      component: () => import('@/views/query/voucher/detail'),
13
      name: 'VoucherDetail',
14
      meta: {
15
        title: '查看凭证',
16
        activeMenu: '/query/voucher',
17
        noCache: true
18
      }
19
    }
20
  ]
21
}

配置说明：

配置项	作用
`hidden: true`	不在侧边栏中增加新的菜单
`:pzh`	使用凭证字号作为路由参数
`title: 查看凭证`	设置标签页和面包屑标题
`activeMenu`	查看详情时仍高亮“凭证查询”菜单
`noCache`	切换凭证时使用最新路由数据

最终面包屑为：

1
首页 / 凭证查询 / 查看凭证

其中“凭证查询”可以返回列表页面。

7.3 为什么使用凭证字号#

最初计划通过凭证 ID 请求详情，但实际列表接口返回的数据中没有独立的凭证 ID，只有：

pzh
pzrq
zy
account
j
d

同一期间内，pzh 可以标识一张凭证，因此最终使用凭证字号作为路由参数：

1
/voucher-detail/0001

这避免了为了详情页额外修改后端接口。

8. 复用列表数据实现详情跳转#

8.1 跳转时传递查询上下文#

点击查看时，路由参数携带凭证字号，查询参数携带单位、年度和期间：

1
function handleView(row) {
2
  const group = groupFromRow(row)
3
  if (!group) return
4

5
  router.push({
6
    name: "VoucherDetail",
7
    params: {
8
      pzh: group.pzh
9
    },
10
    query: {
11
      dwdm: queryParams.dwdm,
12
      year: queryParams.year,
13
      month: queryParams.month
14
    },
15
    state: {
16
      vouchers: cloneGroup(availableGroups.value)
17
    }
18
  })
19
}

路由中各部分的作用：

数据	作用
`params.pzh`	标识当前查看的凭证
`query.dwdm`	页面刷新时重新查询单位数据
`query.year`	页面刷新时重新查询年度数据
`query.month`	页面刷新时重新查询期间数据
`state.vouchers`	正常跳转时直接复用列表页已经整理好的凭证数据

8.2 优先使用路由状态#

正常从列表页进入详情页时，可以直接从浏览器历史状态中读取凭证列表：

1
function voucherListFromRouteState() {
2
  const stateList = window.history.state?.vouchers
3

4
  if (!Array.isArray(stateList) || !stateList.length) {
5
    return []
6
  }
7

8
  return stateList.map(normalizeVoucher)
9
}

这样点击查看时不会重复请求接口，页面可以立即显示。

8.3 刷新页面时回退到列表接口#

如果用户刷新页面，路由状态可能不存在。这时根据路由中的查询条件重新调用 listVoucher：

1
const response = await listVoucher({
2
  pageNum: 1,
3
  pageSize: 10000,
4
  dwdm,
5
  year,
6
  month
7
})
8

9
const rows = Array.isArray(response.rows)
10
  ? response.rows
11
  : []
12

13
voucherList.value = buildVoucherList(rows)
14
selectVoucher(pzh)

这种设计兼顾了两种场景：

正常跳转：复用列表数据，不重复请求
页面刷新：复用原列表接口，恢复详情数据

9. 上一张和下一张凭证#

9.1 当前凭证索引#

详情页保存完整的凭证列表，并根据路由中的 pzh 计算当前索引：

1
const currentIndex = computed(() =>
2
  voucherList.value.findIndex(
3
    (item) =>
4
      String(item.pzh) === String(route.params.pzh)
5
  )
6
)

9.2 按钮禁用状态#

1
const canPrevious = computed(
2
  () => currentIndex.value > 0
3
)
4

5
const canNext = computed(
6
  () =>
7
    currentIndex.value >= 0 &&
8
    currentIndex.value < voucherList.value.length - 1
9
)

规则如下：

当前是第一张凭证：禁用左箭头
当前是最后一张凭证：禁用右箭头
中间凭证：左右箭头都可以点击

9.3 切换凭证#

1
function showAdjacentVoucher(step) {
2
  const target =
3
    voucherList.value[currentIndex.value + step]
4

5
  if (!target) return
6

7
  router.replace({
8
    name: "VoucherDetail",
9
    params: {
10
      pzh: target.pzh
11
    },
12
    query: route.query,
13
    state: {
14
      vouchers: JSON.parse(
15
        JSON.stringify(voucherList.value)
16
      )
17
    }
18
  })
19
}

这里使用 router.replace，而不是 router.push：

replace 会更新当前详情地址
不会为每一次左右切换增加新的浏览历史
浏览器返回时可以直接回到凭证查询页

按钮模板：

1
<div class="detail-navigation">
2
  <el-button
3
    icon="ArrowLeft"
4
    :disabled="!canPrevious"
5
    title="上一张凭证"
6
    @click="showAdjacentVoucher(-1)"
7
  />
8
  <el-button
9
    icon="ArrowRight"
10
    :disabled="!canNext"
11
    title="下一张凭证"
12
    @click="showAdjacentVoucher(1)"
13
  />
14
</div>

10. 复制凭证#

复制凭证继续使用弹窗，因为复制过程属于临时编辑操作，不需要生成新的详情路由。

10.1 生成新凭证字号#

1
function incrementVoucherNumber(currentNumber) {
2
  const match = String(currentNumber || "")
3
    .match(/^(.*?)(\d+)$/)
4

5
  const prefix = match?.[1] || ""
6
  const width = match?.[2]?.length || 4
7

8
  const matchingNumbers = availableGroups.value
9
    .map((group) =>
10
      String(group.pzh).match(/^(.*?)(\d+)$/)
11
    )
12
    .filter(
13
      (item) => item && item[1] === prefix
14
    )
15
    .map((item) => Number(item[2]))
16

17
  const nextNumber =
18
    Math.max(
19
      Number(match?.[2] || 0),
20
      ...matchingNumbers,
21
      0
22
    ) + 1
23

24
  return `${prefix}${String(nextNumber).padStart(
25
    width,
26
    "0"
27
  )}`
28
}

例如：

1
当前凭证字号：0009
2
复制后凭证字号：0010

10.2 复制数据#

1
function handleCopy(row) {
2
  const group = groupFromRow(row)
3
  if (!group) return
4

5
  const copy = cloneGroup(group)
6
  copy.pzh = incrementVoucherNumber(group.pzh)
7
  copy.key = copy.pzh
8
  copy.reviewer = "—"
9
  copy.bookkeeper = "—"
10

11
  copy.entries = copy.entries.map((entry) => ({
12
    ...entry,
13
    pzh: copy.pzh
14
  }))
15

16
  copyVoucher.value = copy
17
  copyVisible.value = true
18
}

10.3 保存前校验#

保存副本前检查：

凭证字号不能为空
至少保留一条有效分录
新凭证字号不能重复
借方金额和贷方金额必须平衡

这些校验可以避免在当前列表中产生明显错误的凭证数据。

这一周把一条条凭证分录整理成了一张张可以查看、复制和切换的凭证，感觉自己对前端数据建模和路由状态的理解又深入了一些。

音乐

音乐