文档
轻启-低代码平台
2. 页面配置

2. 页面配置

2.1 查询

2.2 新增

2.2.1 基本信息

  • 类型 ：表格、树形、列表、卡片、超级列表、左右表格等，在打开页面的时候会以这些形式呈现查询数据(上面的查询页面就是表格类型)
  • 接口前缀 ：基于这个配置，会自动拼接增删改查的接口url，例如/api/form/[query,add,update,delete] 那么只需要填写form就可以了
  • 数据源 ：限定了程序数据字段名称
  • 新增表单 ：在点击新增按钮时弹窗的表单
  • 编辑表单 ：在点击编辑按钮时弹窗的表单
  • 查询表单 ：呈现在页面查询区域的表单
  • 显示序号 ：只有表格类型有用，如果打开就会多一列序号列
  • 基础数据 ：如果勾选了，那么此数据就是系统必须要有的数据，在数据导入导出时有用到。
  • 边框 ：只有表格类型有用，如果勾选了，那么表格会有边框呈现。
  • 子页面 ：只有左右表格类型有用
  • 是否子页面 ：只有左右表格类型有用

2.2.2 工具栏

  • 全屏 ：只有表格类型有用，如果打开就会有全屏的按钮
  • 刷新 ：只有表格类型有用，如果打开就会有刷新的按钮
  • 设置 ：只有表格类型有用，如果打开就会有设置的按钮
  • 显示新增按钮 ：如果打开在搜索区域就会有新增的按钮
  • 显示批量删除按钮 ：如果打开在搜索区域就会有批量删除的按钮
  • 批量删除接口地址 ：设置批量删除时调用的接口
  • 显示可选框 ：只有表格类型有用，如果打开表格就会多一列有选择框
  • 显示导出按钮 ：如果打开在搜索区域就会有导出的按钮
  • 导出API接口地址 ：设置导出时调用的接口
  • 显示导入按钮 ：如果打开在搜索区域就会有导入的按钮
  • 导入API接口地址 ：设置导入时调用的接口
  • 上传最大数据 ：设置导入时上传文件数量，只有在未指定上传表单时才生效
  • 支持多个文件 ：设置导入时支持上传多个文件，只有在未指定上传表单时才生效
  • 上传表单 ：设置点击导入按钮时显示的表单，如果未设置会使用系统默认的表单

2.2.3 表格配置

  • 横向滚动条 ：设置表格横向最大宽度，当表格宽度超过设置值就会显示横向滚动条
  • 边框 ：跟基础信息里的是同一个配置

呈现字段，每一条数据代表表格的一列

  • 字段 ：需要跟后端返回的json数据中的字段名称一样
  • 显示名称 ：就是表头名称
  • 数据类型 ：文本、枚举、图标、时间戳、状态、头像、自定义脚本、图标状态等
  1. 文本：不做任何处理直接呈现指定字段的内容
  2. 枚举：需要同时指定枚举值数据，会自动解析然后进行数据转换，最终呈现转换后的结果
  3. 图标：会以Image组件呈现图片数据
  4. 时间戳：默认会将时间戳数据转成YYYY-MM-DD HH:mm格式呈现，也可以通过配置枚举值来指定时间格式
  5. 状态：会以Tag组件呈现转换的数据，如果没有指定枚举值数据，默认会以下面值来代替：
[{"value": 0, "color": "success", "label": "成功"}, 
{"value": 1, "color": "error", "label": "错误"},
{"value": 2, "color": "warning", "label": "警告"}]
  1. 头像：会以Image组件呈现头像数据
  2. 图标状态：会以Icon组件呈现图标数据，并且带有颜色，如果没有指定枚举值数据，默认会以下面值来代替：
[{"value": 0, "icon": "CloseOutlined", "color": "#ff000", "label": "错误"}, 
{"value": 1, "icon": "CheckOutlined", "color": "#008000", "label": "成功"}, 
{"value": 2, "icon": "WarningOutlined", "color": "#ffff00", "label": "警告"}]
  1. 自定义脚本: 在枚举值中编写JavaScript脚本实现自定义呈现逻辑，会将行数据以record字段名作为参数，例如：
console.log(record)
return record.enable?"启用":"禁用"
  • 复制按钮 ：如果打开就会呈现复制按钮，点击就可以复制当前列的数据
  • 自动收缩 ：如果打开那么内容比较多的时候就会显示三个点，然后隐藏超出部分
  • 主键 ：作为表格的rowkey
  • 列表显示 ：打开就会在列表显示，关闭就会隐藏
  • 排序 ：如果打开，该列就可以用来作为排序字段，点击表头会自动排序
  • 宽度 ：设置该列的宽度，如果不设置就是自适应
  • 枚举值 ：具体看数据类型描述

2.2.4 列表配置

  • 加载方式 ：显示下一页内容是以分页的形式还是通过加载更多的形式
  • Avatar字段 ：头像的字段名称
  • Key字段 ：作为列表的rowkey的字段名称
  • Title字段 ：标题的字段名称
  • Description字段 ：描述的字段名称
  • Content字段 ：内容的字段名称

2.2.5 卡片配置

  • 加载方式 ：显示下一页内容是以分页的形式还是通过加载更多的形式
  • Title字段 ：标题的字段名称
  • Avatar字段 ：头像的字段名称
  • Image字段 ：图片的字段名称
  • Description字段 ：描述的字段名称

2.2.6 高级列表配置

2.2.7 左右表格配置

2.2.8 自定义脚本

  • 提交前执行 ：新增或者编辑提交前执行的JavaScript脚本，主要是针对提交数据重新组织，上下文变量有values(提交给服务端的数据)。例如可以进行一些数据转换或者移除一些无用数据等等
  • 提交成功后执行 ：新增或者编辑提交成功后执行的JavaScript脚本,上下文变量有resp(从服务端获取到的数据{“code”:20000,“data”:{},“msg”:""})。
  • 加载明细前执行 ：从服务端获取明细数据前执行的JavaScript脚本，上下文变量有record(当前行的数据)。
  • 加载明细成功后执行 ：从服务端获取到明细数据后执行的JavaScript脚本，上下文变量有resp(从服务端获取到的数据{“code”:20000,“data”:{},“msg”:""})。
  • 查询前执行 ：查询提交前执行的JavaScript脚本，主要是针对提交数据重新组织，上下文变量有searchValues(提交给服务端的查询条件数据)。
  • 查询成功后执行 ：查询执行成功后执行的JavaScript脚本，上下文变量有resp(从服务端获取到的数据{“code”:20000,“data”:[],“msg”:""})。
  • 新增按钮脚本 ：用来定义新增按钮点击事件的逻辑

2.2.8.1 例子

移除浏览器对当前编辑页面配置的缓存

localStorage.removeItem("page-" + values.name)

新增按钮脚本：新增时以页面形式呈现表单

curdPage.gotoEditPage(true, curdPage, undefined, history)

提交前进行数据转换

submitBeforeConvertArrayData(
  values,
  "selectedMenus",
  "roleMenus",
  (data1, data2) => {
    if (data1.menuID !== data2.menuID) {
      return false
    }
    data2.funcs = data1.funcs?.join(",")
    data2.show = data1.show
    return true
  },
  (values, field1Data) => {
    return {
      roleID: values.ID,
      menuID: field1Data.menuID,
      show: field1Data.show,
      funcs: field1Data.funcs?.join(","),
    }
  }
)

加载明细成功后做一些数据转换

if (resp?.data?.parentID == 0) {
  resp.data.parentID = undefined
}

2.2.9 操作按钮配置

  • 排序 ：按钮显示顺序
  • key ：唯一标识
  • Label ：按钮名称
  • 显示位置 ：按钮显示的位置，显示在列表行、在搜索框显示
  • 下来菜单 ：显示位置是显示在列表行才有作用，将按钮收缩到下拉菜单中
  • 显示 ：点击按钮后，表单的显示方式：弹框、页面、新标签
  • 表单 ：指定一个表单，主要作用是点击按钮后显示一个表单
  • 生成Href ：跳转到新页面拼接url的脚本，例如：
  • 执行脚本 ：按钮的执行逻辑，方法签名: (curdPage:TableCurdPage,btnConfig:PageButton,record:any,history,btnConfig)=>Boolean

执行脚本的例子-编辑按钮

// 弹窗显示编辑表单
// curdPage.showEditDialog(record)
// 以页面的形式显示编辑表单
curdPage.gotoEditPage(false, curdPage, record, history)

执行脚本的例子-页面形式打开一个表单

curdPage.gotoEditPage(true, curdPage, record, history, {
  formID: btnConfig.formID,
  hiddenButton: false,
})

执行脚本的例子-弹窗形式打开一个表单

curdPage.showFormDialogByFormID(
  btnConfig.formID,
  "生成小说章节",
  1600,
  (values, curdPage, history) => {},
  true
)

执行脚本的例子-弹出确认框

curdPage.confirmAction("确认重置密码", () => {
  curdPage.state.service.post("/api/core/auth/user/resetpwd", {
    id: record.id,
    tenantID: record.tenantID,
  })
})
  • 按钮隐藏脚本 ：用来控制按钮是否隐藏逻辑
//例如删除按钮，当name是admin时隐藏当前行这个删除按钮
return record.name=="admin"

2.2.10 默认值设置

  • 查询条件默认值 ：给页面的查询表单初始化一个默认值，数据是json格式
  • 新增默认值 ：给新增表单初始化一个默认值，数据是json格式

1. 系统管理3. 表单设计