page: 📄 储值目标完成

.env.development

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

src/enums/baseConstant.tsx

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

src/enums/bill/budget.tsx

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

src/enums/bill/savingGoal.tsx

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

src/store/financial/savingGoal.ts

@@ -14,16 +14,13 @@ export const useSavingGoalStore = defineStore('savingGoalStore', {
 			datalist: [],
 			// 查询表单
 			form: {
-				// 绑定的用户id
+				userId: undefined, // 绑定的用户id
-				userId: undefined,
+				statusType: undefined, // 完成状态
-				// 完成状态
+				savingGoalName: undefined, // 储值目标名称
-				statusType: undefined,
+				amount: undefined, // 目标金额
-				// 储值目标名称
+				duration: undefined, // 目标时长
-				savingGoalName: undefined,
+				startDuration: undefined, // 开始目标时长
-				// 目标金额
+				endDuration: undefined, // 结束目标时长
-				amount: undefined,
-				// 目标时长
-				duration: 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;

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

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

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

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

src/views/financial/category/index.vue

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

src/views/financial/debt-repayment-plan/index.vue

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

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

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

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

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

src/views/financial/debt-tracking/index.vue

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

src/views/financial/debt-tracking/utils/columns.ts

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

src/views/financial/debt-tracking/utils/hooks.ts

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

src/views/financial/saving-goal/index.vue

@@ -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-form-item :label="$t('user')" prop="userId">
-				<el-input v-model="savingGoalStore.form.userId" :placeholder="`${$t('input')}${$t('userId')}`" class="!w-[180px]" clearable />
+				<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">

src/views/financial/saving-goal/saving-goal-dialog.vue

@@ -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-form-item :label="$t('user')" prop="userId">
-			<el-input v-model="form.userId" :placeholder="$t('input') + $t('userId')" autocomplete="off" type="text" />
+			<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>

src/views/financial/saving-goal/utils/columns.tsx

@@ -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' },
 ];
 
 // 添加规则

src/views/financial/saving-goal/utils/hooks.ts

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

src/views/financial/saving-goal/utils/types.ts

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