lecen:一个更好的开源可视化系统搭建项目--全局对象使用--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人

利用可视化设计器构建你的应用系统-做一个懂你的人

全局对象

不同于 BRP,全局 G 对象是整个系统内部共享的,所有页面都可以访问它

这里面存放了一些全局对象、公共属性和工具方法等,都是可以在任何地方能够直接获取和使用的

对象 说明
Company 可以获取当前公司配置的所有信息
Loading element-plus中loading服务的引用
Menu 系统菜单,包含菜单的相关属性以及操作
Message element-plus中message服务的引用
Page 页面对象,包含页面的相关属性以及操作
Route 当前路由
Router 路由管理器
Tool 包含了预置的各种工具函数。
TurnToPage 跳转页面的方法,用来跳转到新路由
User 用户对象,包含用户信息和权限等

Company

基础包含 authservice 两个对象,分别存放着认证标识和后端服务地址

当进入系统时,会将获取到的所有系统配置信息放入到 Company 对象中

系统配置信息可参照 基本信息配置

Loading

js 复制代码
//显示弹窗
const loading = this.G.Loading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(0, 0, 0, 0.7)',
})
//关闭弹窗
loading.close()

详情参照 Loading 加载

属性 说明
current 当前菜单
opened 已打开的菜单
menus 所有菜单
方法 说明 参数
addOpened 添加打开的菜单 路由对象
removeOpened 移除打开的菜单 路由路径
removeOpenedExcept 移除给定路径之外的所有已打开的菜单 路由路径
removeOpenedMost 移除已打开的所有可关闭的菜单 -
find 查找打开的菜单中指定路径的菜单 路由路径
has 判断已打开的菜单中是否包含指定菜单 路由路径
setTitle 给当前打开的菜单设置标题 标题名称
setAffix 设置已打开菜单中指定菜单的可关闭状态 是否不可关闭

Message

js 复制代码
  // 字符串参数
  this.G.Message('this is a message.')

  // 对象参数
  this.G.Message({
    message: 'Congrats, this is a success message.',
    type: 'success',
  })

详情参照 Message 消息提示

Page

内置属性 说明
current 当前页面
opened 已打开的页面
settled 区分是否手动打开
方法 说明 参数
addOpened 添加打开的页面 1.页面对象,2.是否手动打开
removeOpened 移除打开的页面 路由路径
removeOpenedExcept 移除给定路径之外的所有已打开的页面 路由路径
removeOpenedMost 移除已打开的所有可关闭的页面 -
find 查找打开的页面中指定路径的页面 路由路径
has 判断已打开的页面中是否包含指定页面 路由路径
isSameFullPath 判断两个路径是否一样 1.路径一,2.路径二

Route

当前路由对象,包含了当前路由的所有信息,详情参考 RouteLocation API

Router

路由实例,包含了路由的所有操作,详情参考 Router API

Tool

工具类,包含一些对象或者函数

$Vue

包含两个属性和三个方法

  1. app:当前根实例app对象,即当前的应用实例,也就是createApp方法返回的那个对象

  2. self:vue包,可以获取到vuejs中的所有属性和方法

  3. get(): 返回值与self相同

  4. getConfig(): 返回当前应用实例的配置信息

  5. getGlobalProperties(): 获取应用内的全局属性对象

UUID

用于生成uuid,详情参考 uuid npm

arrayToMapByKey

根据指定的标识将数组转成对象,不指定标识将默认使用 key 进行处理

指定 key 进行处理

b64

base64转码和解码

camelCase

连字符或者下划线转驼峰

camelCaseObj

将对象的连字符或下划线格式的key转换为驼峰格式

接收两个参数:第一个参数是要转换的对象,第二个参数表示是否只要转换后的驼峰格式的对象,如果为 true 的话,将返回新对象,并且只包含驼峰格式的字段,如果为 false 那么将改变原对象,保留原对象的属性,然后增加转换后的属性

causeError

抛出一个错误

connectorCase

驼峰转连字符

dateStrToLocalString

将日期字符串转换为本地时间格式的字符串,输出的是一个字符串,实际上输入的可以是任何可以实例化成日期的值

dater

用来处理日期的工具函数,可以对日期进行各种操作,详情参考 Day.js

emptyObject

清空一个对象

filterANotInB

接收两个参数,过滤出第一个对象中有的但是第二个对象中没有的属性

filterObjExclude

第一个参数为一个对象,后面可以跟多个参数,找出在这个对象中不以其他参数为 key 的属性对象

filterObjInclude

第一个参数为一个对象,后面可以跟多个参数,找出在这个对象中以其他参数为 key 的属性对象

findIndex

接收两个参数,第一个是数组,第二个是要查找的元素,返回该元素在数组中的索引

findTreeDataById

在树中查找id为给定值的数据,接收两个参数,第一个是树结构的数组,第二个是要查找的id,返回跟id匹配的元素对象

findTreeParentDataById

根据给定id,查找树中对应对象的父对象数据,接收两个参数,第一个是树结构的数组,第二个是要查找的id,返回跟id匹配的元素父对象

getABdiff

获取两个数组的差异,返回两个数组 ABA 中存放第一个数组中有但第二个数组中没有的元素,B 中存放第二个数组中有但第一个数组中没有的元素

也可以理解为第一个数组相对于第二个数组有哪些变化,添加了哪些元素和删除了哪些元素

getKebabFirst

获取连字符格式的字符串的首字母

getQueryObject

根据给定的URL参数返回他们的对象形式,参数要跟 location.search 类似,以问号开头,如果不传将默认解析当前地址栏

getQueryVariable

获取URL参数的某个参数值

getRandomStr

生成给定长度的随机串,默认长度为6

getRandomStr2

生成给定长度的随机串,不包含大写字母,默认长度为6

getStyleByName

根据给定的样式名称获取对应的样式对象

getSuffixName

获取文件后缀名,其中也包括文件实际的名字

getToken

获取当前登录用户的token,如果不传参将默认获取以lecenToken为标识的token,也可以传入一个参数,如 Company.auth.token 的设定的值来获取token

getTypeStr

获取给定参数的类型

interchange

交换数组中两个元素的位置,会改变原数组

isArray

判断是否为数组

isBoolean

判断是否为布尔值

isCustom

判断是否为自定以资源,字符串中是否包含 custom 字符串

isDate

判断是否为日期类型

isEmptyArray

判断是否为空数组

isEmptyObject

判断是否为空对象

isExternal

判断是否为外部地址

isFunction

判断是否为函数类型

isIcon

判断是否为 icon- 开头的icon图标

isLocal

判断是否为本地资源,如果既不是自定义的 custom 资源,也不是外部地址的 external 资源,那么就是本地资源

isNumber

判断是否为数值类型

isObject

判断是否为对象类型

isRegExp

判断是否为正则表达式类型

isString

判断是否为字符串类型

isSymbol

判断是否为 Symbol 类型

loadJS

加载js文件,可以传入一个字符串形式的地址,也可以传入多个地址的数据

lowerCaseObj

转换对象的键名为全部小写字母,第一个参数为要转换的对象,第二个参数表示是否为纯净版,如果为是,那么将返回一个新对象,并且只包含转换后的所有小写key的属性,如果为否,那么将修改原对象,增加转换后的属性

mapToArray

将对象转为数组

pathCompile

将参数路径转换为实际路径

removeArrayValue

移除数组中的某个元素

removeSurplusSpace

移除字符串中多余的空白符,只保留一个空格

removeToken

删除当前登录用户的token,如果不传参将默认删除以lecenToken为标识的token,也可以传入一个参数,如 Company.auth.token 的设定的值来删除token

resetToken

清空所有cookie数据

setToken

接收三个参数,第一个参数是token的标识,第二个是实际的token值,第三个是cookie的配置,包括生效的域名、路径以及过期时间等

setTokens

接收两个参数,第一个是包含多个token键值对的对象,第二个是cookie的配置信息

toTreeByCategory

根据 category 字段生成树结构,只能生成父子层级

transferToTreeByParent

根据 parent 生成树结构,可以生成多层级

turnToString

将传入的参数转成字符串

turnToString2

将传入的参数转成字符串,与上面的方法唯一不同就是处理字符串的逻辑

underlineCase

驼峰转下划线

upperFirst

首字母转大写

validAlphabets

验证字符串是否全部为字母组成

validEmail

判断是否为邮件地址

validLowerCase

判断字符串是否全部为小写字母

validURL

判断是否为一个链接地址

validUpperCase

判断是否全部为大写字母

TurnToPage

根据给定的参数跳转到指定页面

调用方式为 G.TurnToPage(params, query)

第一个参数为对象,formId 属性必传,可以设置 title 也可以添加其他属性,作为页面的属性添加到store中,第二个参数可以为路由指定查询参数。

  • params 跳转到新页面并传递过去的数据
  • query 地址参数

params 中必须有 formId 属性(就是跳转页面的pageId)

params 参数的数据最终可在 G.Page.current 中获得。

params 中的 title 属性能够作为跳转之后显示页面 tab 的标题文字,最多支持显示6个字符。

params 中的 detail 属性能设定跳转页面的 URL,值为一个数组。可按数组元素顺序生成路径。比如值为 ['a','b','c'],那么生成的路径就为 a/b/c

如果不传 params 或者不是一个对象,或者 params 中没有 formId 字段,那么将直接报错

如果传入了 path 那么就以它的值作为实际路径进行跳转

如果 params 中没传 detail 属性,或者 detail 不是一个数组,或者是个空数组,那么将取 path 的值来生成 detail 的值,如果 path 也没传,那么就使用默认规则生成的 detail

否则如果传了 detail 并且是一个非空数组,并且 path 也没传,那么将使用 detail 来生成 path

我们先只传入一个 formId 属性

看下实际发生的效果

这时已经跳转到我们指定的页面了,并且查询参数也添加成功,页面的标题也设置成功,页面也加载成功了

然后我们再多传几个自定义参数

我们看下 store 中的数据,也就是我们前面提到的 Page.current 对象

在实际页面设计中,我们可能有多种场景需要跳转页面,不光只是从配置的菜单点击跳转页面

以列表的 link 组件的 on_click 事件为例:

js 复制代码
function(){
  let row = this.scopeData.row
  row.title = row.biaoTi.slice(0,6)
  row.detail = ['page', 'formId', row.formId]
  this.G.TurnToPage(row, {
    _t: new Date().getTime()
  })
}

TurnToPageLocal

跳转本地地址,也就是管理端中的非设计页面的菜单

User

可以获取用户相关信息

  1. id:用户的id
  2. token:用户的token
  3. name:用户的名字
  4. identity: 用户的身份

【项目体验】

系统管理端地址http://www.lecen.top/manage

系统用户端地址http://www.liudaxianer.com/user

系统文档地址http://www.lnsstyp.com/web

相关推荐
启扶农1 天前
lecen:一个更好的开源可视化系统搭建项目--数据、请求、寄连对象使用--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
低代码·数据对象·数据访问·页面可视化·页面设计器·请求对象·寄连对象
流之云低代码平台1 天前
提升PHP开发效率与质量的关键:工作流优化
低代码·php工作流优化方法·php代码优化·php开发流程优化·tpflow工作流引擎应用·gadmin企业级开发平台优势·软件开发速度提升
#六脉神剑1 天前
用myBuilder搭建企业级数字化业务系统架构
低代码·系统架构·低代码开发平台·数字化工具·mybuilder
晴虹1 天前
lecen:一个更好的开源可视化系统搭建项目--数据、请求、寄连对象使用--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
前端·后端·低代码
流之云低代码平台2 天前
PHP工作流优化:让软件开发如虎添翼
低代码·php工作流优化方法·php工作流优化案例·php代码复用·php模块化开发·php自动化测试·php性能优化
启扶农2 天前
lecen:一个更好的开源可视化系统搭建项目--组件和功能按钮的权限控制--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
低代码·权限控制·页面可视化·页面设计器·数据控制·组件控制·功能控制
AiFlutter2 天前
五、交互行为(01):按钮
flutter·低代码·低代码平台·aiflutter·aiflutter低代码
晴虹3 天前
lecen:一个更好的开源可视化系统搭建项目--组件和功能按钮的权限控制--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一
前端·后端·低代码
AiFlutter3 天前
四、动画图表(03):饼图
flutter·低代码·低代码平台·aiflutter·aiflutter低代码