auth/financial-web
auth
/
financial-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

page: 📄 储值目标完成

This commit is contained in:
Bunny 2024-11-15 00:41:32 +08:00
parent 0514b7ade8
commit 4d511295cc
19 changed files with 344 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@ -1,5 +1,5 @@
# 平台本地运行端口号
VITE_PORT=7000
VITE_PORT=7700
# 预发布环境路由历史模式（Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"）
VITE_ROUTER_HISTORY="hash"

59
src/enums/baseConstant.tsx
View File

@ -1,6 +1,5 @@
import { computed } from 'vue';
import { $t } from '@/plugins/i18n';
import { ElTag } from 'element-plus';
/** 是否默认 */
export const isDefaultOptions = [
@ -45,64 +44,6 @@ export const incomeOrExpend = [
{ value: -1, label: $t('expend') },
];
// 预算状态类型
export const budgetStateType = [
{
value: 'InProgress',
label: $t('inProgress'),
el: (
<ElTag type={'primary'} effect={'plain'}>
{$t('inProgress')}
</ElTag>
),
},
{
value: 'Completed',
label: $t('completed'),
el: (
<ElTag type={'success'} effect={'plain'}>
{$t('completed')}
</ElTag>
),
},
{
value: 'OverSpending',
label: $t('overSpending'),
el: (
<ElTag type={'danger'} effect={'plain'}>
{$t('overSpending')}
</ElTag>
),
},
{
value: 'NotStarted',
label: $t('notStarted'),
el: (
<ElTag type={'warning'} effect={'plain'}>
{$t('notStarted')}
</ElTag>
),
},
{
value: 'Pause',
label: $t('pause'),
el: (
<ElTag type={'warning'} effect={'plain'}>
{$t('pause')}
</ElTag>
),
},
{
value: 'Cancel',
label: $t('cancel'),
el: (
<ElTag type={'info'} effect={'plain'}>
{$t('cancel')}
</ElTag>
),
},
];
/** 分页默认数组个数 */
export const pageSizes: number[] = [15, 30, 50, 100, 150];
export const tableSelectButtonClass = computed(() => ['!h-[20px]', 'reset-margin', '!text-gray-500', 'dark:!text-white', 'dark:hover:!text-primary']);

60
src/enums/bill/budget.tsx Normal file
View File

@ -0,0 +1,60 @@
// 预算状态类型
import { $t } from '@/plugins/i18n';
import { ElTag } from 'element-plus';
export const budget = [
{
value: 'InProgress',
label: $t('inProgress'),
el: () => (
<ElTag type={'primary'} effect={'plain'}>
{$t('inProgress')}
</ElTag>
),
},
{
value: 'Completed',
label: $t('completed'),
el: () => (
<ElTag type={'success'} effect={'plain'}>
{$t('completed')}
</ElTag>
),
},
{
value: 'OverSpending',
label: $t('overSpending'),
el: () => (
<ElTag type={'danger'} effect={'plain'}>
{$t('overSpending')}
</ElTag>
),
},
{
value: 'NotStarted',
label: $t('notStarted'),
el: () => (
<ElTag type={'warning'} effect={'plain'}>
{$t('notStarted')}
</ElTag>
),
},
{
value: 'Pause',
label: $t('pause'),
el: () => (
<ElTag type={'warning'} effect={'plain'}>
{$t('pause')}
</ElTag>
),
},
{
value: 'Cancel',
label: $t('cancel'),
el: () => (
<ElTag type={'info'} effect={'plain'}>
{$t('cancel')}
</ElTag>
),
},
];

58
src/enums/bill/savingGoal.tsx Normal file
View File

@ -0,0 +1,58 @@
import { $t } from '@/plugins/i18n';
export const savingGoal = [
{
value: 'InProgress',
label: $t('inProgress'),
el: () => (
<ElTag type={'primary'} effect={'plain'}>
{$t('inProgress')}
</ElTag>
),
},
{
value: 'Uncompleted',
label: $t('uncompleted'),
el: () => (
<ElTag type={'primary'} effect={'plain'}>
{$t('uncompleted')}
</ElTag>
),
},
{
value: 'Completed',
label: $t('completed'),
el: () => (
<ElTag type={'success'} effect={'plain'}>
{$t('completed')}
</ElTag>
),
},
{
value: 'NotStarted',
label: $t('notStarted'),
el: () => (
<ElTag type={'warning'} effect={'plain'}>
{$t('notStarted')}
</ElTag>
),
},
{
value: 'Pause',
label: $t('pause'),
el: () => (
<ElTag type={'warning'} effect={'plain'}>
{$t('pause')}
</ElTag>
),
},
{
value: 'Cancel',
label: $t('cancel'),
el: () => (
<ElTag type={'info'} effect={'plain'}>
{$t('cancel')}
</ElTag>
),
},
];

21
src/store/financial/savingGoal.ts
View File

@ -14,16 +14,13 @@ export const useSavingGoalStore = defineStore('savingGoalStore', {
datalist: [],
// 查询表单
form: {
// 绑定的用户id
userId: undefined,
// 完成状态
statusType: undefined,
// 储值目标名称
savingGoalName: undefined,
// 目标金额
amount: undefined,
// 目标时长
duration: undefined,
userId: undefined, // 绑定的用户id
statusType: undefined, // 完成状态
savingGoalName: undefined, // 储值目标名称
amount: undefined, // 目标金额
duration: undefined, // 目标时长
startDuration: undefined, // 开始目标时长
endDuration: undefined, // 结束目标时长
},
// 分页查询结果
pagination: {
@ -40,6 +37,10 @@ export const useSavingGoalStore = defineStore('savingGoalStore', {
actions: {
/** 获取用户储值 */
async getSavingGoalList() {
if (this.form.duration) {
this.form.startDuration = this.form.duration[0];
this.form.endDuration = this.form.duration[1];
}
// 整理请求参数
const data = { ...this.pagination, ...this.form };
delete data.pageSizes;

4
src/views/financial/budget-category/budget-category-dialog.vue
View File

@ -6,8 +6,8 @@ import { FormProps } from '@/views/financial/budget-category/utils/types';
import { $t } from '@/plugins/i18n';
import LoadingSvg from '@/assets/svg/loading.svg';
import { useAdminUserStore } from '@/store/system/adminUser';
import { budgetStateType } from '@/enums/baseConstant';
import { fetchGetAllParentList } from '@/api/v1/financial/budgetCategory';
import { budget } from '@/enums/bill/budget';
const props = withDefaults(defineProps<FormProps>(), {
formInline: () => ({
@ -114,7 +114,7 @@ defineExpose({ formRef });
<!-- 完成状态 -->
<el-form-item :label="$t('statusType')" prop="statusType">
<el-select v-model="form.statusType" :placeholder="$t('statusType')" clearable filterable remote remote-show-suffix>
<el-option v-for="item in budgetStateType" :key="item.value" :label="item.label" :value="item.value" />
<el-option v-for="item in budget" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>

8
src/views/financial/budget-category/index.vue
View File

@ -15,7 +15,7 @@ import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
import { FormInstance } from 'element-plus';
import { useAdminUserStore } from '@/store/system/adminUser';
import LoadingSvg from '@/assets/svg/loading.svg';
import { budgetStateType } from '@/enums/baseConstant';
import { budget } from '@/enums/bill/budget';
import { handleTree } from '@pureadmin/utils';
const tableRef = ref();
@ -113,7 +113,7 @@ onMounted(() => {
remote
remote-show-suffix
>
<el-option v-for="item in budgetStateType" :key="item.value" :label="item.label" :value="item.value" />
<el-option v-for="item in budget" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
@ -145,7 +145,7 @@ onMounted(() => {
:columns="columns"
:isExpandAll="true"
:tableRef="tableRef?.getTableRef()"
title="预算分类"
:title="$t('budgetCategory')"
@fullscreen="tableRef.setAdaptive()"
@refresh="onSearch"
>
@ -181,7 +181,7 @@ onMounted(() => {
@page-current-change="onCurrentPageChange"
>
<template #statusType="{ row }">
<component :is="budgetStateType.find(item => item.value === row.statusType).el" />
<component :is="budget.find(item => item.value === row.statusType).el" />
</template>
<template #username="{ row }">

2
src/views/financial/category/index.vue
View File

@ -110,7 +110,7 @@ onMounted(() => {
</el-form-item>
</el-form>
<PureTableBar :columns="columns" title="分类信息" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
<PureTableBar :columns="columns" :title="$t('category')" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
<template #buttons>
<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> {{ $t('addNew') }}</el-button>

15
src/views/financial/debt-repayment-plan/index.vue
View File

@ -12,6 +12,7 @@ import { $t } from '@/plugins/i18n';
import { useDebtRepaymentPlanStore } from '@/store/financial/debtRepaymentPlan';
import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
import { FormInstance } from 'element-plus';
import { selectUserinfo } from '@/components/Table/Userinfo/columns';
const tableRef = ref();
const formRef = ref();
@ -81,7 +82,7 @@ onMounted(() => {
</el-form-item>
</el-form>
<PureTableBar :columns="columns" title="债务还款计划表" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
<PureTableBar :columns="columns" :title="$t('debtRepaymentPlan')" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
<template #buttons>
<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> {{ $t('addNew') }}</el-button>
@ -112,6 +113,18 @@ onMounted(() => {
@selection-change="onSelectionChange"
@page-current-change="onCurrentPageChange"
>
<template #createUser="{ row }">
<el-button v-show="row.createUser" link type="primary" @click="selectUserinfo(row.createUser)">
{{ row.createUsername }}
</el-button>
</template>
<template #updateUser="{ row }">
<el-button v-show="row.updateUser" link type="primary" @click="selectUserinfo(row.updateUser)">
{{ row.updateUsername }}
</el-button>
</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(AddFill)" :size="size" class="reset-margin" link type="primary" @click="onAdd"> {{ $t('addNew') }} </el-button>

2
src/views/financial/debt-repayment-plan/utils/columns.ts
View File

@ -20,6 +20,8 @@ export const columns: TableColumnList = [
{ label: $t('paymentStatus'), prop: 'paymentStatus' },
{ 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' },
];

2
src/views/financial/debt-repayment-plan/utils/hooks.ts
View File

@ -54,7 +54,7 @@ export function onAdd() {
/** 更新债务还款计划表 */
export function onUpdate(row: any) {
addDialog({
title: `${$t('modify')}${$t('debt-repayment-plan')}`,
title: `${$t('modify')}${$t('debtRepaymentPlan')}`,
width: '30%',
props: {
formInline: {

15
src/views/financial/debt-tracking/index.vue
View File

@ -12,6 +12,7 @@ import { $t } from '@/plugins/i18n';
import { useDebtTrackingStore } from '@/store/financial/debtTracking';
import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
import { FormInstance } from 'element-plus';
import { selectUserinfo } from '@/components/Table/Userinfo/columns';
const tableRef = ref();
const formRef = ref();
@ -84,7 +85,7 @@ onMounted(() => {
</el-form-item>
</el-form>
<PureTableBar :columns="columns" title="债务追踪" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
<PureTableBar :columns="columns" :title="$t('debtTracking')" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
<template #buttons>
<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> {{ $t('addNew') }}</el-button>
@ -115,6 +116,18 @@ onMounted(() => {
@selection-change="onSelectionChange"
@page-current-change="onCurrentPageChange"
>
<template #createUser="{ row }">
<el-button v-show="row.createUser" link type="primary" @click="selectUserinfo(row.createUser)">
{{ row.createUsername }}
</el-button>
</template>
<template #updateUser="{ row }">
<el-button v-show="row.updateUser" link type="primary" @click="selectUserinfo(row.updateUser)">
{{ row.updateUsername }}
</el-button>
</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(AddFill)" :size="size" class="reset-margin" link type="primary" @click="onAdd"> {{ $t('addNew') }} </el-button>

2
src/views/financial/debt-tracking/utils/columns.ts
View File

@ -20,6 +20,8 @@ export const columns: TableColumnList = [
{ label: $t('dueDate'), prop: 'dueDate' },
{ 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' },
];

2
src/views/financial/debt-tracking/utils/hooks.ts
View File

@ -22,7 +22,7 @@ export async function onSearch() {
/** 添加债务追踪 */
export function onAdd() {
addDialog({
title: `${$t('addNew')}${$t('debt-tracking')}`,
title: `${$t('addNew')}${$t('debtTracking')}`,
width: '30%',
props: {
formInline: {

82
src/views/financial/saving-goal/index.vue
View File

@ -12,9 +12,19 @@ import { $t } from '@/plugins/i18n';
import { useSavingGoalStore } from '@/store/financial/savingGoal';
import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
import { FormInstance } from 'element-plus';
import { useAdminUserStore } from '@/store/system/adminUser';
import LoadingSvg from '@/assets/svg/loading.svg';
import { budget } from '@/enums/bill/budget';
import { selectUserinfo } from '@/components/Table/Userinfo/columns';
import { savingGoal } from '@/enums/bill/savingGoal';
const tableRef = ref();
const formRef = ref();
// 用户信息列表
const userDataList = ref();
// 搜索用户加载
const loading = ref(false);
const adminUserStore = useAdminUserStore();
const savingGoalStore = useSavingGoalStore();
/** 当前页改变时 */
@ -34,10 +44,20 @@ const onSelectionChange = (rows: Array<any>) => {
deleteIds.value = rows.map((row: any) => row.id);
};
/** 搜索 */
const onSearchUserinfo = async (keyword: string) => {
loading.value = true;
userDataList.value = await adminUserStore.queryUser({ keyword });
loading.value = false;
};
/** 重置表单 */
const resetForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.resetFields();
savingGoalStore.form.duration = undefined;
savingGoalStore.form.startDuration = undefined;
savingGoalStore.form.endDuration = undefined;
await onSearch();
};
@ -50,13 +70,32 @@ onMounted(() => {
<div class="main">
<el-form ref="formRef" :inline="true" :model="savingGoalStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
<!-- 绑定的用户id -->
<el-form-item :label="$t('userId')" prop="userId">
<el-input v-model="savingGoalStore.form.userId" :placeholder="`${$t('input')}${$t('userId')}`" class="!w-[180px]" clearable />
<el-form-item :label="$t('user')" prop="userId">
<el-select
v-model="savingGoalStore.form.userId"
:loading="loading"
:placeholder="$t('user')"
:remote-method="onSearchUserinfo"
class="!w-[180px]"
clearable
filterable
remote
remote-show-suffix
>
<el-option v-for="item in userDataList" :key="item.id" :label="item.username" :value="item.id" />
<template #loading>
<el-icon class="is-loading">
<LoadingSvg />
</el-icon>
</template>
</el-select>
</el-form-item>
<!-- 完成状态 -->
<el-form-item :label="$t('statusType')" prop="statusType">
<el-input v-model="savingGoalStore.form.statusType" :placeholder="`${$t('input')}${$t('statusType')}`" class="!w-[180px]" clearable />
<el-select v-model="savingGoalStore.form.statusType" :placeholder="$t('statusType')" class="!w-[180px]" clearable filterable remote remote-show-suffix>
<el-option v-for="item in savingGoal" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<!-- 储值目标名称 -->
@ -71,15 +110,25 @@ onMounted(() => {
<!-- 目标时长 -->
<el-form-item :label="$t('duration')" prop="duration">
<el-input v-model="savingGoalStore.form.duration" :placeholder="`${$t('input')}${$t('duration')}`" class="!w-[180px]" clearable />
<el-date-picker
v-model="savingGoalStore.form.duration"
:end-placeholder="$t('endTime')"
:start-placeholder="$t('startTime')"
class="!w-[180px]"
time-format="YYYY-MM-DD HH:mm:ss"
type="datetimerange"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
<!-- 搜索和重置 -->
<el-form-item>
<el-button :icon="useRenderIcon('ri:search-line')" :loading="savingGoalStore.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>
<PureTableBar :columns="columns" title="用户储值" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
<PureTableBar :columns="columns" :title="$t('savingGoal')" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
<template #buttons>
<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> {{ $t('addNew') }}</el-button>
@ -110,9 +159,30 @@ onMounted(() => {
@selection-change="onSelectionChange"
@page-current-change="onCurrentPageChange"
>
<template #statusType="{ row }">
<component :is="budget.find(item => item.value === row.statusType).el" />
</template>
<template #username="{ row }">
<el-button v-show="row.username" link type="primary" @click="selectUserinfo(row.userId)">
{{ row.username }}
</el-button>
</template>
<template #createUser="{ row }">
<el-button v-show="row.createUser" link type="primary" @click="selectUserinfo(row.createUser)">
{{ row.createUsername }}
</el-button>
</template>
<template #updateUser="{ row }">
<el-button v-show="row.updateUser" link type="primary" @click="selectUserinfo(row.updateUser)">
{{ row.updateUsername }}
</el-button>
</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(AddFill)" :size="size" class="reset-margin" link type="primary" @click="onAdd"> {{ $t('addNew') }} </el-button>
<el-popconfirm :title="`${$t('delete')}?`" @confirm="onDelete(row)">
<template #reference>
<el-button :icon="useRenderIcon(Delete)" :size="size" class="reset-margin" link type="primary">

56
src/views/financial/saving-goal/saving-goal-dialog.vue
View File

@ -1,9 +1,12 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { onMounted, ref } from 'vue';
import { FormInstance } from 'element-plus';
import { rules } from '@/views/financial/saving-goal/utils/columns';
import { FormProps } from '@/views/financial/saving-goal/utils/types';
import { $t } from '@/plugins/i18n';
import LoadingSvg from '@/assets/svg/loading.svg';
import { useAdminUserStore } from '@/store/system/adminUser';
import { savingGoal } from '@/enums/bill/savingGoal';
const props = withDefaults(defineProps<FormProps>(), {
formInline: () => ({
@ -22,6 +25,22 @@ const props = withDefaults(defineProps<FormProps>(), {
const formRef = ref<FormInstance>();
const form = ref(props.formInline);
// 用户信息列表
const userDataList = ref();
// 搜索用户加载
const loading = ref(false);
const adminUserStore = useAdminUserStore();
/** 搜索 */
const onSearchUserinfo = async (keyword: string) => {
loading.value = true;
userDataList.value = await adminUserStore.queryUser({ keyword });
loading.value = false;
};
onMounted(() => {
onSearchUserinfo();
});
defineExpose({ formRef });
</script>
@ -29,13 +48,31 @@ defineExpose({ formRef });
<template>
<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
<!-- 绑定的用户id -->
<el-form-item :label="$t('userId')" prop="userId">
<el-input v-model="form.userId" :placeholder="$t('input') + $t('userId')" autocomplete="off" type="text" />
<el-form-item :label="$t('user')" prop="userId">
<el-select
v-model="form.userId"
:loading="loading"
:placeholder="$t('user')"
:remote-method="onSearchUserinfo"
clearable
filterable
remote
remote-show-suffix
>
<el-option v-for="item in userDataList" :key="item.id" :label="item.username" :value="item.id" />
<template #loading>
<el-icon class="is-loading">
<LoadingSvg />
</el-icon>
</template>
</el-select>
</el-form-item>
<!-- 完成状态 -->
<el-form-item :label="$t('statusType')" prop="statusType">
<el-input v-model="form.statusType" :placeholder="$t('input') + $t('statusType')" autocomplete="off" type="text" />
<el-select v-model="form.statusType" :placeholder="$t('select') + $t('statusType')" clearable filterable remote remote-show-suffix>
<el-option v-for="item in savingGoal" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<!-- 储值目标名称 -->
@ -45,12 +82,19 @@ defineExpose({ formRef });
<!-- 目标金额 -->
<el-form-item :label="$t('amount')" prop="amount">
<el-input v-model="form.amount" :placeholder="$t('input') + $t('amount')" autocomplete="off" type="text" />
<el-input v-model="form.amount" :placeholder="$t('input') + $t('amount')" :step="0.01" autocomplete="off" type="number" />
</el-form-item>
<!-- 目标时长 -->
<el-form-item :label="$t('duration')" prop="duration">
<el-input v-model="form.duration" :placeholder="$t('input') + $t('duration')" autocomplete="off" type="text" />
<el-date-picker
v-model="form.duration"
:end-placeholder="$t('endTime')"
:start-placeholder="$t('startTime')"
time-format="YYYY-MM-DD HH:mm:ss"
type="datetimerange"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
</el-form>
</template>

39
src/views/financial/saving-goal/utils/columns.ts → src/views/financial/saving-goal/utils/columns.tsx
View File

@ -1,24 +1,49 @@
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 },
// 绑定的用户id
{ label: $t('userId'), prop: 'userId' },
// 完成状态
{ label: $t('statusType'), prop: 'statusType' },
{ label: $t('statusType'), prop: 'statusType', slot: 'statusType' },
// 储值目标名称
{ label: $t('savingGoalName'), prop: 'savingGoalName' },
// 目标金额
{ label: $t('amount'), prop: 'amount' },
// 预算金额
{
label: $t('amount'),
prop: 'amount',
width: 150,
formatter({ amount }) {
return (
<ElText style={{ fontWeight: 800 }} type={'info'} size={'large'}>
{amount}￥
</ElText>
);
},
},
// 目标时长
{ label: $t('duration'), prop: 'duration' },
{
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: 210, slot: 'operation' },
// 绑定的用户id
{ label: $t('username'), prop: 'username', slot: 'username', width: 130 },
{ 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: 160, slot: 'operation' },
];
// 添加规则

14
src/views/financial/saving-goal/utils/hooks.ts
View File

@ -22,7 +22,7 @@ export async function onSearch() {
/** 添加用户储值 */
export function onAdd() {
addDialog({
title: `${$t('addNew')}${$t('saving-goal')}`,
title: `${$t('addNew')}${$t('savingGoal')}`,
width: '30%',
props: {
formInline: {
@ -42,6 +42,10 @@ export function onAdd() {
formRef.value.formRef.validate(async (valid: any) => {
if (!valid) return;
// 格式化开始时间和结束时间
form.startDuration = form.duration[0];
form.endDuration = form.duration[1];
const result = await savingGoalStore.addSavingGoal(form);
if (!result) return;
done();
@ -54,7 +58,7 @@ export function onAdd() {
/** 更新用户储值 */
export function onUpdate(row: any) {
addDialog({
title: `${$t('modify')}${$t('saving-goal')}`,
title: `${$t('modify')}${$t('savingGoal')}`,
width: '30%',
props: {
formInline: {
@ -62,7 +66,7 @@ export function onUpdate(row: any) {
statusType: row.statusType,
savingGoalName: row.savingGoalName,
amount: row.amount,
duration: row.duration,
duration: [row.startDuration, row.endDuration],
},
},
draggable: true,
@ -74,6 +78,10 @@ export function onUpdate(row: any) {
formRef.value.formRef.validate(async (valid: any) => {
if (!valid) return;
// 格式化开始时间和结束时间
form.startDuration = form.duration[0];
form.endDuration = form.duration[1];
const result = await savingGoalStore.updateSavingGoal({ ...form, id: row.id });
if (!result) return;
done();

4
src/views/financial/saving-goal/utils/types.ts
View File

@ -10,6 +10,10 @@ export interface FormItemProps {
amount: any;
// 目标时长
duration: string;
// 开始目标时长
startDuration: string;
// 结束目标时长
endDuration: string;
}
// 添加或修改表单Props