新增和修改时可添加自定义模板

Author: sunhaoxiang

dist/d2-crud.js

@@ -6,19 +6,8 @@
     :element-loading-spinner="loadingOptions ? handleAttribute(loadingOptions.spinner, null) : null"
     :element-loading-background="loadingOptions ? handleAttribute(loadingOptions.background, null) : null"
   >
-    <div class="d2-crud-title" v-if="title || addMode || $slots.headerButton">
-      <!-- <span>{{title}}</span>
-      <div class="fr">
-        <el-button
-          v-if="addMode"
-          :icon="addButton ? handleAttribute(addButton.icon, 'el-icon-plus') : 'el-icon-plus'"
-          v-bind="$d2CrudSize ? Object.assign({ size: $d2CrudSize}, addButton) : addButton"
-          @click="handleAdd"
-        >
-          {{addButton ? handleAttribute(addButton.text, '新增') : '新增'}}
-        </el-button>
-        <slot name="headerButton"></slot>
-      </div> -->
+    <div class="d2-crud-header" v-if="$slots.header">
+      <slot name="header"></slot>
     </div>
     <div class="d2-crud-body">
       <el-table
@@ -797,16 +786,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.fr {
-  float: right;
-}
 .d2-crud {
-  .d2-crud-title {
-    color: #535351;
-    height: 45px;
-    line-height: 45px;
-    font-size: 14px;
-    font-weight: bold;
+  .d2-crud-header {
     border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
   }
   .d2-crud-body {

dist/d2-crud.js.map

@@ -2,32 +2,22 @@ import _forEach from 'lodash.foreach'
 import _clonedeep from 'lodash.clonedeep'
 
 export default {
-  props: {
-    /**
-     * @description 是否显示新增按钮
-     */
-    addMode: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * @description 新增按钮配置
-     */
-    addButton: {
-      type: Object,
-      default: null
-    }
-  },
   methods: {
     /**
      * @description 新增行数据
      */
-    handleAdd () {
+    handleAdd (templage = null) {
       this.formMode = 'add'
       this.isDialogShow = true
-      this.formData = this.addTemplate ? _clonedeep(this.addTemplate) : {}
+      if (templage) {
+        this.formData = _clonedeep(templage)
+        this.addTemplateStorage = _clonedeep(templage)
+      } else {
+        this.formData = this.addTemplate ? _clonedeep(this.addTemplate) : {}
+        this.addTemplateStorage = this.addTemplate ? _clonedeep(this.addTemplate) : {}
+      }
       _forEach(this.formData, (value, key) => {
-        this.formData[key] = this.addTemplate[key].value
+        this.formData[key] = this.addTemplateStorage[key].value
       })
     }
   }

src/d2-crud.vue

@@ -1,11 +1,5 @@
 export default {
   props: {
-    /**
-     * @description 表格标题
-     */
-    title: {
-      default: ''
-    },
     /**
      * @description 表头数据
      */

src/mixin/add.js

@@ -59,7 +59,15 @@ export default {
       /**
        * @description 表单模式
        */
-      formMode: 'edit'
+      formMode: 'edit',
+      /**
+       * @description 新增表单模板暂存
+       */
+      addTemplateStorage: {},
+      /**
+       * @description 修改表单模板暂存
+       */
+      editTemplateStorage: {}
     }
   },
   methods: {

src/mixin/base.js

@@ -16,12 +16,18 @@ export default {
      * @param {Number} index 行所在索引
      * @param {Object} row 行数据
      */
-    handleEdit (index, row) {
+    handleEdit (index, row, templage = null) {
       this.formMode = 'edit'
       this.editDataStorage = _clonedeep(row)
       this.isDialogShow = true
       this.editIndex = index
-      this.formData = this.editTemplate ? _clonedeep(this.editTemplate) : {}
+      if (templage) {
+        this.formData = _clonedeep(templage)
+        this.editTemplateStorage = _clonedeep(templage)
+      } else {
+        this.formData = this.editTemplate ? _clonedeep(this.editTemplate) : {}
+        this.editTemplateStorage = this.editTemplate ? _clonedeep(this.editTemplate) : {}
+      }
       _forEach(this.formData, (value, key) => {
         this.formData[key] = row.hasOwnProperty(key) ? row[key] : ''
       })

src/mixin/dialog.js

@@ -30,14 +30,15 @@ export default {
     /**
      * @description 外部暴露的打开模态框方法
      */
-    showDialog (mode, rowIndex = null) {
+    showDialog ({
+      mode,
+      rowIndex = 0,
+      template = null
+    }) {
       if (mode === 'edit') {
-        if (!rowIndex) {
-          return
-        }
-        this.handleEdit(rowIndex, this.d2CrudData[rowIndex])
+        this.handleEdit(rowIndex, this.d2CrudData[rowIndex], template)
       } else if (mode === 'add') {
-        this.handleAdd()
+        this.handleAdd(template)
       }
     },
     /**

src/mixin/edit.js

@@ -14,9 +14,9 @@ export default {
      */
     handleFormTemplateMode (key) {
       if (this.formMode === 'edit') {
-        return this.editTemplate[key]
+        return this.editTemplateStorage[key]
       } else if (this.formMode === 'add') {
-        return this.addTemplate[key]
+        return this.addTemplateStorage[key]
       }
     }
   }