统一组件
This commit is contained in:
@@ -116,7 +116,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, watch, toRefs } from 'vue'
|
import { ref, onMounted, watch } from 'vue'
|
||||||
import { showToast } from 'vant'
|
import { showToast } from 'vant'
|
||||||
import dayjs from 'dayjs'
|
import dayjs from 'dayjs'
|
||||||
import { getCategoryList, createCategory } from '@/api/transactionCategory'
|
import { getCategoryList, createCategory } from '@/api/transactionCategory'
|
||||||
|
|||||||
@@ -1,169 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- 分类选择器弹窗 -->
|
|
||||||
<van-popup v-model:show="visible" position="bottom" round>
|
|
||||||
<van-picker
|
|
||||||
ref="pickerRef"
|
|
||||||
:columns="classifyColumns"
|
|
||||||
@confirm="onConfirm"
|
|
||||||
@cancel="onCancel"
|
|
||||||
>
|
|
||||||
<template #toolbar>
|
|
||||||
<div class="picker-toolbar">
|
|
||||||
<van-button class="toolbar-cancel" size="small" @click="onClear">清空</van-button>
|
|
||||||
<van-button class="toolbar-add" size="small" type="primary" @click="showAddDialog = true">新增</van-button>
|
|
||||||
<van-button class="toolbar-confirm" size="small" type="primary" @click="confirmSelect">确认</van-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</van-picker>
|
|
||||||
</van-popup>
|
|
||||||
|
|
||||||
<!-- 新增分类对话框 -->
|
|
||||||
<van-dialog
|
|
||||||
v-model:show="showAddDialog"
|
|
||||||
title="新增交易分类"
|
|
||||||
show-cancel-button
|
|
||||||
@confirm="addNewClassify"
|
|
||||||
>
|
|
||||||
<van-field v-model="newClassifyName" placeholder="请输入新的交易分类" />
|
|
||||||
</van-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, watch } from 'vue'
|
|
||||||
import { showToast } from 'vant'
|
|
||||||
import { getCategoryList, createCategory } from '@/api/transactionCategory'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
// 当前选中的分类
|
|
||||||
selectedClassify: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
// 交易类型(用于新增分类时传递)
|
|
||||||
transactionType: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits(['update:modelValue', 'confirm', 'clear'])
|
|
||||||
|
|
||||||
const visible = ref(props.modelValue)
|
|
||||||
const pickerRef = ref(null)
|
|
||||||
const classifyColumns = ref([])
|
|
||||||
const showAddDialog = ref(false)
|
|
||||||
const newClassifyName = ref('')
|
|
||||||
|
|
||||||
// 监听外部显示状态变化
|
|
||||||
watch(() => props.modelValue, (val) => {
|
|
||||||
visible.value = val
|
|
||||||
if (val) {
|
|
||||||
loadClassifyList()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 监听内部显示状态变化
|
|
||||||
watch(visible, (val) => {
|
|
||||||
emit('update:modelValue', val)
|
|
||||||
})
|
|
||||||
|
|
||||||
// 加载分类列表
|
|
||||||
const loadClassifyList = async () => {
|
|
||||||
try {
|
|
||||||
const response = await getCategoryList()
|
|
||||||
if (response.success) {
|
|
||||||
classifyColumns.value = (response.data || []).map(item => ({
|
|
||||||
text: item.name,
|
|
||||||
value: item.name,
|
|
||||||
id: item.id
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('加载分类列表出错:', error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 确认选择
|
|
||||||
const onConfirm = ({ selectedOptions }) => {
|
|
||||||
if (selectedOptions && selectedOptions[0]) {
|
|
||||||
emit('confirm', selectedOptions[0].text)
|
|
||||||
}
|
|
||||||
visible.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
// 取消
|
|
||||||
const onCancel = () => {
|
|
||||||
visible.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
// 清空分类
|
|
||||||
const onClear = () => {
|
|
||||||
emit('clear')
|
|
||||||
visible.value = false
|
|
||||||
showToast('已清空分类')
|
|
||||||
}
|
|
||||||
|
|
||||||
// 确认选择(从 picker 中获取选中值)
|
|
||||||
const confirmSelect = () => {
|
|
||||||
if (pickerRef.value) {
|
|
||||||
const selectedValues = pickerRef.value.getSelectedOptions()
|
|
||||||
if (selectedValues && selectedValues[0]) {
|
|
||||||
emit('confirm', selectedValues[0].text)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
visible.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
// 新增分类
|
|
||||||
const addNewClassify = async () => {
|
|
||||||
if (!newClassifyName.value.trim()) {
|
|
||||||
showToast('请输入分类名称')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await createCategory({
|
|
||||||
name: newClassifyName.value.trim(),
|
|
||||||
type: props.transactionType
|
|
||||||
})
|
|
||||||
|
|
||||||
if (response.success) {
|
|
||||||
showToast('新增分类成功')
|
|
||||||
const newClassify = response.data.name
|
|
||||||
newClassifyName.value = ''
|
|
||||||
// 重新加载分类列表
|
|
||||||
await loadClassifyList()
|
|
||||||
// 自动选中新增的分类
|
|
||||||
emit('confirm', newClassify)
|
|
||||||
visible.value = false
|
|
||||||
} else {
|
|
||||||
showToast(response.message || '新增分类失败')
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('新增分类失败:', error)
|
|
||||||
showToast('新增分类失败')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.picker-toolbar {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
align-items: center;
|
|
||||||
padding: 5px 10px;
|
|
||||||
border-bottom: 1px solid var(--van-border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar-cancel {
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar-confirm {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -56,7 +56,7 @@
|
|||||||
v-model="showTransactionList"
|
v-model="showTransactionList"
|
||||||
:title="selectedGroup?.reason || '交易记录'"
|
:title="selectedGroup?.reason || '交易记录'"
|
||||||
:subtitle="groupTransactionsTotal ? `共 ${groupTransactionsTotal} 笔交易` : ''"
|
:subtitle="groupTransactionsTotal ? `共 ${groupTransactionsTotal} 笔交易` : ''"
|
||||||
height="80%"
|
height="85%"
|
||||||
>
|
>
|
||||||
<template #header-actions>
|
<template #header-actions>
|
||||||
<van-button
|
<van-button
|
||||||
@@ -80,10 +80,10 @@
|
|||||||
</PopupContainer>
|
</PopupContainer>
|
||||||
|
|
||||||
<!-- 账单详情弹窗 -->
|
<!-- 账单详情弹窗 -->
|
||||||
<TransactionDetailDialog
|
<TransactionDetail
|
||||||
v-model="showTransactionDetail"
|
v-model:show="showTransactionDetail"
|
||||||
:transaction="selectedTransaction"
|
:transaction="selectedTransaction"
|
||||||
@saved="handleTransactionSaved"
|
@save="handleTransactionSaved"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- 批量设置对话框 -->
|
<!-- 批量设置对话框 -->
|
||||||
@@ -112,17 +112,16 @@
|
|||||||
input-align="left"
|
input-align="left"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- 交易类型选择 -->
|
<!-- 交易类型 -->
|
||||||
<van-field
|
<van-field name="type" label="交易类型">
|
||||||
v-model="batchForm.typeName"
|
<template #input>
|
||||||
is-link
|
<van-radio-group v-model="batchForm.type" direction="horizontal">
|
||||||
readonly
|
<van-radio :name="0">支出</van-radio>
|
||||||
name="type"
|
<van-radio :name="1">收入</van-radio>
|
||||||
label="交易类型"
|
<van-radio :name="2">不计</van-radio>
|
||||||
placeholder="请选择交易类型"
|
</van-radio-group>
|
||||||
@click="showTypePicker = true"
|
</template>
|
||||||
:rules="[{ required: true, message: '请选择交易类型' }]"
|
</van-field>
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 分类选择 -->
|
<!-- 分类选择 -->
|
||||||
<van-field name="classify" label="分类">
|
<van-field name="classify" label="分类">
|
||||||
@@ -166,16 +165,6 @@
|
|||||||
</van-form>
|
</van-form>
|
||||||
</van-dialog>
|
</van-dialog>
|
||||||
|
|
||||||
<!-- 交易类型选择器 -->
|
|
||||||
<van-popup v-model:show="showTypePicker" position="bottom" round>
|
|
||||||
<van-picker
|
|
||||||
show-toolbar
|
|
||||||
:columns="typeOptions"
|
|
||||||
@confirm="handleConfirmType"
|
|
||||||
@cancel="showTypePicker = false"
|
|
||||||
/>
|
|
||||||
</van-popup>
|
|
||||||
|
|
||||||
<!-- 新增分类对话框 -->
|
<!-- 新增分类对话框 -->
|
||||||
<van-dialog
|
<van-dialog
|
||||||
v-model:show="showAddClassify"
|
v-model:show="showAddClassify"
|
||||||
@@ -200,7 +189,7 @@ import {
|
|||||||
import { getReasonGroups, batchUpdateByReason, getTransactionList } from '@/api/transactionRecord'
|
import { getReasonGroups, batchUpdateByReason, getTransactionList } from '@/api/transactionRecord'
|
||||||
import { getCategoryList, createCategory } from '@/api/transactionCategory'
|
import { getCategoryList, createCategory } from '@/api/transactionCategory'
|
||||||
import TransactionList from './TransactionList.vue'
|
import TransactionList from './TransactionList.vue'
|
||||||
import TransactionDetailDialog from './TransactionDetailDialog.vue'
|
import TransactionDetail from './TransactionDetail.vue'
|
||||||
import PopupContainer from './PopupContainer.vue'
|
import PopupContainer from './PopupContainer.vue'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
@@ -218,13 +207,6 @@ const props = defineProps({
|
|||||||
|
|
||||||
const emit = defineEmits(['long-press', 'data-loaded', 'data-changed'])
|
const emit = defineEmits(['long-press', 'data-loaded', 'data-changed'])
|
||||||
|
|
||||||
// 交易类型选项
|
|
||||||
const typeOptions = [
|
|
||||||
{ text: '支出', value: 0 },
|
|
||||||
{ text: '收入', value: 1 },
|
|
||||||
{ text: '不计收支', value: 2 }
|
|
||||||
]
|
|
||||||
|
|
||||||
// 数据状态
|
// 数据状态
|
||||||
const groups = ref([])
|
const groups = ref([])
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
@@ -250,7 +232,6 @@ const transactionPageSize = ref(20)
|
|||||||
|
|
||||||
// 批量分类相关状态
|
// 批量分类相关状态
|
||||||
const showBatchDialog = ref(false)
|
const showBatchDialog = ref(false)
|
||||||
const showTypePicker = ref(false)
|
|
||||||
const showAddClassify = ref(false)
|
const showAddClassify = ref(false)
|
||||||
const batchFormRef = ref(null)
|
const batchFormRef = ref(null)
|
||||||
const batchGroup = ref(null)
|
const batchGroup = ref(null)
|
||||||
@@ -398,13 +379,6 @@ const selectClassify = (classify) => {
|
|||||||
batchForm.value.classify = classify
|
batchForm.value.classify = classify
|
||||||
}
|
}
|
||||||
|
|
||||||
// 确认选择交易类型
|
|
||||||
const handleConfirmType = ({ selectedOptions }) => {
|
|
||||||
batchForm.value.type = selectedOptions[0].value
|
|
||||||
batchForm.value.typeName = selectedOptions[0].text
|
|
||||||
showTypePicker.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
// 新增分类
|
// 新增分类
|
||||||
const addNewClassify = async () => {
|
const addNewClassify = async () => {
|
||||||
if (!newClassify.value.trim()) {
|
if (!newClassify.value.trim()) {
|
||||||
@@ -571,7 +545,7 @@ onBeforeUnmount(() => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
// 当有交易新增/修改/批量更新时的刷新监听
|
// 当有交易新增/修改/批量更新时的刷新监听
|
||||||
const onGlobalTransactionsChanged = (e) => {
|
const onGlobalTransactionsChanged = () => {
|
||||||
if (showTransactionList.value && selectedGroup.value) {
|
if (showTransactionList.value && selectedGroup.value) {
|
||||||
groupTransactions.value = []
|
groupTransactions.value = []
|
||||||
transactionPageIndex.value = 1
|
transactionPageIndex.value = 1
|
||||||
|
|||||||
@@ -45,16 +45,17 @@
|
|||||||
type="number"
|
type="number"
|
||||||
:rules="[{ required: true, message: '请输入交易后余额' }]"
|
:rules="[{ required: true, message: '请输入交易后余额' }]"
|
||||||
/>
|
/>
|
||||||
<van-field
|
|
||||||
v-model="editForm.typeText"
|
<van-field name="type" label="交易类型">
|
||||||
is-link
|
<template #input>
|
||||||
readonly
|
<van-radio-group v-model="editForm.type" direction="horizontal">
|
||||||
name="type"
|
<van-radio :name="0">支出</van-radio>
|
||||||
label="交易类型"
|
<van-radio :name="1">收入</van-radio>
|
||||||
placeholder="请选择交易类型"
|
<van-radio :name="2">不计</van-radio>
|
||||||
@click="showTypePicker = true"
|
</van-radio-group>
|
||||||
:rules="[{ required: true, message: '请选择交易类型' }]"
|
</template>
|
||||||
/>
|
</van-field>
|
||||||
|
|
||||||
<van-field name="classify" label="交易分类">
|
<van-field name="classify" label="交易分类">
|
||||||
<template #input>
|
<template #input>
|
||||||
<span v-if="!editForm.classify" style="color: #c8c9cc;">请选择交易分类</span>
|
<span v-if="!editForm.classify" style="color: #c8c9cc;">请选择交易分类</span>
|
||||||
@@ -103,16 +104,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</PopupContainer>
|
</PopupContainer>
|
||||||
|
|
||||||
<!-- 交易类型选择器 -->
|
|
||||||
<van-popup v-model:show="showTypePicker" position="bottom" round>
|
|
||||||
<van-picker
|
|
||||||
show-toolbar
|
|
||||||
:columns="typeColumns"
|
|
||||||
@confirm="onTypeConfirm"
|
|
||||||
@cancel="showTypePicker = false"
|
|
||||||
/>
|
|
||||||
</van-popup>
|
|
||||||
|
|
||||||
<!-- 新增分类对话框 -->
|
<!-- 新增分类对话框 -->
|
||||||
<van-dialog
|
<van-dialog
|
||||||
v-model:show="showAddClassify"
|
v-model:show="showAddClassify"
|
||||||
@@ -167,16 +158,8 @@ const emit = defineEmits(['update:show', 'save'])
|
|||||||
const visible = ref(false)
|
const visible = ref(false)
|
||||||
const submitting = ref(false)
|
const submitting = ref(false)
|
||||||
|
|
||||||
// 交易类型
|
|
||||||
const typeColumns = [
|
|
||||||
{ text: '支出', value: 0 },
|
|
||||||
{ text: '收入', value: 1 },
|
|
||||||
{ text: '不计入收支', value: 2 }
|
|
||||||
]
|
|
||||||
|
|
||||||
// 分类相关
|
// 分类相关
|
||||||
const classifyColumns = ref([])
|
const classifyColumns = ref([])
|
||||||
const showTypePicker = ref(false)
|
|
||||||
const showAddClassify = ref(false)
|
const showAddClassify = ref(false)
|
||||||
const newClassify = ref('')
|
const newClassify = ref('')
|
||||||
|
|
||||||
@@ -187,7 +170,6 @@ const editForm = reactive({
|
|||||||
amount: '',
|
amount: '',
|
||||||
balance: '',
|
balance: '',
|
||||||
type: 0,
|
type: 0,
|
||||||
typeText: '',
|
|
||||||
classify: ''
|
classify: ''
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -204,7 +186,6 @@ watch(() => props.transaction, (newVal) => {
|
|||||||
editForm.amount = String(newVal.amount)
|
editForm.amount = String(newVal.amount)
|
||||||
editForm.balance = String(newVal.balance)
|
editForm.balance = String(newVal.balance)
|
||||||
editForm.type = newVal.type
|
editForm.type = newVal.type
|
||||||
editForm.typeText = getTypeName(newVal.type)
|
|
||||||
editForm.classify = newVal.classify || ''
|
editForm.classify = newVal.classify || ''
|
||||||
|
|
||||||
// 根据交易类型加载分类
|
// 根据交易类型加载分类
|
||||||
@@ -277,13 +258,6 @@ const selectClassify = (classify) => {
|
|||||||
editForm.classify = classify
|
editForm.classify = classify
|
||||||
}
|
}
|
||||||
|
|
||||||
// 交易类型选择确认
|
|
||||||
const onTypeConfirm = ({ selectedValues, selectedOptions }) => {
|
|
||||||
editForm.type = selectedValues[0]
|
|
||||||
editForm.typeText = selectedOptions[0].text
|
|
||||||
showTypePicker.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
// 新增分类
|
// 新增分类
|
||||||
const addNewClassify = async () => {
|
const addNewClassify = async () => {
|
||||||
if (!newClassify.value.trim()) {
|
if (!newClassify.value.trim()) {
|
||||||
|
|||||||
@@ -1,410 +0,0 @@
|
|||||||
<template>
|
|
||||||
<van-popup
|
|
||||||
v-model:show="visible"
|
|
||||||
position="bottom"
|
|
||||||
:style="{ height: '70%' }"
|
|
||||||
round
|
|
||||||
closeable
|
|
||||||
@closed="handleClosed"
|
|
||||||
>
|
|
||||||
<div class="transaction-detail-dialog">
|
|
||||||
<div class="dialog-header">
|
|
||||||
<h3 class="dialog-title">账单详情</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="dialog-content">
|
|
||||||
<van-form ref="formRef">
|
|
||||||
<van-cell-group inset>
|
|
||||||
<!-- 交易摘要 -->
|
|
||||||
<van-field
|
|
||||||
:model-value="formData.reason"
|
|
||||||
label="交易摘要"
|
|
||||||
readonly
|
|
||||||
input-align="left"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 交易时间 -->
|
|
||||||
<van-field
|
|
||||||
:model-value="formatDateTime(formData.occurredAt)"
|
|
||||||
label="交易时间"
|
|
||||||
readonly
|
|
||||||
input-align="left"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 卡号 -->
|
|
||||||
<van-field
|
|
||||||
v-if="formData.card"
|
|
||||||
:model-value="formData.card"
|
|
||||||
label="卡号"
|
|
||||||
readonly
|
|
||||||
input-align="left"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 交易金额 -->
|
|
||||||
<van-field
|
|
||||||
v-model.number="formData.amount"
|
|
||||||
label="交易金额"
|
|
||||||
type="number"
|
|
||||||
placeholder="请输入金额"
|
|
||||||
input-align="left"
|
|
||||||
:rules="[{ required: true, message: '请输入交易金额' }]"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 交易后余额 -->
|
|
||||||
<van-field
|
|
||||||
v-model.number="formData.balance"
|
|
||||||
label="交易后余额"
|
|
||||||
type="number"
|
|
||||||
placeholder="请输入余额"
|
|
||||||
input-align="left"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 交易类型 -->
|
|
||||||
<van-field
|
|
||||||
v-model="typeText"
|
|
||||||
is-link
|
|
||||||
readonly
|
|
||||||
label="交易类型"
|
|
||||||
placeholder="请选择交易类型"
|
|
||||||
@click="showTypePicker = true"
|
|
||||||
:rules="[{ required: true, message: '请选择交易类型' }]"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 分类选择 -->
|
|
||||||
<van-field label="分类">
|
|
||||||
<template #input>
|
|
||||||
<span v-if="!formData.classify" style="opacity: 0.4;">请选择分类</span>
|
|
||||||
<span v-else>{{ formData.classify }}</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 classifyOptions"
|
|
||||||
:key="item.id"
|
|
||||||
:type="formData.classify === item.name ? 'primary' : 'default'"
|
|
||||||
size="small"
|
|
||||||
class="classify-btn"
|
|
||||||
@click="selectClassify(item.name)"
|
|
||||||
>
|
|
||||||
{{ item.name }}
|
|
||||||
</van-button>
|
|
||||||
<van-button
|
|
||||||
v-if="formData.classify"
|
|
||||||
type="warning"
|
|
||||||
size="small"
|
|
||||||
class="classify-btn"
|
|
||||||
@click="clearClassify"
|
|
||||||
>
|
|
||||||
清空
|
|
||||||
</van-button>
|
|
||||||
</div>
|
|
||||||
</van-cell-group>
|
|
||||||
</van-form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="dialog-footer">
|
|
||||||
<van-button
|
|
||||||
type="primary"
|
|
||||||
block
|
|
||||||
:loading="saving"
|
|
||||||
@click="handleSave"
|
|
||||||
>
|
|
||||||
保存
|
|
||||||
</van-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 交易类型选择器 -->
|
|
||||||
<van-popup v-model:show="showTypePicker" position="bottom" round>
|
|
||||||
<van-picker
|
|
||||||
show-toolbar
|
|
||||||
:columns="typeOptions"
|
|
||||||
@confirm="handleConfirmType"
|
|
||||||
@cancel="showTypePicker = false"
|
|
||||||
/>
|
|
||||||
</van-popup>
|
|
||||||
|
|
||||||
<!-- 新增分类对话框 -->
|
|
||||||
<van-dialog
|
|
||||||
v-model:show="showAddClassify"
|
|
||||||
title="新增交易分类"
|
|
||||||
show-cancel-button
|
|
||||||
@confirm="addNewClassify"
|
|
||||||
>
|
|
||||||
<van-field v-model="newClassify" placeholder="请输入新的交易分类" />
|
|
||||||
</van-dialog>
|
|
||||||
</van-popup>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, watch, computed } from 'vue'
|
|
||||||
import { showToast, showSuccessToast } from 'vant'
|
|
||||||
import { updateTransaction } from '@/api/transactionRecord'
|
|
||||||
import { getCategoryList, createCategory } from '@/api/transactionCategory'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
transaction: {
|
|
||||||
type: Object,
|
|
||||||
default: null
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits(['update:modelValue', 'saved'])
|
|
||||||
|
|
||||||
const visible = ref(props.modelValue)
|
|
||||||
const formRef = ref(null)
|
|
||||||
const saving = ref(false)
|
|
||||||
const showTypePicker = ref(false)
|
|
||||||
const showAddClassify = ref(false)
|
|
||||||
const newClassify = ref('')
|
|
||||||
const categories = ref([])
|
|
||||||
|
|
||||||
// 交易类型选项
|
|
||||||
const typeOptions = [
|
|
||||||
{ text: '支出', value: 0 },
|
|
||||||
{ text: '收入', value: 1 },
|
|
||||||
{ text: '不计收支', value: 2 }
|
|
||||||
]
|
|
||||||
|
|
||||||
// 表单数据
|
|
||||||
const formData = ref({
|
|
||||||
id: null,
|
|
||||||
reason: '',
|
|
||||||
occurredAt: '',
|
|
||||||
card: '',
|
|
||||||
amount: 0,
|
|
||||||
balance: 0,
|
|
||||||
type: 0,
|
|
||||||
classify: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
// 类型文本
|
|
||||||
const typeText = computed(() => {
|
|
||||||
const option = typeOptions.find(o => o.value === formData.value.type)
|
|
||||||
return option?.text || ''
|
|
||||||
})
|
|
||||||
|
|
||||||
// 根据选中的类型过滤分类选项
|
|
||||||
const classifyOptions = computed(() => {
|
|
||||||
return categories.value.filter(c => c.type === formData.value.type)
|
|
||||||
})
|
|
||||||
|
|
||||||
// 监听modelValue变化
|
|
||||||
watch(() => props.modelValue, (val) => {
|
|
||||||
visible.value = val
|
|
||||||
if (val && props.transaction) {
|
|
||||||
initFormData()
|
|
||||||
loadCategories()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 监听visible变化
|
|
||||||
watch(visible, (val) => {
|
|
||||||
emit('update:modelValue', val)
|
|
||||||
})
|
|
||||||
|
|
||||||
// 监听交易类型变化
|
|
||||||
watch(() => formData.value.type, () => {
|
|
||||||
// 清空已选的分类(如果当前分类不属于新类型)
|
|
||||||
const hasCurrentClassify = classifyOptions.value.some(
|
|
||||||
c => c.name === formData.value.classify
|
|
||||||
)
|
|
||||||
if (!hasCurrentClassify) {
|
|
||||||
formData.value.classify = ''
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 初始化表单数据
|
|
||||||
const initFormData = () => {
|
|
||||||
if (props.transaction) {
|
|
||||||
formData.value = {
|
|
||||||
id: props.transaction.id,
|
|
||||||
reason: props.transaction.reason || '',
|
|
||||||
occurredAt: props.transaction.occurredAt || '',
|
|
||||||
card: props.transaction.card || '',
|
|
||||||
amount: props.transaction.amount || 0,
|
|
||||||
balance: props.transaction.balance || 0,
|
|
||||||
type: props.transaction.type ?? 0,
|
|
||||||
classify: props.transaction.classify || ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 加载分类列表
|
|
||||||
const loadCategories = async () => {
|
|
||||||
try {
|
|
||||||
const res = await getCategoryList()
|
|
||||||
if (res.success) {
|
|
||||||
categories.value = res.data || []
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('获取分类列表失败:', error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 格式化日期时间
|
|
||||||
const formatDateTime = (dateStr) => {
|
|
||||||
if (!dateStr) return ''
|
|
||||||
const date = new Date(dateStr)
|
|
||||||
return date.toLocaleString('zh-CN', {
|
|
||||||
year: 'numeric',
|
|
||||||
month: '2-digit',
|
|
||||||
day: '2-digit',
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: '2-digit',
|
|
||||||
second: '2-digit'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 选择分类
|
|
||||||
const selectClassify = (classify) => {
|
|
||||||
formData.value.classify = classify
|
|
||||||
}
|
|
||||||
|
|
||||||
// 确认选择交易类型
|
|
||||||
const handleConfirmType = ({ selectedOptions }) => {
|
|
||||||
formData.value.type = selectedOptions[0].value
|
|
||||||
showTypePicker.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
// 新增分类
|
|
||||||
const addNewClassify = async () => {
|
|
||||||
if (!newClassify.value.trim()) {
|
|
||||||
showToast('请输入分类名称')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const categoryName = newClassify.value.trim()
|
|
||||||
|
|
||||||
const response = await createCategory({
|
|
||||||
name: categoryName,
|
|
||||||
type: formData.value.type
|
|
||||||
})
|
|
||||||
|
|
||||||
if (response.success) {
|
|
||||||
showToast('分类创建成功')
|
|
||||||
await loadCategories()
|
|
||||||
formData.value.classify = categoryName
|
|
||||||
} else {
|
|
||||||
showToast(response.message || '创建分类失败')
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('创建分类出错:', error)
|
|
||||||
showToast('创建分类失败')
|
|
||||||
} finally {
|
|
||||||
newClassify.value = ''
|
|
||||||
showAddClassify.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 清空分类
|
|
||||||
const clearClassify = () => {
|
|
||||||
formData.value.classify = ''
|
|
||||||
}
|
|
||||||
|
|
||||||
// 保存
|
|
||||||
const handleSave = async () => {
|
|
||||||
try {
|
|
||||||
await formRef.value?.validate()
|
|
||||||
|
|
||||||
saving.value = true
|
|
||||||
|
|
||||||
const res = await updateTransaction({
|
|
||||||
id: formData.value.id,
|
|
||||||
amount: formData.value.amount,
|
|
||||||
balance: formData.value.balance,
|
|
||||||
type: formData.value.type,
|
|
||||||
classify: formData.value.classify || ''
|
|
||||||
})
|
|
||||||
|
|
||||||
if (res.success) {
|
|
||||||
showSuccessToast('保存成功')
|
|
||||||
visible.value = false
|
|
||||||
emit('saved', formData.value)
|
|
||||||
} else {
|
|
||||||
showToast(res.message || '保存失败')
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
if (error !== 'cancel') {
|
|
||||||
console.error('保存失败:', error)
|
|
||||||
showToast(error.message || '保存失败')
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
saving.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 处理弹窗关闭
|
|
||||||
const handleClosed = () => {
|
|
||||||
formRef.value?.resetValidation()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.transaction-detail-dialog {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-header {
|
|
||||||
padding: 20px 16px 12px;
|
|
||||||
border-bottom: 1px solid var(--van-border-color, #ebedf0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-content {
|
|
||||||
flex: 1;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 16px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-footer {
|
|
||||||
padding: 12px 16px;
|
|
||||||
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
|
|
||||||
border-top: 1px solid var(--van-border-color, #ebedf0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.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: 70px;
|
|
||||||
border-radius: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.dialog-header,
|
|
||||||
.dialog-footer {
|
|
||||||
border-color: var(--van-border-color, #3a3a3a);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -173,15 +173,18 @@
|
|||||||
:rules="[{ required: true, message: '请输入金额' }]"
|
:rules="[{ required: true, message: '请输入金额' }]"
|
||||||
/>
|
/>
|
||||||
<van-field
|
<van-field
|
||||||
v-model="form.typeText"
|
v-model="form.type"
|
||||||
is-link
|
|
||||||
readonly
|
|
||||||
name="type"
|
name="type"
|
||||||
label="类型"
|
label="类型"
|
||||||
placeholder="请选择交易类型"
|
>
|
||||||
@click="showTypePicker = true"
|
<template #input>
|
||||||
:rules="[{ required: true, message: '请选择交易类型' }]"
|
<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="classify" label="分类">
|
<van-field name="classify" label="分类">
|
||||||
<template #input>
|
<template #input>
|
||||||
<span v-if="!form.classify" style="color: #c8c9cc;">请选择交易分类</span>
|
<span v-if="!form.classify" style="color: #c8c9cc;">请选择交易分类</span>
|
||||||
@@ -229,15 +232,6 @@
|
|||||||
</van-form>
|
</van-form>
|
||||||
</PopupContainer>
|
</PopupContainer>
|
||||||
|
|
||||||
<!-- 交易类型选择器 -->
|
|
||||||
<van-popup v-model:show="showTypePicker" position="bottom" round>
|
|
||||||
<van-picker
|
|
||||||
:columns="typeColumns"
|
|
||||||
@confirm="onTypeConfirm"
|
|
||||||
@cancel="showTypePicker = false"
|
|
||||||
/>
|
|
||||||
</van-popup>
|
|
||||||
|
|
||||||
<!-- 周期类型选择器 -->
|
<!-- 周期类型选择器 -->
|
||||||
<van-popup v-model:show="showPeriodicTypePicker" position="bottom" round>
|
<van-popup v-model:show="showPeriodicTypePicker" position="bottom" round>
|
||||||
<van-picker
|
<van-picker
|
||||||
@@ -306,7 +300,6 @@ const total = ref(0)
|
|||||||
const dialogVisible = ref(false)
|
const dialogVisible = ref(false)
|
||||||
const isEdit = ref(false)
|
const isEdit = ref(false)
|
||||||
const submitting = ref(false)
|
const submitting = ref(false)
|
||||||
const showTypePicker = ref(false)
|
|
||||||
const showPeriodicTypePicker = ref(false)
|
const showPeriodicTypePicker = ref(false)
|
||||||
const showWeekdaysPicker = ref(false)
|
const showWeekdaysPicker = ref(false)
|
||||||
const showMonthDaysPicker = ref(false)
|
const showMonthDaysPicker = ref(false)
|
||||||
@@ -316,13 +309,6 @@ const newClassify = ref('')
|
|||||||
// 分类列表
|
// 分类列表
|
||||||
const classifyColumns = ref([])
|
const classifyColumns = ref([])
|
||||||
|
|
||||||
// 交易类型
|
|
||||||
const typeColumns = [
|
|
||||||
{ text: '支出', value: 0 },
|
|
||||||
{ text: '收入', value: 1 },
|
|
||||||
{ text: '不计入收支', value: 2 }
|
|
||||||
]
|
|
||||||
|
|
||||||
// 周期类型
|
// 周期类型
|
||||||
const periodicTypeColumns = [
|
const periodicTypeColumns = [
|
||||||
{ text: '每天', value: 0 },
|
{ text: '每天', value: 0 },
|
||||||
@@ -355,7 +341,6 @@ const form = reactive({
|
|||||||
reason: '',
|
reason: '',
|
||||||
amount: '',
|
amount: '',
|
||||||
type: 0,
|
type: 0,
|
||||||
typeText: '',
|
|
||||||
classify: '',
|
classify: '',
|
||||||
periodicType: 0,
|
periodicType: 0,
|
||||||
periodicTypeText: '',
|
periodicTypeText: '',
|
||||||
@@ -508,7 +493,6 @@ const editPeriodic = (item) => {
|
|||||||
form.reason = item.reason
|
form.reason = item.reason
|
||||||
form.amount = item.amount.toString()
|
form.amount = item.amount.toString()
|
||||||
form.type = item.type
|
form.type = item.type
|
||||||
form.typeText = typeColumns.find(t => t.value === item.type)?.text || ''
|
|
||||||
form.classify = item.classify
|
form.classify = item.classify
|
||||||
form.periodicType = item.periodicType
|
form.periodicType = item.periodicType
|
||||||
form.periodicTypeText = periodicTypeColumns.find(t => t.value === item.periodicType)?.text || ''
|
form.periodicTypeText = periodicTypeColumns.find(t => t.value === item.periodicType)?.text || ''
|
||||||
@@ -593,7 +577,6 @@ const resetForm = () => {
|
|||||||
form.reason = ''
|
form.reason = ''
|
||||||
form.amount = ''
|
form.amount = ''
|
||||||
form.type = 0
|
form.type = 0
|
||||||
form.typeText = ''
|
|
||||||
form.classify = ''
|
form.classify = ''
|
||||||
form.periodicType = 0
|
form.periodicType = 0
|
||||||
form.periodicTypeText = ''
|
form.periodicTypeText = ''
|
||||||
@@ -606,17 +589,6 @@ const resetForm = () => {
|
|||||||
form.yearDay = ''
|
form.yearDay = ''
|
||||||
}
|
}
|
||||||
|
|
||||||
// 选择器确认事件
|
|
||||||
const onTypeConfirm = ({ selectedValues, selectedOptions }) => {
|
|
||||||
form.type = selectedValues[0]
|
|
||||||
form.typeText = selectedOptions[0].text
|
|
||||||
showTypePicker.value = false
|
|
||||||
// 清空已选的分类
|
|
||||||
form.classify = ''
|
|
||||||
// 重新加载对应类型的分类列表
|
|
||||||
loadClassifyList(form.type)
|
|
||||||
}
|
|
||||||
|
|
||||||
const onPeriodicTypeConfirm = ({ selectedValues, selectedOptions }) => {
|
const onPeriodicTypeConfirm = ({ selectedValues, selectedOptions }) => {
|
||||||
form.periodicType = selectedValues[0]
|
form.periodicType = selectedValues[0]
|
||||||
form.periodicTypeText = selectedOptions[0].text
|
form.periodicTypeText = selectedOptions[0].text
|
||||||
|
|||||||
Reference in New Issue
Block a user