feat: add budget update functionality and enhance budget management UI
- Implemented UpdateAsync method in BudgetController for updating budget details. - Created UpdateBudgetDto for handling budget update requests. - Added BudgetCard component for displaying budget information with progress tracking. - Developed BudgetEditPopup component for creating and editing budget entries. - Introduced BudgetSummary component for summarizing budget statistics by period. - Enhanced budget period display logic in BudgetDto to support various timeframes.
This commit is contained in:
孙诚
219
Web/src/components/Budget/BudgetCard.vue
Normal file
219
Web/src/components/Budget/BudgetCard.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<div class="common-card budget-card" @click="$emit('click')">
|
||||
<div class="card-header">
|
||||
<div class="budget-info">
|
||||
<h3 class="card-title">{{ budget.name }}</h3>
|
||||
<slot name="tag">
|
||||
<van-tag v-if="budget.isStopped" type="danger" size="small" plain>已停止</van-tag>
|
||||
<van-tag v-else :type="statusTagType" size="small" plain>{{ statusTagText }}</van-tag>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<slot name="actions">
|
||||
<van-button
|
||||
:icon="budget.isStopped ? 'play' : 'pause'"
|
||||
size="mini"
|
||||
plain
|
||||
round
|
||||
@click.stop="$emit('toggle-stop', budget)"
|
||||
/>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="budget-body">
|
||||
<div class="amount-info">
|
||||
<slot name="amount-info"></slot>
|
||||
</div>
|
||||
|
||||
<div class="progress-section">
|
||||
<div class="progress-info">
|
||||
<slot name="progress-info">
|
||||
<span class="period-type">{{ periodLabel }}进度</span>
|
||||
<span class="percent" :class="percentClass">
|
||||
{{ percentage }}%
|
||||
</span>
|
||||
</slot>
|
||||
</div>
|
||||
<van-progress
|
||||
:percentage="Math.min(percentage, 100)"
|
||||
stroke-width="8"
|
||||
:color="progressColor"
|
||||
:show-pivot="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<div class="period-navigation" @click.stop>
|
||||
<van-button
|
||||
icon="arrow-left"
|
||||
class="nav-icon"
|
||||
plain
|
||||
size="small"
|
||||
style="width: 50px;"
|
||||
@click="$emit('switch-period', -1)"
|
||||
/>
|
||||
<span class="period-text">{{ budget.period }}</span>
|
||||
<van-button
|
||||
icon="arrow"
|
||||
class="nav-icon"
|
||||
plain
|
||||
size="small"
|
||||
style="width: 50px;"
|
||||
@click="$emit('switch-period', 1)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
budget: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
statusTagType: {
|
||||
type: String,
|
||||
default: 'success'
|
||||
},
|
||||
statusTagText: {
|
||||
type: String,
|
||||
default: '进行中'
|
||||
},
|
||||
progressColor: {
|
||||
type: String,
|
||||
default: '#1989fa'
|
||||
},
|
||||
percentClass: {
|
||||
type: [String, Object],
|
||||
default: ''
|
||||
},
|
||||
periodLabel: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
defineEmits(['toggle-stop', 'switch-period', 'click'])
|
||||
|
||||
const percentage = computed(() => {
|
||||
if (!props.budget.limit) return 0
|
||||
return Math.round((props.budget.current / props.budget.limit) * 100)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.budget-card {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.budget-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.amount-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 16px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:deep(.info-item) .label {
|
||||
font-size: 12px;
|
||||
color: #969799;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
:deep(.info-item) .value {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:deep(.value.expense) {
|
||||
color: #ee0a24;
|
||||
}
|
||||
|
||||
:deep(.value.income) {
|
||||
color: #07c160;
|
||||
}
|
||||
|
||||
.progress-section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.progress-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
margin-bottom: 6px;
|
||||
color: #646566;
|
||||
}
|
||||
|
||||
.percent.warning {
|
||||
color: #ff976a;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.percent.income {
|
||||
color: #07c160;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #969799;
|
||||
padding: 12px 12px 0;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #ebedf0;
|
||||
}
|
||||
|
||||
.period-navigation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.period-text {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #323233;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
padding: 4px;
|
||||
font-size: 12px;
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.card-footer {
|
||||
border-top-color: #2c2c2c;
|
||||
}
|
||||
.period-text {
|
||||
color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
267
Web/src/components/Budget/BudgetEditPopup.vue
Normal file
267
Web/src/components/Budget/BudgetEditPopup.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<PopupContainer
|
||||
v-model="visible"
|
||||
:title="isEdit ? '编辑预算' : '新增预算'"
|
||||
height="70%"
|
||||
>
|
||||
<div class="add-budget-form">
|
||||
<van-form>
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="form.name"
|
||||
name="name"
|
||||
label="预算名称"
|
||||
placeholder="例如：每月餐饮、年度奖金"
|
||||
:rules="[{ required: true, message: '请填写预算名称' }]"
|
||||
/>
|
||||
<van-field name="type" label="统计周期">
|
||||
<template #input>
|
||||
<van-radio-group v-model="form.type" direction="horizontal">
|
||||
<van-radio :name="BudgetPeriodType.Week">周</van-radio>
|
||||
<van-radio :name="BudgetPeriodType.Month">月</van-radio>
|
||||
<van-radio :name="BudgetPeriodType.Year">年</van-radio>
|
||||
<van-radio :name="BudgetPeriodType.Longterm">长期</van-radio>
|
||||
</van-radio-group>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field
|
||||
v-model="form.limit"
|
||||
type="number"
|
||||
name="limit"
|
||||
label="预算金额"
|
||||
placeholder="0.00"
|
||||
:rules="[{ required: true, message: '请填写预算金额' }]"
|
||||
>
|
||||
<template #extra>
|
||||
<span>元</span>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field name="category" label="类型">
|
||||
<template #input>
|
||||
<van-radio-group v-model="form.category" direction="horizontal" :disabled="isEdit">
|
||||
<van-radio :name="BudgetCategory.Expense">支出</van-radio>
|
||||
<van-radio :name="BudgetCategory.Income">收入</van-radio>
|
||||
<van-radio :name="BudgetCategory.Savings">存款</van-radio>
|
||||
</van-radio-group>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field label="相关分类">
|
||||
<template #input>
|
||||
<div v-if="form.selectedCategories.length === 0" style="color: #c8c9cc;">可多选分类</div>
|
||||
<div v-else class="selected-categories">
|
||||
<span class="ellipsis-text">
|
||||
{{ form.selectedCategories.join('、') }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</van-field>
|
||||
<div class="classify-buttons">
|
||||
<van-button
|
||||
v-if="filteredCategories.length > 0"
|
||||
:type="isAllSelected ? 'primary' : 'default'"
|
||||
size="small"
|
||||
class="classify-btn all-btn"
|
||||
@click="toggleAll"
|
||||
>
|
||||
{{ isAllSelected ? '取消全选' : '全选' }}
|
||||
</van-button>
|
||||
<van-button
|
||||
v-for="item in filteredCategories"
|
||||
:key="item.id"
|
||||
:type="form.selectedCategories.includes(item.name) ? 'primary' : 'default'"
|
||||
size="small"
|
||||
class="classify-btn"
|
||||
@click="toggleCategory(item.name)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</van-button>
|
||||
<div v-if="filteredCategories.length === 0" class="no-data">暂无分类</div>
|
||||
</div>
|
||||
|
||||
</van-cell-group>
|
||||
</van-form>
|
||||
</div>
|
||||
<template #footer>
|
||||
<van-button block type="primary" @click="onSubmit">保存预算</van-button>
|
||||
</template>
|
||||
</PopupContainer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted, watch } from 'vue'
|
||||
import { showToast } from 'vant'
|
||||
import { getCategoryList } from '@/api/transactionCategory'
|
||||
import { createBudget, updateBudget } from '@/api/budget'
|
||||
import { BudgetPeriodType, BudgetCategory } from '@/constants/enums'
|
||||
import PopupContainer from '@/components/PopupContainer.vue'
|
||||
|
||||
const props = defineProps({
|
||||
editData: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['success'])
|
||||
|
||||
const visible = ref(false)
|
||||
const isEdit = computed(() => !!props.editData)
|
||||
|
||||
const categories = ref([])
|
||||
const form = reactive({
|
||||
id: undefined,
|
||||
name: '',
|
||||
type: BudgetPeriodType.Month,
|
||||
category: BudgetCategory.Expense,
|
||||
limit: '',
|
||||
selectedCategories: []
|
||||
})
|
||||
|
||||
const open = (data = null) => {
|
||||
if (data) {
|
||||
Object.assign(form, {
|
||||
id: data.id,
|
||||
name: data.name,
|
||||
type: data.type,
|
||||
category: data.category,
|
||||
limit: data.limit,
|
||||
selectedCategories: data.selectedCategories ? [...data.selectedCategories] : []
|
||||
})
|
||||
} else {
|
||||
Object.assign(form, {
|
||||
id: undefined,
|
||||
name: '',
|
||||
type: BudgetPeriodType.Month,
|
||||
category: BudgetCategory.Expense,
|
||||
limit: '',
|
||||
selectedCategories: []
|
||||
})
|
||||
}
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open
|
||||
})
|
||||
|
||||
const filteredCategories = computed(() => {
|
||||
const targetType = form.category === BudgetCategory.Expense ? 0 : (form.category === BudgetCategory.Income ? 1 : 2)
|
||||
return categories.value.filter(c => c.type === targetType)
|
||||
})
|
||||
|
||||
const isAllSelected = computed(() => {
|
||||
return filteredCategories.value.length > 0 &&
|
||||
filteredCategories.value.every(c => form.selectedCategories.includes(c.name))
|
||||
})
|
||||
|
||||
const toggleCategory = (name) => {
|
||||
const index = form.selectedCategories.indexOf(name)
|
||||
if (index > -1) {
|
||||
form.selectedCategories.splice(index, 1)
|
||||
} else {
|
||||
form.selectedCategories.push(name)
|
||||
}
|
||||
}
|
||||
|
||||
const toggleAll = () => {
|
||||
if (isAllSelected.value) {
|
||||
form.selectedCategories = []
|
||||
} else {
|
||||
form.selectedCategories = filteredCategories.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)
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => form.category, (newVal, oldVal) => {
|
||||
// 只有在手动切换类型且不是初始化编辑数据时才清空
|
||||
// 为简单起见，如果旧值存在（即不是第一次赋值），则清空已选分类
|
||||
if (oldVal !== undefined) {
|
||||
form.selectedCategories = []
|
||||
}
|
||||
})
|
||||
|
||||
const onSubmit = async () => {
|
||||
try {
|
||||
const data = {
|
||||
...form,
|
||||
limit: parseFloat(form.limit),
|
||||
selectedCategories: form.selectedCategories
|
||||
}
|
||||
|
||||
const res = form.id ? await updateBudget(data) : await createBudget(data)
|
||||
|
||||
if (res.success) {
|
||||
showToast('保存成功')
|
||||
visible.value = false
|
||||
emit('success')
|
||||
}
|
||||
} catch (err) {
|
||||
showToast('保存失败')
|
||||
console.error('保存预算失败', err)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchCategories()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.add-budget-form {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.selected-categories {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ellipsis-text {
|
||||
font-size: 14px;
|
||||
color: #323233;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.classify-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.classify-btn {
|
||||
flex: 0 0 auto;
|
||||
min-width: 60px;
|
||||
border-radius: 16px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.all-btn {
|
||||
font-weight: bold;
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
font-size: 13px;
|
||||
color: #969799;
|
||||
padding: 8px 0;
|
||||
}
|
||||
</style>
|
||||
105
Web/src/components/Budget/BudgetSummary.vue
Normal file
105
Web/src/components/Budget/BudgetSummary.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="summary-card common-card">
|
||||
<template v-for="(config, key) in periodConfigs" :key="key">
|
||||
<div class="summary-item">
|
||||
<div class="label">{{ config.label }}{{ title }}率</div>
|
||||
<div class="value" :class="getValueClass(stats[key].rate)">
|
||||
{{ stats[key].rate }}<span class="unit">%</span>
|
||||
</div>
|
||||
<div class="sub-label">{{ stats[key].count }}个预算</div>
|
||||
</div>
|
||||
<div v-if="config.showDivider" class="divider"></div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
stats: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
getValueClass: {
|
||||
type: Function,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const periodConfigs = {
|
||||
week: { label: '本周', showDivider: true },
|
||||
month: { label: '本月', showDivider: true },
|
||||
year: { label: '年度', showDivider: false }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.summary-card {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 12px 16px;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.summary-item .label {
|
||||
font-size: 12px;
|
||||
color: #969799;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.summary-item .value {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 2px;
|
||||
color: #323233;
|
||||
}
|
||||
|
||||
.summary-item :deep(.value.expense) {
|
||||
color: #ee0a24;
|
||||
}
|
||||
|
||||
.summary-item :deep(.value.income) {
|
||||
color: #07c160;
|
||||
}
|
||||
|
||||
.summary-item :deep(.value.warning) {
|
||||
color: #ff976a;
|
||||
}
|
||||
|
||||
.summary-item .unit {
|
||||
font-size: 11px;
|
||||
margin-left: 1px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.summary-item .sub-label {
|
||||
font-size: 11px;
|
||||
color: #c8c9cc;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
background-color: #ebedf0;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.summary-item .value {
|
||||
color: #f5f5f5;
|
||||
}
|
||||
.divider {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user