最近用 antd pro 開發了一些 web 小工具。

antd pro 不僅僅是升級版的 antd 組件，更重要的是提供了全套的前端解決方案，包括前端工程的編譯打包，路由配置，數據管理，樣式和資源的引用，和後端的交互方式。
甚至對於網站的國際化也有支持。

本篇是近期使用antd pro 時，用到的一些功能的整理，整理這些內容是因為比較常用，省得每次在 antd pro 的官方文檔中去搜索。

菜單部分

antd pro一般用在後臺的管理系統，所以菜單部分是重中之重，antd pro 的菜單是集中在一個文件中（config/routes.ts）配置的，非常方便。

子菜單配置

管理系統中，隨著管理粒度的細分，子菜單是必不可少的，antd pro中配置菜單主要在2個地方：

• config/routes.ts
• src/locales/zh-CN/menu.ts

配置子菜單的路由：

{
  path: 'auth',  // 一級菜單路由
  name: 'auth',  // 一級菜單名稱
  icon: 'team',  // 一級菜單
  routes: [
    {
      path: '/auth/user',                 // 二級菜單路由
      name: 'user',                       // 二級菜單名稱
      component: './auth/user/UserList',  // 二級菜單對應的模塊
    },
  ],
}

繼續在 path: '/auth/user'中配置 routes:[ ... ]就能形成三級菜單

配置菜單的名稱：

'menu.auth': '認證許可權',
'menu.auth.user': '用戶管理',

隱藏的菜單

有時候，我們配置的一些路由並不希望它出現在菜單中，比如一些新增，修改頁面，在頁面跳轉中會出現，但是不需要顯示在菜單中，這時，只需如下設置：

{
    path: '/data/:data_id/detail',
    name: 'data.detail',
    hideInMenu: true,       // 隱藏此路由在菜單中的顯示
    component: './data/detail/DataDetailList',
  },

table組件

ProTable 是 antd pro 中的重要組件，實際上我是通過使用 ProTable 才開始逐漸使用 antd pro 的。
這個組件可以方便的在表格中展示各種形態的數據，也很好的集成了分頁和檢索功能，基本上，只要準備好要展示的數據，配置下表格的各個列，數據的展示和基本的互動都自動完成了。

這裡簡單整理下數據的載入方式：

<ProTable<API.DataDetailItem>
  columns={columns}     // columns 是定義各個列屬性的變數，這裡不再詳細列出了
  rowKey="id"
  rowClassName={getRowClassName}  // 這裡可以自定義一個函數，突出顯示正在操作的行
  actionRef={tableRef}
  headerTitle={`【${dataSource}】的明細數據`}
  search={{
    labelWidth: 'auto',
  }}
  toolBarRender={() => [  // 這裡其實可以定義一系列操作表格的按鈕或其他組件
    <Button
      key="button"
      icon={<PlusOutlined />}
      type="primary"
      onClick={() => {
        setModalAddVisible(true);
      }}
    >
      新建
    </Button>,
  ]}
  request={async (params: API.DataDetailItem & API.PageInfo) => {
    const resp = await getDataDetailList(params);  // getDataDetailList 是自定義的請求後臺數據的API
    return {
      data: resp.data.data_detail,
      total: resp.data.data_detail_aggregate.aggregate.count,
    };
  }}
/>

ProTable<API.DataDetailItem>這裡其實是定義了table中要處理的數據類型。
DataDetailItem不用和 table的 column完全一致，返回業務需要返回的數據即可，一般會比 column 要求的內容多。

request屬性可以是一個非同步函數，用來初始化 ProTable 的。
它的參數中包含了分頁信息API.PageInfo和返回的數據類型 API.DataDetailItem，
其中API.PageInfo包含的信息很簡單：

  type PageInfo = {
    pageSize?: number;  // 每頁顯示的數量
    current?: number;   // 當前是哪一頁
  };

而數據類型API.DataDetailItem則是和 ProTable<API.DataDetailItem> 定義的類型相對應。

路由組件

在 antd pro 中，路由就在 config/routes.ts中集中配置，並且可以和菜單關聯，非常簡單。
這裡就整理兩點，一個是頁面中獲取帶參數路由的參數，一個是頁面間的路由跳轉（不是通過菜單來跳轉路由）。

帶參數的路由

路由配置在 config/routes.ts中：

{
  path: '/data/:data_id/meta',
  name: 'data.meta',
  hideInMenu: true,
  component: './data/meta/MetaDataList',
}

在對應的頁面中，可以這樣獲取路由中的參數 data_id

import { useParams } from 'umi';

type MetaDataParams = {
  data_id: string;
};  // 定義路由參數的類型，這裡只有一個參數 data_id

export default () => {
  const urlParams = useParams<MetaDataParams>();
	console.log(urlParams.data_id);
}

路由跳轉

通過菜單的跳轉不用額外配置，只要在 config/routes.ts中定義即可。
除此之外，還有一些頁面跳轉時不通過菜單的，比如從列表頁面到明細頁面，

列表頁面的跳轉：

import { history } from 'umi';

// 省略.... ....
<Button
  type="link"
  size="small"
  key="detail"
  onClick={() => {
    history.push('/data/' + rd.id + '/detail');
  }}
>
  明細
</Button>,
// 省略.... ....

明細頁面返回列表頁面：

import { history } from 'umi';


// 省略.... ....
<Button
  key="back"
  icon={<RollbackOutlined />}
  onClick={() => {
    history.goBack();
  }}
>
  返回
</Button>,
// 省略.... ....

頁面初始化

其實，antd pro 的數據展示組件基本都有 request屬性，用來初始化其中的數據，比如上面提到的 ProTable 組件。

但是，有時候在詳情或者編輯頁面，還是會需要載入一些其他的數據，這時候，就需要在頁面載入時初始化一些數據，本質上這是 React 的功能，而不是 antd pro 的功能。

比如，詳情頁面根據ID載入其他信息：

import { useState, useEffect } from 'react';
import { history, useParams } from 'umi';

type MetaDataParams = {
  data_id: string;
};

export default () => {
  const urlParams = useParams<MetaDataParams>();
  const [dataSource, setDataSource] = useState('');
  
  useEffect(() => {
    if (dataSource === '') {
      (async function initDataItem() {
        const d = await getDataById(urlParams.data_id); // getDataById 是訪問後端API的函數
        console.log(d);
        setDataSource(d.data.data_source_by_pk.name || '');
      })();
    }
    console.log('effect');
  }, [dataSource, urlParams]);
}