表单验证

frontend/src/views/authority/resource/components/ResourceDialog.vue

@@ -1,6 +1,6 @@
 <template>
     <el-dialog :title="dialogTitle" :model-value="visible" @close="handleCancel" v-bind="dialogSmall">
-      <el-form :model="formData" :rules="rules">
+      <el-form :model="formData" ref='formRuleRef' :rules='rules'>
         <el-form-item label="名称" prop="name">
           <el-input v-model="formData.name" />
         </el-form-item>
@@ -12,17 +12,15 @@
         </el-form-item>
         <el-form-item label="类型" prop="type">
           <el-select v-model="formData.type" placeholder="请选择资源类型">
-            <el-option label="菜单" value="菜单" />
-            <el-option label="按钮" value="按钮" />
-            <el-option label="公共资源" value="公共资源" />
+              <el-option label="菜单" :value="0"></el-option>
+              <el-option label="按钮" :value="1"></el-option>
+              <el-option label="公共资源" :value="2"></el-option>
+              <el-option label="服务间调用资源" :value="3"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="描述" prop="remark">
           <el-input v-model="formData.remark" :rows="2" type="textarea"/>
         </el-form-item>
-        <el-form-item label="路由" prop="route_Name">
-          <el-input v-model="formData.route_Name" />
-        </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
@@ -34,42 +32,69 @@
   </template>
   
   <script lang="ts" setup name="ResourceDialog">
-  import { defineProps, defineEmits, reactive,watch } from 'vue';
+  import { defineProps, defineEmits,watch,ref, type Ref } from 'vue';
   import { dialogSmall } from '@/utils/elementBind'
+  import { ElMessage,   FormInstance,   FormItemRule } from 'element-plus'
   const props = defineProps<{
     visible: boolean;
     dialogTitle: string;
     
     formData: {
-      
-      id:string;
-      name: string;
-      path: string;
-      sort: number;
-      type: string;
-      remark: string;
-      route_Name: string;
+      id: string;//资源表Id
+      pid:string;//节点（0为根节点）
+      pids?:string;//节点上层所有节点
+      name: string;//名称
+      code:string;//资源标识
+      path:string;//路径
+      icon?:string;//图标
+      sort:number;//排序
+      type:number;//资源类型0-菜单、1-按钮、2-公共资源、3-服务间调用资源
+      remark?: string;//权限资源描述
+      state:number;//权限资源状态
+      create_By?:string;//创建人
+      create_Time?:string;//创建时间
+      update_By?:string;//更新人
+      update_Time?:string;//更新时间
     };
   }>();
   
-  const rules = {
-          name :[
-            {require:true,trigger:"blur",message:"请填写菜单名称"}
-          ]
-  }
+
+  // 定义规则
+  const formRuleRef = ref<FormInstance>()
+  const rules : Ref<Record<string, Array<FormItemRule>>> = ref({
+          name :[{required:true,trigger:'blur',message:'菜单名称必填!'}],
+          path :[{required:true,trigger:'blur',message:'菜单路径必填!'}],
+          type :[{required:true,trigger:'change',message:'菜单类型必选!'}]
+  })
   const emit = defineEmits<{
     (e: 'update:visible', value: boolean): void;
     (e: 'submit', data: any): void;
   }>();
   
   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))
+          emit('submit', props.formData); // 提交表单数据
+          emit('update:visible', false); // 提交后关闭对话框
+      } else {
+        ElMessage.error('表单验证失败！')
+      }
+      }) 
+    }catch (error) {
+    console.error('验证过程中发生错误', error)
+    }
+
+  }
   
   // 当 props.visible 改变时，更新 formData
   watch(() => props.visible, (newVal) => {