§ Fox3.0前端框架-控制流程扩展开发
fox
§ 1. 前言
Fox Flow是通过user flow和system flow完成对页面的逻辑处理的。user flow是每个页面的逻辑处理，而system是公共处理部分，如复核、授权等。
§ 1.1 user flow
user flow 在vue的scope中定义，如下
export default {
name: "example_money-item",
//数据
data:function(){
return {
}
},
//方法
methods:{
},
//Fox流程
fox_flow() {
return {
/**
* 界面渲染后，更改数据会触发钩子函数
* @param session
* @param context
*/
mounted(session, context){
context.resolve()
},
/**
* 销毁处理
*/
beforeDestroy(session) {
},
/**
* 消息
* @param type
* @param data
*/
onMessage(type, data){
},
/**
* 提交前处理
* @param context
* @param checkResult
*/
preSubmit(context, checkResult){
console.info("pre submit流程")
//触发submit函数调用(必须执行context.resolve或context.reject)
context.resolve()
},
/**
* 提交处理
* @param context
* @param args
*/
submit(context){
console.info("submit流程")
//触发post submit函数调用(必须执行context.resolve或context.reject)
context.resolve();
},
/**
* 提交后处理
* @param context
* @param params
*/
postSubmit(context){
console.info("post submit流程")
},
/**
* 提交取消处理
* @param context
* @param args
*/
cancelSubmit(context, error){
console.info(JSON.stringify(error))
},
}
}
}
§ 1.2 system flow
system flow 在src/utils/commons/contorller/flows中定义，目前内置的flow如下
- BaseFlow
- NormalFlow
- CheckFlow
- AuthFlow
BaseFlow是所有Flow的根类，其它Flow都是继承该类。而UserFlow是的根据页面的打开方式openType：normal、check、auth，而动态得对应的System Flow绑定，也就是User Flow的父亲不是固定的，根据不同的情况切换不同的爸爸（土豪爸爸、慈善家爸爸、大军阀爸爸等），羡慕吧。
§ 2.扩展开发
###2.1 认识BaseFlow
BaseFlow的代码结构如下：
/**
* 基础流程
*/
export default class BaseFlow{
/**
* flow名称
* @type {string}
*/
static getName(){
return "base"
}
/**
* Vue对象创建，当数据加载前
*/
beforeCreate(session){
}
/**
* created前调用
* @param session
*/
preCreated(session){
}
/**
* Vue对象创建，数据加载后，更改数据不会触发updated函数
*/
created(session){
}
/**
* created后调用
* @param session
*/
postCreated(session){
}
/**
* 界面渲染前，更改数据不会触发updated函数
*/
beforeMount(session){
}
/**
* mounted前执行
* @param session
* @param context
*/
preMounted(session, context){
context.resolve()
}
/**
* 界面渲染后，更改数据会触发钩子函数
* @param session
* @param context
*/
mounted(session, context){
context.resolve()
}
/**
* mounted后执行
* @param session
* @param context
*/
postMounted(session, context){
context.resolve()
}
/**
* before update
* @param session
*/
beforeUpdate(session){
}
/**
* updated前执行
* @param session
* @param context
*/
preUpdated(session, context){
context.resolve()
}
/**
* 当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom
*/
updated(session, context){
context.resolve()
}
/**
* updated后执行
* @param session
* @param context
*/
postUpdated(session, context){
context.resolve()
}
/**
* keep-alive 组件激活时调用
* @param session
*/
activated(session){
}
/**
* keep-alive 组件停用时调用
* @param session
*/
deactivated(session){
}
/**
* 调用$destroy方法后，立即执行beforeDestroy
*/
beforeDestroy(session){
}
/**
* 组件的数据绑定、监听...去掉后只剩下dom空壳，这个时候，执行destroyed
*/
destroyed(session){
}
/**
* 暂存数据
*/
tempSave(session){
}
/**
* 恢复数据
*/
recover(session){
}
/**
* 设置检查条件
* @param context
*/
setCheckConditions(context){
context.resolve()
}
/**
* 检查
* @param context
* @param conditions
*/
check(context, conditions){
//触发v-verify指令设置的检查条件
this.fox_check(conditions).then((checkResult)=>{
if(checkResult.pass){
context.resolve(checkResult)
}else{
context.reject(checkResult)
}
},(error)=>{
//设置检查原因
let reason={
type:"checkFail",
cause:error,
}
context.reject(reason);
})
}
/**
* 提交前处理
* @param context
* @param checkResult
*/
preSubmit(context, checkResult){
context.resolve();
}
/**
* 提交处理
* @param context
* @param args
*/
submit(context, ...args){
context.resolve();
}
/**
* 提交后处理
* @param context
* @param params
*/
postSubmit(context, ...args){
}
/**
* 提交取消处理
* @param context
* @param args
*/
cancelSubmit(context, ...args){
}
}
####2.1.1 和UseFlow一致的函数
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- activated
- deactivated
- beforeDestroy
- destroyed
- setCheckConditions
- check
- preSubmit
- submit
- postSubmit
- cancleSubmit
以上函数的详细说明，请查看文档Fox3.0前端框架-控制流程，如果UserFlow不实现该函数或通过super.方法，就可以调用到对应的父亲SystemFlow中的函数
####2.1.2 SystemFlow特定函数
- preCreated
- postCreated
以上两个函数，在执行created方法前后执行，切记这两个函数建议只做同步操作。关系如下
preMounted
postMounted 以上两个函数，在执行mounted方法前后执行，preMounted->mounted->postMounted三个函数是放在EventChain中执行的，所以需要通过context.resolve触发下一个方法。关系如下
preUpdated
postUpdated 以上两个函数，在执行upated方法前后执行，preUpdated->updated->postUpdated三个函数是放在EventChain中执行的，所以需要通过context.resolve触发下一个方法。关系如下
§ 2.2 自定义SystemFlow
步骤一：继承BaseFlow 步骤二：重写getName方法，该方法返回的名字和页面打开中的openType对应，例如 fox.router.open("/example/group",{'openType':'check'},'_system_roow')打开页面的时候，页面的UseFlow的父亲会动态的和CheckFlow绑定。 步骤三：重写需要的函数
§ 2.2.1 SystemFlow例子(checkFlow)
/**
* 复核流程
*/
export default class CheckFlow extends BaseFlow{
/**
* flow名称
* @type {string}
*/
static getName(){
return "check"
}
/**
* Vue对象创建，当数据加载前
*/
beforeCreate(session){
}
/**
* created前调用
* @param session
*/
preCreated(session){
}
/**
* Vue对象创建，数据加载后，更改数据不会触发updated函数
*/
created(session){
}
/**
* created后调用
* @param session
*/
postCreated(session){
}
/**
* 界面渲染前，更改数据不会触发updated函数
*/
beforeMount(session){
}
/**
* mounted前执行
* @param session
* @param context
*/
preMounted(session, context){
context.resolve()
}
/**
* 界面渲染后，更改数据会触发钩子函数
* @param session
* @param context
*/
mounted(session, context){
context.resolve()
}
/**
* mounted后执行
* @param session
* @param context
*/
postMounted(session, context){
//获取filter models
let filterModels = fox.bus.get("sys_global", "filterModels") || []
//获取data
let data = fox.bus.get("sys_global", this.$options.name, "data")
if(!data){
context.resolve()
return
}
let filter = (key)=>{
if(filterModels.indexOf(key)!=-1){
return false
}
return true
}
//还原数据
fox.custom.setResponseData(this, data, filter)
//获取root domain
let domain = getRootDomain(this)
//设置全局只读
domain.setOption("readonly", true)
//设置过滤model
domain.setOption("filter-models", filterModels)
context.resolve()
}
/**
* before update
* @param session
*/
beforeUpdate(session){
}
/**
* updated前执行
* @param session
* @param context
*/
preUpdated(session, context){
context.resolve()
}
/**
* 当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom
*/
updated(session, context){
context.resolve()
}
/**
* updated后执行
* @param session
* @param context
*/
postUpdated(session, context){
context.resolve()
}
/**
* 调用$destroy方法后，立即执行beforeDestroy
*/
beforeDestroy(session){
}
/**
* 组件的数据绑定、监听...去掉后只剩下dom空壳，这个时候，执行destroyed
*/
destroyed(session){
}
/**
* 暂存数据
*/
tempSave(session){
}
/**
* 恢复数据
*/
recover(session){
}
/**
* 设置检查条件
* @param context
*/
setCheckConditions(context){
context.resolve()
}
/**
* 提交前处理
* @param context
* @param checkResult
*/
preSubmit(context, checkResult){
context.resolve();
}
/**
* 提交处理(system scope)
* @param context
* @param args
*/
commit(context, ...args){
if(args.length>0){
Reflect.apply(context.resolve, this, args)
}else{
context.resolve();
}
}
/**
* 提交处理
* @param context
* @param args
*/
submit(context, ...args){
context.resolve();
}
/**
* 提交后处理
* @param context
* @param params
*/
postSubmit(context, ...args){
}
/**
* 提交取消处理
* @param context
* @param args
*/
cancelSubmit(context, ...args){
}
}