xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 优化尊享包记录

Browse Source
This commit is contained in:
Gsh
2025-11-16 21:30:37 +08:00
parent ffb2f2fb4c
commit d95c14c903
3 changed files with 77 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Yi.Ai.Vue3/.eslintrc-auto-import.json
View File

@@ -5,6 +5,8 @@
"ComputedRef": true,
"DirectiveBinding": true,
"EffectScope": true,
"ElMessage": true,
"ElMessageBox": true,
"ExtractDefaultPropTypes": true,
"ExtractPropTypes": true,
"ExtractPublicPropTypes": true,

8
Yi.Ai.Vue3/src/api/user/index.ts
View File

@@ -22,6 +22,10 @@ export interface PremiumTokenUsageDto {
purchaseAmount: number;
/** 备注 */
remark?: string;
/** 创建时间 */
creationTime?: string;
/** 创建者ID */
creatorId?: string;
}
// 查询参数接口 - 匹配后端 PagedAllResultRequestDto
@@ -38,6 +42,10 @@ export interface PremiumTokenUsageQueryParams {
skipCount?: number;
/** 最大返回数量（分页） */
maxResultCount?: number;
/** 是否免费 */
isFree?: boolean;
// 是否为升序排序
isAscending?: boolean;
}
// 分页响应接口

257
Yi.Ai.Vue3/src/components/userPersonalCenter/components/PremiumUsageList.vue
View File

@@ -1,21 +1,12 @@
<script lang="ts" setup>
import type { PremiumTokenUsageDto, PremiumTokenUsageQueryParams } from '@/api/user';
import { Clock, Refresh, Search } from '@element-plus/icons-vue';
import { debounce } from 'lodash-es';
import { Clock, Refresh } from '@element-plus/icons-vue';
import { getPremiumTokenUsageList } from '@/api/user';
// 额度明细列表
const usageList = ref<PremiumTokenUsageDto[]>([]); // 后端返回的原始数据
const filteredList = ref<PremiumTokenUsageDto[]>([]); // 前端过滤后的数据
const displayList = ref<PremiumTokenUsageDto[]>([]); // 最终显示的数据（前端分页后）
const usageList = ref<PremiumTokenUsageDto[]>([]);
const listLoading = ref(false);
const totalCount = ref(0); // 后端总数
const filteredTotalCount = ref(0); // 前端过滤后的总数
// 是否有前端筛选条件
const hasClientFilter = computed(() => {
return !!searchKeyword.value || statusFilter.value !== null;
});
const totalCount = ref(0);
// 查询参数
const queryParams = ref<PremiumTokenUsageQueryParams>({
@@ -29,8 +20,7 @@ const pageSize = ref(10);
// 筛选条件
const dateRange = ref<[Date, Date] | null>(null);
const searchKeyword = ref('');
const statusFilter = ref<boolean | null>(null);
const freeFilter = ref<boolean | null>(null);
// 快捷时间选择
const shortcuts = [
@@ -98,23 +88,21 @@ function getUsageColor(used: number, total: number): string {
async function fetchUsageList(resetPage = false) {
if (resetPage) {
currentPage.value = 1;
queryParams.value.skipCount = 0;
}
listLoading.value = true;
try {
// 如果有前端筛选条件，获取所有数据；否则使用正常分页
const params: PremiumTokenUsageQueryParams = {
skipCount: hasClientFilter.value ? 0 : queryParams.value.skipCount,
maxResultCount: hasClientFilter.value ? 1000 : queryParams.value.maxResultCount,
skipCount: currentPage.value,
maxResultCount: queryParams.value.maxResultCount,
startTime: queryParams.value.startTime,
endTime: queryParams.value.endTime,
orderByColumn: queryParams.value.orderByColumn,
isAsc: queryParams.value.isAsc,
isFree: queryParams.value.isFree,
};
console.log('发送到后端的参数:', params);
console.log('是否有前端筛选:', hasClientFilter.value);
const res = await getPremiumTokenUsageList(params);
console.log('后端返回结果:', res);
@@ -122,87 +110,24 @@ async function fetchUsageList(resetPage = false) {
if (res.data) {
usageList.value = res.data.items || [];
totalCount.value = res.data.totalCount || 0;
// 应用前端过滤和分页
applyClientFilters();
}
}
catch (error) {
console.error('获取额度明细列表失败:', error);
ElMessage.error('获取额度明细列表失败');
usageList.value = [];
filteredList.value = [];
displayList.value = [];
totalCount.value = 0;
filteredTotalCount.value = 0;
}
finally {
listLoading.value = false;
}
}
// 前端过滤和分页
function applyClientFilters() {
let filtered = [...usageList.value];
// 包名称搜索
if (searchKeyword.value) {
const keyword = searchKeyword.value.toLowerCase();
filtered = filtered.filter(item =>
item.packageName.toLowerCase().includes(keyword),
);
}
// 状态筛选
if (statusFilter.value !== null) {
filtered = filtered.filter(item => item.isActive === statusFilter.value);
}
filteredList.value = filtered;
filteredTotalCount.value = filtered.length;
// 如果有前端筛选，进行前端分页
if (hasClientFilter.value) {
const start = (currentPage.value - 1) * pageSize.value;
const end = start + pageSize.value;
displayList.value = filtered.slice(start, end);
}
else {
// 无前端筛选，直接使用过滤后的数据（实际就是原始数据）
displayList.value = filtered;
}
console.log('前端过滤和分页:', {
原始数量: usageList.value.length,
过滤后数量: filtered.length,
当前页显示: displayList.value.length,
搜索关键字: searchKeyword.value,
状态筛选: statusFilter.value,
当前页码: currentPage.value,
每页大小: pageSize.value,
});
}
// 防抖搜索
const debouncedSearch = debounce(() => {
currentPage.value = 1; // 重置到第一页
applyClientFilters(); // 只应用前端过滤，不重新请求接口
}, 300);
// 处理分页
function handlePageChange(page: number) {
console.log('切换页码:', page);
currentPage.value = page;
if (hasClientFilter.value) {
// 有前端筛选，只需重新分页
applyClientFilters();
}
else {
// 无前端筛选，后端分页
queryParams.value.skipCount = (page - 1) * pageSize.value;
fetchUsageList();
}
fetchUsageList();
}
// 处理每页大小变化
@@ -211,34 +136,21 @@ function handleSizeChange(size: number) {
pageSize.value = size;
queryParams.value.maxResultCount = size;
currentPage.value = 1;
queryParams.value.skipCount = 0;
if (hasClientFilter.value) {
// 有前端筛选，只需重新分页
applyClientFilters();
}
else {
// 无前端筛选，重新获取数据
fetchUsageList();
}
fetchUsageList();
}
// 处理排序（使用 OrderByColumn 和 IsAsc）
function handleSortChange({ prop, order }: { prop: string; order: string | null }) {
console.log('排序变化:', { prop, order });
if (order) {
// 后端DTO使用 OrderByColumn 和 IsAsc
queryParams.value.orderByColumn = prop;
// 转换为布尔值：ascending -> true, descending -> false
queryParams.value.isAsc = order === 'ascending' ? 'ascending' : 'descending';
}
else {
queryParams.value.orderByColumn = undefined;
queryParams.value.isAsc = undefined;
}
currentPage.value = 1;
queryParams.value.skipCount = 0;
fetchUsageList();
fetchUsageList(true);
}
// 处理时间筛选
@@ -270,59 +182,32 @@ function handleDateChange(value: [Date, Date] | null) {
// 重置筛选
function resetFilters() {
console.log('重置所有筛选条件');
// 重置所有筛选条件
dateRange.value = null;
searchKeyword.value = '';
statusFilter.value = null;
currentPage.value = 1;
freeFilter.value = null;
// 重置后端查询参数
queryParams.value = {
skipCount: 0,
maxResultCount: pageSize.value,
orderByColumn: undefined,
isAsc: undefined,
startTime: undefined,
endTime: undefined,
isFree: undefined,
};
// 重新获取数据
fetchUsageList();
fetchUsageList(true);
}
// 处理搜索
function handleSearch() {
console.log('搜索关键字:', searchKeyword.value);
// 如果已经有全量数据（之前获取过），直接过滤
if (usageList.value.length > 0 && hasClientFilter.value) {
debouncedSearch();
}
else {
// 否则需要重新获取数据
currentPage.value = 1;
fetchUsageList();
}
}
// 处理状态筛选
function handleStatusChange(value: boolean | null) {
console.log('状态筛选:', value);
// 如果是清除操作（value 为 null），重置筛选
if (value === null) {
statusFilter.value = null;
}
currentPage.value = 1; // 重置到第一页
// 状态筛选需要重新获取数据（因为后端不支持状态筛选）
fetchUsageList();
// 处理是否免费筛选
function handleFreeFilterChange(value: boolean | null) {
console.log('是否免费筛选:', value);
queryParams.value.isFree = value === null ? undefined : value;
fetchUsageList(true);
}
// 判断是否有活动的筛选条件
const hasActiveFilters = computed(() => {
return !!dateRange.value || !!searchKeyword.value || statusFilter.value !== null;
return !!dateRange.value || freeFilter.value !== null;
});
// 对外暴露刷新方法
@@ -348,12 +233,8 @@ onMounted(() => {
<!-- <span class="header-subtitle">Premium Package Usage Details</span> -->
</div>
</div>
<div v-if="false" class="header-right">
<el-tag v-if="hasClientFilter && filteredTotalCount > 0" type="warning" size="default" class="count-tag">
<el-icon><i-ep-filter /></el-icon>
筛选后 {{ filteredTotalCount }} 条
</el-tag>
<el-tag v-else-if="totalCount > 0" type="primary" size="default" class="count-tag" effect="plain">
<div class="header-right">
<el-tag v-if="totalCount > 0" type="primary" size="default" class="count-tag" effect="plain">
<el-icon><i-ep-data-line /></el-icon>
共 {{ totalCount }} 条记录
</el-tag>
@@ -364,21 +245,6 @@ onMounted(() => {
<!-- 筛选工具栏 -->
<div class="filter-toolbar">
<div class="filter-row">
<div class="filter-item">
<el-input
v-model="searchKeyword"
placeholder="搜索包名称"
clearable
size="default"
class="search-input"
@input="handleSearch"
>
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input>
</div>
<div class="filter-item">
<el-date-picker
v-model="dateRange"
@@ -398,15 +264,15 @@ onMounted(() => {
<div class="filter-item">
<el-select
v-model="statusFilter"
placeholder="全部状态"
v-model="freeFilter"
placeholder="全部类型"
clearable
size="default"
class="status-select"
@change="handleStatusChange"
class="free-select"
@change="handleFreeFilterChange"
>
<el-option label="激活" :value="true" />
<el-option label="未激活" :value="false" />
<el-option label="免费" :value="true" />
<el-option label="付费" :value="false" />
</el-select>
</div>
@@ -429,25 +295,17 @@ onMounted(() => {
</el-button>
</div>
</div>
<!-- 筛选提示 -->
<!-- <div v-if="searchKeyword || statusFilter !== null" class="filter-tip"> -->
<!-- <el-icon color="#409eff"> -->
<!-- <i-ep-info-filled /> -->
<!-- </el-icon> -->
<!-- <span>启用包名称或状态筛选时，将从当前时间范围内获取更多数据进行过滤（最多1000条）</span> -->
<!-- </div> -->
</div>
<!-- 数据表格 -->
<el-table
:data="displayList"
:data="usageList"
stripe
class="usage-table"
empty-text="暂无数据"
@sort-change="handleSortChange"
>
<el-table-column prop="packageName" label="包名称" min-width="140" sortable="custom" show-overflow-tooltip>
<el-table-column prop="packageName" label="包名称" min-width="200" sortable="custom" show-overflow-tooltip align="center" header-align="center" resizable>
<template #default="{ row }">
<div class="package-name-cell">
<el-icon class="package-icon" color="#409eff">
@@ -458,7 +316,7 @@ onMounted(() => {
</template>
</el-table-column>
<el-table-column label="总额度" min-width="130" prop="totalTokens" sortable="custom" align="right">
<el-table-column label="总额度" min-width="130" prop="totalTokens" sortable="custom" align="center" header-align="center" resizable>
<template #default="{ row }">
<div class="token-cell">
<span class="token-value">{{ formatNumber(row.totalTokens) }}</span>
@@ -467,7 +325,7 @@ onMounted(() => {
</template>
</el-table-column>
<el-table-column label="已使用" min-width="130" prop="usedTokens" sortable="custom" align="right">
<el-table-column label="已使用" min-width="130" prop="usedTokens" sortable="custom" align="center" header-align="center" resizable>
<template #default="{ row }">
<div class="token-cell used">
<span class="token-value">{{ formatNumber(row.usedTokens) }}</span>
@@ -476,7 +334,7 @@ onMounted(() => {
</template>
</el-table-column>
<el-table-column label="剩余" min-width="130" prop="remainingTokens" sortable="custom" align="right">
<el-table-column label="剩余" min-width="130" prop="remainingTokens" sortable="custom" align="center" header-align="center" resizable>
<template #default="{ row }">
<div class="token-cell remaining">
<span
@@ -490,7 +348,7 @@ onMounted(() => {
</template>
</el-table-column>
<el-table-column label="使用率" min-width="130" align="center">
<el-table-column label="使用率" min-width="130" align="center" header-align="center" resizable>
<template #default="{ row }">
<div class="usage-progress-cell">
<el-progress
@@ -508,13 +366,13 @@ onMounted(() => {
</template>
</el-table-column>
<el-table-column label="购买金额" min-width="110" prop="purchaseAmount" sortable="custom" align="right">
<el-table-column label="购买金额" min-width="110" prop="purchaseAmount" sortable="custom" align="center" header-align="center" resizable>
<template #default="{ row }">
<span class="amount-cell">¥{{ row.purchaseAmount.toFixed(2) }}</span>
</template>
</el-table-column>
<el-table-column label="状态" min-width="90" prop="isActive" sortable="custom" align="center">
<el-table-column label="状态" min-width="90" prop="isActive" sortable="custom" align="center" header-align="center" resizable>
<template #default="{ row }">
<el-tag :type="row.isActive ? 'success' : 'info'" size="small" effect="dark">
{{ row.isActive ? '激活' : '未激活' }}
@@ -522,7 +380,19 @@ onMounted(() => {
</template>
</el-table-column>
<el-table-column label="到期时间" min-width="170" prop="expireDateTime" sortable="custom">
<el-table-column label="创建时间" min-width="170" prop="creationTime" sortable="custom" align="center" header-align="center" resizable>
<template #default="{ row }">
<div v-if="row.creationTime" class="creation-cell">
<el-icon class="creation-icon">
<Clock />
</el-icon>
<span>{{ formatDateTime(row.creationTime) }}</span>
</div>
<span v-else class="no-data">-</span>
</template>
</el-table-column>
<el-table-column label="到期时间" min-width="170" prop="expireDateTime" sortable="custom" align="center" header-align="center" resizable>
<template #default="{ row }">
<div v-if="row.expireDateTime" class="expire-cell">
<el-icon class="expire-icon">
@@ -534,7 +404,7 @@ onMounted(() => {
</template>
</el-table-column>
<el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip>
<el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip align="center" header-align="center" resizable>
<template #default="{ row }">
<span class="remark-cell">{{ row.remark || '-' }}</span>
</template>
@@ -542,7 +412,7 @@ onMounted(() => {
</el-table>
<!-- 空状态 -->
<div v-if="!displayList.length && !listLoading" class="empty-container">
<div v-if="!usageList.length && !listLoading" class="empty-container">
<el-empty :description="hasActiveFilters ? '当前筛选条件下无数据' : '暂无明细记录'">
<el-button v-if="hasActiveFilters" type="primary" @click="resetFilters">
清除筛选
@@ -551,12 +421,12 @@ onMounted(() => {
</div>
<!-- 分页 -->
<div v-if="(hasClientFilter ? filteredTotalCount : totalCount) > 0" class="pagination-container">
<div v-if="totalCount > 0" class="pagination-container">
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[10, 20, 50, 100]"
:total="hasClientFilter ? filteredTotalCount : totalCount"
:total="totalCount"
layout="total, sizes, prev, pager, next, jumper"
prev-text="上一页"
next-text="下一页"
@@ -677,15 +547,11 @@ onMounted(() => {
flex: 0 0 auto;
}
.search-input {
width: 220px;
}
.date-picker {
width: 320px;
}
.status-select {
.free-select {
width: 140px;
}
@@ -738,7 +604,7 @@ onMounted(() => {
display: flex;
align-items: baseline;
gap: 4px;
justify-content: flex-end;
justify-content: center;
}
.token-value {
@@ -757,6 +623,18 @@ onMounted(() => {
color: #f56c6c;
}
.creation-cell {
display: flex;
align-items: center;
gap: 6px;
color: #606266;
}
.creation-icon {
font-size: 14px;
color: #67c23a;
}
.expire-cell {
display: flex;
align-items: center;
@@ -890,9 +768,8 @@ onMounted(() => {
width: 100%;
}
.search-input,
.date-picker,
.status-select {
.free-select {
width: 100%;
}