<template>
|
<el-form :model="form" label-width="100px" :rules="formRules" ref="formRef">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="设备名称" prop="deviceName">
|
<el-input v-model="form.deviceName" placeholder="请输入设备名称" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="规格型号" prop="deviceModel">
|
<el-input v-model="form.deviceModel" :disabled="(form.deviceModel != null && operationType === 'edit')" placeholder="请输入规格型号" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="设备品牌" prop="deviceBrand">
|
<el-input v-model="form.deviceBrand" placeholder="请输入设备品牌" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="供应商" prop="supplierName">
|
<el-input v-model="form.supplierName" placeholder="请输入供应商" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="存放位置" prop="storageLocation">
|
<el-input v-model="form.storageLocation" placeholder="请输入存放位置" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="单位" prop="unit">
|
<el-input v-model="form.unit" placeholder="请输入单位" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="启用折旧" prop="enableDepreciation">
|
<el-switch v-model="form.enableDepreciation" :active-value="true" :inactive-value="false" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="数量" prop="number">
|
<el-input-number :step="0.01" :min="0" style="width: 100%"
|
v-model="form.number"
|
placeholder="请输入数量"
|
@change="mathNum"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="含税单价" prop="taxIncludingPriceUnit">
|
<el-input-number :step="0.01" :min="0" style="width: 100%"
|
v-model="form.taxIncludingPriceUnit"
|
placeholder="请输入含税单价"
|
maxlength="10"
|
@change="mathNum"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="含税总价" prop="taxIncludingPriceTotal">
|
<el-input
|
v-model="form.taxIncludingPriceTotal"
|
placeholder="自动生成"
|
type="number"
|
disabled
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="税率(%)" prop="taxRate">
|
<!-- <el-input
|
v-model="form.taxRate"
|
placeholder="请输入税率"
|
type="number"
|
>
|
<template #append> % </template>
|
</el-input> -->
|
<el-select
|
v-model="form.taxRate"
|
placeholder="请选择"
|
clearable
|
@change="mathNum"
|
>
|
<el-option label="1" :value="1" />
|
<el-option label="6" :value="6" />
|
<el-option label="13" :value="13" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="不含税总价" prop="unTaxIncludingPriceTotal">
|
<el-input
|
v-model="form.unTaxIncludingPriceTotal"
|
placeholder="自动生成"
|
type="number"
|
disabled
|
/>
|
</el-form-item>
|
</el-col>
|
<!-- <el-col :span="12">
|
<el-form-item label="录入人" prop="createUser">
|
<el-input v-model="form.createUser" placeholder="请输入录入人" />
|
</el-form-item>
|
</el-col> -->
|
<el-col :span="12">
|
<el-form-item label="录入日期" prop="createTime">
|
<el-date-picker
|
style="width: 100%"
|
v-model="form.createTime"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
type="date"
|
placeholder="请选择录入日期"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</template>
|
|
<script setup>
|
import useFormData from "@/hooks/useFormData";
|
// import useUserStore from "@/store/modules/user";
|
import { getLedgerById } from "@/api/equipmentManagement/ledger";
|
import dayjs from "dayjs";
|
import {
|
calculateTaxIncludeTotalPrice,
|
calculateTaxExclusiveTotalPrice,
|
} from "@/utils/summarizeTable";
|
import { ElMessage } from "element-plus";
|
import {ref} from "vue";
|
|
defineOptions({
|
name: "设备台账表单",
|
});
|
const formRef = ref(null);
|
const operationType = ref('');
|
const formRules = {
|
deviceName: [{ required: true, trigger: "blur", message: "请输入" }],
|
deviceModel: [{ required: true, trigger: "blur", message: "请输入" }],
|
supplierName: [{ required: true, trigger: "blur", message: "请输入" }],
|
unit: [{ required: true, trigger: "blur", message: "请输入" }],
|
number: [{ required: true, trigger: "blur", message: "请输入" }],
|
taxIncludingPriceUnit: [{ required: true, trigger: "blur", message: "请输入" }],
|
taxRate: [{ required: true, trigger: "change", message: "请输入" }],
|
}
|
|
const { form, resetForm } = useFormData({
|
deviceName: undefined, // 设备名称
|
deviceModel: undefined, // 规格型号
|
deviceBrand: undefined, // 设备品牌
|
supplierName: undefined, // 供应商
|
storageLocation: undefined, // 存放位置
|
enableDepreciation: false, // 是否启用折旧
|
unit: undefined, // 单位
|
number: undefined, // 数量
|
taxIncludingPriceUnit: undefined, // 含税单价
|
taxIncludingPriceTotal: undefined, // 含税总价
|
taxRate: undefined, // 税率
|
unTaxIncludingPriceTotal: undefined, // 不含税总价
|
// createUser: useUserStore().nickName, // 录入人
|
createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"), // 录入日期
|
});
|
|
const loadForm = async (id) => {
|
if (id) {
|
operationType.value = 'edit'
|
}
|
const { code, data } = await getLedgerById(id);
|
if (code == 200) {
|
form.deviceName = data.deviceName;
|
form.deviceModel = data.deviceModel;
|
form.deviceBrand = data.deviceBrand;
|
form.supplierName = data.supplierName;
|
form.storageLocation = data.storageLocation;
|
form.enableDepreciation = data.enableDepreciation;
|
form.unit = data.unit;
|
form.number = data.number;
|
form.taxIncludingPriceUnit = data.taxIncludingPriceUnit;
|
form.taxIncludingPriceTotal = data.taxIncludingPriceTotal;
|
form.taxRate = data.taxRate;
|
form.unTaxIncludingPriceTotal = data.unTaxIncludingPriceTotal;
|
form.createTime = data.createTime;
|
}
|
};
|
|
const mathNum = () => {
|
if (!form.taxIncludingPriceUnit) {
|
ElMessage.error("请输入单价");
|
return;
|
}
|
if (!form.number) {
|
ElMessage.error("请输入数量");
|
return;
|
}
|
form.taxIncludingPriceTotal = calculateTaxIncludeTotalPrice(
|
form.taxIncludingPriceUnit,
|
form.number
|
);
|
if (form.taxRate) {
|
form.unTaxIncludingPriceTotal = calculateTaxExclusiveTotalPrice(
|
form.taxIncludingPriceTotal,
|
form.taxRate
|
);
|
}
|
};
|
|
// 清除表单校验状态
|
const clearValidate = () => {
|
formRef.value?.clearValidate();
|
};
|
|
// 重置表单数据和校验状态
|
const resetFormAndValidate = () => {
|
resetForm();
|
clearValidate();
|
};
|
|
defineExpose({
|
form,
|
loadForm,
|
resetForm,
|
clearValidate,
|
resetFormAndValidate,
|
formRef,
|
});
|
</script>
|
