feat: 添加存款分类设置功能,优化预算管理界面
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 26s
Docker Build & Deploy / Deploy to Production (push) Successful in 8s
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Docker Build & Deploy / WeChat Notification (push) Successful in 1s
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 26s
Docker Build & Deploy / Deploy to Production (push) Successful in 8s
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Docker Build & Deploy / WeChat Notification (push) Successful in 1s
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
<PopupContainer
|
||||
v-model="visible"
|
||||
:title="isEdit ? `编辑${getCategoryName(form.category)}预算` : `新增${getCategoryName(form.category)}预算`"
|
||||
height="85%"
|
||||
height="75%"
|
||||
>
|
||||
<div class="add-budget-form">
|
||||
<van-form>
|
||||
@@ -175,14 +175,6 @@ const fetchCategories = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => form.category, (newVal, oldVal) => {
|
||||
// 只有在手动切换类型且不是初始化编辑数据时才清空
|
||||
// 为简单起见,如果旧值存在(即不是第一次赋值),则清空已选分类
|
||||
if (oldVal !== undefined) {
|
||||
form.selectedCategories = []
|
||||
}
|
||||
})
|
||||
|
||||
const onSubmit = async () => {
|
||||
try {
|
||||
const data = {
|
||||
|
||||
181
Web/src/components/Budget/SavingsConfigPopup.vue
Normal file
181
Web/src/components/Budget/SavingsConfigPopup.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<PopupContainer
|
||||
v-model="visible"
|
||||
title="设置存款分类"
|
||||
height="60%"
|
||||
>
|
||||
<div class="savings-config-content">
|
||||
<div class="config-header">
|
||||
<p class="subtitle">这些分类的统计值将计入“存款”中</p>
|
||||
</div>
|
||||
|
||||
<div class="category-section">
|
||||
<div class="section-title">可多选分类</div>
|
||||
<div class="classify-buttons">
|
||||
<van-button
|
||||
v-if="incomeCategories.length > 0"
|
||||
:type="isAllSelected ? 'primary' : 'default'"
|
||||
size="small"
|
||||
class="classify-btn all-btn"
|
||||
@click="toggleAll"
|
||||
>
|
||||
{{ isAllSelected ? '取消全选' : '全选' }}
|
||||
</van-button>
|
||||
<van-button
|
||||
v-for="item in incomeCategories"
|
||||
:key="item.id"
|
||||
:type="selectedCategories.includes(item.name) ? 'primary' : 'default'"
|
||||
size="small"
|
||||
class="classify-btn"
|
||||
style="margin-bottom: 8px; margin-right: 8px;"
|
||||
@click="toggleCategory(item.name)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</van-button>
|
||||
<div v-if="incomeCategories.length === 0" class="no-data">暂无收入分类</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<van-button block round type="primary" @click="onSubmit">保存配置</van-button>
|
||||
</template>
|
||||
</PopupContainer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { showToast, showLoadingToast, closeToast } from 'vant'
|
||||
import { getCategoryList } from '@/api/transactionCategory'
|
||||
import { getConfig, setConfig } from '@/api/config'
|
||||
import PopupContainer from '@/components/PopupContainer.vue'
|
||||
|
||||
const emit = defineEmits(['success'])
|
||||
|
||||
const visible = ref(false)
|
||||
const categories = ref([])
|
||||
const selectedCategories = ref([])
|
||||
|
||||
const open = async () => {
|
||||
visible.value = true
|
||||
await fetchCategories()
|
||||
await fetchConfig()
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open
|
||||
})
|
||||
|
||||
const incomeCategories = computed(() => {
|
||||
return categories.value.filter(c => c.type === 1) // Income = 1
|
||||
})
|
||||
|
||||
const isAllSelected = computed(() => {
|
||||
return incomeCategories.value.length > 0 &&
|
||||
incomeCategories.value.every(c => selectedCategories.value.includes(c.name))
|
||||
})
|
||||
|
||||
const toggleCategory = (name) => {
|
||||
const index = selectedCategories.value.indexOf(name)
|
||||
if (index > -1) {
|
||||
selectedCategories.value.splice(index, 1)
|
||||
} else {
|
||||
selectedCategories.value.push(name)
|
||||
}
|
||||
}
|
||||
|
||||
const toggleAll = () => {
|
||||
if (isAllSelected.value) {
|
||||
selectedCategories.value = []
|
||||
} else {
|
||||
selectedCategories.value = incomeCategories.value.map(c => c.name)
|
||||
}
|
||||
}
|
||||
|
||||
const fetchCategories = async () => {
|
||||
try {
|
||||
const res = await getCategoryList()
|
||||
if (res.success) {
|
||||
categories.value = res.data || []
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('获取分类列表失败', err)
|
||||
}
|
||||
}
|
||||
|
||||
const fetchConfig = async () => {
|
||||
try {
|
||||
const res = await getConfig('SavingsCategories')
|
||||
if (res.success && res.data) {
|
||||
selectedCategories.value = res.data.split(',').filter(x => x)
|
||||
} else {
|
||||
selectedCategories.value = []
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('获取配置失败', err)
|
||||
}
|
||||
}
|
||||
|
||||
const onSubmit = async () => {
|
||||
showLoadingToast({ message: '保存中...', forbidClick: true })
|
||||
try {
|
||||
const value = selectedCategories.value.join(',')
|
||||
const res = await setConfig('SavingsCategories', value)
|
||||
if (res.success) {
|
||||
showToast('配置已保存')
|
||||
visible.value = false
|
||||
emit('success')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('保存配置失败', err)
|
||||
showToast('保存失败')
|
||||
} finally {
|
||||
closeToast()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.savings-config-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.config-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
color: #969799;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.classify-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.classify-btn {
|
||||
margin-bottom: 8px;
|
||||
margin-right: 8px;
|
||||
border-radius: 20px;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.all-btn {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
text-align: center;
|
||||
color: #969799;
|
||||
width: 100%;
|
||||
padding: 20px 0;
|
||||
}
|
||||
</style>
|
||||
@@ -2,7 +2,18 @@
|
||||
<div class="page-container-flex">
|
||||
<van-nav-bar title="预算管理" placeholder>
|
||||
<template #right>
|
||||
<van-icon name="plus" size="20" @click="budgetEditRef.open({ category: activeTab })" />
|
||||
<van-icon
|
||||
v-if="activeTab !== BudgetCategory.Savings"
|
||||
name="plus"
|
||||
size="20"
|
||||
@click="budgetEditRef.open({ category: activeTab })"
|
||||
/>
|
||||
<van-icon
|
||||
v-else
|
||||
name="info-o"
|
||||
size="20"
|
||||
@click="savingsConfigRef.open()"
|
||||
/>
|
||||
</template>
|
||||
</van-nav-bar>
|
||||
|
||||
@@ -123,12 +134,15 @@
|
||||
status-tag-text="积累中"
|
||||
@toggle-stop="handleToggleStop"
|
||||
@switch-period="(dir) => handleSwitchPeriod(budget, dir)"
|
||||
@click="budgetEditRef.open({
|
||||
data: budget,
|
||||
isEditFlag: true,
|
||||
category: budget.category
|
||||
})"
|
||||
>
|
||||
<template #tag>
|
||||
<!-- 占位,避免显示停止/恢复按钮 -->
|
||||
<span />
|
||||
</template>
|
||||
<template #actions>
|
||||
<!-- 占位,避免显示停止/恢复按钮 -->
|
||||
<span />
|
||||
</template>
|
||||
<template #amount-info>
|
||||
<div class="info-item">
|
||||
<div class="label">已存</div>
|
||||
@@ -164,6 +178,10 @@
|
||||
ref="budgetEditRef"
|
||||
@success="fetchBudgetList"
|
||||
/>
|
||||
<SavingsConfigPopup
|
||||
ref="savingsConfigRef"
|
||||
@success="fetchBudgetList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -176,9 +194,11 @@ import { BudgetPeriodType, BudgetCategory } from '@/constants/enums'
|
||||
import BudgetCard from '@/components/Budget/BudgetCard.vue'
|
||||
import BudgetSummary from '@/components/Budget/BudgetSummary.vue'
|
||||
import BudgetEditPopup from '@/components/Budget/BudgetEditPopup.vue'
|
||||
import SavingsConfigPopup from '@/components/Budget/SavingsConfigPopup.vue'
|
||||
|
||||
const activeTab = ref(BudgetCategory.Expense)
|
||||
const budgetEditRef = ref(null)
|
||||
const savingsConfigRef = ref(null)
|
||||
|
||||
const expenseBudgets = ref([])
|
||||
const incomeBudgets = ref([])
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
[Route("api/[controller]/[action]")]
|
||||
public class BudgetController(
|
||||
IBudgetService budgetService,
|
||||
IConfigService configService,
|
||||
ILogger<BudgetController> logger) : ControllerBase
|
||||
{
|
||||
/// <summary>
|
||||
@@ -23,6 +24,10 @@ public class BudgetController(
|
||||
dtos.Add(BudgetDto.FromEntity(budget, currentAmount, referenceDate));
|
||||
}
|
||||
|
||||
// 创造虚拟的存款预算
|
||||
dtos.Add(await GetVirtualSavingsDtoAsync(BudgetPeriodType.Month, referenceDate));
|
||||
dtos.Add(await GetVirtualSavingsDtoAsync(BudgetPeriodType.Year, referenceDate));
|
||||
|
||||
return dtos.Ok();
|
||||
}
|
||||
catch (Exception ex)
|
||||
@@ -40,6 +45,15 @@ public class BudgetController(
|
||||
{
|
||||
try
|
||||
{
|
||||
if (id == -1)
|
||||
{
|
||||
return (await GetVirtualSavingsDtoAsync(BudgetPeriodType.Year, referenceDate)).Ok();
|
||||
}
|
||||
if (id == -2)
|
||||
{
|
||||
return (await GetVirtualSavingsDtoAsync(BudgetPeriodType.Month, referenceDate)).Ok();
|
||||
}
|
||||
|
||||
var budget = await budgetService.GetByIdAsync(id);
|
||||
if (budget == null) return "预算不存在".Fail<BudgetDto>();
|
||||
|
||||
@@ -147,6 +161,84 @@ public class BudgetController(
|
||||
}
|
||||
}
|
||||
|
||||
private async Task<BudgetDto> GetVirtualSavingsDtoAsync(BudgetPeriodType periodType, DateTime? referenceDate = null)
|
||||
{
|
||||
var allBudgets = await budgetService.GetAllAsync();
|
||||
var date = referenceDate ?? DateTime.Now;
|
||||
|
||||
decimal incomeLimitAtPeriod = 0;
|
||||
decimal expenseLimitAtPeriod = 0;
|
||||
|
||||
var savingsCategories = await configService.GetConfigByKeyAsync<string>("SavingsCategories") ?? string.Empty;
|
||||
var selectedCategoryList = savingsCategories.Split(',', StringSplitOptions.RemoveEmptyEntries);
|
||||
|
||||
foreach (var b in allBudgets)
|
||||
{
|
||||
if (b.IsStopped || b.Category == BudgetCategory.Savings) continue;
|
||||
|
||||
// 如果设置了存款分类,并且预算有指定分类,则只统计相关的预算
|
||||
if (selectedCategoryList.Length > 0)
|
||||
{
|
||||
var budgetCategories = b.SelectedCategories.Split(',', StringSplitOptions.RemoveEmptyEntries);
|
||||
if (budgetCategories.Length > 0 && !budgetCategories.Intersect(selectedCategoryList).Any())
|
||||
{
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
// 折算系数:根据当前请求的 periodType (Year 或 Month),将预算 b 的 Limit 折算过来
|
||||
decimal factor = 1.0m;
|
||||
|
||||
if (periodType == BudgetPeriodType.Year)
|
||||
{
|
||||
factor = b.Type switch
|
||||
{
|
||||
BudgetPeriodType.Month => 12,
|
||||
BudgetPeriodType.Week => 52,
|
||||
BudgetPeriodType.Year => 1,
|
||||
_ => 0
|
||||
};
|
||||
}
|
||||
else if (periodType == BudgetPeriodType.Month)
|
||||
{
|
||||
factor = b.Type switch
|
||||
{
|
||||
BudgetPeriodType.Month => 1,
|
||||
BudgetPeriodType.Week => 52m / 12m,
|
||||
BudgetPeriodType.Year => 1m / 12m,
|
||||
_ => 0
|
||||
};
|
||||
}
|
||||
else
|
||||
{
|
||||
factor = 0; // 其他周期暂不计算虚拟存款
|
||||
}
|
||||
|
||||
if (b.Category == BudgetCategory.Income) incomeLimitAtPeriod += b.Limit * factor;
|
||||
else if (b.Category == BudgetCategory.Expense) expenseLimitAtPeriod += b.Limit * factor;
|
||||
}
|
||||
|
||||
var virtualBudget = new BudgetRecord
|
||||
{
|
||||
Id = periodType == BudgetPeriodType.Year ? -1 : -2,
|
||||
Name = periodType == BudgetPeriodType.Year ? "年度存款" : "月度存款",
|
||||
Category = BudgetCategory.Savings,
|
||||
Type = periodType,
|
||||
Limit = incomeLimitAtPeriod - expenseLimitAtPeriod,
|
||||
StartDate = periodType == BudgetPeriodType.Year ? new DateTime(date.Year, 1, 1) : new DateTime(date.Year, date.Month, 1),
|
||||
SelectedCategories = savingsCategories
|
||||
};
|
||||
|
||||
// 计算实际发生的 收入 - 支出
|
||||
var incomeHelper = new BudgetRecord { Category = BudgetCategory.Income, Type = periodType, StartDate = virtualBudget.StartDate, SelectedCategories = savingsCategories };
|
||||
var expenseHelper = new BudgetRecord { Category = BudgetCategory.Expense, Type = periodType, StartDate = virtualBudget.StartDate, SelectedCategories = savingsCategories };
|
||||
|
||||
var actualIncome = await budgetService.CalculateCurrentAmountAsync(incomeHelper, date);
|
||||
var actualExpense = await budgetService.CalculateCurrentAmountAsync(expenseHelper, date);
|
||||
|
||||
return BudgetDto.FromEntity(virtualBudget, actualIncome - actualExpense, date);
|
||||
}
|
||||
|
||||
private async Task<string> ValidateBudgetSelectedCategoriesAsync(BudgetRecord record)
|
||||
{
|
||||
var allBudgets = await budgetService.GetAllAsync();
|
||||
|
||||
Reference in New Issue
Block a user