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

相关推荐

• 设计器

  【界面设计器】他表字段

  阅读之前 你应该： 熟悉模型的增删改查相关内容。【界面设计器】模型增删改查基础 概述 他表字段是一种可以从关联关系字段中取出对应字段，并平铺在当前模型中的特殊字段。本质上是具有固定【计算公式】的字段。 其主要用于解决GQL在获取关联关系字段时层级过深的问题（非存储的他表字段），也可以用于解决字段冗余的数据同步问题（存储的他表字段）。 这里需要注意的一点是，他表字段的数据同步能力是在客户端进行处理的。无法完全保证数据同步的一致性。 场景描述 为了方便接下来的描述，我们需要先构建一个基本的业务场景，这个场景中包含【商品】、【商品订单】以及【商品订单明细】三个模型。 创建/编辑【商品订单明细】时使用【商品】，【商品】下拉选项中使用【商品编码】 – 【商品名称】格式展示。 在【商品订单明细】展开的表格中展示【商品编码】和【商品名称】，而不是使用【商品】。 其模型定义如下： 商品（Item） 名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段 ID id 整数 否 – – – – 编码 code 文本 否 128 – – – 名称 name 文本 否 128 – – 商品订单（ItemOrder） 名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段 ID id 整数 否 128 – – 编码 code 文本 否 128 – – – 订单明细 details 一对多 是 – 商品订单明细（ItemOrderDetail） id – orderId 商品订单明细（ItemOrderDetail） 名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段 ID id 整数 否 128 – – 订单 order 多对一 否 – 商品订单（ItemOrder） orderId – id 订单ID orderId 整数 否 – – – 商品 item 多对一 否 – 商品（Item） itemId – id 商品ID itemId 整数 否 – – – 数量 count 整数 否 – – – 准备工作 根据模型定义，我们要为【商品】和【商品订单】创建基本的增删改查操作，以此来进行我们接下来的步骤。 （下面仅展示了一些特殊页面，其他页面与基础的增删改查页面没有明显差别） 设计商品订单【表单】视图 将订单明细拖放至页面中，并使用【组件切换】功能将当前的【下拉多选】组件切换至【表格】组件。 对订单明细所展开的【内嵌表格】进行设计。将【商品】和【数量】两个字段放入表格中。 设计创建和编辑使用的弹窗视图。（两个按钮都需要设计，这里仅演示创建按钮的设计过程） 小贴士： 点击弹窗右上角的X可关闭弹窗设计页面。 左侧【组件库】-【模型】中展示的【当前模型】在选中【订单明细】字段以及它内部的字段或动作时会变为【商品订单明细】关联模型。要想继续设计【商品订单】模型，需要选中任意一个不在【订单明细】字段范围内的组件。在当前视图中可以选中【编码】字段切换至【商品订单】模型。 多模型视图的设计总是需要关注【当前模型】这一信息的。 创建他表字段 目前仅能在界面设计器中通过他表字段组件创建他表字段，在低代码中使用Related定义他表字段。 拖入他表字段，创建【商品编码】字段 拖入他表字段，创建【商品名称】字段 隐藏表格中的【商品】字段 PS：由于他表字段本质上是通过引用的方式取得对象中的值，所以此处不能将该字段直接移除，而是需要隐藏。 在创建/编辑弹窗中添加他表字段并隐藏 PS：内嵌表格的创建/编辑功能同样会根据元数据进行裁剪，因此要想保证【商品编码】和【商品名称】被正确回填到表格中，这一步骤是必须的。并且为了避免由于使用不同字段导致无法回填的问题，你需要从【组件库】-【模型】中重复使用字段，而不是从【组件】拖入。这并非是他表字段的特性，而是所有内嵌表格都只能通过这种方式进行数据回填。

  oinone

  2023年11月1日

  773000
• 前端

  前端低无一体使用教程

  介绍 客户在使用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日

  1.4K001
• 后端部署

  nginx如何配置后端服务的负载均衡

  要在Nginx中实现对同一套服务部署两遍并且按比例分配请求，你可以利用Nginx的负载均衡功能。具体做法如下： 步骤 1: 配置 upstream 首先，在Nginx的配置文件（通常是/etc/nginx/nginx.conf或/etc/nginx/sites-available/default，具体路径可能因系统而异）中定义一个upstream块，列出你的两个服务实例。这里假设你的两个服务实例运行在相同的主机上，但监听不同的端口，例如8080和8081。 http { upstream backend { server 192.168.1.100:8091 weight=1; server 192.168.1.101:8091 weight=1; } # … } 在这个例子中，weight=1表示两个服务实例具有相同的权重，Nginx会尽量以1:1的比例分配请求给这两个实例。 步骤 2: 配置 location 或 server 块 接着，在配置文件中找到或添加一个server块，然后在其中的location指令内指定使用刚刚定义的upstream。 server { listen 80; server_name your.domain.com; location / { proxy_pass http://backend; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } 这里的proxy_pass http://backend;告诉Nginx将请求转发到名为backend的upstream定义的服务器列表中。 步骤 3: 重启Nginx 最后，保存配置文件并重启Nginx以使更改生效。 sudo nginx -t # 先测试配置是否正确 sudo systemctl restart nginx # 或者 service nginx restart，取决于你的系统 注意事项 确保你的两个服务实例是完全独立且状态同步的，以避免数据不一致或服务故障。 使用weight参数可以调整分配策略，如果你想改变分配比例，可以通过修改weight值来实现。 考虑到高可用性，还可以配置max_fails和fail_timeout等参数来处理失败的后端连接。

  nation

  2024年6月5日

  795000
• 后端部署

  如何解决界面设计器保存提示：元数据不存在或已删除

  现象 界面设计器设计页面的时候，从左侧边栏模型下拖入了一个字段到页面，保存的时候提示：元数据不存在或已删除 原因 共base库不共元数据缓存redis导致的，不共redis的情况下，每次本地新增或修改元数据(如：字段、方法)启动后会同步本地redis，再去线上启动的时候，由于元数据已经在本地写入到了base库，所以该次启动不会触发redis差量更新 解决方案 通过将boot工程application.yml以下配置，让redis全量刷新元数据缓存 pamirs: distribution: session: allMetaRefresh: true 扩展 这个方法只能解决新增或修改元数据，如果出现了删除元数据的话，改为true也不行，清空或者手动删除问题redis的key都可以

  nation

  2024年7月21日

  763000
• 后端

  【MSSQL】后端部署使用MSSQL数据库（SQLServer）

  MSSQL数据库配置 驱动配置 Maven配置（2017版本可用） <mssql.version>9.4.0.jre8</mssql.version> <dependency> <groupId>com.microsoft.sqlserver</groupId> <artifactId>mssql-jdbc</artifactId> <version>${mssql.version}</version> </dependency> 离线驱动下载 mssql-jdbc-7.4.1.jre8.jarmssql-jdbc-9.4.0.jre8.jarmssql-jdbc-12.2.0.jre8.jar JDBC连接配置 pamirs: datasource: base: type: com.alibaba.druid.pool.DruidDataSource driverClassName: com.microsoft.sqlserver.jdbc.SQLServerDriver url: jdbc:sqlserver://127.0.0.1:1433;DatabaseName=base username: xxxxxx password: xxxxxx initialSize: 5 maxActive: 200 minIdle: 5 maxWait: 60000 timeBetweenEvictionRunsMillis: 60000 testWhileIdle: true testOnBorrow: false testOnReturn: false poolPreparedStatements: true asyncInit: true 连接url配置 暂无官方资料 url格式 jdbc:sqlserver://${host}:${port};DatabaseName=${database} 在jdbc连接配置时，${database}必须配置，不可缺省。 其他连接参数如需配置，可自行查阅相关资料进行调优。 方言配置 pamirs方言配置 pamirs: dialect: ds: base: type: MSSQL version: 2017 major-version: 2017 pamirs: type: MSSQL version: 2017 major-version: 2017 数据库版本 type version majorVersion 2017 MSSQL 2017 2017 PS：由于方言开发环境为2017版本，其他类似版本原则上不会出现太大差异，如出现其他版本无法正常支持的，可在文档下方留言。 schedule方言配置 pamirs: event: enabled: true schedule: enabled: true dialect: type: MSSQL version: 2017 major-version: 2017 type version majorVersion MSSQL 2017 2017 PS：由于schedule的方言在多个版本中并无明显差异，目前仅提供一种方言配置。 其他配置 逻辑删除的值配置 pamirs: mapper: global: table-info: logic-delete-value: CAST(DATEDIFF(S, CAST('1970-01-01 00:00:00' AS DATETIME), GETUTCDATE()) AS BIGINT) * 1000000 + DATEPART(NS, SYSUTCDATETIME()) / 100 MSSQL数据库用户初始化及授权 — init root user (user name can be modified by oneself) CREATE LOGIN [root] WITH PASSWORD = 'password'; — if using mssql database, this authorization is required. ALTER SERVER ROLE [sysadmin] ADD MEMBER [root];

  张博昊

  2024年10月18日

  509000