<template>
|
<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>
|
</template>
|
|
<script setup>
|
import useFormData from "@/hooks/useFormData";
|
import { getAccountExpense } from "@/api/financialManagement/expenseManagement";
|
import {ref} from "vue";
|
const { proxy } = getCurrentInstance();
|
|
|
defineOptions({
|
name: "新增支出",
|
});
|
const { expense_types } = proxy.useDict("expense_types");
|
const { checkout_payment } = proxy.useDict("checkout_payment");
|
const formRef = ref(null);
|
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 loadForm = async (id) => {
|
const { code, data } = await getAccountExpense(id);
|
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;
|
}
|
};
|
|
// 清除表单校验状态
|
const clearValidate = () => {
|
formRef.value?.clearValidate();
|
};
|
|
// 重置表单数据和校验状态
|
const resetFormAndValidate = () => {
|
resetForm();
|
clearValidate();
|
};
|
|
defineExpose({
|
form,
|
loadForm,
|
resetForm,
|
clearValidate,
|
resetFormAndValidate,
|
formRef,
|
});
|
</script>
|
