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

oinone • 2023年11月1日 pm6:40 • 前端 • 阅读 1372

默认母版（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低代码应用平台体验

前端项目开发知识要点

oinone

1 0

4.2.x版本更新说明-20230607

上一篇 2023年6月20日 pm4:07

4.6.x版本升级说明-20231207

下一篇 2023年11月2日 pm1:58

前端

表格主题配置（v4）

TableThemeConfig /** * 表格主题配置 */ export interface TableThemeConfig { border: boolean | string; stripe: boolean; isCurrent: boolean; isHover: boolean; /** * 表格列主题配置 */ column: Partial<TableColumnThemeConfig>; } /** * 表格列主题配置 */ export interface TableColumnThemeConfig { /** * <h3>最小宽度</h3> * <ul> * <li>boolean: enabled column width auto compute</li> * <li>number: using css width (default: px)</li> * <li>string: using css width</li> * <li> * object: auto compute width for label by default function * <ul> * <li>min: min min width (default: 120)</li> * <li>max: max min width (default: 432)</li> * <li>chineseWidth: chinese width (default: 14 -> fontSize: 14px)</li> * <li>otherWidth: non chinese width (default: 9 -> fontSize: 14px)</li> * <li>sortableFixWidth: sortable handle width (default: 40)</li> * <li>nonSortableFixWidth: non sortable fix width (default: 22)</li> * </ul> * </li> * <li>function: auto compute width for label by function</li> * </ul> */ minWidth: boolean | number | string | Partial<TableColumnMinWidthComputeConfig> | TableColumnMinWidthComputeFunction; /** * 操作列 */ operation: { /** * 宽度 (default: 165) */ width?: number | string; /** * 最小宽度 (default: 120) */ minWidth?: number | string; }; } export interface TableColumnMinWidthComputeConfig { min: number;…

汤乾华
2023年11月6日
1.2K000
API&SDK 文档

前端密码加密

在项目开发中，我们可能会遇到自定义登录页，密码需要加密，或者是数据提交的时候，某个数据需要加密，在平台的前端中，提供了默认的全局加密 API 在 oinone 前端工程使用 // pc端工程使用 import { encrypt } from '@kunlun/dependencies'; // 移动端端工程使用 import { encrypt } from '@kunlun/mobile-dependencies'; // 加密后的密码 const password = encrypt('123456'); 其他工程使用如果是其他工程，前端没有用到 oinone 这一套，比如小程序，或者是其他工程，可以使用下面的代码记得安装 crypto-js import CryptoJS from 'crypto-js'; const key = CryptoJS.enc.Utf8.parse('1234567890abcdefghijklmnopqrstuv'); const iv = CryptoJS.enc.Utf8.parse('1234567890aabbcc'); export const encrypt = (content: string): string => { if (typeof content === 'string' && content) { const encryptedContent = CryptoJS.AES.encrypt(content, key, { iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }); return encryptedContent.ciphertext.toString(); } return ''; };

汤乾华
2025年3月24日
713000
前端

列表视图、卡片视图切换

在日常项目开发中，我们可能会遇到当前视图是个表格，通过某个操作按钮将它变成卡片的形式. 这篇文章将带大家实现这种功能。通过上面两张图片可以看到出来不管是表格还是卡片，它都在当前的视图里面，所以我们需要一个视图容器来包裹表格跟卡片，并且表格可以使用平台默认的表格渲染，我们只需要自定义卡片即可。我们用资源模块下面的国家菜单来实现这么一个功能这是对应的URL： http://localhost:8080/page;module=resource;viewType=TABLE;model=resource.ResourceCountry;action=resource%23%E5%9B%BD%E5%AE%B6;scene=resource%23%E5%9B%BD%E5%AE%B6;target=OPEN_WINDOW;menu=%7B%22selectedKeys%22:%5B%22%E5%9B%BD%E5%AE%B6%22%5D,%22openKeys%22:%5B%22%E5%9C%B0%E5%9D%80%E5%BA%93%22,%22%E5%9C%B0%E5%8C%BA%22%5D%7D 源码下载 views 创建外层的视图容器刚刚我们讲过，不管是表格还是卡片，它都在当前的视图里面，所以我们需要写一个视图容器来包裹它们，并且对应的容器里面允许拆入表格跟卡片，我们先创建TableWithCardViewWidget.ts // TableWithCardViewWidget.ts import { BaseElementWidget, SPI, Widget } from '@kunlun/dependencies'; import TableWithCardView from './TableWithCardView.vue'; enum ListViewType { TABLE = 'table', CARD = 'card' } @SPI.ClassFactory( BaseElementWidget.Token({ widget: 'TableWithCardViewWidget' }) ) export class TableWithCardViewWidget extends BaseElementWidget { @Widget.Reactive() private listViewType: ListViewType = ListViewType.TABLE; // 当前视图展示的类型，是展示卡片还是表格 public initialize(props) { if (!props.slotNames) { props.slotNames = ['tableWidget', 'cardWidget']; } super.initialize(props); this.setComponent(TableWithCardView); return this; } } 在TableWithCardViewWidget中的initialize函数中，我们定义了两个插槽: tableWidget、cardWidget，所以需要在对应的vue文件里面里接收这两个插槽 <template> <div class="list-view-wrapper"> <!– 表格插槽 –> <div style="height: 100%" v-if="listViewType === 'table'"> <slot name="tableWidget" /> </div> <!– 卡片插槽 –> <div v-if="listViewType === 'card'"> <slot name="cardWidget"></slot> </div> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ props: ['listViewType', 'onChangeViewType'], inheritAttrs: false, setup(props, context) { const onChangeViewType = (listViewType) => { props.onChangeViewType(listViewType); }; } }); </script> 这样一来，我们就定义好了视图容器，接下来就是通过自定义layout的方式注册该容器 layout注册 import { registerLayout, ViewType } from '@kunlun/dependencies'; registerLayout( `<view type="TABLE"> <pack widget="group"> <view type="SEARCH"> <element widget="search" cols="4" slot="search"/> </view> </pack> <pack widget="group" slot="tableGroup" style="position: relative"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="TableWithCardViewWidget"> <template slot="tableWidget"> <element widget="table" slot="table" datasource-provider="true"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" />…

汤乾华
2024年10月16日
2.2K010
前端

打开弹窗的action，传入默认的查询条件不生效

场景 form视图中的action，点击后打开table的弹窗的，xml中配置的filter，但是table查询的时候没有带上查询条件： <action name=”action_name” label=”打开tabel弹窗视图” filter=”id==${activeRecord.id}” /> 解决方案将xml中的activeRecord修改成openerRecord即可。 <action name=”action_name” label=”打开tabel弹窗视图” filter=”id==${openerRecord.id}” />

oinone
2023年11月1日
1.5K000
代码实践

【前端】项目开发前端知识要点地图

概述下面整理了目前现有的所有文章，并提供了基本的学习路径。所有使用*标记的文章属于推荐必读文章。目录基础篇【路由】浏览器地址栏url参数介绍母版-布局-DSL 渲染基础（v4）* 组件SPI机制（v4）* 组件数据交互基础（v4）* 组件生命周期（v4）入门篇自定义视图组件（v4）* 如何通过浏览器开发者工具提高调试效率* 如何提高自定义组件的开发效率* 自定义组件之自动渲染（组件插槽的使用）（v4）* GraphQL请求详解（v4）* 上下文在字段和动作中的应用如何实现页面间的跳转如何自定义指定页面的样式进阶篇自定义组件之手动渲染基础（v4）自定义组件之手动渲染弹出层（v4）自定义组件之手动渲染任意视图（v4）【前端】IOC容器（v4）最佳实践篇【前端】工程结构最佳实践（v4）* 【前端】移动端工程结构最佳实践（v4）* 界面设计器实战篇基础篇【界面设计器】模型增删改查基础【界面设计器】他表字段【界面设计器】左树右表【界面设计器】树形表格【界面设计器】树下拉/级联选择【界面设计器】自定义字段组件基础展示篇【界面设计器】自定义字段组件实战——轮播图【界面设计器】自定义字段组件实战——表格字段组合展示【界面设计器】自定义字段组件实战——表格字段内嵌表格交互篇【界面设计器】自定义字段组件实战——千分位输入框其他前端低无一体使用教程如何自定义表格字段？【界面设计器】组件开发常见问题【前端】低无一体部署常见问题【前端】生产环境性能调优 API文档 OioProvider详解（v4.3.0）* 前端环境配置（v4）* 默认布局模板（v4）表格主题配置（v4）运行时上下文API文档（v4） Class Component(ts)（v4）

数式-海波
2024年5月25日
4.4K000

登录后才能评论

shao 2024年11月25日

支持其他的国家的语言，需要在资源里面创建，如果有其他的疑问，也可以群内联系我们哈

评论于 6.4 国际化之多语言
xiao3 2024年11月25日

只支持英语吗？如何添加其他语种？

评论于 6.4 国际化之多语言
psyy 2024年8月21日

1.4 Oinone对软件特性的思考，技术原理一段，几余（几->冗） 1.4 Oinone对软件特性的思考，协同演进一段，新特生（生->性）

评论于 1.4 Oinone对软件特性的思考
望闲 2024年6月21日

感谢反馈，已修正

评论于 1.5 Oinone与行业对比
xinf 2024年6月14日

bug反馈：采用无一体设计 -> 采用低无一体设计

评论于 1.5 Oinone与行业对比

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

默认母版（Mask）

PC端默认母版

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

移动端默认母版

PC端默认布局（Layout）

表格视图（TABLE）

表单视图（FORM）

详情视图（DETAIL）

画廊视图（GALLERY）

树视图（TREE）

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

内嵌表格视图（TABLE）

内嵌表单视图（FORM）

内嵌详情视图（DETAIL）

内置其他布局

表格视图-树表

移动端默认布局（Layout）

表格视图（TABLE）

表单视图（FORM）

详情视图（DETAIL）

画廊视图（GALLERY）

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

内嵌表格视图（TABLE）

内嵌表单视图（FORM）

内嵌详情视图（DETAIL）

相关推荐

表格主题配置（v4）

前端密码加密

列表视图、卡片视图切换

打开弹窗的action，传入默认的查询条件不生效

【前端】项目开发前端知识要点地图

Leave a Reply

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

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

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