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;
})

AbFilter

agileBPM 特定的一些过滤器,可被用于一些常见的文本格式化,包括：日期格式化，时间差格式化，金额格式化

位置：/agilebpm-oa-ui/src/components/ab-base/ab-filter.js

AbDateFormat

日期格式化过滤器

  • 参数：
    • val: 时间日期
    • format: 时间格式化: “yyyy-MM-dd HH:mm:ss”
  • 用法：
    {{ data | ab_dateFormat('yyyy-MM') }}

AbTimeLag

时间差过滤器，支持展示几级设定

  • 参数：

    • difference: 时间差，毫秒
    • difference: level ：展示几级时间。比如1天23小时12分钟1秒 则为5级

  • 用法：
    如

    {{ data | ab_timeLag('5') }}

AbConvertCurrency

金额过滤器 ： 可以把数字转成 大写金额,如：2.1 会转化为 贰元壹角

  • 参数：

    • currencyDigits: 转化金额

  • 用法：

    {{ data | ab_convertCurrency }}

基础组件

按钮权限指令

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" 
		:data="selectedData" 
		url="/org/user/remove" 
		postKey="id" 
		:confimMsg="$t('page.org.confimDelUser')" 
		:afterFn="searchAndClearSelected">
{{$t('page.common.batchDel')}}</ab-action-btn>

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">
     <column type="selection" width="60" align="center"></column>
     <column title="名字" key="fullname" sort="fullname_" minWidth="100"></column>
     <column title="账号" key="account" minWidth="100"></column>
     <column title="邮箱" key="email" minWidth="160"></column>
     <column title="手机" key="mobile" minWidth="120"></column>
     <column title="性别" key="sex" width="80"></column>
     <column title="状态" key="status" width="100" val-text="{'0':'禁用','1':'启用'}" val-style="{'0':'error','1':'success'}"></column>
     <column title="创建时间" key="createTime" date-format="yyyy-MM-dd HH:mm" width="150"></column>
     <column title="操作" temp="action" fixed="right" width="120"></column>
     <template slot="action" scope="{row,index}">
     	<a :send-action="$t('page.common.del')" url="/org/user/remove?id={row.id}">{{$t('page.common.del')}}</a>
            <Divider type="vertical" />
        <router-link :to="{ name:'userManager_edit', params:row}">{{$t('page.common.edit')}}</router-link>
     </template>
</ab-grid>
  • 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>

ab-cust-dialog 自定义对话框组件

ab-cust-dialog 自定义对话框组件，用于弹窗数据选择、自定义条件查询，并将选择到的返回值填充至映射配置的表单中

在介入开发前建议可以先在表单页配置一下基础的对话框信息

然后查看源码模式，得到生成好的组件代码，再修改下对应参数得到自己想要的代码

图中例子代码如下：

<ab-cust-dialog class="ivu-btn ivu-btn-primary" dialog-key="userSelector" v-model="data.zdycxdhkBo" :param="{}" :dialog-setting="{&quot;multiple&quot;:true}" :init-param="{}" value-account="account" value-name="name" icon="ios-search" slot="append" @afok="dialogOk">用户查询</ab-cust-dialog>

位置：/agilebpm-oa-ui/src/components/ab-ab-cust-dialog/ab-cust-dialog.vue

  • ab-cust-dialog 入参：
    • dialogKey: 必填,对话框别名
    • v-model: 必填,对话框内容的赋值对象
    • value-xxx: 选填,定义对话框返回字段对v-model的属性的映射关系，例如配置了value-key=”key2”,value-name=”name2”，那么data的值会被赋值为{key2:xxxx,name2:xxxx}
    • dialog-setting: 选填,强行修改对话框的配置内容
    • param: 选填,查询参数,例如{xxx:data.xx,xx2:data.xxx} ,属性名需要对应对话框动态入参的别名
    • init-param: 参数初始化值
    • afok（vue端是ok）: 点击确定事件,例子中的代码:dialogOk : function(data){ alert(“自定义对话框：”+JSON.stringify(data))}

ab-cust-query 自定义查询指令

ab-cust-query 自定义查询，用于自动加载相关信息，并填充至表单。使用之前想配置相关的自定义对话框。

在介入开发前建议可以先在表单页配置一下基础的查询信息

然后查看源码模式，得到生成好的指令代码，再修改下对应参数得到自己想要的代码

图中例子代码如下：

<i-input v-model="data.zdycxdhkBo.id" placeholder="请输入单行文本" v-ab-permission:edit="permission.zdycxdhkBo.zdycxdhkTable.id" v-ab-validate="{}" desc="自定义查询对话框-主键" v-ab-cust-query="data.zdycxdhkBo" dialog-key="userSelector" query-desc="用户查询" :param="{'id_':data.zdycxdhkBo.id}" :init-param="{&quot;id_&quot;:&quot;$b&quot;}" query-ok="queryOk" value-account="account" value-name="name">​</i-input>

位置：/agilebpm-oa-ui/src/components/ab-ab-cust-dialog/ab-cust-query.js

  • ab-cust-query 入参：
    • v-ab-cust-query: 返回数据的对象，类似自定义对话框的返回逻辑，对象可以json或数组，赋值逻辑会有所变化
    • dialog-key: 对话框别名
    • param: 自定义对话框的过滤条件参数,属性名需要对应对话框动态入参的别名
    • init-param: 如果没有传入参数则默认使用 初始化入参，一般用于定义 第一次默认查询（当值为$b时，是一个必填的标识（为空时不参与/触发查询））
    • value-key=”k”: 是对话框返回的字段 “k” 则为 “userList[x].key” 如果为对象则为 userList.key
    • noFirstLoad: 第一次加载页面时不加载查询
    • query-ok（移动端和vue端需要声明是事件@query-ok）: 回调函数，例子中的代码：queryOk :function(data){alert(“自定义查询：”+JSON.stringify(data))}

ab-details 自定义表单详情弹窗组件

点击后会向后台发起一个请求，并返回一个详情页面的弹窗
位置：/agilebpm-ui/assets/vue/components/form/abDetails.vue

  • ab-details 入参：
    • url：详情的请求地址
    • param：请求参数
    • text：有值时，可自定字段css格式，若未定义，则使用默认的按钮形式

  • vue表单用法
    在线表单中使用:该字段一般可为只读，同时 input改为div，更改为只读 disabled=”disabled”

    修改前

<td colspan="6">
    <input type="text" class=" form-control" v-model="data.clcg.applicant" v-ab-permission="permission.clcg.proPurchase.applicant" desc="材料采购-申请人" v-ab-validate="{&quot;maxlength&quot;:255}">
</td>

增加组件后

<td colspan="6"> 
	<div type="text" class=" form-control" v-model="data.clcg.applicant" v-ab-permission="permission.clcg.proPurchase.applicant" desc="材料采购-申请人" v-ab-validate="{&quot;maxlength&quot;:255}" disabled="disabled"> 
        <ab-details url="/org/user/userDetail.html" param="id=1">
          {{data.clcg.applicant}}
        </ab-details>
	</div>
</td>
  • iview表单用法
    iview表单使用相对vue表单使用更为复杂一点，因为oa端没有设计开发平台使用的弹窗，如果跳转的详情页面，是主框架之内的页面会带有框架元素，所以建议先写一个框架外的该页面， OAIview前端开发指导介绍。
    在使用前笔者先单独写了一个框架外的用户详情页面userAbDetails.vue。

iview在线表单使用： 字段设置为只读，将i-input标签改为div,将span内部标签的v-show属性删除
修改前

<td colspan="6"> 
    <i-input v-model="data.xhjl.wirteMan" v-ab-permission:edit="permission.xhjl.proNeed.wirteMan" desc="材料消耗记录-记录员" v-ab-validate="{&quot;maxlength&quot;:255}">
    </i-input>
    <span v-show="permission.xhjl.proNeed.wirteMan=='r'" class="readonly-text">{{ data.xhjl.wirteMan }}
    </span> 
</td>

增加组件后

<td colspan="6"> <div v-model="data.xhjl.wirteMan" v-ab-permission:edit="r" desc="材料消耗记录-记录员" v-ab-validate="{&quot;maxlength&quot;:255}"></div>
        <span class="readonly-text">
          <ab-details :text="data.xhjl.wirteMan" url="/user/details/" param="1">
            {{data.xhjl.wirteMan}}
          </ab-details>
        </span>
    </td>
</td>

ab-details-user 自定义表单用户详情弹窗组件

点击后会向后台发起一个请求，并返回一个用户详情页面的弹窗，在ab-details上细化出了一个组件，不再需要url参数，提供用户id即可，专门提供用户详情弹窗使用，更加简便.
位置：/agilebpm-ui/assets/vue/components/form/abDetailsUser.vue

  • ab-details-user 入参：
    • param：用户id
    • text：有值时，可自定字段css格式，若未定义，则使用默认的按钮形式
  • vue表单用法
    在线表单中使用与ab-details相同:与该字段设置为只读，同时input改未div
<td colspan="6"> 
    <div type="text" class=" form-control" v-model="data.clcg.applicant" v-ab-permission="permission.clcg.proPurchase.applicant" desc="材料采购-申请人" v-ab-validate="{&quot;maxlength&quot;:255}" disabled="disabled"> 
      <ab-details-user param="1">
         {{data.clcg.applicant}}
      </ab-details-user>
    </div>
</td>
  • iview表单用法
    iview在线表单使用与ab-details相同：字段设置为可读，将i-input标签改为div,将span内部标签的v-show属性删除。
<td colspan="6"> <div v-model="data.xhjl.wirteMan" v-ab-permission:edit="r" desc="材料消耗记录-记录员" v-ab-validate="{&quot;maxlength&quot;:255}"></div>
    <span class="readonly-text">
      <ab-details-user param="1">
         {{data.xhjl.wirteMan}}
      </ab-details-user>
    </span> 
 </td>

表单组件

AgileBPM OA前端基于Iview-pro 开发，除了iview自身丰富的组件外还支持以下组件：

  • 数据字段
  • 动态下拉框
  • 动态权限
  • 流水号
  • 日期控件
  • 日期计算
  • 流程意见组件
  • 自定义对话框
  • CheckBox 数据逗号分隔形式
  • Markdown 编辑器

  • 富文本编辑器

  • 树选择

  • TagSelect 标签选择器
  • City 城市选择器
  • Calendar 日历
  • Ellipsis 文本自动省略号
  • TablePaste 粘贴表格数据
  • AvatarList 头像列表
  • CountDown 倒计时
  • CountUp 数字动画
  • Numeral 数字格式化
  • NumberInfo 数据文本
  • Trend 趋势标记
  • WordCount 字数统计

这些控件大部分支持在线配置，这里暂时不再提供文档，后续有时间会逐一梳理的