对树形表格的多选做了简单处理

src/components/Crud/CRUD.operation.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="crud-opts">
     <span class="crud-opts-left">
+      <!--左侧插槽-->
+      <slot name="left" />
       <el-button
+        v-if="crud.optShow.add"
         v-permission="permission.add"
         class="filter-item"
         size="mini"
@@ -12,6 +15,7 @@
         新增
       </el-button>
       <el-button
+        v-if="crud.optShow.edit"
         v-permission="permission.edit"
         class="filter-item"
         size="mini"
@@ -23,18 +27,21 @@
         修改
       </el-button>
       <el-button
+        v-if="crud.optShow.del"
         slot="reference"
         v-permission="permission.del"
         class="filter-item"
         type="danger"
         icon="el-icon-delete"
         size="mini"
+        :loading="crud.delAllLoading"
         :disabled="crud.selections.length === 0"
         @click="toDelete(crud.selections)"
       >
         删除
       </el-button>
       <el-button
+        v-if="crud.optShow.download"
         :loading="crud.downloadLoading"
         class="filter-item"
         size="mini"
@@ -42,6 +49,8 @@
         icon="el-icon-download"
         @click="crud.doExport"
       >导出</el-button>
+      <!--右侧-->
+      <slot name="right" />
     </span>
     <el-button-group class="crud-opts-right">
       <el-button
@@ -97,7 +106,7 @@ export default {
   props: {
     permission: {
       type: Object,
-      required: true
+      default: null
     }
   },
   data() {
@@ -116,6 +125,7 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
+        this.crud.delAllLoading = true
         if (datas.length === 1) {
           this.crud.doDelete(datas[0])
         } else {

src/components/Crud/UD.operation.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
-    <el-button v-permission="permission.edit" size="mini" type="primary" icon="el-icon-edit" @click="crud.toEdit(data)" />
+    <el-button v-permission="permission.edit" :disabled="disabledEdit" size="mini" type="primary" icon="el-icon-edit" @click="crud.toEdit(data)" />
     <el-popover v-model="pop" v-permission="permission.del" placement="top" width="180" trigger="manual" @show="onPopoverShow" @hide="onPopoverHide">
-      <p>确定删除本条数据吗？</p>
+      <p>{{ msg }}</p>
       <div style="text-align: right; margin: 0">
         <el-button size="mini" type="text" @click="doCancel">取消</el-button>
         <el-button :loading="crud.dataStatus[data.id].delete === 2" type="primary" size="mini" @click="crud.doDelete(data)">确定</el-button>
       </div>
-      <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" @click="toDelete" />
+      <el-button slot="reference" :disabled="disabledDle" type="danger" icon="el-icon-delete" size="mini" @click="toDelete" />
     </el-popover>
   </div>
 </template>
@@ -23,6 +23,18 @@ export default {
     permission: {
       type: Object,
       required: true
+    },
+    disabledEdit: {
+      type: Boolean,
+      default: false
+    },
+    disabledDle: {
+      type: Boolean,
+      default: false
+    },
+    msg: {
+      type: String,
+      default: '确定删除本条数据吗？'
     }
   },
   data() {

src/components/Crud/crud.js

@@ -38,6 +38,13 @@ function CRUD(options) {
       edit: (form) => {},
       get: (id) => {}
     },
+    // 主页操作栏显示哪些按钮
+    optShow: {
+      add: true,
+      edit: true,
+      del: true,
+      download: true
+    },
     // 自定义一些扩展属性
     props: {},
     // 在主页准备
@@ -86,7 +93,9 @@ function CRUD(options) {
     // 整体loading
     loading: true,
     // 导出的 Loading
-    downloadLoading: false
+    downloadLoading: false,
+    // 删除的 Loading
+    delAllLoading: false
   }
   const methods = {
     /**
@@ -150,10 +159,10 @@ function CRUD(options) {
      * @param {*} data 数据项
      */
     toEdit(data) {
+      crud.resetForm(JSON.parse(JSON.stringify(data)))
       if (!(callVmHook(crud, CRUD.HOOK.beforeToEdit, crud.form) && callVmHook(crud, CRUD.HOOK.beforeToCU, crud.form))) {
         return
       }
-      crud.resetForm(JSON.parse(JSON.stringify(data)))
       crud.status.edit = CRUD.STATUS.PREPARED
       crud.getDataStatus(data.id).edit = CRUD.STATUS.PREPARED
       callVmHook(crud, CRUD.HOOK.afterToEdit, crud.form)
@@ -280,10 +289,35 @@ function CRUD(options) {
         crud.delSuccessNotify()
         callVmHook(crud, CRUD.HOOK.afterDelete, data)
         crud.refresh()
+        crud.delAllLoading = false
       }).catch(() => {
+        crud.delAllLoading = false
         dataStatus.delete = CRUD.STATUS.PREPARED
       })
     },
+    /**
+     * 删除多条记录
+     * @param datas
+     * @returns {Promise<T>}
+     */
+    doDeletes(datas) {
+      const ids = []
+      datas.forEach(val => {
+        ids.push(val.id)
+      })
+      if (!callVmHook(crud, CRUD.HOOK.beforeDelete, data)) {
+        return
+      }
+      return crud.crudMethod.delAll(ids).then(() => {
+        crud.dleChangePage(1)
+        crud.delSuccessNotify()
+        callVmHook(crud, CRUD.HOOK.afterDelete, data)
+        crud.delAllLoading = false
+        crud.refresh()
+      }).catch(() => {
+        crud.delAllLoading = false
+      })
+    },
     /**
      * 通用导出
      */
@@ -384,6 +418,56 @@ function CRUD(options) {
     getDataStatus(id) {
       return crud.dataStatus[id]
     },
+    /**
+     * 用于树形表格多选, 选中所有
+     * @param selection
+     */
+    selectAllChange(selection) {
+      // 如果选中的数目与请求到的数目相同就选中子节点，否则就清空选中
+      if (selection && selection.length === crud.data.length) {
+        selection.forEach(val => {
+          crud.selectChange(selection, val)
+        })
+      } else {
+        crud.findVM('presenter').$refs['table'].clearSelection()
+      }
+    },
+    /**
+     * 用于树形表格多选，单选的封装
+     * @param selection
+     * @param row
+     */
+    selectChange(selection, row) {
+      // 如果selection中存在row代表是选中，否则是取消选中
+      if (selection.find(val => { return val.id === row.id })) {
+        if (row.children) {
+          row.children.forEach(val => {
+            crud.findVM('presenter').$refs['table'].toggleRowSelection(val, true)
+            selection.push(val)
+            if (val.children) {
+              crud.selectChange(selection, val)
+            }
+          })
+        }
+      } else {
+        crud.toggleRowSelection(selection, row)
+      }
+    },
+    /**
+     * 切换选中状态
+     * @param selection
+     * @param data
+     */
+    toggleRowSelection(selection, data) {
+      if (data.children) {
+        data.children.forEach(val => {
+          crud.findVM('presenter').$refs['table'].toggleRowSelection(val, false)
+          if (val.children) {
+            crud.toggleRowSelection(selection, val)
+          }
+        })
+      }
+    },
     findVM(type) {
       return crud.vms.find(vm => vm && vm.type === type).vm
     },