68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
|
import { reactive } from 'vue';
|
|||
|
|
import { $t } from '@/plugins/i18n';
|
|||
|
|
import { ElTag, ElText, type FormRules } from 'element-plus';
|
|||
|
|
|
|||
|
|
// 表格列
|
|||
|
|
export const columns: TableColumnList = [
|
|||
|
|
{ type: 'selection', align: 'left' },
|
|||
|
|
{ type: 'index', index: (index: number) => index + 1, label: '序号', width: 60 },
|
|||
|
|
// 金额
|
|||
|
|
{
|
|||
|
|
label: $t('amount'),
|
|||
|
|
prop: 'amount',
|
|||
|
|
sortable: true,
|
|||
|
|
formatter({ type, amount }) {
|
|||
|
|
return type === -1 ? (
|
|||
|
|
<ElText size={'large'} type={'danger'} style={{ fontWeight: 800 }}>
|
|||
|
|
- {amount}￥
|
|||
|
|
</ElText>
|
|||
|
|
) : (
|
|||
|
|
<ElText size={'large'} type={'success'} style={{ fontWeight: 800 }}>
|
|||
|
|
+ {amount}￥
|
|||
|
|
</ElText>
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
width: 200,
|
|||
|
|
},
|
|||
|
|
// 类别
|
|||
|
|
{
|
|||
|
|
label: $t('categoryName'),
|
|||
|
|
prop: 'categoryName',
|
|||
|
|
width: 150,
|
|||
|
|
formatter({ categoryName }) {
|
|||
|
|
return <ElTag effect={'plain'}>{categoryName}</ElTag>;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
// 描述
|
|||
|
|
{ label: $t('description'), prop: 'description' },
|
|||
|
|
// 交易日期
|
|||
|
|
{
|
|||
|
|
label: $t('transactionDate'),
|
|||
|
|
prop: 'transactionDate',
|
|||
|
|
width: 190,
|
|||
|
|
sortable: true,
|
|||
|
|
formatter({ transactionDate }) {
|
|||
|
|
return (
|
|||
|
|
<ElText type={'success'} style={{ fontWeight: 800 }}>
|
|||
|
|
{transactionDate}
|
|||
|
|
</ElText>
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },
|
|||
|
|
{ label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 },
|
|||
|
|
{ label: $t('table.operation'), fixed: 'right', width: 160, slot: 'operation' },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// 添加规则
|
|||
|
|
export const rules = reactive<FormRules>({
|
|||
|
|
// 类型：1 - 收入，-1 - 支出
|
|||
|
|
type: [{ required: true, message: `${$t('input')}${$t('type')}`, trigger: 'blur' }],
|
|||
|
|
// 金额
|
|||
|
|
amount: [{ required: true, message: `${$t('input')}${$t('amount')}`, trigger: 'blur' }],
|
|||
|
|
// 交易日期
|
|||
|
|
transactionDate: [{ required: true, message: `${$t('input')}${$t('transactionDate')}`, trigger: 'blur' }],
|
|||
|
|
// 类别id
|
|||
|
|
categoryId: [{ required: true, message: `${$t('input')}${$t('categoryId')}`, trigger: 'blur' }],
|
|||
|
|
});
|