105 lines
3.3 KiB
Vue
105 lines
3.3 KiB
Vue
<script lang="ts" setup>
|
||
import { ref } from 'vue';
|
||
import { FormInstance } from 'element-plus';
|
||
import { rules } from '@/views/financial-user/debt/debt-repayment-plan/utils/columns';
|
||
import { FormProps } from '@/views/financial-user/debt/debt-repayment-plan/utils/types';
|
||
import { $t } from '@/plugins/i18n';
|
||
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,
|
||
// 需要继续添加的金额
|
||
addAmount: 0,
|
||
// 还款状态
|
||
paymentStatus: undefined,
|
||
}),
|
||
});
|
||
|
||
const formRef = ref<FormInstance>();
|
||
const form = ref(props.formInline);
|
||
// 用户信息列表
|
||
const userDataList = ref();
|
||
// 搜索用户加载
|
||
const loading = ref(false);
|
||
const adminUserStore = useAdminUserStore();
|
||
|
||
/** 已还金额自定义验证*/
|
||
const paidAmountValidator = (rule, value, callback) => {
|
||
const paidAmount = Number(form.value.paidAmount);
|
||
const addAmount = Number(form.value.addAmount);
|
||
|
||
// 输入的金额大于债务金额
|
||
if (paidAmount + addAmount > form.value.installmentNumber) {
|
||
callback(new Error(`不能大于债务金额`));
|
||
}
|
||
callback();
|
||
};
|
||
|
||
defineExpose({ formRef });
|
||
</script>
|
||
|
||
<template>
|
||
<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
|
||
<!-- 债务金额 -->
|
||
<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')"
|
||
:rules="[
|
||
{ required: true, message: `${$t('input')}${$t('paidAmount')}`, trigger: 'blur' },
|
||
{ validator: paidAmountValidator, trigger: 'blur' },
|
||
]"
|
||
prop="paidAmount"
|
||
>
|
||
<el-input
|
||
v-model="form.paidAmount"
|
||
:min="0.01"
|
||
:placeholder="$t('input') + $t('paidAmount')"
|
||
:step="0.01"
|
||
autocomplete="off"
|
||
class="w-[120px]"
|
||
type="number"
|
||
/>
|
||
➕️
|
||
<el-input v-model="form.addAmount" :min="0" :placeholder="$t('input')" :step="0.01" autocomplete="off" class="w-[120px]" 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>
|