319f8f7d7b
Some checks failed
Docker Build & Deploy / Build Docker Image (push) Failing after 1m10s
Docker Build & Deploy / Deploy to Production (push) Has been skipped
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Docker Build & Deploy / WeChat Notification (push) Successful in 1s
431 lines
11 KiB
Vue
431 lines
11 KiB
Vue
<template>
|
||
<PopupContainer v-model="visible" title="交易详情" height="75%" :closeable="false">
|
||
<template #header-actions>
|
||
<van-button size="small" type="primary" plain @click="handleOffsetClick"> 抵账 </van-button>
|
||
</template>
|
||
|
||
<van-form style="margin-top: 12px">
|
||
<van-cell-group inset>
|
||
<van-cell title="记录时间" :value="formatDate(transaction.createTime)" />
|
||
</van-cell-group>
|
||
|
||
<van-cell-group inset title="交易明细">
|
||
<van-field
|
||
v-model="occurredAtLabel"
|
||
name="occurredAt"
|
||
label="交易时间"
|
||
readonly
|
||
is-link
|
||
placeholder="请选择交易时间"
|
||
:rules="[{ required: true, message: '请选择交易时间' }]"
|
||
@click="showDatePicker = true"
|
||
/>
|
||
<van-field
|
||
v-model="editForm.reason"
|
||
name="reason"
|
||
label="交易摘要"
|
||
placeholder="请输入交易摘要"
|
||
type="textarea"
|
||
rows="2"
|
||
autosize
|
||
maxlength="200"
|
||
show-word-limit
|
||
/>
|
||
<van-field
|
||
v-model="editForm.amount"
|
||
name="amount"
|
||
label="交易金额"
|
||
placeholder="请输入交易金额"
|
||
type="number"
|
||
:rules="[{ required: true, message: '请输入交易金额' }]"
|
||
/>
|
||
<van-field
|
||
v-model="editForm.balance"
|
||
name="balance"
|
||
label="交易后余额"
|
||
placeholder="请输入交易后余额"
|
||
type="number"
|
||
:rules="[{ required: true, message: '请输入交易后余额' }]"
|
||
/>
|
||
|
||
<van-field name="type" label="交易类型">
|
||
<template #input>
|
||
<van-radio-group
|
||
v-model="editForm.type"
|
||
direction="horizontal"
|
||
@change="handleTypeChange"
|
||
>
|
||
<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="交易分类">
|
||
<template #input>
|
||
<div style="flex: 1">
|
||
<div
|
||
v-if="
|
||
transaction &&
|
||
transaction.unconfirmedClassify &&
|
||
transaction.unconfirmedClassify !== editForm.classify
|
||
"
|
||
class="suggestion-tip"
|
||
@click="applySuggestion"
|
||
>
|
||
<van-icon name="bulb-o" class="suggestion-icon" />
|
||
<span class="suggestion-text">
|
||
建议: {{ transaction.unconfirmedClassify }}
|
||
<span
|
||
v-if="
|
||
transaction.unconfirmedType !== null &&
|
||
transaction.unconfirmedType !== undefined &&
|
||
transaction.unconfirmedType !== editForm.type
|
||
"
|
||
>
|
||
({{ getTypeName(transaction.unconfirmedType) }})
|
||
</span>
|
||
</span>
|
||
<div class="suggestion-apply">应用</div>
|
||
</div>
|
||
<span v-else-if="!editForm.classify" style="color: var(--van-gray-5)"
|
||
>请选择交易分类</span
|
||
>
|
||
<span v-else>{{ editForm.classify }}</span>
|
||
</div>
|
||
</template>
|
||
</van-field>
|
||
|
||
<ClassifySelector
|
||
v-model="editForm.classify"
|
||
:type="editForm.type"
|
||
@change="handleClassifyChange"
|
||
/>
|
||
</van-cell-group>
|
||
</van-form>
|
||
|
||
<template #footer>
|
||
<van-button round block type="primary" :loading="submitting" @click="onSubmit">
|
||
保存修改
|
||
</van-button>
|
||
</template>
|
||
</PopupContainer>
|
||
|
||
<!-- 抵账候选列表弹窗 -->
|
||
<PopupContainer v-model="showOffsetPopup" title="选择抵账交易" height="75%">
|
||
<van-list>
|
||
<van-cell
|
||
v-for="item in offsetCandidates"
|
||
:key="item.id"
|
||
:title="item.reason"
|
||
:label="formatDate(item.occurredAt)"
|
||
:value="item.amount"
|
||
is-link
|
||
@click="handleCandidateSelect(item)"
|
||
/>
|
||
<van-empty v-if="offsetCandidates.length === 0" description="暂无匹配的抵账交易" />
|
||
</van-list>
|
||
</PopupContainer>
|
||
|
||
<!-- 日期选择弹窗 -->
|
||
<van-popup v-model:show="showDatePicker" position="bottom" round teleport="body">
|
||
<van-date-picker
|
||
v-model="currentDate"
|
||
title="选择日期"
|
||
@confirm="onConfirmDate"
|
||
@cancel="showDatePicker = false"
|
||
/>
|
||
</van-popup>
|
||
|
||
<!-- 时间选择弹窗 -->
|
||
<van-popup v-model:show="showTimePicker" position="bottom" round teleport="body">
|
||
<van-time-picker
|
||
v-model="currentTime"
|
||
title="选择时间"
|
||
@confirm="onConfirmTime"
|
||
@cancel="showTimePicker = false"
|
||
/>
|
||
</van-popup>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, watch, defineProps, defineEmits, computed, nextTick } from 'vue'
|
||
import { showToast, showConfirmDialog } from 'vant'
|
||
import dayjs from 'dayjs'
|
||
import PopupContainer from '@/components/PopupContainer.vue'
|
||
import ClassifySelector from '@/components/ClassifySelector.vue'
|
||
import {
|
||
updateTransaction,
|
||
getCandidatesForOffset,
|
||
offsetTransactions
|
||
} from '@/api/transactionRecord'
|
||
|
||
const props = defineProps({
|
||
show: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
transaction: {
|
||
type: Object,
|
||
default: null
|
||
}
|
||
})
|
||
|
||
const emit = defineEmits(['update:show', 'save'])
|
||
|
||
const visible = ref(false)
|
||
const submitting = ref(false)
|
||
const isSyncing = ref(false)
|
||
|
||
// 日期选择相关
|
||
const showDatePicker = ref(false)
|
||
const showTimePicker = ref(false)
|
||
const currentDate = ref([])
|
||
const currentTime = ref([])
|
||
|
||
// 编辑表单
|
||
const editForm = reactive({
|
||
id: 0,
|
||
reason: '',
|
||
amount: '',
|
||
balance: '',
|
||
type: 0,
|
||
classify: '',
|
||
occurredAt: ''
|
||
})
|
||
|
||
// 显示用的日期格式化
|
||
const occurredAtLabel = computed(() => {
|
||
return formatDate(editForm.occurredAt)
|
||
})
|
||
|
||
// 监听props变化
|
||
watch(
|
||
() => props.show,
|
||
(newVal) => {
|
||
visible.value = newVal
|
||
}
|
||
)
|
||
|
||
watch(
|
||
() => props.transaction,
|
||
(newVal) => {
|
||
if (newVal) {
|
||
isSyncing.value = true
|
||
// 填充编辑表单
|
||
editForm.id = newVal.id
|
||
editForm.reason = newVal.reason || ''
|
||
editForm.amount = String(newVal.amount)
|
||
editForm.balance = String(newVal.balance)
|
||
editForm.type = newVal.type
|
||
editForm.classify = newVal.classify || ''
|
||
|
||
// 初始化日期时间
|
||
if (newVal.occurredAt) {
|
||
editForm.occurredAt = newVal.occurredAt
|
||
const dt = dayjs(newVal.occurredAt)
|
||
currentDate.value = dt.format('YYYY-MM-DD').split('-')
|
||
currentTime.value = dt.format('HH:mm').split(':')
|
||
}
|
||
|
||
// 在下一个 tick 结束同步状态，确保 van-radio-group 的 @change 已触发完毕
|
||
nextTick(() => {
|
||
isSyncing.value = false
|
||
})
|
||
}
|
||
}
|
||
)
|
||
|
||
watch(visible, (newVal) => {
|
||
emit('update:show', newVal)
|
||
})
|
||
|
||
// 处理类型切换
|
||
const handleTypeChange = () => {
|
||
if (!isSyncing.value) {
|
||
editForm.classify = ''
|
||
}
|
||
}
|
||
|
||
// 处理日期确认
|
||
const onConfirmDate = ({ selectedValues }) => {
|
||
const dateStr = selectedValues.join('-')
|
||
const timeStr = currentTime.value.join(':')
|
||
editForm.occurredAt = dayjs(`${dateStr} ${timeStr}`).toISOString()
|
||
showDatePicker.value = false
|
||
// 接着选时间
|
||
showTimePicker.value = true
|
||
}
|
||
|
||
const onConfirmTime = ({ selectedValues }) => {
|
||
currentTime.value = selectedValues
|
||
const dateStr = currentDate.value.join('-')
|
||
const timeStr = selectedValues.join(':')
|
||
editForm.occurredAt = dayjs(`${dateStr} ${timeStr}`).toISOString()
|
||
showTimePicker.value = false
|
||
}
|
||
|
||
const applySuggestion = () => {
|
||
if (props.transaction.unconfirmedClassify) {
|
||
editForm.classify = props.transaction.unconfirmedClassify
|
||
if (
|
||
props.transaction.unconfirmedType !== null &&
|
||
props.transaction.unconfirmedType !== undefined
|
||
) {
|
||
editForm.type = props.transaction.unconfirmedType
|
||
}
|
||
}
|
||
}
|
||
|
||
const getTypeName = (type) => {
|
||
const typeMap = {
|
||
0: '支出',
|
||
1: '收入',
|
||
2: '不计'
|
||
}
|
||
return typeMap[type] || '未知'
|
||
}
|
||
|
||
// 提交编辑
|
||
const onSubmit = async () => {
|
||
try {
|
||
submitting.value = true
|
||
|
||
const data = {
|
||
id: editForm.id,
|
||
reason: editForm.reason,
|
||
amount: parseFloat(editForm.amount),
|
||
balance: parseFloat(editForm.balance),
|
||
type: editForm.type,
|
||
classify: editForm.classify,
|
||
occurredAt: editForm.occurredAt
|
||
}
|
||
|
||
const response = await updateTransaction(data)
|
||
if (response.success) {
|
||
showToast('保存成功')
|
||
visible.value = false
|
||
emit('save', data)
|
||
} else {
|
||
showToast(response.message || '保存失败')
|
||
}
|
||
} catch (error) {
|
||
console.error('保存出错:', error)
|
||
showToast('保存失败')
|
||
} finally {
|
||
submitting.value = false
|
||
}
|
||
}
|
||
|
||
// 分类选择变化
|
||
const handleClassifyChange = () => {
|
||
if (editForm.id > 0 && editForm.type >= 0) {
|
||
// 直接保存
|
||
onSubmit()
|
||
}
|
||
}
|
||
|
||
// 清空分类
|
||
const formatDate = (dateString) => {
|
||
if (!dateString) {
|
||
return ''
|
||
}
|
||
const date = new Date(dateString)
|
||
return date.toLocaleString('zh-CN', {
|
||
year: 'numeric',
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit'
|
||
})
|
||
}
|
||
|
||
// 抵账相关
|
||
const showOffsetPopup = ref(false)
|
||
const offsetCandidates = ref([])
|
||
|
||
const handleOffsetClick = async () => {
|
||
try {
|
||
const res = await getCandidatesForOffset(editForm.id)
|
||
if (res.success) {
|
||
offsetCandidates.value = res.data || []
|
||
showOffsetPopup.value = true
|
||
} else {
|
||
showToast(res.message || '获取抵账列表失败')
|
||
}
|
||
} catch (error) {
|
||
console.error('获取抵账列表出错:', error)
|
||
showToast('获取抵账列表失败')
|
||
}
|
||
}
|
||
|
||
const handleCandidateSelect = (candidate) => {
|
||
showConfirmDialog({
|
||
title: '确认抵账',
|
||
message: `确认将当前交易与 "${candidate.reason}" (${candidate.amount}) 互相抵消吗？\n抵消后两笔交易将被删除。`
|
||
})
|
||
.then(async () => {
|
||
try {
|
||
const res = await offsetTransactions(editForm.id, candidate.id)
|
||
if (res.success) {
|
||
showToast('抵账成功')
|
||
showOffsetPopup.value = false
|
||
visible.value = false
|
||
emit('save') // 触发列表刷新
|
||
} else {
|
||
showToast(res.message || '抵账失败')
|
||
}
|
||
} catch (error) {
|
||
console.error('抵账出错:', error)
|
||
showToast('抵账失败')
|
||
}
|
||
})
|
||
.catch(() => {
|
||
// on cancel
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.suggestion-tip {
|
||
font-size: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 6px 10px;
|
||
background: var(--van-active-color);
|
||
color: var(--van-primary-color);
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: opacity 0.2s;
|
||
border: 1px solid var(--van-primary-color);
|
||
width: fit-content;
|
||
opacity: 0.1;
|
||
}
|
||
|
||
.suggestion-tip:active {
|
||
opacity: 0.2;
|
||
}
|
||
|
||
.suggestion-icon {
|
||
margin-right: 4px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.suggestion-text {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.suggestion-apply {
|
||
margin-left: 8px;
|
||
padding: 0 6px;
|
||
background: var(--van-primary-color);
|
||
color: var(--van-white);
|
||
border-radius: 4px;
|
||
font-size: 10px;
|
||
height: 18px;
|
||
line-height: 18px;
|
||
font-weight: bold;
|
||
}
|
||
</style>
|