From 4ae177c1c3a0608311f573b0061c1b0f13bdbbd2 Mon Sep 17 00:00:00 2001
From: 刘汉宸 <liuhanchen@zeyihuoyun.com>
Date: Tue, 2 Mar 2021 20:08:23 +0800
Subject: [PATCH] feat: 修改SchemaPage组件

---
 examples/views/docs/component/schema-page.md |  24 +++++++++---------------
 packages/schema-page/index copy.scss         |  72 ------------------------------------------------------------------------
 packages/schema-page/index copy.vue          | 649 -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 packages/schema-page/index.scss              |   6 ------
 packages/schema-page/index.vue               |  42 ++++++++++++++++++++++++++++--------------
 5 files changed, 37 insertions(+), 756 deletions(-)
 delete mode 100644 packages/schema-page/index copy.scss
 delete mode 100644 packages/schema-page/index copy.vue

diff --git a/examples/views/docs/component/schema-page.md b/examples/views/docs/component/schema-page.md
index 1e6cea5..ecbe405 100644
--- a/examples/views/docs/component/schema-page.md
+++ b/examples/views/docs/component/schema-page.md
@@ -29,7 +29,7 @@ export default {
             { prop: 'name', label: '姓名' },
             { prop: 'age', label: '年龄' },
             { prop: 'address', label: '地址' },
-            { prop: 'status', label: '状态' },
+            { prop: 'status', label: '状态', render: (value, row, h) => h('el-tag', { props: { size: 'mini', type: 'info' } }, value) },
           ]
         },
         form: {
@@ -89,7 +89,7 @@ export default {
             { prop: 'name', label: '姓名' },
             { prop: 'age', label: '年龄' },
             { prop: 'address', label: '地址' },
-            { prop: 'status', label: '状态' },
+            { prop: 'status', label: '状态', render: (value, row, h) => h('el-tag', { props: { size: 'mini', type: 'info' } }, value) },
           ]
         },
         form: {
@@ -122,7 +122,7 @@ export default {
 
 本组件预置了增删改查逻辑，因此分别对应`api-search`、`api-new`、`api-edit`、`api-get`、`api-delete`五个基本接口。
 
-::: snippet 接口格式为返回一个**Promise**对象的**Function**。其中，`api-search`的执行结果必须是{ list: [...], total: n }的格式，`api-get`的执行结果必须与`valur-form`相对应，`api-new`、`api-edit`、`api-delete`保持默认的**Promise**的resolve或reject逻辑即可，详情见示例。
+::: snippet 接口格式为返回一个**Promise**对象的**Function**。其中，`api-search`的执行结果必须是[分页数据, 数据总数]的格式，`api-get`的执行结果必须与`valur-form`相对应，`api-new`、`api-edit`、`api-delete`保持默认的**Promise**的resolve或reject逻辑即可，详情见示例。
 
 ```html
 <template>
@@ -159,7 +159,7 @@ export default {
             { prop: 'name', label: '姓名' },
             { prop: 'age', label: '年龄' },
             { prop: 'address', label: '地址' },
-            { prop: 'status', label: '状态' },
+            { prop: 'status', label: '状态', render: (value, row, h) => h('el-tag', { props: { size: 'mini', type: 'info' } }, value) },
           ]
         },
         form: {
@@ -187,10 +187,7 @@ export default {
             { id: '4', name: '崔倍', age: 27, address: '地址4', status: '正常' },
             { id: '5', name: '孙豹', age: 38, address: '地址5', status: '正常' },
           ]
-          resolve({
-            list,
-            total: list.length
-          });
+          resolve([list, 37]);
         }, 500);
       });
     },
@@ -279,7 +276,7 @@ export default {
             { prop: 'name', label: '姓名' },
             { prop: 'age', label: '年龄' },
             { prop: 'address', label: '地址' },
-            { prop: 'status', label: '状态' },
+            { prop: 'status', label: '状态', render: (value, row, h) => h('el-tag', { props: { size: 'mini', type: 'info' } }, value) },
           ]
         },
         form: {
@@ -317,10 +314,7 @@ export default {
             { id: '4', name: '崔倍', age: 27, address: '地址4', status: '正常' },
             { id: '5', name: '孙豹', age: 38, address: '地址5', status: '正常' },
           ]
-          resolve({
-            list,
-            total: list.length
-          });
+          resolve([list, 37]);
         }, 500);
       });
     },
@@ -431,7 +425,7 @@ export default {
             { prop: 'name', label: '姓名' },
             { prop: 'age', label: '年龄' },
             { prop: 'address', label: '地址' },
-            { prop: 'status', label: '状态' },
+            { prop: 'status', label: '状态', render: (value, row, h) => h('el-tag', { props: { size: 'mini', type: 'info' } }, value) },
           ]
         },
         form: {
@@ -535,7 +529,7 @@ export default {
             { prop: 'name', label: '姓名' },
             { prop: 'age', label: '年龄' },
             { prop: 'address', label: '地址' },
-            { prop: 'status', label: '状态' },
+            { prop: 'status', label: '状态', render: (value, row, h) => h('el-tag', { props: { size: 'mini', type: 'info' } }, value) },
           ]
         },
         form: {
diff --git a/packages/schema-page/index copy.scss b/packages/schema-page/index copy.scss
deleted file mode 100644
index dc37af8..0000000
--- a/packages/schema-page/index copy.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-.z-schema {
-  &__header {
-    margin-bottom: 10px;
-  }
-  &__filter {
-    border: 1px solid #ebeef5;
-    padding-top: 10px;
-    border-radius: 4px;
-    margin-bottom: 10px;
-  }
-  &__action {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: flex-start;
-    line-height: 1;
-    .el-button + .el-button {
-      margin-left: 0;
-    }
-    .el-button {
-      margin-right: 10px;
-      margin-bottom: 10px;
-    }
-  }
-  &__table {
-    &-operation {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: flex-start;
-      .el-button + .el-button {
-        margin-left: 0;
-      }
-      .el-button {
-        margin-right: 10px;
-        padding-top: 6px;
-        padding-bottom: 6px;
-      }
-    }
-  }
-  &__dialog-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-top: 10px;
-  }
-  &__footer {
-    margin-top: 10px;
-    text-align: right;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .selection-info {
-      word-break: break-all;
-      white-space: nowrap;
-      font-size: 12px;
-      color: #606266;
-      .num {
-        color: #000;
-        font-weight: bold;
-        padding: 0 5px;
-        font-size: 16px;
-      }
-      .el-button {
-        margin-left: 5px;
-      }
-    }
-    .el-pagination {
-      flex: auto;
-    }
-  }
-}
\ No newline at end of file
diff --git a/packages/schema-page/index copy.vue b/packages/schema-page/index copy.vue
deleted file mode 100644
index 5d54a1d..0000000
--- a/packages/schema-page/index copy.vue
+++ /dev/null
@@ -1,649 +0,0 @@
-<style lang="scss">
-@import './index.scss';
-</style>
-
-<template>
-  <div class="z-schema">
-    <!-- 头部内容 -->
-    <div v-if="$scopedSlots.header || $slots.header" class="z-schema__header">
-      <slot name="header" :filterModel="filterModel" v-bind="_slotScope"></slot>
-    </div>
-    <!-- 筛选组件 -->
-    <div v-if="filter" class="z-schema__filter">
-      <z-schema-filter
-        :value="_filterModel"
-        :list="filterList || listMap.filter | noRulesFilter"
-        :size="size"
-        @input="onFilterInput"
-        @search="onSearch"
-        :loading="loading"
-        v-bind="filterProps"
-        :params="_slotScope"
-      ></z-schema-filter>
-    </div>
-    <!-- 按钮区 -->
-    <div v-if="action" class="z-schema__action">
-      <slot v-if="hadSlot('action')" name="action" v-bind="_slotScope"></slot>
-      <template v-else>
-        <el-button :size="size" type="primary" @click="openNew">新增</el-button>
-        <el-button :size="size" plain :disabled="selection.length === 0" @click="handleDeleteMul(selection)">删除</el-button>
-        <slot name="button" v-bind="_slotScope"></slot>
-      </template>
-    </div>
-    <!-- 表格内容 -->
-    <div class="z-schema__table">
-      <z-schema-table
-        ref="table"
-        v-model="tableData"
-        v-loading="loading"
-        :list="tableList || listMap.table"
-        :tableProps="{ border: true, 'row-key': 'id', 'highlight-current-row': true, ...tableProps }"
-        :size="size"
-        @selection-change="onTableSelectionChange"
-        @selection="onTableSelection"
-      >
-        <slot></slot>
-        <!-- 表格列内容渲染 -->
-        <template v-for="(item, index) in renderList">
-          <template v-if="$scopedSlots[`cell-${item.fullKey}`]">
-            <el-table-column :slot="item.fullKey" v-bind="item" :prop="item.agentKey || item.key" :key="`table-cell-${index}`">
-              <template slot-scope="{ row, column, $index }">
-                <slot :name="`cell-${item.fullKey}`" v-bind="{ ...item, ..._slotScope }" :row="row" :value="row[item.key]" :column="column" :index="$index"></slot>
-              </template>
-            </el-table-column>
-          </template>
-          <template v-else-if="$scopedSlots[`render-${item.fullKey}`]">
-            <el-table-column :slot="item.fullKey" v-bind="item" :prop="item.agentKey || item.key" :key="`table-render-${index}`">
-              <template slot-scope="{ row, column, $index }">
-                <slot :name="`render-${item.fullKey}`" v-bind="{ ...item, ..._slotScope }" :row="row" :value="row[item.key]" :column="column" :index="$index"></slot>
-              </template>
-            </el-table-column>
-          </template>
-        </template>
-        <slot slot="column-append" name="column-append" v-bind="_slotScope"></slot>
-        <!-- 表格尾追加操作列 -->
-        <template #column-end>
-          <slot slot="column-end" name="column-end" v-bind="_slotScope"></slot>
-          <el-table-column v-if="operation" prop="$operation" label="操作" v-bind="{ width: 100, fixed: 'right', ...operationProps }">
-            <div class="z-schema__table-operation" slot-scope="slotScope">
-              <slot name="operation-button" v-bind="{ ..._slotScope, slotScope }"></slot>
-              <el-button type="text" icon="el-icon-edit" title="编辑" @click="openEdit(slotScope.row)"></el-button>
-              <el-popconfirm confirmButtonText="确定" cancelButtonText="取消" title="确定删除吗？" placement="top" @confirm="handleDelete([slotScope.row])">
-                <el-button slot="reference" type="text" icon="el-icon-delete" title="删除"></el-button>
-              </el-popconfirm>
-              <slot name="operation-button-append" v-bind="{ ..._slotScope, slotScope }"></slot>
-            </div>
-          </el-table-column>
-        </template>
-      </z-schema-table>
-    </div>
-    <!-- 底部区域 -->
-    <div class="z-schema__footer">
-      <div v-if="selection.length > 0" class="selection-info">
-        <span>已选中</span>
-        <span class="num">{{ selection.length }}</span>
-        <span>项</span>
-        <el-popconfirm confirmButtonText="确定" cancelButtonText="取消" title="确定清除吗？" placement="top" @confirm="clearSelection">
-          <el-button slot="reference" :size="size" type="text">清除</el-button>
-        </el-popconfirm>
-      </div>
-      <!-- 分页器 -->
-      <el-pagination
-        v-if="pagination"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="currentPage"
-        :page-sizes="pageSizes"
-        :page-size="pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="total"
-      >
-      </el-pagination>
-    </div>
-    <!-- 弹出框 -->
-    <el-dialog
-      :visible.sync="dialogVisible"
-      :title="dialogTitle"
-      destroy-on-close
-      append-to-body
-      :lock-scroll="false"
-      :close-on-click-modal="false"
-      @closed="onDialogClosed"
-      @close="onDialogClose"
-      v-bind="_dialogProps"
-    >
-      <div v-loading="dialogLoading">
-        <!-- 自定义弹出框标题 -->
-        <slot v-if="hadSlot('dialog-title')" slot="title" name="dialog-title" :dialogType="dialogType" v-bind="_slotScope"></slot>
-        <template v-if="dialogRender">
-          <!-- 自定义弹出框内容 -->
-          <slot v-if="hadSlot(`dialog-${dialogType}`)" :name="`dialog-${dialogType}`" :model="_formModel" v-bind="_slotScope"></slot>
-          <template v-else>
-            <!-- 内置弹出框新增修改表单 -->
-            <template v-if="['new', 'edit'].includes(dialogType)">
-              <z-form
-                ref="form"
-                :value="_formModel"
-                :list="formList || listMap.form"
-                @input="onFormInput"
-                @validate="onFormValidate"
-                v-bind="{ span: 12, 'label-width': '110px', ...formProps }"
-                :params="_slotScope"
-              >
-                <!-- 表单自定义插槽 -->
-                <template v-for="item in renderList">
-                  <template v-if="$scopedSlots[`form-${item.fullKey}`]">
-                    <slot :slot="item.fullKey" :name="`form-${item.fullKey}`" :value="get(_formModel, item.fullKey)" :row="_formModel" :model="_formModel" v-bind="_slotScope"></slot>
-                  </template>
-                </template>
-              </z-form>
-            </template>
-            <!-- 内置弹出框详情表单 -->
-            <template v-else>
-              <z-form
-                ref="form"
-                class="z-schema__view"
-                :value="_formModel"
-                :list="viewList || listMap.form | viewTypeFilter | noRulesFilter"
-                v-bind="{ span: 12, 'label-width': '110px', ...viewProps }"
-                :params="_slotScope"
-              >
-                <!-- 详情自定义插槽渲染 -->
-                <template v-for="item in renderList">
-                  <template v-if="$scopedSlots[`view-${item.fullKey}`]">
-                    <slot :slot="item.fullKey" :name="`view-${item.fullKey}`" :value="get(_formModel, item.fullKey)" :row="_formModel" :model="_formModel" v-bind="_slotScope"></slot>
-                  </template>
-                  <template v-else-if="$scopedSlots[`render-${item.fullKey}`]">
-                    <slot :slot="item.fullKey" :name="`render-${item.fullKey}`" :value="get(_formModel, item.fullKey)" :row="_formModel" :model="_formModel" v-bind="_slotScope"></slot>
-                  </template>
-                </template>
-              </z-form>
-            </template>
-          </template>
-          <!-- 内置弹出框新增修改按钮 -->
-          <div class="z-schema__dialog-button" v-if="['new', 'edit'].includes(dialogType)">
-            <el-button :size="size" type="primary" @click="handleConfirm" :loading="submitting">确定</el-button>
-            <el-button :size="size" plain @click="closeDialog">取消</el-button>
-          </div>
-        </template>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { cloneDeep, get } from '../utils';
-import { clear } from '../utils/param';
-
-let propsMap = {};
-const propsKeys = ['tableProps', 'filterProps', 'formProps', 'viewProps', 'dialogProps', 'operationProps'];
-propsKeys.forEach(key => {
-  propsMap[key] = {
-    type: Object,
-    default: () => ({}),
-  };
-});
-const apiKeys = ['searchApi', 'submitApi', 'addApi', 'modifyApi', 'getApi', 'viewApi', 'deleteApi'];
-apiKeys.forEach(key => {
-  propsMap[key] = {
-    type: Function,
-  };
-});
-const blockKeys = ['filter', 'action', 'pagination', 'operation'];
-blockKeys.forEach(key => {
-  propsMap[key] = {
-    type: Boolean,
-    default: true,
-  };
-});
-
-export default {
-  name: 'SchemaPage',
-  props: {
-    ...propsMap,
-    list: Array,
-    filterList: Array,
-    tableList: Array,
-    formList: Array,
-    viewList: Array,
-    size: {
-      type: String,
-      default: 'mini',
-    },
-    formModel: Object,
-    filterModel: Object,
-    auto: Boolean,
-    realSelection: Boolean,
-    url: String, // 请求地址
-    http: Function, // http库
-    alias: Object, // 别名配置
-  },
-  data() {
-    return {
-      filterForm: {},
-      editForm: {},
-      dialogVisible: false,
-      dialogRender: true,
-      dialogType: 'none',
-      dialogLoading: false,
-      dialogTitle: '',
-      dialogPropsHack: {},
-      currentPage: 1,
-      pageSize: 10,
-      total: 0,
-      pageSizes: [10, 20, 50],
-      tableData: [],
-      submitting: false,
-      loading: false,
-      selection: [],
-    };
-  },
-  created() {
-    if (this.auto) {
-      this.search();
-    }
-  },
-  filters: {
-    // 无规则过滤器，过滤掉筛选条件表单中的必填规则等
-    noRulesFilter(val = []) {
-      let list = cloneDeep(val);
-      const clearRules = list => {
-        list.forEach(item => {
-          if (item.list) {
-            clearRules(item.list);
-          } else {
-            delete item.rules;
-          }
-        });
-      };
-      clearRules(list);
-      return list;
-    },
-    // 详情类型过滤器
-    viewTypeFilter(val = []) {
-      let list = cloneDeep(val);
-      const clearRules = list => {
-        list.forEach(item => {
-          item.type = (h, { model, config }) => h('span', config, model[item.key]);
-        });
-      };
-      clearRules(list);
-      return list;
-    },
-  },
-  computed: {
-    listMap() {
-      // 默认作用域
-      const LIST_SPACE = ['filter', 'form', 'table'];
-      const array = {
-        filter: [], // 筛选
-        form: [], // 表单
-        table: [], // 表格
-      };
-      this.list.forEach(item => {
-        // 可以在列表中通过include或exclude设置当前配置的作用域
-        const { include = LIST_SPACE, exclude = [] } = item;
-        // 判断include
-        let _inclue = [];
-        if (include instanceof String || typeof include === 'string') {
-          _inclue = [include];
-        } else if (include instanceof Array && typeof include === 'object') {
-          _inclue = include;
-        }
-        // 判断exclude转换为include的情况
-        let _exclude_include = [];
-        if (exclude instanceof String || typeof exclude === 'string') {
-          _exclude_include = LIST_SPACE.filter(item => item !== exclude);
-        } else if (exclude instanceof Array && typeof exclude === 'object') {
-          _exclude_include = LIST_SPACE.filter(item => !exclude.includes(item));
-        }
-        // 作用域交集
-        const _intersection = _inclue.filter(v => _exclude_include.includes(v));
-        // 返回改配置项的作用域
-        const _list_space = cloneDeep(_intersection);
-        // 将配置项按需分配至各作用域下
-        _list_space.forEach(name => {
-          array[name].push({ ...item, ...(item[name] || {}) });
-        });
-      });
-      return array;
-    },
-    renderList() {
-      // 深度克隆传入的列表，避免原始值被修改
-      const newList = cloneDeep(this.list);
-      // 生成列表值的全路径key，即列表项为对象时，对象内的key与上一级的key合并作为全路径key
-      const generateFullKey = (list, parentKey) => {
-        list.forEach(item => {
-          if (item.group && item.list) {
-            if (item.group.key) {
-              item.fullKey = `${parentKey ? `${parentKey}-${item.group.key}` : item.group.key}`;
-            } else {
-              item.fullKey = parentKey || item.key;
-            }
-            generateFullKey(item.list, item.fullKey);
-          } else {
-            item.fullKey = `${parentKey ? `${parentKey}-${item.key}` : item.key}`;
-          }
-        });
-      };
-      // 生成fullKey
-      generateFullKey(newList);
-      return newList;
-    },
-    _filterModel() {
-      return this.filterModel || this.filterForm || {};
-    },
-    _formModel() {
-      return this.formModel || this.editForm || {};
-    },
-    _slotScope() {
-      return {
-        handleSearch: this.search,
-        openDialog: this.openDialog,
-        closeDialog: this.closeDialog,
-        openView: this.openView,
-        openEdit: this.openEdit,
-        openNew: this.openNew,
-        handleDelete: this.handleDelete,
-        handleDeleteMul: this.handleDeleteMul,
-        size: this.size,
-        dialogType: this.dialogType,
-        selection: this.selection,
-      };
-    },
-    _alias() {
-      const alias = this.alias;
-      const zAlias = this.zAlias;
-      if (alias && zAlias) {
-        return { ...zAlias, ...alias };
-      }
-      return this.alias || this.zAlias || {};
-    },
-    _dialogProps() {
-      return {
-        ...this.dialogProps,
-        ...this.dialogPropsHack,
-      };
-    },
-  },
-  methods: {
-    get,
-    // 空Promise
-    emptyPromise() {
-      return new Promise(resolve => resolve());
-    },
-    // 设置表格选中行
-    toggleRowSelection() {
-      this.tableData.forEach(row => {
-        if (this.selection.find(item => item.id === row.id)) {
-          this.$refs.table && this.$refs.table.toggleRowSelection(row);
-        }
-      });
-    },
-    // 表格选中状态
-    onTableSelectionChange(selection, type) {
-      if (this.realSelection) {
-        if (type === 'check') {
-          const result = this.selection || [];
-          selection.forEach(item => {
-            if (!result.find(i => i.id === item.id)) {
-              result.push(item);
-            }
-          });
-          this.selection = result;
-        } else if (type === 'uncheck') {
-          selection.forEach(i => {
-            this.selection = this.selection.filter(item => item.id !== i.id);
-          });
-        }
-      }
-    },
-    // 表格选中
-    onTableSelection(selection) {
-      if (!this.realSelection) {
-        this.selection = selection;
-      }
-    },
-    // 清除表格选中
-    clearSelection() {
-      this.$refs.table && this.$refs.table.clearSelection();
-      this.selection = [];
-    },
-    // 内置搜索接口
-    _searchAPI(params) {
-      if (this.url && (this.http || this.zHttp)) {
-        const _http = this.http || this.zHttp;
-        return _http({ url: `${clear(this.url)}/${this._alias.pageUrl || 'page'}`, params });
-      }
-      return undefined;
-    },
-    // 重置查询
-    onSearch() {
-      this.currentPage = 1;
-      this.search();
-    },
-    // 搜索
-    async search() {
-      this.loading = true;
-      const params = {
-        ...this._filterModel,
-        currentPage: this.currentPage,
-        pageSize: this.pageSize,
-      };
-      const searchAPI = this.searchApi || this._searchAPI || this.emptyPromise;
-      await searchAPI(params)
-        .then(res => {
-          const response = res || {};
-          this.tableData = response[this._alias.list || 'list'] || [];
-          this.total = response[this._alias.total || 'total'] || 0;
-          this.$nextTick(this.toggleRowSelection);
-        })
-        .catch(() => {
-          this.$message.error('查询失败');
-        });
-      this.loading = false;
-    },
-    // 更新筛选model
-    onFilterInput(val) {
-      this.filterForm = val || {};
-      this.$emit('update:filterModel', val || {});
-    },
-    // 更新表单model
-    onFormInput(val) {
-      this.editForm = val || {};
-      this.$emit('update:formModel', val || {});
-    },
-    // 内置新增保存接口
-    _addAPI(data) {
-      if (this.url && (this.http || this.zHttp)) {
-        const _http = this.http || this.zHttp;
-        return _http({ url: `${clear(this.url)}/${this._alias.addUrl || 'add'}`, method: 'post', data });
-      }
-      return undefined;
-    },
-    // 内置修改保存接口
-    _modifyAPI(data) {
-      if (this.url && (this.http || this.zHttp)) {
-        const _http = this.http || this.zHttp;
-        return _http({ url: `${clear(this.url)}/${this._alias.modifyUrl || 'modify'}`, method: 'post', data });
-      }
-      return undefined;
-    },
-    // 表单提交且通过校验
-    async onFormValidate(valid, model) {
-      if (valid) {
-        this.submitting = true;
-        let submitAPI = this.submitApi || this.emptyPromise;
-        if (this.dialogType === 'new') {
-          submitAPI = this.addApi || this.submitApi || this._addAPI || this.emptyPromise;
-        } else if (this.dialogType === 'edit') {
-          submitAPI = this.modifyApi || this.submitApi || this._modifyAPI || this.emptyPromise;
-        }
-        submitAPI(model, { type: this.dialogType })
-          .then(() => {
-            this.$message.success('保存成功');
-            this.closeDialog();
-            this.search();
-          })
-          .catch(() => {
-            this.$message.error('保存失败');
-          })
-          .finally(() => {
-            this.submitting = false;
-          });
-      }
-    },
-    // 表单按钮确定
-    handleConfirm() {
-      this.$refs.form && this.$refs.form.validate();
-    },
-    // 表单按钮取消
-    handleCancel() {
-      this.closeDialog();
-    },
-    // 查询是否有某个插槽
-    hadSlot(name) {
-      return !!this.$slots[name] || !!this.$scopedSlots[name];
-    },
-    // 打开新增弹出框
-    openNew() {
-      this.openDialog('new', '新增');
-    },
-    // 内置查询详情接口
-    _getAPI(row) {
-      if (this.url && (this.http || this.zHttp)) {
-        const _http = this.http || this.zHttp;
-        const _getKey = this._alias.getKey || this._alias.primaryKey || 'id';
-        const _resultKey = this._alias.result || 'result';
-        return _http({ url: `${clear(this.url)}/${this._alias.getUrl || 'queryById'}`, params: { [_getKey]: row[_getKey] } }).then(response => response[_resultKey] || {});
-      }
-      return undefined;
-    },
-    // 打开编辑弹出框
-    openEdit(row) {
-      this.dialogLoading = true;
-      this.openDialog('edit', '编辑');
-      const getRow = () =>
-        new Promise(resolve => {
-          resolve(row);
-        });
-      const getAPI = this.getApi || this._getAPI || getRow;
-      getAPI(row)
-        .then(result => {
-          this.editForm = result;
-          this.$emit('update:formModel', result || {});
-        })
-        .finally(() => {
-          this.dialogLoading = false;
-        });
-    },
-    // 内置查询详情接口
-    _viewAPI(row) {
-      if (this.url && (this.http || this.zHttp)) {
-        const _http = this.http || this.zHttp;
-        const _viewKey = this._alias.viewKey || this._alias.getKey || this._alias.primaryKey || 'id';
-        const _resultKey = this._alias.result || 'result';
-        return _http({ url: `${clear(this.url)}/${this._alias.getUrl || 'queryById'}`, params: { [_viewKey]: row[_viewKey] } }).then(response => response[_resultKey] || {});
-      }
-      return undefined;
-    },
-    // 打开详情弹出框
-    openView(row) {
-      this.dialogLoading = true;
-      this.openDialog('view', '详情');
-      const getRow = () =>
-        new Promise(resolve => {
-          resolve(row);
-        });
-      const viewAPI = this.viewApi || this.getApi || this._viewAPI || this._getAPI || getRow;
-      viewAPI(row)
-        .then(result => {
-          this.editForm = result;
-          this.$emit('update:formModel', result || {});
-        })
-        .finally(() => {
-          this.dialogLoading = false;
-        });
-    },
-    // 内置删除接口
-    _deleteAPI(keys) {
-      if (this.url && (this.http || this.zHttp)) {
-        const _http = this.http || this.zHttp;
-        return _http({ url: `${clear(this.url)}/${this._alias.modifyUrl || 'delete'}`, method: 'post', data: keys });
-      }
-      return undefined;
-    },
-    // 删除
-    handleDelete(selection) {
-      const loading = this.$loading({
-        text: '处理中',
-        spinner: 'el-icon-loading',
-        background: 'rgba(255, 255, 255, 0.5)',
-      });
-      const deleteAPI = this.deleteApi || this._deleteAPI || this.emptyPromise;
-      const _deleteKey = this._alias.deleteKey || this._alias.primaryKey || 'id';
-      const keys = selection.map(i => i[_deleteKey]);
-      deleteAPI(keys)
-        .then(() => {
-          this.search();
-          this.$message.success('删除成功');
-        })
-        .finally(() => {
-          loading.close();
-        });
-    },
-    // 批量删除
-    handleDeleteMul(selection) {
-      this.$confirm(`是否删除这 [${selection.length}] 项?`, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      })
-        .then(() => {
-          this.handleDelete(selection);
-        })
-        .catch(() => {});
-    },
-    // 打开弹出框
-    openDialog(type, title, config) {
-      this.dialogVisible = true;
-      this.dialogRender = true;
-      this.dialogType = type;
-      this.dialogTitle = title;
-      this.dialogPropsHack = config || {};
-      this.$emit('dialog-change', type);
-    },
-    // 关闭弹出框
-    closeDialog() {
-      this.dialogVisible = false;
-    },
-    // 清空表单
-    clearEditForm() {
-      this.editForm = {};
-      this.$emit('update:formModel', {});
-    },
-    // 弹出框关闭
-    onDialogClose() {
-      this.dialogType = 'none';
-      this.dialogRender = false;
-      this.$emit('dialog-change', 'none');
-    },
-    // 弹出框关闭动画结束
-    onDialogClosed() {
-      this.clearEditForm();
-      this.dialogPropsHack = {};
-    },
-    // 分页-每页个数
-    handleSizeChange(val) {
-      this.pageSize = val;
-      this.currentPage = 1;
-      this.$nextTick(this.search);
-    },
-    // 分页-当前页数
-    handleCurrentChange(val) {
-      this.currentPage = val;
-      this.$nextTick(this.search);
-    },
-  },
-};
-</script>
diff --git a/packages/schema-page/index.scss b/packages/schema-page/index.scss
index a5a1f68..26cf857 100644
--- a/packages/schema-page/index.scss
+++ b/packages/schema-page/index.scss
@@ -39,12 +39,6 @@
       }
     }
   }
-  &__dialog-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-top: 10px;
-  }
   &__footer {
     margin-top: 10px;
     text-align: right;
diff --git a/packages/schema-page/index.vue b/packages/schema-page/index.vue
index c2b7377..2b585eb 100644
--- a/packages/schema-page/index.vue
+++ b/packages/schema-page/index.vue
@@ -4,6 +4,10 @@
 
 <template>
   <div class="z-schema-page">
+    <!-- 头部内容 -->
+    <div v-if="getSlot('header')" class="z-schema-page__header">
+      <slot name="header" v-bind="_slotScope"></slot>
+    </div>
     <!-- 筛选组件 -->
     <div v-if="schema.filter" class="z-schema-page__filter">
       <z-schema-filter :schema="schema.filter" :value="valueFilter" @input="e => $emit('update:value-filter', e)" :loading="loading" @search="onSearch">
@@ -55,23 +59,32 @@
           <span>项</span>
         </div>
         <!-- 分页器 -->
-        <el-pagination
-          v-if="schema.pagination !== false"
-          @size-change="onSizeChange"
-          @current-change="onCurrentChange"
-          :current-page="currentPage"
-          :page-sizes="pageSizes"
-          :page-size="pageSize"
-          :layout="layout"
-          :total="total"
-        >
-        </el-pagination>
+        <slot v-if="schema.pagination !== false" name="pagination" v-bind="_slotScope">
+          <el-pagination
+            @size-change="onSizeChange"
+            @current-change="onCurrentChange"
+            :current-page="currentPage"
+            :page-sizes="pageSizes"
+            :page-size="pageSize"
+            :layout="layout"
+            :total="total"
+            v-bind="schema.pagination"
+          >
+          </el-pagination>
+        </slot>
       </slot>
     </div>
+    <!-- 弹出框 -->
     <el-dialog :title="elDialogTitle" :visible.sync="visible" v-bind="_dialogProps" @update:visible="onVisibleUpdate" @close="onDialogClose" @closed="onDialogClosed">
+      <template v-for="item in getSlotKeys('dialog-')" #[item.name]="slotScope">
+        <slot :name="item.slot" v-bind="{ ..._slotScope, ...slotScope }"></slot>
+      </template>
+      <!-- 弹出框内容渲染状态，用于关闭时销毁已渲染的内容 -->
       <template v-if="elDialogRender">
+        <!-- 自定义弹出框内容 -->
         <slot v-if="getSlot(`dialog-${elDialogType}`)" :name="`dialog-${elDialogType}`" v-bind="_slotScope"></slot>
         <div v-else v-loading="dialogLoading">
+          <!-- 新增/修改弹出框内容 -->
           <template v-if="['new', 'edit'].includes(elDialogType)">
             <z-schema-form
               :key="`form-${elDialogType}`"
@@ -93,6 +106,7 @@
               </template>
             </z-schema-form>
           </template>
+          <!-- 详情弹出框内容 -->
           <template v-else-if="elDialogType === 'detail'">
             <z-schema-form key="form-detail" ref="form" v-model="detail" :schema="schema.detail || detailSchema">
               <template v-for="item in getSlotKeys('detail-')" #[item.name]="slotScope">
@@ -265,9 +279,9 @@ export default {
         const searchAPI = this.apiSearch || this.emptyPromise;
         searchAPI(params)
           .then(res => {
-            const response = res || {};
-            this.tableData = response[this.schema.listKey || 'list'] || [];
-            this.total = response[this.schema.totalKey || 'total'] || 0;
+            const response = res || [];
+            this.tableData = response[0] || [];
+            this.total = response[1] || 0;
           })
           .finally(() => {
             this.loading = false;
--
libgit2 0.21.0