feat: 新增【重置表单】功能

Author: xiaoluoboding

app/store/global-actions.js

@@ -2,6 +2,10 @@ import types from './mutation-types'
 import Immutable from 'immutable'
 import shortid from 'js-shortid'
 
+const makeAction = type => {
+  return ({ commit }, ...args) => commit(type, ...args)
+}
+
 export default {
   addRow ({ commit, state }, reload) {
     let { layoutSections } = state
@@ -67,7 +71,7 @@ export default {
     let _list = Immutable.fromJS(layoutSections)
     commit(types.UPDATE_LAYOUT_SECTIONS, _list.set(activeSection, newVal).toJS())
   },
-  async delteColComp ({ commit, state, dispatch }, { colIndex, newVal, prop }) {
+  async deleteColComp ({ commit, state, dispatch }, { colIndex, newVal, prop }) {
     let { layoutSections, activeSection } = state
     let _list = Immutable.fromJS(layoutSections)
     console.log(1)
@@ -123,5 +127,6 @@ export default {
         ] })
     }
     commit(types.UPDATE_ACTIVE_PROP, `default_${_propIdx}`)
-  }
+  },
+  resetGlobalStore: makeAction('RESET_GLOBAL_STORE')
 }

app/store/global-mutations.js

@@ -30,5 +30,29 @@ export default {
   },
   [types.UPDATE_FORM_CONTROL] (state, load) {
     state.formControl = Object.assign(state.formControl, load)
+  },
+  [types.RESET_GLOBAL_STORE](state, load) {
+    const originState = {
+      iterationIdx: 0, // 迭代指针
+      layoutSections: [], // schema 信息
+      formModel: {},
+      formOptions: {},
+      formLayout: { // 表单布局
+        gutter: 16,
+        justify: 'start'
+      },
+      formSettings: { // 表单属性
+        labelPosition: 'left',
+        size: 'small',
+        labelWidth: '80px'
+      },
+      formControl: { // 布局控制
+        showGrid: false,
+        showLayout: false
+      },
+      activeSection: 0, // 激活的行数
+      activeProp: '' // 激活的组件prop
+    }
+    state = Object.assign(state, originState)
   }
 }

app/store/mutation-types.js

@@ -7,5 +7,6 @@ export default {
   UPDATE_ITERATION_IDX: 'UPDATE_ITERATION_IDX',
   UPDATE_FORM_SETTING: 'UPDATE_FORM_SETTING',
   UPDATE_FORM_LAYOUT: 'UPDATE_FORM_LAYOUT',
-  UPDATE_FORM_CONTROL: 'UPDATE_FORM_CONTROL'
+  UPDATE_FORM_CONTROL: 'UPDATE_FORM_CONTROL',
+  RESET_GLOBAL_STORE: 'RESET_GLOBAL_STORE'
 }

app/views/form-generator/aside-panel/index.vue

@@ -99,7 +99,7 @@ export default {
       'editRow',
       'deleteRow',
       'changeRow',
-      'delteColComp'
+      'deleteColComp'
     ]),
     checkMove (e) {
       console.log('Future index: ' + e.draggedContext.futureIndex)
@@ -109,7 +109,7 @@ export default {
         isCustom: 'btn-addCol',
         colGrid: element.colGrid
       }
-      this.delteColComp({ colIndex, newVal: oldSection, prop: element.prop })
+      this.deleteColComp({ colIndex, newVal: oldSection, prop: element.prop })
     },
     onAddRow (data) {
       const initVal = data.map((val, idx) => {

app/views/form-generator/config-panel/module/component-panel.vue

@@ -5,15 +5,15 @@
       <figcaption class="component-panel__figcaption">
         <span>通用属性</span>
       </figcaption>
-        <label-layout title="标签名称:">
-          <el-input v-model="editInfo.formItem.label"></el-input>
-        </label-layout>
-        <label-layout title="数据字段:">
-          <el-input v-model="editInfo.prop"></el-input>
-        </label-layout>
-        <label-layout title="栅格数:">
-          <el-input v-model.number="editInfo.colGrid.span"></el-input>
-        </label-layout>
+      <label-layout title="标签名称:">
+        <el-input v-model="editInfo.formItem.label"></el-input>
+      </label-layout>
+      <label-layout title="数据字段:">
+        <el-input v-model="editInfo.prop"></el-input>
+      </label-layout>
+      <label-layout title="栅格数:">
+        <el-input v-model.number="editInfo.colGrid.span"></el-input>
+      </label-layout>
     </fieldset>
     <!-- 定制属性 -->
     <fieldset class="component-panel__fieldset">

app/views/form-generator/dialog/PreviewForm.vue

@@ -19,7 +19,7 @@
           :options="options"
         >
         </schema-form>
-       </el-form>
+      </el-form>
     </el-dialog>
   </div>
 </template>

app/views/form-generator/index.vue

@@ -11,6 +11,7 @@
             <el-button type="warning" size="mini" @click="showSchemaCode = true">生成 Schema</el-button>
             <el-button type="danger" size="mini" @click="showVueCode = true">生成 Vue 代码</el-button>
             <el-button type="success" size="mini"  @click="showResult = true">预览表单</el-button>
+            <el-button size="mini"  @click="resetGlobalStore">重置表单</el-button>
           </div>
         </div>
         <el-form
@@ -132,7 +133,8 @@ export default {
   },
   methods: {
     ...mapActions([
-      'addComponent'
+      'addComponent',
+      'resetGlobalStore'
     ]),
     handleAddComponent (comp, scope) {
       const { rowIndex, colIndex } = scope

docs/.vuepress/config.js

@@ -24,7 +24,7 @@ module.exports = {
           title: '指南',
           collapsable: false,
           children: [
-            '/guide/',
+            '',
             '快速开始',
             '更新日志',
             '在线示例',