Vue —— Vue 3 + Vite + Ant Design Vue + Pinia 财务系统技术重难点解析

在开发财务管理系统的过程中，我们遇到了一些技术难点，本文将围绕这些难点展开讨论，并提供相应的解决方案和示例代码。

一、复杂表单与多级联动处理

技术难点

财务系统中常常涉及到复杂的表单处理，尤其是在预算制定和科目管理方面。我们需要处理以下几个方面的挑战：

1. 多级表单字段之间的联动关系复杂
2. 表单数据的动态计算和校验
3. 不同分配规则下的数据处理逻辑差异大
4. 表单状态在新增和编辑模式下的切换

实现效果

通过对复杂表单和多级联动的优化处理，我们实现了：

1. 清晰的表单字段联动逻辑
2. 准确的数据计算和校验机制
3. 灵活的分配规则处理
4. 统一的新增/编辑模式管理

示例演示

<template>
  <a-modal :open="visible" :title="title" width="800px">
    <a-form ref="formRef" :model="form">
      <!-- 年度选择 -->
      <a-form-item label="年度" name="year">
        <a-select v-model:value="form.year" @change="onYearChange">
          <a-select-option v-for="year in yearOptions" :key="year" :value="year">
            {
  
  { year }}年
          </a-select-option>
        </a-select>
      </a-form-item>

      <!-- 一级科目 -->
      <a-form-item label="一级科目" name="firstLevelSubject">
        <a-select v-model:value="form.firstLevelSubject" @change="onFirstLevelChange">
          <a-select-option v-for="subject in firstLevelSubjects" :key="subject.id" :value="subject.id">
            {
  
  { subject.name }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <!-- 二级科目 -->
      <a-form-item label="二级科目" name="secondLevelSubject">
        <a-select v-model:value="form.secondLevelSubject">
          <a-select-option v-for="subject in secondLevelSubjects" :key="subject.id" :value="subject.id">
            {
  
  { subject.name }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <!-- 预算金额 -->
      <a-form-item label="预算金额" name="budgetAmount">
        <a-input-number v-model:value="form.budgetAmount" @blur="onBudgetAmountBlur" />
      </a-form-item>

      <!-- 分配规则 -->
      <a-form-item label="分配规则" name="allocationRule">
        <a-radio-group v-model:value="form.allocationRule" @change="onAllocationRuleChange">
          <a-radio value="AVERAGE">平均分配</a-radio>
          <a-radio value="CUSTOM">自定义</a-radio>
          <a-radio value="YEARLY">按年分配</a-radio>
        </a-radio-group>
      </a-form-item>

      <!-- 自定义分配 - 月度 -->
      <div v-if="form.allocationRule === 'CUSTOM' && periodType === 'MONTH'">
        <a-row>
          <a-col :span="6" v-for="(month, index) in form.monthlyBudgets" :key="index">
            <a-form-item :label="`${index + 1}月`">
              <a-input-number v-model:value="form.monthlyBudgets[index].amount" 
                              @change="calculateQuarterlyFromMonthly" />
            </a-form-item>
          </a-col>
        </a-row>
      </div>
    </a-form>
  </a-modal>
</template>

解决方案

1. 使用响应式数据管理表单状态
2. 通过 watch 监听关键字段变化，触发联动逻辑
3. 封装计算逻辑函数，确保数据一致性
4. 利用计算属性动态控制表单元素的显示与隐藏

<script setup>
import {
   
    reactive, ref, watch } from 'vue';

// 表单数据
const form = reactive({
   
   
  year: null,
  firstLevelSubject: null,
  secondLevelSubject: null,
  budgetAmount: null,
  allocationRule: 'CUSTOM',
  monthlyBudgets: Array.from({
   
    length: 12 }, (_, index) => ({
   
   
    month: index + 1,
    amount: 0
  })),
  quarterlyBudgets: Array.from({
   
    length: 4 }, (_, index) => ({
   
   
    quarter: index + 1,
    amount: 0
  }))
});

// 年度选项
const yearOptions = ref([]);
// 一级科目选项
const firstLevelSubjects = ref([]);
// 二级科目选项
const secondLevelSubjects = ref([]);

// 年度变化处理
async function onYearChange(year) {
   
   
  try {
   
   
    // 根据选择的年度获取一级科目
    const result = await api.getFirstLevelSubjects({
   
    year });
    firstLevelSubjects.value = result.data;
  } catch (error) {
   
   
    console.error('获取一级科目失败:', error);
  }
}

// 一级科目变化处理
async function onFirstLevelChange(firstLevelId) {
   
   
  try {
   
   
    // 根据一级科目获取二级科目
    const result = await api.getSecondLevelSubjects({
   
    parentId: firstLevelId });
    secondLevelSubjects.value = result.data;
  } catch (error) {
   
   
    console