添加消息类型枚举和相关字段,优化消息记录服务的添加方法,更新多个组件以支持新增分类对话框
This commit is contained in:
@@ -36,7 +36,7 @@
|
||||
<!-- 交易类型 -->
|
||||
<van-field name="type" label="类型">
|
||||
<template #input>
|
||||
<van-radio-group v-model="form.type" direction="horizontal">
|
||||
<van-radio-group v-model="form.type" direction="horizontal" @change="handleTypeChange">
|
||||
<van-radio :name="0">支出</van-radio>
|
||||
<van-radio :name="1">收入</van-radio>
|
||||
<van-radio :name="2">不计</van-radio>
|
||||
@@ -58,7 +58,7 @@
|
||||
type="success"
|
||||
size="small"
|
||||
class="classify-btn"
|
||||
@click="showAddClassify = true"
|
||||
@click="addClassifyDialogRef.open()"
|
||||
>
|
||||
+ 新增
|
||||
</van-button>
|
||||
@@ -84,14 +84,10 @@
|
||||
</van-form>
|
||||
|
||||
<!-- 新增分类对话框 -->
|
||||
<van-dialog
|
||||
v-model:show="showAddClassify"
|
||||
title="新增交易分类"
|
||||
show-cancel-button
|
||||
@confirm="addNewClassify"
|
||||
>
|
||||
<van-field v-model="newClassify" placeholder="请输入新的交易分类" />
|
||||
</van-dialog>
|
||||
<AddClassifyDialog
|
||||
ref="addClassifyDialogRef"
|
||||
@confirm="handleAddClassify"
|
||||
/>
|
||||
|
||||
<!-- 日期选择弹窗 -->
|
||||
<van-popup v-model:show="showDatePicker" position="bottom" round>
|
||||
@@ -119,6 +115,7 @@
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { showToast } from 'vant'
|
||||
import dayjs from 'dayjs'
|
||||
import AddClassifyDialog from '@/components/AddClassifyDialog.vue'
|
||||
import { getCategoryList, createCategory } from '@/api/transactionCategory'
|
||||
|
||||
const props = defineProps({
|
||||
@@ -138,6 +135,8 @@ const props = defineProps({
|
||||
|
||||
const emit = defineEmits(['submit'])
|
||||
|
||||
const addClassifyDialogRef = ref()
|
||||
|
||||
// 表单数据
|
||||
const form = ref({
|
||||
type: 0, // 0: 支出, 1: 收入, 2: 不计
|
||||
@@ -153,8 +152,6 @@ const categoryName = ref('')
|
||||
// 弹窗控制
|
||||
const showDatePicker = ref(false)
|
||||
const showTimePicker = ref(false)
|
||||
const showAddClassify = ref(false)
|
||||
const newClassify = ref('')
|
||||
|
||||
// 选择器数据
|
||||
const categoryList = ref([])
|
||||
@@ -214,37 +211,6 @@ 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
|
||||
@@ -267,15 +233,8 @@ const selectClassify = (item) => {
|
||||
form.value.categoryId = item.id
|
||||
}
|
||||
|
||||
const addNewClassify = async () => {
|
||||
if (!newClassify.value.trim()) {
|
||||
showToast('请输入分类名称')
|
||||
return
|
||||
}
|
||||
|
||||
const handleAddClassify = async (name) => {
|
||||
try {
|
||||
const name = newClassify.value.trim()
|
||||
|
||||
// 调用API创建分类
|
||||
const response = await createCategory({
|
||||
name: name,
|
||||
@@ -297,9 +256,6 @@ const addNewClassify = async () => {
|
||||
} catch (error) {
|
||||
console.error('创建分类出错:', error)
|
||||
showToast('创建分类失败')
|
||||
} finally {
|
||||
newClassify.value = ''
|
||||
showAddClassify.value = false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user