AbHttpUtil
HTTP请求工具类,会判断是否登录,可以添加全局请求拦截器。建议与 AbTools.getResultData
,AbTools.getResultMsg
配合使用
httpUtil全局注册到了 vue 实例中,您可以直接通过this.abHttpUtil
访问
位置:/agilebpm-oa-ui/src/components/ab-base/ab-http-util.js
HttpUtil.get
get请求
- 参数:
- url: 请求地址
- 返回值:
返回 Promise,可进一步操作
- 用法:
如this.abHttpUtil.get('url').then((data)=>{ })
HttpUtil.post
会以application/json
形式post到后台
- 参数:
- url: 请求地址
- data: 请求JSON
- 返回值:
返回 Promise,可进一步操作
- 用法:
如this.abHttpUtil.post('url',{JSON}).then((data)=>{ })
HttpUtil.postForm
会以application/x-www-form-urlencoded
形式post到后台
- 参数:
- url: 请求地址
- data: 请求入参
- 返回值:
返回 Promise,可进一步操作
- 用法:
如this.abHttpUtil.post('url',{name:xxx,id:xxx}).then((data)=>{ })
AbTools
常用工具类 全局注册到了 vue 实例中,您可以直接通过this.abTools
访问
位置:/agilebpm-oa-ui/src/components/ab-base/ab-tools.js
getResultData
与 abHttpUtil配合使用,对请求返回的统一规范结果进行判断,并获取结果Data
标准数据结构如下
//成功 返回data |
- 参数:(defer, fn, msgType, errorFn,isFastJson)
- defer: 请求返回的Promise对象
- fn: 成功的回调方法,需要接收参数 result data
- msgType:异常下消息提醒类型,
alert/toast
,默认alert - errorFn:异常情况的回调
- isRetainCycleJSON:是否存在循环引用,若是会进行处理,否则不会处理JSON
- 返回值: 无
- 用法:
// 如获取后台用户,返回JSON {code: "200", isOk: true, data: {name:xx}} |
getResultMsg
与 abHttpUtil配合使用,对请求返回的统一规范结果进行判断给与用户相应的提示
- 参数:(defer, fn, errorFn,msgType)
- defer: 请求返回的Promise对象
- fn: 成功的回调方法,需要接收参数 result data
- msgType:异常下消息提醒类型,
alert/toast
,默认alert - errorFn:异常情况的回调
- isRetainCycleJSON:是否存在循环引用,若是会进行处理,否则不会处理JSON
- 用法:
// 如登录接口,返回JSON {code: "200", isOk: true, msg: "登录成功!"} |
clone克隆JSON
- 用法
const newJSON = this.abTools.clone(JSON)
getEnum 获取枚举
- 参数:(path,listMode)
- path: 枚举的Class路径
- listMode: 是否转成列表模式,默认是false返回Map,但是无序。
- 用法
this.abTools.getEnum('com.dstz.sys.persistence.enums.FieldControlType').then((data)=>{ |
getCurrentTime服务器时间
- 参数:(format)
- format: 时间格式化
- 用法
this.abTools.getCurrentTime('yyyy-MM-dd HH:mm:ss').then((time)=>{ |
基础组件
按钮权限指令
v-ab-btn-permission
用于按钮权限前端鉴权
位置:/agilebpm-oa-ui/src/components/ab-base/ab-btn-rights.js
- 参数:
- resourceCode: 菜单按钮的code
- 用法
如切换设计开发平台的按钮,在后台配置菜单按钮后,直接将指令配置在需要控制的元素上即可,develop_platform 即菜单code
<i-link :to="apiBaseURL" v-ab-btn-rights:develop_platform >{{$t('menu.develop_platform')}}</i-link> |
ab-load 数据加载
通过一个URL获取JSON数据并赋值给当前context
位置:/agilebpm-oa-ui/src/components/ab-base/ab-load.vue
- 参数:
- url: 后台服务器地址
- value: 赋值目标对象,即对
v-model
赋值 - method:请求方式 默认
postForm
可以改为post
- params: 请求入参,若为空会默认取 路由的参数(
this.$route.params
)作为请求参数
- 用法
如:组件会携带路由中参数向后台发起请求,返回数据会自动赋值给 user对象
<ab-load url="/org/user/get" v-model="user"></ab-load> |
ab-save 保存组件
保存组件,会展示 保存,取消两个按钮,一般建议放置页面的顶部或者底部
位置:/agilebpm-oa-ui/src/components/ab-base/ab-save.vue
- 参数:
- url: 保存数据请求的url
- model: 需要保存的数据
- method:请求方式 默认
post
可以改为postForm
- hideBackBtn: 是否隐藏 back 按钮
- savePermission: 是否有保存权限,默认
true
- backRouter: 成功后跳转页,默认前一页
- formRef: 保存前校验的表单。如果为空则不校验
- 用法
如用户编辑页保存
<ab-save slot="title" url="/org/user/save" :model="data" backRouter="userManager" form-ref="userForm"></ab-save> |
ab-action-btn 请求按钮
点击该按钮后会向后台发起一个请求,并返回结果,如执行删除动作、状态变更动作等
位置:/agilebpm-oa-ui/src/components/ab-base/ab-action-btn.vue
- 参数:
- url: 提交数据请求的url
- data: 提交的数据
- method:请求方式 默认
postForm
可以改为post
- confimMsg: 提交前询问内容
- icon: icon
- postKey: 如果data是复杂数据,只希望提交其中一个属性时可以设置该项。如果data是数组,则会逗号分隔提交后台
- afterFn:
function
,成功后的后置动作
- 用法
如用户列表页批量删除按钮,点击批量删除时会将selectData
数组中的id
作为参数提交到后台,提交前会询问是否确认删除用户。
<ab-action-btn icon="md-trash" v-show="selectedData.length" |
ab-grid 列表数据组件
ab-grid 对iview table做了封装,以更加简单直观的形式初始化列表页
位置:/agilebpm-oa-ui/src/components/ab-grid/
- ab-grid 入参:
- url:列表数据请求地址
- height:grid组件的高度
- searchParam:搜索入参
column 入参:column参数均为iview table原生column参数
用法
如用户列表页
<ab-grid url="/org/user/listJson" ref="abGrid" v-model="selectedData" :searchParam="searchParam"> |
- slot 扩展自定义渲染 column
如案例中的操作列,操作列需要设置指定模板 temp="action"
,他会使用 slot="action"
的模板去渲染当前行。
支持多个column自定义渲染
- val-text : 会将数据进行格式化,并通过
show-style="Tag/Badge"
配置的 形式展示,默认为Tag
,
- val-style :val-text 展示的样式,可配项:
error
、success
、primary
、warning
- date-format: 日期格式,入参为格式化如:
yyyy-MM-dd HH:mm
- send-action: 向后台发起一个请求,需要提供url地址 ,如:
<a :send-action="删除" url="/org/user/remove?id={row.id}">删除</a>
表单组件
AgileBPM OA前端基于Iview-pro 开发,除了iview自身丰富的组件外还支持以下组件:
- 数据字段
- 动态下拉框
- 动态权限
- 流水号
- 日期控件
- 日期计算
- 流程意见组件
- 自定义对话框
- CheckBox 数据逗号分隔形式
- Markdown 编辑器
富文本编辑器
树选择
- TagSelect 标签选择器
- City 城市选择器
- Calendar 日历
- Ellipsis 文本自动省略号
- TablePaste 粘贴表格数据
- AvatarList 头像列表
- CountDown 倒计时
- CountUp 数字动画
- Numeral 数字格式化
- NumberInfo 数据文本
- Trend 趋势标记
- WordCount 字数统计
这些控件大部分支持在线配置,这里暂时不再提供文档,后续有时间会逐一梳理的