MES7.0 开发文档
2025-02-12
目录

列表配置项

# 基础属性

# listOption.name

string

列表名称。

提示

  1. 可在回调事件中通过 listRef.name 获取，用于区分当前是哪个列表的回调事件
  2. 单列表可不指定，多列表必须指定

# listOption.formName

string

定义增加/编辑弹窗打开后的列表名称。

默认值: listOption.name + 'Form'

# listOption.listID

string

列表的唯一标识。若没有，则为 listOption.name

# listOption.bordered

boolean

是否显示边框。

默认值： true

# listOption.grid

object

列表栅格配置 (opens new window)。

# listOption.column

number

[grid] 属性，列数。

可选值： 1、2、3、4、6、8、12、24

# listOption.gutter

number

[grid] 属性，栅格间隔。

默认值： 0

# listOption.xs

number

[grid] 属性，<576px 展示的列数。

# listOption.sm

number

[grid] 属性，≥576px 展示的列数。

# listOption.md

number

[grid] 属性，≥768px 展示的列数。

# listOption.lg

number

[grid] 属性，≥992px 展示的列数。

# listOption.xl

number

[grid] 属性，≥1200px 展示的列数。

# listOption.xxl

number

[grid] 属性，≥1600px 展示的列数。

# listOption.itemLayout

string

设置 List.Item 布局。

默认值： 'horizontal'

可选值： 'horizontal'、'vertical'

# listOption.size

string

列表的尺寸。优先于 size。

# listOption.split

boolean

是否展示分割线。

默认值： true

# listOption.split

boolean

是否展示分割线。

默认值： true

# listOption.component

string | function

指定列表使用的组件。

默认值： 'slot'

# listOption.columns

array<...columns>

列表列的配置项。

提示

  1. 当 component 为 form 或 desc 时，必须配置
  2. 建议都配置。不配，可能会影响高级查询功能
  3. 不同的 component，所需的配置项不同，由指定的 component 组件决定

# listOption.isEditList

boolean

是否是可编辑列表。

默认值： true

提示

目前只有当 component 为 'form' 时有效。

# listOption.isCheckBoxModel

boolean

是否显示选择列。

默认值: false

提示

当 component 为 form 时有效。

# listOption.rowNumber

boolean

是否显示序号列。

默认值: false

# 分页配置

# listOption.isPage

boolean

是否分页。

默认值: true

# listOption.isSelfPage

boolean

是否前端分页。

默认值: false

# listOption.pagination

object

分页配置项。

默认值:

{
  currentPage: 1,
  pageSize: 30,
  total: 0,
  layouts: ['PrevPage', 'JumpNumber', 'NextPage', 'FullJump'],
  pageSizes: [10, 15, 20, 30, 50, 100],
  open: false
}
1
2
3
4
5
6
7
8

object 属性说明:

  • currentPage: number: 当前页数
  • pageSize: number: 每页页数
  • total: number: 数据总数
  • layouts: array: 自定义布局，可选值 'Home', 'PrevJump', 'PrevPage', 'Number', 'JumpNumber', 'NextPage', 'NextJump', 'End', 'Sizes', 'Jump', 'FullJump', 'PageCount', 'Total'
  • pageSizes: number | array<label, string>: 每页大小选项列表

# 查询配置

# listOption.findUrl

string

表格查询请求地址。

# listOption.autoRetrieve

boolean

是否自动发起请求。

默认值: true

# listOption.findForm

array<...columns>

查询条件的列配置项。

array 属性说明:

# listOption.enterSearch

boolean

是否启用回车查询。

默认值: true

# listOption.enabledFindCache

boolean

是否启用查询缓存。关闭后，查询参数仅包含已配置查询条件。

默认值: true

# listOption.hiddenReload

boolean

是否隐藏 刷新 图标按钮。

默认值: false

# listOption.hideReset

boolean

是否隐藏 重置 按钮。

默认值: false

提示

同 AppFindBar - hideReset。

# listOption.findBtn

array<{ header, title, iconCls?, method }>

在查询按钮的位置，使用自定义按钮。

提示

同 AppFindBar - findBtn。

# listOption.moreFind 废弃

boolean

是否显示下拉更多搜索(在...字段中搜索)。

# listOption.showModalFilter

boolean

是否显示弹窗式的高级查询 。

默认值: false

# listOption.showExpandFilter

boolean

是否显示展开式的高级查询。

默认值: false

# listOption.filterFields

array<{ dataIndex }>

支持高级查询的字段列。

array 属性说明:

  • dataIndex: string: 字段编码

# listOption.notFilterFields

array<{ dataIndex }>

不支持高级查询的字段列。

array 属性说明:

  • dataIndex: string: 字段编码

# listOption.lFindBefore

({ that, listRef, back }) => void

查询前事件。相当于 AppList - lFindBefore。

# listOption.lFindAfter

({ that, listRef, res, processRes, url, params, initComplete }) => void

查询后事件。相当于 AppList - lFindAfter。

# listOption.lRetrieveEnd

({ that, listRef, listData, res, url, params, initComplete }) => void

lFindAfter 后执行，相当于 AppList - lRetrieveEnd。

# 按钮组配置

# listOption.tbarReversal

boolean

是否调整 tbar 的位置。true 表示左侧，false 表示右侧。

默认值: false

# listOption.tbar

array<...columns>

功能按钮配置。

array 属性说明:

  • ...columns: 支持 AppToolbar - toolbar 的所有配置
  • method({ editType, checkboxRecords, findFormData, isEditList }): 按钮的点击事件
  • iconCls: string: 按钮的图标
  • hidden: boolean | ({ editType, checkboxRecords, findFormData, isEditList }) => boolean: 是否隐藏按钮
  • disabled: boolean | ({ editType, checkboxRecords, findFormData, isEditList }) => boolean: 是否禁用按钮
  • style: object | ({ editType, checkboxRecords, findFormData, isEditList }) => object: 按钮样式
  • modalOption: object: 辅助输入-弹窗配置，支持 AppModal - modalOption 中的所有属性 不建议使用，推荐使用 method
  • drawerOption: object: 辅助输入-抽屉配置，支持 AppDrawer - drawerOption 中的所有属性 不建议使用，推荐使用 method
  • percode: string: 按钮权限编码
  • reportPrint: boolean: 是否为报表打印按钮，需指定 percode
  • workflow: boolean: 是否为工作流按钮，需指定 percode
  • delList: boolean: 删除是否需要传递行记录，默认 false
  • idsRequestBody: boolean: 删除时，参数是否需要放在 body 中，默认 false
  • saveUrl: string: 保存地址。无论行记录是否变化，都会提交。多用于提交/取消提交操作。

提示

  1. 表格提供了默认的点击事件，只需指定下列属性即可
    • btnId: 'add' | iconCls: 'add': 增加事件
    • btnId: 'del' | iconCls: 'del': 删除事件
    • btnId: 'save' | iconCls: 'save': 保存事件
    • btnId: 'helper' | iconCls: 'helper': 辅助输入事件，需要指定 drawerOption
    • btnId: 'startProcess' | iconCls: 'startProcess': 启动 304 工作流事件
    • btnId: 'upload' | iconCls: 'upload': 文件上传，需要指定 modalOption
  2. 若指定了 method 属性，则认为是需要重写点击事件，默认点击事件将失效
  3. modaOption 只在 isEditList: false 时生效

# 操作列配置

# listOption.noOption

boolean | (editType) => boolean

是否不使用操作列。

默认值: false

方法参数说明:

  • editType: string: 编辑类型。用于区分当前操作 editType

提示

当为 true 时，其它操作列配置都会失效。

# listOption.defaultOption

boolean

是否使用默认的操作列。

默认值: true

# listOption.editOption

array<{}>

操作列的列配置。

array 属性说明:

  • btnId: string: 按钮的功能标识
  • header: string | (row) => string: 按钮名称
  • method: ({ that, listRef, row, rowIndex, editOption }) => void: 按钮的点击事件
  • iconCls: string: 按钮的图标
  • hidden: boolean | (row) => boolean: 是否隐藏按钮
  • disabled: boolean | (row) => boolean: 是否禁用按钮
  • modalOption: object: 辅助输入-弹窗配置，支持 AppDrawer - drawerOption 中的所有属性 不建议使用，推荐使用 method
  • drawerOption: object: 辅助输入-抽屉配置，支持 AppDrawer - drawerOption 中的所有属性 不建议使用，推荐使用 method
  • confirm: object: 是否带确认提示信息
    • title: string: 确认提示信息标题
    • okText: string: 确定按钮文字，默认 '确认'
    • cancelText: string: 取消按钮文字，默认 '取消'
  • option: array: 更多按钮，下拉菜单选项配置项，与 editOption 配置一致
  • percode: string: 按钮权限编码
  • reportPrint: boolean: 是否为报表打印按钮，需指定 percode
  • workflow: boolean: 是否为工作流按钮，需指定 percode
  • delList: boolean: 删除是否需要传递行记录，默认 false
  • idsRequestBody: boolean: 删除时，参数是否需要放在 body 中，默认 false

# listOption.optionWidth

number

操作列宽度。

默认值: 100

# listOption.optionFixed

string

将列固定在左侧或者右侧（注意：固定列应该放在左右两侧的位置）。

可选值: 'left'、'right'

# 增加 & 编辑 & 删除 配置

# listOption.addUrl

string

弹窗增加保存地址，发起 POST 请求。

提示

当未配置此属性时，会尝试使用 listOption.saveUrl

# lInsertBefore

({ that, listRef, back }) => void

插入前执行。相当于 AppList - lInsertBefore。

# lInsertAfter

({ that, listRef, newRow }) => void

插入后执行。相当于 AppList - lInsertAfter。

# listOption.updateUrl

string

弹窗编辑保存地址，发起 PUT 请求。

提示

当未配置此属性时，会尝试使用 listOption.saveUrl

# listOption.saveUrl

string

批量保存地址。发起 POST 请求。

# lSaveBefore

({ that, listRef, back, modalOption?, modalRefs?, data?, proData? }) => void

保存前执行。相当于 AppList - lSaveBefore。

# lSaveAfter

({ that, grid, records, res }) => void

保存后执行。相当于 AppList - lSaveAfter。

# listOption.delUrl

string

批量删除地址。发起 DELETE 请求。

# lDeleteBefore

({ that, listRef, records, back }) => void

删除前执行。相当于 AppList - lDeleteBefore。

# lDeleteAfter

({ that, grid, row, res }) => void

删除后执行。相当于 AppList - lDeleteAfter。

# listOption.retrieveAfterCommit

boolean

提交后，是否刷新刷新表格。

默认值: false

# 其它配置

# listOption.lAfterConstructor

({ that, listRef }) => void

初始化完成之后执行。相当于 AppList - lAfterConstructor。

Theme by Vdoing | Copyright © 2023-2025 北京嘉禾云网科技有限公司