feat: 🚀 添加预算已使用金额

src/api/v1/financial/admin/budgetCategory.ts

@@ -3,6 +3,20 @@ import type { BaseResult, ResultTable } from '@/api/service/types';
 
 /** 预算分类表---获取预算分类表列表 */
 export const fetchGetBudgetCategoryList = (data: any) => {
+	data = {
+		userId: data.userId,
+		parentId: data.parentId,
+		categoryName: data.categoryName,
+		budgetName: data.budgetName,
+		statusType: data.statusType,
+		amount: data.amount,
+		useAmount: data.useAmount,
+		period: data.period,
+		startPeriod: data.startPeriod,
+		endPeriod: data.endPeriod,
+		pageSize: data.pageSize,
+		currentPage: data.currentPage,
+	};
 	return http.request<BaseResult<ResultTable>>('get', `budgetCategory/getBudgetCategoryList/${data.currentPage}/${data.pageSize}`, { params: data });
 };
 

src/api/v1/financial/user/budgetCategoryUser.ts

@@ -3,6 +3,19 @@ import type { BaseResult, ResultTable } from '@/api/service/types';
 
 /** 预算分类表---获取预算分类表列表 */
 export const fetchGetUserBudgetCategoryList = (data: any) => {
+	data = {
+		parentId: data.parentId,
+		categoryName: data.categoryName,
+		budgetName: data.budgetName,
+		statusType: data.statusType,
+		amount: data.amount,
+		useAmount: data.useAmount,
+		period: data.period,
+		startPeriod: data.startPeriod,
+		endPeriod: data.endPeriod,
+		pageSize: data.pageSize,
+		currentPage: data.currentPage,
+	};
 	return http.request<BaseResult<ResultTable>>('get', `budgetCategory/noManage/getUserBudgetCategoryList/${data.currentPage}/${data.pageSize}`, {
 		params: data,
 	});

src/api/v1/financial/user/debtRepaymentPlanUser.ts

@@ -8,6 +8,8 @@ export const fetchGetUserDebtRepaymentPlanList = (data: any) => {
 		dueDate: data.dueDate,
 		paidAmount: data.paidAmount,
 		paymentStatus: data.paymentStatus,
+		pageSize: data.pageSize,
+		currentPage: data.currentPage,
 	};
 	return http.request<BaseResult<ResultTable>>('get', `debtRepaymentPlan/noManage/getUserDebtRepaymentPlanList/${data.currentPage}/${data.pageSize}`, {
 		params: data,

src/store/financial/budgetCategory.ts

@@ -31,6 +31,8 @@ export const useBudgetCategoryStore = defineStore('budgetCategoryStore', {
 				statusType: undefined,
 				// 预算金额
 				amount: undefined,
+				// 已使用金额
+				useAmount: undefined,
 				// 预算周期
 				period: undefined,
 				// 开始预算时间
@@ -60,10 +62,6 @@ export const useBudgetCategoryStore = defineStore('budgetCategoryStore', {
 
 			// 整理请求参数
 			const data = { ...this.pagination, ...this.form };
-			delete data.pageSizes;
-			delete data.total;
-			delete data.background;
-			delete data.period;
 
 			// 获取预算分类表列表
 			const result = await fetchGetBudgetCategoryList(data);

src/store/financialUser/budgetCategoryUser.ts

@@ -30,6 +30,8 @@ export const userBudgetCategoryUserStore = defineStore('budgetCategoryUserStore'
 				statusType: undefined,
 				// 预算金额
 				amount: undefined,
+				// 已使用金额
+				useAmount: undefined,
 				// 预算周期
 				period: getCurrentMouthDate(),
 				// 开始预算时间
@@ -59,10 +61,6 @@ export const userBudgetCategoryUserStore = defineStore('budgetCategoryUserStore'
 
 			// 整理请求参数
 			const data = { ...this.pagination, ...this.form };
-			delete data.pageSizes;
-			delete data.total;
-			delete data.background;
-			delete data.period;
 
 			// 获取预算分类表列表
 			const result = await fetchGetUserBudgetCategoryList(data);
@@ -74,12 +72,14 @@ export const userBudgetCategoryUserStore = defineStore('budgetCategoryUserStore'
 
 		/** 添加预算分类表 */
 		async addBudgetCategory(data: any) {
+			data.useAmount = Number(data.useAmount) + Number(data.addAmount);
 			const result = await fetchAddUserBudgetCategory(data);
 			return storeMessage(result);
 		},
 
 		/** 修改预算分类表 */
 		async updateBudgetCategory(data: any) {
+			data.useAmount = Number(data.useAmount) + Number(data.addAmount);
 			const result = await fetchUpdateUserBudgetCategory(data);
 			return storeMessage(result);
 		},

src/store/financialUser/debtRepaymentPlanUser.ts

@@ -63,6 +63,7 @@ export const useDebtRepaymentPlanUserStore = defineStore('debtRepaymentPlanUserS
 
 		/** 添加债务还款计划表 */
 		async addDebtRepaymentPlan(data: any) {
+			data.paidAmount = Number(data.paidAmount) + Number(data.addAmount);
 			const result = await fetchAddUserDebtRepaymentPlan(data);
 			return storeMessage(result);
 		},

src/store/monitor/files.ts

@@ -12,6 +12,10 @@ import { pageSizes } from '@/enums/baseConstant';
 import { storeMessage } from '@/utils/message';
 import { storePagination } from '@/store/useStorePagination';
 import { download } from '@/utils/sso';
+import { storageLocal } from '@pureadmin/utils';
+import { userKey } from '@/utils/auth';
+import dayjs from 'dayjs';
+import { $t } from '@/plugins/i18n';
 
 /**
  * 系统文件表 Store
@@ -76,7 +80,10 @@ export const useFilesStore = defineStore('filesStore', {
 		/** 获取添加账单模板文件 */
 		async getAddBillTemplate() {
 			const result = await fetchGetAddBillTemplate();
-			download(result, `bill-add-excel.xlsx`);
+			const userinfo = storageLocal().getItem(userKey);
+			const date = dayjs().format('YYYY-MM-DD');
+
+			download(result, `${userinfo.nickname}-${$t('addNew')}${$t('bill')}-${date}.xlsx`);
 		},
 
 		/** 获取所有文件类型 */

src/views/financial-user/account-bill/bill/add-bull-by-excel.vue

@@ -35,7 +35,12 @@ defineExpose({ formRef });
 </script>
 
 <template>
-	<el-form ref="formRef" :model="form" :rules="{ file: [{ required: true, message: $t('select') + $t('files'), trigger: 'change' }] }" label-width="auto">
+	<el-form
+		ref="formRef"
+		:model="form"
+		:rules="{ file: [{ required: true, message: $t('select') + $t('files'), trigger: 'change' }] }"
+		label-width="auto"
+	>
 		<!-- 文件列表---上传不显示 -->
 		<el-form-item :label="$t('files')" prop="file">
 			<el-upload ref="upload" v-model:file-list="form.file" :auto-upload="false" :limit="1" :on-exceed="handleExceed" class="w-full" drag>

src/views/financial-user/account-bill/bill/bill-dialog.vue

@@ -71,7 +71,13 @@ defineExpose({ formRef });
 
 		<!-- 类别id -->
 		<el-form-item :label="$t('category')" prop="categoryId">
-			<el-select v-model="form.categoryId" :placeholder="$t('select') + $t('category')" clearable filterable @click="categoryUserStore.getCategoryUserAllList()">
+			<el-select
+				v-model="form.categoryId"
+				:placeholder="$t('select') + $t('category')"
+				clearable
+				filterable
+				@click="categoryUserStore.getCategoryUserAllList()"
+			>
 				<el-option v-for="item in categoryUserStore.allCategoryList" :key="item.id" :label="item.categoryName" :navigationBar="false" :value="item.id">
 					<el-text v-if="item.isBuiltin" effect="plain" type="info">{{ item.categoryName }}</el-text>
 					<el-text v-else effect="plain" type="success">{{ item.categoryName }}</el-text>
@@ -95,7 +101,15 @@ defineExpose({ formRef });
 
 		<!-- 金额 -->
 		<el-form-item :label="$t('amount')" prop="amount">
-			<el-input v-model="form.amount" :min="0" :placeholder="$t('input') + $t('amount')" :step="0.01" autocomplete="off" type="number" @keydown.enter="onSubmit" />
+			<el-input
+				v-model="form.amount"
+				:min="0"
+				:placeholder="$t('input') + $t('amount')"
+				:step="0.01"
+				autocomplete="off"
+				type="number"
+				@keydown.enter="onSubmit"
+			/>
 		</el-form-item>
 	</el-form>
 </template>

src/views/financial-user/budget-saving/budget-category/budget-category-dialog.vue

@@ -20,6 +20,10 @@ const props = withDefaults(defineProps<FormProps>(), {
 		statusType: undefined,
 		// 预算金额
 		amount: undefined,
+		// 已使用金额
+		useAmount: undefined,
+		// 需要继续添加的金额
+		addAmount: 0,
 		// 预算周期
 		period: undefined,
 	}),
@@ -50,6 +54,18 @@ const getAllParentList = async () => {
 	}
 };
 
+/** 已还金额自定义验证*/
+const paidAmountValidator = (rule, value, callback) => {
+	const useAmount = Number(form.value.useAmount);
+	const addAmount = Number(form.value.addAmount);
+
+	// 输入的金额大于债务金额
+	if (useAmount + addAmount > form.value.amount) {
+		callback(new Error(`不能大于总金额`));
+	}
+	callback();
+};
+
 onMounted(() => {
 	onSearchUserinfo();
 	getAllParentList();
@@ -99,6 +115,28 @@ defineExpose({ formRef });
 			<el-input v-model="form.amount" :min="0.01" :placeholder="$t('input') + $t('amount')" :step="0.01" autocomplete="off" type="number" />
 		</el-form-item>
 
+		<!-- 已使用金额 -->
+		<el-form-item
+			:label="$t('useAmount')"
+			:rules="[
+				{ required: true, message: `${$t('input')}${$t('useAmount')}`, trigger: 'blur' },
+				{ validator: paidAmountValidator, trigger: 'blur' },
+			]"
+			prop="useAmount"
+		>
+			<el-input
+				v-model="form.useAmount"
+				:min="0.01"
+				:placeholder="$t('input') + $t('useAmount')"
+				:step="0.01"
+				autocomplete="off"
+				class="w-[47%]"
+				type="number"
+			/>
+			➕️
+			<el-input v-model="form.addAmount" :min="0" :placeholder="$t('input')" :step="0.01" autocomplete="off" class="w-[48%]" type="number" />
+		</el-form-item>
+
 		<!-- 预算周期 -->
 		<el-form-item :label="$t('period')" prop="period">
 			<el-date-picker

src/views/financial-user/budget-saving/budget-category/index.vue

@@ -93,6 +93,11 @@ onMounted(() => {
 				<el-input v-model="budgetCategoryStore.form.amount" :placeholder="`${$t('input')}${$t('amount')}`" class="!w-[180px]" clearable />
 			</el-form-item>
 
+			<!-- 已使用金额 -->
+			<el-form-item :label="$t('useAmount')" prop="useAmount">
+				<el-input v-model="budgetCategoryStore.form.useAmount" :placeholder="`${$t('input')}${$t('useAmount')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
 			<!-- 预算周期 -->
 			<el-form-item :label="$t('period')" prop="period">
 				<el-date-picker
@@ -108,7 +113,9 @@ onMounted(() => {
 
 			<!-- 搜索和重置 -->
 			<el-form-item>
-				<el-button :icon="useRenderIcon('ri:search-line')" :loading="budgetCategoryStore.loading" type="primary" @click="onSearch"> {{ $t('search') }} </el-button>
+				<el-button :icon="useRenderIcon('ri:search-line')" :loading="budgetCategoryStore.loading" type="primary" @click="onSearch">
+					{{ $t('search') }}
+				</el-button>
 				<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)"> {{ $t('buttons.reset') }}</el-button>
 			</el-form-item>
 		</el-form>
@@ -175,7 +182,9 @@ onMounted(() => {
 					</template>
 
 					<template #operation="{ row }">
-						<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)"> {{ $t('modify') }} </el-button>
+						<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)">
+							{{ $t('modify') }}
+						</el-button>
 						<el-button :icon="useRenderIcon(AddFill)" :size="size" class="reset-margin" link type="primary" @click="onAdd(row.id)">
 							{{ $t('addNew') }}
 						</el-button>

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

@@ -25,6 +25,19 @@ export const columns: TableColumnList = [
 			);
 		},
 	},
+	// 已使用金额
+	{
+		label: $t('useAmount'),
+		prop: 'useAmount',
+		width: 150,
+		formatter({ useAmount }) {
+			return (
+				<ElText style={{ fontWeight: 800 }} type={'info'} size={'large'}>
+					{useAmount}￥
+				</ElText>
+			);
+		},
+	},
 	// 预算周期
 	{
 		label: $t('period'),
@@ -54,6 +67,8 @@ export const rules = reactive<FormRules>({
 	statusType: [{ required: true, message: `${$t('input')}${$t('statusType')}`, trigger: 'blur' }],
 	// 预算金额
 	amount: [{ required: true, message: `${$t('input')}${$t('amount')}`, trigger: 'blur' }],
+	// 已使用金额
+	useAmount: [{ required: true, message: `${$t('input')}${$t('useAmount')}`, trigger: 'blur' }],
 	// 预算周期
 	period: [{ required: true, message: `${$t('input')}${$t('period')}`, trigger: 'blur' }],
 });

src/views/financial-user/budget-saving/budget-category/utils/hooks.ts

@@ -31,6 +31,8 @@ export function onAdd(parentId: string = '0') {
 				budgetName: undefined,
 				statusType: undefined,
 				amount: undefined,
+				useAmount: undefined,
+				addAmount: 0,
 				period: undefined,
 				startPeriod: undefined,
 				endPeriod: undefined,
@@ -70,6 +72,8 @@ export function onUpdate(row: any) {
 				budgetName: row.budgetName,
 				statusType: row.statusType,
 				amount: row.amount,
+				useAmount: row.useAmount,
+				addAmount: 0,
 				period: [row.startPeriod, row.endPeriod],
 				startPeriod: row.startPeriod,
 				endPeriod: row.endPeriod,

src/views/financial-user/budget-saving/budget-category/utils/types.ts

@@ -10,6 +10,10 @@ export interface FormItemProps {
 	statusType: string;
 	// 预算金额
 	amount: any;
+	// 已使用金额
+	useAmount: any;
+	// 需要继续添加的金额
+	addAmount: any;
 	// 预算周期
 	period: string[];
 	startPeriod: string;

src/views/financial/budget-saving/budget-category/budget-category-dialog.vue

@@ -123,6 +123,11 @@ defineExpose({ formRef });
 			<el-input v-model="form.amount" :min="0.01" :placeholder="$t('input') + $t('amount')" :step="0.01" autocomplete="off" type="number" />
 		</el-form-item>
 
+		<!-- 已使用金额 -->
+		<el-form-item :label="$t('useAmount')" prop="useAmount">
+			<el-input v-model="form.useAmount" :min="0.01" :placeholder="$t('input') + $t('useAmount')" :step="0.01" autocomplete="off" type="number" />
+		</el-form-item>
+
 		<!-- 预算周期 -->
 		<el-form-item :label="$t('period')" prop="period">
 			<el-date-picker

src/views/financial/budget-saving/budget-category/index.vue

@@ -122,6 +122,11 @@ onMounted(() => {
 				<el-input v-model="budgetCategoryStore.form.amount" :placeholder="`${$t('input')}${$t('amount')}`" class="!w-[180px]" clearable />
 			</el-form-item>
 
+			<!-- 已使用金额 -->
+			<el-form-item :label="$t('useAmount')" prop="useAmount">
+				<el-input v-model="budgetCategoryStore.form.useAmount" :placeholder="`${$t('input')}${$t('useAmount')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
 			<!-- 预算周期 -->
 			<el-form-item :label="$t('period')" prop="period">
 				<el-date-picker
@@ -137,7 +142,9 @@ onMounted(() => {
 
 			<!-- 搜索和重置 -->
 			<el-form-item>
-				<el-button :icon="useRenderIcon('ri:search-line')" :loading="budgetCategoryStore.loading" type="primary" @click="onSearch"> {{ $t('search') }} </el-button>
+				<el-button :icon="useRenderIcon('ri:search-line')" :loading="budgetCategoryStore.loading" type="primary" @click="onSearch">
+					{{ $t('search') }}
+				</el-button>
 				<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)"> {{ $t('buttons.reset') }}</el-button>
 			</el-form-item>
 		</el-form>
@@ -204,7 +211,9 @@ onMounted(() => {
 					</template>
 
 					<template #operation="{ row }">
-						<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)"> {{ $t('modify') }} </el-button>
+						<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)">
+							{{ $t('modify') }}
+						</el-button>
 						<el-button :icon="useRenderIcon(AddFill)" :size="size" class="reset-margin" link type="primary" @click="onAdd(row.id)">
 							{{ $t('addNew') }}
 						</el-button>

src/views/financial/budget-saving/budget-category/utils/columns.tsx

@@ -25,6 +25,19 @@ export const columns: TableColumnList = [
 			);
 		},
 	},
+	// 已使用金额
+	{
+		label: $t('useAmount'),
+		prop: 'useAmount',
+		width: 150,
+		formatter({ useAmount }) {
+			return (
+				<ElText style={{ fontWeight: 800 }} type={'info'} size={'large'}>
+					{useAmount}￥
+				</ElText>
+			);
+		},
+	},
 	// 预算周期
 	{
 		label: $t('period'),
@@ -59,6 +72,8 @@ export const rules = reactive<FormRules>({
 	statusType: [{ required: true, message: `${$t('input')}${$t('statusType')}`, trigger: 'blur' }],
 	// 预算金额
 	amount: [{ required: true, message: `${$t('input')}${$t('amount')}`, trigger: 'blur' }],
+	// 已使用金额
+	useAmount: [{ required: true, message: `${$t('input')}${$t('useAmount')}`, trigger: 'blur' }],
 	// 预算周期
 	period: [{ required: true, message: `${$t('input')}${$t('period')}`, trigger: 'blur' }],
 });

src/views/financial/budget-saving/budget-category/utils/hooks.ts

@@ -31,6 +31,7 @@ export function onAdd(parentId: string = '0') {
 				budgetName: undefined,
 				statusType: undefined,
 				amount: undefined,
+				useAmount: undefined,
 				period: undefined,
 				startPeriod: undefined,
 				endPeriod: undefined,
@@ -71,6 +72,7 @@ export function onUpdate(row: any) {
 				budgetName: row.budgetName,
 				statusType: row.statusType,
 				amount: row.amount,
+				useAmount: undefined,
 				period: [row.startPeriod, row.endPeriod],
 				startPeriod: row.startPeriod,
 				endPeriod: row.endPeriod,

src/views/financial/budget-saving/budget-category/utils/types.ts

@@ -12,6 +12,8 @@ export interface FormItemProps {
 	statusType: string;
 	// 预算金额
 	amount: any;
+	// 已使用金额
+	useAmount: any;
 	// 预算周期
 	period: string[];
 	startPeriod: string;