page: 📄 债务还款计划代码生成

.env.development

@@ -1,5 +1,5 @@
 # 平台本地运行端口号
-VITE_PORT=7000
+VITE_PORT=3000
 
 # 预发布环境路由历史模式（Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"）
 VITE_ROUTER_HISTORY="hash"
@@ -8,7 +8,7 @@ VITE_ROUTER_HISTORY="hash"
 VITE_BASE_API=/api
 
 # 跨域代理地址
-VITE_APP_URL=http://localhost:7070
+VITE_APP_URL=http://localhost:6060
 
 # mock地址
 VITE_MOCK_BASE_API=/mock

src/api/v1/financial/debtRepaymentPlan.ts

@@ -0,0 +1,22 @@
+import { http } from '@/api/service/request';
+import type { BaseResult, ResultTable } from '@/api/service/types';
+
+/** 债务还款计划表---获取债务还款计划表列表 */
+export const fetchGetDebtRepaymentPlanList = (data: any) => {
+	return http.request<BaseResult<ResultTable>>('get', `debtRepaymentPlan/getDebtRepaymentPlanList/${data.currentPage}/${data.pageSize}`, { params: data });
+};
+
+/** 债务还款计划表---添加债务还款计划表 */
+export const fetchAddDebtRepaymentPlan = (data: any) => {
+	return http.request<BaseResult<object>>('post', 'debtRepaymentPlan/addDebtRepaymentPlan', { data });
+};
+
+/** 债务还款计划表---更新债务还款计划表 */
+export const fetchUpdateDebtRepaymentPlan = (data: any) => {
+	return http.request<BaseResult<object>>('put', 'debtRepaymentPlan/updateDebtRepaymentPlan', { data });
+};
+
+/** 债务还款计划表---删除债务还款计划表 */
+export const fetchDeleteDebtRepaymentPlan = (data: any) => {
+	return http.request<BaseResult<object>>('delete', 'debtRepaymentPlan/deleteDebtRepaymentPlan', { data });
+};

src/router/modules/bill.ts

@@ -28,5 +28,15 @@ export default {
 				title: 'categoryUserManagement',
 			},
 		},
+		// 债务还款计划
+		{
+			path: '/financial/debtRepaymentPlan',
+			name: 'debtRepaymentPlan',
+			component: () => import('@/views/financial/debtRepaymentPlan/index.vue'),
+			meta: {
+				icon: 'iconamoon:category',
+				title: 'debtRepaymentPlan',
+			},
+		},
 	],
 } satisfies RouteConfigsTable;

src/store/financial/debtRepaymentPlan.ts

@@ -0,0 +1,82 @@
+import { defineStore } from 'pinia';
+import {
+	fetchAddDebtRepaymentPlan,
+	fetchDeleteDebtRepaymentPlan,
+	fetchGetDebtRepaymentPlanList,
+	fetchUpdateDebtRepaymentPlan,
+} from '@/api/v1/financial/debtRepaymentPlan';
+import { pageSizes } from '@/enums/baseConstant';
+import { storeMessage } from '@/utils/message';
+import { storePagination } from '@/store/useStorePagination';
+
+/**
+ * 债务还款计划表 Store
+ */
+export const useDebtRepaymentPlanStore = defineStore('debtRepaymentPlanStore', {
+	state() {
+		return {
+			// 债务还款计划表列表
+			datalist: [],
+			// 查询表单
+			form: {
+				// 债务ID
+				debtId: undefined,
+				// 债务金额
+				installmentNumber: undefined,
+				// 每期应还金额
+				installmentAmount: undefined,
+				// 还款截止日期
+				dueDate: undefined,
+				// 已还金额
+				paidAmount: undefined,
+				// 还款状态
+				paymentStatus: undefined,
+			},
+			// 分页查询结果
+			pagination: {
+				currentPage: 1,
+				pageSize: 30,
+				total: 1,
+				pageSizes,
+			},
+			// 加载
+			loading: false,
+		};
+	},
+	getters: {},
+	actions: {
+		/** 获取债务还款计划表 */
+		async getDebtRepaymentPlanList() {
+			// 整理请求参数
+			const data = { ...this.pagination, ...this.form };
+			delete data.pageSizes;
+			delete data.total;
+			delete data.background;
+
+			// 获取债务还款计划表列表
+			const result = await fetchGetDebtRepaymentPlanList(data);
+
+			// 公共页面函数hook
+			const pagination = storePagination.bind(this);
+			return pagination(result);
+		},
+
+		/** 添加债务还款计划表 */
+		async addDebtRepaymentPlan(data: any) {
+			const result = await fetchAddDebtRepaymentPlan(data);
+			return storeMessage(result);
+		},
+
+		/** 修改债务还款计划表 */
+		async updateDebtRepaymentPlan(data: any) {
+			const result = await fetchUpdateDebtRepaymentPlan(data);
+			return storeMessage(result);
+		},
+
+		/** 删除债务还款计划表 */
+		async deleteDebtRepaymentPlan(data: any) {
+			const result = await fetchDeleteDebtRepaymentPlan(data);
+			return storeMessage(result);
+		},
+	},
+});

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

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { FormInstance } from 'element-plus';
+import { rules } from '@/views/financial/debtRepaymentPlan/utils/columns';
+import { FormProps } from '@/views/financial/debtRepaymentPlan/utils/types';
+import { $t } from '@/plugins/i18n';
+
+const props = withDefaults(defineProps<FormProps>(), {
+	formInline: () => ({
+		// 债务ID
+		debtId: undefined,
+		// 债务金额
+		installmentNumber: undefined,
+		// 每期应还金额
+		installmentAmount: undefined,
+		// 还款截止日期
+		dueDate: undefined,
+		// 已还金额
+		paidAmount: undefined,
+		// 还款状态
+		paymentStatus: undefined,
+	}),
+});
+
+const formRef = ref<FormInstance>();
+const form = ref(props.formInline);
+
+defineExpose({ formRef });
+</script>
+
+<template>
+	<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
+		<!-- 债务ID -->
+		<el-form-item :label="$t('debtId')" prop="debtId">
+			<el-input v-model="form.debtId" :placeholder="$t('input') + $t('debtId')" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 债务金额 -->
+		<el-form-item :label="$t('installmentNumber')" prop="installmentNumber">
+			<el-input v-model="form.installmentNumber" :placeholder="$t('input') + $t('installmentNumber')" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 每期应还金额 -->
+		<el-form-item :label="$t('installmentAmount')" prop="installmentAmount">
+			<el-input v-model="form.installmentAmount" :placeholder="$t('input') + $t('installmentAmount')" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 还款截止日期 -->
+		<el-form-item :label="$t('dueDate')" prop="dueDate">
+			<el-input v-model="form.dueDate" :placeholder="$t('input') + $t('dueDate')" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 已还金额 -->
+		<el-form-item :label="$t('paidAmount')" prop="paidAmount">
+			<el-input v-model="form.paidAmount" :placeholder="$t('input') + $t('paidAmount')" autocomplete="off" type="text" />
+		</el-form-item>
+
+		<!-- 还款状态 -->
+		<el-form-item :label="$t('paymentStatus')" prop="paymentStatus">
+			<el-input v-model="form.paymentStatus" :placeholder="$t('input') + $t('paymentStatus')" autocomplete="off" type="text" />
+		</el-form-item>
+	</el-form>
+</template>

src/views/financial/debtRepaymentPlan/index.vue

@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { columns } from '@/views/financial/debtRepaymentPlan/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/debtRepaymentPlan/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';
+
+const tableRef = ref();
+const formRef = ref();
+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();
+};
+
+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">
+			<!-- 债务ID -->
+			<el-form-item :label="$t('debtId')" prop="debtId">
+				<el-input v-model="debtRepaymentPlanStore.form.debtId" :placeholder="`${$t('input')}${$t('debtId')}`" class="!w-[180px]" clearable />
+			</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-input v-model="debtRepaymentPlanStore.form.dueDate" :placeholder="`${$t('input')}${$t('dueDate')}`" class="!w-[180px]" clearable />
+			</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-input v-model="debtRepaymentPlanStore.form.paymentStatus" :placeholder="`${$t('input')}${$t('paymentStatus')}`" class="!w-[180px]" clearable />
+			</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="债务还款计划表" @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 #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/debtRepaymentPlan/utils/columns.ts

@@ -0,0 +1,40 @@
+import { reactive } from 'vue';
+import { $t } from '@/plugins/i18n';
+import type { FormRules } from 'element-plus';
+
+// 表格列
+export const columns: TableColumnList = [
+	{ type: 'selection', align: 'left' },
+	{ type: 'index', index: (index: number) => index + 1, label: '序号', width: 60 },
+	// 债务ID
+	{ label: $t('debtId'), prop: 'debtId' },
+	// 债务金额
+	{ label: $t('installmentNumber'), prop: 'installmentNumber' },
+	// 每期应还金额
+	{ label: $t('installmentAmount'), prop: 'installmentAmount' },
+	// 还款截止日期
+	{ label: $t('dueDate'), prop: 'dueDate' },
+	// 已还金额
+	{ label: $t('paidAmount'), prop: 'paidAmount' },
+	// 还款状态
+	{ label: $t('paymentStatus'), prop: 'paymentStatus' },
+	{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },
+	{ label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 },
+	{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },
+];
+
+// 添加规则
+export const rules = reactive<FormRules>({
+	// 债务ID
+	debtId: [{ required: true, message: `${$t('input')}${$t('debtId')}`, 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/debtRepaymentPlan/utils/hooks.ts

@@ -0,0 +1,134 @@
+import { addDialog } from '@/components/BaseDialog/index';
+import DebtRepaymentPlanDialog from '@/views/financial/debtRepaymentPlan/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/debtRepaymentPlan/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: {
+				debtId: undefined,
+				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: {
+				debtId: row.debtId,
+				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/debtRepaymentPlan/utils/types.ts

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