Appearance
不同于 B、R、P,全局 G 对象是整个系统内部共享的,所有页面都可以访问它
这里面存放了一些全局对象、公共属性和工具方法等,都是可以在任何地方能够直接获取和使用的
| 对象 | 说明 |
|---|---|
| Company | 可以获取当前公司配置的所有信息 |
| Loading | element-plus中loading服务的引用 |
| Menu | 系统菜单,包含菜单的相关属性以及操作 |
| Message | element-plus中message服务的引用 |
| Page | 页面对象,包含页面的相关属性以及操作 |
| Route | 当前路由 |
| Router | 路由管理器 |
| Tool | 包含了预置的各种工具函数。 |
| TurnToPage | 跳转页面的方法,用来跳转到新路由 |
| User | 用户对象,包含用户信息和权限等 |
Company
基础包含 auth 和 service 两个对象,分别存放着认证标识和后端服务地址
当进入系统时,会将获取到的所有系统配置信息放入到 Company 对象中
系统配置信息可参照 基本信息配置
Loading
js
//显示弹窗
const loading = this.G.Loading.service({
lock: true,
text: '加载中...',
background: 'rgba(0, 0, 0, 0.7)',
})
//关闭弹窗
loading.close()详情参照 Loading 加载
Menu
| 属性 | 说明 |
|---|---|
| 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
包含两个属性和三个方法
app:当前根实例app对象,即当前的应用实例,也就是createApp方法返回的那个对象
self:vue包,可以获取到vuejs中的所有属性和方法
get(): 返回值与self相同
getConfig(): 返回当前应用实例的配置信息
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
获取两个数组的差异,返回两个数组 A 和 B,A 中存放第一个数组中有但第二个数组中没有的元素,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
可以获取用户相关信息
- id:用户的id
- token:用户的token
- name:用户的名字
- identity: 用户的身份