Browse Source

表单校验打包部署后无效,优化写法

CzRger 1 year ago
parent
commit
a8ae543146
2 changed files with 22 additions and 33 deletions
  1. 16 32
      src/components/cus/CusForm.vue
  2. 6 1
      src/components/cus/CusFormColumn.vue

+ 16 - 32
src/components/cus/CusForm.vue

@@ -31,16 +31,19 @@ export default defineComponent({
   props: {
     labelWidth: {default: '100px'},
     elementLoadingBackground: {},
-    formView: {default: false}
+    formView: {default: false},
   },
   setup(props, { emit }) {
     const store = useStore();
     const router = useRouter();
     const route = useRoute();
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
-    const state = reactive({})
+    const state = reactive({
+      formChildren: []
+    })
     const ref_cusForm: any = ref(null)
     provide('element-loading-background', props.elementLoadingBackground)
+    provide('cus-form-children', state.formChildren)
     let _formView: any = ref(props.formView)
     watch(() => props.formView, (n) => {
       _formView.value = n
@@ -49,24 +52,15 @@ export default defineComponent({
     const submit = () => {
       return new Promise((resolve, reject) => {
         const nodes: any = [];
-        const handleItem = (itemVue: any) => {
-          const _itemValue = itemVue?.__vueParentComponent?.parent
-          if (_itemValue?.type.name === "CusFormColumn") {
-            const errorMessage = _itemValue.setupState.handleValidate()
-            if (errorMessage) {
-              nodes.push({
-                node: _itemValue,
-                message: errorMessage
-              });
-            }
-          }
-          if (itemVue.childNodes && itemVue.childNodes.length > 0) {
-            itemVue.childNodes.forEach((v: any) => {
-              handleItem(v);
+        state.formChildren.forEach((v: any) => {
+          const errorMessage = v.handleValidate()
+          if (errorMessage) {
+            nodes.push({
+              node: v,
+              message: errorMessage
             });
           }
-        };
-        handleItem(ref_cusForm?.value?.$el);
+        })
         if (nodes.length > 0) {
           reject(nodes);
         } else {
@@ -78,20 +72,10 @@ export default defineComponent({
       emit('handleEnter')
     }
     const reset = () => {
-      const handleItem = (itemVue: any) => {
-        const _itemValue = itemVue?.__vueParentComponent?.parent
-        if (_itemValue?.type.name === "CusFormColumn") {
-          _itemValue.setupState.reset()
-        } else {
-          if (itemVue.childNodes && itemVue.childNodes.length > 0) {
-            itemVue.childNodes.forEach((v: any) => {
-              handleItem(v);
-            });
-          }
-        }
-      };
-      handleItem(ref_cusForm?.value?.$el);
-    }
+      state.formChildren.forEach((v: any) => {
+        v.reset()
+      })
+    } 
     return {
       ...toRefs(state),
       ref_cusForm,

+ 6 - 1
src/components/cus/CusFormColumn.vue

@@ -216,7 +216,8 @@ import {
   getCurrentInstance,
   ComponentInternalInstance,
   toRefs,
-  nextTick
+  nextTick,
+  inject
 } from 'vue'
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
@@ -364,6 +365,10 @@ export default defineComponent({
         p.style.marginBottom = '18px'
       }
     })
+    onMounted(() => {
+      const formChildren: any = inject('cus-form-children')
+      formChildren.push(ref_cusFormColumn.value.$parent)
+    })
     return {
       ...toRefs(state),
       handleValidate,