1. Oinone社区首页
  2. 前端

【前端】默认布局模板（v4）

oinone • • 前端 • 阅读 1260

默认母版（Mask）

PC端默认母版

<mask>
    <multi-tabs />
    <header>
        <widget widget="app-switcher" />
        <block>
            <widget widget="notification" />
            <widget widget="divider" />
            <widget widget="language" />
            <widget widget="divider" />
            <widget widget="user" />
        </block>
    </header>
    <container>
        <sidebar>
            <widget widget="nav-menu" height="100%" />
        </sidebar>
        <content>
            <breadcrumb />
            <block width="100%">
                <widget width="100%" widget="main-view" />
            </block>
        </content>
    </container>
</mask>

PC端默认内联Tabs母版（<multi-tabs inline="true" />）

<mask>
    <header>
        <widget widget="app-switcher" />
        <block>
            <widget widget="notification" />
            <widget widget="divider" />
            <widget widget="language" />
            <widget widget="divider" />
            <widget widget="user" />
        </block>
    </header>
    <container>
        <sidebar>
            <widget widget="nav-menu" height="100%" />
        </sidebar>
        <block height="100%" flex="1 0 0" flexDirection="column" alignContent="flex-start" flexWrap="nowrap" overflow="hidden">
            <multi-tabs inline="true" />
            <content>
                <breadcrumb />
                <block width="100%">
                    <widget width="100%" widget="main-view" />
                </block>
            </content>
        </block>
    </container>
</mask>

移动端默认母版

<mask>
    <widget widget="user" />
    <widget widget="nav-menu" app-switcher="true" menu="true" />
    <widget widget="main-view" height="100%" />
</mask>

PC端默认布局（Layout）

表格视图（TABLE）

<view type="TABLE">
    <pack widget="group">
        <view type="SEARCH">
            <element widget="search" slot="search" />
        </view>
    </pack>
    <pack widget="group" slot="tableGroup">
        <element widget="actionBar" slot="actionBar">
            <xslot name="actions" />
        </element>
        <element widget="table" slot="table">
            <element widget="expandColumn" slot="expandRow" />
            <xslot name="fields" />
            <element widget="rowActions" slot="rowActions" />
        </element>
    </pack>
</view>

表单视图（FORM）

<view type="FORM">
    <element widget="actionBar" slot="actionBar">
        <xslot name="actions" />
    </element>
    <element widget="form" slot="form">
        <xslot name="fields" />
    </element>
</view>

详情视图（DETAIL）

<view type="DETAIL">
    <element widget="actionBar" slot="actionBar">
        <xslot name="actions" />
    </element>
    <element widget="detail" slot="detail">
        <xslot name="fields" />
    </element>
</view>

画廊视图（GALLERY）

<view type="GALLERY">
    <view type="SEARCH">
        <element widget="search" slot="search" />
    </view>
    <element widget="actionBar" slot="actionBar">
        <xslot name="actions" />
    </element>
    <element widget="gallery" slot="gallery">
        <element widget="card" slot="card" />
    </element>
</view>

树视图（TREE）

<view type="TREE">
    <pack widget="group">
        <view type="SEARCH">
            <element widget="search" slot="search" />
        </view>
    </pack>
    <pack widget="group">
        <element widget="actionBar" slot="actionBar">
            <xslot name="actions" />
        </element>
        <element widget="card-cascader" slot="tree" />
    </pack>
</view>

默认内嵌布局（inline="true"）

内嵌表格视图（TABLE）

<view type="TABLE">
    <view type="SEARCH">
        <element widget="search" slot="search" />
    </view>
    <element widget="actionBar" slot="actionBar">
        <xslot name="actions" />
    </element>
    <element widget="table" slot="table">
        <element widget="expandColumn" slot="expandRow" />
        <xslot name="fields" />
        <element widget="rowActions" slot="rowActions" />
    </element>
</view>

内嵌表单视图（FORM）

<view type="FORM">
    <element widget="form" slot="form">
        <xslot name="fields" />
    </element>
</view>

内嵌详情视图（DETAIL）

<view type="DETAIL">
    <element widget="detail" slot="detail">
        <xslot name="fields" />
    </element>
</view>

内置其他布局

表格视图-树表

<view type="TABLE">
    <pack widget="group">
        <view type="SEARCH">
            <element widget="search" slot="search" slotSupport="field">
                <xslot name="searchFields" slotSupport="field" />
            </element>
        </view>
    </pack>
    <pack widget="group">
        <pack widget="row" wrap="false">
            <pack widget="col" width="257">
                <pack widget="group">
                    <pack widget="col">
                        <element widget="tree" slot="tree" />
                    </pack>
                </pack>
            </pack>
            <pack widget="col" mode="full">
                <pack widget="row">
                    <element widget="actionBar" slot="actionBar" slotSupport="action">
                        <xslot name="actions" slotSupport="action" />
                    </element>
                    <element widget="table" slot="table">
                        <element widget="expandColumn" slot="expandRow" />
                        <xslot name="fields" />
                        <element widget="rowActions" slot="rowActions" />
                    </element>
                </pack>
            </pack>
        </pack>
    </pack>
</view>

移动端默认布局（Layout）

表格视图（TABLE）

<view type="TABLE">
    <view type="SEARCH">
        <element widget="search" slot="search" slotSupport="field">
            <xslot name="searchFields" slotSupport="field" />
        </element>
    </view>
    <pack widget="group" class="oio-m-default-view-element" style="height: 100%;flex: 1;overflow-y: hidden;" wrapperStyle="height: 100%;box-sizing:border-box;">
        <pack widget="row" style="height: 100%;">
            <pack widget="col" mode="full" style="min-height: 234px;height: 100%;">
                <element widget="table" slot="table" slotSupport="field" checkbox="false">
                    <xslot name="fields" slotSupport="field" />
                    <element widget="rowActions" slot="rowActions" />
                </element>
            </pack>
        </pack>
    </pack>
    <element widget="actionBar" slot="actionBar" slotSupport="action">
        <xslot name="actions" slotSupport="action" />
    </element>
</view>

表单视图（FORM）

<view type="FORM">
    <element widget="form" slot="form">
        <xslot name="fields" slotSupport="pack,field" />
    </element>
    <element widget="actionBar" slot="actionBar" slotSupport="action">
        <xslot name="actions" slotSupport="action" />
    </element>
</view>

详情视图（DETAIL）

<view type="DETAIL">
    <element widget="detail" slot="detail">
        <xslot name="fields" slotSupport="pack,field" />
    </element>
    <element widget="actionBar" slot="actionBar" slotSupport="action">
        <xslot name="actions" slotSupport="action" />
    </element>
</view>

画廊视图（GALLERY）

<view type="GALLERY">
    <view type="SEARCH">
        <element widget="search" slot="search" slotSupport="field">
            <xslot name="searchFields" slotSupport="field" />
        </element>
    </view>
    <element widget="gallery" slot="gallery">
        <pack widget="card" slot="card" slotSupport="pack,field" />
    </element>
    <element widget="actionBar" slot="actionBar" slotSupport="action">
        <xslot name="actions" slotSupport="action" />
    </element>
</view>

移动端默认内嵌布局（inline=true）

内嵌表格视图（TABLE）

<view type="TABLE">
    <view type="SEARCH">
        <element widget="search" slot="search" slotSupport="field" />
    </view>
    <element widget="actionBar" slot="actionBar" slotSupport="action">
        <xslot name="actions" slotSupport="action" />
    </element>
    <pack widget="group" style="height: 100%;flex: 1;overflow-y: hidden;"
        wrapperStyle="height: 100%;box-sizing:border-box;">
        <pack widget="row" style="height: 100%;">
            <pack widget="col" mode="full" style="min-height: 234px;height: 100%;">
                <element widget="table" slot="table">
                    <xslot name="fields" slotSupport="field" />
                    <element widget="rowActions" slot="rowActions" />
                </element>
            </pack>
        </pack>
    </pack>
</view>

内嵌表单视图（FORM）

<view type="FORM">
    <element widget="form" slot="form">
        <xslot name="fields" slotSupport="pack,field" />
    </element>
</view>

内嵌详情视图（DETAIL）

<view type="DETAIL">
    <element widget="detail" slot="detail">
        <xslot name="fields" slotSupport="pack,field" />
    </element>
</view>

Oinone社区 作者：oinone原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/36.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

赞 (0)
oinone的头像oinone
1 0
上一篇 2023年6月20日 pm4:07
下一篇 2023年11月2日 pm1:58

相关推荐

  • 提交数据动作如何把弹窗内的数据完全返回 低无一体

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

    场景介绍 表格行的操作列有一个打开弹窗的动作 弹窗内为表格行数据的表单，表单内有一个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的头像 nation
    2024年6月28日
    1.4K00
  • 移动端5.0.x启动、打包代码报错 低无一体

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

    在5.0.x版本中，移动端mobile-base包是源码开放的，所以项目在启动的时候可能会报错，请按照下面的步骤修改。 打开boot工程中的package.json "dependencies"中添加 "lodash-es": "4.17.21" "devDependencies"中添加 "@types/lodash-es": "4.17.12" 在main.ts中删除 import '@kunlun/vue-mobile-base/dist/kunlun-vue-mobile-base.css'

    汤乾华的头像 汤乾华
    2024年7月17日
    1.5K00
  • Class Component(ts)（v4） 前端

    Class Component(ts)（v4）

    Class Component 一种使用typescript的class声明组件的方式。 IWidget类型声明 IWidget是平台内所有组件的统一接口定义，也是一个组件定义的最小集。 /** * 组件构造器 */ export type WidgetConstructor<Props extends WidgetProps, Widget extends IWidget<Props>> = Constructor<Widget>; /** * 组件属性 */ export interface WidgetProps { [key: string]: unknown; } /** * 组件 */ export interface IWidget<Props extends WidgetProps = WidgetProps> extends DisposableSupported { /** * 获取当前组件响应式对象 * @return this */ getOperator(); /** * 组件初始化 * @param props 属性 */ initialize(props: Props); /** * 创建子组件 * @param constructor 子组件构造器 * @param slotName 插槽名称 * @param props 属性 * @param specifiedIndex 插入/替换指定索引的子组件 */ createWidget<ChildProps extends WidgetProps = WidgetProps>( constructor: WidgetConstructor<ChildProps, IWidget<ChildProps>>, slotName?: string, props?: ChildProps, specifiedIndex?: number ); } Widget Widget是平台实现的类似于Class Component组件抽象基类，定义了包括渲染、生命周期、provider/inject、watch等相关功能。 export abstract class Widget<Props extends WidgetProps = WidgetProps, R = unknown> implements IWidget<Props> { /** * 添加事件监听 * * @param {string} path 监听的路径 * @param {deep?:boolean;immediate?:boolean} options? * * @example * * @Widget.Watch('formData.name', {deep: true, immediate: true}) * private watchName(name: string) { * … todo * } * */ protected static Watch(path: string, options?: { deep?: boolean; immediate?: boolean }); /** * 可以用来处理不同widget之间的通讯，当被订阅的时候，会将默认值发送出去 * * @param {Symbol} name 唯一标示 * @param {unknown} value? 默认值 * * @example *…

    oinone的头像 oinone
    2023年11月1日
    1.2K00
  • oio-button 按钮 组件

    oio-button 按钮

    主按钮：用于主行动点，一个操作区域只能有一个主按钮。 默认按钮：用于没有主次之分的一组行动点。 虚线按钮：常用于添加操作。 文本按钮：用于最次级的行动点。 链接按钮：一般用于链接，即导航至某位置。 以及四种状态属性与上面配合使用。 危险：删除/移动/修改权限等危险操作，一般需要二次确认。 禁用：行动点不可用的时候，一般需要文案解释。 加载中：用于异步操作等待反馈的时候，也可以避免多次提交。 API 按钮的属性说明如下： 属性 说明 类型 默认值 版本 block 将按钮宽度调整为其父宽度的选项 boolean false disabled 按钮失效状态 boolean false icon 设置按钮的图标类型 v-slot – loading 设置按钮载入状态 boolean | { delay: number } false type 设置按钮类型 primary | ghost | dashed | link | text | default default 事件 事件名称 说明 回调参数 版本 click 点击按钮时的回调 (event) => void 支持原生 button 的其他所有属性。

    汤乾华的头像 汤乾华
    2023年12月18日
    63900

  • 自定义前端拦截器

    某种情况下，我们需要通过自定义请求拦截器来做自己的逻辑处理，平台内置了一些拦截器 登录拦截器LoginRedirectInterceptor 重定向到登录拦截器LoginRedirectInterceptor import { UrlHelper, IResponseErrorResult, LoginRedirectInterceptor } from '@kunlun/dependencies'; export class BizLoginRedirectInterceptor extends LoginRedirectInterceptor { /** * 重定向到登录页 * @param response 错误响应结果 * @return 是否重定向成功 */ public redirectToLogin(response: IResponseErrorResult): boolean { if (window.parent === window) { const redirect_url = location.pathname; // 可自定义跳转路径 location.href = `${UrlHelper.appendBasePath('login')}?redirect_url=${redirect_url}`; } else { // iframe页面的跳转 window.open(`${window.parent.location.origin}/#/login`, '_top'); } return true; } } 请求成功拦截器RequestSuccessInterceptor 请求失败拦截器 RequestErrorInterceptor 网络请求异常拦截器 NetworkErrorInterceptor 当我们需要重写某个拦截器的时候，只需要继承对应的拦截器，然后重写里面的方法即可 // 自定义登录拦截器 export class CustomLoginRedirectInterceptor extends LoginRedirectInterceptor{ public error(response: IResponseErrorResult) { // 自己的逻辑处理 return true // 必写 } } // 自定义请求成功拦截器 export class CustomRequestSuccessInterceptor extends RequestSuccessInterceptor{ public success(response: IResponseErrorResult) { // 自己的逻辑处理 return true // 必写 } } // 自定义请求失败拦截器 export class CustomRequestErrorInterceptor extends RequestErrorInterceptor{ public error(response: IResponseErrorResult) { const { errors } = response; if (errors && errors.length) { const notPermissionCodes = [ SystemErrorCode.NO_PERMISSION_ON_MODULE, SystemErrorCode.NO_PERMISSION_ON_VIEW, SystemErrorCode.NO_PERMISSION_ON_MODULE_ENTRY, SystemErrorCode.NO_PERMISSION_ON_HOMEPAGE ]; /** * 用来处理重复的错误提示 */ const executedMessages: string[] = []; for (const errorItem of errors) { const errorCode = errorItem.extensions?.errorCode; if (!notPermissionCodes.includes(errorCode as any)) { const errorMessage = errorItem.extensions?.messages?.[0]?.message || errorItem.message; if (!executedMessages.includes(errorMessage)) { // 自己的逻辑处理 } executedMessages.push(errorMessage); } } } return true; } } // 自定义网络请求异常拦截器…

    oinone的头像 oinone
    前端 2023年11月1日
    1.0K01

Leave a Reply

登录后才能评论