financial-web/src/views/financial-user/debt/debt-tracking/utils/columns.tsx

66 lines
2.3 KiB
TypeScript
Raw Normal View History

2024-11-11 16:42:58 +08:00
import { reactive } from 'vue';
import { $t } from '@/plugins/i18n';
import { ElText, type FormRules } from 'element-plus';
2024-11-11 16:42:58 +08:00
// 表格列
export const columns: TableColumnList = [
{ type: 'selection', align: 'left' },
{ type: 'index', index: (index: number) => index + 1, label: '序号', width: 60 },
// 债务人姓名
{ label: $t('debtorName'), prop: 'debtorName' },
// 债务金额
{
label: $t('debtAmount'),
prop: 'debtAmount',
formatter({ debtAmount }) {
return (
<ElText style={{ fontWeight: 800 }} type={'info'} size={'large'}>
{debtAmount}
</ElText>
);
},
width: 150,
},
2024-11-11 16:42:58 +08:00
// 债务类型
{ label: $t('debtType'), prop: 'debtType', slot: 'debtType', width: 130 },
2024-11-11 16:42:58 +08:00
// 债务状态
{ label: $t('debtStatus'), prop: 'debtStatus', slot: 'debtStatus', width: 130 },
2024-11-11 16:42:58 +08:00
// 还款截止日期
{
label: $t('dueDate'),
prop: 'dueDate',
formatter({ dueDate }) {
return (
<ElText type={'danger'} style={{ fontWeight: 800 }}>
{dueDate}
</ElText>
);
},
width: 190,
sortable: true,
},
2024-11-11 16:42:58 +08:00
{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },
{ label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 },
// 绑定的用户
{ label: $t('username'), prop: 'username', slot: 'username', width: 130 },
2024-11-15 00:41:32 +08:00
{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 130 },
{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 130 },
2024-11-11 16:42:58 +08:00
{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },
];
// 添加规则
export const rules = reactive<FormRules>({
// 绑定的用户
userId: [{ required: true, message: `${$t('input')}${$t('userId')}`, trigger: 'blur' }],
// 债务人姓名
debtorName: [{ required: true, message: `${$t('input')}${$t('debtorName')}`, trigger: 'blur' }],
// 债务金额
debtAmount: [{ required: true, message: `${$t('input')}${$t('debtAmount')}`, trigger: 'blur' }],
// 债务类型
debtType: [{ required: true, message: `${$t('input')}${$t('debtType')}`, trigger: 'blur' }],
// 债务状态
debtStatus: [{ required: true, message: `${$t('input')}${$t('debtStatus')}`, trigger: 'blur' }],
// 还款截止日期
dueDate: [{ required: true, message: `${$t('input')}${$t('dueDate')}`, trigger: 'blur' }],
});