test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 20:09:08 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

crud 增加导出 csv 按钮

Browse Source
This commit is contained in:
wuduoyi 2020-09-25 17:50:20 +08:00
parent f386a0ac2a
commit 08b74f7ca8
4 changed files with 95 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
docs/components/crud.md
View File

@ -17,7 +17,7 @@ CRUD，即增删改查组件，主要用来展现数据列表，并支持各类
```schema:height="600" scope="body" ```schema:height="600" scope="body"
{ {
"type": "crud", "type": "crud",
"api": "https://houtai.baidu.com/api/sample?waitSeconds=1", "api": "https://houtai.baidu.com/api/sample",
"columns": [ "columns": [
{ {
"name": "id", "name": "id",
@ -113,7 +113,7 @@ CRUD，即增删改查组件，主要用来展现数据列表，并支持各类
"title": "新增表单", "title": "新增表单",
"body": { "body": {
"type": "form", "type": "form",
"api": "post:/api/sample?waitSeconds=1", "api": "post:/api/sample",
"controls": [ "controls": [
{ {
"type": "text", "type": "text",
@ -131,7 +131,7 @@ CRUD，即增删改查组件，主要用来展现数据列表，并支持各类
}, },
{ {
"type": "crud", "type": "crud",
"api": "/api/sample?waitSeconds=1&orderBy=id&orderDir=desc", "api": "/api/sample?orderBy=id&orderDir=desc",
"columns": [ "columns": [
{ {
"name": "id", "name": "id",
@ -171,7 +171,7 @@ CRUD，即增删改查组件，主要用来展现数据列表，并支持各类
```schema:height="600" scope="body" ```schema:height="600" scope="body"
{ {
"type": "crud", "type": "crud",
"api": "/api/sample?waitSeconds=1&orderBy=id&orderDir=desc", "api": "/api/sample?orderBy=id&orderDir=desc",
"columns": [ "columns": [
{ {
"name": "id", "name": "id",
@ -195,7 +195,7 @@ CRUD，即增删改查组件，主要用来展现数据列表，并支持各类
"actionType": "ajax", "actionType": "ajax",
"level": "danger", "level": "danger",
"confirmText": "确认要删除？", "confirmText": "确认要删除？",
"api": "delete:/api/sample/${id}?waitSeconds=1" "api": "delete:/api/sample/${id}"
} }
] ]
} }
@ -210,7 +210,7 @@ CRUD，即增删改查组件，主要用来展现数据列表，并支持各类
```schema:height="600" scope="body" ```schema:height="600" scope="body"
{ {
"type": "crud", "type": "crud",
"api": "/api/sample?waitSeconds=1&orderBy=id&orderDir=desc", "api": "/api/sample?orderBy=id&orderDir=desc",
"columns": [ "columns": [
{ {
"name": "id", "name": "id",
@ -237,7 +237,7 @@ CRUD，即增删改查组件，主要用来展现数据列表，并支持各类
"body": { "body": {
"type": "form", "type": "form",
"initApi": "/api/sample/${id}", "initApi": "/api/sample/${id}",
"api": "post:/api/sample/${id}?waitSeconds=1", "api": "post:/api/sample/${id}",
"controls": [ "controls": [
{ {
"type": "text", "type": "text",
@ -466,7 +466,7 @@ Cards 模式支持 [Cards](./cards) 中的所有功能。
```schema:height="800" scope="body" ```schema:height="800" scope="body"
{ {
"type": "crud", "type": "crud",
"api": "https://houtai.baidu.com/api/sample?waitSeconds=1", "api": "https://houtai.baidu.com/api/sample",
"filter": { "filter": {
"title": "条件搜索", "title": "条件搜索",
"controls": [ "controls": [
@ -559,7 +559,7 @@ Cards 模式支持 [Cards](./cards) 中的所有功能。
```schema:height="600" scope="body" ```schema:height="600" scope="body"
{ {
"type": "crud", "type": "crud",
"api": "https://houtai.baidu.com/api/sample?waitSeconds=1", "api": "https://houtai.baidu.com/api/sample",
"interval": 3000, "interval": 3000,
"columns": [ "columns": [
{ {
@ -603,7 +603,7 @@ Cards 模式支持 [Cards](./cards) 中的所有功能。
```schema:height="600" scope="body" ```schema:height="600" scope="body"
{ {
"type": "crud", "type": "crud",
"api": "https://houtai.baidu.com/api/sample?waitSeconds=1", "api": "https://houtai.baidu.com/api/sample",
"columns": [ "columns": [
{ {
"name": "id", "name": "id",
@ -636,7 +636,7 @@ amis 只负责生成排序组件，并将排序参数传递给接口，而不会
```schema:height="600" scope="body" ```schema:height="600" scope="body"
{ {
"type": "crud", "type": "crud",
"api": "https://houtai.baidu.com/api/sample?waitSeconds=1", "api": "https://houtai.baidu.com/api/sample",
"columns": [ "columns": [
{ {
"name": "id", "name": "id",
@ -668,7 +668,7 @@ amis 只负责生成搜索组件，并将搜索参数传递给接口，而不会
```schema:height="600" scope="body" ```schema:height="600" scope="body"
{ {
"type": "crud", "type": "crud",
"api": "https://houtai.baidu.com/api/sample?waitSeconds=1", "api": "https://houtai.baidu.com/api/sample",
"columns": [ "columns": [
{ {
"name": "id", "name": "id",
@ -710,7 +710,7 @@ amis 只负责生成下拉选择器组件，并将搜索参数传递给接口，
```schema:height="600" scope="body" ```schema:height="600" scope="body"
{ {
"type": "crud", "type": "crud",
"api": "https://houtai.baidu.com/api/sample?waitSeconds=1", "api": "https://houtai.baidu.com/api/sample",
"quickSaveApi": "https://houtai.baidu.com/api/sample/bulkUpdate", "quickSaveApi": "https://houtai.baidu.com/api/sample/bulkUpdate",
"columns": [ "columns": [
{ {
@ -733,7 +733,7 @@ amis 只负责生成下拉选择器组件，并将搜索参数传递给接口，
```schema:height="600" scope="body" ```schema:height="600" scope="body"
{ {
"type": "crud", "type": "crud",
"api": "https://houtai.baidu.com/api/sample?waitSeconds=1", "api": "https://houtai.baidu.com/api/sample",
"quickSaveApi": "https://houtai.baidu.com/api/sample/bulkUpdate", "quickSaveApi": "https://houtai.baidu.com/api/sample/bulkUpdate",
"columns": [ "columns": [
{ {
@ -765,7 +765,7 @@ amis 只负责生成下拉选择器组件，并将搜索参数传递给接口，
```schema:height="750" scope="body" ```schema:height="750" scope="body"
{ {
"type": "crud", "type": "crud",
"api": "https://houtai.baidu.com/api/sample?waitSeconds=1", "api": "https://houtai.baidu.com/api/sample",
"quickSaveApi": "https://houtai.baidu.com/api/sample/bulkUpdate", "quickSaveApi": "https://houtai.baidu.com/api/sample/bulkUpdate",
"columns": [ "columns": [
{ {
@ -799,7 +799,7 @@ amis 只负责生成下拉选择器组件，并将搜索参数传递给接口，
```schema:height="750" scope="body" ```schema:height="750" scope="body"
{ {
"type": "crud", "type": "crud",
"api": "https://houtai.baidu.com/api/sample?waitSeconds=1", "api": "https://houtai.baidu.com/api/sample",
"quickSaveItemApi": "https://houtai.baidu.com/api/sample/$id", "quickSaveItemApi": "https://houtai.baidu.com/api/sample/$id",
"columns": [ "columns": [
{ {
@ -832,7 +832,7 @@ amis 只负责生成下拉选择器组件，并将搜索参数传递给接口，
```schema:height="750" scope="body" ```schema:height="750" scope="body"
{ {
"type": "crud", "type": "crud",
"api": "https://houtai.baidu.com/api/sample?waitSeconds=1", "api": "https://houtai.baidu.com/api/sample",
"columns": [ "columns": [
{ {
"name": "id", "name": "id",
@ -868,7 +868,7 @@ crud 组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在
```schema:height="600" scope="body" ```schema:height="600" scope="body"
{ {
"type": "crud", "type": "crud",
"api": "https://houtai.baidu.com/api/sample?waitSeconds=1", "api": "https://houtai.baidu.com/api/sample",
"headerToolbar": [ "headerToolbar": [
{ {
"type": "tpl", "type": "tpl",
@ -943,7 +943,7 @@ crud 组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在
```schema:height="700" scope="body" ```schema:height="700" scope="body"
{ {
"type": "crud", "type": "crud",
"api": "https://houtai.baidu.com/api/sample?waitSeconds=1", "api": "https://houtai.baidu.com/api/sample",
"headerToolbar": [], "headerToolbar": [],
"footerToolbar": ["switch-per-page", "pagination"], "footerToolbar": ["switch-per-page", "pagination"],
"columns": [ "columns": [
@ -1079,7 +1079,7 @@ crud 组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在
```schema:height="600" scope="body" ```schema:height="600" scope="body"
{ {
"type": "crud", "type": "crud",
"api": "https://houtai.baidu.com/api/sample?waitSeconds=1", "api": "https://houtai.baidu.com/api/sample",
"headerToolbar": [ "headerToolbar": [
"bulkActions" "bulkActions"
], ],
@ -1159,7 +1159,7 @@ crud 组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在
```schema:height="600" scope="body" ```schema:height="600" scope="body"
{ {
"type": "crud", "type": "crud",
"api": "https://houtai.baidu.com/api/sample?waitSeconds=1", "api": "https://houtai.baidu.com/api/sample",
"headerToolbar": ["statistics"], "headerToolbar": ["statistics"],
"columns": [ "columns": [
{ {
@ -1197,7 +1197,7 @@ crud 组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在
```schema:height="600" scope="body" ```schema:height="600" scope="body"
{ {
"type": "crud", "type": "crud",
"api": "https://houtai.baidu.com/api/sample?waitSeconds=1", "api": "https://houtai.baidu.com/api/sample",
"headerToolbar": ["load-more"], "headerToolbar": ["load-more"],
"columns": [ "columns": [
{ {
@ -1228,6 +1228,44 @@ crud 组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在
} }
``` ```
### 导出 CSV
在`headerToolbar`或者`footerToolbar`数组中添加`export-csv`字符串，可以实现点击下载 CSV 的功能，注意这里只包括当前分页的数据，要下载全部数据需要通过后端 API 实现。
```schema:height="600" scope="body"
{
"type": "crud",
"api": "https://houtai.baidu.com/api/sample",
"headerToolbar": ["export-csv"],
"columns": [
{
"name": "id",
"label": "ID"
},
{
"name": "engine",
"label": "Rendering engine"
},
{
"name": "browser",
"label": "Browser"
},
{
"name": "platform",
"label": "Platform(s)"
},
{
"name": "version",
"label": "Engine version"
},
{
"name": "grade",
"label": "CSS grade"
}
]
}
```
### 显隐显示查询条件表单 ### 显隐显示查询条件表单
在`headerToolbar`或者`footerToolbar`数组中添加`filter-toggler`字符串，并且在 crud 中配置`"filterTogglable": true`后，可以渲染一个可以切换显示查询表单的功能按钮 在`headerToolbar`或者`footerToolbar`数组中添加`filter-toggler`字符串，并且在 crud 中配置`"filterTogglable": true`后，可以渲染一个可以切换显示查询表单的功能按钮
@ -1235,7 +1273,7 @@ crud 组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在
```schema:height="800" scope="body" ```schema:height="800" scope="body"
{ {
"type": "crud", "type": "crud",
"api": "https://houtai.baidu.com/api/sample?waitSeconds=1", "api": "https://houtai.baidu.com/api/sample",
"filter": { "filter": {
"title": "条件搜索", "title": "条件搜索",
"controls": [ "controls": [
@ -1286,7 +1324,7 @@ crud 组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在
```schema:height="600" scope="body" ```schema:height="600" scope="body"
{ {
"type": "crud", "type": "crud",
"api": "https://houtai.baidu.com/api/sample?waitSeconds=1", "api": "https://houtai.baidu.com/api/sample",
"draggable": true, "draggable": true,
"columns": [ "columns": [
{ {
@ -1411,7 +1449,7 @@ CRUD 中不限制有多少个单条操作、添加一个操作对应的添加一
```schema:height="600" scope="body" ```schema:height="600" scope="body"
{ {
"type": "crud", "type": "crud",
"api": "https://houtai.baidu.com/api/sample?waitSeconds=1", "api": "https://houtai.baidu.com/api/sample",
"loadDataOnce": true, "loadDataOnce": true,
"columns": [ "columns": [
{ {
@ -1448,7 +1486,7 @@ CRUD 中不限制有多少个单条操作、添加一个操作对应的添加一
```schema:height="600" scope="body" ```schema:height="600" scope="body"
{ {
"type": "crud", "type": "crud",
"api": "https://houtai.baidu.com/api/sample?waitSeconds=1", "api": "https://houtai.baidu.com/api/sample",
"loadDataOnce": true, "loadDataOnce": true,
"source": "${rows | filter:engine:match:keywords}", "source": "${rows | filter:engine:match:keywords}",
"filter":{ "filter":{

4
package.json
View File

@ -30,6 +30,8 @@
"author": "fex", "author": "fex",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@types/file-saver": "^2.0.1",
"@types/papaparse": "^5.2.2",
"async": "2.6.0", "async": "2.6.0",
"attr-accept": "1.1.3", "attr-accept": "1.1.3",
"autobind-decorator": "2.4.0", "autobind-decorator": "2.4.0",
@ -38,6 +40,7 @@
"dom-helpers": "^3.3.1", "dom-helpers": "^3.3.1",
"downshift": "3.1.4", "downshift": "3.1.4",
"echarts": "^4.1.0", "echarts": "^4.1.0",
"file-saver": "^2.0.2",
"flv.js": "1.5.0", "flv.js": "1.5.0",
"froala-editor": "2.9.6", "froala-editor": "2.9.6",
"history": "4.7.2", "history": "4.7.2",
@ -52,6 +55,7 @@
"mobx-state-tree": "^3.7.0", "mobx-state-tree": "^3.7.0",
"moment": "^2.19.3", "moment": "^2.19.3",
"monaco-editor": "0.17.1", "monaco-editor": "0.17.1",
"papaparse": "^5.3.0",
"prop-types": "^15.6.1", "prop-types": "^15.6.1",
"qrcode.react": "^0.8.0", "qrcode.react": "^0.8.0",
"qs": "6.5.1", "qs": "6.5.1",

1
src/locale/en.ts
View File

@ -202,6 +202,7 @@ register('en', {
'可拖拽排序': 'Drag and drop sorting', '可拖拽排序': 'Drag and drop sorting',
'上一步': 'Prev', '上一步': 'Prev',
'下一步': 'Next', '下一步': 'Next',
'导出 CSV': 'Export CSV',
'保存并下一步': 'Save & Next', '保存并下一步': 'Save & Next',
'完成': 'Finish', '完成': 'Finish',
'点击选择图片或者将图片拖入该区域': '点击选择图片或者将图片拖入该区域':

26
src/renderers/CRUD.tsx
View File

@ -1,4 +1,6 @@
import React from 'react'; import React from 'react';
import papaparse from 'papaparse';
import {saveAs} from 'file-saver';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import {Renderer, RendererProps} from '../factory'; import {Renderer, RendererProps} from '../factory';
import { import {
@ -1675,6 +1677,28 @@ export default class CRUD extends React.Component<CRUDProps, any> {
); );
} }
renderExportCSV() {
const {store, classPrefix: ns, classnames: cx, translate: __} = this.props;
return (
<Button
classPrefix={ns}
onClick={() => {
const csvText = papaparse.unparse(store.data.items);
if (csvText) {
const blob = new Blob([csvText], {
type: 'text/plain;charset=utf-8'
});
saveAs(blob, 'data.csv');
}
}}
size="sm"
>
{__('导出 CSV')}
</Button>
);
}
renderToolbar( renderToolbar(
toolbar?: SchemaNode, toolbar?: SchemaNode,
index: number = 0, index: number = 0,
@ -1699,6 +1723,8 @@ export default class CRUD extends React.Component<CRUDProps, any> {
return this.renderLoadMore(); return this.renderLoadMore();
} else if (type === 'filter-toggler') { } else if (type === 'filter-toggler') {
return this.renderFilterToggler(); return this.renderFilterToggler();
} else if (type === 'export-csv') {
return this.renderExportCSV();
} else if (Array.isArray(toolbar)) { } else if (Array.isArray(toolbar)) {
const children: Array<any> = toolbar const children: Array<any> = toolbar
.map((toolbar, index) => ({ .map((toolbar, index) => ({