refactor:avoid duplicate error display between field and global messages

Author: Zxc4wonder

src/components/Form/AutoDataForm/index.vue

@@ -220,6 +220,13 @@ export default {
       // 不写入 totalFields，避免触发 innerContent 变化导致表单值被覆盖
       this.$set(this.serverErrors, name, error)
     },
+    getFieldNames() {
+      const elForm = this._getElFormInstance()
+      if (elForm && Array.isArray(elForm.fields)) {
+        return elForm.fields.map(item => item.prop).filter(Boolean)
+      }
+      return (this.totalFields || []).map(item => item.prop).filter(Boolean)
+    },
     setErrors(errors) {
       const mapped = {}
       Object.entries(errors || {}).forEach(([k, v]) => {

src/layout/components/GenericCreateUpdateForm/index.vue

@@ -70,49 +70,49 @@ export default {
     performSubmit: {
       type: Function,
       default(validValues) {
-        return this.$axios[this.method](this.iUrl, validValues)
+        return this.$axios[this.method](this.iUrl, validValues, this.getFieldErrorConfig())
       }
     },
     // 创建成功的msg
     createSuccessMsg: {
       type: String,
-      default: function () {
+      default: function() {
         return this.$t('CreateSuccessMsg')
       }
     },
     // 保存成功，继续添加的msg
     saveSuccessContinueMsg: {
       type: String,
-      default: function () {
+      default: function() {
         return this.$t('SaveSuccessContinueMsg')
       }
     },
     // 更新成功的msg
     updateSuccessMsg: {
       type: String,
-      default: function () {
+      default: function() {
         return this.$t('UpdateSuccessMsg')
       }
     },
     // 创建成功的跳转路由
     createSuccessNextRoute: {
       type: Object,
-      default: function () {
+      default: function() {
         const routeName = this.$route.name?.replace('Create', 'List')
         return { name: routeName }
       }
     },
     // 更新成功的跳转路由
     updateSuccessNextRoute: {
       type: Object,
-      default: function () {
+      default: function() {
         const routeName = this.$route.name?.replace('Update', 'List')
         return { name: routeName }
       }
     },
     objectDetailRoute: {
       type: Object,
-      default: function () {
+      default: function() {
         const routeName = this.$route.name?.replace('Update', 'Detail').replace('Create', 'Detail')
         return { name: routeName }
       }
@@ -126,7 +126,7 @@ export default {
     },
     cloneNameSuffix: {
       type: [String, Number],
-      default: function () {
+      default: function() {
         return this.$t('Duplicate').toLowerCase()
       }
     },
@@ -138,7 +138,7 @@ export default {
     // 获取创建和更新的url function
     getUrl: {
       type: Function,
-      default: function () {
+      default: function() {
         const objectId = this.getUpdateId()
         let url = this.url
         if (objectId) {
@@ -347,6 +347,12 @@ export default {
     isUpdateMethod() {
       return ['put', 'patch'].indexOf(this.method.toLowerCase()) > -1
     },
+    getFieldErrorConfig() {
+      const fields = this.$refs.form?.getFieldNames?.() || []
+      return {
+        fieldErrorFields: fields
+      }
+    },
     encryptFields(values) {
       // 批量提交，clean 后可能是个数组
       if (values instanceof Array) {

src/layout/components/GenericUpdateFormDialog/index.vue

@@ -67,7 +67,7 @@ export default {
       default: false
     }
   },
-  data: function () {
+  data: function() {
     return {
       internalKey: 0,
       selectPropertiesLabel: this.$t('SelectProperties'),
@@ -124,11 +124,11 @@ export default {
           }
           return formValue
         },
-        onSubmit: function (validValues) {
+        onSubmit: function(validValues) {
           const url = this.url
           const msg = this.updateSuccessMsg
           this.$axios
-            .patch(url, validValues)
+            .patch(url, validValues, this.getFieldErrorConfig())
             .then(res => {
               vm.$emit('update')
               this.$message.success(msg)

src/utils/request.js

@@ -112,6 +112,59 @@ function ifBadRequest({ response, error }) {
   }
 }
 
+function isPlainObject(data) {
+  return Object.prototype.toString.call(data) === '[object Object]'
+}
+
+const fieldErrorGlobalKeys = ['detail', 'non_field_errors', 'error', 'msg']
+
+function hasErrorMessage(value) {
+  if (typeof value === 'string') {
+    return value.trim() !== ''
+  }
+  if (Array.isArray(value)) {
+    return value.some(item => hasErrorMessage(item))
+  }
+  if (isPlainObject(value)) {
+    return Object.values(value).some(item => hasErrorMessage(item))
+  }
+  return value !== null && value !== undefined
+}
+
+function isFieldErrorValue(value) {
+  if (!hasErrorMessage(value)) {
+    return false
+  }
+  return typeof value === 'string' || Array.isArray(value) || isPlainObject(value)
+}
+
+function isFieldErrorHandledByForm(response) {
+  const data = response.data
+  const fields = response.config?.fieldErrorFields || []
+  if (response.status !== 400) {
+    return false
+  }
+  if (!Array.isArray(fields) || fields.length === 0) {
+    return false
+  }
+  if (!isPlainObject(data) || Object.keys(data).length === 0) {
+    return false
+  }
+
+  const errorKeys = Object.keys(data).filter(key => hasErrorMessage(data[key]))
+  if (errorKeys.length === 0 || errorKeys.some(key => fieldErrorGlobalKeys.includes(key))) {
+    return false
+  }
+
+  return errorKeys.every(key => fields.includes(key) && isFieldErrorValue(data[key]))
+}
+
+function disableHandledFieldErrorFlash({ response }) {
+  if (isFieldErrorHandledByForm(response)) {
+    response.config.disableFlashErrorMsg = true
+  }
+}
+
 export function logout() {
   const next = encodeURIComponent(getCurrentPageUrl())
   window.location.href = `${addBasePath(process.env.VUE_APP_LOGOUT_PATH)}?next=${next}`
@@ -192,6 +245,7 @@ service.interceptors.response.use(
 
     await ifUnauthorized({ response, error })
     await ifBadRequest({ response, error })
+    await disableHandledFieldErrorFlash({ response, error })
     await flashErrorMsg({ response, error })
     return Promise.reject(error)
   }