<template>
|
<FormDialog
|
v-model="dialogVisible"
|
:title="dialogTitle"
|
:operationType="operationType"
|
width="50%"
|
@confirm="sendForm"
|
@close="close"
|
@cancel="close"
|
>
|
<el-form :model="form" label-width="100px" :rules="formRules" ref="formRef">
|
<el-form-item label="支出日期" prop="expenseDate">
|
<el-date-picker
|
style="width: 100%"
|
v-model="form.expenseDate"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
type="date"
|
placeholder="请选择日期"
|
clearable
|
/>
|
</el-form-item>
|
<el-form-item label="支出类型" prop="expenseType">
|
<el-select
|
v-model="form.expenseType"
|
placeholder="请选择"
|
clearable
|
>
|
<el-option :label="item.label" :value="item.value" v-for="(item,index) in expense_types" :key="index" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="供应商名称" prop="supplierName">
|
<el-input v-model="form.supplierName" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item label="支出金额" prop="expenseMoney">
|
<el-input-number :step="0.01" :min="0" style="width: 100%"
|
v-model="form.expenseMoney"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
<el-form-item label="支出描述" prop="expenseDescribed">
|
<el-input v-model="form.expenseDescribed" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item label="付款方式" prop="expenseMethod">
|
<el-select
|
v-model="form.expenseMethod"
|
placeholder="请选择"
|
clearable
|
>
|
<el-option :label="item.label" :value="item.value" v-for="(item,index) in checkout_payment" :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, getAccountExpense } from "@/api/financialManagement/expenseManagement";
|
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 { expense_types } = proxy.useDict("expense_types");
|
const { checkout_payment } = proxy.useDict("checkout_payment");
|
|
const formRules = {
|
supplierName: [{ required: true, trigger: "blur", message: "请输入" }],
|
expenseMoney: [{ required: true, trigger: "blur", message: "请输入" }],
|
expenseDescribed: [{ required: true, trigger: "blur", message: "请输入" }],
|
expenseDate: [{ required: true, trigger: "change", message: "请选择" }],
|
expenseType: [{ required: true, trigger: "change", message: "请选择" }],
|
expenseMethod: [{ required: true, trigger: "change", message: "请选择" }],
|
}
|
|
const { form, resetForm } = useFormData({
|
expenseDate: undefined, // 支出日期
|
expenseType: undefined, // 支出类型
|
supplierName: undefined, // 供应商名称
|
expenseMoney: undefined, // 支出金额
|
expenseDescribed: undefined, // 支出描述
|
expenseMethod: 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 getAccountExpense(rowId);
|
if (code == 200) {
|
form.expenseDate = data.expenseDate;
|
form.expenseType = data.expenseType;
|
form.supplierName = data.supplierName;
|
form.expenseMoney = data.expenseMoney;
|
form.expenseDescribed = data.expenseDescribed;
|
form.expenseMethod = data.expenseMethod;
|
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>
|
