optimize: ♻️ 重构项目,修改路由排序缺陷

src/layout/components/lay-bill/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onAdd } from '@/views/financial-user/bill-user/utils/hooks';
+import { onAdd } from '@/views/financial-user/account-bill/bill/utils/hooks';
 </script>
 
 <template>

src/router/modules/bill.ts

@@ -6,14 +6,14 @@ export default [
 		redirect: '/financial/bill-user',
 		meta: {
 			icon: 'mdi:finance',
-			title: 'financialmanagement',
+			title: 'financialManagement',
 		},
 		children: [
 			// 账单查询
 			{
 				path: '/financial/bill-user',
 				name: 'Bill',
-				component: () => import('@/views/financial-user/bill-user/index.vue'),
+				component: () => import('@/views/financial-user/account-bill/bill/index.vue'),
 				meta: {
 					icon: 'grommet-icons:money',
 					title: 'billManagement',
@@ -21,9 +21,9 @@ export default [
 			},
 			// 用户分类
 			{
-				path: '/financial/category-user',
+				path: '/financial/category',
 				name: 'CategoryUser',
-				component: () => import('@/views/financial-user/category-user/index.vue'),
+				component: () => import('@/views/financial-user/account-bill/category/index.vue'),
 				meta: {
 					icon: 'iconamoon:category',
 					title: 'categoryUserManagement',

src/utils/message.ts

@@ -83,7 +83,7 @@ export const storeMessage = (result: BaseResult<any>) => {
 	if (result.code !== 200) {
 		return false;
 	}
-	message(result.message, { type: 'success' });
+	message(result.message, { type: 'success', duration: 3666 });
 	return true;
 };
 

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

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 import { FormInstance } from 'element-plus';
-import { rules } from '@/views/financial-user/bill-user/utils/columns';
+import { rules } from '@/views/financial-user/account-bill/bill/utils/columns';
-import { FormProps } from '@/views/financial-user/bill-user/utils/types';
+import { FormProps } from '@/views/financial-user/account-bill/bill/utils/types';
 import { $t } from '@/plugins/i18n';
 import { incomeOrExpend } from '@/enums/baseConstant';
 import { useBillUserStore } from '@/store/financialUser/billUser';
-import { onSearch } from '@/views/financial-user/bill-user/utils/hooks';
+import { onSearch } from '@/views/financial-user/account-bill/bill/utils/hooks';
 import { useCategoryUserStore } from '@/store/financialUser/categoryUser';
 
 const props = withDefaults(defineProps<FormProps>(), {

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

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
-import { columns } from '@/views/financial-user/bill-user/utils/columns';
+import { columns } from '@/views/financial-user/account-bill/bill/utils/columns';
 import PureTableBar from '@/components/TableBar/src/bar';
 import AddFill from '@iconify-icons/ri/add-circle-line';
 import PureTable from '@pureadmin/table';
-import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/financial-user/bill-user/utils/hooks';
+import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/financial-user/account-bill/bill/utils/hooks';
 import Delete from '@iconify-icons/ep/delete';
 import EditPen from '@iconify-icons/ep/edit-pen';
 import Refresh from '@iconify-icons/ep/refresh';

src/views/financial-user/account-bill/bill/utils/hooks.ts

@@ -1,9 +1,9 @@
 import { addDialog, closeDialog } from '@/components/BaseDialog/index';
-import BillDialog from '@/views/financial-user/bill-user/bill-dialog.vue';
+import BillDialog from '@/views/financial-user/account-bill/bill/bill-dialog.vue';
 import { useBillUserStore } from '@/store/financialUser/billUser';
 import { h, ref } from 'vue';
 import { message, messageBox } from '@/utils/message';
-import type { FormItemProps } from '@/views/financial-user/bill-user/utils/types';
+import type { FormItemProps } from '@/views/financial-user/account-bill/bill/utils/types';
 import { $t } from '@/plugins/i18n';
 import DeleteBatchDialog from '@/components/Table/DeleteBatchDialog.vue';
 import dayjs from 'dayjs';

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

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import { FormInstance } from 'element-plus';
-import { rules } from '@/views/financial-user/category-user/utils/columns';
+import { rules } from '@/views/financial-user/account-bill/category/utils/columns';
-import { FormProps } from '@/views/financial-user/category-user/utils/types';
+import { FormProps } from '@/views/financial-user/account-bill/category/utils/types';
 import { $t } from '@/plugins/i18n';
 
 const props = withDefaults(defineProps<FormProps>(), {

src/views/financial-user/account-bill/category/index.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
-import { columns } from '@/views/financial-user/category-user/utils/columns';
+import { columns } from '@/views/financial-user/account-bill/category/utils/columns';
 import PureTableBar from '@/components/TableBar/src/bar';
 import AddFill from '@iconify-icons/ri/add-circle-line';
 import PureTable from '@pureadmin/table';
-import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/financial-user/category-user/utils/hooks';
+import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/financial-user/account-bill/category/utils/hooks';
 import Delete from '@iconify-icons/ep/delete';
 import EditPen from '@iconify-icons/ep/edit-pen';
 import Refresh from '@iconify-icons/ep/refresh';

src/views/financial-user/account-bill/category/utils/hooks.ts

@@ -1,9 +1,9 @@
 import { addDialog } from '@/components/BaseDialog/index';
-import CategoryUserDialog from '@/views/financial-user/category-user/category-user-dialog.vue';
+import CategoryUserDialog from '@/views/financial-user/account-bill/category/category-user-dialog.vue';
 import { useCategoryUserStore } from '@/store/financialUser/categoryUser';
 import { h, ref } from 'vue';
 import { message, messageBox } from '@/utils/message';
-import type { FormItemProps } from '@/views/financial-user/category-user/utils/types';
+import type { FormItemProps } from '@/views/financial-user/account-bill/category/utils/types';
 import { $t } from '@/plugins/i18n';
 import DeleteBatchDialog from '@/components/Table/DeleteBatchDialog.vue';
 

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

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 import { FormInstance } from 'element-plus';
-import { rules } from '@/views/financial/budget-category/utils/columns';
+import { rules } from '@/views/financial/budget-saving/budget-category/utils/columns';
-import { FormProps } from '@/views/financial/budget-category/utils/types';
+import { FormProps } from '@/views/financial/budget-saving/budget-category/utils/types';
 import { $t } from '@/plugins/i18n';
 import LoadingSvg from '@/assets/svg/loading.svg';
 import { useAdminUserStore } from '@/store/system/adminUser';

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

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref } from 'vue';
-import { columns } from '@/views/financial/budget-category/utils/columns';
+import { columns } from '@/views/financial/budget-saving/budget-category/utils/columns';
 import PureTableBar from '@/components/TableBar/src/bar';
 import AddFill from '@iconify-icons/ri/add-circle-line';
 import PureTable from '@pureadmin/table';
-import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/financial/budget-category/utils/hooks';
+import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/financial/budget-saving/budget-category/utils/hooks';
 import Delete from '@iconify-icons/ep/delete';
 import EditPen from '@iconify-icons/ep/edit-pen';
 import Refresh from '@iconify-icons/ep/refresh';

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

@@ -1,9 +1,9 @@
 import { addDialog } from '@/components/BaseDialog/index';
-import BudgetCategoryDialog from '@/views/financial/budget-category/budget-category-dialog.vue';
+import BudgetCategoryDialog from '@/views/financial/budget-saving/budget-category/budget-category-dialog.vue';
 import { useBudgetCategoryStore } from '@/store/financial/budgetCategory';
 import { h, ref } from 'vue';
 import { message, messageBox } from '@/utils/message';
-import type { FormItemProps } from '@/views/financial/budget-category/utils/types';
+import type { FormItemProps } from '@/views/financial/budget-saving/budget-category/utils/types';
 import { $t } from '@/plugins/i18n';
 import DeleteBatchDialog from '@/components/Table/DeleteBatchDialog.vue';
 

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

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
-import { columns } from '@/views/financial/saving-goal/utils/columns';
+import { columns } from '@/views/financial/budget-saving/saving-goal/utils/columns';
 import PureTableBar from '@/components/TableBar/src/bar';
 import AddFill from '@iconify-icons/ri/add-circle-line';
 import PureTable from '@pureadmin/table';
-import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/financial/saving-goal/utils/hooks';
+import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/financial/budget-saving/saving-goal/utils/hooks';
 import Delete from '@iconify-icons/ep/delete';
 import EditPen from '@iconify-icons/ep/edit-pen';
 import Refresh from '@iconify-icons/ep/refresh';

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

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 import { FormInstance } from 'element-plus';
-import { rules } from '@/views/financial/saving-goal/utils/columns';
+import { rules } from '@/views/financial/budget-saving/saving-goal/utils/columns';
-import { FormProps } from '@/views/financial/saving-goal/utils/types';
+import { FormProps } from '@/views/financial/budget-saving/saving-goal/utils/types';
 import { $t } from '@/plugins/i18n';
 import LoadingSvg from '@/assets/svg/loading.svg';
 import { useAdminUserStore } from '@/store/system/adminUser';

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

@@ -1,9 +1,9 @@
 import { addDialog } from '@/components/BaseDialog/index';
-import SavingGoalDialog from '@/views/financial/saving-goal/saving-goal-dialog.vue';
+import SavingGoalDialog from '@/views/financial/budget-saving/saving-goal/saving-goal-dialog.vue';
 import { useSavingGoalStore } from '@/store/financial/savingGoal';
 import { h, ref } from 'vue';
 import { message, messageBox } from '@/utils/message';
-import type { FormItemProps } from '@/views/financial/saving-goal/utils/types';
+import type { FormItemProps } from '@/views/financial/budget-saving/saving-goal/utils/types';
 import { $t } from '@/plugins/i18n';
 import DeleteBatchDialog from '@/components/Table/DeleteBatchDialog.vue';
 

src/views/financial-user/debt/debt-repayment-plan/debt-repayment-plan-dialog.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import { FormInstance } from 'element-plus';
-import { rules } from '@/views/financial/debt-repayment-plan/utils/columns';
+import { rules } from '@/views/financial/debt/debt-repayment-plan/utils/columns';
-import { FormProps } from '@/views/financial/debt-repayment-plan/utils/types';
+import { FormProps } from '@/views/financial/debt/debt-repayment-plan/utils/types';
 import { $t } from '@/plugins/i18n';
 import LoadingSvg from '@/assets/svg/loading.svg';
 import { debtTracking } from '@/enums/bill/debtTracking';

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

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
-import { columns } from '@/views/financial/debt-repayment-plan/utils/columns';
+import { columns } from '@/views/financial/debt/debt-repayment-plan/utils/columns';
 import PureTableBar from '@/components/TableBar/src/bar';
 import AddFill from '@iconify-icons/ri/add-circle-line';
 import PureTable from '@pureadmin/table';
-import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/financial/debt-repayment-plan/utils/hooks';
+import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/financial/debt/debt-repayment-plan/utils/hooks';
 import Delete from '@iconify-icons/ep/delete';
 import EditPen from '@iconify-icons/ep/edit-pen';
 import Refresh from '@iconify-icons/ep/refresh';

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

@@ -1,9 +1,9 @@
 import { addDialog } from '@/components/BaseDialog/index';
-import DebtRepaymentPlanDialog from '@/views/financial/debt-repayment-plan/debt-repayment-plan-dialog.vue';
+import DebtRepaymentPlanDialog from '@/views/financial/debt/debt-repayment-plan/debt-repayment-plan-dialog.vue';
 import { useDebtRepaymentPlanStore } from '@/store/financial/debtRepaymentPlan';
 import { h, ref } from 'vue';
 import { message, messageBox } from '@/utils/message';
-import type { FormItemProps } from '@/views/financial/debt-repayment-plan/utils/types';
+import type { FormItemProps } from '@/views/financial/debt/debt-repayment-plan/utils/types';
 import { $t } from '@/plugins/i18n';
 import DeleteBatchDialog from '@/components/Table/DeleteBatchDialog.vue';
 

src/views/financial-user/debt/debt-tracking/debt-tracking-dialog.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 import { FormInstance } from 'element-plus';
-import { rules } from '@/views/financial/debt-tracking/utils/columns';
+import { rules } from '@/views/financial/debt/debt-tracking/utils/columns';
-import { FormProps } from '@/views/financial/debt-tracking/utils/types';
+import { FormProps } from '@/views/financial/debt/debt-tracking/utils/types';
 import { $t } from '@/plugins/i18n';
 import { debtTracking, debtType } from '@/enums/bill/debtTracking';
 import LoadingSvg from '@/assets/svg/loading.svg';

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

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
-import { columns } from '@/views/financial/debt-tracking/utils/columns';
+import { columns } from '@/views/financial/debt/debt-tracking/utils/columns';
 import PureTableBar from '@/components/TableBar/src/bar';
 import AddFill from '@iconify-icons/ri/add-circle-line';
 import PureTable from '@pureadmin/table';
-import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/financial/debt-tracking/utils/hooks';
+import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/financial/debt/debt-tracking/utils/hooks';
 import Delete from '@iconify-icons/ep/delete';
 import EditPen from '@iconify-icons/ep/edit-pen';
 import Refresh from '@iconify-icons/ep/refresh';

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

@@ -1,9 +1,9 @@
 import { addDialog } from '@/components/BaseDialog/index';
-import DebtTrackingDialog from '@/views/financial/debt-tracking/debt-tracking-dialog.vue';
+import DebtTrackingDialog from '@/views/financial/debt/debt-tracking/debt-tracking-dialog.vue';
 import { useDebtTrackingStore } from '@/store/financial/debtTracking';
 import { h, ref } from 'vue';
 import { message, messageBox } from '@/utils/message';
-import type { FormItemProps } from '@/views/financial/debt-tracking/utils/types';
+import type { FormItemProps } from '@/views/financial/debt/debt-tracking/utils/types';
 import { $t } from '@/plugins/i18n';
 import DeleteBatchDialog from '@/components/Table/DeleteBatchDialog.vue';
 

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

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 import { FormInstance } from 'element-plus';
-import { rules } from '@/views/financial/bill/utils/columns';
+import { rules } from '@/views/financial/account-bill/bill/utils/columns';
-import { FormProps } from '@/views/financial/bill/utils/types';
+import { FormProps } from '@/views/financial/account-bill/bill/utils/types';
 import { $t } from '@/plugins/i18n';
 import { incomeOrExpend } from '@/enums/baseConstant';
 import { useCategoryUserStore } from '@/store/financialUser/categoryUser';
-import { onSearch } from '@/views/financial/bill/utils/hooks';
+import { onSearch } from '@/views/financial/account-bill/bill/utils/hooks';
 import { useBillStore } from '@/store/financial/bill';
 import { useAdminUserStore } from '@/store/system/adminUser';
 import LoadingSvg from '@/assets/svg/loading.svg';

src/views/financial/account-bill/bill/index.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
-import { columns } from '@/views/financial/bill/utils/columns';
+import { columns } from '@/views/financial/account-bill/bill/utils/columns';
 import PureTableBar from '@/components/TableBar/src/bar';
 import AddFill from '@iconify-icons/ri/add-circle-line';
 import PureTable from '@pureadmin/table';
-import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/financial/bill/utils/hooks';
+import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/financial/account-bill/bill/utils/hooks';
 import Delete from '@iconify-icons/ep/delete';
 import EditPen from '@iconify-icons/ep/edit-pen';
 import Refresh from '@iconify-icons/ep/refresh';

src/views/financial/account-bill/bill/utils/hooks.ts

@@ -1,9 +1,9 @@
 import { addDialog } from '@/components/BaseDialog/index';
-import BillDialog from '@/views/financial/bill/bill-dialog.vue';
+import BillDialog from '@/views/financial/account-bill/bill/bill-dialog.vue';
 import { useBillStore } from '@/store/financial/bill';
 import { h, ref } from 'vue';
 import { message, messageBox } from '@/utils/message';
-import type { FormItemProps } from '@/views/financial/bill/utils/types';
+import type { FormItemProps } from '@/views/financial/account-bill/bill/utils/types';
 import { $t } from '@/plugins/i18n';
 import DeleteBatchDialog from '@/components/Table/DeleteBatchDialog.vue';
 

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

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 import { FormInstance } from 'element-plus';
-import { rules } from '@/views/financial/category/utils/columns';
+import { rules } from '@/views/financial/account-bill/category/utils/columns';
-import { FormProps } from '@/views/financial/category/utils/types';
+import { FormProps } from '@/views/financial/account-bill/category/utils/types';
 import { $t } from '@/plugins/i18n';
 import { usePublicHooks } from '@/views/hooks';
 import LoadingSvg from '@/assets/svg/loading.svg';

src/views/financial/account-bill/category/index.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
-import { columns } from '@/views/financial/category/utils/columns';
+import { columns } from '@/views/financial/account-bill/category/utils/columns';
 import PureTableBar from '@/components/TableBar/src/bar';
 import AddFill from '@iconify-icons/ri/add-circle-line';
 import PureTable from '@pureadmin/table';
-import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate, onUpdateIsBuiltin } from '@/views/financial/category/utils/hooks';
+import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate, onUpdateIsBuiltin } from '@/views/financial/account-bill/category/utils/hooks';
 import Delete from '@iconify-icons/ep/delete';
 import EditPen from '@iconify-icons/ep/edit-pen';
 import Refresh from '@iconify-icons/ep/refresh';

src/views/financial/account-bill/category/utils/hooks.ts

@@ -1,9 +1,9 @@
 import { addDialog } from '@/components/BaseDialog/index';
-import CategoryDialog from '@/views/financial/category/category-dialog.vue';
+import CategoryDialog from '@/views/financial/account-bill/category/category-dialog.vue';
 import { useCategoryStore } from '@/store/financial/category';
 import { h, ref } from 'vue';
 import { message, messageBox } from '@/utils/message';
-import type { FormItemProps } from '@/views/financial/category/utils/types';
+import type { FormItemProps } from '@/views/financial/account-bill/category/utils/types';
 import { $t } from '@/plugins/i18n';
 import DeleteBatchDialog from '@/components/Table/DeleteBatchDialog.vue';
 

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

@@ -0,0 +1,138 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { FormInstance } from 'element-plus';
+import { rules } from '@/views/financial/budget-saving/budget-category/utils/columns';
+import { FormProps } from '@/views/financial/budget-saving/budget-category/utils/types';
+import { $t } from '@/plugins/i18n';
+import LoadingSvg from '@/assets/svg/loading.svg';
+import { useAdminUserStore } from '@/store/system/adminUser';
+import { fetchGetAllParentList } from '@/api/v1/financial/budgetCategory';
+import { budget } from '@/enums/bill/budget';
+
+const props = withDefaults(defineProps<FormProps>(), {
+	formInline: () => ({
+		// 父级id
+		parentId: undefined,
+		// 绑定的用户id
+		userId: undefined,
+		// 分类名称
+		categoryName: undefined,
+		// 预算名称
+		budgetName: undefined,
+		// 完成状态
+		statusType: undefined,
+		// 预算金额
+		amount: undefined,
+		// 预算周期
+		period: undefined,
+	}),
+});
+
+const formRef = ref<FormInstance>();
+const form = ref(props.formInline);
+// 用户信息列表
+const userDataList = ref();
+// 搜索用户加载
+const loading = ref(false);
+// 所有父级列表
+const allParentList = ref();
+const adminUserStore = useAdminUserStore();
+
+/** 搜索 */
+const onSearchUserinfo = async (keyword: string) => {
+	loading.value = true;
+	userDataList.value = await adminUserStore.queryUser({ keyword });
+	loading.value = false;
+};
+
+/** 获取所有父级内容 */
+const getAllParentList = async () => {
+	const result = await fetchGetAllParentList();
+	if (result.code === 200) {
+		allParentList.value = result.data;
+	}
+};
+
+onMounted(() => {
+	onSearchUserinfo();
+	getAllParentList();
+});
+
+defineExpose({ formRef });
+</script>
+
+<template>
+	<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
+		<!-- 父级id -->
+		<el-form-item :label="$t('parentId')" prop="parentId">
+			<el-cascader
+				v-model="form.parentId"
+				:options="allParentList"
+				:props="{ value: 'id', label: 'categoryName', emitPath: false, checkStrictly: true }"
+				class="w-full"
+				clearable
+				filterable
+			>
+				<template #default="{ node, data }">
+					<span>{{ data.categoryName }}</span>
+					<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+				</template>
+			</el-cascader>
+		</el-form-item>
+
+		<!-- 绑定的用户id -->
+		<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('categoryName')" prop="categoryName">
+			<el-input v-model="form.categoryName" :placeholder="$t('input') + $t('categoryName')" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 预算名称 -->
+		<el-form-item :label="$t('budgetName')" prop="budgetName">
+			<el-input v-model="form.budgetName" :placeholder="$t('input') + $t('budgetName')" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 完成状态 -->
+		<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 budget" :key="item.value" :label="item.label" :value="item.value" />
+			</el-select>
+		</el-form-item>
+
+		<!-- 预算金额 -->
+		<el-form-item :label="$t('amount')" prop="amount">
+			<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('period')" prop="period">
+			<el-date-picker
+				v-model="form.period"
+				: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/budget-saving/budget-category/index.vue

@@ -0,0 +1,223 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue';
+import { columns } from '@/views/financial/budget-saving/budget-category/utils/columns';
+import PureTableBar from '@/components/TableBar/src/bar';
+import AddFill from '@iconify-icons/ri/add-circle-line';
+import PureTable from '@pureadmin/table';
+import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/financial/budget-saving/budget-category/utils/hooks';
+import Delete from '@iconify-icons/ep/delete';
+import EditPen from '@iconify-icons/ep/edit-pen';
+import Refresh from '@iconify-icons/ep/refresh';
+import { selectUserinfo } from '@/components/Table/Userinfo/columns';
+import { $t } from '@/plugins/i18n';
+import { useBudgetCategoryStore } from '@/store/financial/budgetCategory';
+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 { handleTree } from '@pureadmin/utils';
+
+const tableRef = ref();
+const formRef = ref();
+// 用户信息列表
+const userDataList = ref();
+// 搜索用户加载
+const loading = ref(false);
+const adminUserStore = useAdminUserStore();
+const budgetCategoryStore = useBudgetCategoryStore();
+const datalist = computed(() => handleTree(budgetCategoryStore.datalist));
+
+/** 当前页改变时 */
+const onCurrentPageChange = async (value: number) => {
+	budgetCategoryStore.pagination.currentPage = value;
+	await onSearch();
+};
+
+/** 当分页发生变化 */
+const onPageSizeChange = async (value: number) => {
+	budgetCategoryStore.pagination.pageSize = value;
+	await onSearch();
+};
+
+/** 选择多行 */
+const onSelectionChange = (rows: Array<any>) => {
+	deleteIds.value = rows.map((row: any) => row.id);
+};
+
+/** 重置表单 */
+const resetForm = async (formEl: FormInstance | undefined) => {
+	if (!formEl) return;
+	formEl.resetFields();
+	budgetCategoryStore.form.period = undefined;
+	budgetCategoryStore.form.startPeriod = undefined;
+	budgetCategoryStore.form.endPeriod = undefined;
+	await onSearch();
+};
+
+/** 搜索 */
+const onSearchUserinfo = async (keyword: string) => {
+	loading.value = true;
+	userDataList.value = await adminUserStore.queryUser({ keyword });
+	loading.value = false;
+};
+
+onMounted(() => {
+	onSearch();
+});
+</script>
+
+<template>
+	<div class="main">
+		<el-form ref="formRef" :inline="true" :model="budgetCategoryStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
+			<!-- 绑定的用户id -->
+			<el-form-item :label="$t('user')" prop="userId">
+				<el-select
+					v-model="budgetCategoryStore.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('categoryName')" prop="categoryName">
+				<el-input v-model="budgetCategoryStore.form.categoryName" :placeholder="`${$t('input')}${$t('categoryName')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 预算名称 -->
+			<el-form-item :label="$t('budgetName')" prop="budgetName">
+				<el-input v-model="budgetCategoryStore.form.budgetName" :placeholder="`${$t('input')}${$t('budgetName')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 完成状态 -->
+			<el-form-item :label="$t('statusType')" prop="statusType">
+				<el-select
+					v-model="budgetCategoryStore.form.statusType"
+					:placeholder="`${$t('select')}${$t('statusType')}`"
+					class="!w-[180px]"
+					clearable
+					filterable
+					remote
+					remote-show-suffix
+				>
+					<el-option v-for="item in budget" :key="item.value" :label="item.label" :value="item.value" />
+				</el-select>
+			</el-form-item>
+
+			<!-- 预算金额 -->
+			<el-form-item :label="$t('amount')" prop="amount">
+				<el-input v-model="budgetCategoryStore.form.amount" :placeholder="`${$t('input')}${$t('amount')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 预算周期 -->
+			<el-form-item :label="$t('period')" prop="period">
+				<el-date-picker
+					v-model="budgetCategoryStore.form.period"
+					:end-placeholder="$t('endTime')"
+					:start-placeholder="$t('startTime')"
+					class="!w-[210px]"
+					time-format="YYYY-MM-DD"
+					type="daterange"
+					value-format="YYYY-MM-DD"
+				/>
+			</el-form-item>
+
+			<!-- 搜索和重置 -->
+			<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(Refresh)" @click="resetForm(formRef)"> {{ $t('buttons.reset') }}</el-button>
+			</el-form-item>
+		</el-form>
+
+		<PureTableBar
+			:columns="columns"
+			:isExpandAll="true"
+			:tableRef="tableRef?.getTableRef()"
+			:title="$t('budgetCategory')"
+			@fullscreen="tableRef.setAdaptive()"
+			@refresh="onSearch"
+		>
+			<template #buttons>
+				<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd('0')"> {{ $t('addNew') }}</el-button>
+
+				<!-- 批量删除按钮 -->
+				<el-button v-show="deleteIds.length > 0" :icon="useRenderIcon(Delete)" type="danger" @click="onDeleteBatch">
+					{{ $t('delete_batches') }}
+				</el-button>
+			</template>
+
+			<template v-slot="{ size, dynamicColumns }">
+				<pure-table
+					ref="tableRef"
+					:adaptiveConfig="{ offsetBottom: 96 }"
+					:columns="dynamicColumns"
+					:data="datalist"
+					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
+					:loading="budgetCategoryStore.loading"
+					:pagination="budgetCategoryStore.pagination"
+					:size="size"
+					adaptive
+					align-whole="center"
+					border
+					default-expand-all
+					highlight-current-row
+					row-key="id"
+					showOverflowTooltip
+					table-layout="auto"
+					@page-size-change="onPageSizeChange"
+					@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(row.id)">
+							{{ $t('addNew') }}
+						</el-button>
+						<el-popconfirm :title="`${$t('delete')}${row.budgetName}?`" @confirm="onDelete(row)">
+							<template #reference>
+								<el-button :icon="useRenderIcon(Delete)" :size="size" class="reset-margin" link type="primary">
+									{{ $t('delete') }}
+								</el-button>
+							</template>
+						</el-popconfirm>
+					</template>
+				</pure-table>
+			</template>
+		</PureTableBar>
+	</div>
+</template>

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

@@ -0,0 +1,64 @@
+import { reactive } from 'vue';
+import { $t } from '@/plugins/i18n';
+import { ElText, type FormRules } from 'element-plus';
+
+// 表格列
+export const columns: TableColumnList = [
+	{ type: 'selection', align: 'left' },
+	{ type: 'index', index: (index: number) => index + 1, label: '序号', width: 60 },
+	// 分类名称
+	{ label: $t('categoryName'), prop: 'categoryName' },
+	// 预算名称
+	{ label: $t('budgetName'), prop: 'budgetName' },
+	// 完成状态
+	{ label: $t('statusType'), prop: 'statusType', slot: 'statusType', width: 100 },
+	// 预算金额
+	{
+		label: $t('amount'),
+		prop: 'amount',
+		width: 150,
+		formatter({ amount }) {
+			return (
+				<ElText style={{ fontWeight: 800 }} type={'info'} size={'large'}>
+					{amount}￥
+				</ElText>
+			);
+		},
+	},
+	// 预算周期
+	{
+		label: $t('period'),
+		prop: 'period',
+		formatter({ startPeriod, endPeriod }) {
+			return (
+				<ElText type={'success'} style={{ fontWeight: 800 }}>
+					{startPeriod} ~ {endPeriod}
+				</ElText>
+			);
+		},
+		width: 360,
+	},
+	{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },
+	{ label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 },
+	// 绑定的用户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: 210, slot: 'operation' },
+];
+
+// 添加规则
+export const rules = reactive<FormRules>({
+	// 绑定的用户
+	userId: [{ required: true, message: `${$t('input')}${$t('userId')}`, trigger: 'blur' }],
+	// 分类名称
+	categoryName: [{ required: true, message: `${$t('input')}${$t('categoryName')}`, trigger: 'blur' }],
+	// 预算名称
+	budgetName: [{ required: true, message: `${$t('input')}${$t('budgetName')}`, trigger: 'blur' }],
+	// 完成状态
+	statusType: [{ required: true, message: `${$t('input')}${$t('statusType')}`, trigger: 'blur' }],
+	// 预算金额
+	amount: [{ required: true, message: `${$t('input')}${$t('amount')}`, trigger: 'blur' }],
+	// 预算周期
+	period: [{ required: true, message: `${$t('input')}${$t('period')}`, trigger: 'blur' }],
+});

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

@@ -0,0 +1,147 @@
+import { addDialog } from '@/components/BaseDialog/index';
+import BudgetCategoryDialog from '@/views/financial/budget-saving/budget-category/budget-category-dialog.vue';
+import { useBudgetCategoryStore } from '@/store/financial/budgetCategory';
+import { h, ref } from 'vue';
+import { message, messageBox } from '@/utils/message';
+import type { FormItemProps } from '@/views/financial/budget-saving/budget-category/utils/types';
+import { $t } from '@/plugins/i18n';
+import DeleteBatchDialog from '@/components/Table/DeleteBatchDialog.vue';
+
+export const formRef = ref();
+// 删除ids
+export const deleteIds = ref([]);
+const budgetCategoryStore = useBudgetCategoryStore();
+
+/** 搜索初始化预算分类表 */
+export async function onSearch() {
+	budgetCategoryStore.loading = true;
+	await budgetCategoryStore.getBudgetCategoryList();
+	budgetCategoryStore.loading = false;
+}
+
+/** 添加预算分类表 */
+export function onAdd(parentId: string = '0') {
+	addDialog({
+		title: `${$t('addNew')}${$t('budgetCategory')}`,
+		width: '30%',
+		props: {
+			formInline: {
+				parentId,
+				categoryName: undefined,
+				budgetName: undefined,
+				statusType: undefined,
+				amount: undefined,
+				period: undefined,
+				startPeriod: undefined,
+				endPeriod: undefined,
+			},
+		},
+		draggable: true,
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(BudgetCategoryDialog, { ref: formRef }),
+		beforeSure: (done, { options }) => {
+			const form = options.props.formInline as FormItemProps;
+			formRef.value.formRef.validate(async (valid: any) => {
+				if (!valid) return;
+
+				// 格式化开始时间和结束时间
+				form.startPeriod = form.period[0];
+				form.endPeriod = form.period[1];
+
+				const result = await budgetCategoryStore.addBudgetCategory(form);
+				if (!result) return;
+				done();
+				await onSearch();
+			});
+		},
+	});
+}
+
+/** 更新预算分类表 */
+export function onUpdate(row: any) {
+	addDialog({
+		title: `${$t('modify')}${$t('budgetCategory')}`,
+		width: '30%',
+		props: {
+			formInline: {
+				parentId: row.parentId ? row.parentId : '0',
+				userId: row.userId,
+				categoryName: row.categoryName,
+				budgetName: row.budgetName,
+				statusType: row.statusType,
+				amount: row.amount,
+				period: [row.startPeriod, row.endPeriod],
+				startPeriod: row.startPeriod,
+				endPeriod: row.endPeriod,
+			},
+		},
+		draggable: true,
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(BudgetCategoryDialog, { ref: formRef }),
+		beforeSure: (done, { options }) => {
+			const form = options.props.formInline as FormItemProps;
+			formRef.value.formRef.validate(async (valid: any) => {
+				if (!valid) return;
+
+				// 格式化开始时间和结束时间
+				form.startPeriod = form.period[0];
+				form.endPeriod = form.period[1];
+
+				const result = await budgetCategoryStore.updateBudgetCategory({ ...form, id: row.id });
+				if (!result) return;
+				done();
+				await onSearch();
+			});
+		},
+	});
+}
+
+/** 删除预算分类表 */
+export const onDelete = async (row: any) => {
+	const id = row.id;
+
+	// 是否确认删除
+	const result = await messageBox({
+		title: $t('confirmDelete'),
+		showMessage: false,
+		confirmMessage: undefined,
+		cancelMessage: $t('cancel_delete'),
+	});
+	if (!result) return;
+
+	// 删除数据
+	await budgetCategoryStore.deleteBudgetCategory([id]);
+	await onSearch();
+};
+
+/** 批量删除 */
+export const onDeleteBatch = async () => {
+	const ids = deleteIds.value;
+	const formDeletedBatchRef = ref();
+
+	addDialog({
+		title: $t('deleteBatchTip'),
+		width: '30%',
+		props: { formInline: { confirmText: '' } },
+		draggable: true,
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(DeleteBatchDialog, { ref: formDeletedBatchRef }),
+		beforeSure: (done, { options }) => {
+			formDeletedBatchRef.value.formDeletedBatchRef.validate(async (valid: any) => {
+				if (!valid) return;
+
+				const text = options.props.formInline.confirmText.toLowerCase();
+				if (text === 'yes' || text === 'y') {
+					// 删除数据
+					await budgetCategoryStore.deleteBudgetCategory(ids);
+					await onSearch();
+
+					done();
+				} else message($t('deleteBatchTip'), { type: 'warning' });
+			});
+		},
+	});
+};

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

@@ -0,0 +1,24 @@
+// 添加或者修改表单元素
+export interface FormItemProps {
+	// 父级id
+	parentId: number;
+	// 绑定的用户id
+	userId: string;
+	// 分类名称
+	categoryName: string;
+	// 预算名称
+	budgetName: string;
+	// 完成状态
+	statusType: string;
+	// 预算金额
+	amount: any;
+	// 预算周期
+	period: string[];
+	startPeriod: string;
+	endPeriod: string;
+}
+
+// 添加或修改表单Props
+export interface FormProps {
+	formInline: FormItemProps;
+}

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

@@ -0,0 +1,198 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { columns } from '@/views/financial/budget-saving/saving-goal/utils/columns';
+import PureTableBar from '@/components/TableBar/src/bar';
+import AddFill from '@iconify-icons/ri/add-circle-line';
+import PureTable from '@pureadmin/table';
+import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/financial/budget-saving/saving-goal/utils/hooks';
+import Delete from '@iconify-icons/ep/delete';
+import EditPen from '@iconify-icons/ep/edit-pen';
+import Refresh from '@iconify-icons/ep/refresh';
+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();
+
+/** 当前页改变时 */
+const onCurrentPageChange = async (value: number) => {
+	savingGoalStore.pagination.currentPage = value;
+	await onSearch();
+};
+
+/** 当分页发生变化 */
+const onPageSizeChange = async (value: number) => {
+	savingGoalStore.pagination.pageSize = value;
+	await onSearch();
+};
+
+/** 选择多行 */
+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();
+};
+
+onMounted(() => {
+	onSearch();
+});
+</script>
+
+<template>
+	<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('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-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>
+
+			<!-- 储值目标名称 -->
+			<el-form-item :label="$t('savingGoalName')" prop="savingGoalName">
+				<el-input v-model="savingGoalStore.form.savingGoalName" :placeholder="`${$t('input')}${$t('savingGoalName')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 目标金额 -->
+			<el-form-item :label="$t('amount')" prop="amount">
+				<el-input v-model="savingGoalStore.form.amount" :placeholder="`${$t('input')}${$t('amount')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 目标时长 -->
+			<el-form-item :label="$t('duration')" prop="duration">
+				<el-date-picker
+					v-model="savingGoalStore.form.duration"
+					:end-placeholder="$t('endTime')"
+					:start-placeholder="$t('startTime')"
+					class="!w-[210px]"
+					time-format="YYYY-MM-DD"
+					type="datetimerange"
+					value-format="YYYY-MM-DD"
+				/>
+			</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="$t('savingGoal')" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
+			<template #buttons>
+				<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> {{ $t('addNew') }}</el-button>
+
+				<!-- 批量删除按钮 -->
+				<el-button v-show="deleteIds.length > 0" :icon="useRenderIcon(Delete)" type="danger" @click="onDeleteBatch">
+					{{ $t('delete_batches') }}
+				</el-button>
+			</template>
+
+			<template v-slot="{ size, dynamicColumns }">
+				<pure-table
+					ref="tableRef"
+					:adaptiveConfig="{ offsetBottom: 96 }"
+					:columns="dynamicColumns"
+					:data="savingGoalStore.datalist"
+					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
+					:loading="savingGoalStore.loading"
+					:pagination="savingGoalStore.pagination"
+					:size="size"
+					adaptive
+					align-whole="center"
+					border
+					highlight-current-row
+					row-key="id"
+					showOverflowTooltip
+					table-layout="auto"
+					@page-size-change="onPageSizeChange"
+					@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-popconfirm :title="`${$t('delete')}?`" @confirm="onDelete(row)">
+							<template #reference>
+								<el-button :icon="useRenderIcon(Delete)" :size="size" class="reset-margin" link type="primary">
+									{{ $t('delete') }}
+								</el-button>
+							</template>
+						</el-popconfirm>
+					</template>
+				</pure-table>
+			</template>
+		</PureTableBar>
+	</div>
+</template>

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

@@ -0,0 +1,100 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { FormInstance } from 'element-plus';
+import { rules } from '@/views/financial/budget-saving/saving-goal/utils/columns';
+import { FormProps } from '@/views/financial/budget-saving/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: () => ({
+		// 绑定的用户id
+		userId: undefined,
+		// 完成状态
+		statusType: undefined,
+		// 储值目标名称
+		savingGoalName: undefined,
+		// 目标金额
+		amount: undefined,
+		// 目标时长
+		duration: undefined,
+	}),
+});
+
+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>
+
+<template>
+	<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
+		<!-- 绑定的用户id -->
+		<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-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>
+
+		<!-- 储值目标名称 -->
+		<el-form-item :label="$t('savingGoalName')" prop="savingGoalName">
+			<el-input v-model="form.savingGoalName" :placeholder="$t('input') + $t('savingGoalName')" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 目标金额 -->
+		<el-form-item :label="$t('amount')" prop="amount">
+			<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('duration')" prop="duration">
+			<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/budget-saving/saving-goal/utils/columns.tsx

@@ -0,0 +1,61 @@
+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('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 },
+	// 绑定的用户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' },
+];
+
+// 添加规则
+export const rules = reactive<FormRules>({
+	// 绑定的用户id
+	userId: [{ required: true, message: `${$t('input')}${$t('userId')}`, trigger: 'blur' }],
+	// 完成状态
+	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' }],
+	// 目标时长
+	duration: [{ required: true, message: `${$t('input')}${$t('duration')}`, trigger: 'blur' }],
+});

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

@@ -0,0 +1,140 @@
+import { addDialog } from '@/components/BaseDialog/index';
+import SavingGoalDialog from '@/views/financial/budget-saving/saving-goal/saving-goal-dialog.vue';
+import { useSavingGoalStore } from '@/store/financial/savingGoal';
+import { h, ref } from 'vue';
+import { message, messageBox } from '@/utils/message';
+import type { FormItemProps } from '@/views/financial/budget-saving/saving-goal/utils/types';
+import { $t } from '@/plugins/i18n';
+import DeleteBatchDialog from '@/components/Table/DeleteBatchDialog.vue';
+
+export const formRef = ref();
+// 删除ids
+export const deleteIds = ref([]);
+const savingGoalStore = useSavingGoalStore();
+
+/** 搜索初始化用户储值 */
+export async function onSearch() {
+	savingGoalStore.loading = true;
+	await savingGoalStore.getSavingGoalList();
+	savingGoalStore.loading = false;
+}
+
+/** 添加用户储值 */
+export function onAdd() {
+	addDialog({
+		title: `${$t('addNew')}${$t('savingGoal')}`,
+		width: '30%',
+		props: {
+			formInline: {
+				userId: undefined,
+				statusType: undefined,
+				savingGoalName: undefined,
+				amount: undefined,
+				duration: undefined,
+			},
+		},
+		draggable: true,
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(SavingGoalDialog, { ref: formRef }),
+		beforeSure: (done, { options }) => {
+			const form = options.props.formInline as FormItemProps;
+			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();
+				await onSearch();
+			});
+		},
+	});
+}
+
+/** 更新用户储值 */
+export function onUpdate(row: any) {
+	addDialog({
+		title: `${$t('modify')}${$t('savingGoal')}`,
+		width: '30%',
+		props: {
+			formInline: {
+				userId: row.userId,
+				statusType: row.statusType,
+				savingGoalName: row.savingGoalName,
+				amount: row.amount,
+				duration: [row.startDuration, row.endDuration],
+			},
+		},
+		draggable: true,
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(SavingGoalDialog, { ref: formRef }),
+		beforeSure: (done, { options }) => {
+			const form = options.props.formInline as FormItemProps;
+			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();
+				await onSearch();
+			});
+		},
+	});
+}
+
+/** 删除用户储值 */
+export const onDelete = async (row: any) => {
+	const id = row.id;
+
+	// 是否确认删除
+	const result = await messageBox({
+		title: $t('confirmDelete'),
+		showMessage: false,
+		confirmMessage: undefined,
+		cancelMessage: $t('cancel_delete'),
+	});
+	if (!result) return;
+
+	// 删除数据
+	await savingGoalStore.deleteSavingGoal([id]);
+	await onSearch();
+};
+
+/** 批量删除 */
+export const onDeleteBatch = async () => {
+	const ids = deleteIds.value;
+	const formDeletedBatchRef = ref();
+
+	addDialog({
+		title: $t('deleteBatchTip'),
+		width: '30%',
+		props: { formInline: { confirmText: '' } },
+		draggable: true,
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(DeleteBatchDialog, { ref: formDeletedBatchRef }),
+		beforeSure: (done, { options }) => {
+			formDeletedBatchRef.value.formDeletedBatchRef.validate(async (valid: any) => {
+				if (!valid) return;
+
+				const text = options.props.formInline.confirmText.toLowerCase();
+				if (text === 'yes' || text === 'y') {
+					// 删除数据
+					await savingGoalStore.deleteSavingGoal(ids);
+					await onSearch();
+
+					done();
+				} else message($t('deleteBatchTip'), { type: 'warning' });
+			});
+		},
+	});
+};

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

@@ -0,0 +1,22 @@
+// 添加或者修改表单元素
+export interface FormItemProps {
+	// 绑定的用户id
+	userId: number;
+	// 完成状态
+	statusType: string;
+	// 储值目标名称
+	savingGoalName: string;
+	// 目标金额
+	amount: any;
+	// 目标时长
+	duration: string;
+	// 开始目标时长
+	startDuration: string;
+	// 结束目标时长
+	endDuration: string;
+}
+
+// 添加或修改表单Props
+export interface FormProps {
+	formInline: FormItemProps;
+}

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

@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { FormInstance } from 'element-plus';
+import { rules } from '@/views/financial/debt/debt-repayment-plan/utils/columns';
+import { FormProps } from '@/views/financial/debt/debt-repayment-plan/utils/types';
+import { $t } from '@/plugins/i18n';
+import LoadingSvg from '@/assets/svg/loading.svg';
+import { debtTracking } from '@/enums/bill/debtTracking';
+import { useAdminUserStore } from '@/store/system/adminUser';
+
+const props = withDefaults(defineProps<FormProps>(), {
+	formInline: () => ({
+		// 债务金额
+		installmentNumber: undefined,
+		// 每期应还金额
+		installmentAmount: undefined,
+		// 还款截止日期
+		dueDate: undefined,
+		// 已还金额
+		paidAmount: undefined,
+		// 还款状态
+		paymentStatus: undefined,
+	}),
+});
+
+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;
+};
+
+defineExpose({ formRef });
+</script>
+
+<template>
+	<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
+		<!-- 绑定的用户id -->
+		<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('installmentNumber')" prop="installmentNumber">
+			<el-input v-model="form.installmentNumber" :min="0.01" :placeholder="$t('input') + $t('installmentNumber')" :step="0.01" autocomplete="off" type="number" />
+		</el-form-item>
+
+		<!-- 每期应还金额 -->
+		<el-form-item :label="$t('installmentAmount')" prop="installmentAmount">
+			<el-input v-model="form.installmentAmount" :min="0.01" :placeholder="$t('input') + $t('installmentAmount')" :step="0.01" autocomplete="off" type="number" />
+		</el-form-item>
+
+		<!-- 已还金额 -->
+		<el-form-item :label="$t('paidAmount')" prop="paidAmount">
+			<el-input v-model="form.paidAmount" :min="0.01" :placeholder="$t('input') + $t('paidAmount')" :step="0.01" autocomplete="off" type="number" />
+		</el-form-item>
+
+		<!-- 还款截止日期 -->
+		<el-form-item :label="$t('dueDate')" prop="dueDate">
+			<el-date-picker
+				v-model="form.dueDate"
+				:end-placeholder="$t('endTime')"
+				:start-placeholder="$t('startTime')"
+				class="!w-[100%]"
+				time-format="YYYY-MM-DD HH:mm:ss"
+				type="datetime"
+				value-format="YYYY-MM-DD HH:mm:ss"
+			/>
+		</el-form-item>
+
+		<!-- 还款状态 -->
+		<el-form-item :label="$t('paymentStatus')" prop="paymentStatus">
+			<el-select v-model="form.paymentStatus" :placeholder="$t('paymentStatus')" clearable filterable remote remote-show-suffix>
+				<el-option v-for="item in debtTracking" :key="item.value" :label="item.label" :value="item.value" />
+			</el-select>
+		</el-form-item>
+	</el-form>
+</template>

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

@@ -0,0 +1,210 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { columns } from '@/views/financial/debt/debt-repayment-plan/utils/columns';
+import PureTableBar from '@/components/TableBar/src/bar';
+import AddFill from '@iconify-icons/ri/add-circle-line';
+import PureTable from '@pureadmin/table';
+import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/financial/debt/debt-repayment-plan/utils/hooks';
+import Delete from '@iconify-icons/ep/delete';
+import EditPen from '@iconify-icons/ep/edit-pen';
+import Refresh from '@iconify-icons/ep/refresh';
+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';
+import LoadingSvg from '@/assets/svg/loading.svg';
+import { useAdminUserStore } from '@/store/system/adminUser';
+import { debtTracking } from '@/enums/bill/debtTracking';
+
+const tableRef = ref();
+const formRef = ref();
+// 用户信息列表
+const userDataList = ref();
+// 搜索用户加载
+const loading = ref(false);
+const adminUserStore = useAdminUserStore();
+const debtRepaymentPlanStore = useDebtRepaymentPlanStore();
+
+/** 当前页改变时 */
+const onCurrentPageChange = async (value: number) => {
+	debtRepaymentPlanStore.pagination.currentPage = value;
+	await onSearch();
+};
+
+/** 当分页发生变化 */
+const onPageSizeChange = async (value: number) => {
+	debtRepaymentPlanStore.pagination.pageSize = value;
+	await onSearch();
+};
+
+/** 选择多行 */
+const onSelectionChange = (rows: Array<any>) => {
+	deleteIds.value = rows.map((row: any) => row.id);
+};
+
+/** 重置表单 */
+const resetForm = async (formEl: FormInstance | undefined) => {
+	if (!formEl) return;
+	formEl.resetFields();
+	await onSearch();
+};
+
+/** 搜索 */
+const onSearchUserinfo = async (keyword: string) => {
+	loading.value = true;
+	userDataList.value = await adminUserStore.queryUser({ keyword });
+	loading.value = false;
+};
+
+onMounted(() => {
+	onSearch();
+});
+</script>
+
+<template>
+	<div class="main">
+		<el-form ref="formRef" :inline="true" :model="debtRepaymentPlanStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
+			<!-- 绑定的用户 -->
+			<el-form-item :label="$t('user')" prop="userId">
+				<el-select
+					v-model="debtRepaymentPlanStore.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('installmentNumber')" prop="installmentNumber">
+				<el-input v-model="debtRepaymentPlanStore.form.installmentNumber" :placeholder="`${$t('input')}${$t('installmentNumber')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 每期应还金额 -->
+			<el-form-item :label="$t('installmentAmount')" prop="installmentAmount">
+				<el-input v-model="debtRepaymentPlanStore.form.installmentAmount" :placeholder="`${$t('input')}${$t('installmentAmount')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 还款截止日期 -->
+			<el-form-item :label="$t('dueDate')" prop="dueDate">
+				<el-date-picker
+					v-model="debtRepaymentPlanStore.form.dueDate"
+					:end-placeholder="$t('endTime')"
+					:start-placeholder="$t('startTime')"
+					class="!w-[210px]"
+					time-format="YYYY-MM-DD"
+					type="daterange"
+					value-format="YYYY-MM-DD"
+				/>
+			</el-form-item>
+
+			<!-- 已还金额 -->
+			<el-form-item :label="$t('paidAmount')" prop="paidAmount">
+				<el-input v-model="debtRepaymentPlanStore.form.paidAmount" :placeholder="`${$t('input')}${$t('paidAmount')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 还款状态 -->
+			<el-form-item :label="$t('paymentStatus')" prop="paymentStatus">
+				<el-select
+					v-model="debtRepaymentPlanStore.form.paymentStatus"
+					:placeholder="$t('paymentStatus')"
+					class="!w-[180px]"
+					clearable
+					filterable
+					remote
+					remote-show-suffix
+				>
+					<el-option v-for="item in debtTracking" :key="item.value" :label="item.label" :value="item.value" />
+				</el-select>
+			</el-form-item>
+
+			<!-- 搜索和重置 -->
+			<el-form-item>
+				<el-button :icon="useRenderIcon('ri:search-line')" :loading="debtRepaymentPlanStore.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="$t('debtRepaymentPlan')" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
+			<template #buttons>
+				<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> {{ $t('addNew') }}</el-button>
+
+				<!-- 批量删除按钮 -->
+				<el-button v-show="deleteIds.length > 0" :icon="useRenderIcon(Delete)" type="danger" @click="onDeleteBatch">
+					{{ $t('delete_batches') }}
+				</el-button>
+			</template>
+
+			<template v-slot="{ size, dynamicColumns }">
+				<pure-table
+					ref="tableRef"
+					:adaptiveConfig="{ offsetBottom: 96 }"
+					:columns="dynamicColumns"
+					:data="debtRepaymentPlanStore.datalist"
+					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
+					:loading="debtRepaymentPlanStore.loading"
+					:pagination="debtRepaymentPlanStore.pagination"
+					:size="size"
+					adaptive
+					align-whole="center"
+					border
+					highlight-current-row
+					row-key="id"
+					showOverflowTooltip
+					table-layout="auto"
+					@page-size-change="onPageSizeChange"
+					@selection-change="onSelectionChange"
+					@page-current-change="onCurrentPageChange"
+				>
+					<template #paymentStatus="{ row }">
+						<component :is="debtTracking.find(item => item.value === row.paymentStatus).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">
+									{{ $t('delete') }}
+								</el-button>
+							</template>
+						</el-popconfirm>
+					</template>
+				</pure-table>
+			</template>
+		</PureTableBar>
+	</div>
+</template>

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

@@ -0,0 +1,84 @@
+import { reactive } from 'vue';
+import { $t } from '@/plugins/i18n';
+import { ElText, type FormRules } from 'element-plus';
+
+// 表格列
+export const columns: TableColumnList = [
+	{ type: 'selection', align: 'left' },
+	{ type: 'index', index: (index: number) => index + 1, label: '序号', width: 60 },
+	// 债务金额
+	{
+		label: $t('installmentNumber'),
+		prop: 'installmentNumber',
+		formatter({ installmentNumber }) {
+			return (
+				<ElText style={{ fontWeight: 800 }} type={'info'} size={'large'}>
+					{installmentNumber}￥
+				</ElText>
+			);
+		},
+	},
+	// 每期应还金额
+	{
+		label: $t('installmentAmount'),
+		prop: 'installmentAmount',
+		formatter({ installmentAmount }) {
+			return (
+				<ElText style={{ fontWeight: 800 }} type={'info'} size={'large'}>
+					{installmentAmount}￥
+				</ElText>
+			);
+		},
+	},
+	// 已还金额
+	{
+		label: $t('paidAmount'),
+		prop: 'paidAmount',
+		formatter({ paidAmount }) {
+			return (
+				<ElText style={{ fontWeight: 800 }} type={'info'} size={'large'}>
+					{paidAmount}￥
+				</ElText>
+			);
+		},
+	},
+	// 还款状态
+	{ label: $t('paymentStatus'), prop: 'paymentStatus', slot: 'paymentStatus' },
+	// 还款截止日期
+	{
+		label: $t('dueDate'),
+		prop: 'dueDate',
+		sortable: true,
+		formatter({ dueDate }) {
+			return (
+				<ElText type={'danger'} style={{ fontWeight: 800 }}>
+					{dueDate}
+				</ElText>
+			);
+		},
+		width: 190,
+	},
+	{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },
+	{ label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 },
+	// 绑定的用户
+	{ 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: 210, slot: 'operation' },
+];
+
+// 添加规则
+export const rules = reactive<FormRules>({
+	// 绑定的用户
+	userId: [{ required: true, message: `${$t('input')}${$t('userId')}`, trigger: 'blur' }],
+	// 债务金额
+	installmentNumber: [{ required: true, message: `${$t('input')}${$t('installmentNumber')}`, trigger: 'blur' }],
+	// 每期应还金额
+	installmentAmount: [{ required: true, message: `${$t('input')}${$t('installmentAmount')}`, trigger: 'blur' }],
+	// 还款截止日期
+	dueDate: [{ required: true, message: `${$t('input')}${$t('dueDate')}`, trigger: 'blur' }],
+	// 已还金额
+	paidAmount: [{ required: true, message: `${$t('input')}${$t('paidAmount')}`, trigger: 'blur' }],
+	// 还款状态
+	paymentStatus: [{ required: true, message: `${$t('input')}${$t('paymentStatus')}`, trigger: 'blur' }],
+});

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

@@ -0,0 +1,132 @@
+import { addDialog } from '@/components/BaseDialog/index';
+import DebtRepaymentPlanDialog from '@/views/financial/debt/debt-repayment-plan/debt-repayment-plan-dialog.vue';
+import { useDebtRepaymentPlanStore } from '@/store/financial/debtRepaymentPlan';
+import { h, ref } from 'vue';
+import { message, messageBox } from '@/utils/message';
+import type { FormItemProps } from '@/views/financial/debt/debt-repayment-plan/utils/types';
+import { $t } from '@/plugins/i18n';
+import DeleteBatchDialog from '@/components/Table/DeleteBatchDialog.vue';
+
+export const formRef = ref();
+// 删除ids
+export const deleteIds = ref([]);
+const debtRepaymentPlanStore = useDebtRepaymentPlanStore();
+
+/** 搜索初始化债务还款计划表 */
+export async function onSearch() {
+	debtRepaymentPlanStore.loading = true;
+	await debtRepaymentPlanStore.getDebtRepaymentPlanList();
+	debtRepaymentPlanStore.loading = false;
+}
+
+/** 添加债务还款计划表 */
+export function onAdd() {
+	addDialog({
+		title: `${$t('addNew')}${$t('debtRepaymentPlan')}`,
+		width: '30%',
+		props: {
+			formInline: {
+				installmentNumber: undefined,
+				installmentAmount: undefined,
+				dueDate: undefined,
+				paidAmount: undefined,
+				paymentStatus: undefined,
+			},
+		},
+		draggable: true,
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(DebtRepaymentPlanDialog, { ref: formRef }),
+		beforeSure: (done, { options }) => {
+			const form = options.props.formInline as FormItemProps;
+			formRef.value.formRef.validate(async (valid: any) => {
+				if (!valid) return;
+
+				const result = await debtRepaymentPlanStore.addDebtRepaymentPlan(form);
+				if (!result) return;
+				done();
+				await onSearch();
+			});
+		},
+	});
+}
+
+/** 更新债务还款计划表 */
+export function onUpdate(row: any) {
+	addDialog({
+		title: `${$t('modify')}${$t('debtRepaymentPlan')}`,
+		width: '30%',
+		props: {
+			formInline: {
+				installmentNumber: row.installmentNumber,
+				installmentAmount: row.installmentAmount,
+				dueDate: row.dueDate,
+				paidAmount: row.paidAmount,
+				paymentStatus: row.paymentStatus,
+			},
+		},
+		draggable: true,
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(DebtRepaymentPlanDialog, { ref: formRef }),
+		beforeSure: (done, { options }) => {
+			const form = options.props.formInline as FormItemProps;
+			formRef.value.formRef.validate(async (valid: any) => {
+				if (!valid) return;
+
+				const result = await debtRepaymentPlanStore.updateDebtRepaymentPlan({ ...form, id: row.id });
+				if (!result) return;
+				done();
+				await onSearch();
+			});
+		},
+	});
+}
+
+/** 删除债务还款计划表 */
+export const onDelete = async (row: any) => {
+	const id = row.id;
+
+	// 是否确认删除
+	const result = await messageBox({
+		title: $t('confirmDelete'),
+		showMessage: false,
+		confirmMessage: undefined,
+		cancelMessage: $t('cancel_delete'),
+	});
+	if (!result) return;
+
+	// 删除数据
+	await debtRepaymentPlanStore.deleteDebtRepaymentPlan([id]);
+	await onSearch();
+};
+
+/** 批量删除 */
+export const onDeleteBatch = async () => {
+	const ids = deleteIds.value;
+	const formDeletedBatchRef = ref();
+
+	addDialog({
+		title: $t('deleteBatchTip'),
+		width: '30%',
+		props: { formInline: { confirmText: '' } },
+		draggable: true,
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(DeleteBatchDialog, { ref: formDeletedBatchRef }),
+		beforeSure: (done, { options }) => {
+			formDeletedBatchRef.value.formDeletedBatchRef.validate(async (valid: any) => {
+				if (!valid) return;
+
+				const text = options.props.formInline.confirmText.toLowerCase();
+				if (text === 'yes' || text === 'y') {
+					// 删除数据
+					await debtRepaymentPlanStore.deleteDebtRepaymentPlan(ids);
+					await onSearch();
+
+					done();
+				} else message($t('deleteBatchTip'), { type: 'warning' });
+			});
+		},
+	});
+};

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

@@ -0,0 +1,20 @@
+// 添加或者修改表单元素
+export interface FormItemProps {
+	// 绑定的用户id
+	userId: string;
+	// 债务金额
+	installmentNumber: any;
+	// 每期应还金额
+	installmentAmount: any;
+	// 还款截止日期
+	dueDate: any;
+	// 已还金额
+	paidAmount: any;
+	// 还款状态
+	paymentStatus: string;
+}
+
+// 添加或修改表单Props
+export interface FormProps {
+	formInline: FormItemProps;
+}

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

@@ -0,0 +1,110 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { FormInstance } from 'element-plus';
+import { rules } from '@/views/financial/debt/debt-tracking/utils/columns';
+import { FormProps } from '@/views/financial/debt/debt-tracking/utils/types';
+import { $t } from '@/plugins/i18n';
+import { debtTracking, debtType } from '@/enums/bill/debtTracking';
+import LoadingSvg from '@/assets/svg/loading.svg';
+import { useAdminUserStore } from '@/store/system/adminUser';
+
+const props = withDefaults(defineProps<FormProps>(), {
+	formInline: () => ({
+		// 绑定的用户
+		userId: undefined,
+		// 债务人姓名
+		debtorName: undefined,
+		// 债务金额
+		debtAmount: undefined,
+		// 债务类型
+		debtType: undefined,
+		// 债务状态
+		debtStatus: undefined,
+		// 还款截止日期
+		dueDate: undefined,
+	}),
+});
+
+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>
+
+<template>
+	<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
+		<!-- 绑定的用户 -->
+		<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('debtorName')" prop="debtorName">
+			<el-input v-model="form.debtorName" :placeholder="$t('input') + $t('debtorName')" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 债务金额 -->
+		<el-form-item :label="$t('debtAmount')" prop="debtAmount">
+			<el-input v-model="form.debtAmount" :min="0.01" :placeholder="$t('input') + $t('debtAmount')" :step="0.01" autocomplete="off" type="number" />
+		</el-form-item>
+
+		<!-- 债务类型 -->
+		<el-form-item :label="$t('debtType')" prop="debtType">
+			<el-select v-model="form.debtType" :placeholder="$t('debtType')" clearable filterable remote remote-show-suffix>
+				<el-option v-for="item in debtType" :key="item.value" :label="item.label" :value="item.value" />
+			</el-select>
+		</el-form-item>
+
+		<!-- 债务状态 -->
+		<el-form-item :label="$t('debtStatus')" prop="debtStatus">
+			<el-select v-model="form.debtStatus" :placeholder="$t('debtStatus')" clearable filterable remote remote-show-suffix>
+				<el-option v-for="item in debtTracking" :key="item.value" :label="item.label" :value="item.value" />
+			</el-select>
+		</el-form-item>
+
+		<!-- 还款截止日期 -->
+		<el-form-item :label="$t('dueDate')" prop="dueDate">
+			<el-date-picker
+				v-model="form.dueDate"
+				:end-placeholder="$t('endTime')"
+				:start-placeholder="$t('startTime')"
+				class="!w-[100%]"
+				time-format="YYYY-MM-DD HH:mm:ss"
+				type="datetime"
+				value-format="YYYY-MM-DD HH:mm:ss"
+			/>
+		</el-form-item>
+	</el-form>
+</template>

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

@@ -0,0 +1,206 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { columns } from '@/views/financial/debt/debt-tracking/utils/columns';
+import PureTableBar from '@/components/TableBar/src/bar';
+import AddFill from '@iconify-icons/ri/add-circle-line';
+import PureTable from '@pureadmin/table';
+import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/financial/debt/debt-tracking/utils/hooks';
+import Delete from '@iconify-icons/ep/delete';
+import EditPen from '@iconify-icons/ep/edit-pen';
+import Refresh from '@iconify-icons/ep/refresh';
+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';
+import LoadingSvg from '@/assets/svg/loading.svg';
+import { useAdminUserStore } from '@/store/system/adminUser';
+import { debtTracking, debtType } from '@/enums/bill/debtTracking';
+
+const tableRef = ref();
+const formRef = ref();
+// 用户信息列表
+const userDataList = ref();
+// 搜索用户加载
+const loading = ref(false);
+const adminUserStore = useAdminUserStore();
+const debtTrackingStore = useDebtTrackingStore();
+
+/** 当前页改变时 */
+const onCurrentPageChange = async (value: number) => {
+	debtTrackingStore.pagination.currentPage = value;
+	await onSearch();
+};
+
+/** 当分页发生变化 */
+const onPageSizeChange = async (value: number) => {
+	debtTrackingStore.pagination.pageSize = value;
+	await onSearch();
+};
+
+/** 选择多行 */
+const onSelectionChange = (rows: Array<any>) => {
+	deleteIds.value = rows.map((row: any) => row.id);
+};
+
+/** 重置表单 */
+const resetForm = async (formEl: FormInstance | undefined) => {
+	if (!formEl) return;
+	formEl.resetFields();
+	await onSearch();
+};
+
+/** 搜索 */
+const onSearchUserinfo = async (keyword: string) => {
+	loading.value = true;
+	userDataList.value = await adminUserStore.queryUser({ keyword });
+	loading.value = false;
+};
+
+onMounted(() => {
+	onSearch();
+});
+</script>
+
+<template>
+	<div class="main">
+		<el-form ref="formRef" :inline="true" :model="debtTrackingStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
+			<!-- 绑定的用户 -->
+			<el-form-item :label="$t('user')" prop="userId">
+				<el-select
+					v-model="debtTrackingStore.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('debtorName')" prop="debtorName">
+				<el-input v-model="debtTrackingStore.form.debtorName" :placeholder="`${$t('input')}${$t('debtorName')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 债务金额 -->
+			<el-form-item :label="$t('debtAmount')" prop="debtAmount">
+				<el-input v-model="debtTrackingStore.form.debtAmount" :placeholder="`${$t('input')}${$t('debtAmount')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 债务类型 -->
+			<el-form-item :label="$t('debtType')" prop="debtType">
+				<el-select v-model="debtTrackingStore.form.debtType" :placeholder="$t('debtType')" class="!w-[180px]" clearable filterable remote remote-show-suffix>
+					<el-option v-for="item in debtType" :key="item.value" :label="item.label" :value="item.value" />
+				</el-select>
+			</el-form-item>
+
+			<!-- 债务状态 -->
+			<el-form-item :label="$t('debtStatus')" prop="debtStatus">
+				<el-select v-model="debtTrackingStore.form.debtStatus" :placeholder="$t('debtStatus')" class="!w-[180px]" clearable filterable remote remote-show-suffix>
+					<el-option v-for="item in debtTracking" :key="item.value" :label="item.label" :value="item.value" />
+				</el-select>
+			</el-form-item>
+
+			<!-- 还款截止日期 -->
+			<el-form-item :label="$t('dueDate')" prop="dueDate">
+				<el-date-picker
+					v-model="debtTrackingStore.form.dueDate"
+					:end-placeholder="$t('endTime')"
+					:start-placeholder="$t('startTime')"
+					class="!w-[210px]"
+					time-format="YYYY-MM-DD"
+					type="daterange"
+					value-format="YYYY-MM-DD"
+				/>
+			</el-form-item>
+
+			<!-- 搜索和重置 -->
+			<el-form-item>
+				<el-button :icon="useRenderIcon('ri:search-line')" :loading="debtTrackingStore.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="$t('debtTracking')" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
+			<template #buttons>
+				<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> {{ $t('addNew') }}</el-button>
+
+				<!-- 批量删除按钮 -->
+				<el-button v-show="deleteIds.length > 0" :icon="useRenderIcon(Delete)" type="danger" @click="onDeleteBatch">
+					{{ $t('delete_batches') }}
+				</el-button>
+			</template>
+
+			<template v-slot="{ size, dynamicColumns }">
+				<pure-table
+					ref="tableRef"
+					:adaptiveConfig="{ offsetBottom: 96 }"
+					:columns="dynamicColumns"
+					:data="debtTrackingStore.datalist"
+					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
+					:loading="debtTrackingStore.loading"
+					:pagination="debtTrackingStore.pagination"
+					:size="size"
+					adaptive
+					align-whole="center"
+					border
+					highlight-current-row
+					row-key="id"
+					showOverflowTooltip
+					table-layout="auto"
+					@page-size-change="onPageSizeChange"
+					@selection-change="onSelectionChange"
+					@page-current-change="onCurrentPageChange"
+				>
+					<template #debtType="{ row }">
+						<component :is="debtType.find(item => item.value === row.debtType).el" />
+					</template>
+
+					<template #debtStatus="{ row }">
+						<component :is="debtTracking.find(item => item.value === row.debtStatus).el" />
+					</template>
+
+					<template #createUser="{ row }">
+						<el-button v-show="row.createUser" link type="primary" @click="selectUserinfo(row.createUser)">
+							{{ row.createUsername }}
+						</el-button>
+					</template>
+
+					<template #username="{ row }">
+						<el-button v-show="row.username" link type="primary" @click="selectUserinfo(row.userId)">
+							{{ row.username }}
+						</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">
+									{{ $t('delete') }}
+								</el-button>
+							</template>
+						</el-popconfirm>
+					</template>
+				</pure-table>
+			</template>
+		</PureTableBar>
+	</div>
+</template>

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

@@ -0,0 +1,65 @@
+import { reactive } from 'vue';
+import { $t } from '@/plugins/i18n';
+import { ElText, type FormRules } from 'element-plus';
+
+// 表格列
+export const columns: TableColumnList = [
+	{ type: 'selection', align: 'left' },
+	{ type: 'index', index: (index: number) => index + 1, label: '序号', width: 60 },
+	// 债务人姓名
+	{ label: $t('debtorName'), prop: 'debtorName' },
+	// 债务金额
+	{
+		label: $t('debtAmount'),
+		prop: 'debtAmount',
+		formatter({ debtAmount }) {
+			return (
+				<ElText style={{ fontWeight: 800 }} type={'info'} size={'large'}>
+					{debtAmount}￥
+				</ElText>
+			);
+		},
+		width: 150,
+	},
+	// 债务类型
+	{ label: $t('debtType'), prop: 'debtType', slot: 'debtType', width: 130 },
+	// 债务状态
+	{ label: $t('debtStatus'), prop: 'debtStatus', slot: 'debtStatus', width: 130 },
+	// 还款截止日期
+	{
+		label: $t('dueDate'),
+		prop: 'dueDate',
+		formatter({ dueDate }) {
+			return (
+				<ElText type={'danger'} style={{ fontWeight: 800 }}>
+					{dueDate}
+				</ElText>
+			);
+		},
+		width: 190,
+		sortable: true,
+	},
+	{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },
+	{ label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 },
+	// 绑定的用户
+	{ 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: 210, slot: 'operation' },
+];
+
+// 添加规则
+export const rules = reactive<FormRules>({
+	// 绑定的用户
+	userId: [{ required: true, message: `${$t('input')}${$t('userId')}`, trigger: 'blur' }],
+	// 债务人姓名
+	debtorName: [{ required: true, message: `${$t('input')}${$t('debtorName')}`, trigger: 'blur' }],
+	// 债务金额
+	debtAmount: [{ required: true, message: `${$t('input')}${$t('debtAmount')}`, trigger: 'blur' }],
+	// 债务类型
+	debtType: [{ required: true, message: `${$t('input')}${$t('debtType')}`, trigger: 'blur' }],
+	// 债务状态
+	debtStatus: [{ required: true, message: `${$t('input')}${$t('debtStatus')}`, trigger: 'blur' }],
+	// 还款截止日期
+	dueDate: [{ required: true, message: `${$t('input')}${$t('dueDate')}`, trigger: 'blur' }],
+});

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

@@ -0,0 +1,134 @@
+import { addDialog } from '@/components/BaseDialog/index';
+import DebtTrackingDialog from '@/views/financial/debt/debt-tracking/debt-tracking-dialog.vue';
+import { useDebtTrackingStore } from '@/store/financial/debtTracking';
+import { h, ref } from 'vue';
+import { message, messageBox } from '@/utils/message';
+import type { FormItemProps } from '@/views/financial/debt/debt-tracking/utils/types';
+import { $t } from '@/plugins/i18n';
+import DeleteBatchDialog from '@/components/Table/DeleteBatchDialog.vue';
+
+export const formRef = ref();
+// 删除ids
+export const deleteIds = ref([]);
+const debtTrackingStore = useDebtTrackingStore();
+
+/** 搜索初始化债务追踪 */
+export async function onSearch() {
+	debtTrackingStore.loading = true;
+	await debtTrackingStore.getDebtTrackingList();
+	debtTrackingStore.loading = false;
+}
+
+/** 添加债务追踪 */
+export function onAdd() {
+	addDialog({
+		title: `${$t('addNew')}${$t('debtTracking')}`,
+		width: '30%',
+		props: {
+			formInline: {
+				userId: undefined,
+				debtorName: undefined,
+				debtAmount: undefined,
+				debtType: undefined,
+				debtStatus: undefined,
+				dueDate: undefined,
+			},
+		},
+		draggable: true,
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(DebtTrackingDialog, { ref: formRef }),
+		beforeSure: (done, { options }) => {
+			const form = options.props.formInline as FormItemProps;
+			formRef.value.formRef.validate(async (valid: any) => {
+				if (!valid) return;
+
+				const result = await debtTrackingStore.addDebtTracking(form);
+				if (!result) return;
+				done();
+				await onSearch();
+			});
+		},
+	});
+}
+
+/** 更新债务追踪 */
+export function onUpdate(row: any) {
+	addDialog({
+		title: `${$t('modify')}${$t('debtTracking')}`,
+		width: '30%',
+		props: {
+			formInline: {
+				userId: row.userId,
+				debtorName: row.debtorName,
+				debtAmount: row.debtAmount,
+				debtType: row.debtType,
+				debtStatus: row.debtStatus,
+				dueDate: row.dueDate,
+			},
+		},
+		draggable: true,
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(DebtTrackingDialog, { ref: formRef }),
+		beforeSure: (done, { options }) => {
+			const form = options.props.formInline as FormItemProps;
+			formRef.value.formRef.validate(async (valid: any) => {
+				if (!valid) return;
+
+				const result = await debtTrackingStore.updateDebtTracking({ ...form, id: row.id });
+				if (!result) return;
+				done();
+				await onSearch();
+			});
+		},
+	});
+}
+
+/** 删除债务追踪 */
+export const onDelete = async (row: any) => {
+	const id = row.id;
+
+	// 是否确认删除
+	const result = await messageBox({
+		title: $t('confirmDelete'),
+		showMessage: false,
+		confirmMessage: undefined,
+		cancelMessage: $t('cancel_delete'),
+	});
+	if (!result) return;
+
+	// 删除数据
+	await debtTrackingStore.deleteDebtTracking([id]);
+	await onSearch();
+};
+
+/** 批量删除 */
+export const onDeleteBatch = async () => {
+	const ids = deleteIds.value;
+	const formDeletedBatchRef = ref();
+
+	addDialog({
+		title: $t('deleteBatchTip'),
+		width: '30%',
+		props: { formInline: { confirmText: '' } },
+		draggable: true,
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(DeleteBatchDialog, { ref: formDeletedBatchRef }),
+		beforeSure: (done, { options }) => {
+			formDeletedBatchRef.value.formDeletedBatchRef.validate(async (valid: any) => {
+				if (!valid) return;
+
+				const text = options.props.formInline.confirmText.toLowerCase();
+				if (text === 'yes' || text === 'y') {
+					// 删除数据
+					await debtTrackingStore.deleteDebtTracking(ids);
+					await onSearch();
+
+					done();
+				} else message($t('deleteBatchTip'), { type: 'warning' });
+			});
+		},
+	});
+};

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

@@ -0,0 +1,20 @@
+// 添加或者修改表单元素
+export interface FormItemProps {
+	// 绑定的用户
+	userId: number;
+	// 债务人姓名
+	debtorName: string;
+	// 债务金额
+	debtAmount: any;
+	// 债务类型
+	debtType: string;
+	// 债务状态
+	debtStatus: string;
+	// 还款截止日期
+	dueDate: any;
+}
+
+// 添加或修改表单Props
+export interface FormProps {
+	formInline: FormItemProps;
+}

src/views/system/menu/index.vue

@@ -137,7 +137,7 @@ onMounted(() => {
 					</template>
 
 					<template #rank="{ row }">
-						<el-input v-model="row.rank" :max="9999" :min="1" type="number" @change="onChangeMenuRank(row)" />
+						<el-input v-model="row.rank" :max="9999" :min="1" type="number" @blur="onChangeMenuRank(row)" />
 					</template>
 
 					<template #createUser="{ row }">

src/views/system/menu/utils/hooks.tsx

@@ -201,6 +201,7 @@ export const onChangeMenuRank = async (row: any) => {
 	if (!confirm) return;
 
 	await routerStore.updateMenuByIdWithRank(data);
+	await onSearch();
 };
 
 /**