列表页面引入 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: 为打开一个对话框
  • sendAction: 为发起一个请求,并弹出确认弹框
  • 内置格式化方法: labelFormatter 格式化数据字典不同样式的展示,dateTimeFormatter、 dateFormatter 时间格式化 ,innerHtmlFormatter 将text内容格式化成HTML,如管理列
    <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>