feat: 仪表盘新增收入分类饼图并拆分收支支付方式占比
- 仪表盘新增「收入分类占比」饼图,支付方式拆分为支出、收入两张饼图 - 支付方式标签按当前语言本地化,仅统计对应方向的记录 - 收支记录中不计入统计的记录整行加删除线(类型、金额列除外) - 补充中/英/日三语文案
This commit is contained in:
@@ -508,9 +508,6 @@ function createColumns(): DataTableColumns<TransactionItem> {
|
||||
{
|
||||
title: t('transaction.column.type'), key: 'type', width: 90,
|
||||
render(row) {
|
||||
if (!row.includeInStats) {
|
||||
return h(NTag, { type: 'default', size: 'small' }, { default: () => t('transaction.notIncluded') })
|
||||
}
|
||||
return h(NTag, { type: row.type === 'INCOME' ? 'success' : 'error', size: 'small' }, { default: () => row.type === 'INCOME' ? t('common.types.income') : t('common.types.expense') })
|
||||
},
|
||||
},
|
||||
@@ -524,9 +521,6 @@ function createColumns(): DataTableColumns<TransactionItem> {
|
||||
{
|
||||
title: t('transaction.column.amount'), key: 'amount', width: 120,
|
||||
render(row) {
|
||||
if (!row.includeInStats) {
|
||||
return h('span', { style: { color: '#999', fontWeight: 'bold' } }, `${row.amount.toFixed(2)}`)
|
||||
}
|
||||
return h('span', { style: { color: row.type === 'INCOME' ? '#18a058' : '#d03050', fontWeight: 'bold' } },
|
||||
`${row.type === 'INCOME' ? '+' : '-'}${row.amount.toFixed(2)}`)
|
||||
},
|
||||
@@ -1838,6 +1832,7 @@ onMounted(() => {
|
||||
:loading="loading"
|
||||
:bordered="false"
|
||||
:row-key="(row: TransactionItem) => row.id"
|
||||
:row-class-name="(row: TransactionItem) => row.includeInStats ? '' : 'excluded-row'"
|
||||
v-model:checked-row-keys="checkedTransactionIds"
|
||||
/>
|
||||
|
||||
@@ -2035,4 +2030,17 @@ onMounted(() => {
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
/* 不计入统计的记录整行加删除线 */
|
||||
:deep(.excluded-row .n-data-table-td) {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
/* 类型、金额列保持现状,不划删除线 */
|
||||
:deep(.excluded-row .n-data-table-td[data-col-key="type"]),
|
||||
:deep(.excluded-row .n-data-table-td[data-col-key="amount"]) {
|
||||
text-decoration: none;
|
||||
}
|
||||
/* 备注单元格为块级结构,需单独划线以保持整行效果 */
|
||||
:deep(.excluded-row .remark-text) {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user