feat: Refactor transaction handling and add new features
- Updated ReasonGroupList.vue to modify classify button behavior for adding new classifications. - Refactored TransactionDetail.vue to integrate PopupContainer and enhance transaction detail display. - Improved TransactionDetailDialog.vue with updated classify button functionality. - Simplified BalanceView.vue by removing manual entry button. - Enhanced PeriodicRecord.vue to update classify button interactions. - Removed unused add transaction dialog from TransactionsRecord.vue. - Added new API endpoints in TransactionRecordController for parsing transactions and handling offsets. - Introduced BillForm.vue and ManualBillAdd.vue for streamlined bill entry. - Implemented OneLineBillAdd.vue for intelligent transaction parsing. - Created GlobalAddBill.vue for a unified bill addition interface.
This commit is contained in:
367
Web/src/components/Bill/BillForm.vue
Normal file
367
Web/src/components/Bill/BillForm.vue
Normal file
@@ -0,0 +1,367 @@
|
||||
<template>
|
||||
<div class="bill-form">
|
||||
<van-form @submit="handleSubmit">
|
||||
<van-cell-group inset>
|
||||
<!-- 日期时间 -->
|
||||
<van-field label="时间">
|
||||
<template #input>
|
||||
<div style="display: flex; gap: 16px">
|
||||
<div @click="showDatePicker = true">{{ form.date }}</div>
|
||||
<div @click="showTimePicker = true">{{ form.time }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<!-- 金额 -->
|
||||
<van-field
|
||||
v-model="form.amount"
|
||||
name="amount"
|
||||
label="金额"
|
||||
type="number"
|
||||
placeholder="0.00"
|
||||
:rules="[{ required: true, message: '请输入金额' }]"
|
||||
/>
|
||||
|
||||
<!-- 备注 -->
|
||||
<van-field
|
||||
v-model="form.note"
|
||||
name="note"
|
||||
label="摘要"
|
||||
placeholder="摘要信息"
|
||||
rows="2"
|
||||
autosize
|
||||
type="textarea"
|
||||
/>
|
||||
|
||||
<!-- 交易类型 -->
|
||||
<van-field name="type" label="类型">
|
||||
<template #input>
|
||||
<van-radio-group v-model="form.type" direction="horizontal">
|
||||
<van-radio :name="0">支出</van-radio>
|
||||
<van-radio :name="1">收入</van-radio>
|
||||
<van-radio :name="2">不计</van-radio>
|
||||
</van-radio-group>
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<!-- 分类 -->
|
||||
<van-field name="category" label="分类">
|
||||
<template #input>
|
||||
<span v-if="!categoryName" style="color: #c8c9cc;">请选择分类</span>
|
||||
<span v-else>{{ categoryName }}</span>
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<!-- 分类按钮网格 -->
|
||||
<div class="classify-buttons">
|
||||
<van-button
|
||||
type="success"
|
||||
size="small"
|
||||
class="classify-btn"
|
||||
@click="showAddClassify = true"
|
||||
>
|
||||
+ 新增
|
||||
</van-button>
|
||||
<van-button
|
||||
v-for="item in categoryList"
|
||||
:key="item.id"
|
||||
:type="categoryName === item.name ? 'primary' : 'default'"
|
||||
size="small"
|
||||
class="classify-btn"
|
||||
@click="selectClassify(item)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</van-button>
|
||||
</div>
|
||||
</van-cell-group>
|
||||
|
||||
<div class="actions">
|
||||
<van-button round block type="primary" native-type="submit" :loading="loading">
|
||||
{{ submitText }}
|
||||
</van-button>
|
||||
<slot name="actions"></slot>
|
||||
</div>
|
||||
</van-form>
|
||||
|
||||
<!-- 新增分类对话框 -->
|
||||
<van-dialog
|
||||
v-model:show="showAddClassify"
|
||||
title="新增交易分类"
|
||||
show-cancel-button
|
||||
@confirm="addNewClassify"
|
||||
>
|
||||
<van-field v-model="newClassify" placeholder="请输入新的交易分类" />
|
||||
</van-dialog>
|
||||
|
||||
<!-- 日期选择弹窗 -->
|
||||
<van-popup v-model:show="showDatePicker" position="bottom" round>
|
||||
<van-date-picker
|
||||
v-model="currentDate"
|
||||
title="选择日期"
|
||||
@confirm="onConfirmDate"
|
||||
@cancel="showDatePicker = false"
|
||||
/>
|
||||
</van-popup>
|
||||
|
||||
<!-- 时间选择弹窗 -->
|
||||
<van-popup v-model:show="showTimePicker" position="bottom" round>
|
||||
<van-time-picker
|
||||
v-model="currentTime"
|
||||
title="选择时间"
|
||||
@confirm="onConfirmTime"
|
||||
@cancel="showTimePicker = false"
|
||||
/>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch, toRefs } from 'vue'
|
||||
import { showToast } from 'vant'
|
||||
import dayjs from 'dayjs'
|
||||
import { getCategoryList, createCategory } from '@/api/transactionCategory'
|
||||
|
||||
const props = defineProps({
|
||||
initialData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
submitText: {
|
||||
type: String,
|
||||
default: '保存'
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['submit'])
|
||||
|
||||
// 表单数据
|
||||
const form = ref({
|
||||
type: 0, // 0: 支出, 1: 收入, 2: 不计
|
||||
amount: '',
|
||||
categoryId: null,
|
||||
date: dayjs().format('YYYY-MM-DD'),
|
||||
time: dayjs().format('HH:mm'),
|
||||
note: ''
|
||||
})
|
||||
|
||||
const categoryName = ref('')
|
||||
|
||||
// 弹窗控制
|
||||
const showDatePicker = ref(false)
|
||||
const showTimePicker = ref(false)
|
||||
const showAddClassify = ref(false)
|
||||
const newClassify = ref('')
|
||||
|
||||
// 选择器数据
|
||||
const categoryList = ref([])
|
||||
|
||||
// 日期时间临时变量 (Vant DatePicker 需要数组或特定格式)
|
||||
const currentDate = ref(dayjs().format('YYYY-MM-DD').split('-'))
|
||||
const currentTime = ref(dayjs().format('HH:mm').split(':'))
|
||||
|
||||
// 初始化数据
|
||||
const initForm = async () => {
|
||||
if (props.initialData) {
|
||||
const { occurredAt, amount, reason, type, classify } = props.initialData
|
||||
|
||||
if (occurredAt) {
|
||||
const dt = dayjs(occurredAt)
|
||||
form.value.date = dt.format('YYYY-MM-DD')
|
||||
form.value.time = dt.format('HH:mm')
|
||||
currentDate.value = form.value.date.split('-')
|
||||
currentTime.value = form.value.time.split(':')
|
||||
}
|
||||
|
||||
if (amount !== undefined) form.value.amount = amount
|
||||
if (reason !== undefined) form.value.note = reason
|
||||
if (type !== undefined) form.value.type = type
|
||||
|
||||
// 加载分类列表
|
||||
await loadClassifyList(form.value.type)
|
||||
|
||||
// 如果有传入分类名称，尝试匹配
|
||||
if (classify) {
|
||||
const found = categoryList.value.find(c => c.name === classify)
|
||||
if (found) {
|
||||
selectClassify(found)
|
||||
} else {
|
||||
// 如果没找到对应分类，但有分类名称，可能需要特殊处理或者就显示名称但不关联ID？
|
||||
// 这里暂时只显示名称，ID为空，或者需要自动创建？
|
||||
// 按照原有逻辑，后端需要分类名称，所以这里只要设置 categoryName 即可
|
||||
// 但是 ManualBillAdd 原逻辑是需要 categoryId 的。
|
||||
// 不过 createTransaction 接口传的是 classify (name)。
|
||||
// 让我们看 ManualBillAdd 的 handleSave:
|
||||
// classify: categoryName.value
|
||||
// 所以只要 categoryName 有值就行。
|
||||
categoryName.value = classify
|
||||
}
|
||||
}
|
||||
} else {
|
||||
await loadClassifyList(form.value.type)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initForm()
|
||||
})
|
||||
|
||||
// 监听 initialData 变化 (例如重新解析后)
|
||||
watch(() => props.initialData, () => {
|
||||
initForm()
|
||||
}, { deep: true })
|
||||
|
||||
// 监听交易类型变化，重新加载分类
|
||||
watch(() => form.value.type, (newVal) => {
|
||||
// 如果是初始化过程中导致的类型变化，可能不需要清空分类（如果已经匹配好了）
|
||||
// 但如果是用户手动切换，应该清空
|
||||
// 这里简单处理：如果是用户切换，通常需要重新选择。
|
||||
// 为了避免初始化时的冲突，可以在 initForm 里处理好。
|
||||
// 这里主要响应用户操作。
|
||||
|
||||
// 只有当当前分类不属于新类型时才清空？或者总是清空？
|
||||
// 原逻辑是总是清空。
|
||||
// 但是如果是 initForm 引起的，我们不希望清空。
|
||||
// 暂时保持原逻辑，但在 initForm 里调用 loadClassifyList 后再设置 categoryName
|
||||
|
||||
// 简单的做法：在 watch 内部判断是否正在初始化？比较麻烦。
|
||||
// 或者：只在用户点击 radio 时触发？
|
||||
// watch 是最稳妥的，但要注意 initForm 里的顺序。
|
||||
// 在 initForm 里，我们先设置 type，这会触发 watch。
|
||||
// 所以 initForm 里的 loadClassifyList 可能会被 watch 里的覆盖。
|
||||
// 让我们调整一下策略：
|
||||
// 不在 watch 里加载，而是由 radio change 事件触发？
|
||||
// 或者在 watch 里判断，如果 categoryName 已经有值且符合当前类型（这个很难判断），就不清空。
|
||||
|
||||
// 实际上，initForm 里设置 type 后，watch 会执行。
|
||||
// watch 会清空 categoryName。
|
||||
// 所以 initForm 里设置 type 后，再设置 categoryName 是没用的，除非 watch 是异步的或者我们在 nextTick 设置。
|
||||
|
||||
// 让我们修改 watch 逻辑，或者在 initForm 里处理。
|
||||
// 更好的方式：
|
||||
// 移除 watch，改为在 radio group 上 @change="handleTypeChange"
|
||||
})
|
||||
|
||||
const handleTypeChange = (newType) => {
|
||||
categoryName.value = ''
|
||||
form.value.categoryId = null
|
||||
loadClassifyList(newType)
|
||||
}
|
||||
|
||||
const loadClassifyList = async (type = null) => {
|
||||
try {
|
||||
const response = await getCategoryList(type)
|
||||
if (response.success) {
|
||||
categoryList.value = response.data || []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载分类列表出错:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const selectClassify = (item) => {
|
||||
categoryName.value = item.name
|
||||
form.value.categoryId = item.id
|
||||
}
|
||||
|
||||
const addNewClassify = async () => {
|
||||
if (!newClassify.value.trim()) {
|
||||
showToast('请输入分类名称')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const name = newClassify.value.trim()
|
||||
|
||||
// 调用API创建分类
|
||||
const response = await createCategory({
|
||||
name: name,
|
||||
type: form.value.type
|
||||
})
|
||||
|
||||
if (response.success) {
|
||||
showToast('分类创建成功')
|
||||
const newId = response.data
|
||||
// 重新加载分类列表
|
||||
await loadClassifyList(form.value.type)
|
||||
|
||||
// 选中新创建的分类
|
||||
categoryName.value = name
|
||||
form.value.categoryId = newId
|
||||
} else {
|
||||
showToast(response.message || '创建分类失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('创建分类出错:', error)
|
||||
showToast('创建分类失败')
|
||||
} finally {
|
||||
newClassify.value = ''
|
||||
showAddClassify.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const onConfirmDate = ({ selectedValues }) => {
|
||||
form.value.date = selectedValues.join('-')
|
||||
showDatePicker.value = false
|
||||
}
|
||||
|
||||
const onConfirmTime = ({ selectedValues }) => {
|
||||
form.value.time = selectedValues.join(':')
|
||||
showTimePicker.value = false
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!form.value.amount) {
|
||||
showToast('请输入金额')
|
||||
return
|
||||
}
|
||||
if (!categoryName.value) {
|
||||
showToast('请选择分类')
|
||||
return
|
||||
}
|
||||
|
||||
const fullDateTime = `${form.value.date}T${form.value.time}:00`
|
||||
|
||||
const payload = {
|
||||
occurredAt: fullDateTime,
|
||||
classify: categoryName.value,
|
||||
amount: parseFloat(form.value.amount),
|
||||
reason: form.value.note || '',
|
||||
type: form.value.type
|
||||
}
|
||||
|
||||
emit('submit', payload)
|
||||
}
|
||||
|
||||
// 暴露重置方法给父组件
|
||||
const reset = () => {
|
||||
form.value.amount = ''
|
||||
form.value.note = ''
|
||||
// 保留日期和类型
|
||||
}
|
||||
|
||||
defineExpose({ reset })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bill-form {
|
||||
padding-top: 10px;
|
||||
}
|
||||
.actions {
|
||||
margin: 20px 16px;
|
||||
}
|
||||
.classify-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
.classify-btn {
|
||||
flex: 0 0 auto;
|
||||
min-width: 70px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user