65 lines
2.2 KiB
TypeScript
65 lines
2.2 KiB
TypeScript
|
import { reactive } from 'vue';
|
||
|
|
import { $t } from '@/plugins/i18n';
|
||
|
|
import { 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('categoryName'), prop: 'categoryName' },
|
||
|
|
// 绑定的用户id
|
||
|
|
{ label: $t('username'), prop: 'username', slot: 'username' },
|
||
|
|
// 预算名称
|
||
|
|
{ label: $t('budgetName'), prop: 'budgetName' },
|
||
|
|
// 完成状态
|
||
|
|
{ label: $t('statusType'), prop: 'statusType', slot: 'statusType', width: 100 },
|
||
|
|
// 预算金额
|
||
|
|
{
|
||
|
|
label: $t('amount'),
|
||
|
|
prop: 'amount',
|
||
|
|
width: 150,
|
||
|
|
formatter({ amount }) {
|
||
|
|
return (
|
||
|
|
<ElText style={{ fontWeight: 800 }} type={'info'} size={'large'}>
|
||
|
|
{amount}￥
|
||
|
|
</ElText>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
// 预算周期
|
||
|
|
{
|
||
|
|
label: $t('period'),
|
||
|
|
prop: 'period',
|
||
|
|
formatter({ startPeriod, endPeriod }) {
|
||
|
|
return (
|
||
|
|
<ElText type={'success'} style={{ fontWeight: 800 }}>
|
||
|
|
{startPeriod} ~ {endPeriod}
|
||
|
|
</ElText>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
width: 360,
|
||
|
|
},
|
||
|
|
{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },
|
||
|
|
{ label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 },
|
||
|
|
{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 130 },
|
||
|
|
{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 130 },
|
||
|
|
{ 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' }],
|
||
|
|
// 分类名称
|
||
|
|
categoryName: [{ required: true, message: `${$t('input')}${$t('categoryName')}`, trigger: 'blur' }],
|
||
|
|
// 预算名称
|
||
|
|
budgetName: [{ required: true, message: `${$t('input')}${$t('budgetName')}`, trigger: 'blur' }],
|
||
|
|
// 完成状态
|
||
|
|
statusType: [{ required: true, message: `${$t('input')}${$t('statusType')}`, trigger: 'blur' }],
|
||
|
|
// 预算金额
|
||
|
|
amount: [{ required: true, message: `${$t('input')}${$t('amount')}`, trigger: 'blur' }],
|
||
|
|
// 预算周期
|
||
|
|
period: [{ required: true, message: `${$t('input')}${$t('period')}`, trigger: 'blur' }],
|
||
|
|
});
|