表单内容增加了验证

frontend/src/views/authority/role/components/rolePopup.vue

@@ -2,14 +2,17 @@
     <!-- 基础信息弹出框 -->
   <el-dialog :model-value="dialogVisible" :title="title" v-bind="dialogSmall" @close="handleCancel" width="500" draggable>
     <div>
-        <el-form :model="data">
-        <el-form-item label="名称" :label-width="100">
+        <el-form :model="data" 
+                  ref='formRuleRef'
+                  :rules='rules'
+                  >
+        <el-form-item label="名称" prop='name' :label-width="100">
           <el-input v-model="data.name" placeholder="请输入名称" autocomplete="off" />
         </el-form-item>
-        <el-form-item label="编码" :label-width="100">
+        <el-form-item label="编码" prop='code' :label-width="100">
           <el-input v-model="data.code" placeholder="请输入编码" autocomplete="off" />
         </el-form-item>
-        <el-form-item label="类型" :label-width="100">
+        <el-form-item label="类型" prop='type' :label-width="100">
           <el-select v-model="data.type" placeholder="请选择类型" autocomplete="off">
           <el-option
             v-for="item in dictStore.getDictData('roleType')"
@@ -19,7 +22,7 @@
           />
           </el-select>
         </el-form-item>
-        <el-form-item label="描述" :label-width="100">
+        <el-form-item label="描述" prop='remark' :label-width="100">
           <el-input v-model="data.remark" :rows="2" type="textarea" placeholder="请输入备注" autocomplete="off" />
         </el-form-item>
       </el-form>
@@ -37,6 +40,7 @@
   </template>
   
   <script lang="ts" setup>
+  import { FormInstance,FormItemRule } from 'element-plus'
   import { ref,computed  } from 'vue'
   import { Role } from '@/api/role/interface'
   import {dialogSmall} from '@/utils/elementBind'
@@ -61,15 +65,14 @@
     updataList:Function
   }>();
 
-  // const value = computed({
-  //   // get: () => { 
-  //   //   if(title === '新增角色')
-  //   //     return true
-  //   //   data.status === 1
-  //   // },
-  //   // set: (value: boolean) => data.status = value ? 1 : 0
-  // })
-  
+  //定义规则
+  const formRuleRef = ref<FormInstance>()
+  //定义校验规则
+  const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
+    name: [{ required: true, message: '名称必填！', trigger: 'blur' }],
+    code: [{ required: true, message: '编码必填！', trigger: 'blur' }],
+  })
+
   const emit = defineEmits<{
   (e:'update:visible',value:boolean):void;
   }>();
@@ -79,43 +82,49 @@
   }
   
   const handleOK = () => {
-    
-  // const addData:Role.RoleBO = {
-  //   name: '', //角色类型名称
-  //   code: '',   //角色代码
-  //   type: 0,
-  //   remark:'',   //角色描述
-  // }
 
-  // addData.name = data.name
-  // addData.code = data.code
-    console.log(data);
-    if(openType === "add")
-  {
-    addRole(data).then(res => {
-      if(res.code === "200")
-      {
-        ElMessage.success(res.message)
-        updataList()
+    console.log(data,11111)
+    ElMessage.info('角色数据提交')
+  try {
+    formRuleRef.value?.validate((valid: boolean) => {
+      if (valid) {
+        // 将表单数据转为json,发送到后端
+        // let confirmFormData = JSON.parse(JSON.stringify(form.value))
+        // console.log(confirmFormData)
+        if(openType === "add")
+        {
+          addRole(data).then(res => {
+            if(res.code === "200")
+            {
+              ElMessage.success(res.message)
+              updataList()
+            }
+            else
+              ElMessage.error(res.message)
+          })
+        }
+          
+        if(openType === "edit")
+        {
+          editRole(data).then(res => {
+            if(res.code === "200")
+            {
+              ElMessage.success(res.message)
+              updataList()
+            }
+            else
+              ElMessage.error(res.message)
+          })
+        }
+        
+        emit('update:visible',false)
+      } else {
+        ElMessage.error('表单验证失败！')
       }
-      else
-        ElMessage.error(res.message)
     })
+  } catch (error) {
+    console.error('验证过程中发生错误', error)
   }
-    
-  if(openType === "edit")
-  {
-    editRole(data).then(res => {
-      if(res.code === "200")
-      {
-        ElMessage.success(res.message)
-        updataList()
-      }
-      else
-        ElMessage.error(res.message)
-    })
-  }
-    emit('update:visible',false)
   }
   
   </script>