表单验证

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 })
   
   

frontend/src/views/plan/planList/index.vue

@@ -21,6 +21,7 @@
          <el-button type='primary' link :icon='EditPen' @click="openEditDialog(scope.row)">编辑</el-button>
          <el-button type='primary' link :icon='Delete' >删除</el-button>
          <el-button type='primary' link :icon='List' @click="showDeviceOpen(scope.row)">设备</el-button>
+         <el-button type='primary' link :icon='List' @click="showtestSourceOpen(scope.row)">检测源</el-button>
        </template>
    </ProTable>
 
@@ -47,13 +48,14 @@ import type { Plan } from '@/api/plan/interface'
 import PlanDialog from "@/views/plan/planList/components/PlanDialog.vue"; // 导入子组件
 import Open from '@/views/plan/planList/components/PlanOpen.vue'
 import { useViewSize } from '@/hooks/useViewSize'
-
+import { useRouter } from "vue-router";
 const { popupBaseView, viewWidth, viewHeight } = useViewSize()
 const openView = ref()
 const planData = planDataList
 const dialogFormVisible = ref(false)
 const dialogTitle = ref('')
 const isReadOnly = ref(false)
+const router = useRouter();
 const dialogForm = ref<Plan.PlanList>({
                               id: '',
                               name: '',
@@ -117,7 +119,7 @@ const columns = reactive<ColumnProps<Plan.PlanList>[]>([
    label: '父节点',
    width: 200,
  },
- { prop: 'operation', label: '操作', fixed: 'right' ,width: 350, },
+ { prop: 'operation', label: '操作', fixed: 'right' ,width: 500, },
 ])
 
 // 打开编辑对话框
@@ -129,6 +131,7 @@ const openEditDialog = (planSystem: Plan.PlanList) => {
 };
 
 const openAddDialog = () => {
+  
   dialogForm.value = {
       id: '',
       name: '',
@@ -157,6 +160,12 @@ const handleRowClick = (planSystem: Plan.PlanList) =>{
 const showDeviceOpen = (planSystem: Plan.PlanList) => {
   openView.value.open('设备列表')
 }
+
+const showtestSourceOpen=(planSystem: Plan.PlanList)=>{
+  router.push({
+    path: "/machine/testSource",
+  });
+}
 </script>
 
 <style scoped>