<template>
|
<el-form :model="form" label-width="100px" :rules="formRules" ref="formRef">
|
<el-form-item label="收入日期" prop="incomeDate">
|
<el-date-picker
|
style="width: 100%"
|
v-model="form.incomeDate"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
type="date"
|
placeholder="请选择日期"
|
clearable
|
/>
|
</el-form-item>
|
<el-form-item label="收入类型" prop="incomeType">
|
<el-select
|
v-model="form.incomeType"
|
placeholder="请选择"
|
clearable
|
>
|
<el-option :label="item.label" :value="item.value" v-for="(item,index) in income_types" :key="index" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="客户名称" prop="customerName">
|
<el-input v-model="form.customerName" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item label="收入金额" prop="incomeMoney">
|
<el-input-number :step="0.01" :min="0" style="width: 100%"
|
v-model="form.incomeMoney"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
<el-form-item label="收入描述" prop="incomeDescribed">
|
<el-input v-model="form.incomeDescribed" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item label="收款方式" prop="incomeMethod">
|
<el-select
|
v-model="form.incomeMethod"
|
placeholder="请选择"
|
clearable
|
>
|
<el-option :label="item.label" :value="item.value" v-for="(item,index) in payment_methods" :key="index" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="发票号码" prop="invoiceNumber">
|
<el-input v-model="form.invoiceNumber" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item label="备注" prop="note">
|
<el-input
|
v-model="form.note"
|
placeholder="备注"
|
/>
|
</el-form-item>
|
|
</el-form>
|
</template>
|
|
<script setup>
|
import useFormData from "@/hooks/useFormData";
|
import { getAccountIncome } from "@/api/financialManagement/revenueManagement";
|
import {ref} from "vue";
|
const { proxy } = getCurrentInstance();
|
|
|
defineOptions({
|
name: "新增收入",
|
});
|
const { income_types } = proxy.useDict("income_types");
|
const { payment_methods } = proxy.useDict("payment_methods");
|
const formRef = ref(null);
|
const formRules = {
|
customerName: [{ required: true, trigger: "blur", message: "请输入" }],
|
incomeMoney: [{ required: true, trigger: "blur", message: "请输入" }],
|
incomeDescribed: [{ required: true, trigger: "blur", message: "请输入" }],
|
incomeDate: [{ required: true, trigger: "change", message: "请选择" }],
|
incomeType: [{ required: true, trigger: "change", message: "请选择" }],
|
incomeMethod: [{ required: true, trigger: "change", message: "请选择" }],
|
}
|
|
const { form, resetForm } = useFormData({
|
incomeDate: undefined, // 收入日期
|
incomeType: undefined, // 收入类型
|
customerName: undefined, // 客户名称
|
incomeMoney: undefined, // 收入金额
|
incomeDescribed: undefined, // 收入描述
|
incomeMethod: undefined, // 收款方式
|
invoiceNumber: undefined, // 发票号码
|
note: undefined, // 备注
|
});
|
|
const loadForm = async (id) => {
|
const { code, data } = await getAccountIncome(id);
|
if (code == 200) {
|
form.incomeDate = data.incomeDate;
|
form.incomeType = data.incomeType;
|
form.customerName = data.customerName;
|
form.incomeMoney = data.incomeMoney;
|
form.incomeDescribed = data.incomeDescribed;
|
form.incomeMethod = data.incomeMethod;
|
form.invoiceNumber = data.invoiceNumber;
|
form.note = data.note;
|
}
|
};
|
|
// 清除表单校验状态
|
const clearValidate = () => {
|
formRef.value?.clearValidate();
|
};
|
|
// 重置表单数据和校验状态
|
const resetFormAndValidate = () => {
|
resetForm();
|
clearValidate();
|
};
|
|
defineExpose({
|
form,
|
loadForm,
|
resetForm,
|
clearValidate,
|
resetFormAndValidate,
|
formRef,
|
});
|
</script>
|
