optimize: ♻️ 重构项目,修改路由排序缺陷
This commit is contained in:
parent
49c2eb264f
commit
974bcf4fcb
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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 { FormProps } from '@/views/financial-user/bill-user/utils/types';
|
||||
import { rules } from '@/views/financial-user/account-bill/bill/utils/columns';
|
||||
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>(), {
|
||||
|
|
@ -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';
|
||||
|
|
@ -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';
|
||||
|
|
@ -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 { FormProps } from '@/views/financial-user/category-user/utils/types';
|
||||
import { rules } from '@/views/financial-user/account-bill/category/utils/columns';
|
||||
import { FormProps } from '@/views/financial-user/account-bill/category/utils/types';
|
||||
import { $t } from '@/plugins/i18n';
|
||||
|
||||
const props = withDefaults(defineProps<FormProps>(), {
|
||||
|
|
@ -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';
|
||||
|
|
@ -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';
|
||||
|
||||
|
|
@ -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 { FormProps } from '@/views/financial/budget-category/utils/types';
|
||||
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';
|
||||
|
|
@ -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';
|
||||
|
|
@ -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';
|
||||
|
||||
|
|
@ -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';
|
||||
|
|
@ -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 { FormProps } from '@/views/financial/saving-goal/utils/types';
|
||||
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';
|
||||
|
|
@ -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';
|
||||
|
||||
|
|
@ -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 { FormProps } from '@/views/financial/debt-repayment-plan/utils/types';
|
||||
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';
|
||||
|
|
@ -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';
|
||||
|
|
@ -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';
|
||||
|
||||
|
|
@ -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 { FormProps } from '@/views/financial/debt-tracking/utils/types';
|
||||
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';
|
||||
|
|
@ -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';
|
||||
|
|
@ -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';
|
||||
|
||||
|
|
@ -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 { FormProps } from '@/views/financial/bill/utils/types';
|
||||
import { rules } from '@/views/financial/account-bill/bill/utils/columns';
|
||||
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';
|
||||
|
|
@ -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';
|
||||
|
|
@ -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';
|
||||
|
||||
|
|
@ -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 { FormProps } from '@/views/financial/category/utils/types';
|
||||
import { rules } from '@/views/financial/account-bill/category/utils/columns';
|
||||
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';
|
||||
|
|
@ -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';
|
||||
|
|
@ -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';
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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' }],
|
||||
});
|
||||
|
|
@ -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' });
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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' }],
|
||||
});
|
||||
|
|
@ -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' });
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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' }],
|
||||
});
|
||||
|
|
@ -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' });
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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' }],
|
||||
});
|
||||
|
|
@ -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' });
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 }">
|
||||
|
|
|
|||
|
|
@ -201,6 +201,7 @@ export const onChangeMenuRank = async (row: any) => {
|
|||
if (!confirm) return;
|
||||
|
||||
await routerStore.updateMenuByIdWithRank(data);
|
||||
await onSearch();
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in New Issue