Explorar el Código

fix(表单验证): 改进表单验证错误处理和提示信息

liujt hace 2 meses
padre
commit
36a575d104

+ 101 - 4
src/views/purchasingManage/inquiryManage/components/addDialog.vue

@@ -408,8 +408,57 @@
             new Promise((resolve, reject) => {
               this.$refs['inquiryTable' + item.supplierId][0].validateForm(
                 (valid, errors) => {
+                  console.log(valid, errors);
                   if (!valid) {
-                    reject(`${item.supplierName} 的表单验证失败,请检查必填项`);
+                    // 解析错误信息
+                    let errorMessages = [];
+                    if (errors) {
+                      console.log('Errors structure:', errors);
+                      // 处理不同结构的errors对象
+                      if (Array.isArray(errors)) {
+                        // 如果errors是数组
+                        errors.forEach(error => {
+                          if (typeof error === 'string') {
+                            errorMessages.push(error);
+                          } else if (error && error.message) {
+                            errorMessages.push(error.message);
+                          } else {
+                            errorMessages.push(JSON.stringify(error));
+                          }
+                        });
+                      } else if (typeof errors === 'object') {
+                        // 如果errors是对象
+                        for (let field in errors) {
+                          if (errors[field]) {
+                            if (Array.isArray(errors[field])) {
+                              errors[field].forEach(error => {
+                                if (typeof error === 'string') {
+                                  errorMessages.push(error);
+                                } else if (error && error.message) {
+                                  errorMessages.push(error.message);
+                                } else {
+                                  errorMessages.push(JSON.stringify(error));
+                                }
+                              });
+                            } else if (typeof errors[field] === 'string') {
+                              errorMessages.push(errors[field]);
+                            } else if (errors[field] && errors[field].message) {
+                              errorMessages.push(errors[field].message);
+                            } else {
+                              errorMessages.push(JSON.stringify(errors[field]));
+                            }
+                          }
+                        }
+                      } else if (typeof errors === 'string') {
+                        // 如果errors是字符串
+                        errorMessages.push(errors);
+                      }
+                    }
+                    if (errorMessages.length > 0) {
+                      reject(`${item.supplierName}缺少必填项:${errorMessages.join(';')}`);
+                    } else {
+                      reject(`${item.supplierName} 的表单验证失败,请检查必填项`);
+                    }
                   } else {
                     resolve(true);
                   }
@@ -422,7 +471,55 @@
           new Promise((resolve, reject) => {
             this.$refs.form.validate((valid, errors) => {
               if (!valid) {
-                reject('表单验证失败,请检查必填项');
+                // 解析错误信息
+                let errorMessages = [];
+                if (errors) {
+                  console.log('Main form errors structure:', errors);
+                  // 处理不同结构的errors对象
+                  if (Array.isArray(errors)) {
+                    // 如果errors是数组
+                    errors.forEach(error => {
+                      if (typeof error === 'string') {
+                        errorMessages.push(error);
+                      } else if (error && error.message) {
+                        errorMessages.push(error.message);
+                      } else {
+                        errorMessages.push(JSON.stringify(error));
+                      }
+                    });
+                  } else if (typeof errors === 'object') {
+                    // 如果errors是对象
+                    for (let field in errors) {
+                      if (errors[field]) {
+                        if (Array.isArray(errors[field])) {
+                          errors[field].forEach(error => {
+                            if (typeof error === 'string') {
+                              errorMessages.push(error);
+                            } else if (error && error.message) {
+                              errorMessages.push(error.message);
+                            } else {
+                              errorMessages.push(JSON.stringify(error));
+                            }
+                          });
+                        } else if (typeof errors[field] === 'string') {
+                          errorMessages.push(errors[field]);
+                        } else if (errors[field] && errors[field].message) {
+                          errorMessages.push(errors[field].message);
+                        } else {
+                          errorMessages.push(JSON.stringify(errors[field]));
+                        }
+                      }
+                    }
+                  } else if (typeof errors === 'string') {
+                    // 如果errors是字符串
+                    errorMessages.push(errors);
+                  }
+                }
+                if (errorMessages.length > 0) {
+                  reject(`${errorMessages.join(';')}`);
+                } else {
+                  reject('主表单验证失败,请检查必填项');
+                }
               } else {
                 resolve(true);
               }
@@ -679,9 +776,9 @@
           console.log(error);
           // 表单验证未通过,显示错误提示
           if (typeof error === 'string') {
-            this.$message.error(error);
+            this.$message.warning(error);
           } else {
-            this.$message.error('表单验证失败,请检查必填项');
+            this.$message.warning('表单验证失败,请检查必填项');
           }
           // 表单验证未通过,不执行保存操作
         }

+ 7 - 7
src/views/purchasingManage/inquiryManage/components/inquiryTable.vue

@@ -52,7 +52,7 @@
           v-if="status !== 'Detail'"
           :rules="{
             required: true,
-            message: '请输入优惠价',
+            message: '请输入优惠后总价',
             trigger: 'blur'
           }"
         >
@@ -137,7 +137,7 @@
           :prop="'resultList.' + $index + '.isWinner'"
           :rules="{
             required: true,
-            message: '请输入',
+            message: '请选择是否中标',
             trigger: 'change'
           }"
         >
@@ -159,7 +159,7 @@
           :prop="'resultList.' + $index + '.supplierProductName'"
           :rules="{
             required: true,
-            message: '请输入',
+            message: '请输入供应商产品名称',
             trigger: 'change'
           }"
         >
@@ -209,7 +209,7 @@
           :prop="'resultList.' + scope.$index + '.singlePrice'"
           :rules="{
             required: true,
-            message: '请输入',
+            message: '请输入采购单价',
             trigger: 'change'
           }"
         >
@@ -312,7 +312,7 @@
         >
           <el-input
             v-model="scope.row.purchaseCount"
-            placeholder="请输入"
+            placeholder="请输入数量"
             type="number"
             :disabled="status == 'Detail'"
             :min="0"
@@ -1109,8 +1109,8 @@
 
       validateForm(callback) {
         //开始表单校验
-        this.$refs.form.validate((valid) => {
-          callback(valid);
+        this.$refs.form.validate((valid, errors) => {
+          callback(valid, errors);
         });
       }
     }