feat(lib): 支持antdv 4x 版本

re #323
lljj-x · Oct 5, 2023 · 90987f0 · 90987f0
1 parent e373724
commit 90987f0
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 6 deletions.
diff --git a/packages/demo/demo-v3/src/pages/index/views/Demo/index.vue b/packages/demo/demo-v3/src/pages/index/views/Demo/index.vue
@@ -228,14 +228,15 @@ import schemaTypes from 'demo-common/schemaTypes';
 const VueElementForm = defineAsyncComponent(() => import('@lljj/vue3-form-element'));
 
 let installedAntdv = false;
-const VueAntForm = defineAsyncComponent(async () => {
+
+const VueAntForms = (async () => {
     // eslint-disable-next-line no-unused-vars
     const [antdv, antForm] = await Promise.all([
         import('demo-common/components/Antdv/index.js'),
         import('@lljj/vue3-form-ant')
     ]);
 
-    return {
+    const antdFormGenerator = (formProperty = 'default') => ({
         name: 'antFormWrap',
         setup(props, { attrs, slots }) {
             // hack 动态install antDv，因为我不知其它地方如何获取 vue app
@@ -245,12 +246,20 @@ const VueAntForm = defineAsyncComponent(async () => {
                 installedAntdv = true;
             }
 
-            return () => h(antForm.default, {
+            return () => h(antForm[formProperty], {
                 ...attrs
             }, slots);
         }
+    });
+
+    return {
+        v3: antdFormGenerator('default'),
+        v4: antdFormGenerator('JsonSchemaFormAntdV4')
     };
-});
+})();
+
+const VueAntForm = defineAsyncComponent(() => VueAntForms.then(res => res.v3));
+const VueAntFormV4 = defineAsyncComponent(() => VueAntForms.then(res => res.v4));
 
 let installedNaive = false;
 const VueNaiveForm = defineAsyncComponent(async () => {
@@ -285,6 +294,7 @@ export default {
         CodeEditor,
         VueElementForm,
         VueAntForm,
+        VueAntFormV4,
         VueNaiveForm,
         EditorHeader
     },
@@ -299,6 +309,9 @@ export default {
             }, {
                 name: 'Antdv',
                 component: 'VueAntForm'
+            }, {
+                name: 'Antdv（特殊适配antd4，未完整测试）',
+                component: 'VueAntFormV4'
             }, {
                 name: 'Naive',
                 component: 'VueNaiveForm'
@@ -315,7 +328,7 @@ export default {
             return this.$route.query.type;
         },
         isUseLabelWidth() {
-            return this.curVueForm !== 'VueAntForm';
+            return this.curVueForm !== 'VueAntForm' && this.curVueForm !== 'VueAntFormV4';
         },
         trueFormProps() {
             if (!this.formProps) return {};
@@ -437,7 +450,7 @@ export default {
                     inlineFooter: false,
                     labelColSpan: 6,
                     wrapperColSpan: 16,
-                    layoutColumn: 1,
+                    layoutColumn: 2,
                     // defaultSelectFirstOption: false
                 },
             };

diff --git a/packages/lib/vue3/vue3-form-ant/src/index.js b/packages/lib/vue3/vue3-form-ant/src/index.js
@@ -145,10 +145,38 @@ const globalOptions = {
 };
 
 const JsonSchemaForm = createVue3Core(globalOptions);
+const JsonSchemaFormAntdV4 = createVue3Core({
+    ...globalOptions,
+    COMPONENT_MAP: {
+        ...globalOptions.COMPONENT_MAP,
+        formItem: defineComponent({
+            inheritAttrs: false,
+            setup(props, { attrs, slots }) {
+                return () => {
+                    const {
+                        style, class: className, ...originAttrs
+                    } = attrs;
+
+                    return h('div', {
+                        style,
+                        class: className
+                    }, [
+                        h(
+                            globalOptions.COMPONENT_MAP.formItem,
+                            originAttrs,
+                            slots
+                        )
+                    ]);
+                };
+            }
+        })
+    }
+});
 
 export default JsonSchemaForm;
 
 export {
+    JsonSchemaFormAntdV4,
     globalOptions,
     SchemaField,
     getDefaultFormState,

diff --git a/packages/lib/vue3/vue3-form-ant/src/style.css b/packages/lib/vue3/vue3-form-ant/src/style.css
@@ -32,4 +32,15 @@
     .ant-form-item-label > label.ant-form-item-no-colon::after {
         display: none;
     }
+
+
+    /* validateWidget 单独的校验不属于输入框的*/
+    .validateWidget>.ant-form-item{
+        margin-bottom: 0 !important;
+        padding: 0 !important;
+        .formItemErrorBox {
+            padding: 5px 0;
+            position: relative;
+        }
+    }
 }