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

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

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

技术难点

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

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

实现效果

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

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

示例演示

<template> <a-modal :open="visible" :title="title"> <a-form ref="formRef" :model="form"> <!-- 年度选择 --> <a-form-item label="年度"> <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="一级科目"> <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="二级科目"> <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="预算金额"> <a-input-number v-model:value="form.budgetAmount" @blur="onBudgetAmountBlur" /> </a-form-item> <!-- 分配规则 --> <a-form-item label="分配规则"> <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';// 表单数据constform=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}))});// 年度选项constyearOptions=ref([]);// 一级科目选项constfirstLevelSubjects=ref([]);// 二级科目选项constsecondLevelSubjects=ref([]);// 年度变化处理asyncfunctiononYearChange(year){try{// 根据选择的年度获取一级科目constresult=awaitapi.getFirstLevelSubjects({year});firstLevelSubjects.value=result.data;}catch(error){console.error('获取一级科目失败:',error);}}// 一级科目变化处理asyncfunctiononFirstLevelChange(firstLevelId){try{// 根据一级科目获取二级科目constresult=awaitapi.getSecondLevelSubjects({parentId:firstLevelId});secondLevelSubjects.value=result.data;}catch(error){console