crud 支持数据接口返回动态列配置 (#1788)

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"
+}
+```
+
 ## 属性表
 
 | 属性名                                | 类型                        | 默认值                          | 说明                                                                                                                  |

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'
+  }
+};

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: '测试',

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
+  });
+});

src/renderers/CRUD.tsx

@@ -2041,6 +2041,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
           'body',
           {
             ...rest,
+            columns: store.columns ?? rest.columns,
             type: mode || 'table'
           },
           {

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 &&