Skip to content

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

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

对象说明
Company可以获取当前公司配置的所有信息
Loadingelement-plus中loading服务的引用
Menu系统菜单,包含菜单的相关属性以及操作
Messageelement-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

生成uuid.png

arrayToMapByKey

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

数据转对象.png

指定 key 进行处理

数据转对象指定key.png

b64

base64转码和解码

b64转码解码.png

camelCase

连字符或者下划线转驼峰

连字符转驼峰.png

camelCaseObj

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

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

对象连字符转驼峰.png

causeError

抛出一个错误

抛出错误.png

connectorCase

驼峰转连字符

驼峰转连字符.png

dateStrToLocalString

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

日期转本地字符串.png

dater

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

dater日期操作.png

emptyObject

清空一个对象

清空对象.png

filterANotInB

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

找出A中有B中没有的属性.png

filterObjExclude

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

过滤出不在对象中的属性.png

filterObjInclude

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

过滤出在对象中的属性.png

findIndex

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

查找数组中的元素.png

findTreeDataById

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

根据id查找树中的数据.png

findTreeParentDataById

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

根据id查找树中对象的父数据.png

getABdiff

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

两个数组的差异.png

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

getKebabFirst

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

获取连字符的首字母.png

getQueryObject

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

获取地址的参数对象.png

getQueryVariable

获取URL参数的某个参数值

获取地址的某个参数.png

getRandomStr

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

生成随机串.png

getRandomStr2

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

生成没有大写字母的随机串.png

getStyleByName

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

根据样式名称获取样式.png

getSuffixName

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

文件后缀名.png

getToken

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

获取token.png

getTypeStr

获取给定参数的类型

获取类型.png

interchange

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

交换位置.png

isArray

判断是否为数组

是否为数组.png

isBoolean

判断是否为布尔值

是否为布尔值.png

isCustom

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

包含custom字符串.png

isDate

判断是否为日期类型

isEmptyArray

判断是否为空数组

isEmptyObject

判断是否为空对象

isExternal

判断是否为外部地址

是否为外部地址.png

isFunction

判断是否为函数类型

isIcon

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

是否为icon.png

isLocal

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

isNumber

判断是否为数值类型

isObject

判断是否为对象类型

isRegExp

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

isString

判断是否为字符串类型

isSymbol

判断是否为 Symbol 类型

loadJS

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

加载js.png

lowerCaseObj

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

对象key转小写.png

mapToArray

将对象转为数组

对象转数组.png

pathCompile

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

编译路径.png

removeArrayValue

移除数组中的某个元素

移除数组中的元素.png

removeSurplusSpace

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

删除多余空白符.png

removeToken

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

resetToken

清空所有cookie数据

setToken

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

setTokens

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

toTreeByCategory

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

根据category生成树结构.png

transferToTreeByParent

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

根据parent生成树.png

turnToString

将传入的参数转成字符串

转字符串.png

turnToString2

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

转字符串2.png

underlineCase

驼峰转下划线

驼峰转下划线.png

upperFirst

首字母转大写

首字母转大写.png

validAlphabets

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

字符串全部有字母组成.png

validEmail

判断是否为邮件地址

是否为邮件地址.png

validLowerCase

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

是否全部为小写字母.png

validURL

判断是否为一个链接地址

是否为一个链接地址.png

validUpperCase

判断是否全部为大写字母

是否全部为大写字母.png

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 属性

跳转页面.png

看下实际发生的效果

跳转页面效果.png

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

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

跳转页面自定义参数.png

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

当前页面路由数据.png

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

以列表的 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

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

跳转到本地的菜单.png

User

可以获取用户相关信息

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