跳到主要内容

本地开发示例

备注

在页面所有示例中,项目后端 API 服务使用在线平台项目 try run 地址:https://zhangdong-test-project.ceta-dev.test.bizops.com.cn/

准备工作

修改项目 webpack.config.js proxy 地址为你的项目后端 API 服务地址:

code-example-1

添加一个平台没有的组件到表单中

使用 src/pbcCode 中的表单和页面 JS 源码启动项目:

yarn start:code
备注

此示例添加一个平台组件库不支持的 Ant Design 的 Carousel 组件 https://ant.design/components/carousel

项目地址 /ui/inline-edit-demo/form/inline-edit-demo-form/layout/new 有一个表单如下:

code-example-1-1

对应的 JS 文件代码如下:

code-example-1-2

此时想要在该布局中添加一个 Ant Design 的 Carousel 组件。

按照 Ant Design 官网示例,添加代码如下:

code-example-1-3

最终效果如下:

code-example-1-4

开发一个完全独立的页面

备注

此示例添加一个完全自主开发的页面,脱离 PBC 的表单和页面。

此示例与 src/pbc 的 JSON 源码和使用 src/pbcCode 中的 JS 源码无关,所以使用启动项目脚本:

yarn start

或者

yarn start:code

都可以。

第一步,在 App.js 中添加自定义路由,添加自定义页面组件,引用该组件。

code-example-2-1

第二步,通过菜单或者链接访问到该页面。 根据上一步的自定义路由,页面访问地址为 /ui/my-page

code-example-2-2

第三步,编写任意 js 代码。

code-example-2-3

操作表格

使用 src/pbcCode 中的表单和页面 JS 源码启动项目:

yarn start:code

如下示例代码为在表格工具栏添加自定义按钮获取并操作选中行的数据:

code-example-3-1

引入三方图表库开发自定义 dashboard

备注

此示例添加一个平台不支持的三方开源图表图 Recharts,官方文档地址:https://recharts.github.io/

此示例与 src/pbc 的 JSON 源码和使用 src/pbcCode 中的 JS 源码无关,所以使用启动项目脚本:

yarn start

或者

yarn start:code

都可以。

以第二个示例 开发一个完全独立的页面 为例,在其中的自定义页面添加自定义图表库。

第一步,安装 dependency,在项目根目录运行:

yarn add recharts -E

第二步,编写页面代码。

code-example-4-1

该示例代码源码在此处:https://recharts.github.io/en-US/examples/SimpleRadialBarChart/

访问页面效果如图:

code-example-4-2