【界面设计器】树下拉/级联

相关推荐

• 部署

  无代码docker启动说明（5.1.0）

  1. 安装docker 1.1 Linux内核系统（以CentOS7为例） 1.1.1 检查防火墙 查看防火墙是否开启 systemctl status firewalld 如防火墙处于开启状态 有2种处理方式，选择其中一种，开发环境如内网环境建议选择处理方案1 处理方案1:停止防火墙 systemctl stop firewalld 处理方案2:开放docker镜像内置中间件透出的端口 88：web访问端口 8099：后端Java服务端口 19876：rocketmq的namesrv端口： 6378：缓存redis的端口 3307：数据库mysql的端口 2182：zookeeper的端口 20880：dubbo的通信端口 10991：rocketmq的broker端口 查看防火墙已经开放的端口 firewall-cmd –list-ports 防火墙新增开放端口示例： firewall-cmd –permanent –zone=public –add-port=88/tcp 新增以后生效需要重新加载防火墙 systemctl reload firewalld 查看端口是否开放成功 firewall-cmd –list-ports 也可以从外部使用telnet命令检查端口是否开放成功，如telnet 192.168.0.121 3307 1.1.2 官方安装地址（docker如已安装请忽略）： https://docs.docker.com/engine/install/centos/ yum install -y yum-utils yum-config-manager –add-repo https://download.docker.com/linux/centos/docker-ce.repo 如果docker这个源异常可以用阿里云的源 #yum-config-manager –add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo yum install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin #启动docker systemctl start docker #查看是否安装成功 docker -v 如果无法访问官网，参考阿里云安装Docker CE镜像https://developer.aliyun.com/mirror/docker-ce?spm=a2c6h.13651102.0.0.57e31b11lhSNtT 1.1.3 可使用一键安装脚本（docker如已安装请忽略） wget https://pamirs.oss-cn-hangzhou.aliyuncs.com/docker/quick-install.sh sh quick-install.sh 1.1.4 Docker部署常见问题 https://doc.oinone.top/install/20670.html 1.2 无公网环境Linux系统 需要根据指定的版本以及内核架构来生成对应docker以及镜像包 1.3 window环境 https://docs.docker.com/desktop/install/windows-install/ 2. 解压提供的部署.zip 部署.zip包含： settings-3.6.3.xml：拉取平台jar的maven仓库settings，对应maven版本3.6.x settings-3.8.x.xml：拉取平台jar的maven仓库settings，对应maven版本3.8.x oinone-op-ds-all-full：包含所有中间件及前后端工程，用于启动docker结构和脚本(需拷贝到服务器) oinone-op-ds-all-mini：仅包含前后端工程，用于启动docker结构和脚本(需拷贝到服务器) license：平台证书 docker-mvn-npm账号.md oinone-example：后端示例工程 ss-front-modules：前端示例工程 3. 对应版本的docker镜像拉取 镜像地址 镜像概述 harbor.oinone.top/oinone/oinone-designer-full-v5.1:5.1.16 包含所有中间件及前后端工程(v5.1:5.1.16为示例版本号,实际以Oinone发出来的为准) harbor.oinone.top/oinone/oinone-designer-mini-v5.1:5.1.16 仅包含前后端工程(v5.1:5.1.16为示例版本号,实际以Oinone发出来的为准) 注意：docker镜像拉取的账号密码在部署.zip里面(docker-mvn-npm账号.md) docker login –username=用户名 harbor.oinone.top docker pull harbor.oinone.top/oinone/xxx 4. 修改startup.sh/cmd文件 doker的结构包 oinone-op-ds-all-full 或oinone-op-ds-all-mini 上传到服务器上;下面的操作都是这该文件夹下进行 4.1 linux环境修改参数 在startup.sh文件中找到如下 configDir=$(pwd)version=版本号IP=192.168.0.121 修改对应的IP为docker宿主机IP 4.2 window环境修改参数 在startup.cmd文件中找到如下set configDir=%CD%set version=版本号set IP=192.168.0.121 修改对应的IP为docker宿主机IP 5. 修改mq/broker.conf 注意：使用oinone-op-ds-all-mini版本，无需进行该步操作（直接跳过）注意：使用oinone-op-ds-all-full版本，才需进行该步操作 修改其中brokerIP1的IP从192.168.0.121改成宿主机IP brokerClusterName = DefaultCluster namesrvAddr=127.0.0.1:9876 brokerIP1=192.168.0.121 brokerName = broker-a brokerId = 0 deleteWhen = 04 fileReservedTime = 48 …… 5. 修改config/application.yml 注意：使用oinone-op-ds-all-full版本，无需进行该步操作（直接跳过）注意：使用oinone-op-ds-all-mini版本，才需进行该步操作 修改中间件的配置(oinone-op-ds-all-full版本无需修改)，把中间件对应的IP、端口或密码，改成实际提供服务IP、端口或密码。包括： zookeeper mysql rocket-mq redis oss配置 7. 启动Docker 7.1 linux环境启动 在终端执行 sh startup.sh 7.2 window环境启动 用PowerShell 执行 .\startup.cmd 7.3 查看日志，检查是否启动成功 在logs目录下可看到日志文件，第一次启动时间会相对长一些，等看到日志文件中输出 启动耗时…

  红莲

  2024年8月19日

  2.6K000
• 工作流

  工作流动态表单最佳实践

  需求背景 为了提高操作效率并简化流程设计过程，应对伙伴们反映的在流程设计器中，即使填写/审批流程相同，不同模型也需重新配置的问题，我们引入了“动态表单”功能。此功能旨在减少重复配置的需求，通过设置节点名称和绑定视图，便可实现审批流程相同而视图不同，从而使得相同的审批流程可以被高效重复利用。 为确保伙伴们能够更加方便的使用动态表单，我们将典型示例整合至“工作流”中。本节将结合这些示例详细阐述“动态表单”功能的应用方法。 使用主要分为两个步骤：流程设计和动态表单配置。 流程设计 触发节点配置 应用：工作流 选择模型：动态表单任务 触发场景：更新数据时 选择更新字段：触发次数 填写/审批节点配置 动态表单按钮设置为启用状态。 数据来源设置为触发节点。 动态表单函数默认有一条内置函数，选中即可。 数据保存方式、填写人等信息，同从前使用方式。 在动态表单模式下，数据权限的管理将不再由流程设计器控制，而是由用户所填写的视图进行控制。 例如，若希望用户在“一审”阶段不能修改某字段，则应在设计视图时将相关字段设为只读模式。同样，若某些信息不宜在“一审”阶段展示给客户，相应字段应在设计过程中被设置为隐藏状态。 若需在“一审”节点接收“一填”阶段的结果，数据来源设置为“一填[动态表单]”。其他配置项保持不变，按照上述说明进行设置。 若希望“二填”节点的数据由用户填写，并希望内容处于空白状态，可将数据来源设置为“触发”节点。 通过这种配置，“二填”节点的数据将不会受到“一填”和“一审”节点数据的影响。 二审节点的配置同一审，此处省略。 “终审”节点希望接收到“一审”节点的数据，可以将数据来源设置为一审。 动态表单配置 首先创建动态表单任务：工作流->动态表单任务->创建，给流程起个名字。 节点任务配置 流程名：通过下拉菜单选择，数据为动态表单任务中，创建的流程信息。 节点名称：【强制】确保与流程设计中的节点名称完全一致，否则将无法正确匹配到对应节点的视图。 模型：选定用于绑定节点视图的模型。 视图：选择视图前须先确定模型，系统将自动列出所选模型下的通过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); } }

  夜神月

  2024年8月22日

  4.4K000
• 界面设计器

  【界面设计器】左树右表

  阅读之前 你应该： 熟悉模型的增删改查相关内容。【界面设计器】模型增删改查基础 名词解释 主体：在视图中提供数据源的主要组件，并且所有动作都围绕着该主体展开。 一级搜索：在表格视图中，上方直观可见的搜索区，为表格提供筛选功能。 二级搜索：与一级搜索不同的是，其搜索条件是通过某些组件的行为追加到一级搜索条件之上的筛选功能。 概述 平台中对于左树右表提供了两种类型的展示形式。 在表格视图中的左树右表，是以表格为主体，树组件为表格提供了二级搜索功能。选中树节点时将对表格追加节点的搜索条件，并重新执行查询。 在树视图中，是以树为主体，其展开的视图可以是表格、表单、详情等其他视图。 PS：不论是树、级联这些视图组件，还是树选择、级联这些字段组件，其配置数据结构的方式是不尽相同的。唯一的区别在于最终到达的目标模型来源不同。 场景1 为了方便接下来的描述，我们需要先构建一个基本的业务场景，这个场景中包含【商品】和【商品类目】两个模型。 在【商品】的表格左侧添加【商品类目】树，选择某个商品类目后，可以根据商品类目进行筛选，查询所属类目下的全部商品。 其中【商品类目】使用【卡片级联】的展示方式进行管理。 其模型定义如下： 商品（Item） 名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段 ID id 整数 否 – – – – 编码 code 文本 否 128 – – – 名称 name 文本 否 128 – – 所属类目 category 多对一 否 – 商品类目（ItemCategory） categoryId – id 所属类目ID categoryId 整数 否 – – – 商品类目（ItemCategory） 名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段 ID id 整数 否 128 – – 编码 code 文本 否 128 – – – 名称 name 文本 否 128 – – 上级类目 parent 多对一 是 – 商品类目（ItemCategory） parentId – id 上级类目ID parentId 整数 否 – – – PS：实际业务场景中，【商品类目】通常使用编码进行关联，即parentCode – code；不仅如此，通常还会添加treeCode字段，以此来实现高效查询当前节点的所有子节点的能力。在演示模型中，我们不必关注这些内容。 创建【商品】视图 设置联动关系 这里我们需要配置的是【商品类目】的树结构，因此，在【第1级关联】中的模型选择【商品类目】。 在【商品类目】中是通过【上级类目】进行的自关联，因此，在【第1级关联】中的【自关联关系字段】选择【上级类目】。 在选中【商品类目】节点后，需要对右侧表格发起查询。其筛选条件是通过【商品】中的【所属类目】进行筛选的。因此，在【第1级关联】中的【表格关联关系字段】选择【所属类目】。那么，在表格发起查询前，会根据【所属类目】字段的关联关系配置自动添加筛选条件。 配置如下图所示： 创建【商品类目】视图 设置联动关系 这里我们需要配置的是【商品类目】的树结构（级联只是树结构的另一种表现形式） 细心的同学可能发现这里没有【表格关联关系字段】，因此，我们仅需配置【自关联关系字段】即可。 配置如下图所示： 为【商品类目】添加增删改查基础功能 与表格视图不同的是，行内动作区被放在了第一个卡片中的动作区，其他配置方式完全一致。 在这里需要理解的是，一个树节点对应的是表格中的一行。 【商品类目】使用展开视图进行编辑（可选） 打开【支持展开视图】开关，并设置展开视图。这里我们用表单视图进行编辑操作。 和其他表单一样，我们将必要的字段和动作拖入对应区域即可。 由于展开视图只会在选中节点时出现，因此我们仅需提供更新功能即可。 这里需要注意： 提交动作默认打开了【返回上一页】的功能，在当前场景中，更新动作提交数据后，没有上一页需要返回，因此需要关闭【返回上一页】的开关。 提交动作默认打开了【刷新当前视图】的功能，在当前场景中，更新按钮处于【展开视图】中，仅刷新当前视图是不够的，当数据发生变更时，我们需要将级联组件一并刷新，因此需要打开【刷新主视图】的开关。 PS：【编辑】动作和【展开视图编辑】功能是重复的，在使用时应该只选择其中一种。 【商品类目】限制仅支持四级，并为每一个卡片添加标题（可选） 移除【第1级关联】中的【自关联关系字段】，依次添加2、3、4级关联，选择【商品类目】模型，将自动选中【层级关联关系字段】为【上级类目】，并输入每一级关联的标题即可。 这里需要注意的是，在【第1级关联】中需要添加筛选条件，使其只能查询到根节点。 PS：这里的限制仅为交互上的限制，在创建/更新时，如果可以在服务端限制上级类目的选择，以及数据提交时的校验，效果更佳。 【商品类目】的【创建/编辑】使用弹窗打开（可选） 有时我们希望用户在页面中的操作尽可能的流畅，在表单规模较小的情况下，我们也可以使用【弹窗/抽屉】这类交互来优化用户体验。 小贴士： 弹窗打开的方式提供三种页面设计模式，绑定已有页面、使用新页面、复制已有页面。 使用新页面和复制已有页面的方式只能进行一次性的视图设计，无法进行复用。 使用绑定已有页面的方式可以使得视图进行复用，但复用的视图也只能同步弹窗的内容部分，弹窗底部的动作仅会在创建动作时复制一次。 跳转动作的打开方式以及页面设计模式等属于元数据信息，无法通过属性面板进行修改，因此只能通过重新创建新动作的方式进行修改。 鉴于业务的复杂和多变，通常情况下我们只采用【绑定已有页面】的方式为弹窗设计内容部分。这样在交互发生变更时，可以更好的适应变化。 场景2 为了方便接下来的描述，我们需要再构建一个基本的业务场景，这个场景中包含【公司】和【部门】两个模型。 【公司】模型的管理能力使用标准的【增删改查】视图。（此处不进行演示） 在【部门】的表格左侧添加【公司】-【部门】树，在选择某个公司后，可以根据所属公司进行筛选，查询所属公司下的全部部门。在选择某个部门后，可以根据上级部门进行筛选，查询该部门下的子部门（不包含子部门的子部门）。 PS：如这里要求查询该部门下的全部子部门，需要服务端配合。 其模型定义如下： 公司（Company） 名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段 ID id 整数 否 – – – – 编码 code 文本 否 128 – – – 名称 name 文本…

  nation

  2023年11月1日

  4.7K002
• 前端

  前端低无一体使用教程

  介绍 客户在使用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文件在页面初始加载的时候才会导入进来，刚刚上传的动作未导入新上传的代码文件），再次点击设计区域中的自定义组件，可以看到右侧属性设置面板也出现了元件设计时拖入的属性。 最后再去运行时的页面查看效果，与代码逻辑一致！ 注意事项 为什么我上传了组件后页面未生效？ 检查前端启动工程的低无一体是否配置正确

  汤乾华

  2023年11月6日

  3.7K001
• 后端

  【OceanBase】后端部署使用 OceanBase 数据库（海扬/OB）

  OceanBase 数据库配置 驱动配置 Maven配置（4.2.5.3版本可用） <oceanbase.version>2.4.14</oceanbase.version> <dependency> <groupId>com.oceanbase</groupId> <artifactId>oceanbase-client</artifactId> <version>${oceanbase.version}</version> </dependency> PS: oceanbase 驱动必须使用 2.4.5 版本或以上，低于此版本的驱动无法使用自增ID功能，无法正常启动。点击查看官方JDBC版本发布记录 JDBC连接配置 OceanBase – Oracle 版 pamirs: datasource: base: type: com.alibaba.druid.pool.DruidDataSource driverClassName: com.alipay.oceanbase.jdbc.Driver url: jdbc:oceanbase://10.xxx.xxx.xxx:1001/BASE?useServerPrepStmts=true&useOraclePrepareExecute=true&defaultFetchSize=4096 username: xxxxxx password: xxxxxx validConnectionCheckerClassName: com.alibaba.druid.pool.vendor.OracleValidConnectionChecker validationQuery: SELECT 1 FROM DUAL OceanBase – MySQL 版 pamirs: datasource: base: type: com.alibaba.druid.pool.DruidDataSource driverClassName: com.alipay.oceanbase.jdbc.Driver url: jdbc:oceanbase://10.xxx.xxx.xxx:1001/base username: xxxxxx password: xxxxxx 连接 URL 配置 点击查看官方JDBC连接配置说明 URL 格式（OceanBase – Oracle 版） jdbc:oceanbase://${host}:${port}/${database}?useServerPrepStmts=true&useOraclePrepareExecute=true&defaultFetchSize=4096 在jdbc连接配置时，useServerPrepStmts=true&useOraclePrepareExecute=true 必须配置，否则自增主键无法正常使用。 defaultFetchSize=4096 意味着在使用服务端预处理时，游标每次获取的结果集行数，驱动默认值为 10，在进行大量数据获取时会出现卡顿的现象，因此推荐使用 4096 作为其结果集大小。过大可能会导致 OOM，过小可能还是会出现卡顿，该值需要按实际情况进行配置。 其他连接参数如需配置，可自行查阅相关资料进行调优。 方言配置（OceanBase – Oracle 版） PS：OceanBase – MySQL 版无需配置方言，只需修改数据库连接即可正常使用。 pamirs方言配置 pamirs: dialect: ds: base: type: OceanBase version: 4.2.5.3 major-version: oracle-4.2 pamirs: type: OceanBase version: 4.2.5.3 major-version: oracle-4.2 plus: configuration: jdbc-type-for-null: "NULL" using-model-as-property: true using-statement-handler-dialect: true mapper: batch: collectionCommit default-batch-config: read: 500 write: 100 数据库版本 type version majorVersion 4.2.5.3 OceanBase 4.2.5.3 oracle-4.2 PS：由于方言开发环境为4.2.5.3版本，其他类似版本（4.x）原则上不会出现太大差异，如出现其他版本无法正常支持的，可在文档下方留言。 schedule方言配置 pamirs: event: enabled: true schedule: enabled: true dialect: type: Oracle version: 12.2 major-version: 12c type version majorVersion Oracle 12.2 12c PS：由于 schedule 的方言与 Oracle 数据库并无明显差异，OceanBase 数据库可以直接使用 Oracle 数据库方言。 其他配置（OceanBase – Oracle 版） 逻辑删除的值配置 pamirs: mapper: global: table-info: logic-delete-value: (CAST(SYSTIMESTAMP AS DATE) – TO_DATE('1970-01-01 08:00:00', 'YYYY-MM-DD HH24:MI:SS')) * 8640000000000

  张博昊

  2025年7月21日

  1.1K000