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

completepage: 🍻 债务计划和还款计划完成

This commit is contained in:
Bunny 2024-11-15 18:03:56 +08:00
parent 4d511295cc
commit 2a8aca1642
23 changed files with 489 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env.development
View File

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

2
docker/nginx.conf
View File

@ -16,7 +16,7 @@ server {
# 后端跨域请求
location ~/admin/ {
proxy_pass http://172.17.0.1:7070;
proxy_pass http://172.17.0.1:1000;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

151
src/enums/bill/debtTracking.tsx Normal file
View File

@ -0,0 +1,151 @@
import { $t } from '@/plugins/i18n';
import { ElTag } from 'element-plus';
export const debtType = [
// 信用卡债务
{
value: 'CreditCardDebt',
label: $t('creditCardDebt'),
el: () => (
<ElTag type={'primary'} effect={'plain'}>
{$t('creditCardDebt')}
</ElTag>
),
},
// 贷款债务
{
value: 'LoanDebt',
label: $t('loanDebt'),
el: () => (
<ElTag type={'primary'} effect={'plain'}>
{$t('loanDebt')}
</ElTag>
),
},
// 抵押债务
{
value: 'MortgageDebt',
label: $t('mortgageDebt'),
el: () => (
<ElTag type={'primary'} effect={'plain'}>
{$t('mortgageDebt')}
</ElTag>
),
},
// 学生贷款
{
value: 'StudentLoans',
label: $t('studentLoans'),
el: () => (
<ElTag type={'primary'} effect={'plain'}>
{$t('studentLoans')}
</ElTag>
),
},
// 医疗债务
{
value: 'MedicalDebt',
label: $t('medicalDebt'),
el: () => (
<ElTag type={'primary'} effect={'plain'}>
{$t('medicalDebt')}
</ElTag>
),
},
// 透支债务
{
value: 'OverdraftDebt',
label: $t('overdraftDebt'),
el: () => (
<ElTag type={'primary'} effect={'plain'}>
{$t('overdraftDebt')}
</ElTag>
),
},
// 私人借款
{
value: 'PrivateBorrowing',
label: $t('privateBorrowing'),
el: () => (
<ElTag type={'primary'} effect={'plain'}>
{$t('privateBorrowing')}
</ElTag>
),
},
// 其他债务
{
value: 'OtherDebts',
label: $t('otherDebts'),
el: () => (
<ElTag type={'primary'} effect={'plain'}>
{$t('otherDebts')}
</ElTag>
),
},
];
export const debtTracking = [
{
value: 'InProgress',
label: $t('inProgress'),
el: () => (
<ElTag type={'primary'} effect={'plain'}>
{$t('inProgress')}
</ElTag>
),
},
{
value: 'Uncompleted',
label: $t('uncompleted'),
el: () => (
<ElTag type={'primary'} effect={'plain'}>
{$t('uncompleted')}
</ElTag>
),
},
{
value: 'Completed',
label: $t('completed'),
el: () => (
<ElTag type={'success'} effect={'plain'}>
{$t('completed')}
</ElTag>
),
},
{
value: 'NotStarted',
label: $t('notStarted'),
el: () => (
<ElTag type={'warning'} effect={'plain'}>
{$t('notStarted')}
</ElTag>
),
},
{
value: 'OverSpending',
label: $t('overSpending'),
el: () => (
<ElTag type={'danger'} effect={'plain'}>
{$t('overSpending')}
</ElTag>
),
},
{
value: 'Pause',
label: $t('pause'),
el: () => (
<ElTag type={'warning'} effect={'plain'}>
{$t('pause')}
</ElTag>
),
},
{
value: 'Cancel',
label: $t('cancel'),
el: () => (
<ElTag type={'info'} effect={'plain'}>
{$t('cancel')}
</ElTag>
),
},
];

1
src/enums/bill/savingGoal.tsx
View File

@ -1,4 +1,5 @@
import { $t } from '@/plugins/i18n';
import { ElTag } from 'element-plus';
export const savingGoal = [
{

2
src/store/financial/debtRepaymentPlan.ts
View File

@ -19,6 +19,8 @@ export const useDebtRepaymentPlanStore = defineStore('debtRepaymentPlanStore', {
datalist: [],
// 查询表单
form: {
// 用户Id
userId: undefined,
// 债务ID
debtId: undefined,
// 债务金额

5
src/utils/date.ts
View File

@ -14,3 +14,8 @@ export const getDefaultDateRange = (start = 1, end = 7) => {
return [dayjs(startDate).format('YYYY-MM-DD'), dayjs(endDate).format('YYYY-MM-DD')];
};
/** 格式化日期 */
export const dateformat = (date: any) => {
return dayjs(date).format('YYYY-MM-DD HH:mm:ss');
};

3
src/views/financial/bill/bill-dialog.vue
View File

@ -102,7 +102,8 @@ defineExpose({ formRef });
<el-date-picker
v-model="form.transactionDate"
:placeholder="$t('input') + $t('transactionDate')"
format="YYYY/MM/DD HH:mm:ss"
class="!w-[100%]"
format="YYYY-MM-DD HH:mm:ss"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
/>

1
src/views/financial/bill/index.vue
View File

@ -108,6 +108,7 @@ onMounted(() => {
v-model="billStore.form.date"
:end-placeholder="$t('endDate')"
:start-placeholder="$t('startDate')"
class="!w-[210px]"
clearable
type="daterange"
value-format="YYYY-MM-DD"

20
src/views/financial/bill/utils/columns.tsx
View File

@ -33,14 +33,26 @@ export const columns: TableColumnList = [
return <ElTag effect={'plain'}>{categoryName}</ElTag>;
},
},
// 交易日期
{ label: $t('transactionDate'), prop: 'transactionDate', width: 160 },
// 描述
{ label: $t('description'), prop: 'description' },
// 用户名
{ label: $t('username'), prop: 'username', slot: 'username', width: 130 },
// 交易日期
{
label: $t('transactionDate'),
prop: 'transactionDate',
width: 190,
sortable: true,
formatter({ transactionDate }) {
return (
<ElText type={'success'} style={{ fontWeight: 800 }}>
{transactionDate}
</ElText>
);
},
},
{ 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' },

7
src/views/financial/budget-category/index.vue
View File

@ -128,9 +128,10 @@ onMounted(() => {
v-model="budgetCategoryStore.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"
class="!w-[210px]"
time-format="YYYY-MM-DD"
type="daterange"
value-format="YYYY-MM-DD"
/>
</el-form-item>

4
src/views/financial/budget-category/utils/columns.tsx
View File

@ -8,8 +8,6 @@ export const columns: TableColumnList = [
{ type: 'index', index: (index: number) => index + 1, label: '序号', width: 60 },
// 分类名称
{ label: $t('categoryName'), prop: 'categoryName' },
// 绑定的用户id
{ label: $t('username'), prop: 'username', slot: 'username' },
// 预算名称
{ label: $t('budgetName'), prop: 'budgetName' },
// 完成状态
@ -42,6 +40,8 @@ export const columns: TableColumnList = [
},
{ 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' },

4
src/views/financial/category/utils/columns.tsx
View File

@ -6,14 +6,14 @@ import type { FormRules } from 'element-plus';
export const columns: TableColumnList = [
{ type: 'selection', align: 'left' },
{ type: 'index', index: (index: number) => index + 1, label: '序号', width: 60 },
// 绑定的用户id
{ label: $t('username'), prop: 'username', slot: 'username' },
// 分类名称
{ label: $t('categoryName'), prop: 'categoryName', slot: 'categoryName' },
// 是否内置字段
{ label: $t('isBuiltin'), prop: 'isBuiltin', slot: 'isBuiltin' },
{ 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' },

38
src/views/financial/debt-repayment-plan/debt-repayment-plan-dialog.vue
View File

@ -5,6 +5,8 @@ import { rules } from '@/views/financial/debt-repayment-plan/utils/columns';
import { FormProps } from '@/views/financial/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: () => ({
@ -23,12 +25,11 @@ const props = withDefaults(defineProps<FormProps>(), {
const formRef = ref<FormInstance>();
const form = ref(props.formInline);
// 用户是否停用样式
const { switchStyle } = usePublicHooks();
// 用户信息列表
const userDataList = ref();
// 搜索用户加载
const loading = ref(false);
const adminUserStore = useAdminUserStore();
/** 搜索 */
const onSearchUserinfo = async (keyword: string) => {
@ -42,11 +43,6 @@ defineExpose({ formRef });
<template>
<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
<!-- 债务ID -->
<el-form-item :label="$t('debtId')" prop="debtId">
<el-input v-model="form.debtId" :placeholder="$t('input') + $t('debtId')" autocomplete="off" type="text" />
</el-form-item>
<!-- 绑定的用户id -->
<el-form-item :label="$t('user')" prop="userId">
<el-select
@ -70,27 +66,37 @@ defineExpose({ formRef });
<!-- 债务金额 -->
<el-form-item :label="$t('installmentNumber')" prop="installmentNumber">
<el-input v-model="form.installmentNumber" :placeholder="$t('input') + $t('installmentNumber')" autocomplete="off" type="text" />
<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" :placeholder="$t('input') + $t('installmentAmount')" autocomplete="off" type="text" />
</el-form-item>
<!-- 还款截止日期 -->
<el-form-item :label="$t('dueDate')" prop="dueDate">
<el-input v-model="form.dueDate" :placeholder="$t('input') + $t('dueDate')" autocomplete="off" type="text" />
<el-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" :placeholder="$t('input') + $t('paidAmount')" autocomplete="off" type="text" />
<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-input v-model="form.paymentStatus" :placeholder="$t('input') + $t('paymentStatus')" autocomplete="off" type="text" />
<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>

71
src/views/financial/debt-repayment-plan/index.vue
View File

@ -13,9 +13,17 @@ 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();
/** 当前页改变时 */
@ -42,6 +50,13 @@ const resetForm = async (formEl: FormInstance | undefined) => {
await onSearch();
};
/** 搜索 */
const onSearchUserinfo = async (keyword: string) => {
loading.value = true;
userDataList.value = await adminUserStore.queryUser({ keyword });
loading.value = false;
};
onMounted(() => {
onSearch();
});
@ -50,6 +65,28 @@ onMounted(() => {
<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 />
@ -62,7 +99,15 @@ onMounted(() => {
<!-- 还款截止日期 -->
<el-form-item :label="$t('dueDate')" prop="dueDate">
<el-input v-model="debtRepaymentPlanStore.form.dueDate" :placeholder="`${$t('input')}${$t('dueDate')}`" class="!w-[180px]" clearable />
<el-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>
<!-- 已还金额 -->
@ -72,8 +117,20 @@ onMounted(() => {
<!-- 还款状态 -->
<el-form-item :label="$t('paymentStatus')" prop="paymentStatus">
<el-input v-model="debtRepaymentPlanStore.form.paymentStatus" :placeholder="`${$t('input')}${$t('paymentStatus')}`" class="!w-[180px]" clearable />
<el-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') }}
@ -113,6 +170,16 @@ onMounted(() => {
@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 }}

62
src/views/financial/debt-repayment-plan/utils/columns.ts → src/views/financial/debt-repayment-plan/utils/columns.tsx
View File

@ -1,25 +1,67 @@
import { reactive } from 'vue';
import { $t } from '@/plugins/i18n';
import type { FormRules } from 'element-plus';
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('username'), prop: 'username' },
// 债务金额
{ label: $t('installmentNumber'), prop: 'installmentNumber' },
{
label: $t('installmentNumber'),
prop: 'installmentNumber',
formatter({ installmentNumber }) {
return (
<ElText style={{ fontWeight: 800 }} type={'info'} size={'large'}>
{installmentNumber}￥
</ElText>
);
},
},
// 每期应还金额
{ label: $t('installmentAmount'), prop: 'installmentAmount' },
// 还款截止日期
{ label: $t('dueDate'), prop: 'dueDate' },
{
label: $t('installmentAmount'),
prop: 'installmentAmount',
formatter({ installmentAmount }) {
return (
<ElText style={{ fontWeight: 800 }} type={'info'} size={'large'}>
{installmentAmount}￥
</ElText>
);
},
},
// 已还金额
{ label: $t('paidAmount'), prop: 'paidAmount' },
{
label: $t('paidAmount'),
prop: 'paidAmount',
formatter({ paidAmount }) {
return (
<ElText style={{ fontWeight: 800 }} type={'info'} size={'large'}>
{paidAmount}￥
</ElText>
);
},
},
// 还款状态
{ label: $t('paymentStatus'), prop: 'paymentStatus' },
{ 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' },
@ -27,6 +69,8 @@ export const columns: TableColumnList = [
// 添加规则
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' }],
// 每期应还金额

2
src/views/financial/debt-repayment-plan/utils/hooks.ts
View File

@ -22,7 +22,7 @@ export async function onSearch() {
/** 添加债务还款计划表 */
export function onAdd() {
addDialog({
title: `${$t('addNew')}${$t('debt-repayment-plan')}`,
title: `${$t('addNew')}${$t('debtRepaymentPlan')}`,
width: '30%',
props: {
formInline: {

2
src/views/financial/debt-repayment-plan/utils/types.ts
View File

@ -1,7 +1,7 @@
// 添加或者修改表单元素
export interface FormItemProps {
// 绑定的用户id
userId: number;
userId: string;
// 债务金额
installmentNumber: any;
// 每期应还金额

61
src/views/financial/debt-tracking/debt-tracking-dialog.vue
View File

@ -1,9 +1,12 @@
<script lang="ts" setup>
import { ref } from 'vue';
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 { $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: () => ({
@ -24,6 +27,22 @@ const props = withDefaults(defineProps<FormProps>(), {
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>
@ -31,8 +50,24 @@ defineExpose({ formRef });
<template>
<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
<!-- 绑定的用户 -->
<el-form-item :label="$t('userId')" prop="userId">
<el-input v-model="form.userId" :placeholder="$t('input') + $t('userId')" autocomplete="off" type="text" />
<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>
<!-- 债务人姓名 -->
@ -42,22 +77,34 @@ defineExpose({ formRef });
<!-- 债务金额 -->
<el-form-item :label="$t('debtAmount')" prop="debtAmount">
<el-input v-model="form.debtAmount" :placeholder="$t('input') + $t('debtAmount')" autocomplete="off" type="text" />
<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-input v-model="form.debtType" :placeholder="$t('input') + $t('debtType')" autocomplete="off" type="text" />
<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-input v-model="form.debtStatus" :placeholder="$t('input') + $t('debtStatus')" autocomplete="off" type="text" />
<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-input v-model="form.dueDate" :placeholder="$t('input') + $t('dueDate')" autocomplete="off" type="text" />
<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>

70
src/views/financial/debt-tracking/index.vue
View File

@ -13,9 +13,17 @@ 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();
/** 当前页改变时 */
@ -42,6 +50,13 @@ const resetForm = async (formEl: FormInstance | undefined) => {
await onSearch();
};
/** 搜索 */
const onSearchUserinfo = async (keyword: string) => {
loading.value = true;
userDataList.value = await adminUserStore.queryUser({ keyword });
loading.value = false;
};
onMounted(() => {
onSearch();
});
@ -51,8 +66,25 @@ onMounted(() => {
<div class="main">
<el-form ref="formRef" :inline="true" :model="debtTrackingStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
<!-- 绑定的用户 -->
<el-form-item :label="$t('userId')" prop="userId">
<el-input v-model="debtTrackingStore.form.userId" :placeholder="`${$t('input')}${$t('userId')}`" class="!w-[180px]" clearable />
<el-form-item :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>
<!-- 债务人姓名 -->
@ -67,18 +99,32 @@ onMounted(() => {
<!-- 债务类型 -->
<el-form-item :label="$t('debtType')" prop="debtType">
<el-input v-model="debtTrackingStore.form.debtType" :placeholder="`${$t('input')}${$t('debtType')}`" class="!w-[180px]" clearable />
<el-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-input v-model="debtTrackingStore.form.debtStatus" :placeholder="`${$t('input')}${$t('debtStatus')}`" class="!w-[180px]" clearable />
<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-input v-model="debtTrackingStore.form.dueDate" :placeholder="`${$t('input')}${$t('dueDate')}`" class="!w-[180px]" clearable />
<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>
@ -116,12 +162,26 @@ onMounted(() => {
@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 }}

37
src/views/financial/debt-tracking/utils/columns.ts → src/views/financial/debt-tracking/utils/columns.tsx
View File

@ -1,25 +1,48 @@
import { reactive } from 'vue';
import { $t } from '@/plugins/i18n';
import type { FormRules } from 'element-plus';
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('userId'), prop: 'userId' },
// 债务人姓名
{ label: $t('debtorName'), prop: 'debtorName' },
// 债务金额
{ label: $t('debtAmount'), prop: 'debtAmount' },
{
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' },
{ label: $t('debtType'), prop: 'debtType', slot: 'debtType', width: 130 },
// 债务状态
{ label: $t('debtStatus'), prop: 'debtStatus' },
{ label: $t('debtStatus'), prop: 'debtStatus', slot: 'debtStatus', width: 130 },
// 还款截止日期
{ label: $t('dueDate'), prop: 'dueDate' },
{
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' },

2
src/views/financial/debt-tracking/utils/hooks.ts
View File

@ -55,7 +55,7 @@ export function onAdd() {
/** 更新债务追踪 */
export function onUpdate(row: any) {
addDialog({
title: `${$t('modify')}${$t('debt-tracking')}`,
title: `${$t('modify')}${$t('debtTracking')}`,
width: '30%',
props: {
formInline: {

6
src/views/financial/saving-goal/index.vue
View File

@ -114,10 +114,10 @@ onMounted(() => {
v-model="savingGoalStore.form.duration"
:end-placeholder="$t('endTime')"
:start-placeholder="$t('startTime')"
class="!w-[180px]"
time-format="YYYY-MM-DD HH:mm:ss"
class="!w-[210px]"
time-format="YYYY-MM-DD"
type="datetimerange"
value-format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD"
/>
</el-form-item>

2
src/views/financial/saving-goal/saving-goal-dialog.vue
View File

@ -82,7 +82,7 @@ defineExpose({ formRef });
<!-- 目标金额 -->
<el-form-item :label="$t('amount')" prop="amount">
<el-input v-model="form.amount" :placeholder="$t('input') + $t('amount')" :step="0.01" autocomplete="off" type="number" />
<el-input v-model="form.amount" :min="0.01" :placeholder="$t('input') + $t('amount')" :step="0.01" autocomplete="off" type="number" />
</el-form-item>
<!-- 目标时长 -->