From 64ef78a01fc13b4fae9a46b8db5f00c87961bf32 Mon Sep 17 00:00:00 2001 From: liaoxuezhi Date: Tue, 13 Apr 2021 00:06:20 +0800 Subject: [PATCH] =?UTF-8?q?crud=20=E6=94=AF=E6=8C=81=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E8=BF=94=E5=9B=9E=E5=8A=A8=E6=80=81=E5=88=97?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=20(#1788)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-CN/components/crud.md | 14 + examples/components/CRUD/Dynamic.jsx | 10 + examples/components/Example.tsx | 6 + mock/crud/dynamic.js | 447 +++++++++++++++++++++++++++ src/renderers/CRUD.tsx | 1 + src/store/crud.ts | 8 + 6 files changed, 486 insertions(+) create mode 100644 examples/components/CRUD/Dynamic.jsx create mode 100644 mock/crud/dynamic.js diff --git a/docs/zh-CN/components/crud.md b/docs/zh-CN/components/crud.md index e1dff99da..658d502cf 100755 --- a/docs/zh-CN/components/crud.md +++ b/docs/zh-CN/components/crud.md @@ -1769,6 +1769,20 @@ CRUD 中不限制有多少个单条操作、添加一个操作对应的添加一 > **注意：**如果你的数据量较大，请务必使用服务端分页的方案，过多的前端数据展示，会显著影响前端页面的性能 +## 动态列 + +> since 1.1.6 + +在 1.1.6 之前的版本，只能通过 service + schemaApi 让后端返回 schema 配置来实现，1.1.6 版本之后可以直接通过 crud 的数据接口返回了。 +用这种方式可以简化动态列的实现，与 items 并列返回 columns 数组即即可。 + +```schema: scope="body" +{ + "type": "crud", + "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/crud/dynamic?waitSeconds=1" +} +``` + ## 属性表 | 属性名 | 类型 | 默认值 | 说明 | diff --git a/examples/components/CRUD/Dynamic.jsx b/examples/components/CRUD/Dynamic.jsx new file mode 100644 index 000000000..3ebcb0d09 --- /dev/null +++ b/examples/components/CRUD/Dynamic.jsx @@ -0,0 +1,10 @@ +export default { + $schema: 'http://amis.baidu.com/v2/schemas/page.json#', + title: '动态表格', + subTitle: '返回表格数据的同时返回列信息', + body: { + type: 'crud', + api: + 'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/crud/dynamic?waitSeconds=1' + } +}; diff --git a/examples/components/Example.tsx b/examples/components/Example.tsx index c8c9decd7..490da6a0d 100644 --- a/examples/components/Example.tsx +++ b/examples/components/Example.tsx @@ -50,6 +50,7 @@ import HeaderGroupSchema from './CRUD/HeaderGroup'; import HeaderHideSchema from './CRUD/HeaderHide'; import LoadOnceTableCrudSchema from './CRUD/LoadOnce'; import ExportCSVExcelSchema from './CRUD/ExportCSVExcel'; +import CRUDDynamicSchema from './CRUD/Dynamic'; import SdkTest from './Sdk/Test'; import JSONSchemaForm from './Form/Schem'; import SimpleDialogSchema from './Dialog/Simple'; @@ -367,6 +368,11 @@ export const examples = [ label: '导出 Excel/CSV', path: '/examples/crud/export-excel-csv', component: makeSchemaRenderer(ExportCSVExcelSchema) + }, + { + label: '动态列', + path: '/examples/crud/dynamic', + component: makeSchemaRenderer(CRUDDynamicSchema) } // { // label: '测试', diff --git a/mock/crud/dynamic.js b/mock/crud/dynamic.js new file mode 100644 index 000000000..8aea9818e --- /dev/null +++ b/mock/crud/dynamic.js @@ -0,0 +1,447 @@ +module.exports = function (req, res) { + const perPage = 10; + const page = req.query.page || 1; + let items = data.concat(); + + if (req.query.keywords) { + const keywords = req.query.keywords; + items = items.filter(function (item) { + return ~JSON.stringify(item).indexOf(keywords); + }); + } + + const ret = { + status: 0, + msg: 'ok', + data: { + count: items.length, + rows: items.concat().splice((page - 1) * perPage, perPage), + columns: [ + { + label: 'ID', + name: 'id' + }, + { + label: '引擎', + name: 'engine' + }, + { + label: '浏览器', + name: 'browser' + }, + { + label: '平台', + name: 'platform' + } + ] + } + }; + + res.json(ret); +}; + +const data = [ + { + engine: 'Trident', + browser: 'Internet Explorer 4.0', + platform: 'Win 95+', + version: '4', + grade: 'X' + }, + { + engine: 'Trident', + browser: 'Internet Explorer 5.0', + platform: 'Win 95+', + version: '5', + grade: 'C' + }, + { + engine: 'Trident', + browser: 'Internet Explorer 5.5', + platform: 'Win 95+', + version: '5.5', + grade: 'A' + }, + { + engine: 'Trident', + browser: 'Internet Explorer 6', + platform: 'Win 98+', + version: '6', + grade: 'A' + }, + { + engine: 'Trident', + browser: 'Internet Explorer 7', + platform: 'Win XP SP2+', + version: '7', + grade: 'A' + }, + { + engine: 'Trident', + browser: 'AOL browser (AOL desktop)', + platform: 'Win XP', + version: '6', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Firefox 1.0', + platform: 'Win 98+ / OSX.2+', + version: '1.7', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Firefox 1.5', + platform: 'Win 98+ / OSX.2+', + version: '1.8', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Firefox 2.0', + platform: 'Win 98+ / OSX.2+', + version: '1.8', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Firefox 3.0', + platform: 'Win 2k+ / OSX.3+', + version: '1.9', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Camino 1.0', + platform: 'OSX.2+', + version: '1.8', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Camino 1.5', + platform: 'OSX.3+', + version: '1.8', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Netscape 7.2', + platform: 'Win 95+ / Mac OS 8.6-9.2', + version: '1.7', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Netscape Browser 8', + platform: 'Win 98SE+', + version: '1.7', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Netscape Navigator 9', + platform: 'Win 98+ / OSX.2+', + version: '1.8', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Mozilla 1.0', + platform: 'Win 95+ / OSX.1+', + version: '1', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Mozilla 1.1', + platform: 'Win 95+ / OSX.1+', + version: '1.1', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Mozilla 1.2', + platform: 'Win 95+ / OSX.1+', + version: '1.2', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Mozilla 1.3', + platform: 'Win 95+ / OSX.1+', + version: '1.3', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Mozilla 1.4', + platform: 'Win 95+ / OSX.1+', + version: '1.4', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Mozilla 1.5', + platform: 'Win 95+ / OSX.1+', + version: '1.5', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Mozilla 1.6', + platform: 'Win 95+ / OSX.1+', + version: '1.6', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Mozilla 1.7', + platform: 'Win 98+ / OSX.1+', + version: '1.7', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Mozilla 1.8', + platform: 'Win 98+ / OSX.1+', + version: '1.8', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Seamonkey 1.1', + platform: 'Win 98+ / OSX.2+', + version: '1.8', + grade: 'A' + }, + { + engine: 'Gecko', + browser: 'Epiphany 2.20', + platform: 'Gnome', + version: '1.8', + grade: 'A' + }, + { + engine: 'Webkit', + browser: 'Safari 1.2', + platform: 'OSX.3', + version: '125.5', + grade: 'A' + }, + { + engine: 'Webkit', + browser: 'Safari 1.3', + platform: 'OSX.3', + version: '312.8', + grade: 'A' + }, + { + engine: 'Webkit', + browser: 'Safari 2.0', + platform: 'OSX.4+', + version: '419.3', + grade: 'A' + }, + { + engine: 'Webkit', + browser: 'Safari 3.0', + platform: 'OSX.4+', + version: '522.1', + grade: 'A' + }, + { + engine: 'Webkit', + browser: 'OmniWeb 5.5', + platform: 'OSX.4+', + version: '420', + grade: 'A' + }, + { + engine: 'Webkit', + browser: 'iPod Touch / iPhone', + platform: 'iPod', + version: '420.1', + grade: 'A' + }, + { + engine: 'Webkit', + browser: 'S60', + platform: 'S60', + version: '413', + grade: 'A' + }, + { + engine: 'Presto', + browser: 'Opera 7.0', + platform: 'Win 95+ / OSX.1+', + version: '-', + grade: 'A' + }, + { + engine: 'Presto', + browser: 'Opera 7.5', + platform: 'Win 95+ / OSX.2+', + version: '-', + grade: 'A' + }, + { + engine: 'Presto', + browser: 'Opera 8.0', + platform: 'Win 95+ / OSX.2+', + version: '-', + grade: 'A' + }, + { + engine: 'Presto', + browser: 'Opera 8.5', + platform: 'Win 95+ / OSX.2+', + version: '-', + grade: 'A' + }, + { + engine: 'Presto', + browser: 'Opera 9.0', + platform: 'Win 95+ / OSX.3+', + version: '-', + grade: 'A' + }, + { + engine: 'Presto', + browser: 'Opera 9.2', + platform: 'Win 88+ / OSX.3+', + version: '-', + grade: 'A' + }, + { + engine: 'Presto', + browser: 'Opera 9.5', + platform: 'Win 88+ / OSX.3+', + version: '-', + grade: 'A' + }, + { + engine: 'Presto', + browser: 'Opera for Wii', + platform: 'Wii', + version: '-', + grade: 'A' + }, + { + engine: 'Presto', + browser: 'Nokia N800', + platform: 'N800', + version: '-', + grade: 'A' + }, + { + engine: 'Presto', + browser: 'Nintendo DS browser', + platform: 'Nintendo DS', + version: '8.5', + grade: 'C' + }, + { + engine: 'KHTML', + browser: 'Konqureror 3.1', + platform: 'KDE 3.1', + version: '3.1', + grade: 'C' + }, + { + engine: 'KHTML', + browser: 'Konqureror 3.3', + platform: 'KDE 3.3', + version: '3.3', + grade: 'A' + }, + { + engine: 'KHTML', + browser: 'Konqureror 3.5', + platform: 'KDE 3.5', + version: '3.5', + grade: 'A' + }, + { + engine: 'Tasman', + browser: 'Internet Explorer 4.5', + platform: 'Mac OS 8-9', + version: '-', + grade: 'X' + }, + { + engine: 'Tasman', + browser: 'Internet Explorer 5.1', + platform: 'Mac OS 7.6-9', + version: '1', + grade: 'C' + }, + { + engine: 'Tasman', + browser: 'Internet Explorer 5.2', + platform: 'Mac OS 8-X', + version: '1', + grade: 'C' + }, + { + engine: 'Misc', + browser: 'NetFront 3.1', + platform: 'Embedded devices', + version: '-', + grade: 'C' + }, + { + engine: 'Misc', + browser: 'NetFront 3.4', + platform: 'Embedded devices', + version: '-', + grade: 'A' + }, + { + engine: 'Misc', + browser: 'Dillo 0.8', + platform: 'Embedded devices', + version: '-', + grade: 'X' + }, + { + engine: 'Misc', + browser: 'Links', + platform: 'Text only', + version: '-', + grade: 'X' + }, + { + engine: 'Misc', + browser: 'Lynx', + platform: 'Text only', + version: '-', + grade: 'X' + }, + { + engine: 'Misc', + browser: 'IE Mobile', + platform: 'Windows Mobile 6', + version: '-', + grade: 'C' + }, + { + engine: 'Misc', + browser: 'PSP browser', + platform: 'PSP', + version: '-', + grade: 'C' + }, + { + engine: 'Other browsers', + browser: 'All others', + platform: '-', + version: '-', + grade: 'U' + } +].map(function (item, index) { + return Object.assign({}, item, { + id: index + 1 + }); +}); diff --git a/src/renderers/CRUD.tsx b/src/renderers/CRUD.tsx index 03892b108..c4b3bde39 100644 --- a/src/renderers/CRUD.tsx +++ b/src/renderers/CRUD.tsx @@ -2041,6 +2041,7 @@ export default class CRUD extends React.Component { 'body', { ...rest, + columns: store.columns ?? rest.columns, type: mode || 'table' }, { diff --git a/src/store/crud.ts b/src/store/crud.ts index b38f4eff9..1a2457a2b 100644 --- a/src/store/crud.ts +++ b/src/store/crud.ts @@ -37,6 +37,7 @@ export const CRUDStore = ServiceStore.named('CRUDStore') mode: 'normal', hasNext: false, selectedAction: types.frozen(), + columns: types.frozen(), items: types.optional(types.array(types.frozen()), []), selectedItems: types.optional(types.array(types.frozen()), []), unSelectedItems: types.optional(types.array(types.frozen()), []), @@ -242,6 +243,7 @@ export const CRUDStore = ServiceStore.named('CRUDStore') hasNext, items: oItems, rows: oRows, + columns, ...rest } = result; @@ -297,6 +299,12 @@ export const CRUDStore = ServiceStore.named('CRUDStore') data.count = data.total = rowsData.length; } + if (Array.isArray(columns)) { + self.columns = columns.concat(); + } else { + self.columns = undefined; + } + self.items.replace(rowsData); self.reInitData(data, !!(api as ApiObject).replaceData); options.syncResponse2Query !== false &&