表单验证

frontend/src/views/plan/planList/components/PlanDialog.vue

@@ -1,6 +1,6 @@
 <template>
  <el-dialog :title="dialogTitle" :model-value="visible" @close="handleCancel" v-bind="dialogSmall">
-      <el-form :model="formData" >
+      <el-form :model="formData" ref='formRuleRef' :rules='rules'>
         <el-form-item label="名称" prop="name">
           <el-input v-model="formData.name" :disabled="isReadOnly"/>
         </el-form-item>
@@ -32,7 +32,7 @@
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="误差体系" prop="type">
+        <el-form-item label="误差体系" prop="type" >
           <el-select v-model="formData.error_Sys_Id" placeholder="请选择误差体系" :disabled="isReadOnly">
             <el-option
                       v-for="plan in errorList"
@@ -54,7 +54,8 @@
 </template>
 
 <script setup lang="ts">
-  import { defineProps, defineEmits, reactive,watch,ref } from 'vue';
+  import{ElMessage, FormInstance,FormItemRule}from'element-plus'
+  import { defineProps, defineEmits, reactive,watch,ref, Ref } from 'vue';
   import { dialogSmall} from '@/utils/elementBind'
   const props = defineProps<{
     visible: boolean;
@@ -107,13 +108,41 @@ const emit = defineEmits<{
     (e: 'submit', data: any): void;
   }>();
   
+// 定义规则
+const formRuleRef = ref<FormInstance>()
+const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
+    name: [{ required: true, message: '检测计划名称必填！', trigger: 'blur' }],
+    father_Plan_Id: [{ required: true, message: '参照标准名称必填！', trigger: 'change' }],
+   
+});
+
   const handleCancel = () => {
+    //重置表单内容
+    //取消表单校验状态
+    formRuleRef.value && formRuleRef.value.resetFields()
     emit('update:visible', false); // 关闭对话框
   };
   
   const handleSubmit = () => {
-    emit('submit', props.formData); // 提交表单数据
-    emit('update:visible', false); // 提交后关闭对话框
+
+    try {
+    formRuleRef.value?.validate((valid: boolean) => {
+    if (valid) 
+    {
+        // 将表单数据转为json,发送到后端
+        let confirmFormData = JSON.parse(JSON.stringify(props.formData));
+        console.log(confirmFormData)
+        emit('submit', props.formData); // 提交表单数据
+        emit('update:visible', false); // 提交后关闭对话框             
+    } 
+    else 
+    {
+        ElMessage.error('表单验证失败！')
+    }
+    })
+    } catch (error) {
+        console.error('验证过程中发生错误', error)
+    }
   };
   
   // 当 props.visible 改变时，更新 formData

frontend/src/views/plan/planList/components/PlanOpen.vue

@@ -48,42 +48,42 @@
    const columns = reactive<ColumnProps<Device.DeviceList>[]>([
     { type: 'selection', fixed: 'left', width: 70 },
     {
-      prop: 'Name',
+      prop: 'name',
       label: '名称',
       minWidth: 120,
     },
     {
-      prop: 'Dev_Type',
+      prop: 'dev_Type',
       label: '类型',
       minWidth: 100,
     },
     {
-      prop: 'Dev_Chns',
+      prop: 'dev_Chns',
       label: '通道数',
-      minWidth: 70,
+      minWidth: 100,
     },
     {
-      prop: 'ReCheck_Num',
+      prop: 'reCheck_Num',
       label: '复检次数',
       minWidth: 70,
     },
     {
-      prop: 'Report_State',
+      prop: 'report_State',
       label: '报告状态',
       minWidth: 130,
     },
     {
-      prop: 'Check_Result',
+      prop: 'check_Result',
       label: '检测结果',
       minWidth: 130,
     },
     {
-      prop: 'Check_State',
+      prop: 'check_State',
       label: '检测状态',
       minWidth: 130,
     },
     {
-      prop: 'Document_State',
+      prop: 'document_State',
       label: '归档状态',
       minWidth: 130,
     },
@@ -94,8 +94,6 @@
     dialogVisible.value = true
     title.value = textTitle
   }
-  
-  
   defineExpose({ open })