page: 📄 债务追踪代码生产

src/api/v1/financial/debtTracking.ts

@@ -0,0 +1,22 @@
+import { http } from '@/api/service/request';
+import type { BaseResult, ResultTable } from '@/api/service/types';
+
+/** 债务追踪---获取债务追踪列表 */
+export const fetchGetDebtTrackingList = (data: any) => {
+	return http.request<BaseResult<ResultTable>>('get', `debtTracking/getDebtTrackingList/${data.currentPage}/${data.pageSize}`, { params: data });
+};
+
+/** 债务追踪---添加债务追踪 */
+export const fetchAddDebtTracking = (data: any) => {
+	return http.request<BaseResult<object>>('post', 'debtTracking/addDebtTracking', { data });
+};
+
+/** 债务追踪---更新债务追踪 */
+export const fetchUpdateDebtTracking = (data: any) => {
+	return http.request<BaseResult<object>>('put', 'debtTracking/updateDebtTracking', { data });
+};
+
+/** 债务追踪---删除债务追踪 */
+export const fetchDeleteDebtTracking = (data: any) => {
+	return http.request<BaseResult<object>>('delete', 'debtTracking/deleteDebtTracking', { data });
+};

src/router/modules/bill.ts

@@ -58,5 +58,15 @@ export default {
 				title: 'debtCollectionManagement',
 			},
 		},
+		// 债务追踪
+		{
+			path: '/financial/debtTracking',
+			name: 'debtTracking',
+			component: () => import('@/views/financial/debtTracking/index.vue'),
+			meta: {
+				icon: 'iconamoon:category',
+				title: 'debtTracking',
+			},
+		},
 	],
 } satisfies RouteConfigsTable;

src/store/financial/debtTracking.ts

@@ -0,0 +1,77 @@
+import { defineStore } from 'pinia';
+import { fetchAddDebtTracking, fetchDeleteDebtTracking, fetchGetDebtTrackingList, fetchUpdateDebtTracking } from '@/api/v1/financial/debtTracking';
+import { pageSizes } from '@/enums/baseConstant';
+import { storeMessage } from '@/utils/message';
+import { storePagination } from '@/store/useStorePagination';
+
+/**
+ * 债务追踪 Store
+ */
+export const useDebtTrackingStore = defineStore('debtTrackingStore', {
+	state() {
+		return {
+			// 债务追踪列表
+			datalist: [],
+			// 查询表单
+			form: {
+				// 绑定的用户
+				userId: undefined,
+				// 债务人姓名
+				debtorName: undefined,
+				// 债务金额
+				debtAmount: undefined,
+				// 债务类型
+				debtType: undefined,
+				// 债务状态
+				debtStatus: undefined,
+				// 还款截止日期
+				dueDate: undefined,
+			},
+			// 分页查询结果
+			pagination: {
+				currentPage: 1,
+				pageSize: 30,
+				total: 1,
+				pageSizes,
+			},
+			// 加载
+			loading: false,
+		};
+	},
+	getters: {},
+	actions: {
+		/** 获取债务追踪 */
+		async getDebtTrackingList() {
+			// 整理请求参数
+			const data = { ...this.pagination, ...this.form };
+			delete data.pageSizes;
+			delete data.total;
+			delete data.background;
+
+			// 获取债务追踪列表
+			const result = await fetchGetDebtTrackingList(data);
+
+			// 公共页面函数hook
+			const pagination = storePagination.bind(this);
+			return pagination(result);
+		},
+
+		/** 添加债务追踪 */
+		async addDebtTracking(data: any) {
+			const result = await fetchAddDebtTracking(data);
+			return storeMessage(result);
+		},
+
+		/** 修改债务追踪 */
+		async updateDebtTracking(data: any) {
+			const result = await fetchUpdateDebtTracking(data);
+			return storeMessage(result);
+		},
+
+		/** 删除债务追踪 */
+		async deleteDebtTracking(data: any) {
+			const result = await fetchDeleteDebtTracking(data);
+			return storeMessage(result);
+		},
+	},
+});

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

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { FormInstance } from 'element-plus';
+import { rules } from '@/views/financial/debtTracking/utils/columns';
+import { FormProps } from '@/views/financial/debtTracking/utils/types';
+import { frameSureOptions } from '@/enums';
+import { $t } from '@/plugins/i18n';
+
+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);
+
+defineExpose({ formRef });
+</script>
+
+<template>
+	<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
+		<!-- 绑定的用户 -->
+		<el-form-item :label="$t('userId')" prop="userId">
+			<el-input v-model="form.userId" autocomplete="off" type="text" :placeholder="$t('input') + $t('userId')" />
+		</el-form-item>
+
+		<!-- 债务人姓名 -->
+		<el-form-item :label="$t('debtorName')" prop="debtorName">
+			<el-input v-model="form.debtorName" autocomplete="off" type="text" :placeholder="$t('input') + $t('debtorName')" />
+		</el-form-item>
+
+		<!-- 债务金额 -->
+		<el-form-item :label="$t('debtAmount')" prop="debtAmount">
+			<el-input v-model="form.debtAmount" autocomplete="off" type="text" :placeholder="$t('input') + $t('debtAmount')" />
+		</el-form-item>
+
+		<!-- 债务类型 -->
+		<el-form-item :label="$t('debtType')" prop="debtType">
+			<el-input v-model="form.debtType" autocomplete="off" type="text" :placeholder="$t('input') + $t('debtType')" />
+		</el-form-item>
+
+		<!-- 债务状态 -->
+		<el-form-item :label="$t('debtStatus')" prop="debtStatus">
+			<el-input v-model="form.debtStatus" autocomplete="off" type="text" :placeholder="$t('input') + $t('debtStatus')" />
+		</el-form-item>
+
+		<!-- 还款截止日期 -->
+		<el-form-item :label="$t('dueDate')" prop="dueDate">
+			<el-input v-model="form.dueDate" autocomplete="off" type="text" :placeholder="$t('input') + $t('dueDate')" />
+		</el-form-item>
+	</el-form>
+</template>

src/views/financial/debtTracking/index.vue

@@ -0,0 +1,133 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { columns } from '@/views/financial/debtTracking/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/debtTracking/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';
+
+const tableRef = ref();
+const formRef = ref();
+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();
+};
+
+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('userId')" prop="userId">
+				<el-input v-model="debtTrackingStore.form.userId" :placeholder="`${$t('input')}${$t('userId')}`" class="!w-[180px]" clearable />
+			</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-input v-model="debtTrackingStore.form.debtType" :placeholder="`${$t('input')}${$t('debtType')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 债务状态 -->
+			<el-form-item :label="$t('debtStatus')" prop="debtStatus">
+				<el-input v-model="debtTrackingStore.form.debtStatus" :placeholder="`${$t('input')}${$t('debtStatus')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+
+			<!-- 还款截止日期 -->
+			<el-form-item :label="$t('dueDate')" prop="dueDate">
+				<el-input v-model="debtTrackingStore.form.dueDate" :placeholder="`${$t('input')}${$t('dueDate')}`" class="!w-[180px]" clearable />
+			</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="债务追踪" @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 #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/debtTracking/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 },
+	// 绑定的用户
+	{ label: $t('userId'), prop: 'userId' },
+	// 债务人姓名
+	{ label: $t('debtorName'), prop: 'debtorName' },
+	// 债务金额
+	{ label: $t('debtAmount'), prop: 'debtAmount' },
+	// 债务类型
+	{ label: $t('debtType'), prop: 'debtType' },
+	// 债务状态
+	{ label: $t('debtStatus'), prop: 'debtStatus' },
+	// 还款截止日期
+	{ label: $t('dueDate'), prop: 'dueDate' },
+	{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },
+	{ label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 },
+	{ label: $t('table.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/debtTracking/utils/hooks.ts

@@ -0,0 +1,134 @@
+import { addDialog } from '@/components/BaseDialog/index';
+import DebtTrackingDialog from '@/views/financial/debtTracking/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/debtTracking/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/debtTracking/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;
+}