gaoluyang
2026-04-13 b97ffffa75f2acfff21b842d69fa7526fbb9fed5
src/views/equipmentManagement/ledger/Form.vue
@@ -1,6 +1,22 @@
<template>
  <el-form :model="form" label-width="100px" :rules="formRules" ref="formRef">
  <el-form :model="form" label-width="120px" :rules="formRules" ref="formRef">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="所属区域" prop="areaId">
          <el-tree-select
            v-model="form.areaId"
            :data="areaOptions"
            :props="areaTreeProps"
            node-key="id"
            value-key="id"
            check-strictly
            clearable
            filterable
            placeholder="请选择所属区域"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="设备名称" prop="deviceName">
          <el-input v-model="form.deviceName" placeholder="请输入设备名称" />
@@ -14,6 +30,27 @@
      <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">
@@ -32,71 +69,81 @@
        </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 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="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-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="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">-->
<!--          &lt;!&ndash; <el-input-->
<!--            v-model="form.taxRate"-->
<!--            placeholder="请输入税率"-->
<!--            type="number"-->
<!--          >-->
<!--            <template #append> % </template>-->
<!--          </el-input> &ndash;&gt;-->
<!--          <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="请输入录入人" />
@@ -136,37 +183,68 @@
import useFormData from "@/hooks/useFormData";
// import useUserStore from "@/store/modules/user";
import { getLedgerById } from "@/api/equipmentManagement/ledger";
import { getDeviceAreaTree } from "@/api/equipmentManagement/deviceArea";
import dayjs from "dayjs";
import {
  calculateTaxIncludeTotalPrice,
  calculateTaxExclusiveTotalPrice,
} from "@/utils/summarizeTable";
import { ElMessage } from "element-plus";
import {ref} from "vue";
import { ref, onMounted } from "vue";
defineOptions({
  name: "设备台账表单",
});
const formRef = ref(null);
const operationType = ref('');
const areaOptions = ref([]);
const areaTreeProps = {
  label: "areaName",
  children: "children",
};
// 设备类型固定选项
const deviceTypeOptions = ref([
  '生产设备',
  '办公设备',
  '检测设备',
  '运输设备',
  '其他设备'
]);
const formRules = {
   areaId: [{ required: true, trigger: "change", message: "请选择所属区域" }],
   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: "请选择" }],
   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({
  areaId: undefined, // 区域ID
  deviceName: undefined, // 设备名称
  deviceModel: undefined, // 规格型号
  deviceBrand: undefined, // 设备品牌
  type: undefined, // 设备类型
  supplierName: undefined, // 供应商
  storageLocation: undefined, // 存放位置
  enableDepreciation: false, // 是否启用折旧
  isDepr: 2, // 是否启用折旧 1-是 2-否
  annualDepreciationAmount: undefined, // 每年折旧金额
  unit: undefined, // 单位
  number: 1, // 数量
  taxIncludingPriceUnit: undefined, // 含税单价
@@ -184,12 +262,15 @@
   }
  const { code, data } = await getLedgerById(id);
  if (code == 200) {
    form.areaId = data.areaId;
    form.deviceName = data.deviceName;
    form.deviceModel = data.deviceModel;
    form.deviceBrand = data.deviceBrand;
    form.type = data.type;
    form.supplierName = data.supplierName;
    form.storageLocation = data.storageLocation;
    form.enableDepreciation = data.enableDepreciation;
    form.isDepr = data.isDepr;
    form.annualDepreciationAmount = data.annualDepreciationAmount;
    form.unit = data.unit;
    form.number = 1;
    form.taxIncludingPriceUnit = data.taxIncludingPriceUnit;
@@ -197,6 +278,28 @@
    form.taxRate = data.taxRate;
    form.unTaxIncludingPriceTotal = data.unTaxIncludingPriceTotal;
    form.createTime = data.createTime;
    // 预计运行时间:后端返回后转为 YYYY-MM-DD 以便日期选择器正确展示
    if (data.planRuntimeTime) {
      form.planRuntimeTime = dayjs(data.planRuntimeTime).format('YYYY-MM-DD');
    } else {
      form.planRuntimeTime = undefined;
    }
  }
};
const setAreaId = (areaId) => {
  form.areaId = areaId;
};
const loadAreaOptions = async () => {
  const res = await getDeviceAreaTree();
  areaOptions.value = Array.isArray(res?.data) ? res.data : Array.isArray(res) ? res : [];
};
const handleDeviceTypeChange = (value) => {
  // 如果输入的新值不在固定选项中,则添加到选项列表
  if (value && !deviceTypeOptions.value.includes(value)) {
    deviceTypeOptions.value.push(value);
  }
};
@@ -228,9 +331,14 @@
  clearValidate();
};
onMounted(() => {
  loadAreaOptions();
});
defineExpose({
  form,
  loadForm,
  setAreaId,
  resetForm,
  clearValidate,
  resetFormAndValidate,