<template>
|
<FormDialog
|
v-model="dialogVisible"
|
:title="dialogTitle"
|
:operationType="operationType"
|
width="30%"
|
@confirm="sendForm"
|
@close="close"
|
@cancel="close"
|
>
|
<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>
|
</FormDialog>
|
</template>
|
|
<script setup>
|
import { add, update, getAccountIncome } from "@/api/financialManagement/revenueManagement";
|
import { ElMessage } from "element-plus";
|
import useFormData from "@/hooks/useFormData";
|
import FormDialog from "@/components/Dialog/FormDialog.vue";
|
import { ref } from "vue";
|
|
const { proxy } = getCurrentInstance()
|
|
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 "编辑收入";
|
return "新增收入";
|
};
|
|
const { income_types } = proxy.useDict("income_types");
|
const { payment_methods } = proxy.useDict("payment_methods");
|
|
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 sendForm = () => {
|
if (submitting.value) return;
|
formRef.value?.validate(async (valid) => {
|
if (valid) {
|
submitting.value = true;
|
try {
|
const { code } = id.value
|
? await update({ id: id.value, ...form })
|
: await add(form);
|
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 (rowId) => {
|
operationType.value = "edit";
|
id.value = rowId;
|
dialogVisible.value = true;
|
if (rowId) {
|
const { code, data } = await getAccountIncome(rowId);
|
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;
|
}
|
} else {
|
resetForm();
|
formRef.value?.clearValidate();
|
}
|
};
|
|
const openModal = () => {
|
operationType.value = "add";
|
id.value = undefined;
|
resetForm();
|
formRef.value?.clearValidate();
|
dialogVisible.value = true;
|
};
|
|
defineExpose({
|
openModal,
|
loadForm,
|
});
|
</script>
|
