移动端5.0.x启动、打包代码报错

相关推荐

• 前端

  TableWidget 与 FormWidget 浅析

  前言：本文主要聚集于 TableWidget和 FormWidget，对两者以外的内容不做赘述。 TableWidget和 FormWidget作为一个基本的渲染模块与 Mask等不同，TableWidget与 FormWidget有着明确的目的，比如 TableWidget就是作为一个表格视图，这种名称中可以看得出来。其将表格的一系列能力聚拢，如单元格，行列选择排序，翻页等等； TableWidget 我们使用表格到底是在使用什么？ 在我们讲述渲染流程前，我们需要提一个问题，在我们使用表格组件时，我们在使用什么，换而言之，我们对表格组件中关注的是什么？应该说我们更关注的是表格所展示的数据。TableWidget或者说整个低代码其实解决的就是这个问题，让我们可以很方便的展示数据。不用关心一些细枝末节 TableWidget 的渲染 TableWidget在整个渲染流程中的负责组装各种 Vue 组件所需要的核心数据或事件回调并传递给其绑定的 Vue 组件即 DefaultTable，如 allowRowClick,rowClickMode等等，这些值会作为 Props 传递给 DefaultTable，DefaultTable则一定意义上充当了一个桥接层，主要做了两件事，处理 Props， 处理 Slot，TableWidget传递给 DefaultTable的 Props 会经过 DefaultTable再次组合，创建新的 Props,同时根据当前的 Props 判断是否有必要新增一些 slot，比如 OioPagination组件是否需要渲染就取决于 Props.showPagination 的值,经过 DefaultTable的处理后， props与 slot会进一步交给 OioTable进行渲染，OioTable则会进一步聚合处理，比如如果没有 defaultSlot则进行空值的渲染，如果存在 footSlot则会构建一个包裹层去包裹它。这些组件协同完成了一个表格的结构，而我们真正关心的数据则由一个个 BaseTableColumnWidget渲染。BaseTableColumnWidget的渲染过程类似于 TableWidget，其负责组装 DefaultTableColumn渲染所需要的 props，然后交给 OioTableColumn进行实际渲染。并且会有多种基于 BaseTableColumnWidget的 widget通过重写 renderDefaultSlot,renderEditSlot,renderContentSlot,renderHeaderSlot等几个 props 实现不同状态，不同类型等组件的渲染。通过 TableWidget与 BaseTableColumnWidget相结合， Table 页面完成了主体框架与内容的渲染。而当数据完成渲染后，不可避免的会有数据交互，比如分页，排序，过滤等，这些交互都由 TableWidget与 BaseTableColumnWidget共同完成。比如排序翻页等，TableWidget会将事件作为 props 向下注入，当事件被调用，TableWidget会进行处理，比如发起请求，或者对内部数据排序等。而除了数据的展示，还有一些动作，即 Action ,Action 被触发时会按照内部的配置进行工作，比如编辑时，将获取 activeRecord，随后触发 Table 的编辑。 TableWidget就是这样去渲染出了一个完整的表格页面。能够完成数据的增删改查等操作 FormWidget FormWidget与 TableWidget一样，也是作为一个渲染模块，但是它与 TableWidget不同的是，FormWidget是作为一个表单视图，其将表单的一系列能力聚拢，如表单提交，表单校验，表单重置等等。其重点在于对数据的增改。所以在提供的能力上也有区别，比如 FormWidget没有提供翻页，排序，过滤等能力，因为这些能力属于表格的能力，而 FormWidget则更关注于表单的能力。提供了数据的存储，提交，校验等能力 Form 在渲染时流程与 Table 大同小异，其同样为三层结构 FormWidget => DefaultForm => FormFieldWidget 一层层向下渲染，不同的在于 FormWidget 更多的关注点在于维护其内部的 FormData 这是整个表单页面所围绕的东西，当页面上的控件发生变化，其变更的值会被收集到 FormData 中，并在后续中使用。同时在编辑已有数据场景下，Form 会将数据加载到 FormData，随后下放给 FormFiledWidget。 异同之处 从介绍中可以看出，Table 侧重于数据的查询展示，Form 则侧重于数据的变动处理，但是抽象的看其核心其实是同一套逻辑，即数据的存储与展示，中间或许会有对数据的某些处理，但是并不是本质上的区别，两者在核心理念上是一致的，即让使用者只需要关心数据本身，而不需要关注于繁琐的视图构造，这是整个低代码甚至前端的发展方向。

  liji2

  2025年3月25日

  879000
• 低无一体

  树型表格全量加载数据如何处理

  阅读该文档的前置条件 【界面设计器】树形表格 1.前端自定义表格组件 import { ActiveRecord, BaseElementWidget, Condition, Entity, SPI, TableWidget, ViewType } from '@kunlun/dependencies'; @SPI.ClassFactory( BaseElementWidget.Token({ type: ViewType.Table, widget: ['demo-tree-table'] }) ) export class TreeTableWidget extends TableWidget { // 默认展开所有层级 protected getTreeExpandAll() { return true; } // 关闭懒加载 protected getTreeLazy(): boolean { return false; } public async $$loadTreeNodes(condition?: Condition, currentRow?: ActiveRecord): Promise<Entity[]> { // 树表加载数据的方法，默认首次只查第一层的数据，这里去掉这个查询条件的参数condition，这样就会查所有层级数据 return super.$$loadTreeNodes(undefined, currentRow); } } 2. 注册layout import { registerLayout, ViewType } from '@kunlun/dependencies'; const install = () => { registerLayout( ` <view type="TABLE"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="demo-tree-table" slot="table"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" slotSupport="field" /> <element widget="rowActions" slot="rowActions" slotSupport="action" /> </element> </view> `, { viewType: ViewType.Table, model: "resource.resourceCity", // 变量，需要替换 actionName: "MenuuiMenu6f6005bdddba468bb2fb814a62fa83c6", // 变量，需要替换 } ); }; install();

  nation

  2024年8月17日

  1.4K000

• 根据固定的接口返回数据动态控制按钮的显隐

  在项目开发中，我们经常会面临这样的情况：当前按钮的显示与隐藏需要根据后端某个接口返回的数据来决定，而无法通过权限配置进行处理。为了解决这个问题，我们可以通过自定义的方式来处理这一功能。 首先，我们需要知道当前动作是什么类型的动作，例如「服务端动作、跳转动作、打开弹窗的动作、打开抽屉的动作」。 ServerActionWidget -> 服务端动作DialogViewActionWidget -> 打开弹窗动作DrawerViewActionWidget -> 打开抽屉动作RouterViewActionWidget -> 路由跳转动作 下面是一个示例代码，演示了如何通过自定义的方式处理按钮的显示与隐藏逻辑。 import { ActionType, ActionWidget, SPI, ServerActionWidget, Widget, http } from '@kunlun/dependencies'; @SPI.ClassFactory( ActionWidget.Token({ actionType: ActionType.Server, model: 'resource.k2.Model0000000100', name: 'create' }) ) export class MyAction extends ServerActionWidget { // 当前动作是服务端动作，继承的是 ServerActionWidget @Widget.Reactive() private needInvisible = false; @Widget.Reactive() public get invisible(): boolean { return this.needInvisible; } protected mounted(): void { super.mounted(); // 模拟接口 http.query(模块名, `graphql`).then(res => { if(res) { this.needInvisible = true } }) } } 在实际应用中，我们可以调用后端接口，根据返回的数据动态修改 needInvisible 这个值，从而实现按钮的动态显示与隐藏效果。这样的设计使得按钮的显示状态更加灵活，并且能够根据后端数据动态调整，提高了系统的可定制性。

  汤乾华

  前端 2023年11月23日

  1.7K000

• 【前端】环境配置（v4）

  环境配置 前端环境配置包含.env编译时配置和RuntimeConfig运行时配置 编译时配置 .env 属性 类型 默认值 作用 BASE_PATH [String] 统一配置URL请求路径前缀 STATIC_IMG [String] 静态资源路径 RUNTIME_CONFIG_BASE_URL [String] 运行时配置文件URL请求路径前缀 RUNTIME_CONFIG_FILENAME [String] manifest 运行时配置文件名 MESSAGE_LEVEL DEBUG、SUCCESS、INFO、WARN、ERROR 消息级别 BASE_PATH 当配置BASE_PATH=/test时，前端所有请求就将添加该前缀。 如/login登录页，将自动修改为/test/login MESSAGE_LEVEL 当配置消息级别时，全局的消息通知将根据消息级别进行过滤。 DEBUG：允许全部级别的消息通知。 SUCCESS：仅允许ERROR、WARN、INFO、SUCCESS级别的消息通知。 INFO：仅允许ERROR、WARN、INFO级别的消息通知。 WARN：仅允许ERROR、WARN级别的消息通知。 ERROR：仅允许ERROR级别的消息通知。 运行时配置 RuntimeConfig 运行时配置是作为编译时配置的补充。 manifest.js runtimeConfigResolve({ …… }); 开发时使用运行时配置 创建{PROJECT_NAME}/public/manifest.js文件。 如kunlun-boot/public/manifest.js 生产环境使用运行时配置 在nginx中配置的dist访问路径下，创建manifest.js文件。 若将/opt/pamirs/frontend/dist作为访问路径，则创建/opt/pamirs/frontend/dist/manifest.js文件。 注意事项 编译时可能使用编译时配置改变运行时配置文件的路径和文件名，注意文件名和访问路径必须匹配。 在浏览器中访问时，nginx或者浏览器会对js文件会进行缓存处理，会导致运行时配置不能及时生效。最好的办法是配置nginx时，禁用manifest.js文件缓存。 在manifest.js文件中建议不要包含任何与配置项无关的字符（包括注释），该文件在通过网络传输过程中，无法处理这些无效内容。 面包屑配置 breadcrumb 配置方式 runtimeConfigResolve({ breadcrumb?: boolean | BreadcrumbConfig }); BreadcrumbConfig /** * 面包屑配置 */ export interface BreadcrumbConfig extends RuntimeConfigOptions, EnabledConfig { /** * <h3>是否启用</h3> * <p>启用时，需配合mask渲染对应的面包屑组件</p> * <p>默认: 开启</p> */ enabled?: boolean; /** * <h3>首页配置</h3> * <p>boolean值与{@link BreadcrumbHomepageConfig#enabled}等效</p> */ homepage?: boolean | BreadcrumbHomepageConfig; } /** * 首页配置 */ export interface BreadcrumbHomepageConfig extends RuntimeConfigOptions, EnabledConfig { /** * <h3>首项显示首页</h3> * <p>默认: 开启</p> */ enabled?: boolean; /** * <h3>首页类型</h3> * <p>默认: 'application'</p> */ type?: 'application' | 'module'; } 多选项卡配置 multiTabs 配置方式 runtimeConfigResolve({ multiTabs?: boolean | MultiTabsConfig }); MultiTabsConfig /** * 多标签页配置 */ export interface MultiTabsConfig extends RuntimeConfigOptions, EnabledConfig { /** * <h3>是否启用（非运行时）</h3> * <p>启用时，需配合mask渲染对应的多标签页管理组件</p> * <p>默认: 开启</p> */ enabled?: boolean; /** * <h3>是否使用内联多标签页</h3> * <p>仅在使用默认mask时生效</p> */ inline?: boolean; /** * <h3>显示模块Logo</h3> * <p>默认: 开启</p> */ showModuleLogo?: boolean; /** * <h3>最多标签页数量</h3> *…

  oinone

  前端 2023年11月1日

  1.7K000
• 组件

  前端表格复制

  我们可能会遇到表格复制的需求，也就是表格填写的时候，不是增加一行数据，而是增加一个表格。以下是代码实现和原理分析。 代码实现 在 boot 工程的 main.ts 中加入以下代码 import { registerDesignerFieldWidgetCreator, selectorDesignerFieldWidgetCreator } from '@oinone/kunlun-ui-designer-dependencies'; // 注册无代码组件，将表头分组的无代码组件，注册成字段表格组件 registerDesignerFieldWidgetCreator( { widget: 'DynamicCreateTable' }, selectorDesignerFieldWidgetCreator({ widget: TABLE_WIDGET })! ); DynamicCreateTableWidget 动态添加表格 ts 组件 import { FormO2MTableFieldWidget, Widget, DslDefinition, RuntimeView, SubmitValue, BaseFieldWidget, ModelFieldType, SPI, ViewType, ActiveRecord, uniqueKeyGenerator } from '@oinone/kunlun-dependencies'; import { MyMetadataViewWidget } from './MyMetadataViewWidget'; import DynamicCreateTable from './DynamicCreateTable.vue'; @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: ViewType.Form, ttype: ModelFieldType.OneToMany, widget: 'DynamicCreateTable' }) ) export class DynamicCreateTableWidget extends FormO2MTableFieldWidget { public myMetadataViewWidget: MyMetadataViewWidget[] = []; @Widget.Reactive() public myMetadataViewWidgetLength = 0; @Widget.Reactive() public myMetadataViewWidgetKeys: string[] = []; protected props: Record<string, unknown> = {}; public initialize(props) { super.initialize(props); this.props = props; this.setComponent(DynamicCreateTable); return this; } // region 创建动态表格 @Widget.Method() public async createTableWidget(record: ActiveRecord) { const index = this.myMetadataViewWidget.length; const handle = uniqueKeyGenerator(); const slotKey = `MyMetadataViewWidget_${handle}`; const widget = this.createWidget( new MyMetadataViewWidget(handle), slotKey, // 插槽名称 { subIndex: index, metadataHandle: this.metadataHandle, rootHandle: this.rootHandle, automatic: true, internal: true, inline: true } ); this.initDynamicSubview(this.props, widget); widget.setData(record); this.myMetadataViewWidgetLength++; this.myMetadataViewWidgetKeys.push(slotKey); this.myMetadataViewWidget.push(widget); } protected initDynamicSubview(props: Record<string, unknown>, widget: MyMetadataViewWidget) { const { currentViewDsl } = this; let viewDsl = currentViewDsl; if (!viewDsl) { viewDsl = this.getViewDsl(props)…

  银时

  2025年7月21日

  740000