前言
上章我们说了，如何搭建一个自己想要的后台页面。那本章我们就来说一说，这个页面的接口调用，以及如果在这个页面中完成新增与编辑功能。
一、开发前：
开发前我们先来看一下本章我们的目标是什么样的呢？
如下：
1. 我们需要完成列表数据展示。
2. 我们需要完成顶部所属医院的筛选
3. 我们需要完成创建科室
4. 我们需要完成修改科室。在点击修改的时候需要赋值给表单。当修改完成后，表格需要立即刷新。
二：开发步骤
1. 对接后台api。我们需要链接项目到实际的api请求地址。确保我们项目可与获取到token等有效信息。（此处不会的可与翻看之前的，我们有具体讲解过如何对接后台接口）。
2. 对接完后，我们需要给页面增加初始化调用机制，也就是页面一打开的时候就获取表格数据。
这里要强调的是与之前有所不一致，因为，之前我们都是放在生命周期里，而本次我们使用的是已经被封装好的组件中，所以我们需要使用ProTable的request 方法来进行数据请求。
官网对 ProTable的 request的介绍是这样说的
通过官网介绍，我们可以知道，request就是我们获取表格dataSource的办法没有之一。它其中也包含了分页信息，loading，查询表单的值等信息。因为我们这里使用的是自定义筛选表单，所以查询表单在此处跟我们没有多大意义。
所以此处的代码我们将如上。
其中，PageIndex 与 PageSize 为查询时候传递给后台的分页条件。pageRequest 为分页查询的时候传递给后台其它数据 如：查询 、搜索等其它数据。
因为官网有说个，我们在获取数据后必须要返回一个对象，这个对象中必须包括：data（表格数据）、success（Boolean，是否成功），total（查询到的数据总数）。而且只有当其中的success 返回true，并且data 不为空，total 不为0的时候，才会有数据。
其实这里的request 就相当于我们页面打开的时候发了一次请求，调用了 getOfficePageList 这个接口。并且传递了相应参数。
3. 新增/编辑表单
完成了页面数据后，我们就需要新增与编辑操作了。
一般来说，新增与编辑是相同的，只不过新增的时候要求都为空，而编辑的时候，需要将现有数据赋值给表单。
所以我们先完成新增操作。编辑也就基本完成了。
在office/component 下新建index.tsx 文件。在这个文件中我们引入 ModalForm（浮层组件） 这个组件。
同时在浮层组件中，我们需要引入 ProForm。表单组件，毕竟后续的增改我们都是需要表单的。
<ModalForm > <ProForm.Group> <div style={{ width: '700px' }}> <ProFormSelect width="md" name="hospitalID" label="所属医院" rules={[{ required: true, message: '请选择所属医院' }]} options={ hospitalList } /> </div> <ProFormText width="md" name="officeName" label="科室名称" tooltip="最长为 50 位" placeholder="请输入科室名称" rules={[ { required: true, message: '请输入1~50位科室名称' }, { min: 1, max: 50, message: '长度在 1 到 50 个字符', }, ]} /> </ProForm.Group> </ModalForm>
修改完成大概如上，其中所属医院下拉框中的 options的值，是我调接口获取的。大家可以随便写。不一定这里的参数要跟我一样。
当如上完成后，下来我们则需要给ModalForm （浮层组件）添加它的所需属性如：title，visible，onFinish，onVisibleChange 等。
其中，title就是 弹框的 名称
visible 则为是否展示弹框的值。默认为false （不展示）
onFinish 为点击确定按钮触发的事件，在这里我们添加调用保存或者修改的后台接口。
onVisibleChange 为 visible 改变时候触发。
<ModalForm formRef={restFormRef} title={formTitle} modalProps={{ forceRender: true, }} visible={modalVisit} onFinish={async (values) => { const dataobj = { ...data, ...values, }; const res = await postOffice(dataobj); if (res.status === 200) { message.success('提交成功'); setQueryData(new Date().getTime()); return true; } else { return false; } }} onVisibleChange={setModalVisit} > <ProForm.Group> <div style={{ width: '700px' }}> <ProFormSelect width="md" name="hospitalID" label="所属医院" rules={[{ required: true, message: '请选择所属医院' }]} options={ hospitalList } /> </div> <ProFormText width="md" name="officeName" label="科室名称" tooltip="最长为 50 位" placeholder="请输入科室名称" rules={[ { required: true, message: '请输入1~50位科室名称' }, { min: 1, max: 50, message: '长度在 1 到 50 个字符', }, ]} /> </ProForm.Group> </ModalForm>
修改完后，我们的代码就长如上的样子。在onFinish 中我们增加了新增后台接口调用方法。
这时候还有个问题就是，当我们没新增一个信息的时候，主页面的table需要新增一条信息，按照我们往常的操作，我们需要再调用一次查询分页接口就行，但是如今我们没办法，那应该怎么搞呢？
答案是： 有的搞。
在ProTable 中有个属性为 params，官网是这样解释的，当它的值发生变化后，request 会重新执行。
所以这也就是为什么，上面代码中，我在新增完成后执行了一个方法
setQueryData(new Date().getTime());
setQueryData 这个方法就是由主ProTable页面传递给 浮层表单这个组件中的。
而它的使用则是在 ProTable的 params中。
所以这下伙计们懂了吧。当我们新增完后点击保存，这时候我们需要触发一个方法改变params的值，这样ProTable的request 就可以重新触发，我们拿到最新值。这里当然了 大家可以任意放置东西哈，不一定跟我一样这么写。只要确保数据发生变化即可。
好了，到目前为止，弹框打开到保存我们都结束了，现在就差最后一个，如何打开弹框。毕竟到目前为止我们一直没有说打开弹框的事情。
所以在最后我们说一下弹框如何打开。
因为我喜欢用ReactHook。所以这里我则使用ref的方式来打开这个组件。
<HospItalModal ref={cardRef} modalVisit={modalVisible} setModalVisit={setmodalVisible} setQueryData={setQueryData} />
首先我们在主页面中引入浮层弹框组件。同时传入三个值，一个属性与两个方法，属性 modalVisible 为是否打开弹框，setmodalVisible 操作 modalVisible 打开与关闭方法，最后一个setQueryData 则为 ProTable 的params的值，用来出发主表格发生改变。
做完这个后，我们需要在浮层弹框组件中再进行处理。
1. 引入 forwardRef 将在主页面的ref 传递下去。
const Modal = forwardRef( ( { setQueryData: setQueryData, modalVisit: modalVisit, setModalVisit: setModalVisit, hospitalList: hospitalList }: Props, ref, ) => { // ... })
2. 在浮层组件中，使用 useImperativeHandle 来接收ref组件及调用后的方法。
3. 我们在主页面中主要声明 浮层组件的ref，并在新增时候进行调用。
如上，在主页面通过ref 调用的 current下的add方法，则就是 浮层组件中的 add 方法。
我们这时候就完成了页面功能的新增。
剩下的编辑我就不写了，大体与新增一致，只不过多了渲染一部分。这时候大家多动脑自行编写，有疑问可以随时留言给我。
总结：
本章节，跟大家从上个章节遗留的tabel数据获取到页面数据的新增，以及浮层组件的建立，使用ref 调用子组件的操作等。基本带大家熟悉了一大圈，到目前为止，属于干活的ant design pro 的基本使用内容已经告一段落了。下一章就给大家说一说最热门关心的，ant design pro如何部署上线问题。
好了。大家如果还有疑问，欢迎随时留言讨论。
