<template>
|
<FormDialog
|
v-model="dialogVisible"
|
:title="dialogTitle"
|
:operationType="operationType"
|
width="60%"
|
@confirm="sendForm"
|
@close="close"
|
@cancel="close"
|
>
|
<el-form
|
ref="formRef"
|
:model="form"
|
:rules="formRules"
|
label-width="120px"
|
>
|
<el-form-item label="借款人姓名" prop="borrowerName">
|
<el-input v-model="form.borrowerName" placeholder="请输入借款人姓名" />
|
</el-form-item>
|
<el-form-item label="借款金额（元）" prop="borrowAmount">
|
<el-input-number
|
:step="0.01"
|
:min="0"
|
:precision="2"
|
style="width: 100%"
|
v-model="form.borrowAmount"
|
placeholder="请输入借款金额"
|
/>
|
</el-form-item>
|
<el-form-item label="借款利率（%）" prop="interestRate">
|
<el-input-number
|
:step="0.01"
|
:min="0"
|
:precision="2"
|
style="width: 100%"
|
v-model="form.interestRate"
|
placeholder="请输入借款利率，如：5.85"
|
/>
|
</el-form-item>
|
<el-form-item label="借款日期" prop="borrowDate">
|
<el-date-picker
|
style="width: 100%"
|
v-model="form.borrowDate"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
type="date"
|
placeholder="请选择借款日期"
|
clearable
|
/>
|
</el-form-item>
|
<!-- 实际还款日期：仅“还款”时可填 -->
|
<el-form-item
|
v-if="operationType === 'repay'"
|
label="实际还款日期"
|
prop="repayDate"
|
>
|
<el-date-picker
|
style="width: 100%"
|
v-model="form.repayDate"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
type="date"
|
placeholder="请选择实际还款日期（还款后填写）"
|
clearable
|
/>
|
</el-form-item>
|
<el-form-item label="备注" prop="remark">
|
<el-input
|
v-model="form.remark"
|
type="textarea"
|
:rows="3"
|
placeholder="请输入备注（借款说明）"
|
/>
|
</el-form-item>
|
</el-form>
|
</FormDialog>
|
</template>
|
|
<script setup>
|
import { add, update } from "@/api/financialManagement/loanManagement";
|
import useFormData from "@/hooks/useFormData";
|
import FormDialog from "@/components/Dialog/FormDialog.vue";
|
import { ElMessage } from "element-plus";
|
import { ref } from "vue";
|
|
defineOptions({
|
name: "借款新增编辑",
|
});
|
|
const emits = defineEmits(["success"]);
|
|
const formRef = ref(null);
|
const dialogVisible = ref(false);
|
const operationType = ref("add"); // add | edit
|
const id = ref(undefined);
|
const submitting = ref(false);
|
|
const dialogTitle = (type) => {
|
if (type === "edit") return "编辑借款";
|
if (type === "repay") return "还款";
|
return "新增借款";
|
};
|
|
const formRules = {
|
borrowerName: [{ required: true, trigger: "blur", message: "请输入借款人姓名" }],
|
borrowAmount: [{ required: true, trigger: "blur", message: "请输入借款金额" }],
|
interestRate: [{ required: true, trigger: "blur", message: "请输入借款利率" }],
|
borrowDate: [{ required: true, trigger: "change", message: "请选择借款日期" }],
|
repayDate: [
|
{
|
validator: (_rule, value, callback) => {
|
if (operationType.value === "repay" && !value) {
|
callback(new Error("请选择实际还款日期"));
|
return;
|
}
|
callback();
|
},
|
trigger: "change",
|
},
|
],
|
};
|
|
const { form, resetForm } = useFormData({
|
borrowerName: undefined, // 借款人姓名
|
borrowAmount: undefined, // 借款金额（元）
|
interestRate: undefined, // 借款利率（如：5.85 代表5.85%）
|
borrowDate: undefined, // 借款日期
|
repayDate: undefined, // 实际还款日期（还款后填充）
|
remark: undefined, // 备注（借款说明）
|
});
|
|
const sendForm = () => {
|
if (submitting.value) return;
|
formRef.value?.validate(async (valid) => {
|
if (valid) {
|
submitting.value = true;
|
try {
|
const isRepay = operationType.value === "repay";
|
// 还款：不展示 status，但提交时强制传 status=2，走更新接口
|
const payload = isRepay
|
? { id: id.value, ...form, status: 2 }
|
: id.value
|
? { id: id.value, ...form }
|
: form;
|
|
const { code } = isRepay
|
? await update(payload)
|
: id.value
|
? await update(payload)
|
: await add(payload);
|
if (code == 200) {
|
emits("success");
|
ElMessage({ message: "操作成功", type: "success" });
|
close();
|
}
|
} finally {
|
submitting.value = false;
|
}
|
}
|
});
|
};
|
|
const close = () => {
|
resetForm();
|
formRef.value?.clearValidate();
|
id.value = undefined;
|
dialogVisible.value = false;
|
};
|
|
// 编辑：直接用列表行数据回填（避免依赖详情接口）
|
const loadForm = async (row) => {
|
const rowId = row?.id;
|
operationType.value = "edit";
|
id.value = rowId;
|
dialogVisible.value = true;
|
if (rowId) {
|
form.borrowerName = row.borrowerName;
|
form.borrowAmount = row.borrowAmount;
|
form.interestRate = row.interestRate;
|
form.borrowDate = row.borrowDate;
|
form.repayDate = row.repayDate;
|
form.remark = row.remark;
|
} else {
|
resetForm();
|
formRef.value?.clearValidate();
|
}
|
};
|
|
// 还款：打开弹窗，仅填写实际还款日期，提交时强制 status=2
|
const repay = async (row) => {
|
const rowId = row?.id;
|
operationType.value = "repay";
|
id.value = rowId;
|
dialogVisible.value = true;
|
if (rowId) {
|
// 为了走 update 接口更稳妥，带上原有数据；只让用户选 repayDate
|
form.borrowerName = row.borrowerName;
|
form.borrowAmount = row.borrowAmount;
|
form.interestRate = row.interestRate;
|
form.borrowDate = row.borrowDate;
|
form.remark = row.remark;
|
form.repayDate = undefined;
|
} else {
|
resetForm();
|
formRef.value?.clearValidate();
|
}
|
};
|
|
const openModal = () => {
|
operationType.value = "add";
|
id.value = undefined;
|
resetForm();
|
formRef.value?.clearValidate();
|
dialogVisible.value = true;
|
};
|
|
defineExpose({
|
openModal,
|
loadForm,
|
repay,
|
});
|
</script>
|
