组联式表单 #

介绍 #

他通过 组合&联动 的形式，整合在线表单、列表页面、Ifream、图表、等组件资源，使他们能够实现联动。

比如在以项目为维度的综合信息的展示场景中，需要一个 tab 页展示项目详情，另外一些 tab 设置 项目相关分页列表信息。

使用 #

通过布局组件设计页面布局，然后将业务组件拖入到对应布局中即可。

设计完成后 即可以通过 资源访问改该页面，资源地址： /biz/bizFormCombinationView/布局编码

与自定义列表结合 #

自定义列表可以通过按钮来表配置组联表单，按钮配置建议：

• 打开方式： TAB 页
• 地址配置：/biz/bizFormCombinationView/code?id={id}

当点击自定义列表该按钮后，就会展示组联表单 code 为 code 的表单，并将 自定义列表 行记录 id 的值传递过去

约定全局联动参数 #

约定页面可用的参数，这些参数是响应式的，即任意组件改动了其中值，所有组件都会联动。

参数类型： #

• URL 参数：会从 URL 地址上获取参数，以定义的 Name 为 Key 设值到 globalParams 中
• 参数不设置值：这样一般用于参数约定，可能会在子组件或者其他场景中对其赋值（如 SQL 扩充参数中）
• 默认值参数：存在默认值的约定参数，同时也支持在其他场景被修改
• 系统参数：这些参数会从后台通过登录用户获取，参数有：当前用户 ID、当前用户账户、当前组织 ID、当前组织编码

参数联动： #

参数可以使用在 组件展示条件、组件URL地址、SQL扩充参数、标签页\ 折叠面板项\ 栏格等的 展示条件 中；

所有参数都是响应式的，参数一旦发生改变，与之相关的组件视图也会跟着联动；

子组件中也可以对参数进行更新，当然会触发参数相关视图的联动。（如 URL 地址中使用了全局参数，参数改变，URL 地址就会重载）

子组件可以通过注入全局参数方式来使用全局参数 如： #

const globalParams = inject('globalParams') as any
\{\{ globalParams.name \}\}

SQL 扩充参数 #

执行一个 SQL 返回字段与值，会组装成 Map 形式扩充到全局参数中。

SQL 中可以通过 {xx} 替换全局参数 globalParams.xx 的值，所以它支持使用到 URL 参数、系统参数

示例：

select account_ as account,fullname_ as name from org_user where id_ = '{userId}'

那么就可以通过 globalParams.name 拿到 用户名了。

SQL 参数联动 #

设置联动参数，当联动参数发生变化了，就会重新请求后台执行 SQL，并将结果更新到全局参数。

组件 #

组件展示条件 #

所有组件均支持展示条件的配置，支持选择全局参数写条件表达式，表达式与 js 语法相同，表达式结果为 false 时不展示改组件。

示例：

//假设全局联动参数为 `{ projectStatus: 'complated', name: '小王', amount: 1000 }`
//1.金额大于10000时展示审计信息
globalParams.amount > 10000
//2.项目类型为已经完成的不展示发起流程按钮
globalParams.projectStatus != 'complated'

Tabs 标签页 & Collapse 折叠面板项 & Layout 栏格布局 #

这几个布局组件具有相同的配置，我们在这里统一介绍

• TAB 标签页，支持设置一个默认展开项
• 折叠面板，每块都支持设置是否展开
• 这些组件都支持在配置页拖拽排序

展示条件 #

• 组件展示条件： 既当前组件整体如 Tabs 所有 tab 整体的展示与否，具体介绍详见：组件展示条件
• 某个 Tabs/Row/Collapse 展示与否 可以通过编辑按钮，进行配置，语法与 组件展示条件 相同

Iframe 组件 #

通过 URL 地址的形式加载一个页面框架。

URL 地址： #

URL 为 IFrame 地址，如果以 http 开头则会直接使用配置的地址，否则将以路由形式加载页面。

URL 地址支持通过全局参数替换路径，如果使用到的参数发生变化，URL 地址会重新加载。

示例： #

假设

• 配置 URL： /formCombIfreamTest?name={name}
• gloablParams 为： {name: 'admin'}

替换后真实地址为：http://localhost:8086/formCombIfreamTest?name=admin

高度： #

以px为单位固定 Iframe 的高度。

Iframe 动态修改全局联动参数： #

Iframe 内部只能通过事件形式更新全局参数，示例代码如下：

window.parent.postMessage({
  type: 'abFormIfreamEvent', //固定值
  url: document.location.href, //固定值
  isUpdateGlobalParam: true, //是否需要更新全局参数
  params: {
    // 要更新的全局参数值
    name: 'abc',
    test: 'test'
  }
})

结果会将 name,test 的值覆盖式更新到 globalParams 中

按钮图标 组件 #

图标支持拖拽排序，点击编辑可设置图表展示条件，展示条件语法可参考 组件展示条件。

图标支持点击后跳转页面，URL 配置可参考Iframe 组件 与其实现一致 。

在线表单组件 #

把在线表单作为组联式表单的一部分

• 主键入参 在线表单主键字段的映射
• 是否只读，只读类型只能展示详情页面

在线表单中可以直接使用 全局联动参数，并支持响应式联动，参数别名为： combinationParams 如：\{\{combinationParams.name\}\} 即展示全局联动参数 globalParams.name 的值

扩展新的业务组件 #

1、新增控件组件 #

业务控件包含两部分，配置组件、展示组件， 业务组件位置 src/libs/layout-design/components/， 每个控件需要建一个新的目录。

配置组件：用于配置业务组件的属性 #

可使用组件配置属性，以及全局配置属性

const props = defineProps({
  config: {
    required: true,
    type: Object as PropType<FormCombinationComponent>
  },
  formCombination: {
    required: true,
    type: Object as PropType<FormCombination>
  }
})

展示组件：用于真正页面展示（组件必须设置 name 属性） #

可以接收 组件配置项用于渲染

const props = defineProps({
  componentConfig: {
    required: true,
    type: Object as PropType<FormCombinationComponent>
  }
})

可以注入并使用全局联动参数（他是响应式的）

const globalParams = inject('globalParams') as any

建议参考已有的去开发，如在线表单组件 src/libs/layout-design/components/abCustForm/abCustFormConfig.vue

2、引入业务组件 #

在布局配置 src/libs/layout-design/config/layoutconfig.ts中的 componentConfigPage 属性中引入控件配置页。 组件展示页面 无需配置，系统会自动引入 src/libs/layout-design/components/ 下所有具有 name 的组件。

3、新增配置 #

在 布局配置 src/libs/layout-design/config/layoutconfig.ts中 customCompon 属性上 新增新的控件，控件即配置控件的默认配置。 新增后就能通过画布拖拽组件了