解析approvalFlow——仿钉钉后台审批流程
⽂章⽬录
1. approval介绍
1.1 功能应⽤
approvalFlwo是⼀款关于⼯作流应⽤的开源免费项⽬，⽤户可以通过⽹页在线拖拽各个组件（输⼊框、选择框、布局容器、滑块20中常见的组件），⾃⼰布局、设计⼀个表单的样式，并配套着有相应的组件解析及 数据回显解析规则。
对⽐钉钉请假流程，请假需要的⼀个基本条件：
1、请假理由
2、向谁请假（审批⼈）
3、让谁看到（抄送⼈）
4、如果请假⼀天之内，审批⼈必须是xxx；请假⼀周，审批⼈必须是xxx
作者说明的功能简介：
1.表单配置(form-generator)
拖拽表单，⽣成布局页⾯
配置拖拽组件属性，定制组件形态
⽣成JSON数据并⽣成预览页⾯
2.流程节点配置(仿钉钉界⾯)
创建审批流程(发起⼈，审批⼈，条件节点，抄送⼈)
配置节点详细数据，包括条件节点表达式及期望值等
配置节点对表单得权限（⽬前并未在预览页⾯中做控制）
必填节点校验
1.2 项⽬地址
2. jsxPreview.vue应⽤
2.1 页⾯结构
jsxPreview的作⽤为：表单样式的回显，及数据回显的解析（案例上没有使⽤，但是我们可以去拓展这个功能，作者提供了表单填写完毕之后json数据的⽣成及解析），主要的功能拓展都是基于本页⾯来现实的。
<script>
const xxx ={
....
};
function xxx(){
....
};
export default{
....
}
</script>
<style>
....
</style>
可以发现这个单页中没有⽤到<template></template>，全部是根据
var confGlobal = this.$route.params.formData || mockData.formData 获取到json数据后，通过解析动态⽣成的。
问题⼀： 如何在export default外层function中调⽤methods⾥的⽅法？
可以把⽅法定义在window中以供全局使⽤
window.initialProcess =this.initialProcess;
},
2.2 表单解析
const layouts ={
colFormItem:function(）{}，
rowFormItem:function(）{}
}
layouts定义了colFormItem、rowFormItem两种不同属性的表单解析⽅式。
查怎么使⽤的？
{ Array.isArray(conf.children)&& conf.children.map((el)=> layouts[el.layout](el, h, ctx))}
//--------------------------------------------------
return layouts[c.layout](c, h,this, initData);
根据json数据中定义的不同字段代⼊layouts从⽽执⾏colFormItem/rowFormItem的⽅法。
3. 功能拓展
3.1 数据回显
安卓在线解析json分析可得到layouts是解析json数据然后渲染到页⾯上的。
buildData(ctx, conf.defaultValue, conf.vModel);
//conf.defaultValue，数据中默认的值
//conf.vModel 同v-model，绑定的值
即可以判断是否存在要回显的数据，如果存在的话，就⽤要被回显的数据。不存在的话，就默认不是数据回显
if(defData){
!_isMounted &&buildData(ctx, defData, conf.vModel);
}else{
!_isMounted &&buildData(ctx, conf.defaultValue, conf.vModel);
}
在调⽤layouts的时候，把回显的数据穿过来即可
3.2 拓展样式
render(h){}作为⼀个中⼼整合的存在，它return出来html代码
return<div class='preview-container only-read' style={'width:'+ainerWidth +'%;'}>
<el-row class='details-from-date'
gutter={fGlobal.gutter}
style='padding: 2rem 2rem 0;'
>
{this.buildForm(h)}
</el-row>
<div class='width-slider' style='display:none;'>
<el-slider vModel={ainerWidth} min={100} max={100}></el-slider>
</div>
{this.buildDrawer(h)}
}
同样可以在这⼉定义相应的html，使页⾯渲染出来
3.3必填字段完成后执⾏某⽅法
layouts中定义着form数据变化的检查功能，
formData={fGlobal.formModel]}
conf={conf}
value={fGlobal.formModel][conf.vModel]}
ref={wType ==='table'? conf.vModel : undefined}
onInput={handleInput}
/>
handleInput就是表单触发的⽅法
可以查看render.js中
function vModel( self, dataObject, value ){
// dataObject.props.value = value
self.$emit('input', val )
}
// 因为有些组件的v-model绑定的事件是change 所以这⾥也得监听
self.$emit('input', val )
}
}
每次输⼊或者改变都会触发⼀次，⽐如当在输⼊框中输⼊⼀串值得时候
每次输⼊的值改变触发得到的值
11
1212
123123
1212
失去焦点失去焦点
–12
这⼉的思路是：判断最后⼀次和上⼀次的值是否相同，如有更好的思路也欢迎留⾔
// 全局定义两个变量
var aa =[];
var num =0;
const layouts ={
...
colFormItem:function(){
const handleInput= val =>{
if(num ===0){
aa[num]= val;
num =1;
}else{
aa[num]= val;
num =0;
}
// console.log(aa);
if(val !== undefined && aa[0]=== aa[1]&& quired){
window.initialProcess();
}
}
}
...
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论