https://ice.work/

简单而友好的前端研发体系，海量可复用物料，搭配 GUI 工具极速构建前端应用。提供多种垂直领域模板和区块，快速创建项目，支持风格切换，满足个性化需求。物料自由搭配，开发调试一体化，覆盖项目研发的全流程管理，开箱即用。丰富模板一键创建，提供多种垂直领域模板，基于 GUI 工具快速创建项目，支持风格切换，满足个性化需求

安装、启动

https://ice.work/docs/iceworks/quick-start

$ npm install iceworks -g

运行：

$ iceworks # open http://localhost:8000/

image.png

新建页面

image.png

选择模板，可以多个模板组合：

image.png

填写路由、显示名

image.png

会自动生成页面文件：

image.png

自动添加路由

image.png

自动添加到menu：

image.png
image.png

修改menu名字

先切换成中文

image.png

/Users/laker/code/athena-admin/src/locales/zh-CN/menu.js
添加中文显示（英文menu同理）：

'app.menu.deliveryreview': '物流审核',

image.png

axios

https://alligator.io/react/axios-react/

npm install axios --save

import axios from 'axios';

componentDidMount() {
    axios
      .get(
        '...',
        {
          crossDomain: true, // 跨域还需要后台开启允许跨域
          params: {
            index: 1,
            length: 5
          }
        }
      )
      .then(res => {
        const orders = res.data;
        this.setState({ orders });
      });
  }

默认模板警告 getRowClassName

报错

index.js:2178 Warning: [ getRowClassName ] is deprecated at [ Table ], use [ getRowProps ] instead of it.
in Config(StickyTable) (created by Index)
in Index (created by Anonymous)
in Anonymous (created by Router.Consumer)
in Router.Consumer (created by Route)
in Route (created by component)
in component (created by Router.Consumer)
in Router.Consumer (created by Route)
in Route

出错位置，原因getRowClassName被弃用，改为getRowProps

<Table getRowClassName={getRowClassName}>

改为

<Table  getRowProps={getRowClassName} >

还报错，要求改为rowProps：

Warning: [ getRowProps ] is deprecated at [ Table in 1.15.0 ], use [ rowProps ] instead of it.
in Config(StickyTable) (created by Index)
in Index (created by Anonymous)
in Anonymous (created by Router.Consumer)
in Router.Consumer (created by Route)

再改为rowProps：

<Table  rowProps={getRowClassName} >

警告 Invalid prop rowSelection

index.js:2178 Warning: Failed prop type: Invalid prop rowSelection of type function supplied to Config(StickyTable), expected object.

出错位置：

<Table rowSelection={handleRowSelection}  >

警告里没有写推荐属性，我看了下handleRowSelection的作用，应该是处理选择事件，查了下文档，https://ice.work/component/table ，它的值要求是object，而这里用了function

    /**
     * 选中当前行的回调
     */
    const handleRowSelection = (selectedRowKeys, records) => {
      console.log('selectedRowKeys:', selectedRowKeys);
      console.log('records:', records);
    };

image.png

有个onRowClick，也可以用来处理点击事件：

<Table  onRowClick={handleRowSelection} >

table

<Table dataSource={数据源} hasBorder={false}>
            <Table.GroupHeader cell={表头显示的内容的方法} /> 
            <Table.Column
              title="订单"
              width={400}
              dataIndex="数据源.detail"
              cell={renderOrderInfo}
            />
            <Table.Column title="状态" dataIndex="数据源.关键字" width={120} />
            <Table.Column cell={testFun} title="数据源.关键字" width={100} />
          </Table>

数据源.关键字 只能是一个关键字，如果想在一个单元格显示多个数据，要进行拼接JSON。
例如这里把多个数据重新拼接到detail，才能在一个单元格显示多个数据

        for (let i in orders) {
          // console.dir(i + ' : ' + orders[key]);
          const detail = {
            consignee: orders[i].consignee,
            area: orders[i].area,
            address: orders[i].address,
            city: orders[i].city,
            mobile: orders[i].mobile,
            province: orders[i].province,
            order_sn: orders[i].order_sn,
            created_at: orders[i].created_at
          };
          orders[i].detail = detail;
        }

<Table.Column dataIndex="数据源.detail"   />

image.png