测试用例修改

src/views/system/auth/role/popupForm.vue

@@ -1,9 +1,9 @@
 <template>
     <el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title">
         <el-scrollbar>
-            <el-form :inline="false" :model="form" label-width="120px" :rules="rules">
-                <el-form-item label="角色名称">
-                    <el-input v-model="form.name" placeholder="请输入菜单名称" />
+            <el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
+                <el-form-item label="角色名称" required>
+                    <el-input v-model="form.name" placeholder="请输入菜单名称"  maxlength="32" show-word-limit @input="handleInput"/>
                 </el-form-item>
                 <el-form-item label="角色编码">
                     <el-input v-model="form.code" placeholder="请输入菜单名称" />
@@ -32,6 +32,7 @@ import { useAdminInfo } from '@/stores/adminInfo'
 
 const adminInfo = useAdminInfo()
 const tableStore = inject('tableStore') as TableStore
+const formRef = ref()
 // do not use same name with ref
 const form = reactive({
     code: '',
@@ -60,15 +61,26 @@ const open = (text: string, data?: anyObj) => {
     }
 }
 const submit = async () => {
-    if (form.id) {
-        await update(form)
-    } else {
-        form.type = adminInfo.$state.userType + 1
-        await add(form)
+    // 先进行表单验证
+    try {
+        await formRef.value.validate()
+        if (form.id) {
+            await update(form)
+        } else {
+            form.type = adminInfo.$state.userType + 1
+            await add(form)
+        }
+        ElMessage.success('保存成功')
+        tableStore.index()
+        dialogVisible.value = false
+    } catch (error) {
+        // 验证失败，Element Plus 会自动显示错误信息
+        console.log('表单验证失败:', error)
     }
-    ElMessage.success('保存成功')
-    tableStore.index()
-    dialogVisible.value = false
+}
+
+const handleInput = (val: string) => {
+    form.name = val.replace(/\s+/g, '')
 }
 
 defineExpose({ open })