From f99ad57357db78ba3fc4f31aaee6a61e17d1a49b Mon Sep 17 00:00:00 2001
From: unknown <liukai153@360buyad.local>
Date: Thu, 19 Sep 2019 18:00:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E/=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/main.js                                   |   4 +-
 .../form-generator/aside-panel/index.vue      | 152 +++++++++---------
 .../aside-panel/module/row-select.vue         | 111 +++++++++++++
 .../form-generator/config-panel/index.vue     |   5 +-
 .../config-panel/module/component-panel.vue   |   2 +-
 app/views/form-generator/index.vue            |  95 ++++++-----
 app/views/form-generator/main-panel/index.vue |  53 ++++++
 package-lock.json                             |   5 +
 package.json                                  |   1 +
 src/index.js                                  |   6 +-
 src/packages/SchemaForm.vue                   |  71 ++------
 src/packages/SchemaFormItem.vue               |  56 +++++++
 src/packages/mixins/layout-mixin.js           |  22 +++
 vue.config.js                                 |   1 +
 14 files changed, 409 insertions(+), 175 deletions(-)
 create mode 100644 app/views/form-generator/aside-panel/module/row-select.vue
 create mode 100644 app/views/form-generator/main-panel/index.vue
 create mode 100644 src/packages/SchemaFormItem.vue

diff --git a/app/main.js b/app/main.js
index 7084d62..886f695 100644
--- a/app/main.js
+++ b/app/main.js
@@ -12,7 +12,7 @@ import 'element-ui/lib/theme-chalk/index.css'
 import 'codemirror/theme/cobalt.css'
 import 'codemirror/mode/javascript/javascript.js'
 
-import SchemaForm, { SchemaFormJsoneditor, SchemaFormQuill, SchemaFormCodemirror } from '../src/index'
+import SchemaForm, { SchemaFormItem, SchemaFormJsoneditor, SchemaFormQuill, SchemaFormCodemirror } from '../src/index'
 
 Vue.use(ElementUI, {
   size: 'small'
@@ -21,6 +21,8 @@ Vue.component('SchemaFormJsoneditor', SchemaFormJsoneditor)
 Vue.component('SchemaFormQuill', SchemaFormQuill)
 
 Vue.component('SchemaFormCodemirror', SchemaFormCodemirror)
+Vue.component('SchemaFormItem', SchemaFormItem)
+
 Vue.use(SchemaForm, {
   'codemirror': {
     cmOptions: {
diff --git a/app/views/form-generator/aside-panel/index.vue b/app/views/form-generator/aside-panel/index.vue
index 3e4b80a..ad76a98 100644
--- a/app/views/form-generator/aside-panel/index.vue
+++ b/app/views/form-generator/aside-panel/index.vue
@@ -1,27 +1,11 @@
 <template>
   <el-card class="aside-layout">
-    <label for="aside-layout" class="aside-layout__label">选择布局</label>
-    <el-select v-model="activeLayout" placeholder="请选择" @change="handleChangeLayout">
-      <el-option
-        v-for="(layout, index) in rowLayouts"
-        :key="index"
-        :label="index+''"
-        :value="layout">
-        <svg fill="#BEC9D6">
-          <template v-for="(item, idx) in layout">
-            <rect
-              :key="idx"
-              :width="`${getRectWidth(layout)}%`"
-              height="20"
-              y="5"
-              rx="5"
-              ry="5"
-              :x="idx === 0 ? '0%' : `${(getRectWidth(layout) + 3) * idx}%`"
-            />
-          </template>
-        </svg>
-      </el-option>
-    </el-select>
+    <label for="aside-layout" class="aside-layout__label">布局操作</label>
+    <section class="aside-layout__rowEdit">
+      <row-select type="addRow" @editRow="onAddRow"/>
+      <row-select type="editRow" :activeLayOut="activeLayOut" @editRow="onEditRow"/>
+      <row-select type="deleteRow" @deleteRow="onDeleteRow"/>
+    </section>
     <div class="aside-layout__colitems-wrap">
       <draggable
         v-model="colitemsGroup"
@@ -37,6 +21,7 @@
             class="aside-layout__colitem"
             v-for="(element, idx) in colitemsGroup"
             :key="element.prop || idx"
+            :class="{'aside-layout__colitem--active': element.prop === activeProp}"
           >
             <template v-if="element.prop">
               <span>{{ element.prop }}</span>
@@ -48,68 +33,31 @@
             </template>
           </li>
         </transition-group>
-        <div
-          slot="footer"
-          class="aside-layout__colitem-action"
-          role="group"
-          key="footer"
-        >
-          <div class="colitem-action__btn">
-            <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAddColumn" circle></el-button>
-          </div>
-          <div class="colitem-action__label"><span>新增列</span></div>
-        </div>
       </draggable>
     </div>
   </el-card>
 </template>
 
 <script>
+
 import Draggable from 'vuedraggable'
+import RowSelect from './module/row-select'
 
 export default {
   name: 'AsidePanel',
   components: {
-    Draggable
+    Draggable,
+    RowSelect
+  },
+  props: {
+    activeSection: Number, // 激活行index
+    activeProp: String // 激活的prop
   },
   inject: ['fg'],
   data () {
     return {
       // aside
-      activeSection: 0,
       activeLayout: [],
-      layouts: [
-        {
-          idx: 0,
-          span: [24]
-        },
-        {
-          idx: 1,
-          span: [12, 12]
-        }
-      ],
-      rowLayouts: [
-        [24],
-        [12, 12],
-        [8, 8, 8],
-        [6, 6, 6, 6],
-        [5, 5, 5, 5, 5],
-        [4, 4, 4, 4, 4, 4],
-        [9, 15],
-        [15, 9],
-        [8, 16],
-        [16, 8],
-        [6, 18],
-        [18, 6],
-        [6, 12, 6],
-        [4, 16, 4],
-        [6, 6, 12],
-        [12, 6, 6],
-        [4, 4, 16],
-        [16, 4, 4],
-        [4, 4, 4, 12],
-        [12, 4, 4, 4]
-      ],
       dragging: false,
       dragOptions: {
         animation: 200,
@@ -122,18 +70,17 @@ export default {
   computed: {
     colitemsGroup: {
       get  () {
-        return this.fg.layoutSections[this.activeSection]
+        return this.fg.layoutSections[this.activeSection] || []
       },
       set (val) {
         this.fg.layoutSections.splice(this.activeSection, 1, val)
       }
+    },
+    activeLayOut () {
+      return this.colitemsGroup.map(item => item.colGrid.span)
     }
   },
   methods: {
-    getRectWidth (item) {
-      const len = item.length
-      return (100 - len * 3) / len
-    },
     handleChangeLayout (data) {
       const initVal = data.map((val, idx) => {
         return {
@@ -146,10 +93,6 @@ export default {
     checkMove (e) {
       console.log('Future index: ' + e.draggedContext.futureIndex)
     },
-    handleAddColumn () {
-      // TODO 处理添加列业务逻辑
-      console.log('add column')
-    },
     handleRemoveColumn (element, colIndex) {
       const oldSection = {
         isCustom: 'btn-addCol',
@@ -157,14 +100,68 @@ export default {
       }
       this.fg.layoutSections[this.activeSection].splice(colIndex, 1, oldSection)
       this.$emit('deleteComp', element.prop)
+    },
+    onAddRow (data) {
+      const initVal = data.map((val, idx) => {
+        return {
+          colGrid: { span: val },
+          isCustom: 'btn-addCol'
+        }
+      })
+      this.fg.layoutSections.push(initVal)
+      let _activeSection = this.fg.layoutSections.length - 1
+      this.$emit('update:activeSection', _activeSection)
+      this.$emit('deleteComp', '')
+    },
+    onEditRow (data) {
+      let _result = data.map((grid, idx) => {
+        let _cur = this.colitemsGroup[idx]
+        if (_cur) {
+          return { ..._cur, colGrid: { span: grid } }
+        }
+        return { colGrid: { span: grid }, isCustom: 'btn-addCol' }
+      })
+      // 删除冗余的prop
+      if (data.length < this.colitemsGroup.length) {
+        let _delPart = this.colitemsGroup.slice(data.length)
+        _delPart.forEach(grid => {
+          this.delModuleAndOption(grid)
+        })
+      }
+      this.fg.layoutSections.splice(this.activeSection, 1, _result)
+      this.$emit('deleteComp', '')
+    },
+    delModuleAndOption (grid) {
+      //  删除module
+      if (this.fg.formModel.hasOwnProperty(grid.prop)) this.$delete(this.fg.formModel, grid.prop)
+      // 删除option
+      if (this.fg.formOptions.hasOwnProperty(grid.prop)) this.$delete(this.fg.formModel, grid.prop)
+    },
+    onDeleteRow () {
+      this.colitemsGroup.forEach(grid => {
+        this.delModuleAndOption(grid)
+      })
+      let _activeSection = this.activeSection === 0 ? 0 : this.activeSection - 1
+      this.fg.layoutSections.splice(this.activeSection, 1)
+      this.$emit('update:activeSection', _activeSection)
+      this.$emit('deleteComp', '')
     }
   }
 }
 </script>
 
 <style lang="less" scoped>
+@grey: #cfcbcb;
 .aside-layout {
   height: 800px;
+  &__rowEdit{
+    margin-bottom:12px;
+    display: flex;
+    justify-content: space-between;
+    // & > *:not(:last-child){
+    //   margin-right: 20px;
+    // }
+  }
   &__label {
     display: block;
     margin-bottom: 5px;
@@ -187,6 +184,9 @@ export default {
     position: relative;
     text-align: center;
     line-height: 1.5em;
+    &--active{
+      box-shadow: 0 0 10px @grey;
+    }
     .colitem-icon {
       display: inline-block;
       position: absolute;
diff --git a/app/views/form-generator/aside-panel/module/row-select.vue b/app/views/form-generator/aside-panel/module/row-select.vue
new file mode 100644
index 0000000..feaea24
--- /dev/null
+++ b/app/views/form-generator/aside-panel/module/row-select.vue
@@ -0,0 +1,111 @@
+<template>
+  <section>
+    <div class="row-select" v-if="type === 'deleteRow'">
+      <el-button type="primary" size="mini" icon="el-icon-plus" circle @click="$emit('deleteRow')"></el-button>
+      <div class="row-select__des">{{des}}</div>
+    </div>
+    <el-dropdown trigger="click" @command="handleCommand" v-else>
+      <div class="row-select">
+        <el-button type="primary" size="mini" icon="el-icon-plus" circle></el-button>
+        <div class="row-select__des">{{des}}</div>
+      </div>
+      <el-dropdown-menu slot="dropdown">
+        <div style="overflow-y:auto;max-height:200px">
+          <el-dropdown-item
+            v-for="(layout, index) in activeRowLayouts"
+            :key="index"
+            :command="layout">
+            <svg fill="#BEC9D6"  height="26">
+              <template v-for="(item, idx) in layout">
+                <rect
+                  :key="idx"
+                  :width="`${getRectWidth(layout)}%`"
+                  height="20"
+                  y="5"
+                  rx="5"
+                  ry="5"
+                  :x="idx === 0 ? '0%' : `${(getRectWidth(layout) + 3) * idx}%`"
+                />
+              </template>
+            </svg>
+          </el-dropdown-item>
+        </div>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </section>
+</template>
+
+<script>
+import isEqual from 'lodash.isequal'
+export default {
+  inject: ['fg'],
+  props: {
+    type: {
+      type: String // addRow editRow deleteRow
+    },
+    activeLayOut: { // 当前活跃的状态
+      type: Array
+    }
+  },
+  data () {
+    return {
+      rowLayouts: [
+        [24],
+        [12, 12],
+        [8, 8, 8],
+        [6, 6, 6, 6],
+        [5, 5, 5, 5, 5],
+        [4, 4, 4, 4, 4, 4],
+        [9, 15],
+        [15, 9],
+        [8, 16],
+        [16, 8],
+        [6, 18],
+        [18, 6],
+        [6, 12, 6],
+        [4, 16, 4],
+        [6, 6, 12],
+        [12, 6, 6],
+        [4, 4, 16],
+        [16, 4, 4],
+        [4, 4, 4, 12],
+        [12, 4, 4, 4]
+      ]
+    }
+  },
+  computed: {
+    des () {
+      let _des = { addRow: '新增行', editRow: '编辑列', deleteRow: '删除行' }
+      return _des[this.type]
+    },
+    activeRowLayouts () {
+      if (!this.activeLayOut) return this.rowLayouts
+      return this.rowLayouts.filter(item => !isEqual(item, this.activeLayOut))
+    }
+  },
+  methods: {
+    getRectWidth (item) {
+      const len = item.length
+      return (100 - len * 3) / len
+    },
+    handleCommand (data) {
+      this.$emit('editRow', data)
+    },
+    onDelete () {
+      console.log('执行')
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.row-select{
+  display: inline-block;
+  text-align: center;
+  padding: 0 5px;
+  &__des{
+    font-size:12px;
+    margin-top:8px;
+  }
+}
+</style>
diff --git a/app/views/form-generator/config-panel/index.vue b/app/views/form-generator/config-panel/index.vue
index cf64b87..c692d51 100644
--- a/app/views/form-generator/config-panel/index.vue
+++ b/app/views/form-generator/config-panel/index.vue
@@ -59,7 +59,7 @@
         </fieldset>
       </el-tab-pane>
       <el-tab-pane label="组件属性" name="componentSetting">
-        <component-panel :editProp.sync="editProp"/>
+        <component-panel :editProp.sync="editProp" @success="onClearProp"/>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -83,6 +83,9 @@ export default {
     editCompAttr (prop) {
       this.editProp = prop || ''
       this.activeTab = 'componentSetting'
+    },
+    onClearProp () {
+      this.$emit('clearProp')
     }
   }
 }
diff --git a/app/views/form-generator/config-panel/module/component-panel.vue b/app/views/form-generator/config-panel/module/component-panel.vue
index fc3c1e4..f671126 100644
--- a/app/views/form-generator/config-panel/module/component-panel.vue
+++ b/app/views/form-generator/config-panel/module/component-panel.vue
@@ -89,7 +89,7 @@ export default {
       return true
     },
     reset () {
-      this.$emit('update:editProp', '')
+      this.$emit('success')
       this.lastProp = ''
       this.editInfo = {
         formItem: {}
diff --git a/app/views/form-generator/index.vue b/app/views/form-generator/index.vue
index ba55dd6..8232e1c 100644
--- a/app/views/form-generator/index.vue
+++ b/app/views/form-generator/index.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="form-generator">
     <aside class="form-generator__aside">
-      <aside-panel @deleteComp="onDeleteComp"/>
+      <aside-panel
+        :activeSection.sync="activeSection"
+        :activeProp="activeProp"
+        @deleteComp="onDeleteComp"
+      />
     </aside>
     <main class="form-generator__main">
       <el-card class="main-layout">
@@ -10,12 +14,17 @@
           :label-position="formSettings.labelPosition"
           :size="formSettings.size"
           label-width="80px">
-          <schema-form
+          <main-panel
             :module="formModel"
             :schema="layoutSections"
             :options="formOptions"
-            :layout="formLayout">
-            <template #default="scope">
+            :layout="formLayout"
+            :activeSection="activeSection"
+            :activeProp="activeProp"
+            @changActiveRow="changActiveRow"
+            @changeActiveProp="changeActiveProp"
+          >
+            <template #moduleEdit="scope">
               <!-- 自定义 form item -->
               <div class="schema-form-item schema-form-item--custom">
                 <el-popover
@@ -35,32 +44,24 @@
                   <el-button type="primary" size="mini" icon="el-icon-plus" circle slot="reference"/>
                 </el-popover>
                 <template v-else>
-                  <span class="btn-removeCol">
-                    <el-button
-                      type="primary"
-                      size="mini"
-                      icon="el-icon-delete"
-                      circle
-                      @click="handleRemoveComponent(scope)"
-                    />
-                    <el-button
-                      type="primary"
-                      size="mini"
-                      icon="el-icon-edit"
-                      circle
-                      @click="handleEditComponent(scope)"
-                    />
-                  </span>
+                  <el-button
+                    type="primary"
+                    class="btn-removeCol"
+                    size="mini"
+                    icon="el-icon-delete"
+                    circle
+                    @click="handleRemoveComponent(scope)"
+                  />
                 </template>
               </div>
             </template>
-          </schema-form>
+          </main-panel>
         </el-form>
       </el-card>
     </main>
     <section class="form-generator__config-panel">
       <el-card class="config-panel-layout">
-        <config-panel ref="configPanel"/>
+        <config-panel @clearProp="onClearProp" ref="configPanel"/>
       </el-card>
     </section>
   </div>
@@ -69,13 +70,15 @@
 <script>
 import AsidePanel from './aside-panel'
 import ConfigPanel from './config-panel'
+import MainPanel from './main-panel'
 import { BASIC_COMPONENTS } from '@/constant/formGenerator'
 
 export default {
   name: 'FormGenerator',
   components: {
     AsidePanel,
-    ConfigPanel
+    ConfigPanel,
+    MainPanel
   },
   provide () {
     return {
@@ -98,7 +101,9 @@ export default {
         labelPosition: 'left',
         size: 'small'
       },
-      orderRecord: 0 // 每次生成向上迭代
+      orderRecord: 0, // 每次生成向上迭代
+      activeSection: 0, // 激活的行数
+      activeProp: '' // 激活的组件prop
     }
   },
   methods: {
@@ -142,18 +147,32 @@ export default {
         colGrid: col.colGrid
       }
       this.layoutSections[rowIndex].splice(colIndex, 1, oldSection)
-      this.onCompEdit('')
-    },
-    handleEditComponent ({ col }) {
-      this.onCompEdit(col.prop)
+      this.onDeleteComp(col.prop)
     },
-    onDeleteComp () {
+    onDeleteComp (prop) {
+      if (prop) {
+        //  删除module
+        if (prop && this.formModel.hasOwnProperty(prop)) this.$delete(this.formModel, prop)
+        // 删除option
+        if (prop && this.formOptions.hasOwnProperty(prop)) this.$delete(this.formOptions, prop)
+      }
       this.onCompEdit('')
     },
     onCompEdit (prop) {
       this.$nextTick(() => {
+        this.activeProp = prop
         this.$refs.configPanel.editCompAttr(prop)
       })
+    },
+    changActiveRow (rowIndex) {
+      this.activeSection = rowIndex
+      this.onCompEdit('')
+    },
+    changeActiveProp (prop) {
+      this.onCompEdit(prop)
+    },
+    onClearProp () {
+      this.activeProp = ''
     }
   }
 }
@@ -203,16 +222,6 @@ export default {
       align-items: center;
       margin: -2px;
       padding: 20px;
-      transition-duration: .33s;
-      transition-property: box-shadow;
-      box-shadow:
-        inset 0 0 0 2px transparent,
-        0 0 1px rgba(0, 0, 0, 0);
-      &:hover {
-        box-shadow:
-          inset 0 0 0 2px @yellow,
-          0 0 1px rgba(0, 0, 0, 0);
-      }
       .el-col {
         padding: 20px;
         transition: .33s all;
@@ -227,8 +236,16 @@ export default {
             inset 0 0 0 2px @pink,
             0 0 1px rgba(0, 0, 0, 0);
         }
+        &--active{
+           box-shadow:
+            inset 0 0 0 2px @pink,
+            0 0 1px rgba(0, 0, 0, 0);
+        }
       }
     }
+    &__row--active.el-row{
+       box-shadow: 0 0 10px #cfcbcb;
+    }
   }
   .schema-form-item--custom {
     .btn-removeCol {
diff --git a/app/views/form-generator/main-panel/index.vue b/app/views/form-generator/main-panel/index.vue
new file mode 100644
index 0000000..e0b80f4
--- /dev/null
+++ b/app/views/form-generator/main-panel/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="schema-form">
+    <el-row
+      class="schema-form__row"
+      v-bind="layout"
+      v-for="(row, rowIndex) in formatedSchema"
+      :class="{'schema-form__row--active': rowIndex === activeSection}"
+      :key="rowIndex"
+      @click.native.self="changActiveRow(rowIndex)"
+    >
+      <template v-for="(col, colIndex) in row">
+        <el-col
+          v-bind="col.colGrid"
+          v-if="!col.hide"
+          :key="colIndex"
+          :class="{'el-col--active': activeProp === col.prop}"
+          @click.native="changeActiveProp(rowIndex, col)"
+        >
+          <slot name="moduleEdit" :col="col" :rowIndex="rowIndex" :colIndex="colIndex"></slot>
+          <!-- 具体组件的配置项目 -->
+          <schema-form-item
+            v-bind="col.formItem"
+            :prop="col.prop"
+            :col="col"
+            :module="module"
+            :options="options"
+            v-on="$listeners"
+          />
+        </el-col>
+      </template>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { LayoutMixin } from '@lib/index.js'
+export default {
+  mixins: [LayoutMixin],
+  props: {
+    activeSection: Number, // 激活行数
+    activeProp: String
+  },
+  methods: {
+    changActiveRow (rowIndex) {
+      this.$emit('changActiveRow', rowIndex)
+    },
+    async changeActiveProp (rowIndex, { prop }) {
+      await this.$emit('changActiveRow', rowIndex)
+      this.$emit('changeActiveProp', prop || '')
+    }
+  }
+}
+</script>
diff --git a/package-lock.json b/package-lock.json
index f89d6e8..6124b9c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7343,6 +7343,11 @@
       "integrity": "sha512-3j8wdDzYuWO3lM3Reg03MuQR957t287Rpcxp1njpEa8oDrikb+FwGdW3n+FELh/A6qib6yPit0j/pv9G/yeAqA==",
       "dev": true
     },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
+    },
     "lodash.kebabcase": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
diff --git a/package.json b/package.json
index bc91bd2..3c5c801 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "element-ui": "^2.11.1",
     "jsoneditor": "^7.0.1",
     "lodash.clonedeep": "^4.5.0",
+    "lodash.isequal": "^4.5.0",
     "normalize.css": "^8.0.1",
     "vue": "^2.6.10",
     "vue-codemirror": "^4.0.6",
diff --git a/src/index.js b/src/index.js
index 1866cc9..17fab2c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -17,8 +17,10 @@ import SchemaFormProgress from './packages/components/SchemaFormProgress.vue'
 import SchemaFormJsoneditor from './packages/components/SchemaFormJsoneditor.vue'
 import SchemaFormQuill from './packages/components/SchemaFormQuill.vue'
 import SchemaFormCodemirror from './packages/components/SchemaFormCodemirror.vue'
+import SchemaFormItem from './packages/SchemaFormItem'
 
 import FormMixin from './packages/mixins/form-mixin'
+import LayoutMixin from './packages/mixins/layout-mixin'
 
 const components = [
   SchemaForm,
@@ -52,7 +54,9 @@ export {
   FormMixin,
   SchemaFormJsoneditor,
   SchemaFormQuill,
-  SchemaFormCodemirror
+  SchemaFormCodemirror,
+  SchemaFormItem,
+  LayoutMixin
 }
 
 if (typeof window !== 'undefined' && window.Vue) {
diff --git a/src/packages/SchemaForm.vue b/src/packages/SchemaForm.vue
index 8429625..cb0ea28 100644
--- a/src/packages/SchemaForm.vue
+++ b/src/packages/SchemaForm.vue
@@ -8,24 +8,17 @@
     >
       <template v-for="(col, colIndex) in row">
         <el-col v-bind="col.colGrid" v-if="!col.hide" :key="colIndex">
-          <slot :col="col" :rowIndex="rowIndex" :colIndex="colIndex"></slot>
           <slot v-if="col.slot" :name="col.slot"></slot>
           <template v-else>
-            <el-form-item :prop="col.prop" v-bind="col.formItem">
-              <slot :name="col.frontSlot" v-if="col.frontSlot"></slot>
-              <component
-                v-bind="col.attrs"
-                v-on="$listeners"
-                :is="getComponentName(col.type)"
-                :prop="col.prop"
-                :value.sync="module[col.prop]"
-                :modifier="col.modifier"
-                :dynamicAttrs="col.dynamicAttrs"
-                :onEvents="col.on"
-                :options="options[col.prop]"
-              />
-              <slot :name="col.rearSlot" v-if="col.rearSlot"></slot>
-            </el-form-item>
+            <!-- 具体组件的配置项目 -->
+            <schema-form-item
+              v-bind="col.formItem"
+              :prop="col.prop"
+              :col="col"
+              :module="module"
+              :options="options"
+              v-on="$listeners"
+            />
           </template>
         </el-col>
       </template>
@@ -35,53 +28,16 @@
 
 <script>
 import LayoutMixin from './mixins/layout-mixin'
+import SchemaFormItem from './SchemaFormItem'
 
 export default {
   name: 'SchemaForm',
   mixins: [LayoutMixin],
-  props: {
-    layout: { // 关于el-row 的拓展
-      type: Object,
-      default () { return {} }
-    },
-    schema: { // 表单的格局
-      type: Array,
-      required: true,
-      validator (val) {
-        return val.every(arr => Array.isArray(arr) && arr.length > 0)
-      }
-    },
-    module: { // 绑定的value值
-      type: Object,
-      required: true,
-      default () { return {} }
-    },
-    options: { // 多选值绑定的陪选项目
-      type: Object,
-      default () { return {} }
-    }
-  },
-  data () {
-    return {
-      builtInNames: ['input', 'select', 'radio', 'datepicker',
-        'cascader', 'placeholder', 'checkbox', 'slider', 'timeselect', 'jsoneditor', 'quill', 'codemirror',
-        'rate', 'switch', 'colorpicker', 'tags', 'progress']
-    }
+  components: {
+    SchemaFormItem
   },
   mounted () {
     console.log(this.$slots)
-  },
-  methods: {
-    // 组件名称
-    getComponentName (type) {
-      if (this.builtInNames.includes(type)) {
-        // 内置组件
-        return 'schema-form-' + type
-      } else {
-        // 外部组件
-        return type
-      }
-    }
   }
 }
 </script>
@@ -97,5 +53,8 @@ export default {
   .el-cascader{
     width: 100%;
   }
+  .el-date-editor.el-input{
+    width:100%;
+  }
 }
 </style>
diff --git a/src/packages/SchemaFormItem.vue b/src/packages/SchemaFormItem.vue
new file mode 100644
index 0000000..87420ca
--- /dev/null
+++ b/src/packages/SchemaFormItem.vue
@@ -0,0 +1,56 @@
+<template>
+  <el-form-item :prop="col.prop" v-bind="col.formItem">
+    <slot :name="col.frontSlot" v-if="col.frontSlot"></slot>
+    <component
+      v-bind="col.attrs"
+      v-on="$listeners"
+      :is="getComponentName(col.type)"
+      :prop="col.prop"
+      :value.sync="module[col.prop]"
+      :modifier="col.modifier"
+      :dynamicAttrs="col.dynamicAttrs"
+      :onEvents="col.on"
+      :options="options[col.prop]"
+    />
+    <slot :name="col.rearSlot" v-if="col.rearSlot"></slot>
+  </el-form-item>
+</template>
+
+<script>
+export default {
+  props: {
+    module: { // 绑定的value值
+      type: Object
+    },
+    options: { // 多选值绑定的陪选项目
+      type: Object
+    },
+    col: {
+      type: Object
+    }
+  },
+  data () {
+    return {
+      builtInNames: ['input', 'select', 'radio', 'datepicker',
+        'cascader', 'placeholder', 'checkbox', 'slider', 'timeselect', 'jsoneditor', 'quill', 'codemirror',
+        'rate', 'switch', 'colorpicker', 'tags', 'progress']
+    }
+  },
+  methods: {
+    // 组件名称
+    getComponentName (type) {
+      if (this.builtInNames.includes(type)) {
+        // 内置组件
+        return 'schema-form-' + type
+      } else {
+        // 外部组件
+        return type
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/packages/mixins/layout-mixin.js b/src/packages/mixins/layout-mixin.js
index 4519b10..4da9cc3 100644
--- a/src/packages/mixins/layout-mixin.js
+++ b/src/packages/mixins/layout-mixin.js
@@ -1,5 +1,27 @@
 import cloneDeep from 'lodash.clonedeep'
 export default {
+  props: {
+    layout: { // 关于el-row 的拓展
+      type: Object,
+      default () { return {} }
+    },
+    schema: { // 表单的格局
+      type: Array,
+      required: true,
+      validator (val) {
+        return val.every(arr => Array.isArray(arr) && arr.length > 0)
+      }
+    },
+    module: { // 绑定的value值
+      type: Object,
+      required: true,
+      default () { return {} }
+    },
+    options: { // 多选值绑定的陪选项目
+      type: Object,
+      default () { return {} }
+    }
+  },
   computed: {
     formatedSchema () {
       let _schema = cloneDeep(this.schema)
diff --git a/vue.config.js b/vue.config.js
index 32d6772..791f939 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -8,6 +8,7 @@ const setChainWebpack = config => {
   // 修改默认目录简写
   config.resolve.alias
     .set('@', path.resolve('app'))
+    .set('@lib', resolve('src'))
   // 添加对 app 目录的支持
   config.module
     .rule('js')