设备台账添加必填校验

gaoluyang

2025-08-04 39bc0778560a1e7c9ded6c706fb38abeb1403241

设备台账添加必填校验

 src/views/equipmentManagement/ledger/Form.vue

@@ -1,5 +1,5 @@
<template>
  <el-form :model="form" label-width="100px">
  <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">
@@ -37,7 +37,6 @@
            placeholder="请输入含税单价"
            maxlength="10"
            @change="mathNum"
            @input="handleNumberInput"
          />
        </el-form-item>
      </el-col>
@@ -45,7 +44,7 @@
        <el-form-item label="含税总价" prop="taxIncludingPriceTotal">
          <el-input
            v-model="form.taxIncludingPriceTotal"
            placeholder="请输入含税总价"
            placeholder="自动生成"
            type="number"
            disabled
          />
@@ -76,7 +75,7 @@
        <el-form-item label="不含税总价" prop="unTaxIncludingPriceTotal">
          <el-input
            v-model="form.unTaxIncludingPriceTotal"
            placeholder="请输入不含税总价"
            placeholder="自动生成"
            type="number"
            disabled
          />
@@ -114,10 +113,21 @@
  calculateTaxExclusiveTotalPrice,
} from "@/utils/summarizeTable";
import { ElMessage } from "element-plus";
import {ref} from "vue";

defineOptions({
  name: "设备台账表单",
});
const formRef = ref(null);
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, // 设备名称
@@ -170,22 +180,23 @@
  }
};

const handleNumberInput = (value) => {
  // 移除所有非数字字符
  let num = value.replace(/[^\d.]/g, "");
// 清除表单校验状态
const clearValidate = () => {
  formRef.value?.clearValidate();
};

  // 限制长度为10
  if (num.length > 10) {
    num = num.slice(0, 10);
  }

  // 更新值
  form.taxIncludingPriceUnit = num;
// 重置表单数据和校验状态
const resetFormAndValidate = () => {
  resetForm();
  clearValidate();
};

defineExpose({
  form,
  loadForm,
  resetForm,
  clearValidate,
  resetFormAndValidate,
    formRef,
});
</script>

 src/views/equipmentManagement/ledger/Modal.vue

@@ -15,6 +15,7 @@
import { addLedger, editLedger } from "@/api/equipmentManagement/ledger";
import Form from "./Form.vue";
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance()

defineOptions({
  name: "设备台账新增编辑",
@@ -33,22 +34,25 @@
  closeModal,
} = useModal({ title: "设备台账" });

const sendForm = async () => {
  loading.value = true;
  const { code } = id.value
    ? await editLedger({ id: id.value, ...formRef.value.form })
    : await addLedger(formRef.value.form);
  if (code == 200) {
    emits("success");
    ElMessage({ message: "操作成功", type: "success" });
    close();
  } else {
    loading.value = false;
  }
const sendForm = () => {
    proxy.$refs.formRef.$refs.formRef.validate(async valid => {
        if (valid) {
            const {code} = id.value
                ? await editLedger({id: id.value, ...formRef.value.form})
                : await addLedger(formRef.value.form);
            if (code == 200) {
                emits("success");
                ElMessage({message: "操作成功", type: "success"});
                close();
            } else {
                loading.value = false;
            }
        }
    })
};

const close = () => {
  formRef.value.resetForm();
    formRef.value.resetFormAndValidate();
  closeModal();
};


 src/views/index.vue

@@ -337,16 +337,6 @@
    }
])

// 合同金额分析数据
const contractList = [
    { name: '深圳科技有限公司', percent: 36, value: 4544, color: '#4fc3f7' },
    { name: '北京科技有限公司', percent: 20, value: 4000, color: '#81c784' },
    { name: '广州科技有限公司', percent: 16, value: 3113, color: '#ffb74d' },
    { name: '上海科技有限公司', percent: 10, value: 2341, color: '#ba68c8' },
    { name: '南京科技有限公司', percent: 9, value: 1231, color: '#e57373' },
    { name: '北京未来科技有限公司', percent: 9, value: 1231, color: '#64b5f6' }
]

// 待办事项
const todoList = ref([])
const radio1 = ref(1)