ele-admin-front

前端开发框架使用说明书

版本	内容	作者	时间	备注
目录

1. 框架总览........................................................................................................................................1
2. 框架概述.............................................................................................................................1
3. 框架技术栈.........................................................................................................................2
4. 基础篇............................................................................................................................................2
5. 开发工具配置.....................................................................................................................2
6. 项目搭建.............................................................................................................................3
7. 项目配置说明.....................................................................................................................5
8. 应用篇............................................................................................................................................7
9. Vuex......................................................................................................................................8
10. Vue-router..........................................................................................................................10
11. api 请求..............................................................................................................................13
12. 内置封装...........................................................................................................................14
13. list....................................................................................................................................16
14. form.................................................................................................................................20
15. Utils.....................................................................................................................................23
16. 过滤器...............................................................................................................................26
17. 指令...................................................................................................................................26
18. 框架总览
19. 框 架 概 述

框架基于 vue 体系搭建而成,包括项目构建、依赖管理、开发过程

技术。框架基于 vue-cli 构建，使用 yarn 包管理工具，集成 docker 部署插件，依赖版本默认使用 package.json 中规定版本。

1. 框 架 技 术 栈

• Vue 2.6.11
• Vue-cli 4.5.4
• Vue-router 3.5.1
• Vuex 3.6.2
• Axios 0.21.0
• Node-sass 5.0.0
• Eslint 6.7.2
• Es6-promise 4.2.8

1. 基础篇

此篇章将讲解框架基础性的内容，能支撑普通的 web 项目开发。 内容包括：开发工具配置、项目搭建

1. 开 发 工 具 配 置

为了统一代码格式规范项目中集成了 eslint，推荐使用 VSCode 开发 并保持 VSCode 配置一致，项目开发时请保持 eslint 为开启状态

• VSCode 配置

• 开启 eslint

在 vue.config.js 中设置 lintOnSave : true

1. 项 目 搭 建

• 使用 vue-cli 初始化一个 vue 项目

1. vue create demo

2. 运行 yarn 或 cnpm install 安装依赖

3. yarn add

4. 在 main.js 中引入

import ele-admin-front from 'fosung-front' import 'fosung-front/lib/fosung-front.css'

1. fosung-front 配置

// 引入 elemtntUI

// 此处根据自身项目情况引入 ui 框架可引入 vant 或不引入 import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css

// 页面跳转时的权限验证（函数） 类似 router.beforeEach

import routerBefore from '@/router/routerBefore'

// 创建 fosungFe 实例

const ele-admin-front = new ele-admin-front()

// vuex 配置 ele-admin-front

.storeBuilder	()
.addModules(require.context('@/store/', true, /.js$/)) //

添加自定义	store
// http 配置

ele-admin-front

.httpBuilder()

.api(require.context('@/api/', true, /.js$/))

.error((error) => new Promise((resolve, reject) => {

const Store = window.appContext.storeInstance

if (error.response ? error.response.status === 401 : false) {

const { loginUrl, loginProfile } = Store.getters.configInfo // 本地传 dev,线上环境传 configure 获取到的 loginProfile

const hrefUrl = loginUrl + (process.env.NODE_ENV === 'production' ? l oginProfile : 'dev')

window.location.href = hrefUrl

} else {

reject(error)

}

}))

// router 配置

ele-admin-front

.routerBuilder()

// .whiteList(['404', '403', 'error']) // 设置白名单 // .menu(menu) // 静态路由传入

.before(routerBefore) // routerBefore 配置

// vue 配置

ele-admin-front

.vueBuilder()

.install(ElementUI, { size: 'mini' }) // 安装第三方插件 .components(require.context('@/components/', true, /.vue$/)) // 注册全局

组件

// 全局构建 ele-admin-front.build()

1. 项 目 配 置 说 明

	配置项	参数	返回值	描述
storeBuilder()	.addModules( context)	传入 store 模块所在目录，例： require.context(‘@/store/’,true,/ .js$/)	storeBuilder()	扫 描 所 有 的 vuex module 文件
	.add(name, storeModule)	name: module 名称； storeModule：vuex module	storeBuilder()	添加单个 module
httpBuilder()	.api(context)	传 入 api 请 求 所 在 目 录 ， 例 ： require.context(‘@/api/’,true,/.j s$/)	httpBuilder()	扫描所有 api 接口
	.timeout(num )	传入一个 Number 类型，单位毫 秒（m）	httpBuilder()	接口超时时长设置
	.baseUrl(strin g)	传入一个 String 类型	httpBuilder()	设置请求地址
	.headers(json )	传入一个 Object 类型	httpBuilder()	设置请求头
	.before(functi on)	传入一个函数	httpBuilder()	请求前拦截

	.checkRespon se(funtion)	传入一个函数	httpBuillder()	请求后拦截
	.error(functio n(error))	传入一个错误处理函数，接收 一个 error 参数	httpBuilder()	接 口 错 误 状 态 处 理，需要 返回一个 promise
	.httpParams()	请求响应参数配置	httpParams()	请 求 响 应 参 数 配 置，具体 配置见下 方 httpParams() 配 置
routerBuilder()	.menu(array)	传入一个静态路由，Array 类型	routerBuilder()	配置静态路由
	.mode(string)	可选值 hash、history，String 类 型	routerBuilder()	设置路由模式
	.whiteList(arra y)	传入一个数组，数组中的内容 为路由的 name 值	routerBuilder()	设置路由白名单
	.before(functi on(to,form.ne xt))	传入一个函数，接收 to、form、 next()三个参数	routerBuilder()	路由跳转前拦截
	.after(functio n(to,form))	传入一个函数，接收 to、form 两个函数	routerBuilder()	路由跳转后拦截
	.routerAfterH andler(functio n(to,form,sav edPosition))	传入一个函数	routerBuilder()	页面跳转 后滚动条 动作，默认返回 x、 y 的 0 坐标位置
	.RouteToTop(t oTop)	传 入 一 个 Boolean 类 型 ， 默 认 true	routerBuilder()	路由跳转 后滚动条 是否回到顶部
.vueBuilder	.install(plugin, options)	Plugin：第三方插件 Options：第三方插件配置 示 例：.install(ElementUI,{size:’mini’ })	vueBuilder()	第三方插件安装
	.components( context)	传入 component模块所在目录， 例：.components(require.context (‘@/components/’,true,/.vue$/) )	vueBuilder()	组成全局组件
	.filter(fun)	传入一个函数	vueBuilder()	注册全局过滤器
	.directive(obj)	传入一个对象， 例： directive({ name: ‘directiveName’, bind: function (el, binding, vnode) { }, inserted: function (el, binding,	vueBuilder()	注册全局指令, 注意 ：返 回的 对象 需要有 name 属性

		vnode) { }, update: function (el, binding, vnode) { } })
.build()	无	无	最后进行 执行全局 构建
**httpParams()**配置：

.requestParams(params)	params 默认值：{ // 当前分页号 pageNum: 'pageNum', // 每页记录最大数 pageSize: 'pageSize', // 分页开始索引 pageNumStartIndex: 0 }	httpParams()	接口请求参数映射
.responseParams(params)	params 默认值：{ // 请求状态 success: 'success', // 返回提示语 message: 'message', // 请求到的 data 数据 data: 'data', // 请求到的列表数据 datalist: 'datalist', // 请求状态码 code: 'code', // 请求异常 id exceptionid: 'exceptionid', // 当前分页号 pageNum: 'pagenum', // 每页记录最大数 pageSize: 'pagesize', // 总条数 total: 'totalelements' }	httpParams()	接口响应参数映射
3. 应用篇

此篇章将讲解框架具体使用的内容，内容包括：vuex 使用、路由

配置、http 接口请求使用，工具函数

1. Vuex

• 框架内置对象

内置对象	mutations 函数名	描述
user	SAVE_USER	存储用户信息
currentRole	SAVE_ROLE	存储当前选中的角色信息
configInfo	SAVE_CONFIG_INFO	存储项目配置信息
menuList	SAVE_MENU_LIST	存 储 Array 类 型 的 路 由 信 息用于 404 验证
menuTree	SAVE_MENU_TREE	存储 tree 类型的路由信息 用于菜单渲染
other	SAVE_OTHER_VALUE	存 储 其 他 信 息 用 于 不 同 项 目 根 据 项 目 需 要 求 存 储 信 息
buttons	SAVE_BUTTONS	存储按钮权限信息

• 新增 vuex 对象

在 src 下新建 store 文件夹，在 store 中新建 js 文件

• 页面中获取 vuex 中的数据

在 vue 生 命 周 期 函 数 同 级 加 入 $stores 关 键 字 并 传 入 一 个 数 组 （Array）或字符串(String)，同时获取多个 vuex 数据使用 Array， Array 中数据为所要获取数据的 key，只获取一个 vuex 数据时使用 String，String 为所要获取数据的 key。然后直接使用 this 关键字点 key 即可

• 页面中修改 vuex 中的数据 this.$store.commit('SAVE_ROLE', role)

与 vue 原生一样使用 commit 修改 vuex 数据 this.$store.commit(参数 1，参数 2)

参数 1：mutations 函数名（String）

参数 2：需要存入的数据

1. Vue-router

• 静态路由配置

import Layout from '@/layout'

const load = require('./import/_import_' + process.env.NODE_ENV) // 静态路由配置示例

const menu= [

{

name: '/',

path: '/',

component: Layout,

redirect: 'dashboard',

children: [

{

name: 'dashboard',

path: 'dashboard',

component: load('view/dashboard/index'),

meta: { title: '首页', icon: 'main-home-page' }

},

{

name: 'list',

path: 'list',

component: load('view/list/index'),

meta: { title: '表单', icon: 'table' },

redirect: 'list1',

children: [

{

name: 'list1',

path: 'list1',

component: load('view/list/index1'), meta: { title: '表单 1' }

}, {

name: 'list2',

path: 'list2',

hidden: true,

component: load('view/list/index2'), meta: { title: '表单 2' }

}

]

}, {

name: 'baidu',

path: 'https://www.baidu.com', meta: { title: '百度', icon: 'link' }

}

]

}

]

export default menu

（注：对应 demo 项目中 src/router/menu.js 文件）

Layout 布局文件，其中包括左侧菜单栏，顶部 header，面包屑 导航,以及内容区域

path:’/’ 项中的子路由（children 中）为菜单展示路由，内容 展示在 Layout 布局文件中的内容区域。

配置项说明：

1. name：路由名称，请保持唯一性（String）
2. path：路由地址（String），当 path 传入的是一个 http 或 https 地址时对应菜单是一个外链，点击会新开窗口访问该地址
3. component：路由指向的文件地址
4. redirect：重定向（String），传入重定向的目标子路由名称
5. hidden：是否在菜单中隐藏（Boolean）,传入 true 该路由在菜 单中不显示
6. meta.title：菜单名称（String）
7. meta.icon：菜单 icon（String）

将 上 述 配 置 中 暴 露 出 来 的 menu 在 main 中 引 入 ， 使 用 ele-admin-front.routerBuilder().menu(menu)传入即可完成静态路由 配置

• 动态路由配置

动 态 从 后 端获 取 路 由 数 据 后 在 前端 生 成 路 由 与 菜 单 栏可 以 通 过 routerBuilder().before()实现， before 中除了 to、form、 next 这 些常用的路由拦截参数以外,还可以通过 window.appContext 获取 到 httpInstance、storeInstance、routerInstance、Utils 等内置对 象的实例，例：

const { storeInstance, Utils } = window.appContext

注意：

目 前 获 取 用 户 信 息 、 配 置 信 息 、 获 取 菜 单 等 已 经 封 装 到 框 架 内 ， 具 体 见 **demo** 项 目 **内 的 routerBefore.js 内使用 因为动态路由逻辑是在路由拦截中完成的，这段代码每次路由跳转都会执行，必须添加判 断保证只有进入项目后第一次通过路由拦截的时候才去动态加载路由，目前我们通过判断

vuex 中是否存在用户信息来完成。

动态路由已在 demo 项目 src/router/routerBefore.js 中完成，请自 行查看

1. api 请 求

• 内置方法：

目前框架内置了$api 和$ajax 两个方法

• vm.$api(apiName, methodName，params) 该方法依赖于框架初始化时， ele-admin-front.httpBuilder().api(context)扫 描 进 来 的 api 文 件夹，apiName 为 api 文件夹内文件名称，文件内代码示例:

export default function (http) {

return {

/**

• 获取配置
• http 为 axios 实例，除 postJson 外还可以使用 axios 的其他方法, 例

如.get()、.post()等

• @return {*}

*/

getConfigure () {

return http.postJson('/api/user/configure')

}

}

}

• vm.$ajax

u Axios 原生请求

• axios 扩展：

框架内部的 http 请求是基于 axios 进行的扩展，除了保留 axios 原有的请求方式外，还扩展了如下请求方式：

postJson(url, params, config)

• axios 请求方式
  • http.postJson('接口 url', data, config)
  • http.post('接口 url', data, config)
  • http.get('接口 url', config)
  • http({url: '接口 url', method: 'get', data, ...config})
• config 常用字段：

除了常配置字段 headers、responseType、responseEncoding 外，扩展了如下字段：

loading，默认 true，控制请求时加载状态是否显示

• get 请求传参方式

1. axios.get('/user?ID=12345')
2. axios.get('/user', {

params: {

ID: 12345

}

})

1. 内 置 封 装

注意：本章节介绍的是基础封装，所有内置封装均继承自基础封装并进行了扩展！

• 内置属性

名称	类型	默认值	是否必须主动声 明	描述
apiName	string	无	是	查询列表数据时，要调用的

				api 名称，依赖于 ele-admin-front().httpBuilder().api( context)配置项
querying	boole an	false	否	true 为正在查询中，false 为查 询完毕
queryCondition	object	{}	否	查询列表数据时，传递给接口 的查询条件，推荐绑定属性到 form 上面
initQuery	boole an	true(form 时， 默认为 false， 只有 showXXX、 toXXX的方法调 用才会触发查 询。如为 true 则直接触发查 询。)	否	是否页面初始化完毕后，立即 执行查询。

• 内置方法：(编写顺序按照执行顺序排列)

名称	参数	返回值	描述
resetQueryConditio n(isQuery)	isQuery：boolean 类 型，非必填。true 则 代表重置后执行列表 查询操作，false 则代 表只是重置操作。默 认 false	无	重置查询条件
getDefQueryConditi on()	无	要设置给 queryCondition 的值	获取默认的查询条件，可用于 初始化设置查询条件。
getQueryLoadingTa rget()	无	html 对象或 html 对 象的集合	查询时，需要添加遮罩的 dom 节点。需要将 http 的 loading 属性设置为 false。详见【http 请求】章节。
queryhandler(para ms)	params：k-v 类型，要 查询的参数	无	执行列表查询
getQueryCondition( params)	params:框架内部调 用默认是 queryHandler 调用时 传入的参数	处理之后的查询参 数	获取查询条件，可以自定义 queryCondition 中没有的参 数，建议使用 return Object.assign({}, this.queryCondition, params, {xxx:xxx})形式进行查询参数扩 展，不建议直接修改 queryCondition 的值
isExecuteQuery(con	condition：查询参数，	boolean 类型，true	处理是否执行查询操作，默认

dition)	框架内部调用默认是 上方函数的返回值	则代表即可以执行 查询操作，false 则 代表不可以执行查 询操作。	返回 true，执行查询操作。
queryBeforeHandle r	无	无	发送查询请求之前的 hook，下 一步将发送查询请求
getResponseInfo(re sponse)	response:列表查询请 求的返回体	实际要用到的数据 体	获取请求返回体中，需要用到 的部分。
setResponseData(re sponseInfo)	responseInfo:经过 getResponseInfo 处理 后拿到的接口数据体	无	用于绑定数据对象
querySuccessHandl er(responseInfo)	responseInfo:描述同 上	无	查询成功且绑定数据对象之 后的 hook
queryErrorHandler( error)	error:接口异常时，返 回的异常对象	无	列表查询接口请求异常时的 hook
queryAfterHandler	无	无	列表查询执行完毕后的 hook。 注意：不管查询接口是否成 功，都会调用！

1. list

注意：使用 list 时必须加上 $plugins: 'page'或 $plugins: 'list'

page 为带分页的列表，list 为无分页

• 列表内置属性：

名称	类型	默认值	是否必须主动声 明	描述
apiName	string	无	是	查询列表数据时，要调用的 api 名称，依赖于 ele-admin-front().httpBuilder().api( context)配置项
querying	boole an	false	否	true 为正在查询中，false 为查 询完毕
queryCondition	object	{}	否	查询列表数据时，传递给接口 的查询条件，推荐绑定属性到 form 上面
initQuery	boole an	true(form 时， 默认为 false， 只有 showXXX、	否	是否页面初始化完毕后，立即 执行查询。

		toXXX的方法调 用才会触发查 询。如为 true 则直接触发查 询。)
queryMethod	string	queryAll	是	查询列表数据时，要调用 apiName 对应 api 中的查询方 法名称
deleteMethod	string	delete	是	删除列表数据时，调用 apiName 对应 api 中的删除方 法名称
batchDeleteMethod	string	无	否，如果批量删除 和删除方法公用 一个，可不声明， 未声明则会查找 deleteMethod	批量删除列表数据时，调用 apiName 对应 api 中的批量方 法名称。
conditionChanged	boole an	false	否	查询条件是否发生了变更， true 为变更，false 为无变更
createPageName	string	无	调用 createPage 时要显示声明，未 声明则依次查找 erditPageName、 detailPageName， 如果都未声明，则 抛出异常。	新建页面的 routerName
editPageName	string	无	调用 editPage 时 要显示声明，未声 明则依次查找 createPageName、 detailPageName， 如果都未声明，则 抛出异常。	编辑页面的 routerName
detailPageName	string	无	调用 detailPage时 要显示声明，未声 明则依次查找 createPageName、 editPageName，如 果都未声明，则抛 出异常。	详情页面的 routerName
createDialogRef	string	createDialogRef	调用 createDialog 时要显示声明，未 声明则依次查找 editDialogRef、 detailDialogRef，	新建弹框的 ref 标识

			如果都未声明，则 抛出异常。
editDialogRef	string	无	调用 editDialog时 要显示声明，未声 明则依次查找 createDialogRef、 detailDialogRef， 如果都未声明，则 抛出异常。	编辑弹框的 ref 标识
detailDialogRef	string	无	调用 createDialog 时要显示声明，未 声明则依次查找 createDialofRef、 editDialogRef，如 果都未声明，则抛 出异常。	详情弹框的 ref 标识
page	{page Num, pageS ize,tot al,dat a}	{pageNum:0,pa geSize: 15,total:0,data:[ ]}	否	当$plugins为 page时的分页数 据对象
list	Array	[]	否	当$plugins 为 list 时的数据对 象
defaultQueryPageSi ze	Numb er	15	否	分页查询时，默认传输的每页 条目数。

• 列表内置函数：

名称	参数	返回值	描述
getQueryPageCondition( )	无	返 回 分 页 查 询的参数，页 码 与 每 页 条 目数。	返回分页查询的参数， 页码与每页条目数。
onPageNumChange(pag eNum)	pageNum：number 类型，页码	无	页 码 改 变 时 的 处 理 函 数。
onPageSizeChange(page Size)	pageSize：number 类型，每页 条目数	无	每 页 条 目 数 改 变 时 的 处理函数。此时会将页 码 重 置 为 默 认 的 分 页 开始索引 0。
deleteHandler(item, afterQuery, ...params)	item:要删除的数据，该值可为 单 个 对 象 或 对 象 数 组 。 afterQuery：删除完毕后是否执 行查询，默认为 true。params：	无	删除列表数据，支持批 量或单条删除。

	需要传入的其他参数
deleteBefore(item,...par ams)	item:要删除的数据，该值可为 单个对象或对象数组。params： 数组类型，调用 deleteHandler 时传入参数大于两个时，其他 的都会在 params 中	boolean		用 来 判 断 是 否 可 以 执 行删除操作，返回 true 则继续执行删除操作， 返回 false 则终止。
	item:要删除的数据，该值可为
deleteAfter(item,...para ms)	单个对象或对象数组。params： 数组类型，调用 deleteHandler 时传入参数大于两个时，其他	无		删除完毕以后的 hook。
	的都会在 params 中
				如 果 不 存 在 则 依 次 返
				回
				createDialofRef 、
				editDialogRef 、
getDialogRefIfDefault(re f)	ref：string 类型，要获取的 ref。	string undefined	/	detailDialogRef 中 不 为 空值的一个。注意：此
				方法为框架内部实现，
				非 特 殊 情 况 不 要 重 写
				此方法，以免造成未知
				错误！
showCreate(params)	params:需 要 传 入 到 弹 框 页 面 的参数。如果传入了 ref 属性， 则优先使用 ref 对应的组件作 为编辑页。否则将使用 data 中 声明的 xxxDialogRef。	无		打开弹框页面，类型为 创建，此时弹框页面内 置属性 readonly属性为 false，可用此属性限制 页 面 元 素 是 否 可 被 操 作。
	id: string 或 number 类型，要编			打开弹框页面，类型为
	辑的数据 ID。params：传入弹			编辑，同时根据 ID 查询
	框页面的其他参数。如果传入			该数据详情。此时弹框
showEdit(id, params)	了 ref 属性，则优先使用 ref 对	无		页面内置属性 readonly
	应的组件作为编辑页。否则将			属性为 false，可用此属
	使 用 data 中 声 明 的			性 限 制 页 面 元 素 是 否
	xxxDialogRef。			可被操作
showDetail(id, params)	id:要查看的数据 ID。params： 传入弹框页面的其他参数。如 果传入了 ref 属性，则优先使 用 ref对应的组件作为编辑页。 否 则 将 使 用 data 中 声 明 的 xxxDialogRef。	无		打开弹框页面，类型为 查看，同时根据 ID 查询 该数据详情。此时弹框 页面内置属性 readonly 属性为 true，可用此属 性 限 制 页 面 元 素 是 否 可被操作
getPageNameIfDefault(p ageName)	pageName：stirng 类型，获取 需要的 pageName	string undefined	/	如 果 不 存 在 则 依 次 返 回 createPageName 、

			editPageName 、 detailPageName 中不为 空值的一个。注意：此 方法为框架内部实现， 非 特 殊 情 况 不 要 重 写 此方法，以免造成未知 错误！
toCreate(params)	params：需要传递到跳转后页 面 的 参 数 。 如 果 传 入 了 pageName 属 性 ， 则 优 先 使 用 pageName 对 应 的 页 面 作 为编 辑页。否则将使用 data 中声明 的 xxxPageName。	无	跳转到 pageName 对应 的页面，类型为新建， 此 时 跳 转 后 页 面 内 置 属 性 readonly 属 性 为 false，可用此属性限制 页 面 元 素 是 否 可 被 操 作。
toEdit(id, params)	id：string 或 number 类型，要 编辑的数据 ID。params：传入 跳转后页面的其他参数。如果 传入了 pageName 属性，则优 先使用 pageName 对应的页面 作为编辑页。否则将使用 data 中声明的 xxxPageName。	无	跳 转 页 面 ， 类 型 为 编 辑，同时根据 ID 查询该 数据详情。此时跳转后 页面内置属性 readonly 属性为 false，可用此属 性 限 制 页 面 元 素 是 否 可被操作
toDetail(id, params)	id：string 或 number 类型，要 查看的数据 ID。params：传入 跳转后页面的其他参数。如果 传入了 pageName 属性，则优 先使用 pageName 对应的页面 作为编辑页。否则将使用 data 中声明的 xxxPageName。	无	跳 转 页 面 ， 类 型 为 查 看，同时根据 ID 查询该 数据详情。此时跳转后 页面内置属性 readonly 属性为 true，可用此属 性 限 制 页 面 元 素 是 否 可被操作
2. form

注意：使用 form 时必须加上 $plugins: 'form'

• 表单内置属性

名称	类型	默认值	是否必须主动声明	描述
visible	boolean	false	否	用于标识 dialog是否是可见 状态
queryMethod	string	getInfo	否	查询数据时，要调用 apiName 对应 api 中的查询

				方法名称
submitMethod	string	saveInfo	否	提交数据时，要调用 apiName 对应 api 中的提交 方法名称
formData	object	{}	否	表单数据绑定的对象。
submitting	boolean	false	否	用于标识是否正在提交数 据中。
formPageType	string	undefined	否	框架内部自动赋值，page 代表当前页面类型是新页 面，dialog 代表当前页面类 型是弹框。
operateType	string	new	否	用于标识当前页面的操作 类型，值为：new(新增)、 edit(编辑)、detail(详情)。
parentParam	键值对	{}	否	列表页传递进入当前页的 参数，都被封装在这个对象 中
readonly	boolean	false	否	用于标识当前页面是否可 以进行操作，通过 XXXCreate/XXEdit 方式进入 的，则该值为 false，通过 XXXDetail 方式进入的，则该 值为 true。可用该值绑定组 件的 disabled 属性，来进行 区分组件是否可被编辑。
validRef	string	validRef	否	该属性可绑定至表单上，框 架会自动通过该属性拿到 表单，来进行校验。
triggerRefresh	boolean	true	否	提交完成后是否触发父页 面刷新。
initQuery	boolean	false	false	如果该值为 true，则立马执 行页面的查询逻辑。

• 表单内置方法

名称	参数	返回值	描述
close	无	无	用来关闭当前页面 的函数，只有在通过 showXXX 的形式进 入的页面生效。
closeAfterHandler	无	无	在 close 执行完毕后 会调用的方法。用于

			页面关闭以后的一 些处理。
triggerParentRefresh	无	无	在 close 执行完毕后 会调用的方法。用于 使用__open 或 showXXX 方式打开 的弹框页面，触发父 页面(list 或 page)的 刷新。
resetFormValid	无	无	用于重置 form 的表 单验证，将会获取所 有 ref绑定为 validRef 的 form，执行 form 的 resetFields函数来 重置表单验证。
beforeCreateHandler	无	无	表单创建之前 hook， 可以给创建的表单 赋默认值。
submitHandler(isClose)	isClose：boolean 类型，默 认为 true。该属性代表提 交操作完毕后，是否自动 关闭页面。	无	用来提交表单数据 的函数。内部调用 apiName 对应 api 文 件中的 submitMethod 方法 进行提交请求。
getSubmitData	无	要提交的 数据	获取要提交的数据， 默认返回 this.formData。注意： 如需操作，建议使用 **Object.assign({}, this.formData, {xxx:xxx});**的形式来 操作，避免直接修改 this.formData！
validFormData(submitData)	submitData：上一步骤处 理返回的提交数据。	boolean / Promise	用来校验要提交的 数据是否满足要求， 默认获取 validRef 绑 定的 form 来进行规 则校验，被校验的 form支持 validate函 数即可。返回 true / Promise.resolve()则 代表校验通过，反之 则校验失败，不继续 提交操作！

isExecuteSubmit(submitData)	submitData：意义同上	boolean / Promise	用来处理是否执行 提交操作，返回 true / Promise.resolve()则 代表校继续执行，反 之则不继续提交操 作！
beforeSubmitHandler	无	无	发送提交请求之前 的 hook。
submitSuccessHandler(respon seInfo)	responseInfo：接口提交成 功后返回的响应体。	无	提交成功之后的 hook。
submitErrorHandler(error)	error：接口提交失败后的 异常结构体。	无	接口提交异常的 hook。
afterSubmitHandler	无	无	无论接口提交是否 成功，结束后都会执 行的 hook。
5. Utils

名称	参数	返回值	描述
$api(apiName,methodNa me,params)	apiName:文件名 methodName:api 方法名 params：参数	Promise	根 据 文 件 名 与 内 部 方 法 名 发 送 对 应的请求
$jump({path/name:’xxx’}, replace)	参数 1：存入一个字符串参数 会根据 path 跳转，传入对象 根 据 内 部 属 性 跳 转 与 $router.push 一致 replace： 默 认 folse,如 果 问 true 相 当 于 执 行 $router.replace	无	框 架 封 装 的 路 由 跳 转 方 法 ， 原 有 的$router,push 与 $router.replace 已 禁用
$go(-1)	number 类型，前进或者后退		路 由 前 进 或 者 后 退
$getRef(ref)	ref: string 类型,需要获取的目 标实例的 ref 值	获 取 到 的 目 标 实 例 或 者 实例数组	根据 ref值获取实 例
$chunk(source,chunkLeng th)	source：要操作的数组对象。 chunkLength：每组的长度	一 个 分 割 处 理 后 的 二 维 数组	用 于 把 数 组 按 照 指 定 个 数 进 行 分 组 。 例 如 [1,2,3,4,5,6] 变 成 [[1,2],[3,4],[5,6]。

$encrypt.encoder(target, salt)	target：object 类型 ，要被 加 密的对象。salt：盐，可选值。	被 加 密 之 后 的字符串。	用 来 进 行 对 象 加 密。
$encrypt.decoder(encode rStr, salt)	encoderStr：被加密的字符串。 salt：盐，选填，如果加密时 填写了，那么解密时要填写一 致的。	返 回 被 解 密 的对象。	将 某 个 加 密 字 符 串 解 密 成 原 本 的 样子。
$bus.on(eventName, func)	eventName：事件名称。func： 处理函数。	监听 ID，string 类型。用于取 消监听。	全 局 监 听 某 个 事 件。
$bus.once(eventName, func)	同上	同上	同上，区别在于， 该 监 听 只 会 执 行 一 次 ， 触 发 过 后 自动销毁。
$bus.emit(eventName, params)	eventName：要触发的事件名 称。params：触发事件时，传 递的参数。	无	全 局 触 发 某 个 事 件。
$bus.stop(id)	id：string 类型，创建监听时 返回的 ID。	无	用 来 停 止 某 个 监 听。
$tips.success(message)	message： string 类 型 ， 提 示 内容。	无	弹 出 一 个 代 表 成 功的提示。
$tips.info(message)	同上	无	弹 出 一 个 代 表 信 息的提示。
$tips.warning(message)	同上	无	弹 出 一 个 代 表 警 告的提示。
$tips.error(message)	同上	无	弹 出 一 个 代 表 异 常的提示。
$tips.confirm(message, title)	message： string 类 型 ， 确 认 框的内容。title：string 类型， 确 认 框的 标 题 ， 默 认为 “提 醒”。	Promise	用 来 弹 出 一 个 确 认框。
$loading.show(text)	text：string 类型，loading 要 展示的文本内容，默认为“正 在加载数据，请稍后。”	id， string 类 型 ， 关 闭 loading 时 需 要使用。	用 于 打 开 一 个 loading 遮罩。
$loading.close(id)	d：string 类型，创建 loading 时返回的 id。	无	用 于 关 闭 某 个 loading。
$loading.closeAll	无	无	用 于 关 闭 窗 口 中 所有的 loading 遮 罩。
$copy(content)	content：string 类型，要复制 到剪切板的内容。	无	将 内 容 复 制 到 剪 切板。
$toFixed(num, digits, isRound)	num：string / number 类型， 要 被 操 作 的 数 字 。 digits： number 类型，要保留几位小	返 回 截 取 后 的数字。	用 来 截 取 数 字 到 指定的小数位。

	数。isRound：boolean 类型， 是否四舍五入，默认为 false。
$typeEqual(target, type)	target：object，要被判断的对 象。type：可传入类型，例如： Array， 则 校 验 target 是 否 属 于 Array 类型，该参数可传多 个，多个类型时，其中一个符 合要求则返回 true。	类 型 是 否 符 合	校 验 target 是 否 符合某个类型。
$removeItemInArray(arra y, removeItem)	array:Array 类型，要操作的数 组对象。removeItem：object 类 型 ，要 在 数 组 中 删除 的 对 象。	无	在 数 组 中 删 除 某 个元素。
$trim(str)	string 类型，要去空格的字符 串。	返 回 去 空 格 之 后 的 字 符 串。	给 字 符 串 去 除 两 边的空格。
$isEmpty(obj)	object 类型，判断 obj 是否为 空。	为 空 时 返 回 true，反之返 回 false。	用 于 判 断 对 象 是 否为空。
$isNotEmpty(obj)	object 类型，判断 obj 是否不 为空。	不 为 空 时 返 回 true，反之 返回 false。	用 于 判 断 对 象 是 否非空。
$getRandomByRegion(mi n, max)	min: number 类型，获取随机 数区间的最小值(包含)。max: number 类型，获取随机数区 间的最大值(包含)。	返 回 获 取 到 的随机数。	获 取 指 定 区 间 的 随机数。
$list2Tree(array, setting)	array: array 类型，要转换为树 结构的原数组对象。setting： 配置项， 包含 idField：string 类型，代表主键的字段，默认 id。pidField：string 类型，代 表 父 id 的 字 段 ， 默 认 parentId。childrenField：string 类型，子节点存放的字段名， 默认 children。rootValue：根 节点值，默认为 0。	返 回 树 结 构 对象。	将 list转换为树结 构。
$tree2List(array, removeChildren)	array: array 类 型 ， 要 转 换 为 list 的 树 结 构 对 象 。 childrenField：string 类型，子 节 点 存 放 的 字 段 。 removeChildren： boolean 类 型，是否删除 children 字段， 默认 true。	将 树 结 构 拉 平为 list。	将 树 结 构 拉 平 为 list。
6. 过 滤 器

名称	参数	描述
dateFormat	pattern：string 类型，指定要格 式化成那种类型的日期，默认为 “yyyy-MM-dd hhss”。	用来格式化日期的。
7. 指 令

名称	参数	描述
permission	value: Array 类型，例： v-permission="['admin','editor']	按钮权限指令，根据 vuex 内存 储的 buttons 状态做判断，根据 示例，如果 buttons 内有’admin’ 或者’editor’，则该按钮会显示， 否则不会显示。 注 意 ： 需 要 在 layout 内 设 置 key， 并 监 听 vuex 的 buttons 状态动态改变 key 值，以此确 保每次切换权限的时候都能重 新初始化指令。具体使用示例 见 demo**
waves	无	波纹动画指令，dom 元素添加 v-waves 指令时，该部分元素会 自动加载点击动画效果