![](/theme/default/default/images/main/icon-menu.png)
![](/theme/default/default/images/main/icon-close-2x.png)
![](https://cdn.easycorp.cn/web/data/upload/zentao/202402/f_0c7d40c83be2425f404dc4bd5ee778cb.png)
- 1 禅道二次开发简介
- 2. 禅道扩展开发
- 2.1 禅道扩展机制简介
- 2.2. 新增独立模块
- 2.2.1 基本的代码组织
- 2.2.2 新增控制层(control/zen)
- 2.2.3 新增模型层(model/tao)
- 2.2.4 新增视图层(view/ui)
- 2.2.5 新增语言项lang和配置项config
- 2.2.6 新增前端样式CSS和JavaScript
- 2.3. 修改已有模块
- 2.3.1 对控制层(control/zen)扩展
- 2.3.2 对模型层(model/tao)扩展
- 2.3.3 对视图层(ui)扩展
- 2.3.4 对样式表CSS和JavaScript进行扩展
- 2.3.5 对多语言和配置进行扩展
- 2.4. 常用类库
- 3. 禅道API
- 3.1 API机制简介
- 3.2 需要登录验证的API调用
- 4 命令行调用
新增视图层(view/ui) 分享链接
一、文件位置
禅道的视图层在ui目录里编写,18系列版本的视图文件在view目录里,20版本的代码都是在ui目录进行编写。
还是以oa模块为例,新增一个browse页面,需要增加一个extension/custom/oa/ui/browse.html.php文件。
二、代码编写
之前禅道的视图文件直接使用PHP+原始HTML拼接进行渲染的,代码封装度不够、很多组件无法复用,导致开发效率低、页面风格不一致。为了解决这些问题,禅道视图层采用了新的组件式开发方式zin进行编写。
具体的说明和写法请参阅zin的官方文档 https://openzui.com/zin/
一、zin命名空间
<?php namespace zin;
每个ui文件都需要首先声明命名空间zin。
二、使用zin编写页面
禅道的每个页面都是使用组件的方式进行开发的,每个组件都是一个PHP方法。以span标签为例:
<span class="text-lg font-bold">示例</span>
使用zin改为组件形式:
span ( '示例', setClass('text-lg font-bold') );
三、基础组件
如果想了解禅道所有的基础组件,可以参阅组件的代码。所有内置组件代码都在 lib/zin/wg 目录下,比如dtable组件是在 lib/zin/wg/dtable。
在编写页面的过程中,可以参考禅道已有的相似页面,以便快速实现功能。
禅道ui常见的基础组件有:
1. 表格列表 dtable
2. 表单 formGridPanel
3. 模块树菜单 moduleMenu
4. 功能菜单栏 featureBar
5. 右上角操作栏 toolbar
6. 左侧侧边栏 sidebar
7. 编辑器 editor