【界面设计器】自定义字段组件基础

相关推荐

• 组件

  oio-select 选择器

  API Select props 参数 说明 类型 默认值 版本 allowClear 支持清除 boolean false autofocus 默认获取焦点 boolean false clearIcon 自定义的多选框清空图标 VNode | slot – disabled 是否禁用 boolean false dropdownClassName 下拉菜单的 className 属性 string – dropdownRender 自定义下拉框内容 ({menuNode: VNode, props}) => VNode | v-slot – filterOption 是否根据输入项进行筛选。当其为一个函数时，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false。 boolean | function(inputValue, option) true getTriggerContainer 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 function(triggerNode) () => document.body menuItemSelectedIcon 自定义当前选中的条目图标 VNode | slot – options options 数据，如果设置则不需要手动构造 selectOption 节点 array<{value, label, [disabled, key, title]}> [] placeholder 选择框默认文字 string|slot – removeIcon 自定义的多选框清除图标 VNode | slot – suffixIcon 自定义的选择框后缀图标 VNode | slot – value(v-model:value) 指定当前选中的条目 string|string[]|number|number[] – 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 getPopupContainer={triggerNode => triggerNode.parentNode} 将下拉弹层渲染节点固定在触发器的父元素中。 事件 事件名称 说明 回调参数 blur 失去焦点的时回调 function change 选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数 function(value, option:Option/Array<Option>) deselect 取消选中时调用，参数为选中项的 value (或 key) 值，仅在 multiple 或 tags 模式下生效 function(value，option:Option) dropdownVisibleChange 展开下拉菜单的回调 function(open) focus 获得焦点时回调 function inputKeyDown 键盘按下时回调 function mouseenter 鼠标移入时回调 function mouseleave 鼠标移出时回调 function popupScroll 下拉列表滚动时的回调 function search 文本框值变化时回调 function(value: string) select 被选中时调用，参数为选中项的 value (或 key) 值 function(value, option:Option)

  汤乾华

  2023年12月18日

  894000
• 前端

  前端环境和启动前端工程

  本节核心是带大家直观的感受下我们上节构建的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日

  2.5K000
• 前端

  字段组件submit方法详解

  场景介绍 在日常开发调试表单页的过程中，细心的小伙伴应该注意到，视图内的数据(通过vue调试工具看到的formData就是视图的数据)和最终通过服务端动作提交的数据不总是一致的，本文将带领大家解开疑惑。 为什么会出现这种现象？ 出现这种情况都是当前模型上有关联关系字段的场景，以多对一(M2O)场景为例，由于当前模型的关联关系字段是通过字段配置中的referenceFields属性和当前模型的relationFields属性进行关联的，所以提交数据的时候只需要拿到relationFields配置的字段就可以了，没有必要再去多拿关联关系字段本身的数据。 结合业务场景说明 这里以商品模型和类目模型举例，商品模型内有个类目的m2o字段category和对应的relationFields字段categoryId，数据提交到后端的时候前端默认会根据字段配置只获取categoryId，而category的整个对象都不会被提交。 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.demo.api.model.DemoItemCategory; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.base.common.CodeModel; @Model.model(DemoItem.MODEL_MODEL) @Model(displayName = "测试商品") public class DemoItem extends CodeModel { private static final long serialVersionUID = -5104390780952631397L; public static final String MODEL_MODEL = "demo.DemoItem"; @Field.String @Field(displayName = "商品名称") private String name; @Field.Integer @Field(displayName = "类目ID") private Long categoryId; @Field.many2one @Field.Relation(relationFields = {"categoryId"}, referenceFields = {"id"}) @Field(displayName = "商品类目") private DemoItemCategory category; } 前端是如何处理数据的 前端的字段组件提供了submit()方法来让我们可以有就会在提交数据的时候改变数据。 // 字段组件基类 export class BaseFormItemWidget< Value = unknown, Props extends BaseFormItemWidgetProps = BaseFormItemWidgetProps > extends BaseDataWidget<Props> { /** * 数据提交的方法，例如：m2o字段user(假设其关系字段为userId)的值{id: 1, name: 'xxx'},但是实际后端数据只需要其中的id，所以用m2o对应的关系字段userId提交数据就可以了 * @param submitValue */ public submit(submitValue: SubmitValue): ReturnPromise<Record<string, unknown> | SubmitRelationValue | undefined> { return undefined; } } 这里先以FormStringFieldSingleWidget组件处理密码类型的字段讲解。密码一般在输入的时候是明文，为了提高提交到后端的安全性，可以将这个密码加密后再传到后端，后端再做进一步处理，这个场景中，视图中的密码和提交给后端的密码就出现了不一致的情况， @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: [ViewType.Form, ViewType.Search], ttype: ModelFieldType.String }) ) export class FormStringFieldSingleWidget extends FormStringFieldWidget { public submit(submitValue: SubmitValue) { let finalValue = this.value; /** * 数据提交的时候，如果判断当前字段是否需要加密，需要加密的情况用encrypt函数做加密处理 */ if (this.crypto && finalValue) { finalValue = encrypt(finalValue); } return SubmitHandler.DEFAULT(this.field, this.itemName, submitValue, finalValue); } 注意：关系字段配置的透出字段只影响该字段的查询数据方法的返回值，不会因为此配置就在提交数据里加上这部分配置的字段 字段需要提交关联关系字段内的所有数据如何处理？ 我们可以在自定义组件里覆写submit()方法，直接将this.value内的数据返回这里以覆写多对多m2m字段为例 import { BaseFieldWidget, FormM2MFieldSelectWidget, ModelFieldType, SPI, SubmitValue, ViewType } from '@kunlun/dependencies'; @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: ViewType.Form, ttype: ModelFieldType.ManyToMany, widget: 'Select', model: 'xxx.yyyyy', name: 'fileName01',…

  nation

  2024年9月10日

  1.5K000
• 低无一体

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

  介绍 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.4K000
• 前端

  OioProvider详解

  OioProvider OioProvider是平台的初始化入口。 示例入口 main.ts import { VueOioProvider } from '@kunlun/dependencies'; VueOioProvider(); 网络请求/响应配置 http 平台统一使用apollo作为统一的http请求发起服务，并使用GraphQL协议作为前后端协议。 参考文档： apollo-client graphql 配置方式 VueOioProvider({ http?: OioHttpConfig }); OioHttpConfig /** * OioHttp配置 */ export interface OioHttpConfig { /** * base url */ url: string; /** * 拦截器配置 */ interceptor?: Partial<InterceptorOptions>; /** * 中间件配置（优先于拦截器） */ middleware?: NetworkMiddlewareHandler | NetworkMiddlewareHandler[]; } 内置拦截器可选项 InterceptorOptions /** * 拦截器可选项 */ export interface InterceptorOptions { /** * 网络错误拦截器 */ networkError: NetworkInterceptor; /** * 请求成功拦截器 (success) */ requestSuccess: NetworkInterceptor; /** * 重定向拦截器 (success) */ actionRedirect: NetworkInterceptor; /** * 登录重定向拦截器 (error) */ loginRedirect: NetworkInterceptor; /** * 请求错误拦截器 (error) */ requestError: NetworkInterceptor; /** * MessageHub拦截器 (success/error) */ messageHub: NetworkInterceptor; /** * 前置拦截器 */ beforeInterceptors: NetworkInterceptor | NetworkInterceptor[]; /** * 后置拦截器 */ afterInterceptors: NetworkInterceptor | NetworkInterceptor[]; } 内置拦截器执行顺序: beforeInterceptors：前置拦截器 networkError：网络错误 actionRedirect：重定向 requestSuccess 请求成功 loginRedirect：登录重定向 requestError：请求错误 messageHub：MessageHub afterInterceptors：后置拦截器 NetworkInterceptor /** * <h3>网络请求拦截器</h3> * <ul> * <li>拦截器将按照注册顺序依次执行</li> * <li>当任何一个拦截器返回false时，将中断拦截器执行</li> * <li>内置拦截器总是优先于自定义拦截器执行</li> * </ul> * */ export interface NetworkInterceptor { /** * 成功拦截 * @param response 响应结果 */ success?(response: IResponseResult): ReturnPromise<boolean>; /** * 错误拦截 * @param response 响应结果 */ error?(response: IResponseErrorResult): ReturnPromise<boolean>; } 自定义路由配置 router 配置方式 VueOioProvider({ router?: RouterPath[]…

  汤乾华

  2023年11月6日

  1.5K000