设计开发平台列表页开发指导

列表页面引入 js、css

<link href="../../build/common/base.css" rel="stylesheet">
<script type="text/javascript" src="../../build/common/base.js"></script>
<script type="text/javascript" src="../../build/common/gridList.js"></script>

列表检索

搜索框部分请参考已有列表页面，如用户列表页，替换 搜索内容 input 框 id

id 的规则如下： filter$VLK
filter : 为过滤的字段名，默认为数据库字段名
$ : 为分隔符
V : 为字段类型标识，可选 V(VARCHAR)，N(NUMBER)，D(DATE)（会通过类型来进行转换）
LK: 后面部分为查询条件，可选 EQ 相等、LT 小于、GT 大于、 LK 相似、LFK 、IN 、NOT_IN

eg：fullname_$VLK 为 like 搜索 数据库字段为 fullname_ 的数据

数据表格

数据表格使用 bootstrap table 具体配置参考文档
可以参考definitionList.html页面

列表中弹窗

openDialog

  • 入参
    • url : 弹出窗的URL地址，支持{}替换row 具体字段值，如 {id} 可取到 row.id 的值
    • openDialog: 弹出窗的title，支持{}替换row具体字段值
    • top：boolean 值，是否以顶层浏览器全屏弹出，默认false
  • 用法：
    openDialog="启动" top="true" url="bpm/definition/start.html?defId={id}"

自定义请求

sendAction

  • 入参
    • url : 后台请求的地址，支持{}替换row 具体字段值，如 {id} 可取到 row.id 的值
    • sendAction: 确认的提示描述
  • 用法：
    如: 点击该按钮后，会提示，是否确认删除，点击确认会向后台 携带id参数发起一个请求，后台反馈标准的resultMsg后，浏览器会提示操作结果，如删除成功
    <span class="fa-trash btn btn-outline btn-primary btn-sm" qtip='删除' sendAction="删除" url="bpm/definition/remove?id={id}"></span>

agilebpm 内置 BootstrapTable 的格式化方法

  • labelFormatter： 格式化常量值、数据字典值，并以不同的风格样式展示
  • dateFormatter： 日期格式化
  • dateTimeFormatter： 时间格式化
  • innerHtmlFormatter： 将text内容格式化成HTML，如管理列，所有内容支持 {} 替换 row 的属性，如 {id} 可取值 row.id
  • maxLengthFormatter30: 长文本格式化，当超出30个字符时，自动以省略号结尾，并 title 形式展示全部内容
  • maxLengthFormatter50: 长文本格式化，当超出50个字符时，自动以省略号结尾，并 title 形式展示全部内容
  • maxLengthFormatter60: 长文本格式化，当超出60个字符时，自动以省略号结尾，并 title 形式展示全部内容

更多格式化请自定义function实现

function custFormat(value,row,index){
	return '格式化后的HTML代码';
}

data-formatter="custFormat"

重新查询列表页数据

拿到列表页window后可以直接通过 reloadGrid() 方法 重新加载列表页数据

案例

<table ab-grid data-id-field="id" data-url="bpm/definition/listJson">
 <thead>
  <tr>
   <th data-checkbox="true">序号</th>
   <th data-field="name">名称</th>
   <th data-field="key">流程定义KEY</th>
   <th data-field="actDefId">ActDefId</th>
   <th data-field="status" data-formatter="labelFormatter"
   	data-value-style="publish-发布-primary,forbidden-禁用-warning,draft-草稿-info,">状态</th>
   <th data-field="version">版本</th>
   <th data-field="desc">描述</th>
   <th data-field="id" data-formatter="innerHtmlFormatter" data-title="管理">
   	<span class="fa-trash btn btn-outline  btn-primary btn-sm" qtip='删除' sendAction="删除" url="bpm/definition/remove?id={id}"></span>
   	<span class="fa-edit btn btn-outline btn-primary btn-sm" qtip='流程设计' openDialog="流程设计" top="true" url="/flow-editor/modeler.html?modelId={actModelId}"></span>
   	<span ng-if="{status}=='publish'" class="fa-send btn btn-outline btn-primary btn-sm" qtip='启动' openDialog="启动" top="true" url="bpm/definition/start.html?defId={id}"></span>
   </th>
  </tr>
 </thead>
</table>

其他

列表页更多用法以及源码实现请参考 /assets/js/common/grid.js