feat: 添加新的布局'raw'，完善布局嵌套功能

src/components/render/render.js

@@ -88,7 +88,7 @@ export default {
   render(h) {
     const dataObject = makeDataObject()
     const confClone = deepClone(this.conf)
-    const children = []
+    const children = this.$slots.default || []
 
     // 如果slots文件夹存在与当前tag同名的文件，则执行文件中的代码
     mountSlotFlies.call(this, h, confClone, children)

src/views/index/DraggableItem.vue

@@ -3,71 +3,85 @@ import draggable from 'vuedraggable'
 import render from '@/components/render/render'
 
 const components = {
-  itemBtns(h, element, index, parent) {
+  itemBtns(h, currentItem, index, list) {
     const { copyItem, deleteItem } = this.$listeners
     return [
       <span class="drawing-item-copy" title="复制" onClick={event => {
-        copyItem(element, parent); event.stopPropagation()
+        copyItem(currentItem, list); event.stopPropagation()
       }}>
         <i class="el-icon-copy-document" />
       </span>,
       <span class="drawing-item-delete" title="删除" onClick={event => {
-        deleteItem(index, parent); event.stopPropagation()
+        deleteItem(index, list); event.stopPropagation()
       }}>
         <i class="el-icon-delete" />
       </span>
     ]
   }
 }
 const layouts = {
-  colFormItem(h, element, index, parent) {
+  colFormItem(h, currentItem, index, list) {
     const { activeItem } = this.$listeners
-    const config = element.__config__
+    const config = currentItem.__config__
+    const child = renderChildren.apply(this, arguments)
     let className = this.activeId === config.formId ? 'drawing-item active-from-item' : 'drawing-item'
     if (this.formConf.unFocusedComponentBorder) className += ' unfocus-bordered'
     let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null
     if (config.showLabel === false) labelWidth = '0'
     return (
       <el-col span={config.span} class={className}
-        nativeOnClick={event => { activeItem(element); event.stopPropagation() }}>
+        nativeOnClick={event => { activeItem(currentItem); event.stopPropagation() }}>
         <el-form-item label-width={labelWidth}
           label={config.showLabel ? config.label : ''} required={config.required}>
-          <render key={config.renderKey} conf={element} onInput={ event => {
+          <render key={config.renderKey} conf={currentItem} onInput={ event => {
             this.$set(config, 'defaultValue', event)
-          }} />
+          }}>
+            {child}
+          </render>
         </el-form-item>
         {components.itemBtns.apply(this, arguments)}
       </el-col>
     )
   },
-  rowFormItem(h, element, index, parent) {
+  rowFormItem(h, currentItem, index, list) {
     const { activeItem } = this.$listeners
-    const className = this.activeId === element.__config__.formId
+    const config = currentItem.__config__
+    const className = this.activeId === config.formId
       ? 'drawing-row-item active-from-item'
       : 'drawing-row-item'
     let child = renderChildren.apply(this, arguments)
-    if (element.type === 'flex') {
-      child = <el-row type={element.type} justify={element.justify} align={element.align}>
+    if (currentItem.type === 'flex') {
+      child = <el-row type={currentItem.type} justify={currentItem.justify} align={currentItem.align}>
               {child}
             </el-row>
     }
     return (
-      <el-col span={element.__config__.span}>
-        <el-row gutter={element.__config__.gutter} class={className}
-          nativeOnClick={event => { activeItem(element); event.stopPropagation() }}>
-          <span class="component-name">{element.__config__.componentName}</span>
-          <draggable list={element.__config__.children} animation={340} group="componentsGroup" class="drag-wrapper">
+      <el-col span={config.span}>
+        <el-row gutter={config.gutter} class={className}
+          nativeOnClick={event => { activeItem(currentItem); event.stopPropagation() }}>
+          <span class="component-name">{config.componentName}</span>
+          <draggable list={config.children || []} animation={340}
+            group="componentsGroup" class="drag-wrapper">
             {child}
           </draggable>
           {components.itemBtns.apply(this, arguments)}
         </el-row>
       </el-col>
     )
+  },
+  raw(h, currentItem, index, list) {
+    const config = currentItem.__config__
+    const child = renderChildren.apply(this, arguments)
+    return <render key={config.renderKey} conf={currentItem} onInput={ event => {
+      this.$set(config, 'defaultValue', event)
+    }}>
+      {child}
+    </render>
   }
 }
 
-function renderChildren(h, element, index, parent) {
-  const config = element.__config__
+function renderChildren(h, currentItem, index, list) {
+  const config = currentItem.__config__
   if (!Array.isArray(config.children)) return null
   return config.children.map((el, i) => {
     const layout = layouts[el.__config__.layout]
@@ -79,7 +93,7 @@ function renderChildren(h, element, index, parent) {
 }
 
 function layoutIsNotFound() {
-  throw new Error(`没有与${this.element.__config__.layout}匹配的layout`)
+  throw new Error(`没有与${this.currentItem.__config__.layout}匹配的layout`)
 }
 
 export default {
@@ -88,17 +102,17 @@ export default {
     draggable
   },
   props: [
-    'element',
+    'currentItem',
     'index',
     'drawingList',
     'activeId',
     'formConf'
   ],
   render(h) {
-    const layout = layouts[this.element.__config__.layout]
+    const layout = layouts[this.currentItem.__config__.layout]
 
     if (layout) {
-      return layout.call(this, h, this.element, this.index, this.drawingList)
+      return layout.call(this, h, this.currentItem, this.index, this.drawingList)
     }
     return layoutIsNotFound.call(this)
   }

src/views/index/Home.vue

@@ -71,10 +71,10 @@
           >
             <draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup">
               <draggable-item
-                v-for="(element, index) in drawingList"
-                :key="element.renderKey"
+                v-for="(item, index) in drawingList"
+                :key="item.renderKey"
                 :drawing-list="drawingList"
-                :element="element"
+                :current-item="item"
                 :index="index"
                 :active-id="activeId"
                 :form-conf="formConf"
@@ -267,9 +267,9 @@ export default {
     })
   },
   methods: {
-    activeFormItem(element) {
-      this.activeData = element
-      this.activeId = element.__config__.formId
+    activeFormItem(currentItem) {
+      this.activeData = currentItem
+      this.activeId = currentItem.__config__.formId
     },
     onEnd(obj) {
       if (obj.from !== obj.to) {
@@ -294,7 +294,7 @@ export default {
     createIdAndKey(item) {
       const config = item.__config__
       config.formId = ++this.idGlobal
-      config.renderKey = +new Date() // 改变renderKey后可以实现强制更新组件
+      config.renderKey = `${config.formId}${+new Date()}` // 改变renderKey后可以实现强制更新组件
       if (config.layout === 'colFormItem') {
         item.__vModel__ = `field${this.idGlobal}`
       } else if (config.layout === 'rowFormItem') {
@@ -338,14 +338,14 @@ export default {
         }
       )
     },
-    drawingItemCopy(item, parent) {
+    drawingItemCopy(item, list) {
       let clone = deepClone(item)
       clone = this.createIdAndKey(clone)
-      parent.push(clone)
+      list.push(clone)
       this.activeFormItem(clone)
     },
-    drawingItemDelete(index, parent) {
-      parent.splice(index, 1)
+    drawingItemDelete(index, list) {
+      list.splice(index, 1)
       this.$nextTick(() => {
         const len = this.drawingList.length
         if (len) {