功能添加
This commit is contained in:
孙诚
@@ -1,190 +1,211 @@
|
||||
<template>
|
||||
<div class="calendar-container">
|
||||
<van-calendar title="日历"
|
||||
:poppable="false"
|
||||
:show-confirm="false"
|
||||
:formatter="formatterCalendar"
|
||||
<van-calendar
|
||||
title="日历"
|
||||
:poppable="false"
|
||||
:show-confirm="false"
|
||||
:formatter="formatterCalendar"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
@month-show="onMonthShow"
|
||||
@select="onDateSelect" />
|
||||
:max-date="maxDate"
|
||||
@month-show="onMonthShow"
|
||||
@select="onDateSelect"
|
||||
/>
|
||||
|
||||
<!-- 日期交易列表弹出层 -->
|
||||
<van-popup v-model:show="listVisible" position="bottom" :style="{ height: '85%' }" round closeable>
|
||||
<van-popup
|
||||
v-model:show="listVisible"
|
||||
position="bottom"
|
||||
:style="{ height: '85%' }"
|
||||
round
|
||||
closeable
|
||||
>
|
||||
<div class="date-transactions">
|
||||
<div class="popup-header">
|
||||
<h3>{{ selectedDateText }}</h3>
|
||||
<p v-if="dateTransactions.length">共 {{ dateTransactions.length }} 笔交易</p>
|
||||
</div>
|
||||
|
||||
<TransactionList :transactions="dateTransactions" :loading="listLoading" :finished="true" :show-delete="false"
|
||||
@click="viewDetail" />
|
||||
<TransactionList
|
||||
:transactions="dateTransactions"
|
||||
:loading="listLoading"
|
||||
:finished="true"
|
||||
:show-delete="false"
|
||||
@click="viewDetail"
|
||||
/>
|
||||
</div>
|
||||
</van-popup>
|
||||
|
||||
<!-- 交易详情组件 -->
|
||||
<TransactionDetail v-model:show="detailVisible" :transaction="currentTransaction" @save="onDetailSave" />
|
||||
<TransactionDetail
|
||||
v-model:show="detailVisible"
|
||||
:transaction="currentTransaction"
|
||||
@save="onDetailSave"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, nextTick } from 'vue'
|
||||
import { showToast } from 'vant'
|
||||
import request from '@/api/request'
|
||||
import { getTransactionDetail, getTransactionsByDate } from '@/api/transactionRecord'
|
||||
import TransactionList from '@/components/TransactionList.vue'
|
||||
import TransactionDetail from '@/components/TransactionDetail.vue'
|
||||
import { ref, onMounted, nextTick } from "vue";
|
||||
import { showToast } from "vant";
|
||||
import request from "@/api/request";
|
||||
import { getTransactionDetail, getTransactionsByDate } from "@/api/transactionRecord";
|
||||
import TransactionList from "@/components/TransactionList.vue";
|
||||
import TransactionDetail from "@/components/TransactionDetail.vue";
|
||||
|
||||
const dailyStatistics = ref({})
|
||||
const listVisible = ref(false)
|
||||
const detailVisible = ref(false)
|
||||
const dateTransactions = ref([])
|
||||
const currentTransaction = ref(null)
|
||||
const listLoading = ref(false)
|
||||
const selectedDate = ref(null)
|
||||
const selectedDateText = ref('')
|
||||
const dailyStatistics = ref({});
|
||||
const listVisible = ref(false);
|
||||
const detailVisible = ref(false);
|
||||
const dateTransactions = ref([]);
|
||||
const currentTransaction = ref(null);
|
||||
const listLoading = ref(false);
|
||||
const selectedDate = ref(null);
|
||||
const selectedDateText = ref("");
|
||||
|
||||
// 设置日历可选范围（例如：过去2年到未来1年）
|
||||
const minDate = new Date(new Date().getFullYear() - 2, 0, 1) // 2年前的1月1日
|
||||
const maxDate = new Date(new Date().getFullYear() + 1, 11, 31) // 明年12月31日
|
||||
const minDate = new Date(new Date().getFullYear() - 2, 0, 1); // 2年前的1月1日
|
||||
const maxDate = new Date(new Date().getFullYear() + 1, 11, 31); // 明年12月31日
|
||||
|
||||
onMounted(async () => {
|
||||
await nextTick()
|
||||
await nextTick();
|
||||
setTimeout(() => {
|
||||
// 计算页面高度，滚动3/4高度以显示更多日期
|
||||
const height = document.querySelector('.calendar-container').clientHeight * 0.45
|
||||
document
|
||||
.querySelector('.van-calendar__body')
|
||||
.scrollBy({
|
||||
top: -height,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
const height = document.querySelector(".calendar-container").clientHeight * 0.45;
|
||||
document.querySelector(".van-calendar__body").scrollBy({
|
||||
top: -height,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}, 300);
|
||||
})
|
||||
});
|
||||
|
||||
// 获取日历统计数据
|
||||
const fetchDailyStatistics = async (year, month) => {
|
||||
try {
|
||||
const response = await request.get('/TransactionRecord/GetDailyStatistics', {
|
||||
params: { year, month }
|
||||
})
|
||||
const response = await request.get("/TransactionRecord/GetDailyStatistics", {
|
||||
params: { year, month },
|
||||
});
|
||||
if (response.success && response.data) {
|
||||
// 将数组转换为对象，key为日期
|
||||
const statsMap = {}
|
||||
response.data.forEach(item => {
|
||||
const statsMap = {};
|
||||
response.data.forEach((item) => {
|
||||
statsMap[item.date] = {
|
||||
count: item.count,
|
||||
amount: item.amount
|
||||
}
|
||||
})
|
||||
amount: item.amount,
|
||||
};
|
||||
});
|
||||
dailyStatistics.value = {
|
||||
...dailyStatistics.value,
|
||||
...statsMap
|
||||
}
|
||||
...statsMap,
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取日历统计数据失败:', error)
|
||||
console.error("获取日历统计数据失败:", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 获取指定日期的交易列表
|
||||
const fetchDateTransactions = async (date) => {
|
||||
try {
|
||||
listLoading.value = true
|
||||
const dateStr = date.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-')
|
||||
listLoading.value = true;
|
||||
const dateStr = date
|
||||
.toLocaleString("zh-CN", { year: "numeric", month: "2-digit", day: "2-digit" })
|
||||
.replace(/\//g, "-");
|
||||
|
||||
const response = await getTransactionsByDate(dateStr)
|
||||
const response = await getTransactionsByDate(dateStr);
|
||||
|
||||
if (response.success && response.data) {
|
||||
dateTransactions.value = response.data
|
||||
// 根据金额从大到小排序
|
||||
dateTransactions.value = response
|
||||
.data
|
||||
.sort((a, b) => b.amount - a.amount);
|
||||
} else {
|
||||
dateTransactions.value = []
|
||||
showToast(response.message || '获取交易列表失败')
|
||||
dateTransactions.value = [];
|
||||
showToast(response.message || "获取交易列表失败");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取日期交易列表失败:', error)
|
||||
dateTransactions.value = []
|
||||
showToast('获取交易列表失败')
|
||||
console.error("获取日期交易列表失败:", error);
|
||||
dateTransactions.value = [];
|
||||
showToast("获取交易列表失败");
|
||||
} finally {
|
||||
listLoading.value = false
|
||||
listLoading.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 当月份显示时触发
|
||||
const onMonthShow = ({ date }) => {
|
||||
const year = date.getFullYear()
|
||||
const month = date.getMonth() + 1
|
||||
fetchDailyStatistics(year, month)
|
||||
}
|
||||
const year = date.getFullYear();
|
||||
const month = date.getMonth() + 1;
|
||||
fetchDailyStatistics(year, month);
|
||||
};
|
||||
|
||||
// 日期选择事件
|
||||
const onDateSelect = (date) => {
|
||||
selectedDate.value = date
|
||||
selectedDateText.value = formatSelectedDate(date)
|
||||
fetchDateTransactions(date)
|
||||
listVisible.value = true
|
||||
}
|
||||
selectedDate.value = date;
|
||||
selectedDateText.value = formatSelectedDate(date);
|
||||
fetchDateTransactions(date);
|
||||
listVisible.value = true;
|
||||
};
|
||||
|
||||
// 格式化选中的日期
|
||||
const formatSelectedDate = (date) => {
|
||||
return date.toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
weekday: 'long'
|
||||
})
|
||||
}
|
||||
return date.toLocaleDateString("zh-CN", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
weekday: "long",
|
||||
});
|
||||
};
|
||||
|
||||
// 查看详情
|
||||
const viewDetail = async (transaction) => {
|
||||
try {
|
||||
const response = await getTransactionDetail(transaction.id)
|
||||
const response = await getTransactionDetail(transaction.id);
|
||||
if (response.success) {
|
||||
currentTransaction.value = response.data
|
||||
detailVisible.value = true
|
||||
currentTransaction.value = response.data;
|
||||
detailVisible.value = true;
|
||||
} else {
|
||||
showToast(response.message || '获取详情失败')
|
||||
showToast(response.message || "获取详情失败");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取详情出错:', error)
|
||||
showToast('获取详情失败')
|
||||
console.error("获取详情出错:", error);
|
||||
showToast("获取详情失败");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 详情保存后的回调
|
||||
const onDetailSave = () => {
|
||||
// 重新加载当前日期的交易列表
|
||||
if (selectedDate.value) {
|
||||
fetchDateTransactions(selectedDate.value)
|
||||
fetchDateTransactions(selectedDate.value);
|
||||
}
|
||||
|
||||
// 重新加载当前月份的统计数据
|
||||
const now = selectedDate.value || new Date()
|
||||
fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
|
||||
}
|
||||
const now = selectedDate.value || new Date();
|
||||
fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1);
|
||||
};
|
||||
|
||||
const formatterCalendar = (day) => {
|
||||
const dayCopy = { ...day };
|
||||
if (dayCopy.date.toDateString() === new Date().toDateString()) {
|
||||
dayCopy.text = '今天';
|
||||
dayCopy.text = "今天";
|
||||
}
|
||||
|
||||
// 格式化日期为 yyyy-MM-dd
|
||||
const dateKey = dayCopy.date.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-');
|
||||
const stats = dailyStatistics.value[dateKey]
|
||||
const dateKey = dayCopy.date
|
||||
.toLocaleString("zh-CN", { year: "numeric", month: "2-digit", day: "2-digit" })
|
||||
.replace(/\//g, "-");
|
||||
const stats = dailyStatistics.value[dateKey];
|
||||
|
||||
if (stats) {
|
||||
dayCopy.topInfo = `${stats.count}笔` // 展示消费笔数
|
||||
dayCopy.bottomInfo = `${stats.amount.toFixed(1)}元` // 展示消费金额
|
||||
dayCopy.topInfo = `${stats.count}笔`; // 展示消费笔数
|
||||
dayCopy.bottomInfo = `${stats.amount.toFixed(1)}元`; // 展示消费金额
|
||||
}
|
||||
|
||||
return dayCopy;
|
||||
};
|
||||
|
||||
// 初始加载当前月份数据
|
||||
const now = new Date()
|
||||
fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
|
||||
|
||||
const now = new Date();
|
||||
fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -238,4 +259,4 @@ fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
|
||||
font-size: 14px;
|
||||
color: #969799;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
515
Web/src/views/ClassificationBatch.vue
Normal file
515
Web/src/views/ClassificationBatch.vue
Normal file
@@ -0,0 +1,515 @@
|
||||
<template>
|
||||
<div style="padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));">
|
||||
<van-nav-bar
|
||||
title="批量分类"
|
||||
left-text="返回"
|
||||
left-arrow
|
||||
@click-left="handleBack"
|
||||
placeholder
|
||||
/>
|
||||
|
||||
<!-- 未分类账单统计 -->
|
||||
<div class="unclassified-stat">
|
||||
<span>未分类账单数: {{ unclassifiedCount }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 分组列表 -->
|
||||
<div>
|
||||
<van-empty v-if="reasonGroups.length === 0 && !listLoading && finished" description="暂无数据" />
|
||||
|
||||
<van-list
|
||||
v-model:loading="listLoading"
|
||||
v-model:error="error"
|
||||
:finished="finished"
|
||||
finished-text="没有更多了"
|
||||
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>
|
||||
</div>
|
||||
</template>
|
||||
<template #right-icon>
|
||||
<van-icon name="arrow" />
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, watch } 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'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 交易类型选项
|
||||
const typeOptions = [
|
||||
{ text: '支出', value: 0 },
|
||||
{ text: '收入', value: 1 },
|
||||
{ text: '不计收支', value: 2 }
|
||||
]
|
||||
|
||||
// 数据状态
|
||||
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 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 () => {
|
||||
try {
|
||||
const res = await getUnclassifiedCount()
|
||||
if (res.success) {
|
||||
unclassifiedCount.value = res.data || 0
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取未分类账单数量失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 加载更多
|
||||
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('请先选择交易类型')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const categoryName = newClassify.value.trim()
|
||||
|
||||
// 调用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()
|
||||
await loadUnclassifiedCount()
|
||||
listLoading.value = false
|
||||
} else {
|
||||
showToast(res.message || '批量更新失败')
|
||||
}
|
||||
} catch (error) {
|
||||
closeToast()
|
||||
if (error !== 'cancel') {
|
||||
console.error('批量更新失败:', error)
|
||||
showToast(error.message || '批量更新失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
selectedGroup.value = null
|
||||
form.value = {
|
||||
type: null,
|
||||
typeName: '',
|
||||
classify: ''
|
||||
}
|
||||
formRef.value?.resetValidation()
|
||||
}
|
||||
|
||||
// 返回上一页
|
||||
const handleBack = () => {
|
||||
router.back()
|
||||
}
|
||||
|
||||
// 页面加载
|
||||
onMounted(() => {
|
||||
// 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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
338
Web/src/views/ClassificationEdit.vue
Normal file
338
Web/src/views/ClassificationEdit.vue
Normal file
@@ -0,0 +1,338 @@
|
||||
<template>
|
||||
<div
|
||||
style="padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));"
|
||||
>
|
||||
<van-nav-bar
|
||||
:title="navTitle"
|
||||
left-text="返回"
|
||||
left-arrow
|
||||
@click-left="handleBack"
|
||||
placeholder
|
||||
/>
|
||||
|
||||
<!-- 第一层：选择交易类型 -->
|
||||
<div v-if="currentLevel === 0" class="level-container">
|
||||
<van-cell-group inset>
|
||||
<van-cell
|
||||
v-for="type in typeOptions"
|
||||
:key="type.value"
|
||||
:title="type.label"
|
||||
is-link
|
||||
@click="handleSelectType(type.value)"
|
||||
/>
|
||||
</van-cell-group>
|
||||
</div>
|
||||
|
||||
<!-- 第二层：分类列表 -->
|
||||
<div v-else class="level-container">
|
||||
<!-- 面包屑导航 -->
|
||||
<div class="breadcrumb">
|
||||
<van-tag
|
||||
type="primary"
|
||||
closeable
|
||||
@close="handleBackToRoot"
|
||||
style="margin-left: 16px;"
|
||||
>
|
||||
{{ currentTypeName }}
|
||||
</van-tag>
|
||||
</div>
|
||||
|
||||
<!-- 分类列表 -->
|
||||
<van-empty v-if="categories.length === 0" description="暂无分类" />
|
||||
|
||||
<van-cell-group v-else inset>
|
||||
<van-swipe-cell v-for="category in categories" :key="category.id">
|
||||
<van-cell :title="category.name" />
|
||||
<template #right>
|
||||
<van-button
|
||||
square
|
||||
type="danger"
|
||||
text="删除"
|
||||
@click="handleDelete(category)"
|
||||
/>
|
||||
</template>
|
||||
</van-swipe-cell>
|
||||
</van-cell-group>
|
||||
|
||||
<!-- 新增分类按钮 -->
|
||||
<div class="add-button-container">
|
||||
<van-button
|
||||
type="primary"
|
||||
size="large"
|
||||
block
|
||||
@click="handleAddCategory"
|
||||
>
|
||||
新增分类
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新增分类对话框 -->
|
||||
<van-dialog
|
||||
v-model:show="showAddDialog"
|
||||
title="新增分类"
|
||||
@confirm="handleConfirmAdd"
|
||||
@cancel="resetAddForm"
|
||||
>
|
||||
<van-form ref="addFormRef">
|
||||
<van-field
|
||||
v-model="addForm.name"
|
||||
name="name"
|
||||
label="分类名称"
|
||||
placeholder="请输入分类名称"
|
||||
:rules="[{ required: true, message: '请输入分类名称' }]"
|
||||
/>
|
||||
</van-form>
|
||||
</van-dialog>
|
||||
|
||||
<!-- 删除确认对话框 -->
|
||||
<van-dialog
|
||||
v-model:show="showDeleteConfirm"
|
||||
title="删除分类"
|
||||
message="删除后无法恢复，确定要删除吗？"
|
||||
@confirm="handleConfirmDelete"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
showSuccessToast,
|
||||
showToast,
|
||||
showLoadingToast,
|
||||
closeToast
|
||||
} from 'vant'
|
||||
import {
|
||||
getCategoryList,
|
||||
createCategory,
|
||||
deleteCategory
|
||||
} from '@/api/transactionCategory'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 交易类型选项
|
||||
const typeOptions = [
|
||||
{ value: 0, label: '支出' },
|
||||
{ value: 1, label: '收入' },
|
||||
{ value: 2, label: '不计收支' }
|
||||
]
|
||||
|
||||
// 层级状态
|
||||
const currentLevel = ref(0) // 0=类型选择, 1=分类管理
|
||||
const currentType = ref(null) // 当前选中的交易类型
|
||||
const currentTypeName = computed(() => {
|
||||
const type = typeOptions.find(t => t.value === currentType.value)
|
||||
return type ? type.label : ''
|
||||
})
|
||||
|
||||
// 分类数据
|
||||
const categories = ref([])
|
||||
|
||||
// 编辑对话框
|
||||
const showAddDialog = ref(false)
|
||||
const addFormRef = ref(null)
|
||||
const addForm = ref({
|
||||
name: ''
|
||||
})
|
||||
|
||||
// 删除确认
|
||||
const showDeleteConfirm = ref(false)
|
||||
const deleteTarget = ref(null)
|
||||
|
||||
// 计算导航栏标题
|
||||
const navTitle = computed(() => {
|
||||
if (currentLevel.value === 0) {
|
||||
return '编辑分类'
|
||||
}
|
||||
return currentTypeName.value
|
||||
})
|
||||
|
||||
/**
|
||||
* 选择交易类型，进入分类管理
|
||||
*/
|
||||
const handleSelectType = async (type) => {
|
||||
currentType.value = type
|
||||
currentLevel.value = 1
|
||||
await loadCategories()
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载分类列表
|
||||
*/
|
||||
const loadCategories = async () => {
|
||||
try {
|
||||
showLoadingToast({
|
||||
message: '加载中...',
|
||||
forbidClick: true,
|
||||
duration: 0
|
||||
})
|
||||
|
||||
const { success, data } = await getCategoryList(currentType.value)
|
||||
if (success) {
|
||||
categories.value = data || []
|
||||
} else {
|
||||
showToast('加载分类失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载分类错误:', error)
|
||||
showToast('加载分类失败: ' + (error.message || '未知错误'))
|
||||
} finally {
|
||||
closeToast()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 返回上一级
|
||||
*/
|
||||
const handleBack = () => {
|
||||
if (currentLevel.value === 1) {
|
||||
currentLevel.value = 0
|
||||
currentType.value = null
|
||||
categories.value = []
|
||||
} else {
|
||||
router.back()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 返回到根目录（类型选择）
|
||||
*/
|
||||
const handleBackToRoot = () => {
|
||||
currentLevel.value = 0
|
||||
currentType.value = null
|
||||
categories.value = []
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增分类
|
||||
*/
|
||||
const handleAddCategory = () => {
|
||||
addForm.value = {
|
||||
name: ''
|
||||
}
|
||||
showAddDialog.value = true
|
||||
}
|
||||
|
||||
/**
|
||||
* 确认新增
|
||||
*/
|
||||
const handleConfirmAdd = async () => {
|
||||
try {
|
||||
// 表单验证
|
||||
await addFormRef.value?.validate()
|
||||
|
||||
showLoadingToast({
|
||||
message: '创建中...',
|
||||
forbidClick: true,
|
||||
duration: 0
|
||||
})
|
||||
|
||||
const { success, message } = await createCategory({
|
||||
name: addForm.value.name,
|
||||
type: currentType.value
|
||||
})
|
||||
|
||||
if (success) {
|
||||
showSuccessToast('创建成功')
|
||||
showAddDialog.value = false
|
||||
resetAddForm()
|
||||
await loadCategories()
|
||||
} else {
|
||||
showToast(message || '创建失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('创建失败:', error)
|
||||
showToast('创建失败: ' + (error.message || '未知错误'))
|
||||
} finally {
|
||||
closeToast()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除分类
|
||||
*/
|
||||
const handleDelete = async (category) => {
|
||||
deleteTarget.value = category
|
||||
showDeleteConfirm.value = true
|
||||
}
|
||||
|
||||
/**
|
||||
* 确认删除
|
||||
*/
|
||||
const handleConfirmDelete = async () => {
|
||||
if (!deleteTarget.value) return
|
||||
|
||||
try {
|
||||
showLoadingToast({
|
||||
message: '删除中...',
|
||||
forbidClick: true,
|
||||
duration: 0
|
||||
})
|
||||
|
||||
const { success, message } = await deleteCategory(deleteTarget.value.id)
|
||||
|
||||
if (success) {
|
||||
showSuccessToast('删除成功')
|
||||
showDeleteConfirm.value = false
|
||||
deleteTarget.value = null
|
||||
await loadCategories()
|
||||
} else {
|
||||
showToast(message || '删除失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除失败:', error)
|
||||
showToast('删除失败: ' + (error.message || '未知错误'))
|
||||
} finally {
|
||||
closeToast()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置新增表单
|
||||
*/
|
||||
const resetAddForm = () => {
|
||||
addForm.value = {
|
||||
name: ''
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 初始化时显示类型选择
|
||||
currentLevel.value = 0
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.level-container {
|
||||
padding-top: 16px;
|
||||
min-height: calc(100vh - 50px);
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
margin-bottom: 16px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.breadcrumb .van-tag {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 新增按钮 */
|
||||
.add-button-container {
|
||||
position: fixed;
|
||||
bottom: calc(60px + env(safe-area-inset-bottom, 0px));
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* 深色模式 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.level-container {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
371
Web/src/views/ClassificationNLP.vue
Normal file
371
Web/src/views/ClassificationNLP.vue
Normal file
@@ -0,0 +1,371 @@
|
||||
<template>
|
||||
<div class="classification-nlp">
|
||||
<van-nav-bar
|
||||
title="智能分类助手"
|
||||
left-text="返回"
|
||||
left-arrow
|
||||
@click-left="onClickLeft"
|
||||
/>
|
||||
|
||||
<div class="container">
|
||||
<!-- 输入区域 -->
|
||||
<div class="input-section">
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="userInput"
|
||||
rows="3"
|
||||
autosize
|
||||
type="textarea"
|
||||
maxlength="200"
|
||||
placeholder="用自然语言描述您的需求，AI将帮您找到相关交易并自动设置分类。例如：我想要将苏州城慧的支出都改为地铁通勤消费"
|
||||
show-word-limit
|
||||
/>
|
||||
</van-cell-group>
|
||||
|
||||
<div class="action-buttons">
|
||||
<van-button
|
||||
type="primary"
|
||||
block
|
||||
round
|
||||
:loading="analyzing"
|
||||
@click="handleAnalyze"
|
||||
>
|
||||
分析查询
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分析结果展示 -->
|
||||
<div v-if="analysisResult" class="result-section">
|
||||
<van-cell-group inset>
|
||||
<van-cell title="查询关键词" :value="analysisResult.searchKeyword" />
|
||||
<van-cell title="AI建议类型" :value="getTypeName(analysisResult.targetType)" />
|
||||
<van-cell title="AI建议分类" :value="analysisResult.targetClassify" />
|
||||
<van-cell
|
||||
title="找到记录"
|
||||
:value="`${analysisResult.records.length} 条`"
|
||||
is-link
|
||||
@click="showRecordsList = true"
|
||||
/>
|
||||
</van-cell-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 交易详情弹窗 -->
|
||||
<TransactionDetail
|
||||
v-model:show="showDetail"
|
||||
:transaction="currentTransaction"
|
||||
@save="handleDetailSave"
|
||||
/>
|
||||
|
||||
<!-- 记录列表弹窗 -->
|
||||
<van-popup
|
||||
v-model:show="showRecordsList"
|
||||
position="bottom"
|
||||
:style="{ height: '80%' }"
|
||||
round
|
||||
>
|
||||
<div class="records-popup">
|
||||
<div class="popup-header">
|
||||
<h3>交易记录列表</h3>
|
||||
<van-icon name="cross" @click="showRecordsList = false" />
|
||||
</div>
|
||||
|
||||
<!-- 批量操作按钮 -->
|
||||
<div class="batch-actions">
|
||||
<van-button
|
||||
plain
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="selectAll"
|
||||
>
|
||||
全选
|
||||
</van-button>
|
||||
<van-button
|
||||
plain
|
||||
type="default"
|
||||
size="small"
|
||||
@click="selectNone"
|
||||
>
|
||||
全不选
|
||||
</van-button>
|
||||
<van-button
|
||||
type="success"
|
||||
size="small"
|
||||
:loading="submitting"
|
||||
:disabled="selectedIds.size === 0"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
提交分类 ({{ selectedIds.size }})
|
||||
</van-button>
|
||||
</div>
|
||||
|
||||
<!-- 交易记录列表 -->
|
||||
<div class="records-list">
|
||||
<TransactionList
|
||||
:transactions="displayRecords"
|
||||
:loading="false"
|
||||
:finished="true"
|
||||
:show-checkbox="true"
|
||||
:selected-ids="selectedIds"
|
||||
@update:selected-ids="updateSelectedIds"
|
||||
@click="handleRecordClick"
|
||||
:show-delete="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { showToast, showConfirmDialog } from 'vant'
|
||||
import { nlpAnalysis, batchUpdateClassify } from '@/api/transactionRecord'
|
||||
import TransactionList from '@/components/TransactionList.vue'
|
||||
import TransactionDetail from '@/components/TransactionDetail.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const userInput = ref('')
|
||||
const analyzing = ref(false)
|
||||
const submitting = ref(false)
|
||||
const analysisResult = ref(null)
|
||||
const selectedIds = ref(new Set())
|
||||
const showDetail = ref(false)
|
||||
const currentTransaction = ref(null)
|
||||
const showRecordsList = ref(false) // 控制记录列表弹窗
|
||||
|
||||
// 返回按钮
|
||||
const onClickLeft = () => {
|
||||
router.back()
|
||||
}
|
||||
|
||||
// 将带目标分类的记录转换为普通交易记录格式供列表显示
|
||||
const displayRecords = computed(() => {
|
||||
if (!analysisResult.value) return []
|
||||
|
||||
return analysisResult.value.records.map(r => ({
|
||||
id: r.id,
|
||||
reason: r.reason,
|
||||
amount: r.amount,
|
||||
balance: r.balance,
|
||||
card: r.card,
|
||||
occurredAt: r.occurredAt,
|
||||
createTime: r.createTime,
|
||||
importFrom: r.importFrom,
|
||||
refundAmount: r.refundAmount,
|
||||
// 显示目标类型和分类
|
||||
type: r.targetType,
|
||||
classify: r.targetClassify,
|
||||
upsetedClassify: r.upsetedClassify,
|
||||
upsetedType: r.upsetedType
|
||||
}))
|
||||
})
|
||||
|
||||
// 获取交易类型名称
|
||||
const getTypeName = (type) => {
|
||||
const typeMap = {
|
||||
0: '支出',
|
||||
1: '收入',
|
||||
2: '不计入收支'
|
||||
}
|
||||
return typeMap[type] || '未知'
|
||||
}
|
||||
|
||||
// 分析用户输入
|
||||
const handleAnalyze = async () => {
|
||||
if (!userInput.value.trim()) {
|
||||
showToast('请输入查询条件')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
analyzing.value = true
|
||||
const response = await nlpAnalysis(userInput.value)
|
||||
|
||||
if (response.success) {
|
||||
analysisResult.value = response.data
|
||||
|
||||
// 默认全选
|
||||
const allIds = new Set(response.data.records.map(r => r.id))
|
||||
selectedIds.value = allIds
|
||||
|
||||
showToast(`找到 ${response.data.records.length} 条记录`)
|
||||
} else {
|
||||
showToast(response.message || '分析失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('分析失败:', error)
|
||||
showToast('分析失败，请重试')
|
||||
} finally {
|
||||
analyzing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 全选
|
||||
const selectAll = () => {
|
||||
if (!analysisResult.value) return
|
||||
const allIds = new Set(analysisResult.value.records.map(r => r.id))
|
||||
selectedIds.value = allIds
|
||||
}
|
||||
|
||||
// 全不选
|
||||
const selectNone = () => {
|
||||
selectedIds.value = new Set()
|
||||
}
|
||||
|
||||
// 更新选中状态
|
||||
const updateSelectedIds = (newSelectedIds) => {
|
||||
selectedIds.value = newSelectedIds
|
||||
}
|
||||
|
||||
// 点击记录查看详情
|
||||
const handleRecordClick = (transaction) => {
|
||||
// 从原始记录中获取完整信息
|
||||
const record = analysisResult.value?.records.find(r => r.id === transaction.id)
|
||||
if (record) {
|
||||
currentTransaction.value = {
|
||||
id: record.id,
|
||||
reason: record.reason,
|
||||
amount: record.amount,
|
||||
balance: record.balance,
|
||||
card: record.card,
|
||||
occurredAt: record.occurredAt,
|
||||
createTime: record.createTime,
|
||||
importFrom: record.importFrom,
|
||||
refundAmount: record.refundAmount,
|
||||
// 用户可以在详情中修改类型和分类
|
||||
type: record.targetType,
|
||||
classify: record.targetClassify
|
||||
}
|
||||
showDetail.value = true
|
||||
}
|
||||
}
|
||||
|
||||
// 详情保存后
|
||||
const handleDetailSave = () => {
|
||||
// 详情中的修改已经保存到服务器
|
||||
// 这里可以选择重新分析或者只更新本地显示
|
||||
showToast('修改已保存')
|
||||
}
|
||||
|
||||
// 提交分类
|
||||
const handleSubmit = async () => {
|
||||
if (selectedIds.value.size === 0) {
|
||||
showToast('请至少选择一条记录')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await showConfirmDialog({
|
||||
title: '确认提交',
|
||||
message: `确定要为选中的 ${selectedIds.value.size} 条记录设置分类吗？`
|
||||
})
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
submitting.value = true
|
||||
|
||||
// 构建批量更新数据（使用AI修改后的结果）
|
||||
const items = analysisResult.value.records
|
||||
.filter(r => selectedIds.value.has(r.id))
|
||||
.map(r => ({
|
||||
id: r.id,
|
||||
classify: r.upsetedClassify,
|
||||
type: r.upsetedType
|
||||
}))
|
||||
|
||||
const response = await batchUpdateClassify(items)
|
||||
|
||||
if (response.success) {
|
||||
showToast('分类设置成功')
|
||||
// 清空结果，让用户进行新的查询
|
||||
analysisResult.value = null
|
||||
selectedIds.value = new Set()
|
||||
userInput.value = ''
|
||||
} else {
|
||||
showToast(response.message || '设置失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('提交失败:', error)
|
||||
showToast('提交失败，请重试')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.classification-nlp {
|
||||
min-height: 100vh;
|
||||
background-color: var(--van-background, #f7f8fa);
|
||||
padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.input-section {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.result-section {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.van-notice-bar {
|
||||
margin: 12px 16px;
|
||||
}
|
||||
|
||||
.batch-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
background-color: var(--van-background-2, #fff);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.batch-actions > button:last-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.records-list {
|
||||
padding-bottom: 20px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.records-popup {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background-color: var(--van-background, #f7f8fa);
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
background-color: var(--van-background-2, #fff);
|
||||
}
|
||||
|
||||
.popup-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.popup-header .van-icon {
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -7,7 +7,7 @@
|
||||
@click-left="onClickLeft"
|
||||
/>
|
||||
|
||||
<div class="container" style="padding-top: 46px;">
|
||||
<div class="container" style="padding-top: 5px;">
|
||||
<!-- 统计信息 -->
|
||||
<div class="stats-info">
|
||||
<span class="stats-label">未分类账单：</span>
|
||||
@@ -18,9 +18,11 @@
|
||||
<TransactionList
|
||||
:transactions="records"
|
||||
:loading="false"
|
||||
:finished="true"
|
||||
:show-delete="false"
|
||||
:show-checkbox="true"
|
||||
:selected-ids="selectedIds"
|
||||
@click="viewDetail"
|
||||
@update:selected-ids="selectedIds = $event"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -36,11 +38,11 @@
|
||||
<van-button
|
||||
type="primary"
|
||||
:loading="classifying"
|
||||
:disabled="records.length === 0"
|
||||
:disabled="selectedIds.size === 0"
|
||||
@click="startClassify"
|
||||
class="action-btn"
|
||||
>
|
||||
{{ classifying ? '分类中...' : '开始智能分类' }}
|
||||
{{ classifying ? '分类中...' : `开始分类 (${selectedIds.size}/${records.length})` }}
|
||||
</van-button>
|
||||
|
||||
<van-button
|
||||
@@ -72,10 +74,12 @@ import TransactionDetail from '@/components/TransactionDetail.vue'
|
||||
const router = useRouter()
|
||||
const unclassifiedCount = ref(0)
|
||||
const records = ref([])
|
||||
const selectedIds = ref(new Set()) // 选中的账单ID集合
|
||||
const classifying = ref(false)
|
||||
const hasChanges = ref(false)
|
||||
const detailVisible = ref(false)
|
||||
const currentTransaction = ref(null)
|
||||
const classifyBuffer = ref('') // SSE数据缓冲区
|
||||
|
||||
const onClickLeft = () => {
|
||||
if (hasChanges.value) {
|
||||
@@ -104,7 +108,7 @@ const loadUnclassifiedCount = async () => {
|
||||
|
||||
// 加载未分类账单列表
|
||||
const loadUnclassified = async () => {
|
||||
const toast = showLoadingToast({
|
||||
showLoadingToast({
|
||||
message: '加载中...',
|
||||
forbidClick: true,
|
||||
duration: 0
|
||||
@@ -114,6 +118,8 @@ const loadUnclassified = async () => {
|
||||
const res = await getUnclassified(10)
|
||||
if (res.success) {
|
||||
records.value = res.data
|
||||
// 默认全选所有账单
|
||||
selectedIds.value = new Set(res.data.map(r => r.id))
|
||||
} else {
|
||||
showToast(res.message || '加载失败')
|
||||
}
|
||||
@@ -127,15 +133,24 @@ const loadUnclassified = async () => {
|
||||
|
||||
// 开始智能分类
|
||||
const startClassify = async () => {
|
||||
if (records.value.length === 0) {
|
||||
showToast('没有需要分类的账单')
|
||||
const idsToClassify = Array.from(selectedIds.value)
|
||||
|
||||
if (idsToClassify.length === 0) {
|
||||
showToast('请先选择要分类的账单')
|
||||
return
|
||||
}
|
||||
|
||||
const toast = showLoadingToast({
|
||||
message: '智能分类中...',
|
||||
forbidClick: true,
|
||||
duration: 0
|
||||
})
|
||||
|
||||
classifying.value = true
|
||||
classifyBuffer.value = '' // 重置缓冲区
|
||||
|
||||
try {
|
||||
const response = await smartClassify(10)
|
||||
const response = await smartClassify(idsToClassify)
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`)
|
||||
@@ -173,49 +188,83 @@ const startClassify = async () => {
|
||||
showToast(`分类失败: ${error.message}`)
|
||||
} finally {
|
||||
classifying.value = false
|
||||
classifyBuffer.value = ''
|
||||
closeToast()
|
||||
}
|
||||
}
|
||||
|
||||
// 处理SSE事件
|
||||
const handleSSEEvent = (eventType, data) => {
|
||||
if (eventType === 'data') {
|
||||
// 尝试解析JSON数据并更新对应账单的分类
|
||||
try {
|
||||
// 累积JSON片段
|
||||
if (!window.classifyBuffer) {
|
||||
window.classifyBuffer = ''
|
||||
}
|
||||
window.classifyBuffer += data
|
||||
// 累积AI输出的JSON片段
|
||||
classifyBuffer.value += data
|
||||
|
||||
// 尝试提取完整的JSON对象
|
||||
const jsonMatches = window.classifyBuffer.match(/\{[^}]+\}/g)
|
||||
if (jsonMatches) {
|
||||
for (const jsonStr of jsonMatches) {
|
||||
// 尝试查找并提取完整的JSON对象
|
||||
// 使用更精确的方式：查找 { 和匹配的 }
|
||||
let startIndex = 0
|
||||
while (startIndex < classifyBuffer.value.length) {
|
||||
const openBrace = classifyBuffer.value.indexOf('{', startIndex)
|
||||
if (openBrace === -1) {
|
||||
// 没有找到开始的 {，清理前面的无用字符
|
||||
classifyBuffer.value = ''
|
||||
break
|
||||
}
|
||||
|
||||
// 尝试找到匹配的闭合括号
|
||||
let braceCount = 0
|
||||
let closeBrace = -1
|
||||
for (let i = openBrace; i < classifyBuffer.value.length; i++) {
|
||||
if (classifyBuffer.value[i] === '{') braceCount++
|
||||
else if (classifyBuffer.value[i] === '}') {
|
||||
braceCount--
|
||||
if (braceCount === 0) {
|
||||
closeBrace = i
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (closeBrace !== -1) {
|
||||
// 找到了完整的JSON
|
||||
const jsonStr = classifyBuffer.value.substring(openBrace, closeBrace + 1)
|
||||
|
||||
try {
|
||||
const result = JSON.parse(jsonStr)
|
||||
|
||||
if (result.id) {
|
||||
const record = records.value.find(r => r.id === result.id)
|
||||
if (record) {
|
||||
record.classify = result.classify || ''
|
||||
record.subClassify = result.subClassify || ''
|
||||
// 如果AI返回了type字段，也更新type
|
||||
if (result.type !== undefined && result.type !== null) {
|
||||
record.type = result.type
|
||||
}
|
||||
hasChanges.value = true
|
||||
}
|
||||
// 移除已处理的JSON
|
||||
window.classifyBuffer = window.classifyBuffer.replace(jsonStr, '')
|
||||
}
|
||||
} catch (e) {
|
||||
// 不是完整的JSON，继续累积
|
||||
console.error('JSON解析失败:', e)
|
||||
}
|
||||
|
||||
// 移除已处理的部分
|
||||
classifyBuffer.value = classifyBuffer.value.substring(closeBrace + 1)
|
||||
startIndex = 0 // 从头开始查找下一个JSON
|
||||
} else {
|
||||
// 没有找到闭合括号，说明JSON还不完整，等待更多数据
|
||||
break
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('解析分类结果失败', error)
|
||||
}
|
||||
} else if (eventType === 'start') {
|
||||
showToast(data)
|
||||
} else if (eventType === 'end') {
|
||||
window.classifyBuffer = ''
|
||||
classifyBuffer.value = ''
|
||||
showToast('分类完成')
|
||||
} else if (eventType === 'error') {
|
||||
window.classifyBuffer = ''
|
||||
classifyBuffer.value = ''
|
||||
showToast(data)
|
||||
}
|
||||
}
|
||||
@@ -227,7 +276,7 @@ const saveClassifications = async () => {
|
||||
.map(r => ({
|
||||
id: r.id,
|
||||
classify: r.classify,
|
||||
subClassify: r.subClassify
|
||||
type: r.type
|
||||
}))
|
||||
|
||||
if (itemsToUpdate.length === 0) {
|
||||
@@ -415,8 +415,6 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import '@/styles/common.css';
|
||||
|
||||
.email-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -16,15 +16,11 @@
|
||||
<p>分类处理</p>
|
||||
</div>
|
||||
<van-cell-group inset>
|
||||
<van-cell title="编辑分类" is-link @click="handleEditClassification" />
|
||||
</van-cell-group>
|
||||
<van-cell-group inset>
|
||||
<van-cell title="分类管理" is-link @click="handleEditClassification" />
|
||||
<van-cell title="批量分类" is-link @click="handleBatchClassification" />
|
||||
</van-cell-group>
|
||||
<van-cell-group inset>
|
||||
<van-cell title="智能分类" is-link @click="handleSmartClassification" />
|
||||
<van-cell title="自然语言分类" is-link @click="handleNaturalLanguageClassification" />
|
||||
</van-cell-group>
|
||||
|
||||
<div class="detail-header">
|
||||
<p>账户</p>
|
||||
</div>
|
||||
@@ -107,10 +103,22 @@ const handleFileChange = async (event) => {
|
||||
}
|
||||
}
|
||||
|
||||
const handleEditClassification = () => {
|
||||
router.push({ name: 'classification-edit' })
|
||||
}
|
||||
|
||||
const handleBatchClassification = () => {
|
||||
router.push({ name: 'classification-batch' })
|
||||
}
|
||||
|
||||
const handleSmartClassification = () => {
|
||||
router.push({ name: 'smart-classification' })
|
||||
}
|
||||
|
||||
const handleNaturalLanguageClassification = () => {
|
||||
router.push({ name: 'classification-nlp' })
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理退出登录
|
||||
*/
|
||||
|
||||
@@ -100,15 +100,6 @@
|
||||
placeholder="请选择或输入交易分类"
|
||||
@click="showAddClassifyPicker = true"
|
||||
/>
|
||||
<van-field
|
||||
v-model="addForm.subClassify"
|
||||
is-link
|
||||
readonly
|
||||
name="subClassify"
|
||||
label="交易子分类"
|
||||
placeholder="请选择或输入交易子分类"
|
||||
@click="showAddSubClassifyPicker = true"
|
||||
/>
|
||||
</van-cell-group>
|
||||
|
||||
<div style="margin: 16px;">
|
||||
@@ -160,29 +151,21 @@
|
||||
</van-picker>
|
||||
</van-popup>
|
||||
|
||||
<!-- 新增交易 - 交易子分类选择器 -->
|
||||
<van-popup v-model:show="showAddSubClassifyPicker" position="bottom" round>
|
||||
<van-picker
|
||||
ref="addSubClassifyPickerRef"
|
||||
:columns="subClassifyColumns"
|
||||
@confirm="onAddSubClassifyConfirm"
|
||||
@cancel="showAddSubClassifyPicker = false"
|
||||
>
|
||||
<template #toolbar>
|
||||
<div class="picker-toolbar">
|
||||
<van-button class="toolbar-cancel" size="small" @click="clearAddSubClassify">清空</van-button>
|
||||
<van-button class="toolbar-add" size="small" type="primary" @click="showAddSubClassify = true">新增</van-button>
|
||||
<van-button class="toolbar-confirm" size="small" type="primary" @click="confirmAddSubClassify">确认</van-button>
|
||||
</div>
|
||||
</template>
|
||||
</van-picker>
|
||||
</van-popup>
|
||||
<!-- 新增分类对话框 -->
|
||||
<van-dialog
|
||||
v-model:show="showAddClassify"
|
||||
title="新增交易分类"
|
||||
show-cancel-button
|
||||
@confirm="addNewClassify"
|
||||
>
|
||||
<van-field v-model="newClassify" placeholder="请输入新的交易分类" />
|
||||
</van-dialog>
|
||||
|
||||
<!-- 底部浮动搜索框 -->
|
||||
<div class="floating-search">
|
||||
<van-search
|
||||
v-model="searchKeyword"
|
||||
placeholder="搜索交易摘要、来源、卡号、分类或子分类"
|
||||
placeholder="搜索交易摘要、来源、卡号、分类"
|
||||
@update:model-value="onSearchChange"
|
||||
@clear="onSearchClear"
|
||||
shape="round"
|
||||
@@ -200,7 +183,7 @@ import {
|
||||
createTransaction,
|
||||
deleteTransaction
|
||||
} from '@/api/transactionRecord'
|
||||
import { getCategoryTree } from '@/api/transactionCategory'
|
||||
import { getCategoryList, createCategory } from '@/api/transactionCategory'
|
||||
import TransactionList from '@/components/TransactionList.vue'
|
||||
import TransactionDetail from '@/components/TransactionDetail.vue'
|
||||
|
||||
@@ -225,9 +208,9 @@ const showDateTimePicker = ref(false)
|
||||
const dateTimeValue = ref([new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()])
|
||||
const showAddTypePicker = ref(false)
|
||||
const showAddClassifyPicker = ref(false)
|
||||
const showAddSubClassifyPicker = ref(false)
|
||||
const addClassifyPickerRef = ref(null)
|
||||
const addSubClassifyPickerRef = ref(null)
|
||||
const showAddClassify = ref(false)
|
||||
const newClassify = ref('')
|
||||
|
||||
// 交易类型
|
||||
const typeColumns = [
|
||||
@@ -238,7 +221,6 @@ const typeColumns = [
|
||||
|
||||
// 分类相关
|
||||
const classifyColumns = ref([])
|
||||
const subClassifyColumns = ref([])
|
||||
|
||||
// 新增表单
|
||||
const addForm = reactive({
|
||||
@@ -247,21 +229,18 @@ const addForm = reactive({
|
||||
amount: '',
|
||||
type: 0,
|
||||
typeText: '',
|
||||
classify: '',
|
||||
subClassify: ''
|
||||
classify: ''
|
||||
})
|
||||
|
||||
// 加载分类列表（从分类树中提取）
|
||||
// 加载分类列表
|
||||
const loadClassifyList = async (type = null) => {
|
||||
try {
|
||||
const response = await getCategoryTree(type)
|
||||
const response = await getCategoryList(type)
|
||||
if (response.success) {
|
||||
// 从树形结构中提取分类名称（Level 2）
|
||||
classifyColumns.value = (response.data || []).map(item => ({
|
||||
text: item.name,
|
||||
value: item.name,
|
||||
id: item.id,
|
||||
children: item.children || []
|
||||
id: item.id
|
||||
}))
|
||||
}
|
||||
} catch (error) {
|
||||
@@ -269,25 +248,6 @@ const loadClassifyList = async (type = null) => {
|
||||
}
|
||||
}
|
||||
|
||||
// 加载子分类列表（根据选中的分类）
|
||||
const loadSubClassifyList = async (classifyName) => {
|
||||
try {
|
||||
// 从已加载的分类树中查找对应的子分类
|
||||
const classifyItem = classifyColumns.value.find(item => item.value === classifyName)
|
||||
if (classifyItem && classifyItem.children) {
|
||||
subClassifyColumns.value = classifyItem.children.map(child => ({
|
||||
text: child.name,
|
||||
value: child.name,
|
||||
id: child.id
|
||||
}))
|
||||
} else {
|
||||
subClassifyColumns.value = []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载子分类列表出错:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 加载数据
|
||||
const loadData = async (isRefresh = false) => {
|
||||
if (isRefresh) {
|
||||
@@ -441,7 +401,6 @@ const openAddDialog = () => {
|
||||
addForm.type = 0
|
||||
addForm.typeText = ''
|
||||
addForm.classify = ''
|
||||
addForm.subClassify = ''
|
||||
|
||||
// 设置默认日期时间为当前时间
|
||||
const now = new Date()
|
||||
@@ -477,23 +436,13 @@ const onAddTypeConfirm = ({ selectedValues, selectedOptions }) => {
|
||||
}
|
||||
|
||||
// 新增交易 - 交易分类选择确认
|
||||
const onAddClassifyConfirm = async ({ selectedOptions }) => {
|
||||
const onAddClassifyConfirm = ({ selectedOptions }) => {
|
||||
if (selectedOptions && selectedOptions[0]) {
|
||||
addForm.classify = selectedOptions[0].text
|
||||
// 加载对应的子分类
|
||||
await loadSubClassifyList(selectedOptions[0].value)
|
||||
}
|
||||
showAddClassifyPicker.value = false
|
||||
}
|
||||
|
||||
// 新增交易 - 交易子分类选择确认
|
||||
const onAddSubClassifyConfirm = ({ selectedOptions }) => {
|
||||
if (selectedOptions && selectedOptions[0]) {
|
||||
addForm.subClassify = selectedOptions[0].text
|
||||
}
|
||||
showAddSubClassifyPicker.value = false
|
||||
}
|
||||
|
||||
// 新增交易 - 清空分类
|
||||
const clearAddClassify = () => {
|
||||
addForm.classify = ''
|
||||
@@ -501,13 +450,6 @@ const clearAddClassify = () => {
|
||||
showToast('已清空分类')
|
||||
}
|
||||
|
||||
// 新增交易 - 清空子分类
|
||||
const clearAddSubClassify = () => {
|
||||
addForm.subClassify = ''
|
||||
showAddSubClassifyPicker.value = false
|
||||
showToast('已清空子分类')
|
||||
}
|
||||
|
||||
// 新增交易 - 确认分类（从 picker 中获取选中值）
|
||||
const confirmAddClassify = () => {
|
||||
if (addClassifyPickerRef.value) {
|
||||
@@ -519,15 +461,33 @@ const confirmAddClassify = () => {
|
||||
showAddClassifyPicker.value = false
|
||||
}
|
||||
|
||||
// 新增交易 - 确认子分类（从 picker 中获取选中值）
|
||||
const confirmAddSubClassify = () => {
|
||||
if (addSubClassifyPickerRef.value) {
|
||||
const selectedValues = addSubClassifyPickerRef.value.getSelectedOptions()
|
||||
if (selectedValues && selectedValues[0]) {
|
||||
addForm.subClassify = selectedValues[0].text
|
||||
}
|
||||
// 新增分类
|
||||
const addNewClassify = async () => {
|
||||
if (!newClassify.value.trim()) {
|
||||
showToast('请输入分类名称')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await createCategory({
|
||||
name: newClassify.value.trim(),
|
||||
type: addForm.type
|
||||
})
|
||||
|
||||
if (response.success) {
|
||||
showToast('新增分类成功')
|
||||
newClassify.value = ''
|
||||
// 重新加载分类列表
|
||||
await loadClassifyList(addForm.type)
|
||||
// 设置为新增的分类
|
||||
addForm.classify = response.data.name
|
||||
} else {
|
||||
showToast(response.message || '新增分类失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('新增分类失败:', error)
|
||||
showToast('新增分类失败')
|
||||
}
|
||||
showAddSubClassifyPicker.value = false
|
||||
}
|
||||
|
||||
// 提交新增交易
|
||||
@@ -540,8 +500,7 @@ const onAddSubmit = async () => {
|
||||
reason: addForm.reason,
|
||||
amount: parseFloat(addForm.amount),
|
||||
type: addForm.type,
|
||||
classify: addForm.classify || null,
|
||||
subClassify: addForm.subClassify || null
|
||||
classify: addForm.classify || null
|
||||
}
|
||||
|
||||
const response = await createTransaction(data)
|
||||
|
||||
Reference in New Issue
Block a user