结构调整

fengli01 · Jun 7, 2020 · ff12d3f · ff12d3f
1 parent 0e9ef30
commit ff12d3f
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 28 deletions.
diff --git a/src/components/generator/config.js b/src/components/generator/config.js
@@ -157,7 +157,6 @@ export const selectComponents = [
       labelWidth: null,
       tag: 'el-select',
       tagIcon: 'select',
-      defaultValue: undefined,
       layout: 'colFormItem',
       span: 24,
       required: true,
@@ -513,8 +512,7 @@ export const layoutComponents = [
       tagIcon: 'row',
       label: '行容器',
       layoutTree: true,
-      children: [],
-      document: 'https://element.eleme.cn/#/zh-CN/component/layout'
+      document: 'https://element.eleme.cn/#/zh-CN/component/layout#row-attributes'
     },
     type: 'default',
     justify: 'start',
@@ -528,9 +526,8 @@ export const layoutComponents = [
       labelWidth: null,
       tag: 'el-button',
       tagIcon: 'button',
-      defaultValue: undefined,
       span: 24,
-      layout: 'colFormItem',
+      layout: 'layoutItem',
       document: 'https://element.eleme.cn/#/zh-CN/component/button'
     },
     __slot__: {

diff --git a/src/views/index/Home.vue b/src/views/index/Home.vue
@@ -285,18 +285,27 @@ export default {
     cloneComponent(origin) {
       const clone = deepClone(origin)
       const config = clone.__config__
+      config.span = this.formConf.span // 生成代码时，会根据span做精简判断
+      this.createIdAndKey(clone)
+      clone.placeholder !== undefined && (clone.placeholder += config.label)
+      tempActiveData = clone
+      return tempActiveData
+    },
+    createIdAndKey(item) {
+      const config = item.__config__
       config.formId = ++this.idGlobal
-      config.span = this.formConf.span
       config.renderKey = +new Date() // 改变renderKey后可以实现强制更新组件
       if (config.layout === 'colFormItem') {
-        clone.__vModel__ = `field${this.idGlobal}`
-        clone.placeholder !== undefined && (clone.placeholder += config.label)
+        item.__vModel__ = `field${this.idGlobal}`
       } else if (config.layout === 'rowFormItem') {
         config.componentName = `row${this.idGlobal}`
-        config.gutter = this.formConf.gutter
+        !Array.isArray(config.children) && (config.children = [])
+        delete config.label // rowFormItem无需配置label属性
       }
-      tempActiveData = clone
-      return tempActiveData
+      if (Array.isArray(config.children)) {
+        config.children = config.children.map(childItem => this.createIdAndKey(childItem))
+      }
+      return item
     },
     AssembleFormData() {
       this.formData = {
@@ -335,20 +344,6 @@ export default {
       parent.push(clone)
       this.activeFormItem(clone)
     },
-    createIdAndKey(item) {
-      const config = item.__config__
-      config.formId = ++this.idGlobal
-      config.renderKey = +new Date()
-      if (config.layout === 'colFormItem') {
-        item.__vModel__ = `field${this.idGlobal}`
-      } else if (config.layout === 'rowFormItem') {
-        config.componentName = `row${this.idGlobal}`
-      }
-      if (Array.isArray(config.children)) {
-        config.children = config.children.map(childItem => this.createIdAndKey(childItem))
-      }
-      return item
-    },
     drawingItemDelete(index, parent) {
       parent.splice(index, 1)
       this.$nextTick(() => {

diff --git a/src/views/index/RightPanel.vue b/src/views/index/RightPanel.vue
@@ -52,10 +52,10 @@
           <el-form-item v-if="activeData.__config__.span!==undefined" label="表单栅格">
             <el-slider v-model="activeData.__config__.span" :max="24" :min="1" :marks="{12:''}" @change="spanChange" />
           </el-form-item>
-          <el-form-item v-if="activeData.__config__.layout==='rowFormItem'" label="栅格间隔">
+          <el-form-item v-if="activeData.__config__.layout==='rowFormItem'&&activeData.gutter!==undefined" label="栅格间隔">
             <el-input-number v-model="activeData.gutter" :min="0" placeholder="栅格间隔" />
           </el-form-item>
-          <el-form-item v-if="activeData.__config__.layout==='rowFormItem'" label="布局模式">
+          <el-form-item v-if="activeData.__config__.layout==='rowFormItem'&&activeData.type!==undefined" label="布局模式">
             <el-radio-group v-model="activeData.type">
               <el-radio-button label="default" />
               <el-radio-button label="flex" />
@@ -523,7 +523,7 @@
             </el-tree>
           </template>
 
-          <template v-if="activeData.__config__.layout === 'colFormItem'">
+          <template v-if="Array.isArray(activeData.__config__.regList)">
             <el-divider>正则校验</el-divider>
             <div
               v-for="(item, index) in activeData.__config__.regList"