5.5-iuap应用平台前端培训_案例开发（实现查看和编辑）.md

实现查看和编辑

以角色管理为例。 将增加，编辑，查看作为一个页面，通过传入不同的props来设置是否可以编辑

1. 编写 新增 页面。 Edit.js 包括其路由注册，数据模型，容器组件，services

注意：此页面需要获得form数据以及校验。需要引入 bee-form 并包装组件。 参考 5.2-iuap应用平台前端培训_案例开发（完成搜索表单） 中 form表单的编写

2. 在首页 table的 column 中通过render方法增加编辑等操作按钮，例如

{
        title: "操作",
        dataIndex: "e",
        key: "e",
        render(text,record,index){
            return (
                <div className='operation-btn'>
                    <Button size='sm' className='edit-btn' onClick={()=>{self.edit(true,record)}}>编辑</Button>
                    <Button size='sm' className='detail-btn' onClick={()=>{self.edit(false,record)}}>查看</Button>
                </div>
            )
        }
    },

3. 添加事件监听 mirror 路由跳转参考

edit=(editFlag,record)=>{ //通过传入不同的 editFlag 来判断当前是否可以编辑
    actions.routing.push({
        pathname:'roleedit',
        editObj:record||{},
        editFlag:editFlag
    })
}