1. 简化CRUD，少量代码即可实现单表维护，只需提供基本的CRUD方法、默认表单数据、和自定义的查询 (#57)

2. 增加搜索条件重置、操作栏（新增、修改、删除、导出、控制搜索栏可见性、刷新、过滤表格列显示）
3. 表单和头部（搜索栏）组件从主页面分类出来，方便代码组织维护

src/components/crud/CRUD.operation.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="crud-opts">
+    <span class="crud-opts-left">
+      <el-button
+        v-permission="permission.add"
+        class="filter-item"
+        size="mini"
+        type="primary"
+        icon="el-icon-plus"
+        @click="crud.toAdd"
+      >
+        新增
+      </el-button>
+      <el-button
+        v-permission="permission.edit"
+        class="filter-item"
+        size="mini"
+        type="success"
+        icon="el-icon-edit"
+        :disabled="crud.selections.length !== 1"
+        @click="crud.toEdit(crud.selections[0])"
+      >
+        修改
+      </el-button>
+      <el-button
+        slot="reference"
+        v-permission="permission.delete"
+        class="filter-item"
+        type="danger"
+        icon="el-icon-delete"
+        size="mini"
+        :disabled="crud.selections.length === 0"
+        @click="toDelete(crud.selections)"
+      >
+        删除
+      </el-button>
+      <el-button
+        :loading="crud.downloadLoading"
+        class="filter-item"
+        size="mini"
+        type="warning"
+        icon="el-icon-download"
+        @click="crud.doExport"
+      >导出</el-button>
+    </span>
+    <el-button-group class="crud-opts-right">
+      <el-button
+        size="mini"
+        plain
+        type="info"
+        icon="el-icon-search"
+        @click="toggleSearch()"
+      />
+      <el-button
+        size="mini"
+        icon="el-icon-refresh"
+        @click="crud.refresh()"
+      />
+      <el-popover
+        placement="bottom-end"
+        width="150"
+        trigger="click"
+      >
+        <el-button
+          slot="reference"
+          size="mini"
+          icon="el-icon-s-grid"
+        >
+          <i
+            class="fa fa-caret-down"
+            aria-hidden="true"
+          />
+        </el-button>
+        <el-checkbox
+          v-for="item in crud.props.tableColumns"
+          :key="item.label"
+          v-model="item.visible"
+        >
+          {{ item.label }}
+        </el-checkbox>
+      </el-popover>
+    </el-button-group>
+  </div>
+</template>
+<script>
+import { crud } from '@crud/crud'
+export default {
+  mixins: [crud()],
+  props: {
+    permission: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  created() {
+    this.crud.updateProp('searchToggle', true)
+  },
+  methods: {
+    toDelete(datas) {
+      this.$confirm(`确认删除选中的${datas.length}条数据?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        if (datas.length === 1) {
+          this.crud.doDelete(datas[0])
+        } else {
+          this.crud.doDeletes(datas)
+        }
+      }).catch(() => {
+      })
+    },
+    toggleSearch() {
+      this.crud.props.searchToggle = !this.crud.props.searchToggle
+    }
+  }
+}
+</script>
+
+<style>
+  .crud-opts {
+    padding: 6px 0;
+    display: -webkit-flex;
+    display: flex;
+    align-items: center;
+  }
+  .crud-opts .crud-opts-right {
+    margin-left: auto;
+  }
+</style>

src/components/crud/Pagination.vue

@@ -0,0 +1,17 @@
+<template>
+  <el-pagination
+    :page-size.sync="page.size"
+    :total="page.total"
+    :current-page.sync="page.page"
+    style="margin-top: 8px;"
+    layout="total, prev, pager, next, sizes"
+    @size-change="crud.sizeChangeHandler($event)"
+    @current-change="crud.pageChangeHandler"
+  />
+</template>
+<script>
+import { pagination } from '@crud/crud'
+export default {
+  mixins: [pagination()]
+}
+</script>

src/components/crud/RR.operation.vue

@@ -0,0 +1,37 @@
+<template>
+  <span>
+    <el-button
+      class="filter-item"
+      size="mini"
+      type="success"
+      icon="el-icon-search"
+      @click="crud.toQuery"
+    >
+      搜索
+    </el-button>
+    <el-button
+      class="filter-item"
+      size="mini"
+      type="warning"
+      icon="el-icon-refresh-left"
+      @click="crud.resetQuery()"
+    >
+      重置
+    </el-button>
+  </span>
+</template>
+<script>
+export default {
+  props: {
+    crud: {
+      type: Object,
+      required: true
+    },
+    itemClass: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  }
+}
+</script>

src/components/crud/UD.operation.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <el-button
+      v-permission="permission.edit"
+      size="mini"
+      type="primary"
+      icon="el-icon-edit"
+      @click="crud.toEdit(data)"
+    />
+    <el-popover
+      v-model="pop"
+      v-permission="permission.delete"
+      placement="top"
+      width="180"
+      trigger="manual"
+    >
+      <p>确定删除本条数据吗？</p>
+      <div
+        v-loading="crud.dataStatus[data.id].delete === 2"
+        style="text-align: right; margin: 0"
+      >
+        <el-button
+          size="mini"
+          type="text"
+          @click="doCancel"
+        >
+          取消
+        </el-button>
+        <el-button
+          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-popover>
+  </div>
+</template>
+<script>
+
+import CRUD, { crud } from '@crud/crud'
+export default {
+  mixins: [crud()],
+  props: {
+    data: {
+      type: Object,
+      required: true
+    },
+    permission: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      pop: false
+    }
+  },
+  methods: {
+    doCancel() {
+      this.pop = false
+      this.crud.cancelDelete(this.data)
+    },
+    toDelete() {
+      this.pop = true
+    },
+    [CRUD.HOOK.afterDelete](crud, data) {
+      if (data === this.data) {
+        this.pop = false
+      }
+    }
+  }
+}
+</script>