4.2 前端高级特性

相关推荐

• Oinone 7天入门到精通

  自定义组件

  1. 定义组件介绍 平台提供了大多数的通用组件，面对企业个性话需求、复杂的业务场景，我们也提供了自定义组件的能力，帮助企业更快实施业务需求。 自定义组件包含“组件画廊”“组件排序”“元件画廊”“元件属性设计”四个页面。 1.1 组件与元件 在介绍如何自定义组件前，需要先了解以下概念： 组件：页面设计的组件库中看到的是组件。每个组件都有自己的属性面板，通过属性、字段决定组件逻辑，而自定义组件就是需要构建出组件自身的属性信息，再结合业务配置组件的属性、使用组件。 一个组件在不同的业务类型、视图类型、单值/多值，其属性面板是不同的，不同业务类型、视图类型、单值/多值的组合我们成为元件，多种组合即为多个元件，所以一个组件包括多个元件。 元件：一个组件可以对应多个元件。在创建时明确元件所适用的字段业务类型、单/多值、视图类型，在画布中切换元件时，会结合当前组件的字段业务类型、单/多值、所在视图类型确定可以使用哪一个元件。 此处切换的也是元件。 示例：创建一个“下拉选”的组件，其中可以包含“下拉单选”“下拉多选”两个元件。“下拉选”组件从组件库中拖入时，设置单值时使用“下拉单选”元件，设置多值时使用“下拉多选”元件。 2. 组件管理 2.1 组件创建 在组件画廊页面，点击添加组件，在弹窗中完善信息创建组件。 2.2 组件操作 自定义组件支持“搜索、删除、作废、查看引用关系、管理元件、编辑、低无一体、排序”的操作。 搜索：默认搜索可见组件，可切换“全部、可用、废弃”搜索组件，也可使用组件名称搜索。 删除：若组件未被引用，则可以直接删除。 作废：组件作废后，不可在画布中展示，不可在组件切换时使用，但已使用的数据不影响。 查看引用关系：可以查看存在引用关系的页面，支持点击跳转到对应页面的设计页面。仅当组件无引用关系时才支持删除。 管理元件：点击进入元件的管理页面。 编辑：可修改组件名称、组件图表、组件描述。 低无一体：比较复杂，在第5章中单独讲解。 排序：进入排序页，可拖动排序自定义组件。自定义组件会插在系统组件之后。可以点击“查看排序结果”选项页查看最终排序结果。排序同样会更新画布中的组件库顺序。 3. 元件管理 3.1 元件创建 在元件画廊页面，点击添加元件，在弹窗中完善信息创建一个元件。 3.2 元件操作 元件支持“删除、作废、查看引用关系、编辑、设计元件属性”的操作。 删除：若元件未被引用，则可以直接删除。 作废：元件作废后，不影响原来已使用的元件，无法新添加、使用该元件。 查看引用关系：可以查看存在引用关系的页面，支持点击跳转到对应页面的设计页面。仅当元件无引用关系时才支持删除。此处的引用关系数量会小于等于组件引用关系的数量。 编辑：可修改元件名称、支持视图类型、元件描述。 设计元件属性：比较复杂，将在第4章中单独讲解。 4. 设计元件属性 元件属性设计页面主要操作集中在这三部分，分别是①视图切换②属性面板设计区③复制功能 视图切换：元件创建时选择的支持视图类型，在①区域平铺可切换对应视图的属性面板进行设计。 属性面板设计区：可将组件拖入属性面板设计区进行设计，设计的是自定义组件的属性面板，左侧组件库和页面设计的组件库相同，仍然支持创建字段或使用模型字段，右侧进行元数据面板、属性面板设置。 复制功能：可将已设置好的属性面板复制到其他视图，提高设计效率。 5. 低无一体 低无一体简单讲就是组件代码上传，通过载入代码使组件在设计页面和实现页面可见和交互。 系统内置的属性不满足需求时，要用低无一体写代码，定制属性，比如从模型中拖拽设计就是内置的属性，从组件库中设置，就要配合低无一体，否则无效。 首次进入组件设计或组件中的元件变更时需要生成SDK。 生成结束后展示SDK生成时间，并且“下载模版工程”按钮可用。 点击下载模版工程，会自动下载模板工程。 在模版工程中编写前端代码。 根据实际需求上传JS、CSS文件后提交即可。

  史, 昂

  2024年6月20日

  1.4K000
• Oinone 7天入门到精通

  1.1 Oinone的萌芽

  在信息化时代，中国并没有涌现出一家世界知名的软件公司。这是因为像SAP、Oracle、IBM、Salesforce、NetSuite、Odoo等西方巨头所拥有的最佳实践在业务、技术和模式方面，给予了它们在企业信息化建设中高额利润的优势。中国软件业在这个时代的角色是学习和追随者，而最优秀的追随者是金蝶和用友，它们能在国家推行会计电算化的机遇中占据领先地位。但是，追随者始终只是追随者，没有真正的突破。 我自己进入软件行业的经历可以追溯到2015年。当时资本市场非常热门，大家都在创业。我认为这是一个时代的机会，就像国家改革开放一样。于是，我和很多同事一起开始了创业之旅。在数式之前，我加入并创办了三家公司：500mi、数列和端点。整个过程给了我宝贵的经验和启示，帮助我找到了最终想要的方向。 在500mi公司时，我从技术岗位转型为业务经营，起步并不顺利。然而，我从这份经历中获得了一堂重要的课：做自己擅长的事情，有助于渡过创业启动期最艰难的阶段。同时，市场调研为我提供了一个信号：传统企业对于IT的需求正逐渐向互联网靠拢。这个信号像注入了一剂强心剂，激励我继续前行。 2016年，我和三个曾在阿里工作的同事一起创办了一家新公司——数列，我们决定专注于我们最擅长的领域，即软件服务商。在没有任何商务资源的情况下，我们第一年就完成了1000多万的合同，这相较之前是一个非常成功的开端。然而，对于公司未来的发展方向，我们花费了长达大半年的时间进行思考：应该坚持做底层的PaaS还是专注于企业可见的上层应用和业务产品？我倾向于后者。尽管我们持续存在分歧，但凭借着多年的革命友情，最终我们友好地分道扬镳。数列此前的成功让我更加坚信：在数字化时代，软件需求将会有井喷式的增长，数字化软件服务将是未来5-10年的重要方向。而在这个领域，专业的技能将是应对未来不确定性的真正力量。 提到数字化，就不得不提阿里巴巴提出的中台理念。中台理念在15年前被阿里巴巴提出，当时引起了广泛的关注和讨论。企业之所以认同中台理念，是因为他们的核心需求已经从内部转向外部：从关注管理、流程、效率的提升，转向关注外部协同、运营、创新。他们已经不再只担心企业的效率和成本，而是担心自己是否有能力跟上时代的快速变化。现今做生意的渠道已经不再是单一的线下渠道，而是包括淘宝、天猫、京东、拼多多、抖音、快手等多个线上渠道，以及海外市场，这种变化速度非常快。而中台的核心理念是敏捷响应、低成本快速创新，正好解决了企业主的核心焦虑。 企业的视角正在从内部管理向业务在线和生态在线（协同）转变，这种转变带来了一系列新的需求（如下图1-1所示）。这种转变不仅是为了支持现有业务的发展，也为企业未来的业务发展和创新提供了支持，并将变化实时反映到上下游合作伙伴中。 图1-1 企业视角转变带来一系列新的诉求 在2017年下半年，阿里云收购了端点科技，打算重启阿里软件。那个时候，市场上涌现出一批中台厂商，整个行业也比较混乱，很多人对互联网架构本身的理解不够深入，快速学习拿到阿里云认证后就开始做定制化的中台架构开发，但最终的效果无法达到预期。因此，阿里云和端点科技的联姻是为了弥补阿里云没有向外输出上层应用产品能力的缺陷。多年来，软件市场一直被国外厂商掌控，中国一直缺乏一个强大的本土软件公司。阿里收购端点，承载着无数中国人的软件梦想。在这种背景下，我回到了阿里体系，加入了端点科技。后来，我参与了许多中台项目，深刻地认识到搭建中台技术架构和一些基础能力，为上层应用场景落地并不难。但是，当客户接手扩展中台能力和新的上层应用场景时，效果往往不尽如人意，这并不是中台架构理念的问题，而是因为传统企业客户的IT能力大多较弱，这是一个硬伤。许多文章都在讲述中台战略，长篇大论地描述组织中台、技术中台、业务中台、数据中台，我们不去评论这些方法论的对错，从技术角度回到初衷，我们只关注一个问题：技术是为商业服务的，中台如何快速满足企业业务多变的需求？ 我们经历了多个行业的中台建设，每次都向客户强调第一阶段是打好基础，因此需要较长的周期，并且每个项目都需要顶级架构师来把控整体项目。如何找到互联网架构与传统软件良好结合点，降低对组织的要求，实现中台架构的标准化输出？这是我回归阿里后致力于解决的问题。然而，随着阿里云对端点战略发展思路的变化，阿里不再提供SaaS服务，而只愿意做平台被其他企业集成。因此，我离开了端点，并决定把自己的技术思考转化为现实，于是数式科技诞生了。 在数字化时代，无论是业务、技术还是商业模式的最佳实践，都源自中国。中国已经从追随者转变为互联网领域的全面引领者。我们有理由相信，中国一定会崛起一家世界级的软件公司，而Oinone将始终以此为愿景。

  史, 昂

  2024年5月23日

  1.5K000
• Oinone 7天入门到精通

  4.2.7 框架之翻译工具

  一、说明 Oinone目前的默认文案是中文，如果需要使用其他语言，Oinone也提供一系列的翻译能力。 二、定义语言文件 在src/local下新增一个名为zh_cn.ts文件: 图4-2-7-1 语言文件 编辑zh_cn.ts文件，增加以下内容： const zhCN = { demo: { test: '这是测试' } } export default zhCN 图4-2-7-2 语言内容格式示意 在mian.ts注册语言资源： import { LanguageType, registryLanguage} from '@kunlun/dependencies'; import Zh_cn from './local/zh_cn' registryLanguage(LanguageType['zh-CN'], Zh_cn); 图4-2-7-3 注册语言 三、Vue模板使用 <template> <div class="petFormWrapper"> <form :model="formState" @finish="onFinish"> <a-form-item :label="translate('demo.test')" id="name" name="kind" :rules="[{ required: true, message: '请输入品种种类!', trigger: 'focus' }]"> <a-input v-model:value="formState.kind" @input="(e) => onNameChange(e, 'kind')" /> <span style="color: red">{{ getServiceError('kind') }}</span> </a-form-item> <a-form-item label="品种名" id="name" name="name" :rules="[{ required: true, message: '请输入品种名!', trigger: 'focus' }]"> <a-input v-model:value="formState.name" @input="(e) => onNameChange(e, 'name')" /> <span style="color: red">{{ getServiceError('name') }}</span> </a-form-item> </form> </div> </template> <script lang="ts"> import { defineComponent, reactive } from 'vue'; import { Form } from 'ant-design-vue'; export default defineComponent({ // 引入translate props: ['onChange', 'reloadData', 'serviceErrors', 'translate'], components: { Form }, setup(props) { const formState = reactive({ kind: '', name: '', }); const onFinish = () => { console.log(formState); }; const onNameChange = (event, name) => { props.onChange(name, event.target.value); }; const reloadData = async () => { await props.reloadData(); }; const getServiceError = (name: string) => { const error = props.serviceErrors.find(error => error.name === name);…

  史, 昂

  2024年5月23日

  1.1K000
• Oinone 7天入门到精通

  应用审计

  1. 整体介绍 应用审计是基于模型字段记录用户操作留痕记录，通过定义审计规则，平台基于审计规则订阅的字段记录形成日志。平台名词概念： 应用日志：针对已订阅的审计规则记录用户操作信息，是用户在各应用中操作行为留痕记录。 审计规则：业务审计中，数据变化订阅记录的规则。 操作入口：应用中心——业务审计应用。 2. 审计规则 审计规则是指定义审计过程订阅数据变化的信息，根据模型、订阅到具体字段内容变化形成应用日志。如订阅销售订单的备注，销售订单S20231001888，订单备注【尽快发货】，备注修改为【需易碎品包装】，审计规则为：销售订单模型，订阅【备注】。 操作包括：新增、编辑、删除。 2.1. 新增 新增时，定义审计规则名称，选择需要审计的模型，指定需要订阅的字段信息，同时可以指定关联关系的字段。 需要注意：每个模型仅限定义单条审计规则。 2.2. 编辑 编辑同新增操作，不做赘述。 2.3. 删除 删除规则后，平台将不再监听对应数据的变更日志，请慎重删除。 3. 应用日志 应用日志是针对已订阅的审计规则记录用户操作信息。记录操作用户、IP、登录设备、位置、订阅的字段变化内容。 应用日志详情 4. 业务表达 4.1. 展示效果 表格-行操作—日志记录 详情—日志记录 4.2. 操作步骤 Step1：在应用中心，需要维护业务应用依赖业务审计应用； 操作入口：应用中心，找到业务应用——编辑，依赖模块选择业务审计。 Step2：配置审计规则； 操作入口：业务审计应用——审计规则——新增规则。 Step2：界面设计器配置日志记录； 操作入口：界面设计器，找到需要配置的页面——模型组件，将动作区的日志记录拖动到页面中。

  史, 昂

  2024年1月20日

  1.2K000
• Oinone 7天入门到精通

  4.1.19 框架之网关协议-后端占位符

  在我们日常开发中会有碰到一些特殊场景，需要由前端来传一些如“当前用户Id”、“当前用户code”诸如此类只有后端才知道值的参数，那么后端占位符就是来解决类似问题的。如前端传${currentUserId}，后端会自动替换为当前用户Id。 Step1 后端定义占位符 我们新建一个UserPlaceHolder继承AbstractPlaceHolderParser，用namespace来定义一个“currentUserId”的占位符，其对应值由value()决定为“PamirsSession.getUserId().toString()”，active要为真才有效，priority为优先级 package pro.shushi.pamirs.demo.core.placeholder; import org.springframework.stereotype.Component; import pro.shushi.pamirs.meta.api.session.PamirsSession; import pro.shushi.pamirs.user.api.AbstractPlaceHolderParser; @Component public class UserPlaceHolder extends AbstractPlaceHolderParser { @Override protected String value() { return PamirsSession.getUserId().toString(); } @Override public Integer priority() { return 10; } @Override public Boolean active() { return Boolean.TRUE; } @Override public String namespace() { return "currentUserId"; } } 图4-1-19-1 后端定义占位符 Step2 前端使用后端占位符 我们经常在o2m和m2m中会设置domain来过滤数据，这里案例就是在field中设置来过滤条件，domain="createUid == $#{currentUserId}"，注意这里用的是$#{currentUserId} 而不是${currentUserId}，这是前端为了区分真正变量和后端占位符，提交的时候会把#过滤掉提交。修改宠物达人表格视图的Template中search部分 <template slot="search" cols="4"> <field data="name" label="达人"/> <field data="petTalentSex" multi="true" label="达人性别"/> <field data="creater" /> <!– <field data="petShops" label="宠物商店" domain="createUid == ${activeRecord.creater.id}"/>–> <field data="petShops" label="宠物商店" domain="createUid == $#{currentUserId}"/> <field data="dataStatus" label="数据状态" multi="true"> <options> <option name="DRAFT" displayName="草稿" value="DRAFT" state="ACTIVE"/> <option name="NOT_ENABLED" displayName="未启用" value="NOT_ENABLED" state="ACTIVE"/> <option name="ENABLED" displayName="已启用" value="ENABLED" state="ACTIVE"/> <option name="DISABLED" displayName="已禁用" value="DISABLED" state="ACTIVE"/> </options> </field> <field data="createDate" label="创建时间"/> <field data="unStore" /> </template> 图4-1-19-2 前端使用后端占位符 Step3 重启看效果 请求上都带上了createUid==${currentUserId} 图4-1-19-3 示例效果

  史, 昂

  2024年5月23日

  1.4K000