PC端、移动端默认Mask模板

相关推荐

• 低无一体

  提交数据动作如何把弹窗内的数据完全返回

  场景介绍 表格行的操作列有一个打开弹窗的动作 弹窗内为表格行数据的表单，表单内有一个o2m字段，展示了除关联关系字段(大部分场景为id)外的其他字段 弹窗底部动作区域有一个提交数据的客户端动作，该动作会将弹窗内表单的数据回写到表格行的数据上 场景截图 问题现象 点击提交数据的客户端动作，会将数据回写到表格行的数据上，但是表格行拿到的o2m字段的数据只有id字段，o2m字段的编码和名称并不会提交到表格行，o2m字段默认提交规则是只会提交关联关系字段（大部分场景为id）的数据 解决方案 该方案适合5.x版本,4.x版本新建的字段组件无法自动生成属性面板，建议拿下面的组件在SPI加上model和name注册实现 自定义o2m字段所在的组件，m2m字段或者其他类似问题的组件也是如下面组件一样覆写submit方法即可 import { BaseFieldWidget, FormO2MTableFieldWidget, ModelFieldType, SPI, SubmitRelationValue, SubmitValue, ViewType } from '@kunlun/dependencies'; @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: ViewType.Form, ttype: ModelFieldType.OneToMany, widget: 'SubmitAllDataO2MTable' }) ) export class MyFormO2MTableFieldWidget extends FormO2MTableFieldWidget { public async submit(submitValue: SubmitValue): Promise<Record<string, unknown> | SubmitRelationValue | undefined> { return { [this.itemName]: this.value }; } } 在界面设计器的组件功能内新增对应业务类型的自定义组件，组件内的元件api名称填写上面组件的名称SubmitAllDataO2MTable 在界面设计器的设计页面切换o2m字段组件为SubmitAllDataO2MTable 参考文档 自定义组件文档

  nation

  2024年6月28日

  1.3K000
• 组件

  oio-checkbox 对选框

  API 属性 Checkbox 参数 说明 类型 默认值 版本 autofocus 自动获取焦点 boolean false checked(v-model:checked) 指定当前是否选中 boolean false disabled 失效状态 boolean false indeterminate 设置 indeterminate 状态，只负责样式控制 boolean false value 与 CheckboxGroup 组合使用时的值 boolean | string | number – 事件 事件名称 说明 回调参数 版本 change 变化时回调函数 Function(e:Event) –

  汤乾华

  2023年12月18日

  817000
• 前端

  前端环境和启动前端工程

  本节核心是带大家直观的感受下我们上节构建的demo模块，并搭建前端环境为后续学习打下基础 环境准备 配置NPM源 npm config set registry http://nexus.shushi.pro/repository/kunlun/ 登录NPM源账号 npm login –registry "http://nexus.shushi.pro/repository/kunlun/" # username、password、email 获取方式： # 1、请见oinone开源社区群公告，也可以联系oinone合作伙伴或服务人员; # 2、参考数式发过去的部署包(部署.zip)中的账号说明：docker-mvn-npm账号.md npm info underscore 环境准备参考 [前端环境准备Mac版本]https://doc.oinone.top/oio4/9225.html [前端环境准备Windows版本]https://doc.oinone.top/oio4/9226.html 启动前端工程 1、下载前端工程本地运行 [ss-front-modules.zip]ss-front-modules 2、解压下载后的工程，可以查看README.MD快速上手指南; 找到vue.config.js文件，修改devServer.proxy.pamirs.target为后端服务的地址和端口 const WidgetLoaderPlugin = require('@kunlun/widget-loader/dist/plugin.js').default; const Dotenv = require('dotenv-webpack'); module.exports = { lintOnSave: false, runtimeCompiler: true, configureWebpack: { module: { rules: [ { test: /\.widget$/, loader: '@kunlun/widget-loader' } ] }, plugins: [new WidgetLoaderPlugin(), new Dotenv()], resolveLoader: { alias: { '@kunlun/widget-loader': require.resolve('@kunlun/widget-loader') } } }, devServer: { port: 8081, disableHostCheck: true, progress: false, proxy: { pamirs: { // 支持跨域 changeOrigin: true, // 改成本地后端对应的IP和端口； 本地后端未启动的情况也可改成无代码后端IP和端口 target: 'http://192.168.0.121:8190' } } } }; 3、 安装依赖和运行在工程目录ss-front-modules下执行 # 安装依赖 npm i # 运行 npm run dev 4、若安装失败 检查本地node、npm、vue对应的版本 5、 如果启动报错 清除node_modules后重新 npm i mac清除命令：npm run cleanOs windows清除命令: npm run clean 注：要用localhost域名访问，.env文件这里也要改成localhost。如果开发中一定要出现前后端域名不一致，老版本Chrome会有问题，修改可以请参https://www.cnblogs.com/willingtolove/p/12350429.html。或者下载新版本Chrome 进入前端工程ss-front-modules文件目录下，执行 npm run dev，最后出现下图就代表启动成功 6、使用 http://127.0.0.1:8081/login 进行访问，并用admin账号登陆，默认密码为admin 5、点击左上角进行应用切换，会进入App Finder页面，可以看到所有已经安装的应用，可以对照boot的yml配置文件看。 在后续的学习过程中我们会不断完善示例中的模块。至此恭喜您，前端工程已经启动完成。 示例工程分层说明 # ss-boot 不做业务研发，只做包的组装和依赖 # ss-oinone 与Oinone结合层，这个工程结构可以把数式Oinone的改造收口，也是业务工程依赖的核心层 # ss-admin-widget 与界面设计器无代码的结合工程，在这个工程结构里可以把组件放在无代码平台上使用 # ss-project 模拟的项目工程，做某个项目的个性化开发

  望闲

  2024年5月28日

  1.9K000
• 低无一体

  如何自定义表格单元格样式

  介绍 OinOne的表格是基于Vxe-Table实现的，我们将Vxe-table内置的关于单元格样式的方法、属性开放到了表格组件TableWidget上 Vxe-Table相关文档 vxe-table的单元格样式 vxe-table的单元格动态样式 单元格样式 行的样式、单元格样式，表头的样式、表尾的样式、全部都可以完全自定义，通过设置 cellClassName、headerCellClassName、rowClassName …等参数 （注：当自定义样式之后可能会覆盖表格的样式，比如选中行..等，记得自行处理好相关样式） 单元格动态样式 行的动态样式、单元格动态样式，表头的动态样式、表尾的动态样式、可以通过设置 cellStyle、headerCellStyle、rowStyle …等参数 （注：当自定义样式之后可能会覆盖表格的样式，比如选中行..等，记得自行处理好相关样式） 示例代码 这里仅演示cellClassName和cellStyle，其他方法的出入参数请参考上面的Vxe-Table文档 import { BaseElementWidget, SPI, TableWidget, ViewType, Widget } from '@kunlun/dependencies'; @SPI.ClassFactory(BaseElementWidget.Token({ viewType: ViewType.Table, widget: 'CustomStyleTableWidget', })) export class CustomStyleTableWidget extends TableWidget { @Widget.Method() protected cellClassName({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) { if (column.field === 'field00019') { return `demo-cell-${column.field}`; } return ''; } @Widget.Method() protected cellStyle({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) { if (column.field === 'field00019') { return { backgroundColor: '#f60', color: '#ffffff' }; } return ''; } } 效果预览

  nation

  2024年10月30日

  1.2K000
• 前端

  表格字段API

  BaseTableFieldWidget 表格字段的基类. 示例 class MyTableFieldClass extends BaseTableFieldWidget{ } 内置常见的属性 dataSource 当前表格数据 rootData 根视图数据 activeRecords 当前选中行 userPrefer 用户偏好 width 单元格宽度 minWidth 单元格最小宽度 align 内容对齐方式 headerAlign 头部内容对齐方式 metadataRuntimeContext 当前视图运行时的上下文，可以获取当前模型、字段、动作、视图等所有的数据 urlParameters 获取当前的url field 当前字段 详细信息 用来获取当前字段的元数据 model 当前模型 详细信息 用来获取当前模型的元数据 view 当前视图 详细信息 界面设计器配置的视图dsl disabled 是否禁用 详细信息 来源于界面设计器的配置 invisible 当前字段是否不可见 详细信息 来源于界面设计器的配置，true -> 不可见， false -> 可见 required 是否必填 详细信息 来源于界面设计器的配置，如果当前字段是在详情页，那么是false readonly 是否只读 详细信息 来源于界面设计器的配置，如果当前字段是在详情页、搜索，那么是false label 当前字段的标题 详细信息 用来获取当前字段的标题 内置常见的方法 renderDefaultSlot 渲染单元格内容 示例 @Widget.Method() public renderDefaultSlot(context): VNode[] | string { // 当前单元格的数据 const currentValue = this.compute(context) as string[]; return [createVNode('div', { class: 'table-string-tag' }, currentValue)]; } renderHeaderSlot 自定义渲染头部 示例 @Widget.Method() public renderHeaderSlot(context: RowContext): VNode[] | string { const children = [createVNode('span', { class: 'oio-column-header-title' }, this.label)]; return children; } getTableInstance 获取当前表格实例（vxe-table） getDsl 获取界面设计器的配置

  汤乾华

  2023年11月16日

  938000