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' }],
|
||
});
|