From 4a2a038f7dbf7560b73a9f49b3a8215880452cd3 Mon Sep 17 00:00:00 2001 From: bunny <1319900154@qq.com> Date: Mon, 11 Nov 2024 15:30:03 +0800 Subject: [PATCH] =?UTF-8?q?page:=20=F0=9F=93=84=20=E5=80=BA=E5=8A=A1?= =?UTF-8?q?=E8=BF=98=E6=AC=BE=E8=AE=A1=E5=88=92=E4=BB=A3=E7=A0=81=E7=94=9F?= =?UTF-8?q?=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 4 +- src/api/v1/financial/debtRepaymentPlan.ts | 22 +++ src/router/modules/bill.ts | 10 ++ src/store/financial/debtRepaymentPlan.ts | 82 +++++++++++ .../debt-repayment-plan-dialog.vue | 63 ++++++++ .../financial/debtRepaymentPlan/index.vue | 135 ++++++++++++++++++ .../debtRepaymentPlan/utils/columns.ts | 40 ++++++ .../debtRepaymentPlan/utils/hooks.ts | 134 +++++++++++++++++ .../debtRepaymentPlan/utils/types.ts | 20 +++ 9 files changed, 508 insertions(+), 2 deletions(-) create mode 100644 src/api/v1/financial/debtRepaymentPlan.ts create mode 100644 src/store/financial/debtRepaymentPlan.ts create mode 100644 src/views/financial/debtRepaymentPlan/debt-repayment-plan-dialog.vue create mode 100644 src/views/financial/debtRepaymentPlan/index.vue create mode 100644 src/views/financial/debtRepaymentPlan/utils/columns.ts create mode 100644 src/views/financial/debtRepaymentPlan/utils/hooks.ts create mode 100644 src/views/financial/debtRepaymentPlan/utils/types.ts diff --git a/.env.development b/.env.development index 7dd8fec..15ddaf7 100644 --- a/.env.development +++ b/.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 diff --git a/src/api/v1/financial/debtRepaymentPlan.ts b/src/api/v1/financial/debtRepaymentPlan.ts new file mode 100644 index 0000000..97f057e --- /dev/null +++ b/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>('get', `debtRepaymentPlan/getDebtRepaymentPlanList/${data.currentPage}/${data.pageSize}`, { params: data }); +}; + +/** 债务还款计划表---添加债务还款计划表 */ +export const fetchAddDebtRepaymentPlan = (data: any) => { + return http.request>('post', 'debtRepaymentPlan/addDebtRepaymentPlan', { data }); +}; + +/** 债务还款计划表---更新债务还款计划表 */ +export const fetchUpdateDebtRepaymentPlan = (data: any) => { + return http.request>('put', 'debtRepaymentPlan/updateDebtRepaymentPlan', { data }); +}; + +/** 债务还款计划表---删除债务还款计划表 */ +export const fetchDeleteDebtRepaymentPlan = (data: any) => { + return http.request>('delete', 'debtRepaymentPlan/deleteDebtRepaymentPlan', { data }); +}; diff --git a/src/router/modules/bill.ts b/src/router/modules/bill.ts index ccce31c..7dd7d67 100644 --- a/src/router/modules/bill.ts +++ b/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; diff --git a/src/store/financial/debtRepaymentPlan.ts b/src/store/financial/debtRepaymentPlan.ts new file mode 100644 index 0000000..8de4d52 --- /dev/null +++ b/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); + }, + }, +}); diff --git a/src/views/financial/debtRepaymentPlan/debt-repayment-plan-dialog.vue b/src/views/financial/debtRepaymentPlan/debt-repayment-plan-dialog.vue new file mode 100644 index 0000000..8cfa521 --- /dev/null +++ b/src/views/financial/debtRepaymentPlan/debt-repayment-plan-dialog.vue @@ -0,0 +1,63 @@ + + + diff --git a/src/views/financial/debtRepaymentPlan/index.vue b/src/views/financial/debtRepaymentPlan/index.vue new file mode 100644 index 0000000..44bffb8 --- /dev/null +++ b/src/views/financial/debtRepaymentPlan/index.vue @@ -0,0 +1,135 @@ + + + diff --git a/src/views/financial/debtRepaymentPlan/utils/columns.ts b/src/views/financial/debtRepaymentPlan/utils/columns.ts new file mode 100644 index 0000000..d838569 --- /dev/null +++ b/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({ + // 债务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' }], +}); diff --git a/src/views/financial/debtRepaymentPlan/utils/hooks.ts b/src/views/financial/debtRepaymentPlan/utils/hooks.ts new file mode 100644 index 0000000..6313e8b --- /dev/null +++ b/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' }); + }); + }, + }); +}; diff --git a/src/views/financial/debtRepaymentPlan/utils/types.ts b/src/views/financial/debtRepaymentPlan/utils/types.ts new file mode 100644 index 0000000..d162b98 --- /dev/null +++ b/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; +}