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

相关推荐

• 数据可视化

  数据可视化中图表的低无一体

  介绍 数据可视化提供了自定义图表模板的功能，以满足现有图表模板无法满足业务需求的情况。 如何使用 点击数据可视化页面头部的“图表模板” 点击创建按钮后弹出图表模板表单，填写后提交保存 找到刚刚创建的图表模板，点击操作栏中的“低无一体”按钮 点击弹窗底部的“生成sdk”按钮 上一步操作完成后会重新刷新页面，再次找到该条数据，点击“低无一体”按钮，再次进来可以看到“下载模板工程”的按钮已经可以点击了，点击该按钮就可以下载到该自定义图表模板的示例代码包文件kunlun-chart-sdk.zip 解压kunlun-chart-sdk.zip后我们可以看到工程结构，在根目录下执行npm i安装依赖 可以看到packages/kunlun-plugin/src/chart/CUSTOM_BAR.vue是我们自定义的图表vue组件，可以修改里面的自定义展示和逻辑处理 完成自定义代码后去根目录运行npm run build打包代码，打包后可以在packages/kunlun-plugin/dist下看到打包后的js和css文件(如模板中无css则不会生成css文件，无需理会) 回到自定义图表模板的管理页面，找到对应的数据行，再次点击“低无一体”按钮，在弹窗内上传上一步生成的kunlun-plugin.umd.js和kunlun-plugin.css文件，上传完成后点击弹窗底部的“确定”按钮保存 进入图表的编辑页面，在图表分类选择处，可以看到柱状图的分类下有我们新增的“自定义柱状图”的子类，点击切换 切换后可以看到图表已经从开始柱状图变成了我们在前面自定义的蓝色边框样式，内部是hello chart文字的图表。 示例自定义图表组件 本例子以echarts的图表库实现柱状图，框架自带的是以G2的库实现的柱状图demo-echarts-bar.vue <template> <div class="data-designer-chart-instance demo-echarts-bar" ref="designerChartViewRef"> <div class="data-designer-chart-container" ref="designerChartViewInnerRef"></div> </div> </template> <script lang="ts"> import { defineComponent, onMounted, ref, watch } from 'vue'; import DataSet from '@antv/data-set'; import * as echarts from 'echarts/core'; import { ECharts, EChartsCoreOption } from 'echarts/core'; import { GridComponent } from 'echarts/components'; import { BarChart, BarSeriesOption } from 'echarts/charts'; import { CanvasRenderer } from 'echarts/renderers'; import { deepClone } from '@kunlun/dependencies'; import { filterDimensionScaleColumns, isSameObj, ChartTypeEnum, IChartData, IChartDataResult, chartViewMixin, isNeedRerenderChart, isShowChatView, watchEchartsSize, ChartRenderEngine } from '@kunlun/data-designer-core'; echarts.use([GridComponent, BarChart, CanvasRenderer]); export default defineComponent({ props: { …chartViewMixin.props }, data() { return { engine: ChartRenderEngine.ECHARTS, chartType: [ChartTypeEnum.MAP_CHINA] }; }, mixins: [chartViewMixin], setup(props, { emit }) { const chart = ref<ECharts>(); const designerChartViewRef = ref<HTMLElement>(null as any); const designerChartViewInnerRef = ref<HTMLElement>(null as any); onMounted(() => { initChart(); }); let option = {} as EChartsCoreOption; function initChart() { chart.value = echarts.init(designerChartViewInnerRef.value); option = { yAxis: { type: 'value' } }; } let oldChartData = {} as IChartData; watch( () => props.chartData, (newVal) =>…

  nation

  2023年11月1日

  1.2K000
• 前端

  创建与编辑一体化

  在业务操作中，用户通常期望能够在创建页面后立即进行编辑，以减少频繁切换页面的步骤。我们可以充分利用Oinone平台提供的创建与编辑一体化功能，使操作更加高效便捷。 通过拖拽实现表单页面设计 在界面设计器中，我们首先需要设计出对应的页面。完成页面设计后，将需要的动作拖入设计好的页面。这个动作的关键在于支持一个功能，即根据前端传入的数据是否包含id来判断是创建操作还是编辑操作。 动作的属性配置如下： 前端自定义动作 一旦页面配置完成，前端需要对这个动作进行自定义。以下是一个示例的代码： @SPI.ClassFactory( ActionWidget.Token({ actionType: [ActionType.Server], model: '模型', name: '动作的名称' }) ) export class CreateOrUpdateServerActionWidget extends ServerActionWidget { @Widget.Reactive() protected get updateData(): boolean { return true; } } 通过以上步骤，我们实现了一个更智能的操作流程，使用户能够在创建页面的同时进行即时的编辑，从而提高了整体操作效率。这种创建与编辑一体化的功能不仅使操作更加顺畅，同时也为用户提供了更灵活的工作流程。

  汤乾华

  2023年11月21日

  2.0K000
• 部署

  【界面设计器】模型增删改查基础

  阅读之前 你应该： 已搭建包含界面设计器的基础环境。 对平台元数据有基本了解和认识。（如果不是特别清楚也没关系） 常用元数据简介 平台中包含了许多元数据，以这些元数据为基础，可以较为完整的描述了一个【应用】或【模块】的存储结构以及用户交互。 图解 “` mermaidgraph TDModule —> DataDictionaryModule —> Model Model —> FieldModel —> Function1(Function)Model —> Action Action —> ViewAction —> ViewAction —> ServerAction —> Function2(Function)Action —> UrlActionAction —> ClientAction“` 概念解释 模块（Module）：用于定义元数据的作用域。 数据字典（DataDictionary）：固定数据可选项。 模型（Model）：用于描述一个具体对象的集合。 字段（Field）：模型中字段，用于描述对象属性。 函数（Function）：模型中的函数，用于定义对象的服务端行为。 动作（Action）：模型中的动作，用于定义对象的交互行为。具体表现为以下四个行为。 跳转动作（ViewAction）：用于视图与视图之间的跳转。 视图（View）：用于定义主内容分发区的页面内容。 服务端动作（ServerAction）：用于客户端调用服务端行为。特殊的，当函数被作为API级别开放时，客户端也可以直接调用。 链接动作（UrlAction）：用于执行浏览器超链接行为。 客户端动作（ClientAction）：用于自定义客户端动作。 其他概念解释 应用（Application）：特殊的模块，可以被用户访问的模块。 模块依赖（ModuleDependencies）：模块与模块之间具备的一种关系，使得模块可以使用被依赖模块的相关元数据。 场景描述 在以下演示过程中，我们将通过【演示模块】这一应用来引导大家完成【商品】模型的增删改查操作。并根据实际应用场景，为大家提供模型增删改查的最佳实践。 创建第一个无代码应用 （基于低代码开发的应用，可以跳过这一步骤。） 登录进入系统后，将可以按照如下步骤进行操作。（为了方便演示和体验，可直接使用admin用户进入系统） 切换应用到应用中心 创建第一个应用 至此，你已经创建了一个【演示应用】，用于接下来的操作。 创建第一个无代码模型 （基于低代码开发的模型，可以跳过这一步骤。） 切换应用到模型设计器 在模型设计器切换视图为表模式 模型设计器具有表模式和图模式两种模型展示形式，表模式主要用于单个模型的管理，图模式主要用于查看多个模型之间的关联关系。 在这里我们使用表模式。 在模型设计器切换模块到【演示模块】 创建一个存储模型【商品】 在无代码模式中，只能选择【存储模型】和【传输模型】，其代表的含义为： 存储模型：创建模型时同步创建数据库表，具备数据存储能力。 传输模型：仅创建模型，不创建数据库表，不具备数据存储能力，仅作用户交互使用。 创建模型时，一定会继承一个父模型，在模型设计器创建模型都将默认继承【基础存储模型】，该模型中默认包含【编码】和【名称】两个业务字段，以及【ID】、【创建人ID】、【更新人ID】、【创建时间】、【更新时间】五个系统字段。 在专家模式中，可以查看模型的父模型进行查看，也可以在创建模型时修改父模型。这一功能在这里不进行演示。 在下面的操作中，我们仅需使用【编码】和【名称】这两个业务字段来创建相关视图。 创建第一个表格视图 切换应用到界面设计器 选择应用和模型 这里为了方便查看，我们可以使用【全部视图类型】。 创建表格视图 输入【页面标题】，修改【视图类型】为【表格】，直接点击确定即可。会自动进入【页面设计】。 页面设计 设计表格视图 从【组件库】-【模型】中将【编码】和【名称】两个【低代码字段】拖入【表格区】 小贴士： 在左侧组件库可以切换【组件】和【模型】。【组件】用于创建和选择字段，【模型】用于直接使用现有字段。 在模型面板可以查看当前选中字段所在模型。如未选择时，为当前视图模型。 对于存储模型而言，创建字段应该是一个谨慎的操作，在学习阶段尽可能从【模型】中使用现有字段。除非有创建新字段的需求。 大家可以自由发挥，将【编码】和【名称】拖入【列表搜索区】即可使用这两个字段进行搜索。单行文本默认使用模糊搜索。 为表格提供【创建商品】功能 从【组件库】-【组件】中将【跳转动作】组件拖入【动作区】，并填写相关的元数据信息，按图示输入完成后，点击保存即可。（具体解释在文章下方） 这里会创建一个【表单】视图，并绑定至当前动作。设计完表格视图后，我们需要设计表单视图。 为表格提供【编辑商品】功能 从【组件库】-【组件】中将【跳转动作】组件拖入【行内动作区】，并填写相关的元数据信息，按图示输入完成后，点击保存即可。 为表格提供【删除商品】功能 从【组件库】-【模型】中将【删除】动作分别拖入【动作区】和【行内动作区】即可。 将表格绑定到菜单，可以让用户访问 使用【显示母版】可以查看当前页面在母版中的预览效果 添加菜单项【商品管理】并【绑定当前视图】 发布表格视图，并返回列表页 至此，我们已完成了【表格】视图的基本功能设计。 接下来，我们需要设计刚刚在【创建商品】步骤时创建的【表单】视图。点击【商品表单】卡片任意区域进入【页面设计】。 设计表单视图 从【组件库】-【模型】中将【编码】和【名称】两个【低代码字段】拖入【表单区】 为表单提供【创建/更新】功能，使得表单可以提交数据到服务端 从【组件库】-【模型】中将【创建】动作拖入【动作区】 将【创建】动作的【是否隐藏】属性改为【条件隐藏】并设置表达式 从【组件库】-【模型】中将【更新】动作拖入【动作区】 将【更新】动作的【是否隐藏】属性改为【条件隐藏】并设置表达式 为表单提供【返回】功能 将【组件】-【客户端动作】拖入【动作区】添加【返回】功能 发布表单视图，并返回列表页 （同表格视图发布） 切换应用到应用中心，为应用设置首页 使用绑定菜单，将【商品管理】菜单设置为【演示模块】的应用首页。 切换应用到演示模块，查看刚刚设计的视图以及体验增删改查基本功能 至此，一个模型的全部增删改查功能已进行完整演示。下面将对上述步骤中可能产生的疑问点进行解释说明。 跳转动作元数据配置 动作名称：跳转动作的默认显示名称 数据控制类型：用于动作点击后的数据行为控制。 处理单条数据：携带当前可用数据的一行到目标页面中，仅一行，如果勾选了多行也仅有首行（首行按勾选顺序决定）。 处理多条数据：携带当前可用数据的多行到目标页面中，至少是两行。 处理单条或多条数据：携带当前可用数据的多行到目标页面中，至少是一行。 不进行数据处理：不携带任何数据到目标页面。 打开方式：用于动作点击后的跳转行为控制。 当前窗口打开：基本的页面跳转，不打开新的浏览器窗口或标签页。 新窗口打开：打开新的浏览器窗口或标签页。特殊的，使用了平台内置的多标签页时，将不再打开新的浏览器窗口或标签页，仅会在多标签页中添加一个新的标签页。 弹窗打开：使用弹窗打开，并渲染目标页面。 抽屉打开：使用抽屉打开，并渲染目标页面。 页面内容：界面设计器交互属性。 绑定已有视图：从平台中已存在的视图中选择视图作为目标页面。 创建新页面：输入视图相关信息，创建新视图并绑定到当前动作作为目标页面。 绑定页面：【绑定已有视图】时用于选择视图。 页面标题：【创建新页面】时使用的页面信息，与【界面设计器】中【创建视图】的【页面标题】一致。 页面模型：【创建新页面】时使用的页面信息，与【界面设计器】中【创建视图】的【模型】一致。 业务类型：【创建新页面】时使用的页面信息，与【界面设计器】中【创建视图】的【业务类型】一致。 视图类型：【创建新页面】时使用的页面信息，与【界面设计器】中【创建视图】的【视图类型】一致。 操作栏位置：【创建新页面】时使用的页面信息，与【界面设计器】中【创建视图】的【操作栏位置】一致。 禁用数据加载：打开目标页面时不发起服务端查询。 加载函数：打开目标页面时使用指定的加载函数发起服务端查询。 客户端动作元数据配置 动作名称：客户端动作的默认显示名称 客户端行为：平台内置的客户端行为 数据校验：同提交动作的数据校验功能 返回上一页/关闭弹窗/关闭抽屉 刷新数据：同提交动作的刷新当前视图功能 批量更新：在批量动作打开的弹窗中使用的特殊客户端动作 删除数据：在一对多(O2M)和多对多(M2M)使用表格组件时使用的删除功能 Q/A 跳转动作的数据控制类型该如何选择？ 通常情况下，我们可以通过目标页面是否需要携带数据以及携带的数据行数，来决定数据控制类型。 在演示内容中，从【表格】视图通过【创建】按钮跳转到表单时，通常我们不需要任何数据，因此我们选择【不进行数据处理】来实现这一目的。从【表格】视图通过【编辑】按钮跳转到表单时，通常我们在行内进行操作，并且我们一次只能编辑一行数据，因此我们选择【处理单条数据】。 【组件库】-【组件】中的动作和【组件库】-【模型】中的动作有什么区别？ 【组件库】-【组件】中的动作拖入页面时，会创建一个对应的动作，因此需要输入元数据相关信息。【组件库】-【模型】中的动作为当前模型中的【服务端动作】，因此拖入页面后无需输入元数据相关信息。 【删除】动作为什么可以显示在两个区域？ 在模型中内置的【删除】动作，其数据类型为【处理单条或多条数据】，因此可以在表格的【动作区】和【行内动作区】各放置一个。不仅如此，所有的数据类型为【处理单条或多条数据】的【服务端动作】都可以这样做。 表格的【创建】和【编辑】为什么一个使用【创建新页面】，另一个使用【绑定已有视图】？ 在新增【创建】这个【跳转动作】时，由于我们在当前模型下没有一个【表单】视图可以直接使用，因此在这里我们使用【创建新页面】的方式直接创建【表单】视图，并绑定至当前动作。 在新增【编辑】这个【跳转动作】时，由于我们在上一步骤已经创建了一个可以直接使用的【表单】视图，因此在这里我们使用【绑定已有视图】。 在演示内容中，我们假设【创建商品】和【编辑商品】使用的【表单】视图可以通过【是否隐藏】属性进行简单区分，因此采取了这样的演示操作。根据我们实践经验，在大多数场景中也的确如此。 表单的【创建】和【更新】配置的【条件隐藏】具有怎样的含义？ 在平台任何存储模型/代理模型（不包含中间模型）中，都具备ID这一系统字段。通过【不进行数据处理】的跳转动作跳转至【表单】视图时，ID不会在跳转时进行传递，因此在【表单】中的ID字段为空。通过【处理单条数据】的跳转动作跳转至【表单】视图时，ID会在跳转时进行传递（如URL上可以看到id属性），因此在【表单】中的ID字段不空。 根据这一特性，我们就可以通过【条件隐藏】区分当前这个视图的业务功能。 表单的【创建】可以通过当前视图数据.ID非空进行隐藏，即表示当前ID非空时隐藏（当前ID为空时显示）。 表单的【更新】可以通过当前视图数据.ID为空进行隐藏，即表示当前ID为空时隐藏（当前ID不空时显示）。

  oinone

  2023年11月1日

  8.0K001
• 后端部署

  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日

  1.4K000
• 前端部署

  如何添加数据可视化运行时依赖

  前端 package.json中新增依赖 @kunlun/data-designer-open-pc,版本跟@kunlun/dependencies的填一样 src/main.ts内导入依赖 import 'reflect-metadata'; import { VueOioProvider } from '@kunlun/dependencies'; // START 导入代码放在导入@kunlun/dependencies之后 import '@kunlun/data-designer-open-pc'; // END 导入代码放在VueOioProvider()方法执行前 VueOioProvider({ // TODO }); 后端 父pom新增依赖 <properties> <pamirs.data.visualization.version>4.7.8</pamirs.data.visualization.version> </properties> <dependencyManagement> <dependencies> <dependency> <groupId>pro.shushi.pamirs.data.visualization</groupId> <artifactId>pamirs-data-visualization</artifactId> <version>${pamirs.data.visualization.version}</version> <type>pom</type> <scope>import</scope> </dependency> </dependencies> </dependencyManagement> 2.boot启动工程的pom新增依赖 <dependency> <groupId>pro.shushi.pamirs.data.visualization</groupId> <artifactId>pamirs-data-visualization-core</artifactId> </dependency> 3.application.yml配置新增依赖 pamirs: boot: modules: – datavi 注意：datavi 这个模块在业务工程和设计器指定数据源要保持一致。

  nation

  2024年5月15日

  1.4K000