样式统一
This commit is contained in:
孙诚
@@ -12,44 +12,27 @@
|
||||
/>
|
||||
|
||||
<!-- 日期交易列表弹出层 -->
|
||||
<van-popup
|
||||
v-model:show="listVisible"
|
||||
position="bottom"
|
||||
:style="{ height: '85%' }"
|
||||
round
|
||||
<PopupContainer
|
||||
v-model="listVisible"
|
||||
:title="selectedDateText"
|
||||
:subtitle="getBalance(dateTransactions)"
|
||||
height="85%"
|
||||
>
|
||||
<div class="popup-container">
|
||||
<div class="popup-header-fixed">
|
||||
<van-icon
|
||||
name="cross"
|
||||
class="close-icon"
|
||||
@click="listVisible = false"
|
||||
/>
|
||||
<h3 class="date-title">{{ selectedDateText }}</h3>
|
||||
<div class="header-stats">
|
||||
<p v-if="dateTransactions.length">
|
||||
共 {{ dateTransactions.length }} 笔交易，
|
||||
<span v-html="getBalance(dateTransactions)" />
|
||||
</p>
|
||||
<SmartClassifyButton
|
||||
ref="smartClassifyButtonRef"
|
||||
:transactions="dateTransactions"
|
||||
@save="onSmartClassifySave"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="popup-scroll-content">
|
||||
<TransactionList
|
||||
<template #header-actions>
|
||||
<SmartClassifyButton
|
||||
ref="smartClassifyButtonRef"
|
||||
:transactions="dateTransactions"
|
||||
:loading="listLoading"
|
||||
:finished="true"
|
||||
:show-delete="false"
|
||||
@click="viewDetail"
|
||||
@save="onSmartClassifySave"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</template>
|
||||
<TransactionList
|
||||
:transactions="dateTransactions"
|
||||
:loading="listLoading"
|
||||
:finished="true"
|
||||
:show-delete="false"
|
||||
@click="viewDetail"
|
||||
/>
|
||||
</PopupContainer>
|
||||
|
||||
<!-- 交易详情组件 -->
|
||||
<TransactionDetail
|
||||
@@ -68,6 +51,7 @@ import { getTransactionDetail, getTransactionsByDate } from "@/api/transactionRe
|
||||
import TransactionList from "@/components/TransactionList.vue";
|
||||
import TransactionDetail from "@/components/TransactionDetail.vue";
|
||||
import SmartClassifyButton from "@/components/SmartClassifyButton.vue";
|
||||
import PopupContainer from "@/components/PopupContainer.vue";
|
||||
|
||||
const dailyStatistics = ref({});
|
||||
const listVisible = ref(false);
|
||||
@@ -161,9 +145,9 @@ const getBalance = (transactions) => {
|
||||
});
|
||||
|
||||
if(balance >= 0) {
|
||||
return `结余<span style="color: var(--van-tag-success-color);">收入 ${balance.toFixed(1)} 元</span>`;
|
||||
return `结余收入 ${balance.toFixed(1)} 元`;
|
||||
} else {
|
||||
return `结余<span style="color: var(--van-tag-danger-color);">支出 ${(-balance).toFixed(1)} 元</span>`;
|
||||
return `结余支出 ${(-balance).toFixed(1)} 元`;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -300,45 +284,4 @@ fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1);
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* 弹窗头部样式 */
|
||||
.popup-header-fixed {
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
font-size: 18px;
|
||||
color: #969799;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.date-title {
|
||||
text-align: center;
|
||||
margin: 0 0 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.header-stats {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.header-stats p {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #646566;
|
||||
}
|
||||
|
||||
.popup-scroll-content {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -9,14 +9,13 @@
|
||||
/>
|
||||
|
||||
<div class="scroll-content">
|
||||
<!-- 未分类账单统计 -->
|
||||
<div class="unclassified-stat">
|
||||
<span>未分类账单数: {{ unclassifiedCount }}</span>
|
||||
</div>
|
||||
<!-- 未分类账单统计 -->
|
||||
<div class="unclassified-stat">
|
||||
<span>未分类账单数: {{ unclassifiedCount }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 分组列表 -->
|
||||
<div>
|
||||
<van-empty v-if="reasonGroups.length === 0 && !listLoading && finished" description="暂无数据" />
|
||||
<!-- 分组列表 -->
|
||||
<van-empty v-if="!hasData && finished" description="暂无数据" />
|
||||
|
||||
<van-list
|
||||
v-model:loading="listLoading"
|
||||
@@ -26,264 +25,31 @@
|
||||
error-text="请求失败，点击重新加载"
|
||||
@load="onLoad"
|
||||
>
|
||||
<van-cell-group inset>
|
||||
<van-cell
|
||||
v-for="group in reasonGroups"
|
||||
:key="group.reason"
|
||||
clickable
|
||||
@click="handleSelectGroup(group)"
|
||||
>
|
||||
<template #title>
|
||||
<div class="group-title">
|
||||
{{ group.reason }}
|
||||
</div>
|
||||
</template>
|
||||
<template #label>
|
||||
<div class="group-info">
|
||||
<van-tag
|
||||
:type="getTypeColor(group.sampleType)"
|
||||
size="medium"
|
||||
style="margin-right: 8px;"
|
||||
>
|
||||
{{ getTypeName(group.sampleType) }}
|
||||
</van-tag>
|
||||
<van-tag
|
||||
v-if="group.sampleClassify"
|
||||
type="primary"
|
||||
size="medium"
|
||||
style="margin-right: 8px;"
|
||||
>
|
||||
{{ group.sampleClassify }}
|
||||
</van-tag>
|
||||
<span class="count-text">{{ group.count }} 条记录</span>
|
||||
<span class="amount-text" v-if="group.totalAmount">
|
||||
¥{{ Math.abs(group.totalAmount).toFixed(2) }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #right-icon>
|
||||
<van-icon name="arrow" />
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
<ReasonGroupList
|
||||
ref="groupListRef"
|
||||
@data-loaded="handleDataLoaded"
|
||||
@data-changed="handleDataChanged"
|
||||
/>
|
||||
</van-list>
|
||||
</div>
|
||||
|
||||
<!-- 批量设置对话框 -->
|
||||
<van-dialog
|
||||
v-model:show="showSettingDialog"
|
||||
title="批量设置分类"
|
||||
:show-cancel-button="true"
|
||||
@confirm="handleConfirmUpdate"
|
||||
@cancel="resetForm"
|
||||
>
|
||||
<van-form ref="formRef" class="setting-form">
|
||||
<van-cell-group inset>
|
||||
<!-- 显示选中的摘要 -->
|
||||
<van-field
|
||||
:model-value="selectedGroup?.reason"
|
||||
label="交易摘要"
|
||||
readonly
|
||||
input-align="left"
|
||||
/>
|
||||
|
||||
<!-- 显示记录数量 -->
|
||||
<van-field
|
||||
:model-value="`${selectedGroup?.count || 0} 条`"
|
||||
label="记录数量"
|
||||
readonly
|
||||
input-align="left"
|
||||
/>
|
||||
|
||||
<!-- 交易类型选择 -->
|
||||
<van-field
|
||||
v-model="form.typeName"
|
||||
is-link
|
||||
readonly
|
||||
name="type"
|
||||
label="交易类型"
|
||||
placeholder="请选择交易类型"
|
||||
@click="showTypePicker = true"
|
||||
:rules="[{ required: true, message: '请选择交易类型' }]"
|
||||
/>
|
||||
|
||||
<!-- 分类选择 -->
|
||||
<van-field name="classify" label="分类">
|
||||
<template #input>
|
||||
<span v-if="!form.classify" style="opacity: 0.4;">请选择分类</span>
|
||||
<span v-else>{{ form.classify }}</span>
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<!-- 分类按钮网格 -->
|
||||
<div class="classify-buttons">
|
||||
<van-button
|
||||
v-for="item in classifyOptions"
|
||||
:key="item.id"
|
||||
:type="form.classify === item.text ? 'primary' : 'default'"
|
||||
size="small"
|
||||
class="classify-btn"
|
||||
@click="selectClassify(item.text)"
|
||||
>
|
||||
{{ item.text }}
|
||||
</van-button>
|
||||
<van-button
|
||||
type="success"
|
||||
size="small"
|
||||
class="classify-btn"
|
||||
@click="showAddClassify = true"
|
||||
>
|
||||
+ 新增
|
||||
</van-button>
|
||||
<van-button
|
||||
v-if="form.classify"
|
||||
type="warning"
|
||||
size="small"
|
||||
class="classify-btn"
|
||||
@click="clearClassify"
|
||||
>
|
||||
清空
|
||||
</van-button>
|
||||
</div>
|
||||
</van-cell-group>
|
||||
</van-form>
|
||||
</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
|
||||
v-model:show="showAddClassify"
|
||||
title="新增交易分类"
|
||||
show-cancel-button
|
||||
@confirm="addNewClassify"
|
||||
>
|
||||
<van-field v-model="newClassify" placeholder="请输入新的交易分类" />
|
||||
</van-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, watch } from 'vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
showSuccessToast,
|
||||
showToast,
|
||||
showLoadingToast,
|
||||
closeToast,
|
||||
showConfirmDialog
|
||||
} from 'vant'
|
||||
import { getReasonGroups, batchUpdateByReason, getUnclassifiedCount } from '@/api/transactionRecord'
|
||||
import { getCategoryList, createCategory } from '@/api/transactionCategory'
|
||||
import { getUnclassifiedCount } from '@/api/transactionRecord'
|
||||
import ReasonGroupList from '@/components/ReasonGroupList.vue'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 交易类型选项
|
||||
const typeOptions = [
|
||||
{ text: '支出', value: 0 },
|
||||
{ text: '收入', value: 1 },
|
||||
{ text: '不计收支', value: 2 }
|
||||
]
|
||||
const groupListRef = ref(null)
|
||||
|
||||
// 数据状态
|
||||
const listLoading = ref(false)
|
||||
const error = ref(false)
|
||||
const finished = ref(false)
|
||||
const reasonGroups = ref([])
|
||||
const categories = ref([])
|
||||
const pageIndex = ref(1)
|
||||
const pageSize = 20
|
||||
const hasData = ref(false)
|
||||
const unclassifiedCount = ref(0)
|
||||
const total = ref(0)
|
||||
|
||||
// 对话框状态
|
||||
const showSettingDialog = ref(false)
|
||||
const showTypePicker = ref(false)
|
||||
const showAddClassify = ref(false)
|
||||
|
||||
// 表单状态
|
||||
const formRef = ref(null)
|
||||
const selectedGroup = ref(null)
|
||||
const newClassify = ref('')
|
||||
const form = ref({
|
||||
type: null,
|
||||
typeName: '',
|
||||
classify: ''
|
||||
})
|
||||
|
||||
// 根据选中的类型过滤分类选项
|
||||
const classifyOptions = computed(() => {
|
||||
if (form.value.type === null) return []
|
||||
return categories.value
|
||||
.filter(c => c.type === form.value.type)
|
||||
.map(c => ({ text: c.name, value: c.name, id: c.id }))
|
||||
})
|
||||
|
||||
// 监听交易类型变化，重新加载分类
|
||||
watch(() => form.value.type, (newVal) => {
|
||||
// 清空已选的分类
|
||||
form.value.classify = ''
|
||||
// 重新加载对应类型的分类列表
|
||||
loadCategories(newVal)
|
||||
})
|
||||
|
||||
// 获取类型名称
|
||||
const getTypeName = (type) => {
|
||||
const typeMap = {
|
||||
0: '支出',
|
||||
1: '收入',
|
||||
2: '不计收支'
|
||||
}
|
||||
return typeMap[type] || '未知'
|
||||
}
|
||||
|
||||
// 获取类型对应的标签颜色
|
||||
const getTypeColor = (type) => {
|
||||
const colorMap = {
|
||||
0: 'danger', // 支出 - 红色
|
||||
1: 'success', // 收入 - 绿色
|
||||
2: 'default' // 不计收支 - 灰色
|
||||
}
|
||||
return colorMap[type] || 'default'
|
||||
}
|
||||
|
||||
// 获取分组数据
|
||||
const loadReasonGroups = async () => {
|
||||
try {
|
||||
const res = await getReasonGroups(pageIndex.value, pageSize)
|
||||
if (res.success) {
|
||||
const newData = res.data || []
|
||||
reasonGroups.value = [...reasonGroups.value, ...newData]
|
||||
total.value = res.total || 0
|
||||
|
||||
// 判断是否还有更多数据
|
||||
if (reasonGroups.value.length >= total.value) {
|
||||
finished.value = true
|
||||
}
|
||||
|
||||
// 加载成功后，页码+1，为下次加载做准备
|
||||
pageIndex.value++
|
||||
|
||||
error.value = false
|
||||
} else {
|
||||
error.value = true
|
||||
showToast(res.message || '获取分组数据失败')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('获取分组数据失败:', err)
|
||||
error.value = true
|
||||
showToast('获取分组数据失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 获取未分类账单统计
|
||||
const loadUnclassifiedCount = async () => {
|
||||
@@ -297,233 +63,62 @@ const loadUnclassifiedCount = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 处理数据加载完成
|
||||
const handleDataLoaded = ({ groups, total, finished: isFinished }) => {
|
||||
hasData.value = groups.length > 0
|
||||
finished.value = isFinished
|
||||
}
|
||||
|
||||
// 处理数据变更
|
||||
const handleDataChanged = async () => {
|
||||
await loadUnclassifiedCount()
|
||||
}
|
||||
|
||||
// 加载更多
|
||||
const onLoad = async () => {
|
||||
await loadReasonGroups()
|
||||
|
||||
// 首次加载时获取统计信息
|
||||
if (pageIndex.value === 2) {
|
||||
await loadUnclassifiedCount()
|
||||
}
|
||||
|
||||
listLoading.value = false
|
||||
}
|
||||
|
||||
// 获取所有分类
|
||||
const loadCategories = async (type = null) => {
|
||||
try {
|
||||
const res = await getCategoryList(type)
|
||||
if (res.success) {
|
||||
categories.value = res.data || []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取分类列表失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 选择分组
|
||||
const handleSelectGroup = (group) => {
|
||||
selectedGroup.value = group
|
||||
form.value = {
|
||||
type: group.sampleType,
|
||||
typeName: getTypeName(group.sampleType),
|
||||
classify: group.sampleClassify
|
||||
}
|
||||
// 加载对应类型的分类列表
|
||||
loadCategories(group.sampleType)
|
||||
showSettingDialog.value = true
|
||||
}
|
||||
|
||||
// 选择分类
|
||||
const selectClassify = (classify) => {
|
||||
form.value.classify = classify
|
||||
}
|
||||
|
||||
// 确认选择交易类型
|
||||
const handleConfirmType = ({ selectedOptions }) => {
|
||||
form.value.type = selectedOptions[0].value
|
||||
form.value.typeName = selectedOptions[0].text
|
||||
showTypePicker.value = false
|
||||
}
|
||||
|
||||
// 新增分类
|
||||
const addNewClassify = async () => {
|
||||
if (!newClassify.value.trim()) {
|
||||
showToast('请输入分类名称')
|
||||
return
|
||||
}
|
||||
|
||||
if (form.value.type === null) {
|
||||
showToast('请先选择交易类型')
|
||||
if (!groupListRef.value) {
|
||||
listLoading.value = false
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const categoryName = newClassify.value.trim()
|
||||
await groupListRef.value.loadData()
|
||||
|
||||
// 调用API创建分类
|
||||
const response = await createCategory({
|
||||
name: categoryName,
|
||||
type: form.value.type
|
||||
})
|
||||
|
||||
if (response.success) {
|
||||
showToast('分类创建成功')
|
||||
// 重新加载分类列表
|
||||
await loadCategories(form.value.type)
|
||||
form.value.classify = categoryName
|
||||
} else {
|
||||
showToast(response.message || '创建分类失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('创建分类出错:', error)
|
||||
showToast('创建分类失败')
|
||||
} finally {
|
||||
newClassify.value = ''
|
||||
showAddClassify.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 清空分类
|
||||
const clearClassify = () => {
|
||||
form.value.classify = ''
|
||||
showToast('已清空分类')
|
||||
}
|
||||
|
||||
// 确认批量更新
|
||||
const handleConfirmUpdate = async () => {
|
||||
try {
|
||||
// 表单验证
|
||||
await formRef.value?.validate()
|
||||
|
||||
// 二次确认
|
||||
await showConfirmDialog({
|
||||
title: '确认批量设置',
|
||||
message: `确定要将「${selectedGroup.value.reason}」的 ${selectedGroup.value.count} 条记录设置为「${form.value.typeName} - ${form.value.classify}」吗？`
|
||||
})
|
||||
|
||||
showLoadingToast({
|
||||
message: '更新中...',
|
||||
forbidClick: true,
|
||||
duration: 0
|
||||
})
|
||||
|
||||
const res = await batchUpdateByReason({
|
||||
reason: selectedGroup.value.reason,
|
||||
type: form.value.type,
|
||||
classify: form.value.classify
|
||||
})
|
||||
|
||||
closeToast()
|
||||
|
||||
if (res.success) {
|
||||
showSuccessToast(res.message || `成功更新 ${res.data} 条记录`)
|
||||
showSettingDialog.value = false
|
||||
resetForm()
|
||||
// 重新加载数据
|
||||
reasonGroups.value = []
|
||||
pageIndex.value = 1
|
||||
finished.value = false
|
||||
listLoading.value = true
|
||||
await loadReasonGroups()
|
||||
// 首次加载时获取统计信息
|
||||
if (!hasData.value) {
|
||||
await loadUnclassifiedCount()
|
||||
listLoading.value = false
|
||||
} else {
|
||||
showToast(res.message || '批量更新失败')
|
||||
}
|
||||
} catch (error) {
|
||||
closeToast()
|
||||
if (error !== 'cancel') {
|
||||
console.error('批量更新失败:', error)
|
||||
showToast(error.message || '批量更新失败')
|
||||
}
|
||||
|
||||
error.value = false
|
||||
} catch (err) {
|
||||
error.value = true
|
||||
} finally {
|
||||
listLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
selectedGroup.value = null
|
||||
form.value = {
|
||||
type: null,
|
||||
typeName: '',
|
||||
classify: ''
|
||||
}
|
||||
formRef.value?.resetValidation()
|
||||
}
|
||||
|
||||
// 返回上一页
|
||||
const handleBack = () => {
|
||||
router.back()
|
||||
}
|
||||
|
||||
// 页面加载
|
||||
onMounted(() => {
|
||||
// onLoad 会自动触发首次加载
|
||||
onMounted(async () => {
|
||||
// 初始加载数据
|
||||
listLoading.value = true
|
||||
await onLoad()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.loading-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.group-title {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.group-info {
|
||||
align-items: center;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.count-text {
|
||||
font-size: 13px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.amount-text {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #ff976a;
|
||||
}
|
||||
|
||||
.unclassified-stat {
|
||||
padding-left: 16px;
|
||||
padding-top: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
opacity: 0.83px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.setting-form {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.classify-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.classify-btn {
|
||||
flex: 0 0 auto;
|
||||
min-width: 70px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
:deep(.van-cell-group--inset) {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
/* 设置页面容器背景色 */
|
||||
:deep(.van-nav-bar) {
|
||||
background: transparent !important;
|
||||
|
||||
@@ -59,19 +59,12 @@
|
||||
/>
|
||||
|
||||
<!-- 记录列表弹窗 -->
|
||||
<van-popup
|
||||
v-model:show="showRecordsList"
|
||||
position="bottom"
|
||||
:style="{ height: '80%' }"
|
||||
round
|
||||
closeable
|
||||
<PopupContainer
|
||||
v-model="showRecordsList"
|
||||
title="交易记录列表"
|
||||
height="80%"
|
||||
>
|
||||
<div class="popup-container">
|
||||
<div class="popup-header-fixed">
|
||||
<h3>交易记录列表</h3>
|
||||
</div>
|
||||
|
||||
<div class="popup-scroll-content" style="background: var(--van-background, #f7f8fa);">
|
||||
<div style="background: var(--van-background, #f7f8fa);">
|
||||
<!-- 批量操作按钮 -->
|
||||
<div class="batch-actions">
|
||||
<van-button
|
||||
@@ -114,9 +107,8 @@
|
||||
:show-delete="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</PopupContainer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -127,6 +119,7 @@ import { showToast, showConfirmDialog } from 'vant'
|
||||
import { nlpAnalysis, batchUpdateClassify } from '@/api/transactionRecord'
|
||||
import TransactionList from '@/components/TransactionList.vue'
|
||||
import TransactionDetail from '@/components/TransactionDetail.vue'
|
||||
import PopupContainer from '@/components/PopupContainer.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const userInput = ref('')
|
||||
|
||||
@@ -11,54 +11,16 @@
|
||||
<!-- 统计信息 -->
|
||||
<div class="stats-info">
|
||||
<span class="stats-label">未分类账单 </span>
|
||||
<span class="stats-value">{{ unclassifiedCount }} 条，本次分类 {{ reasonGroups.length }} 组</span>
|
||||
<span class="stats-value">{{ unclassifiedCount }} 条，共计 {{ totalGroups }} 组</span>
|
||||
</div>
|
||||
|
||||
<!-- 分组列表 -->
|
||||
<van-empty v-if="reasonGroups.length === 0 && !loading" description="暂无未分类账单" />
|
||||
|
||||
<van-cell-group v-else inset>
|
||||
<van-cell
|
||||
v-for="group in reasonGroups"
|
||||
:key="group.reason"
|
||||
clickable
|
||||
>
|
||||
<template #title>
|
||||
<div class="group-header">
|
||||
<van-checkbox
|
||||
:model-value="selectedReasons.has(group.reason)"
|
||||
@click.stop="toggleGroupSelection(group.reason)"
|
||||
/>
|
||||
<div class="group-title">
|
||||
{{ group.reason }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #label>
|
||||
<div class="group-info">
|
||||
<van-tag
|
||||
:type="getTypeColor(group.sampleType)"
|
||||
size="medium"
|
||||
style="margin-right: 8px;"
|
||||
>
|
||||
{{ getTypeName(group.sampleType) }}
|
||||
</van-tag>
|
||||
<van-tag
|
||||
v-if="group.sampleClassify"
|
||||
type="primary"
|
||||
size="medium"
|
||||
style="margin-right: 8px;"
|
||||
>
|
||||
{{ group.sampleClassify }}
|
||||
</van-tag>
|
||||
<span class="count-text">{{ group.count }} 条</span>
|
||||
<span class="amount-text" v-if="group.totalAmount">
|
||||
¥{{ Math.abs(group.totalAmount).toFixed(2) }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
<!-- 分组列表组件 -->
|
||||
<ReasonGroupList
|
||||
ref="groupListRef"
|
||||
:selectable="true"
|
||||
@data-loaded="handleDataLoaded"
|
||||
@data-changed="handleDataChanged"
|
||||
/>
|
||||
|
||||
<!-- 底部安全距离 -->
|
||||
<div style="height: calc(50px + env(safe-area-inset-bottom, 0px))"></div>
|
||||
@@ -69,11 +31,11 @@
|
||||
<van-button
|
||||
type="primary"
|
||||
:loading="classifying"
|
||||
:disabled="selectedReasons.size === 0"
|
||||
:disabled="selectedCount === 0"
|
||||
@click="startClassify"
|
||||
class="action-btn"
|
||||
>
|
||||
{{ classifying ? '分类中...' : `开始分类 (${selectedReasons.size}组)` }}
|
||||
{{ classifying ? '分类中...' : `开始分类 (${selectedCount}组)` }}
|
||||
</van-button>
|
||||
|
||||
<van-button
|
||||
@@ -89,24 +51,56 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { showToast, showLoadingToast, closeToast, showConfirmDialog } from 'vant'
|
||||
import {
|
||||
getUnclassifiedCount,
|
||||
getReasonGroups,
|
||||
smartClassify,
|
||||
batchUpdateClassify
|
||||
} from '@/api/transactionRecord'
|
||||
import ReasonGroupList from '@/components/ReasonGroupList.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const groupListRef = ref(null)
|
||||
const unclassifiedCount = ref(0)
|
||||
const reasonGroups = ref([]) // 改为分组数据
|
||||
const selectedReasons = ref(new Set()) // 选中的分组摘要集合
|
||||
const loading = ref(false)
|
||||
const totalGroups = ref(0)
|
||||
const classifying = ref(false)
|
||||
const hasChanges = ref(false)
|
||||
const classifyBuffer = ref('') // SSE数据缓冲区
|
||||
const classifyBuffer = ref('')
|
||||
|
||||
// 计算已选中的数量
|
||||
const selectedCount = computed(() => {
|
||||
if (!groupListRef.value) return 0
|
||||
return groupListRef.value.getSelectedReasons().size
|
||||
})
|
||||
|
||||
// 加载未分类账单数量
|
||||
const loadUnclassifiedCount = async () => {
|
||||
try {
|
||||
const res = await getUnclassifiedCount()
|
||||
if (res.success) {
|
||||
unclassifiedCount.value = res.data
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取未分类数量失败', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 处理数据加载完成
|
||||
const handleDataLoaded = ({ groups, total }) => {
|
||||
totalGroups.value = total
|
||||
// 默认全选所有分组
|
||||
if (groupListRef.value) {
|
||||
groupListRef.value.selectAll()
|
||||
}
|
||||
}
|
||||
|
||||
// 处理数据变更
|
||||
const handleDataChanged = async () => {
|
||||
await loadUnclassifiedCount()
|
||||
hasChanges.value = false
|
||||
}
|
||||
|
||||
const onClickLeft = () => {
|
||||
if (hasChanges.value) {
|
||||
@@ -121,88 +115,17 @@ const onClickLeft = () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 加载未分类账单数量
|
||||
const loadUnclassifiedCount = async () => {
|
||||
try {
|
||||
const res = await getUnclassifiedCount()
|
||||
if (res.success) {
|
||||
unclassifiedCount.value = res.data
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取未分类数量失败', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 加载分组数据
|
||||
const loadReasonGroups = async () => {
|
||||
showLoadingToast({
|
||||
message: '加载中...',
|
||||
forbidClick: true,
|
||||
duration: 0
|
||||
})
|
||||
|
||||
loading.value = true
|
||||
|
||||
try {
|
||||
// 获取所有未分类的分组，设置较大的pageSize以获取所有数据
|
||||
const res = await getReasonGroups(1, 20)
|
||||
if (res.success) {
|
||||
// 后端已经按数量排序，我们需要计算每个分组的总金额并重新排序
|
||||
// 但是后端DTO没有返回总金额，我们先按数量排序即可
|
||||
reasonGroups.value = res.data || []
|
||||
// 默认全选所有分组
|
||||
selectedReasons.value = new Set(reasonGroups.value.map(g => g.reason))
|
||||
} else {
|
||||
showToast(res.message || '加载失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载分组失败', error)
|
||||
showToast('加载失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
closeToast()
|
||||
}
|
||||
}
|
||||
|
||||
// 切换分组选择状态
|
||||
const toggleGroupSelection = (reason) => {
|
||||
if (selectedReasons.value.has(reason)) {
|
||||
selectedReasons.value.delete(reason)
|
||||
} else {
|
||||
selectedReasons.value.add(reason)
|
||||
}
|
||||
// 触发响应式更新
|
||||
selectedReasons.value = new Set(selectedReasons.value)
|
||||
}
|
||||
|
||||
// 获取类型名称
|
||||
const getTypeName = (type) => {
|
||||
const typeMap = {
|
||||
0: '支出',
|
||||
1: '收入',
|
||||
2: '不计收支'
|
||||
}
|
||||
return typeMap[type] || '未知'
|
||||
}
|
||||
|
||||
// 获取类型对应的标签颜色
|
||||
const getTypeColor = (type) => {
|
||||
const colorMap = {
|
||||
0: 'danger', // 支出 - 红色
|
||||
1: 'success', // 收入 - 绿色
|
||||
2: 'default' // 不计收支 - 灰色
|
||||
}
|
||||
return colorMap[type] || 'default'
|
||||
}
|
||||
|
||||
// 开始智能分类
|
||||
const startClassify = async () => {
|
||||
if (!groupListRef.value) return
|
||||
|
||||
// 获取所有选中分组
|
||||
const selectedGroups = groupListRef.value.getList(true)
|
||||
|
||||
// 获取所有选中分组的账单ID
|
||||
const idsToClassify = []
|
||||
for (const group of reasonGroups.value) {
|
||||
if (selectedReasons.value.has(group.reason)) {
|
||||
idsToClassify.push(...group.transactionIds)
|
||||
}
|
||||
for (const group of selectedGroups) {
|
||||
idsToClassify.push(...group.transactionIds)
|
||||
}
|
||||
|
||||
if (idsToClassify.length === 0) {
|
||||
@@ -217,10 +140,10 @@ const startClassify = async () => {
|
||||
})
|
||||
|
||||
classifying.value = true
|
||||
classifyBuffer.value = '' // 重置缓冲区
|
||||
classifyBuffer.value = ''
|
||||
|
||||
// 用于存储分类结果的临时对象
|
||||
const classifyResults = new Map() // id -> {classify, type}
|
||||
const classifyResults = new Map()
|
||||
|
||||
try {
|
||||
const response = await smartClassify(idsToClassify)
|
||||
@@ -270,10 +193,8 @@ const startClassify = async () => {
|
||||
const handleSSEEvent = (eventType, data, classifyResults) => {
|
||||
if (eventType === 'data') {
|
||||
try {
|
||||
// 累积AI输出的JSON片段
|
||||
classifyBuffer.value += data
|
||||
|
||||
// 尝试查找并提取完整的JSON对象
|
||||
let startIndex = 0
|
||||
while (startIndex < classifyBuffer.value.length) {
|
||||
const openBrace = classifyBuffer.value.indexOf('{', startIndex)
|
||||
@@ -282,7 +203,6 @@ const handleSSEEvent = (eventType, data, classifyResults) => {
|
||||
break
|
||||
}
|
||||
|
||||
// 尝试找到匹配的闭合括号
|
||||
let braceCount = 0
|
||||
let closeBrace = -1
|
||||
for (let i = openBrace; i < classifyBuffer.value.length; i++) {
|
||||
@@ -302,15 +222,15 @@ const handleSSEEvent = (eventType, data, classifyResults) => {
|
||||
try {
|
||||
const result = JSON.parse(jsonStr)
|
||||
|
||||
if (result.id) {
|
||||
// 存储分类结果
|
||||
if (result.id && groupListRef.value) {
|
||||
classifyResults.set(result.id, {
|
||||
classify: result.classify || '',
|
||||
type: result.type !== undefined ? result.type : null
|
||||
})
|
||||
|
||||
// 更新对应分组的显示状态
|
||||
for (const group of reasonGroups.value) {
|
||||
// 更新组件内的分组显示状态
|
||||
const groups = groupListRef.value.getList()
|
||||
for (const group of groups) {
|
||||
if (group.transactionIds.includes(result.id)) {
|
||||
group.sampleClassify = result.classify || ''
|
||||
if (result.type !== undefined && result.type !== null) {
|
||||
@@ -320,6 +240,8 @@ const handleSSEEvent = (eventType, data, classifyResults) => {
|
||||
break
|
||||
}
|
||||
}
|
||||
// 更新回组件
|
||||
groupListRef.value.setList(groups)
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('JSON解析失败:', e)
|
||||
@@ -347,9 +269,13 @@ const handleSSEEvent = (eventType, data, classifyResults) => {
|
||||
|
||||
// 保存分类
|
||||
const saveClassifications = async () => {
|
||||
if (!groupListRef.value) return
|
||||
|
||||
// 收集所有已分类的账单
|
||||
const groups = groupListRef.value.getList()
|
||||
const itemsToUpdate = []
|
||||
for (const group of reasonGroups.value) {
|
||||
|
||||
for (const group of groups) {
|
||||
if (group.sampleClassify) {
|
||||
// 为该分组的所有账单添加分类
|
||||
for (const id of group.transactionIds) {
|
||||
@@ -380,7 +306,7 @@ const saveClassifications = async () => {
|
||||
hasChanges.value = false
|
||||
// 重新加载数据
|
||||
await loadUnclassifiedCount()
|
||||
await loadReasonGroups()
|
||||
await groupListRef.value.refresh()
|
||||
} else {
|
||||
showToast(res.message || '保存失败')
|
||||
}
|
||||
@@ -392,16 +318,19 @@ const saveClassifications = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadUnclassifiedCount()
|
||||
loadReasonGroups()
|
||||
onMounted(async () => {
|
||||
await loadUnclassifiedCount()
|
||||
// 触发组件加载数据
|
||||
if (groupListRef.value) {
|
||||
await groupListRef.value.loadData()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 统计信息 */
|
||||
.stats-info {
|
||||
padding: 12px 16px;
|
||||
padding: 12px 12px 0 16px;
|
||||
font-size: 14px;
|
||||
color: #969799;
|
||||
}
|
||||
@@ -410,39 +339,6 @@ onMounted(() => {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 分组头部 */
|
||||
.group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.group-title {
|
||||
flex: 1;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.group-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.count-text {
|
||||
font-size: 13px;
|
||||
color: #969799;
|
||||
}
|
||||
|
||||
.amount-text {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #ff976a;
|
||||
}
|
||||
|
||||
/* 底部操作栏 */
|
||||
.action-bar {
|
||||
position: fixed;
|
||||
|
||||
@@ -118,28 +118,19 @@
|
||||
</van-popup>
|
||||
|
||||
<!-- 账单列表弹出层 -->
|
||||
<van-popup
|
||||
v-model:show="transactionListVisible"
|
||||
position="bottom"
|
||||
:style="{ height: '70%' }"
|
||||
round
|
||||
closeable
|
||||
<PopupContainer
|
||||
v-model="transactionListVisible"
|
||||
title="关联账单列表"
|
||||
height="70%"
|
||||
>
|
||||
<div class="popup-container">
|
||||
<div class="popup-header-fixed">
|
||||
<h3>关联账单列表</h3>
|
||||
</div>
|
||||
<div class="popup-scroll-content">
|
||||
<TransactionList
|
||||
:transactions="transactionList"
|
||||
:loading="false"
|
||||
:finished="true"
|
||||
:show-delete="false"
|
||||
@click="handleTransactionClick"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
<TransactionList
|
||||
:transactions="transactionList"
|
||||
:loading="false"
|
||||
:finished="true"
|
||||
:show-delete="false"
|
||||
@click="handleTransactionClick"
|
||||
/>
|
||||
</PopupContainer>
|
||||
|
||||
<!-- 账单详情编辑弹出层 -->
|
||||
<TransactionDetail
|
||||
@@ -158,6 +149,7 @@ import { getEmailList, getEmailDetail, deleteEmail, refreshTransactionRecords, s
|
||||
import { getTransactionDetail } from '@/api/transactionRecord'
|
||||
import TransactionList from '@/components/TransactionList.vue'
|
||||
import TransactionDetail from '@/components/TransactionDetail.vue'
|
||||
import PopupContainer from '@/components/PopupContainer.vue'
|
||||
|
||||
const emailList = ref([])
|
||||
const loading = ref(false)
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="page-container-flex message-page">
|
||||
<div class="page-container-flex">
|
||||
<van-nav-bar title="消息中心">
|
||||
<template #right>
|
||||
<van-icon name="passed" size="18" @click="handleMarkAllRead" />
|
||||
@@ -42,23 +42,17 @@
|
||||
</van-pull-refresh>
|
||||
|
||||
<!-- 详情弹出层 -->
|
||||
<van-popup
|
||||
v-model:show="detailVisible"
|
||||
position="bottom"
|
||||
:style="{ height: '50%' }"
|
||||
round
|
||||
closeable
|
||||
<PopupContainer
|
||||
v-model="detailVisible"
|
||||
:title="currentMessage.title"
|
||||
:subtitle="currentMessage.createTime"
|
||||
height="50%"
|
||||
:closeable="true"
|
||||
>
|
||||
<div class="popup-container">
|
||||
<div class="popup-header-fixed">
|
||||
<h3>{{ currentMessage.title }}</h3>
|
||||
<p class="detail-time">{{ currentMessage.createTime }}</p>
|
||||
</div>
|
||||
<div class="popup-scroll-content detail-content">
|
||||
{{ currentMessage.content }}
|
||||
</div>
|
||||
<div class="detail-content">
|
||||
{{ currentMessage.content }}
|
||||
</div>
|
||||
</van-popup>
|
||||
</PopupContainer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -67,6 +61,7 @@ import { ref, onMounted } from 'vue';
|
||||
import { showToast, showDialog } from 'vant';
|
||||
import { getMessageList, markAsRead, deleteMessage, markAllAsRead } from '@/api/message';
|
||||
import { useMessageStore } from '@/stores/message';
|
||||
import PopupContainer from '@/components/PopupContainer.vue';
|
||||
|
||||
const messageStore = useMessageStore();
|
||||
const list = ref([]);
|
||||
@@ -204,16 +199,11 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.message-page {
|
||||
background-color: var(--van-background-2);
|
||||
}
|
||||
|
||||
.message-card {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
background-color: var(--van-background);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -277,4 +267,15 @@ onMounted(() => {
|
||||
color: var(--van-text-color);
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
:deep(.van-pull-refresh) {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* 设置页面容器背景色 */
|
||||
:deep(.van-nav-bar) {
|
||||
background: transparent !important;
|
||||
}
|
||||
</style>
|
||||
@@ -85,20 +85,12 @@
|
||||
</div>
|
||||
|
||||
<!-- 新增/编辑弹窗 -->
|
||||
<van-popup
|
||||
v-model:show="dialogVisible"
|
||||
position="bottom"
|
||||
:style="{ height: '85%' }"
|
||||
round
|
||||
closeable
|
||||
<PopupContainer
|
||||
v-model="dialogVisible"
|
||||
:title="isEdit ? '编辑周期账单' : '新增周期账单'"
|
||||
height="85%"
|
||||
>
|
||||
<div class="popup-container">
|
||||
<div class="popup-header-fixed">
|
||||
<h3>{{ isEdit ? '编辑周期账单' : '新增周期账单' }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="popup-scroll-content">
|
||||
<van-form @submit="onSubmit">
|
||||
<van-form @submit="onSubmit">
|
||||
<van-cell-group inset title="周期设置">
|
||||
<van-field
|
||||
v-model="form.periodicTypeText"
|
||||
@@ -235,9 +227,7 @@
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</PopupContainer>
|
||||
|
||||
<!-- 交易类型选择器 -->
|
||||
<van-popup v-model:show="showTypePicker" position="bottom" round>
|
||||
@@ -299,6 +289,7 @@ import {
|
||||
togglePeriodicEnabled
|
||||
} from '@/api/transactionPeriodic'
|
||||
import { getCategoryList, createCategory } from '@/api/transactionCategory'
|
||||
import PopupContainer from '@/components/PopupContainer.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const navTitle = ref('周期账单')
|
||||
|
||||
@@ -277,40 +277,31 @@
|
||||
</van-popup>
|
||||
|
||||
<!-- 分类账单列表弹出层 -->
|
||||
<van-popup
|
||||
v-model:show="billListVisible"
|
||||
position="bottom"
|
||||
:style="{ height: '85%' }"
|
||||
round
|
||||
closeable
|
||||
<PopupContainer
|
||||
v-model="billListVisible"
|
||||
:title="selectedCategoryTitle"
|
||||
:subtitle="categoryBillsTotal ? `共 ${categoryBillsTotal} 笔交易` : ''"
|
||||
height="85%"
|
||||
>
|
||||
<div class="popup-container">
|
||||
<div class="popup-header-fixed">
|
||||
<h3 class="category-title">{{ selectedCategoryTitle }}</h3>
|
||||
<div class="header-stats">
|
||||
<p v-if="categoryBillsTotal">共 {{ categoryBillsTotal }} 笔交易</p>
|
||||
<SmartClassifyButton
|
||||
ref="smartClassifyButtonRef"
|
||||
v-if="isUnclassified"
|
||||
:transactions="categoryBills"
|
||||
:onBeforeClassify="beforeSmartClassify"
|
||||
@save="onSmartClassifySave"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="popup-scroll-content">
|
||||
<TransactionList
|
||||
:transactions="categoryBills"
|
||||
:loading="billListLoading"
|
||||
:finished="billListFinished"
|
||||
:show-delete="false"
|
||||
@load="loadCategoryBills"
|
||||
@click="viewBillDetail"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
<template #header-actions>
|
||||
<SmartClassifyButton
|
||||
ref="smartClassifyButtonRef"
|
||||
v-if="isUnclassified"
|
||||
:transactions="categoryBills"
|
||||
:onBeforeClassify="beforeSmartClassify"
|
||||
@save="onSmartClassifySave"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<TransactionList
|
||||
:transactions="categoryBills"
|
||||
:loading="billListLoading"
|
||||
:finished="billListFinished"
|
||||
:show-delete="false"
|
||||
@load="loadCategoryBills"
|
||||
@click="viewBillDetail"
|
||||
/>
|
||||
</PopupContainer>
|
||||
|
||||
<!-- 交易详情编辑组件 -->
|
||||
<TransactionDetail
|
||||
@@ -330,6 +321,7 @@ import { getTransactionList, getTransactionDetail } from '@/api/transactionRecor
|
||||
import TransactionList from '@/components/TransactionList.vue'
|
||||
import TransactionDetail from '@/components/TransactionDetail.vue'
|
||||
import SmartClassifyButton from '@/components/SmartClassifyButton.vue'
|
||||
import PopupContainer from '@/components/PopupContainer.vue'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
@@ -1147,44 +1139,4 @@ onActivated(() => {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* 弹出层样式 */
|
||||
.popup-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.popup-header-fixed {
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.category-title {
|
||||
text-align: center;
|
||||
margin: 0 0 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.header-stats {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.header-stats p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: var(--van-text-color-2);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.popup-scroll-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -29,83 +29,73 @@
|
||||
/>
|
||||
|
||||
<!-- 新增交易记录弹出层 -->
|
||||
<van-popup
|
||||
v-model:show="addDialogVisible"
|
||||
position="bottom"
|
||||
:style="{ height: '85%' }"
|
||||
round
|
||||
closeable
|
||||
<PopupContainer
|
||||
v-model="addDialogVisible"
|
||||
title="手动录账单"
|
||||
height="85%"
|
||||
>
|
||||
<div class="popup-container">
|
||||
<div class="popup-header-fixed">
|
||||
<h3>手动录账单</h3>
|
||||
</div>
|
||||
|
||||
<div class="popup-scroll-content">
|
||||
<van-form @submit="onAddSubmit">
|
||||
<van-cell-group inset title="基本信息">
|
||||
<van-field
|
||||
v-model="addForm.occurredAt"
|
||||
is-link
|
||||
readonly
|
||||
name="occurredAt"
|
||||
label="交易时间"
|
||||
placeholder="请选择交易时间"
|
||||
@click="showDateTimePicker = true"
|
||||
:rules="[{ required: true, message: '请选择交易时间' }]"
|
||||
/>
|
||||
</van-cell-group>
|
||||
<van-form @submit="onAddSubmit">
|
||||
<van-cell-group inset title="基本信息">
|
||||
<van-field
|
||||
v-model="addForm.occurredAt"
|
||||
is-link
|
||||
readonly
|
||||
name="occurredAt"
|
||||
label="交易时间"
|
||||
placeholder="请选择交易时间"
|
||||
@click="showDateTimePicker = true"
|
||||
:rules="[{ required: true, message: '请选择交易时间' }]"
|
||||
/>
|
||||
</van-cell-group>
|
||||
|
||||
<van-cell-group inset title="交易明细">
|
||||
<van-field
|
||||
v-model="addForm.reason"
|
||||
name="reason"
|
||||
label="交易摘要"
|
||||
placeholder="请输入交易摘要"
|
||||
type="textarea"
|
||||
rows="2"
|
||||
autosize
|
||||
maxlength="200"
|
||||
show-word-limit
|
||||
/>
|
||||
<van-field
|
||||
v-model="addForm.amount"
|
||||
name="amount"
|
||||
label="交易金额"
|
||||
placeholder="请输入交易金额"
|
||||
type="number"
|
||||
:rules="[{ required: true, message: '请输入交易金额' }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="addForm.typeText"
|
||||
is-link
|
||||
readonly
|
||||
name="type"
|
||||
label="交易类型"
|
||||
placeholder="请选择交易类型"
|
||||
@click="showAddTypePicker = true"
|
||||
:rules="[{ required: true, message: '请选择交易类型' }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="addForm.classify"
|
||||
is-link
|
||||
readonly
|
||||
name="classify"
|
||||
label="交易分类"
|
||||
placeholder="请选择或输入交易分类"
|
||||
@click="showAddClassifyPicker = true"
|
||||
/>
|
||||
</van-cell-group>
|
||||
<van-cell-group inset title="交易明细">
|
||||
<van-field
|
||||
v-model="addForm.reason"
|
||||
name="reason"
|
||||
label="交易摘要"
|
||||
placeholder="请输入交易摘要"
|
||||
type="textarea"
|
||||
rows="2"
|
||||
autosize
|
||||
maxlength="200"
|
||||
show-word-limit
|
||||
/>
|
||||
<van-field
|
||||
v-model="addForm.amount"
|
||||
name="amount"
|
||||
label="交易金额"
|
||||
placeholder="请输入交易金额"
|
||||
type="number"
|
||||
:rules="[{ required: true, message: '请输入交易金额' }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="addForm.typeText"
|
||||
is-link
|
||||
readonly
|
||||
name="type"
|
||||
label="交易类型"
|
||||
placeholder="请选择交易类型"
|
||||
@click="showAddTypePicker = true"
|
||||
:rules="[{ required: true, message: '请选择交易类型' }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="addForm.classify"
|
||||
is-link
|
||||
readonly
|
||||
name="classify"
|
||||
label="交易分类"
|
||||
placeholder="请选择或输入交易分类"
|
||||
@click="showAddClassifyPicker = true"
|
||||
/>
|
||||
</van-cell-group>
|
||||
|
||||
<div style="margin: 16px;">
|
||||
<van-button round block type="primary" native-type="submit" :loading="addSubmitting">
|
||||
确认添加
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
<div style="margin: 16px;">
|
||||
<van-button round block type="primary" native-type="submit" :loading="addSubmitting">
|
||||
确认添加
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</van-form>
|
||||
</PopupContainer>
|
||||
|
||||
<!-- 新增交易 - 日期时间选择器 -->
|
||||
<van-popup v-model:show="showDateTimePicker" position="bottom" round>
|
||||
@@ -182,6 +172,7 @@ import {
|
||||
import { getCategoryList, createCategory } from '@/api/transactionCategory'
|
||||
import TransactionList from '@/components/TransactionList.vue'
|
||||
import TransactionDetail from '@/components/TransactionDetail.vue'
|
||||
import PopupContainer from '@/components/PopupContainer.vue'
|
||||
|
||||
const transactionList = ref([])
|
||||
const loading = ref(false)
|
||||
|
||||
Reference in New Issue
Block a user