拖拽批量动作至表格区域，创建批量更新动作
设置动作信息，设置完成之后点击保存
点击设计弹窗，出现弹窗设计器界面
将需要批量更新的字段拖入表单区，将待提交的数据需要展示字段拖入表格区域，比如更新名称，展示待提交数据的ID、名称、创建时间（注意：创建时间需要在表格中也展示）
拖拽客户端动作进入动作区域，并设置动作信息，客户端行为选择批量更新
动作设置成功，点击保存
选择批量更新的数据之后点击批量更新
将名称修改为‘批量修改名称’
查看最后实现效果
Oinone社区 作者：oinone原创文章，如若转载，请注明出处：https://doc.oinone.top/designer/6827.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
学习这篇文章之前，需要先学会使用在界面设计器自定义一个前端组件，如果您还不会，可以先看这篇文章 默认情况下，当开前端发人员自定义了一个复杂字段，比如M2O、O2M、M2M的字段，那么Graphql查询的时候，只会查询id跟name这两个字段，如果还想查询字段的字段，那么可以通过配置化的方式来处理 1: 在界面设计器的组件区域中新增对应的字段 2: 设计元件，在模型区域中搜索选项字段列表，拖到设计区域，然后保存 3: 去对应的设计页面，刷新下页面，选中对应的字段，可以看到右侧有选项字段列表4: 输入期望Graphql查询字段，保存发布
介绍 客户在使用oinone平台的时候，有一些个性化的前端展示或交互需求，oinone作为开发平台，不可能提前预置好一个跟客户需求一模一样的组件，这个时候我们提供了一个“低无一体”模块，可以反向生成API代码，生成对应的扩展工程和API依赖包，再由专业前端研发人员基于扩展工程（kunlun-sdk），利用API包进行开发并上传至平台，这样就可以在界面设计器的组件里切换为我们通过低无一体自定义的新组件。 低无一体的具体体现 “低”— 指低代码，在sdk扩展工程内编写的组件代码 “无”— 指无代码，在页面设计器的组件功能处新建的组件定义 低无一体的组件跟直接在自有工程内写组件的区别？ 低无一体的组件复用性更高，可以在本工程其他页面和其他业务工程中再次使用。 组件、元件介绍 元件 — 指定视图类型(viewType) + 指定业务类型(ttype)字段的个性化交互展示。组件 — 同一类个性化交互展示的元件的集合。组件是一个大一点的概念，比如常用的 Input 组件，他的元件在表单视图有字符串输入元件、密码输入元件，在详情和表格展示的时候就是只读的，页面最终使用的其实是元件。通过组件+ttype+视图类型+是否多值+组件名可以找到符合条件的元件，组件下有多个元件会根据最优匹配规则找到最合适的具体元件。 如何使用低无一体 界面设计器组件管理页面添加组件 进入组件的元件管理页面 点击“添加元件” 设计元件的属性 这里以是否“显示清除按钮”作为自定义属性从左侧拖入到中间设计区域，然后发布 点击“返回组件” 鼠标悬浮到卡片的更多按钮的图标，弹出下拉弹出“低无一体”的按钮 在弹窗内点击“生成SDK”的按钮 生成完成后，点击“下载模板工程” 解压模板工程kunlun-sdk.zip 解压后先查看README.MD，了解一下工程运行要点，可以先运行 npm i 安装依赖 再看kunlun-plugin目录下已经有生成好的组件对应的ts和vue文件 下面在vue文件内增加自定义代码，可以运行 npm run dev 在开发模式下调试看效果 <template> <div class="my-form-string-input"> <oio-input :value="realValue" @update:value="change" > <template #prepend>MyPrepend</template> </oio-input> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import { OioInput } from '@kunlun/vue-ui-antd'; export default defineComponent({ name: 'customField1', components: { OioInput }, props: { value: { type: String }, change: { type: Function }, }, setup(props) { const realValue = ref<string | null | undefined>(props.value); return { realValue }; } }); </script> <style lang="scss"> .my-form-string-input { border: 1px solid red; } </style> 确定改好代码后运行 npm run build，生成上传所需的js和css文件 可以看到 kunlun-plugin目录下多出了dist目录，我们需要的是 kunlun-plugin.umd.js 和 kunlun-plugin.css 这2个文件 再次回到组件的“低无一体”管理弹窗页面，上传上面生成的js和css文件，并点击“确定”保存，到这里我们的组件就新增完成了。 下面我们再到页面设计器的页面中使用上面设计的组件（这里的表单页面是提前准备好的，这里就不介绍如何新建表单页面了） 将左侧组件库拉直最底部，可以看到刚刚新建的组件，将其拖至中间设计区域，我们可以看到自定义组件的展示结果跟刚刚的代码是对应上的（ps: 如果样式未生效，请刷新页面查看，因为刚刚上传的js和css文件在页面初始加载的时候才会导入进来，刚刚上传的动作未导入新上传的代码文件），再次点击设计区域中的自定义组件，可以看到右侧属性设置面板也出现了元件设计时拖入的属性。 最后再去运行时的页面查看效果，与代码逻辑一致！ 注意事项 为什么我上传了组件后页面未生效？ 检查前端启动工程的低无一体是否配置正确
工作流串联动作 界面所属模块需要保证依赖模块列表依赖了“工作流”。 低代码依赖模块 <dependency> <groupId>pro.shushi.pamirs.workflow</groupId> <artifactId>pamirs-workflow-api</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.workflow</groupId> <artifactId>pamirs-workflow-core</artifactId> </dependency> 低代码模块 dependencies 需要引用 WorkflowModule.MODULE_MODULE。 流程创建 流程串联动作仅支持模型触发。 说明：当流程满足触发条件后，该流程将自动执行，和是否开启代码手动触发无关。此外，为了适应特定的业务场景，流程串联动作可与触发机制相结合使用。若流程设计为仅需手动触发，则可通过在筛选条件中设置一个恒不成立的逻辑表达式来实现这一需求。 界面设计器配置 在界面设计器的组件库 → 动作中找到“工作流”；仅能选择流程触发模型和当前主视图所属模型相同的流程；按钮点击后，流程触发。 说明 工作流及数据流程动作的触发需确保相关数据的存在，因此在运行时的创建页中，按钮将以禁用状态显示，防止在数据缺失时触发流程。 数据流程串联动作 界面所属模块需要保证依赖模块列表依赖了“工作流”和“集成接口”。 低代码依赖模块 <dependency> <groupId>pro.shushi.pamirs.workflow</groupId> <artifactId>pamirs-workflow-api</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.workflow</groupId> <artifactId>pamirs-workflow-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-api</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-view</artifactId> </dependency> 低代码模块 dependencies 需要引用 WorkflowModule.MODULE_MODULE和EipModule.MODULE_MODULE。 界面设计器配置 数据流程触发的配置和使用方式同工作流串联动作。 集成连接器串联动作 准备工作 界面所属模块需要保证依赖模块列表依赖了“集成接口”。 低代码依赖模块 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-api</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-view</artifactId> </dependency> 低代码模块 dependencies 需要引用 EipModule.MODULE_MODULE 集成设计器接口配置 首先在集成设计器新增API 已配置Api“根据id查询用户”： 请求地址：/user/queryById/{id} 请求参数： 参数名 参数位置 必填 参数类型 是否数组 字段长度 默认值 参数备注 id Path 是 Integer 用户id[1~43有值] 响应参数： 参数名 参数类型 参数来源 是否数组 取值表达式 参数备注 id String Body 否 data.id 主键 name String Body 否 data.name 姓名 age String Body 否 data.age 年龄 country String Body 否 data.country 国家 gender String Body 否 data.gender 性别 界面设计器 在界面设计器的组件库 → 动作中找到“集成连接器”。 动作按钮创建完成后，在属性中找到连接器配置，选择Api资源。 请求参数配置 选择API资源后，若该API需配置请求与响应参数，则相应的参数配置项将会呈现。如上图所示，因所选API含有Path类型的参数，故可进行Path参数的映射配置。此API并无Body或Query类型的参数，因此这些配置项将不会显示。 Path参数的具体配置如下：左侧列出了集成设计器为API创建的参数名称，而右侧对应的是当前模型中的字段，将赋值表达式设定为ID。该配置的含义是：在用户点击按钮之后，系统将调用配置的Api资源，并以当前视图中的ID参数值来映射Path参数，发起请求。 响应参数配置 同样地，左侧的参数名称是由集成设计器配置的响应参数，而右侧则为当前模型中的字段。当请求成功发送并接收响应后，这些响应参数将会按照配置的规则被填充到表单或详情页面中。 发送请求前，若字段已填充数据，但在响应中未获取相应数据，则该字段将被置为空；比如在发送请求前，性别字段已有数据，而请求发送后，若接口返回的数据中未包含性别信息，则性别参数将会被置为空。 多对一字段将依据接口返回的数据从数据库中进行查询（queryOne）。若未查询到相关信息，则仅回填那些在响应中有值的字段。 运行时页面 响应参数一对多/多对多配置 集成设计器的API配置如下所示：条件查询用户 请求地址：/user/query 请求参数： 参数名 参数位置 必填 参数类型 是否数组 字段长度 默认值 参数备注 country Body 否 String 否 国家 name Body 否 String 否 用户姓名 响应参数： 参数名 参数类型 参数来源 是否数组 取值表达式 参数备注 data OBJECT Body 是 data 用户列表 »name String…
需求背景 为了提高操作效率并简化流程设计过程，应对伙伴们反映的在流程设计器中，即使填写/审批流程相同，不同模型也需重新配置的问题，我们引入了“动态表单”功能。此功能旨在减少重复配置的需求，通过设置节点名称和绑定视图，便可实现审批流程相同而视图不同，从而使得相同的审批流程可以被高效重复利用。 为确保伙伴们能够更加方便的使用动态表单，我们将典型示例整合至“工作流”中。本节将结合这些示例详细阐述“动态表单”功能的应用方法。 使用主要分为两个步骤：流程设计和动态表单配置。 流程设计 触发节点配置 应用：工作流 选择模型：动态表单任务 触发场景：更新数据时 选择更新字段：触发次数 填写/审批节点配置 动态表单按钮设置为启用状态。 数据来源设置为触发节点。 动态表单函数默认有一条内置函数，选中即可。 数据保存方式、填写人等信息，同从前使用方式。 在动态表单模式下，数据权限的管理将不再由流程设计器控制，而是由用户所填写的视图进行控制。 例如，若希望用户在“一审”阶段不能修改某字段，则应在设计视图时将相关字段设为只读模式。同样，若某些信息不宜在“一审”阶段展示给客户，相应字段应在设计过程中被设置为隐藏状态。 若需在“一审”节点接收“一填”阶段的结果，数据来源设置为“一填[动态表单]”。其他配置项保持不变，按照上述说明进行设置。 若希望“二填”节点的数据由用户填写，并希望内容处于空白状态，可将数据来源设置为“触发”节点。 通过这种配置，“二填”节点的数据将不会受到“一填”和“一审”节点数据的影响。 二审节点的配置同一审，此处省略。 “终审”节点希望接收到“一审”节点的数据，可以将数据来源设置为一审。 动态表单配置 首先创建动态表单任务：工作流->动态表单任务->创建，给流程起个名字。 节点任务配置 流程名：通过下拉菜单选择，数据为动态表单任务中，创建的流程信息。 节点名称：【强制】确保与流程设计中的节点名称完全一致，否则将无法正确匹配到对应节点的视图。 模型：选定用于绑定节点视图的模型。 视图：选择视图前须先确定模型，系统将自动列出所选模型下的通过UI创建的视图供选择。 查看配置效果 在工作流模块->动态表单->动态表单任务，点击“详情”，可以看到该流程所配置的节点信息。 动态表单任务详情页 流程触发 点击“触发”按钮将使触发次数自动递增。在流程设计器中配置触发节点时，我们已设定“触发次数”字段的变化作为流程启动的条件。 触发节点配置筛选条件 通过完成上述操作，我们已成功配置动态表单。现在可以利用触发节点的筛选条件，来确定触发按钮被点击后，所启动的流程。 自定义动态表单函数 如果所提供的示例未能满足您的需求，您可以根据自身的需求，对触发条件和动态表单函数进行相应的定制与调整。 动态表单函数定义规则如下： namespace：强制为 WorkflowFunctionConstant.FUNCTION_NAMESPACE。 fun：强制以 WorkflowFunctionConstant.WORKFLOW_CUSTOM_VIEW_FUNCTION_PREFIX 为前缀。 入参说明： 参数1：节点数据，例如，配合instanceof可以判断当前是填写节点（WriteNode）还是审批节点（ApprovalNode）。 参数2：触发节点的模型数据，如果您的触发节点不确定，可以通过Map接收参数。 参数3：该节点所配置数据来源的数据。 出参说明：视图，如果出参为null，流程终止运行，错误信息提示为“流程节点执行失败，动态表单函数获取视图为空”。 @Slf4j @Component @Fun(WorkflowFunctionConstant.FUNCTION_NAMESPACE) public class DynamicFormCustom { /** * 根据动态表单任务获取视图 * * @param node 节点数据 * @param dynamicFormTask 触发节点数据 * @param dataObj 源数据 */ @Function.fun(WorkflowFunctionConstant.WORKFLOW_CUSTOM_VIEW_FUNCTION_PREFIX + "fetchDynamicFormFunction") @Function.Advanced(displayName = "[内置]获取动态表单函数") @Function(name = "fetchDynamicFormFunction") public View fetchDynamicFormFunction(Node node, DynamicFormTask dynamicFormTask, Map<String, Object> dataObj) { DynamicFormTaskNode dynamicFormTaskNode = fetchDynamicFormTaskNode(node, dynamicFormTask); if (dynamicFormTaskNode == null) { return null; } dynamicFormTaskNode.fieldQuery(DynamicFormTaskNode::getView); return dynamicFormTaskNode.getView(); } private DynamicFormTaskNode fetchDynamicFormTaskNode(Node node, DynamicFormTask dynamicFormTask) { List<DynamicFormTaskNode> dynamicFormTaskNodeList = Models.origin().queryListByWrapper(Pops.<DynamicFormTaskNode>lambdaQuery() .from(DynamicFormTaskNode.MODEL_MODEL) .eq(DynamicFormTaskNode::getNodeName, node.getNodeName()) .eq(DynamicFormTaskNode::getTaskCode, dynamicFormTask.getCode()) ); if (CollectionUtils.isEmpty(dynamicFormTaskNodeList)) { return null; } if (dynamicFormTaskNodeList.size() > 1) { log.error("工作流动态获取表单函数视图匹配多个，{}", JsonUtils.toJSONString(dynamicFormTaskNodeList)); } return dynamicFormTaskNodeList.get(0); } }
