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

This commit is contained in:
Bunny 2024-11-29 16:25:23 +08:00
parent 478dee4363
commit ed4233ee23
19 changed files with 173 additions and 16 deletions

View File

@ -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 });
};

View File

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

View File

@ -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,

View File

@ -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);

View File

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

View File

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

View File

@ -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`);
},
/** 获取所有文件类型 */

View File

@ -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>

View File

@ -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>

View File

@ -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

View File

@ -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>

View File

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

View File

@ -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,

View File

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

View File

@ -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

View File

@ -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>

View File

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

View File

@ -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,

View File

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