# enn-schema-table

> ```js import { SchemaTable, DataModel } from 'enn-schema-table' ``` - @0.4.0 破坏性变更注意事项： - DataModel - 原有结果中的 message 改为 _message。前缀 _ 避免与 data 里已有的 message 冲突。 - 参数统一化变更 xxxConfig -> xxxConf: axiosConfig -> axiosConf - Schema-table - .top-

Latest version **0.4.0** (published 2022-11-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install enn-schema-table
pnpm add enn-schema-table
yarn add enn-schema-table
bun add enn-schema-table
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2022-11-21 |
| First published | 2021-08-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 87.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Eric |
| Maintainers | upupzealot, yansongcai, kewenjiang, guopi11 |

## Links

- npm: https://www.npmjs.com/package/enn-schema-table
- npm.io page: https://npm.io/package/enn-schema-table

## Recent versions

- 0.4.0 (latest) — 2022-11-21
- 0.4.0-beta.1 — 2022-11-11
- 0.4.0-beta.0 — 2022-11-11
- 0.3.2 — 2022-09-22
- 0.3.1 — 2022-09-06
- 0.3.0 — 2022-08-31
- 0.2.2 — 2022-08-22
- 0.2.1 — 2022-08-16
- 0.2.0 — 2022-08-11
- 0.1.1 — 2022-07-13
- 0.1.0 — 2022-06-13
- 0.0.40 — 2022-04-13
- 0.0.39 — 2022-03-09
- 0.0.38 — 2022-02-25
- 0.0.37 — 2022-02-14
- … 32 more at https://npm.io/package/enn-schema-table/versions

## README

## 使用方法
```js
import { SchemaTable, DataModel } from 'enn-schema-table'
```
- @0.4.0 破坏性变更注意事项：
  - DataModel
    - 原有结果中的 message 改为 _message。前缀 _ 避免与 data 里已有的 message 冲突。
    - 参数统一化变更 xxxConfig -> xxxConf: axiosConfig -> axiosConf
  - Schema-table
    - .top-right-btn、.enn-schema-table-query .query-reset-btn 增加 margin-bottom: 15px; 解决与表格贴在一起的问题。
    - 参数统一化变更 xxxConfig -> xxxConf: SchemaTable: colConfig、dialogConfig、paginationConfig -> colConf、dialogConf、paginationConf
    - pageNumberKey、pageSizeKey 移动至 paginationConfig 中
  - BooleanResult、TextEllipsis 组件文件目录位置调整，移至 components 下

- @0.3.0 变更注意事项
- 注意：布局请使用 layout 参数进行配置，属性：newLayout、appendSearch 已去除（改用 newLayout: layout="title"; appendSearch: queryLayout="appendBtnSearch"）！
- 带有 Title 版本布局， schema-table 属性：layout === 'title' || !!title 时触发。

## 属性 Props
|  属性名称  |  属性类型  | 必须 |  默认值  |  描述  |
| --- | --- | --- | --- | --- |
| schema | Object | 是 |  | 字段描述文件，包含各个字段的信息 |
| model | Object | 是 |  | 数据模型，包含 CURD 接口信息 |
| model.query | Object | 是 |  | 传入初始的 query 信息，通常是分页信息 { pageSize: 10, pageNumber: 1 }，pageSize 可以取 10/20/50，query 信息会在列表请求的时候带给后端 |
| hasQuery | Boolean |  | true | 是否包含搜索、筛选框、搜索按钮等 |
| search | String |  | '' | 传入空字符串时，不包含搜索框；传入非空字符串时，显示搜索框，同时传入的字符串作为搜索框的占位符 |
| queryLayout | String |  | default | 组件 query 布局模式，default/appendSearch/prependBtnSearch/appendBtnSearch 具体参数请查看下方 queryLayout 枚举值  |
| layout | String |  | default | 组件布局模式，default/title/card 具体参数请查看下方 layout 枚举值  |
| hasReset | Boolean |  | false | 是否展示重置按钮等 |
| filters | Array |  | [] | 字符串数组，可以包含要筛选的字段 key 值（schema 中的 name），或者字符串 '$timerange'（时间范围筛选专用） |
| tableAttrs | Object | |  | 传入 el-table 的参数，参考 el-table Table Attributes |
| hasOrder | Boolean |  | true | 是否在表格的第一列展示序号，默认为全局序号（通过计算当前页和位置获得） |
| hasAction | Boolean |  | true | 是否在表格的最右增加一个“操作”列；hasAction 为 true 时，下面的 canCreate/canEdit/canDelete 才会生效 |
| canCreate | Boolean |  | true | 是否显示新增按钮 |
| canEdit | Boolean |  | true | 是否显示编辑按钮 |
| canDelete | Boolean |  | true | 是否显示删除按钮 |
| canMultipleDelete | Boolean |  | false | 是否可以批量删除，需要配合 DataModel 的 multipleDeleteApi 批量删除按钮才会生效 |
| showMultipleSelect | Boolean |  | false | 是否展示多选列 |
| defaultSelected | Array |  |  | 默认选中的行 |
| fetchOnEdit | Boolean |  | true | 展示编辑弹框时，是否会调用一次详情接口进行回填（某些场景下，列表接口只返回部分部分字段，只有详情接口会返回全部字段）；若为 false，则会使用表格列表接口返回的 row 数据进行回填 |
| defaultFormData | Object |  | {} | 给新增、编辑对话框中的表单增加默认值 |
| hasPagination | Boolean |  | true | 是否显示分页 |
| maxHeight | String |  | undefined | 表格行显示区域的最大高度，格式为 '500px' 这样的字符串 |
| dialogWidth | String |  | '600px' | 新增、编辑对话框的宽度，也可以传百分比 |
| dialogConfig | Object |  | {} | dialog 配置对象 |
| colConfig | Object |  | {} | 指定各列的参数（比如列宽），key 为字段的 name。可以指定名为 “$actionBtns”的字段来设置“操作”列 |
| queryConf | Object |  | {} | 设置 query 参数的 key |
| paginationConfig | Object |  | {} | 进行 pagenation 相关设置 |
| title | String |  | - | 表格的标题，传入标题自动开启新版样式 |
| newLayout | Boolean |  | false | 使用新的布局 |
| tooltipEffect | String |  | light | tooltip effect 属性 dark/light |


### layout 枚举值
- default: 最初始的布局，search 在 form 第一位，有搜索按钮。
- title: table 组件包括了 title 的布局，table 操作按钮在 title 右侧。
- card: 列表为卡片格式的布局。

### queryLayout 枚举值
- default: 最初始的布局，search 在 form 第一项，有搜索按钮（el-button type="primary"）。
- appendSearch: search 在最后一项，去除所有项的 label，有搜索按钮（el-button type="primary"）。
- prependBtnSearch: search 在 form 第一项，搜索按钮在 search input prepend （输入框 前置 内容）的位置。
- appendBtnSearch: search 在 form 最后一项，搜索按钮在 search input append （输入框 后置 内容）的位置。

### dialogConfig

|  属性名称  |  属性类型  | 必须 |  默认值  |  描述  |
| --- | --- | --- | --- | --- |
| closeOnClickModal | Boolean |  | false | 是否可以通过点击 modal 关闭 Dialog |
| dialogWidth | String |  | 712px | 弹窗的 width |

### queryConf

|  属性名称  |  属性类型  | 必须 |  默认值  |  描述  |
| --- | --- | --- | --- | --- |
| searchKey | String |  | search | 列表请求入参关键词的 key |
| closePrefix | Boolean |  |  | 是否关闭列表请求入参参数改成 key 开头前缀的功能，使用 schema 的 name 作为 key。 |
| schema | Object |  |  | query 专用的 schema，用于替换原有 schema |
| formConf | Object |  |  | query 专用的 config，可覆盖 props.formConf |
| defaultQuery | Object |  |  | query 默认值，用于重置按钮恢复到默认数据 |
| showLabel | Boolean |  |  | 是否展示 query 的 Label，新版（传入 title || newLayout === true  时）默认 true |
| clearable | Boolean/Object |  | true | 是否展示 query 中 select 的清除按钮 |

- clearable 传 false，表示所有的 select 都关闭清除按钮
- clearable 作为对象，传入 select 的 name ，可以关闭对应 select 的清除按钮

### paginationConfig

|  属性名称  |  属性类型  | 必须 |  默认值  |  描述  |
| --- | --- | --- | --- | --- |
| pageSizes | Array\<Number\> |  |  | 分页器每页显示个数选择器的选项设置 |
| pageNumberKey | String |  | pageNumber | 列表请求入参页码的 key |
| pageSizeKey | String |  | pageSize | 列表请求入参当前页条数的 key |


### colConfig

|  属性名称  |  属性类型  | 必须 |  默认值  |  描述  |
| --- | --- | --- | --- | --- |
| width | String |  |  | 对应列的宽度  |
| minWidth | String |  |  | 对应列的最小宽度  |
| ellipsis | Boolean |  |  | 对应列是否使用多行省略，默认2行 |
| switchConf | Object |  |  | type 为 switch 时的展示配置 |

- 通过 colConfig[colName] 配置对应列
- 其中操作列的 colName 为 $actionBtns
- 其中序号列的 colName 为 $index

#### switchConf

|  属性名称  |  属性类型  | 必须 |  默认值  |  描述  |
| --- | --- | --- | --- | --- |
| minIcon | Boolean |  | true | 使用点的图标。自定义 icon 时，该项必须为 false |
| showIcon | Boolean |  | true | 是否显示 icon |
| activeText | String |  | 是 | data true 时的文案，可直接在 schema 中配置 |
| inactiveText | String |  | 否 | data 不为 true 时的文案，可直接在 schema 中配置 |
| activeIcon | String |  |  | data true 时的 icon。minIcon false 时，默认值为 el-icon-success |
| inactiveIcon | String |  |  | data 不为 true 时的 icon。minIcon false 时，默认值为 el-icon-error |
| activeValue | Boolean/String/Number |  | true | switch 开值，可直接在 schema 中配置 |
| inactiveValue | Boolean/String/Number |  | false | switch 关值，可直接在 schema 中配置 |
| strictMode | Boolean |  | true | 使用三等号判断传入的值和 activeValue 是否相等 |

#### colConfig 示例
```vue
<template>
  ...
  <SchemaTable
    ...
    :colConfig="{
      $actionBtns: { width: 50 }
    }"
  >
  ...
</template>
```

## 插槽 Slots
| 插槽名称 | 绑定值 | 作用 |
| --- | --- | --- |
| query | schema（Object）, data: （Object）） | 用于插入自定义 query 表单 |
| overrideQueryBtns | row（Object） | 用于覆写 query 中搜索、重置后面的其他操作按钮（老版样式的新增、批量删除） |
| preQueryBtns | row（Object） | 用于插入自定义操作，插入位置位于 query 区域（搜索按钮右侧，DOM 新增按钮之前） |
| queryBtns | row（Object） | 用于插入自定义操作，插入位置位于 query 区域（搜索按钮右侧，DOM 批量删除按钮之后） |
| 列插槽（每一列的插槽名称都不同，具体为 schema 中的 name 值） | row（Object）/ data（Object） | 针对某一列的模板进行覆写，绑定的 row 为当前行的数据，data 为当前单元格（当前行当前列）的数据 |
| createBtn | onCreate（方法） | 覆写新增按钮，调用绑定的 onCreate 方法可以唤起默认的新增对话框 |
| multipleDeleteBtn | onMultipleDelete, multipleDeleteLoading, disabled, selectedRows, | 用于覆写批量删除按钮，调用绑定的 onMultipleDelete 可以自动处理批量删除逻辑 |
| overrideHeaderBtns | row（Object） | 用于覆写顶部操作按钮 |
| headerBtns | row（Object） | （只有新版布局才会生效）用于插入顶部自定义操作，插入位置位于顶部按钮之后 |
| overrideActionBtns | row（Object） | 在 hasAction 为 true 时生效。用于覆写整个“操作”列 |
| preActionBtns | row（Object） | 操作列，编辑按钮左侧的插槽 |
| postActionBtns | row（Object） | 操作列，删除按钮右侧的插槽 |
| actionBtns | row（Object） | 操作列，编辑按钮和删除按钮中间的插槽 |
| cardItem | row（Object） | layout="card" 模式专属，卡片项插槽，完全覆盖卡片，包括内置的编辑、删除按钮等 |
| cardContainer | row（Object） | layout="card" 模式专属，卡片内容插槽 |

### 自定义“操作”栏按钮写法参考
```vue
<template #actionBtns="{ row }">
  <el-link
    type="primary"
    @click="onDispatch(row)"
  >
    下发
  </el-link>
</template>
```

## Table Events
| 事件名 | 参数 | 说明 |
| --- | --- | --- |
| selectionChange | selectedRows, selectedRow | 当选择项发生变化时触发该事件。参数 selectedRows 表示选中的项数组，selectedRow 表示当前操作的项。selectAll 的时候 selectedRow 该项为 undefined |
| currentChange | currentRow, oldCurrentRow | 单行选中 |
| rowClick | row, column, event | 行点击事件。layout="card" 时为卡片项点击事件 |


## Table Methods
- 可使用 ref 获取并触发执行
| 函数名 | 参数 | 说明 |
| --- | --- | --- |
| onSearch |  | 重置页码至1，并刷新列表 |
| fetch |  | 刷新当前页列表 |
| onReset |  | 重置 query 至默认值 |
| onCreate |  | 开启新增弹窗 |
| onEdit | record | 开启编辑弹窗，参数为行数据 |
| onDelete | record | 触发删除功能，参数为行数据 |

## DataModel
### 使用
```js
import { DataModel } from 'enn-schema-table';
// 生成实例
const dataModel = new DataModel({
  createApi: 'api',
  getApi: 'api',
  getMap(res) {
    return res;
  },
  getListApi: 'getListApi',
  getListMap(item) {
    return item;
  },
  updateApi: 'updateApi',
  deleteApi: 'deleteApi',
  multipleDeleteApi: 'multipleDeleteApi',
  query: { pageNumber: 1, pageSize: 10 },
  axiosConfig: {
    timeout: 10000,
  },
});
// 调用方式
async function test() {
  const createRes = await dataModel.create();
  const getRes = await dataModel.get();
  const getListRes = await dataModel.getListApi();
  const updateRes = await dataModel.update();
  const deleteRes = await dataModel.delete();
  const multipleDeleteRes = await dataModel.multipleDelete();
}
```

### 属性 Props

|  属性名称  |  属性类型  | 必须 |  默认值  |  描述  |
| --- | --- | --- | --- | --- |
| createApi | String |  |  | post 请求的 api，dataModel. |
| getApi | String |  |  | get 请求的 api |
| getMap | Function |  |  | 处理 get 返回结果，处理完需要把结果返回 |
| getListApi | String |  |  | getList 获取列表的 api，返回列表数据和 pagination 数据 |
| getListMap | Function |  |  | getList 结果 map 的回调函数，参数为结果每一项数据，处理完需要把结果返回 |
| getListFunc | Function |  |  | 替代 getList 的函数，参数为 query |
| updateApi | String |  |  | put 请求的 api |
| deleteApi | String |  |  | delete 请求的 api |
| multipleDeleteApi |  |  |  | 批量删除请求的 api，使用的 axios({ method: 'DELETE' }) 发请求 |
| query |  |  |  | get 请求的参数 |
| axiosConfig | Object |  |  | axios 的配置项 |


## DataModelLocal
本地表格数据源

### 使用
```js
import { SchemaTable, DataModelLocal } from 'enn-schema-table'
const localMd = new DataModelLocal({
  list: [{id: 1, a: 1}],
});
```

### 属性 Props

|  属性名称  |  属性类型  | 必须 |  默认值  |  描述  |
| --- | --- | --- | --- | --- |
| list | Array |  |  | 列表全部的数据 |
| createMap | Function |  |  | 处理列表创建的回填数据 |
| getMap | Function |  |  | 处理 get 返回结果，处理完需要把结果返回 |
| getListMap | Function |  |  | getList 结果 map 的回调函数，参数为结果每一项数据，处理完需要把结果返回 |
| updateMap | Function |  |  | 处理列表编辑的回填数据 |
| query | Object |  |  | pageNumber, pageSize 参数 |
| isDesc | Boolean |  |  | list 数据新增时的顺序。true：使用 list.unshift() 增加项 |

getAllData

## Methods
- 可使用 model.methodsName 调用
| 函数名 | 参数 | 说明 |
| --- | --- | --- |
| getAllData | removeId | 获取所有的数据，参数 true，表示删除每一项的 id |

---
_Source: https://npm.io/package/enn-schema-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._