支持布局嵌套

example/App.vue

@@ -1,3 +1,4 @@
 <template>
   <AntdDesignForm />
+  <!-- <ElDesignForm /> -->
 </template>

src/config/antd.ts

@@ -1,3 +1,5 @@
+import { makeComponentMap } from '@/utils/makemap'
+
 export interface Rules {
   trigger: string
   enum: string
@@ -370,3 +372,5 @@ export const layoutComponents = [
     }
   }
 ]
+
+export const islayoutComponent = makeComponentMap(layoutComponents)

src/config/element.ts

@@ -1,3 +1,5 @@
+import { makeComponentMap } from '@/utils/makemap'
+
 export interface Rules {
   trigger: string
   enum: string
@@ -362,3 +364,5 @@ export const layoutComponents = [
     }
   }
 ]
+
+export const islayoutComponent = makeComponentMap(layoutComponents)

src/core/antd/AntdDesignForm.vue

@@ -149,7 +149,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, PropType, toRefs, watchEffect } from 'vue'
+import { defineComponent, reactive, PropType, toRefs, watchEffect, provide } from 'vue'
 import { message } from 'ant-design-vue'
 import { defaultsDeep } from 'lodash'
 import CodeEditor from '@/components/CodeEditor.vue'
@@ -176,6 +176,11 @@ export default defineComponent({
     AntdWidgetConfig,
     AntdFormConfig
   },
+  data() {
+    return {
+      disabled: false
+    }
+  },
   props: {
     preview: {
       type: Boolean,
@@ -229,7 +234,7 @@ export default defineComponent({
       antd,
       codeType: CodeType,
       widgetForm: JSON.parse(JSON.stringify(antd.widgetForm)),
-      widgetFormSelect: null,
+      widgetFormSelect: null as any,
       generateFormRef: null as any,
       configTab: 'widget',
       previewVisible: false,

src/core/antd/AntdGenerateForm.vue

@@ -9,55 +9,43 @@
       :labelCol="widgetForm.config.labelCol"
       :hideRequiredMark="widgetForm.config.hideRequiredMark"
     >
-      <template v-for="(element, index) of widgetForm.list">
-        <template v-if="element.type === 'grid'">
-          <a-row
-            type="flex"
-            v-if="element.key"
-            :key="element.key"
-            :gutter="element.options.gutter ?? 0"
-            :justify="element.options.justify"
-            :align="element.options.align"
-          >
-            <a-col
-              v-for="(col, colIndex) of element.columns"
-              :key="colIndex"
-              :span="col.span ?? 0"
-            >
-              <AntdGenerateFormItem
-                v-for="colItem of col.list"
-                v-model:model="model"
-                :key="colItem.key"
-                :element="colItem"
-                :config="data.config"
-                :disabled="disabled"
-              />
-            </a-col>
-          </a-row>
-        </template>
+      <template v-for="(element) of widgetForm.list">
+        <AntdGenerateLayoutForm
+          v-if="islayoutComponent(element.type)"
+          :key="element.key"
+          :element="element"
+        />
         <AntdGenerateFormItem
           v-else
-          v-model:model="model"
           :key="element.key"
-          :element="widgetForm.list[index]"
-          :config="data.config"
-          :disabled="disabled"
+          :element="element"
         />
       </template>
     </a-form>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, reactive, toRefs, watch } from 'vue'
+import {
+  ref,
+  defineComponent,
+  onMounted,
+  provide,
+  reactive,
+  toRefs,
+  watch
+} from 'vue'
 import { message } from 'ant-design-vue'
 import AntdGenerateFormItem from './AntdGenerateFormItem.vue'
+import AntdGenerateLayoutForm from './AntdGenerateLayoutForm.vue'
 import { antd } from '@/config'
+import { islayoutComponent } from '@/config/antd'
 
 export default defineComponent({
   name: 'AntdGenerateForm',
   components: {
-    AntdGenerateFormItem
+    AntdGenerateFormItem,
+    AntdGenerateLayoutForm
   },
   props: {
     data: {
@@ -75,29 +63,43 @@ export default defineComponent({
   setup(props) {
     const state = reactive({
       generateForm: null as any,
-      model: {} as any,
       rules: {} as any,
       widgetForm:
         (props.data && JSON.parse(JSON.stringify(props.data))) ??
         antd.widgetForm
     })
+    const model = ref<any>({})
+
+    provide('model', model)
+    provide('config', props.data.config)
+
+    const disabled = ref<any>(props.disabled)
+    provide('disabled', disabled)
+    watch(
+      () => props.disabled,
+      val => (disabled.value = val)
+    )
+
+    provide('updateModel', (newModel:any) => {
+      model.value = newModel
+    })
 
     const generateModel = (list: any[]) => {
       for (let index = 0; index < list.length; index++) {
-        const model = list[index].model
-        if (!model) {
+        const modelKey = list[index].model
+        if (!modelKey) {
           return
         }
         if (list[index].type === 'grid') {
           list[index].columns.forEach((col: any) => generateModel(col.list))
         } else {
-          if (props.value && Object.keys(props.value).includes(model)) {
-            state.model[model] = props.value[model]
+          if (props.value && Object.keys(props.value).includes(modelKey)) {
+            model.value[modelKey] = props.value[modelKey]
           } else {
-            state.model[model] = list[index].options.defaultValue
+            model.value[modelKey] = list[index].options.defaultValue
           }
 
-          state.rules[model] = list[index].options.rules
+          state.rules[modelKey] = list[index].options.rules
         }
       }
     }
@@ -129,7 +131,7 @@ export default defineComponent({
       val => {
         state.widgetForm =
           (val && JSON.parse(JSON.stringify(val))) ?? antd.widgetForm
-        state.model = {}
+        model.value = {}
         state.rules = {}
         generateModel(state.widgetForm.list)
         generateOptions(state.widgetForm.list)
@@ -148,7 +150,7 @@ export default defineComponent({
           .validate()
           .then((validate: boolean) => {
             if (validate) {
-              resolve(state.model)
+              resolve(model.value)
             } else {
               message.error('验证失败')
             }
@@ -164,9 +166,11 @@ export default defineComponent({
     }
 
     return {
+      model,
       ...toRefs(state),
       getData,
-      reset
+      reset,
+      islayoutComponent
     }
   }
 })

src/core/antd/AntdGenerateFormItem.vue

@@ -243,7 +243,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+import { computed, defineComponent, inject, PropType } from 'vue'
 import SvgIcon from '@/components/SvgIcon.vue'
 import RichTextEditor from '@/components/RichTextEditor.vue'
 import { WidgetForm } from '@/config/antd'
@@ -255,34 +255,29 @@ export default defineComponent({
     RichTextEditor
   },
   props: {
-    config: {
-      type: Object as PropType<WidgetForm['config']>,
-      required: true
-    },
     element: {
       type: Object,
       required: true
-    },
-    model: {
-      type: Object,
-      required: true
-    },
-    disabled: {
-      type: Boolean,
-      required: true
     }
   },
-  emits: ['update:model'],
-  setup(props, context) {
+  setup(props) {
+    const model = inject<any>('model')
+    const updateModel = inject<any>('updateModel')
+    const disabled = inject<any>('disabled')
+
     const data = computed({
-      get: () => props.model[props.element.model],
+      get: () => {
+        return model.value[props.element.model]
+      },
       set: val => {
-        const model = JSON.parse(JSON.stringify(props.model))
-        model[props.element.model] = val
-        context.emit('update:model', model)
+        const modelTmp = JSON.parse(JSON.stringify(model.value))
+        modelTmp[props.element.model] = val
+        updateModel(modelTmp)
       }
     })
 
+    const config = inject<PropType<WidgetForm['config']>>('config')
+
     const handleFilterOption = (input: string, option: { label: string }) =>
       option.label.toLowerCase().includes(input)
 
@@ -292,8 +287,10 @@ export default defineComponent({
 
     return {
       data,
+      config,
       handleFilterOption,
-      handleUploadChange
+      handleUploadChange,
+      disabled
     }
   }
 })

src/core/antd/AntdGenerateLayoutForm.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <template v-if="element.type === 'grid'">
+      <a-row
+        type="flex"
+        v-if="element.key"
+        :key="element.key"
+        :gutter="element.options.gutter ?? 0"
+        :justify="element.options.justify"
+        :align="element.options.align"
+      >
+        <a-col
+          v-for="(col, colIndex) of element.columns"
+          :key="colIndex"
+          :span="col.span ?? 0"
+        >
+          <template v-for="colItem of col.list">
+            <AntdGenerateLayoutForm
+              v-if="islayoutComponent(colItem.type)"
+              :key="colItem.key"
+              :element="colItem"
+            />
+            <AntdGenerateFormItem
+              v-else
+              :key="colItem.key"
+              :element="colItem"
+            />
+          </template>
+        </a-col>
+      </a-row>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import AntdGenerateFormItem from './AntdGenerateFormItem.vue'
+import { islayoutComponent } from '@/config/antd'
+
+export default defineComponent({
+  name: 'AntdGenerateLayoutForm',
+  components: {
+    AntdGenerateFormItem
+  },
+  props: {
+    element: {
+      type: Object,
+      required: true
+    }
+  },
+  setup() {
+    return {
+      islayoutComponent
+    }
+  }
+})
+</script>
+
+<style>
+
+</style>