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

page: 📄 债务回收管理代码生产

This commit is contained in:
bunny 2024-11-11 16:21:19 +08:00
parent 4a2a038f7d
commit 9105120040
15 changed files with 1024 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/api/v1/financial/budgetCategory.ts Normal file
View File

@ -0,0 +1,22 @@
import { http } from '@/api/service/request';
import type { BaseResult, ResultTable } from '@/api/service/types';
/** 预算分类表---获取预算分类表列表 */
export const fetchGetBudgetCategoryList = (data: any) => {
return http.request<BaseResult<ResultTable>>('get', `budgetCategory/getBudgetCategoryList/${data.currentPage}/${data.pageSize}`, { params: data });
};
/** 预算分类表---添加预算分类表 */
export const fetchAddBudgetCategory = (data: any) => {
return http.request<BaseResult<object>>('post', 'budgetCategory/addBudgetCategory', { data });
};
/** 预算分类表---更新预算分类表 */
export const fetchUpdateBudgetCategory = (data: any) => {
return http.request<BaseResult<object>>('put', 'budgetCategory/updateBudgetCategory', { data });
};
/** 预算分类表---删除预算分类表 */
export const fetchDeleteBudgetCategory = (data: any) => {
return http.request<BaseResult<object>>('delete', 'budgetCategory/deleteBudgetCategory', { data });
};

24
src/api/v1/financial/debtCollectionManagement.ts Normal file
View File

@ -0,0 +1,24 @@
import { http } from '@/api/service/request';
import type { BaseResult, ResultTable } from '@/api/service/types';
/** 债务回收管理表---获取债务回收管理表列表 */
export const fetchGetDebtCollectionManagementList = (data: any) => {
return http.request<BaseResult<ResultTable>>('get', `debtCollectionManagement/getDebtCollectionManagementList/${data.currentPage}/${data.pageSize}`, {
params: data,
});
};
/** 债务回收管理表---添加债务回收管理表 */
export const fetchAddDebtCollectionManagement = (data: any) => {
return http.request<BaseResult<object>>('post', 'debtCollectionManagement/addDebtCollectionManagement', { data });
};
/** 债务回收管理表---更新债务回收管理表 */
export const fetchUpdateDebtCollectionManagement = (data: any) => {
return http.request<BaseResult<object>>('put', 'debtCollectionManagement/updateDebtCollectionManagement', { data });
};
/** 债务回收管理表---删除债务回收管理表 */
export const fetchDeleteDebtCollectionManagement = (data: any) => {
return http.request<BaseResult<object>>('delete', 'debtCollectionManagement/deleteDebtCollectionManagement', { data });
};

20
src/router/modules/bill.ts
View File

@ -28,6 +28,16 @@ export default {
title: 'categoryUserManagement',
},
},
// 预算分类
{
path: '/financial/budgetCategory',
name: 'budgetCategory',
component: () => import('@/views/financial/budgetCategory/index.vue'),
meta: {
icon: 'iconamoon:category',
title: 'budgetCategory',
},
},
// 债务还款计划
{
path: '/financial/debtRepaymentPlan',
@ -38,5 +48,15 @@ export default {
title: 'debtRepaymentPlan',
},
},
// 债务回收管理
{
path: '/financial/debtCollectionManagement',
name: 'debtRepaymentPlan',
component: () => import('@/views/financial/debtCollectionManagement/index.vue'),
meta: {
icon: 'iconamoon:category',
title: 'debtCollectionManagement',
},
},
],
} satisfies RouteConfigsTable;

79
src/store/financial/budgetCategory.ts Normal file
View File

@ -0,0 +1,79 @@
import { defineStore } from 'pinia';
import { fetchAddBudgetCategory, fetchDeleteBudgetCategory, fetchGetBudgetCategoryList, fetchUpdateBudgetCategory } from '@/api/v1/financial/budgetCategory';
import { pageSizes } from '@/enums/baseConstant';
import { storeMessage } from '@/utils/message';
import { storePagination } from '@/store/useStorePagination';
/**
* 预算分类表 Store
*/
export const useBudgetCategoryStore = defineStore('budgetCategoryStore', {
state() {
return {
// 预算分类表列表
datalist: [],
// 查询表单
form: {
// 父级id
parentId: undefined,
// 绑定的用户id
userId: undefined,
// 分类名称
categoryName: undefined,
// 预算名称
budgetName: undefined,
// 完成状态
statusType: undefined,
// 预算金额
amount: undefined,
// 预算周期
period: undefined,
},
// 分页查询结果
pagination: {
currentPage: 1,
pageSize: 30,
total: 1,
pageSizes,
},
// 加载
loading: false,
};
},
getters: {},
actions: {
/** 获取预算分类表 */
async getBudgetCategoryList() {
// 整理请求参数
const data = { ...this.pagination, ...this.form };
delete data.pageSizes;
delete data.total;
delete data.background;
// 获取预算分类表列表
const result = await fetchGetBudgetCategoryList(data);
// 公共页面函数hook
const pagination = storePagination.bind(this);
return pagination(result);
},
/** 添加预算分类表 */
async addBudgetCategory(data: any) {
const result = await fetchAddBudgetCategory(data);
return storeMessage(result);
},
/** 修改预算分类表 */
async updateBudgetCategory(data: any) {
const result = await fetchUpdateBudgetCategory(data);
return storeMessage(result);
},
/** 删除预算分类表 */
async deleteBudgetCategory(data: any) {
const result = await fetchDeleteBudgetCategory(data);
return storeMessage(result);
},
},
});

80
src/store/financial/debtCollectionManagement.ts Normal file
View File

@ -0,0 +1,80 @@
import { defineStore } from 'pinia';
import {
fetchAddDebtCollectionManagement,
fetchDeleteDebtCollectionManagement,
fetchGetDebtCollectionManagementList,
fetchUpdateDebtCollectionManagement,
} from '@/api/v1/financial/debtCollectionManagement';
import { pageSizes } from '@/enums/baseConstant';
import { storeMessage } from '@/utils/message';
import { storePagination } from '@/store/useStorePagination';
/**
* 债务回收管理表 Store
*/
export const useDebtCollectionManagementStore = defineStore('debtCollectionManagementStore', {
state() {
return {
// 债务回收管理表列表
datalist: [],
// 查询表单
form: {
// 债务ID
debtId: undefined,
// 回收日期
recoveryDate: undefined,
// 回收金额
recoveryAmount: undefined,
// 回收方式
recoveryMethod: undefined,
// 备注
notes: undefined,
},
// 分页查询结果
pagination: {
currentPage: 1,
pageSize: 30,
total: 1,
pageSizes,
},
// 加载
loading: false,
};
},
getters: {},
actions: {
/** 获取债务回收管理表 */
async getDebtCollectionManagementList() {
// 整理请求参数
const data = { ...this.pagination, ...this.form };
delete data.pageSizes;
delete data.total;
delete data.background;
// 获取债务回收管理表列表
const result = await fetchGetDebtCollectionManagementList(data);
// 公共页面函数hook
const pagination = storePagination.bind(this);
return pagination(result);
},
/** 添加债务回收管理表 */
async addDebtCollectionManagement(data: any) {
const result = await fetchAddDebtCollectionManagement(data);
return storeMessage(result);
},
/** 修改债务回收管理表 */
async updateDebtCollectionManagement(data: any) {
const result = await fetchUpdateDebtCollectionManagement(data);
return storeMessage(result);
},
/** 删除债务回收管理表 */
async deleteDebtCollectionManagement(data: any) {
const result = await fetchDeleteDebtCollectionManagement(data);
return storeMessage(result);
},
},
});

71
src/views/financial/budgetCategory/budget-category-dialog.vue Normal file
View File

@ -0,0 +1,71 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { FormInstance } from 'element-plus';
import { rules } from '@/views/financial/budgetCategory/utils/columns';
import { FormProps } from '@/views/financial/budgetCategory/utils/types';
import { frameSureOptions } from '@/enums';
import { $t } from '@/plugins/i18n';
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);
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-input v-model="form.parentId" autocomplete="off" type="text" :placeholder="$t('input') + $t('parentId')" />
</el-form-item>
<!-- 绑定的用户id -->
<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('categoryName')" prop="categoryName">
<el-input v-model="form.categoryName" autocomplete="off" type="text" :placeholder="$t('input') + $t('categoryName')" />
</el-form-item>
<!-- 预算名称 -->
<el-form-item :label="$t('budgetName')" prop="budgetName">
<el-input v-model="form.budgetName" autocomplete="off" type="text" :placeholder="$t('input') + $t('budgetName')" />
</el-form-item>
<!-- 完成状态 -->
<el-form-item :label="$t('statusType')" prop="statusType">
<el-input v-model="form.statusType" autocomplete="off" type="text" :placeholder="$t('input') + $t('statusType')" />
</el-form-item>
<!-- 预算金额 -->
<el-form-item :label="$t('amount')" prop="amount">
<el-input v-model="form.amount" autocomplete="off" type="text" :placeholder="$t('input') + $t('amount')" />
</el-form-item>
<!-- 预算周期 -->
<el-form-item :label="$t('period')" prop="period">
<el-input v-model="form.period" autocomplete="off" type="text" :placeholder="$t('input') + $t('period')" />
</el-form-item>
</el-form>
</template>

152
src/views/financial/budgetCategory/index.vue Normal file
View File

@ -0,0 +1,152 @@
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { columns } from '@/views/financial/budgetCategory/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/budgetCategory/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';
const tableRef = ref();
const formRef = ref();
const budgetCategoryStore = useBudgetCategoryStore();
/** 当前页改变时 */
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();
await onSearch();
};
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('parentId')" prop="parentId">
<el-input v-model="budgetCategoryStore.form.parentId" :placeholder="`${$t('input')}${$t('parentId')}`" class="!w-[180px]" clearable />
</el-form-item>
<!-- 绑定的用户id -->
<el-form-item :label="$t('userId')" prop="userId">
<el-input v-model="budgetCategoryStore.form.userId" :placeholder="`${$t('input')}${$t('userId')}`" class="!w-[180px]" clearable />
</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-input v-model="budgetCategoryStore.form.statusType" :placeholder="`${$t('input')}${$t('statusType')}`" class="!w-[180px]" clearable />
</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-input v-model="budgetCategoryStore.form.period" :placeholder="`${$t('input')}${$t('period')}`" class="!w-[180px]" clearable />
</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" 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="budgetCategoryStore.datalist"
:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
:loading="budgetCategoryStore.loading"
:size="size"
adaptive
align-whole="center"
border
highlight-current-row
row-key="id"
showOverflowTooltip
table-layout="auto"
:pagination="budgetCategoryStore.pagination"
@page-size-change="onPageSizeChange"
@selection-change="onSelectionChange"
@page-current-change="onCurrentPageChange"
>
<template #createUser="{ row }">
<el-button v-show="row.createUser" link type="primary" @click="selectUserinfo(row.createUser)">
{{ row.createUsername }}
</el-button>
</template>
<template #updateUser="{ row }">
<el-button v-show="row.updateUser" link type="primary" @click="selectUserinfo(row.updateUser)">
{{ row.updateUsername }}
</el-button>
</template>
<template #operation="{ row }">
<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)"> {{ $t('modify') }} </el-button>
<el-button :icon="useRenderIcon(AddFill)" :size="size" class="reset-margin" link type="primary" @click="onAdd"> {{ $t('addNew') }} </el-button>
<!-- TODO 待完成 -->
<el-popconfirm :title="`${$t('delete')}${row.email}?`" @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>

46
src/views/financial/budgetCategory/utils/columns.ts Normal file
View File

@ -0,0 +1,46 @@
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('parentId'), prop: 'parentId' },
// 绑定的用户id
{ label: $t('userId'), prop: 'userId' },
// 分类名称
{ label: $t('categoryName'), prop: 'categoryName' },
// 预算名称
{ label: $t('budgetName'), prop: 'budgetName' },
// 完成状态
{ label: $t('statusType'), prop: 'statusType' },
// 预算金额
{ label: $t('amount'), prop: 'amount' },
// 预算周期
{ label: $t('period'), prop: 'period' },
{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },
{ label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 },
{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 130 },
{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 130 },
{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },
];
// 添加规则
export const rules = reactive<FormRules>({
// 父级id
parentId: [{ required: true, message: `${$t('input')}${$t('parentId')}`, trigger: 'blur' }],
// 绑定的用户id
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' }],
});

136
src/views/financial/budgetCategory/utils/hooks.ts Normal file
View File

@ -0,0 +1,136 @@
import { addDialog } from '@/components/BaseDialog/index';
import BudgetCategoryDialog from '@/views/financial/budgetCategory/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/budgetCategory/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() {
addDialog({
title: `${$t('addNew')}${$t('budgetCategory')}`,
width: '30%',
props: {
formInline: {
parentId: undefined,
userId: undefined,
categoryName: undefined,
budgetName: undefined,
statusType: undefined,
amount: undefined,
period: 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;
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,
userId: row.userId,
categoryName: row.categoryName,
budgetName: row.budgetName,
statusType: row.statusType,
amount: row.amount,
period: row.period,
},
},
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;
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' });
});
},
});
};

22
src/views/financial/budgetCategory/utils/types.ts Normal file
View File

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

56
src/views/financial/debtCollectionManagement/debt-collection-management-dialog.vue Normal file
View File

@ -0,0 +1,56 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { FormInstance } from 'element-plus';
import { rules } from '@/views/financial/debtCollectionManagement/utils/columns';
import { FormProps } from '@/views/financial/debtCollectionManagement/utils/types';
import { $t } from '@/plugins/i18n';
const props = withDefaults(defineProps<FormProps>(), {
formInline: () => ({
// 债务ID
debtId: undefined,
// 回收日期
recoveryDate: undefined,
// 回收金额
recoveryAmount: undefined,
// 回收方式
recoveryMethod: undefined,
// 备注
notes: 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('recoveryDate')" prop="recoveryDate">
<el-input v-model="form.recoveryDate" :placeholder="$t('input') + $t('recoveryDate')" autocomplete="off" type="text" />
</el-form-item>
<!-- 回收金额 -->
<el-form-item :label="$t('recoveryAmount')" prop="recoveryAmount">
<el-input v-model="form.recoveryAmount" :placeholder="$t('input') + $t('recoveryAmount')" autocomplete="off" type="text" />
</el-form-item>
<!-- 回收方式 -->
<el-form-item :label="$t('recoveryMethod')" prop="recoveryMethod">
<el-input v-model="form.recoveryMethod" :placeholder="$t('input') + $t('recoveryMethod')" autocomplete="off" type="text" />
</el-form-item>
<!-- 备注 -->
<el-form-item :label="$t('notes')" prop="notes">
<el-input v-model="form.notes" :placeholder="$t('input') + $t('notes')" autocomplete="off" type="text" />
</el-form-item>
</el-form>
</template>

130
src/views/financial/debtCollectionManagement/index.vue Normal file
View File

@ -0,0 +1,130 @@
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { columns } from '@/views/financial/debtCollectionManagement/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/debtCollectionManagement/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 { useDebtCollectionManagementStore } from '@/store/financial/debtCollectionManagement';
import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
import { FormInstance } from 'element-plus';
const tableRef = ref();
const formRef = ref();
const debtCollectionManagementStore = useDebtCollectionManagementStore();
/** 当前页改变时 */
const onCurrentPageChange = async (value: number) => {
debtCollectionManagementStore.pagination.currentPage = value;
await onSearch();
};
/** 当分页发生变化 */
const onPageSizeChange = async (value: number) => {
debtCollectionManagementStore.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="debtCollectionManagementStore.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="debtCollectionManagementStore.form.debtId" :placeholder="`${$t('input')}${$t('debtId')}`" class="!w-[180px]" clearable />
</el-form-item>
<!-- 回收日期 -->
<el-form-item :label="$t('recoveryDate')" prop="recoveryDate">
<el-input v-model="debtCollectionManagementStore.form.recoveryDate" :placeholder="`${$t('input')}${$t('recoveryDate')}`" class="!w-[180px]" clearable />
</el-form-item>
<!-- 回收金额 -->
<el-form-item :label="$t('recoveryAmount')" prop="recoveryAmount">
<el-input v-model="debtCollectionManagementStore.form.recoveryAmount" :placeholder="`${$t('input')}${$t('recoveryAmount')}`" class="!w-[180px]" clearable />
</el-form-item>
<!-- 回收方式 -->
<el-form-item :label="$t('recoveryMethod')" prop="recoveryMethod">
<el-input v-model="debtCollectionManagementStore.form.recoveryMethod" :placeholder="`${$t('input')}${$t('recoveryMethod')}`" class="!w-[180px]" clearable />
</el-form-item>
<!-- 备注 -->
<el-form-item :label="$t('notes')" prop="notes">
<el-input v-model="debtCollectionManagementStore.form.notes" :placeholder="`${$t('input')}${$t('notes')}`" class="!w-[180px]" clearable />
</el-form-item>
<el-form-item>
<el-button :icon="useRenderIcon('ri:search-line')" :loading="debtCollectionManagementStore.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="debtCollectionManagementStore.datalist"
:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
:loading="debtCollectionManagementStore.loading"
:pagination="debtCollectionManagementStore.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>

36
src/views/financial/debtCollectionManagement/utils/columns.ts Normal file
View File

@ -0,0 +1,36 @@
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('recoveryDate'), prop: 'recoveryDate' },
// 回收金额
{ label: $t('recoveryAmount'), prop: 'recoveryAmount' },
// 回收方式
{ label: $t('recoveryMethod'), prop: 'recoveryMethod' },
// 备注
{ label: $t('notes'), prop: 'notes' },
{ 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' }],
// 回收日期
recoveryDate: [{ required: true, message: `${$t('input')}${$t('recoveryDate')}`, trigger: 'blur' }],
// 回收金额
recoveryAmount: [{ required: true, message: `${$t('input')}${$t('recoveryAmount')}`, trigger: 'blur' }],
// 回收方式
recoveryMethod: [{ required: true, message: `${$t('input')}${$t('recoveryMethod')}`, trigger: 'blur' }],
// 备注
notes: [{ required: true, message: `${$t('input')}${$t('notes')}`, trigger: 'blur' }],
});

132
src/views/financial/debtCollectionManagement/utils/hooks.ts Normal file
View File

@ -0,0 +1,132 @@
import { addDialog } from '@/components/BaseDialog/index';
import DebtCollectionManagementDialog from '@/views/financial/debtCollectionManagement/debt-collection-management-dialog.vue';
import { useDebtCollectionManagementStore } from '@/store/financial/debtCollectionManagement';
import { h, ref } from 'vue';
import { message, messageBox } from '@/utils/message';
import type { FormItemProps } from '@/views/financial/debtCollectionManagement/utils/types';
import { $t } from '@/plugins/i18n';
import DeleteBatchDialog from '@/components/Table/DeleteBatchDialog.vue';
export const formRef = ref();
// 删除ids
export const deleteIds = ref([]);
const debtCollectionManagementStore = useDebtCollectionManagementStore();
/** 搜索初始化债务回收管理表 */
export async function onSearch() {
debtCollectionManagementStore.loading = true;
await debtCollectionManagementStore.getDebtCollectionManagementList();
debtCollectionManagementStore.loading = false;
}
/** 添加债务回收管理表 */
export function onAdd() {
addDialog({
title: `${$t('addNew')}${$t('debtCollectionManagement')}`,
width: '30%',
props: {
formInline: {
debtId: undefined,
recoveryDate: undefined,
recoveryAmount: undefined,
recoveryMethod: undefined,
notes: undefined,
},
},
draggable: true,
fullscreenIcon: true,
closeOnClickModal: false,
contentRenderer: () => h(DebtCollectionManagementDialog, { 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 debtCollectionManagementStore.addDebtCollectionManagement(form);
if (!result) return;
done();
await onSearch();
});
},
});
}
/** 更新债务回收管理表 */
export function onUpdate(row: any) {
addDialog({
title: `${$t('modify')}${$t('debtCollectionManagement')}`,
width: '30%',
props: {
formInline: {
debtId: row.debtId,
recoveryDate: row.recoveryDate,
recoveryAmount: row.recoveryAmount,
recoveryMethod: row.recoveryMethod,
notes: row.notes,
},
},
draggable: true,
fullscreenIcon: true,
closeOnClickModal: false,
contentRenderer: () => h(DebtCollectionManagementDialog, { 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 debtCollectionManagementStore.updateDebtCollectionManagement({ ...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 debtCollectionManagementStore.deleteDebtCollectionManagement([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 debtCollectionManagementStore.deleteDebtCollectionManagement(ids);
await onSearch();
done();
} else message($t('deleteBatchTip'), { type: 'warning' });
});
},
});
};

18
src/views/financial/debtCollectionManagement/utils/types.ts Normal file
View File

@ -0,0 +1,18 @@
// 添加或者修改表单元素
export interface FormItemProps {
// 债务ID
debtId: number;
// 回收日期
recoveryDate: any;
// 回收金额
recoveryAmount: any;
// 回收方式
recoveryMethod: string;
// 备注
notes: string;
}
// 添加或修改表单Props
export interface FormProps {
formInline: FormItemProps;
}