<template>
|
<el-form :model="form" label-width="120px" :rules="formRules" ref="formRef">
|
<el-divider content-position="left">基础信息</el-divider>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="设备编号" prop="uniqueCode">
|
<div style="display: flex; gap: 10px; width: 100%;">
|
<el-checkbox
|
v-model="form.autoGenerateUniqueCode"
|
v-if="operationType === 'add'"
|
>自动生成
|
</el-checkbox>
|
<el-input
|
v-model="form.uniqueCode"
|
:placeholder="form.autoGenerateUniqueCode ? '保存后自动生成' : '请输入设备编号'"
|
:disabled="form.autoGenerateUniqueCode || operationType === 'view'"
|
clearable
|
/>
|
</div>
|
</el-form-item>
|
</el-col>
|
<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" 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="type">
|
<el-select
|
v-model="form.type"
|
placeholder="请选择或输入设备类型"
|
clearable
|
filterable
|
allow-create
|
default-first-option
|
style="width: 100%"
|
@change="handleDeviceTypeChange"
|
>
|
<el-option
|
v-for="item in deviceTypeOptions"
|
:key="item"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="出厂编号" prop="factoryNumber">
|
<el-input v-model="form.factoryNumber" 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="responsiblePerson">
|
<el-input v-model="form.responsiblePerson" placeholder="请输入责任人" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="建档日期" prop="filingDate">
|
<el-date-picker
|
style="width: 100%"
|
v-model="form.filingDate"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
type="date"
|
placeholder="请选择建档日期"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-divider content-position="left">采购信息</el-divider>
|
<el-row :gutter="20">
|
<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="manufacturer">
|
<el-input v-model="form.manufacturer" placeholder="请输入制造厂商" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="购置日期" prop="purchaseDate">
|
<el-date-picker
|
style="width: 100%"
|
v-model="form.purchaseDate"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
type="date"
|
placeholder="请选择购置日期"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="资产原值" prop="originalAssetValue">
|
<el-input-number :step="0.01" :min="0" style="width: 100%"
|
v-model="form.originalAssetValue"
|
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="number">
|
<el-input-number :min="1" style="width: 100%"
|
v-model="form.number"
|
disabled
|
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-select
|
v-model="form.taxRate"
|
placeholder="请选择"
|
clearable
|
@change="mathNum"
|
>
|
<el-option
|
v-for="dict in tax_rate"
|
:key="dict.value"
|
:label="dict.label"
|
:value="Number(dict.value)"
|
/>
|
</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-row>
|
|
<el-divider content-position="left">技术参数</el-divider>
|
<el-row :gutter="20">
|
<el-col :span="24">
|
<el-form-item label="主要技术参数" prop="technicalParameters">
|
<el-input type="textarea" :rows="3" v-model="form.technicalParameters" placeholder="请输入主要技术参数" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="主要用途" prop="mainPurpose">
|
<el-input type="textarea" :rows="3" v-model="form.mainPurpose" placeholder="请输入主要用途" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-divider content-position="left">运行管理</el-divider>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="设备状态" prop="status">
|
<el-select
|
v-model="form.status"
|
placeholder="请选择"
|
:disabled="operationType === 'edit'"
|
style="width: 100%"
|
>
|
<el-option label="停用" :value="0" />
|
<el-option label="启用" :value="1" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="启用日期" prop="activationDate">
|
<el-date-picker
|
style="width: 100%"
|
v-model="form.activationDate"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
type="date"
|
placeholder="请选择启用日期"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="预计运行时间" prop="planRuntimeTime">
|
<el-date-picker
|
style="width: 100%"
|
v-model="form.planRuntimeTime"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
type="date"
|
placeholder="请选择预计运行时间"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="启用折旧" prop="isDepr">
|
<el-switch v-model="form.isDepr" :active-value="1" :inactive-value="2" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12" v-if="form.isDepr === 1">
|
<el-form-item label="每年折旧金额" prop="annualDepreciationAmount">
|
<el-input-number
|
:step="0.01"
|
:min="0"
|
style="width: 100%"
|
v-model="form.annualDepreciationAmount"
|
placeholder="请输入每年折旧金额"
|
/>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="24">
|
<el-form-item label="设备图片" prop="storageBlobDTOs">
|
<AttachmentUploadImage
|
v-model:fileList="fileList"
|
:limit="20"
|
:fileSize="5"
|
:buttonText="'上传图片'"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</template>
|
|
<script setup>
|
import useFormData from "@/hooks/useFormData";
|
import { getLedgerById } from "@/api/equipmentManagement/ledger";
|
import dayjs from "dayjs";
|
import {
|
calculateTaxIncludeTotalPrice,
|
calculateTaxExclusiveTotalPrice,
|
} from "@/utils/summarizeTable";
|
import { ElMessage } from "element-plus";
|
import { ref, getCurrentInstance, computed } from "vue";
|
import AttachmentUploadImage from '@/components/AttachmentUpload/image/index.vue';
|
|
const { proxy } = getCurrentInstance();
|
const { tax_rate } = proxy.useDict("tax_rate");
|
|
defineOptions({
|
name: "设备台账表单",
|
});
|
const formRef = ref(null);
|
const operationType = ref('add');
|
// 设备类型固定选项
|
const deviceTypeOptions = ref([
|
'生产设备',
|
'办公设备',
|
'检测设备',
|
'运输设备',
|
'其他设备'
|
]);
|
const formRules = {
|
uniqueCode: [
|
{
|
validator: (rule, value, callback) => {
|
if (!form.autoGenerateUniqueCode && (value === undefined || value === null || value === '')) {
|
callback(new Error('请输入设备编号'));
|
} else {
|
callback();
|
}
|
},
|
trigger: "blur"
|
}
|
],
|
deviceName: [{ required: true, trigger: "blur", message: "请输入" }],
|
deviceModel: [{ required: true, trigger: "blur", message: "请输入" }],
|
type: [{ required: true, trigger: "change", 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: "请输入" }],
|
planRuntimeTime: [{ required: true, trigger: "change", message: "请选择" }],
|
status: [{ required: true, trigger: "change", message: "请选择" }],
|
annualDepreciationAmount: [
|
{
|
validator: (rule, value, callback) => {
|
if (form.isDepr === 1 && (value === undefined || value === null || value === '')) {
|
callback(new Error('启用折旧时，请输入每年折旧金额'));
|
} else {
|
callback();
|
}
|
},
|
trigger: "blur"
|
}
|
],
|
}
|
|
const { form, resetForm } = useFormData({
|
// Basic Info
|
autoGenerateUniqueCode: true,
|
uniqueCode: undefined, // 唯一性编号
|
deviceName: undefined, // 设备名称
|
deviceModel: undefined, // 规格型号
|
deviceBrand: undefined, // 设备品牌
|
type: undefined, // 设备类型
|
factoryNumber: undefined, // 出厂编号
|
storageLocation: undefined, // 存放位置
|
responsiblePerson: undefined, // 责任人
|
filingDate: dayjs().format("YYYY-MM-DD"), // 建档日期
|
|
// Purchase Info
|
supplierName: undefined, // 供应商
|
manufacturer: undefined, // 制造厂商
|
purchaseDate: undefined, // 购置日期
|
originalAssetValue: undefined, // 资产原值
|
unit: undefined, // 单位
|
number: 1, // 数量
|
taxIncludingPriceUnit: undefined, // 含税单价
|
taxIncludingPriceTotal: undefined, // 含税总价
|
taxRate: undefined, // 税率
|
unTaxIncludingPriceTotal: undefined, // 不含税总价
|
|
// Technical Specs
|
technicalParameters: undefined, // 主要技术参数
|
mainPurpose: undefined, // 主要用途
|
|
// Operation Info
|
status: 1, // 设备状态 (0停用 1启用)
|
activationDate: undefined, // 启用日期
|
planRuntimeTime: dayjs().format("YYYY-MM-DD"), // 预计运行时间
|
isDepr: 2, // 是否启用折旧 1-是 2-否
|
annualDepreciationAmount: undefined, // 每年折旧金额
|
storageBlobDTOs: undefined, // 设备图片提交
|
storageBlobVOs: undefined, // 设备图片展示
|
});
|
|
const fileList = computed({
|
get() {
|
return form.storageBlobVOs || [];
|
},
|
set(val) {
|
form.storageBlobDTOs = val;
|
form.storageBlobVOs = val;
|
}
|
});
|
|
const loadForm = async (id) => {
|
if (id) {
|
operationType.value = 'edit';
|
} else {
|
operationType.value = 'add';
|
}
|
const { code, data } = await getLedgerById(id);
|
if (code == 200) {
|
form.autoGenerateUniqueCode = false;
|
form.uniqueCode = data.uniqueCode;
|
form.deviceName = data.deviceName;
|
form.deviceModel = data.deviceModel;
|
form.deviceBrand = data.deviceBrand;
|
form.type = data.type;
|
form.factoryNumber = data.factoryNumber;
|
form.storageLocation = data.storageLocation;
|
form.responsiblePerson = data.responsiblePerson;
|
form.filingDate = data.filingDate;
|
|
form.supplierName = data.supplierName;
|
form.manufacturer = data.manufacturer;
|
if (data.purchaseDate) {
|
form.purchaseDate = dayjs(data.purchaseDate).format('YYYY-MM-DD');
|
}
|
form.originalAssetValue = data.originalAssetValue;
|
form.unit = data.unit;
|
form.number = 1;
|
form.taxIncludingPriceUnit = data.taxIncludingPriceUnit;
|
form.taxIncludingPriceTotal = data.taxIncludingPriceTotal;
|
form.taxRate = data.taxRate;
|
form.unTaxIncludingPriceTotal = data.unTaxIncludingPriceTotal;
|
|
form.technicalParameters = data.technicalParameters;
|
form.mainPurpose = data.mainPurpose;
|
|
form.status = data.status != null ? data.status : 1;
|
if (data.activationDate) {
|
form.activationDate = dayjs(data.activationDate).format('YYYY-MM-DD');
|
}
|
form.isDepr = data.isDepr;
|
form.annualDepreciationAmount = data.annualDepreciationAmount;
|
|
// 预计运行时间：后端返回后转为 YYYY-MM-DD 以便日期选择器正确展示
|
if (data.planRuntimeTime) {
|
form.planRuntimeTime = dayjs(data.planRuntimeTime).format('YYYY-MM-DD');
|
} else {
|
form.planRuntimeTime = undefined;
|
}
|
form.storageBlobVOs = data.storageBlobVOs;
|
form.storageBlobDTOs = data.storageBlobVOs;
|
}
|
};
|
|
const handleDeviceTypeChange = (value) => {
|
// 如果输入的新值不在固定选项中，则添加到选项列表
|
if (value && !deviceTypeOptions.value.includes(value)) {
|
deviceTypeOptions.value.push(value);
|
}
|
};
|
|
const mathNum = () => {
|
if (!form.taxIncludingPriceUnit) {
|
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();
|
operationType.value = 'add'; // 重置为新增
|
clearValidate();
|
};
|
|
defineExpose({
|
form,
|
loadForm,
|
resetForm,
|
clearValidate,
|
resetFormAndValidate,
|
formRef,
|
});
|
</script>
|
