前言

前面，我们从第一章的初识拉取项目一直到本章节的正式完成自己的 ant design pro的第一个页面，一路心酸，但是伙伴们能够看到这里也证明大家很优秀，至少坑被我们踩的差不多了，下来我们就跟随脚步一起写我们的第一个完成的页面吧~

一、开发前：

如图，是本章我们需要开发的页面。是不是很好看呢，这就是使用了ant design pro的效果，proComponents 已经封装了许多好看的控件等我们来用，所以我们轻轻松松就可以搭建如上的样子。我们来一起走走试试搭建吧。

在开始之前，我们开始老样子，需要看一下必备文档：所用到的组件。

众所周知， 在ant design pro中，我们使用了若干个组件及框架，就比如：ProComponents 模板组件，它被称为开箱即用，无需我们再次封装。

所以我们在刚开始的时候就需要阅读 ProComponents 文档，来熟悉所需要的组件。ProLayout ProForm ProTable ProCard

1. ProLayout

关于ProLayout 我们其实已经在之前有接触了，它是一个高级布局组件，我们的ant design pro 就是基于 ProLayout 的布局组件搭建成我们喜欢的这个样子的。如果大家忘了，可以返回看一下，src/index.tsx 中的 Layout方法即可。它就是 ProLayout 。

2. ProForm

ProForm 在原来的 Form 的基础上增加一些语法糖和更多的布局设置，帮助我们快速的开发一个表单。同时添加一些默认行为，让我们的表单默认好用。我们只需要简单配置几步即可生成我们想要的样子。

3. ProTable

ProTable 的诞生是为了解决项目中需要写很多 table 的样板代码的问题，所以在其中做了封装了很多常用的逻辑。这些封装可以简单的分类为预设行为与预设逻辑。

依托于 ProForm 的能力，ProForm 拥有多种形态，可以切换查询表单类型，设置变形成为一个简单的 Form 表单，执行新建等功能。

就比如我们刚开始的时候那个页面的底部就是使用的ProTable 来创建的。

如图，红框中全部是由ProTable 来完成的。

所以我们本章的重点也就是，ProTable 以及 ProForm。同时我们还需要再接触一个新的组件。

就是官网文档的 浮层表单。

它在我们点击某个按钮的时候弹出，漂浮在上层。我们本次需要用它来实现我们的新增以及编辑功能。

二：开发流程

1. 新建pages页面

我们需要先在项目的src/pages/创建一个页面，我们起名为：Office，并创建其页面的业务组件component 以及页面的主入口 index.tsx

2. 修改路由配置，增加让其显示出这个页面。

我们需要跟第一章时候一样，在全局的config/routes 中增加这个路由（此处如果有开启了国际化的同学）需要根据之前国际化那章节进行对应的页面增加哦。

如果大家都没错的话，那么打开的页面应该是个空白的。

我在此处为了辨识度，增加了两个字。

3 . 搭建页面

如刚开始页面那样，我们下来是需要搭建页面的。先放置一个ProTable表格，这个是最好处理的。

我们从 ProComponent 文档 找到 ProTable 复制它的【无查询表格】这个示例代码，保存后页面上就是我们目前这个样子。

此处要说一下为什么要使用无查询表格，是因为这里我打算分开写，自定义搜索查询条件，这个是许多朋友在实际开发中碰到的，所以这里分开写自定义查询，让大家走个流程看看。

搞完table后，我们接下来再处理自定义查询，我们继续打开ProComponent文档，找到 筛选表单

复制它的示例代码，粘贴到我们的代码中在 ProTable之上。同时修改了筛选表单里的两个组件。修改之后在页面上的展示如下

这时候，有人要问了，例如刚开始那也的顶部筛选表单是白色的如何做呢？

那个，简单。加个css样式就行

给筛选表单套个DIV    加个样式即可。

再次保存后页面就如下：

基本上与我们刚开始想要的样子差不了多少了，剩下我们只需要修改下各个字段，去除不想要的查看日志、导出数据等字段。

像表格上面这三个按钮在这里直接可以找到。我们删除或者替换即可。

一切修改完成后，我们想要的页面就已经出来了。与刚开始的那样是否一致呢？

总结：

怎么样，是不是很简单，一个页面的搭建就是这样出来的，因为使用了现成的组件，所以需要东西都不需要我们操心，直接放置进来即可。本章就到这里，下一章节就给大家说一下，如何接通后台数据，以及弹框表单进行新增与删除。