OA前端组件、指令 文档完善中..

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
{code: "200", isOk: true, data: {name:xx}}
//失败 提示登录超时
{code: "401", isOk: false, msg: "登录访问超时！"}
{code: "500", isOk: false, msg: "系统异常！"}
  • 参数：(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}}
const defer = this.abHttpUtil.postForm('org/getUserInfo',{id:1});
this.abTools.getResultData(defer,(data){
	this.user = data;
})

getResultMsg

与 abHttpUtil配合使用，对请求返回的统一规范结果进行判断给与用户相应的提示

  • 参数：(defer, fn, errorFn,msgType)
    • defer: 请求返回的Promise对象
    • fn: 成功的回调方法，需要接收参数 result data
    • msgType：异常下消息提醒类型, alert/toast，默认alert
    • errorFn：异常情况的回调
    • isRetainCycleJSON:是否存在循环引用，若是会进行处理，否则不会处理JSON
  • 用法：
// 如登录接口，返回JSON {code: "200", isOk: true, msg: "登录成功！"}
const defer = this.abHttpUtil.post('url',{name:xxx,psw:xxx});
this.abTools.getResultData(defer,(){
	//提示登录成功，然后跳转至首页
	this.$router.replace('/home');
})

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)=>{
	this.ctrlType = data;
})

getCurrentTime服务器时间

  • 参数：(format)
    • format: 时间格式化
  • 用法 
this.abTools.getCurrentTime('yyyy-MM-dd HH:mm:ss').then((time)=>{
	this.time = 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: 保存前校验的表单。如果为