financial-web/src/views/financial-user/budget-saving/saving-goal/utils/columns.tsx

import { reactive } from 'vue';
import { $t } from '@/plugins/i18n';
import type { FormRules } from 'element-plus';
import { ElText } from 'element-plus';

// 表格列
export const columns: TableColumnList = [
	{ type: 'selection', align: 'left' },
	{ type: 'index', index: (index: number) => index + 1, label: '序号', width: 60 },
	// 完成状态
	{ label: $t('statusType'), prop: 'statusType', slot: 'statusType' },
	// 储值目标名称
	{ label: $t('savingGoalName'), prop: 'savingGoalName' },
	// 预算金额
	{
		label: $t('amount'),
		prop: 'amount',
		width: 150,
		formatter({ amount }) {
			return (
				<ElText style={{ fontWeight: 800 }} type={'info'} size={'large'}>
					{amount}￥
				</ElText>
			);
		},
	},
	// 已存入金额
	{
		label: $t('amountDeposited'),
		prop: 'amountDeposited',
		width: 150,
		formatter({ amountDeposited }) {
			return (
				<ElText style={{ fontWeight: 800 }} type={'info'} size={'large'}>
					{amountDeposited}￥
				</ElText>
			);
		},
	},
	// 目标时长
	{
		label: $t('duration'),
		prop: 'duration',
		formatter({ startDuration, endDuration }) {
			return (
				<ElText type={'success'} style={{ fontWeight: 800 }}>
					{startDuration} ~ {endDuration}
				</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.operation'), fixed: 'right', width: 160, slot: 'operation' },
];

// 添加规则
export const rules = reactive<FormRules>({
	// 完成状态
	statusType: [{ required: true, message: `${$t('input')}${$t('statusType')}`, trigger: 'blur' }],
	// 储值目标名称
	savingGoalName: [{ required: true, message: `${$t('input')}${$t('savingGoalName')}`, trigger: 'blur' }],
	// 目标金额
	amount: [{ required: true, message: `${$t('input')}${$t('amount')}`, trigger: 'blur' }],
	// 已存入金额
	amountDeposited: [{ required: true, message: `${$t('input')}${$t('amountDeposited')}`, trigger: 'blur' }],
	// 目标时长
	duration: [{ required: true, message: `${$t('input')}${$t('duration')}`, trigger: 'blur' }],
});