勾股OA5.0前端组件oaPicker调用方法集(待发布)
oaPicker主要是勾股系统前端数据选择的重要组件,掌握了oaPicker组件的使用,可以大大提高开发者开发功能的效率,只需要开发好数据接口,前端选择,单选、多选无压力。
下面是内置的方法:
一、快捷选择员工数据
支持单选,多选员工操作,最简单的是html元素的class
绑定picker-admin
即可完成,支持快捷绑定,自定义绑定操作。
1、快捷单选员工数据,html元素的class
绑定picker-admin
即可默认开启单选员工操作。
<input type="text" name="uname" autocomplete="off" readonly lay-verify="required" lay-reqText="请选择员工" placeholder="请选择" class="layui-input picker-admin">
<input type="hidden" name="uid">
2、快捷多选员工数据,html元素的class
绑定picker-admin
,再添加data-type="2"
即可开启多选员工操作。
<input type="text" name="unames" autocomplete="off" readonly lay-verify="required" lay-reqText="请选择员工" placeholder="请选择" class="layui-input picker-admin" data-type="2">
<input type="hidden" name="uids">
3、传参形式自定义选择员工数据
<input type="text" name="unames" autocomplete="off" readonly lay-verify="required" lay-reqText="请选择员工" placeholder="请选择" class="layui-input picker-diy">
<input type="hidden" name="uids">
//选择员工弹窗
$('body').on('click','.picker-diy',function () {
let that = $(this);
let ids=that.next().val()+'',names = that.val()+'';
obj.employeeInit({
ids:ids,
names:names,
type:1,//1是单选,2是多选
callback:function(data){
//这里是选择后的回调方法,可以根据具体需求自定义写哦
let select_id=[],select_name=[];
for(var a=0; a<data.length;a++){
select_id.push(data[a].id);
select_name.push(data[a].name);
}
that.val(select_name.join(','));
that.next().val(select_id.join(','));
}
});
});
二、快捷选择OA其他模块的数据
支持单选,多选操作,最简单的是html元素的class
绑定picker-oa
,和模块标识即可完成,支持快捷绑定,自定义绑定操作。
1、快捷单选客户操作
<input type="text" name="customer_name" autocomplete="off" readonly placeholder="请选择" class="layui-input picker-oa" data-types="customer">
<input type="hidden" name="customer_id">
2、快捷多选客户操作
<input type="text" name="customer_names" autocomplete="off" readonly placeholder="请选择" class="layui-input picker-oa" data-types="customer" data-type="2">
<input type="hidden" name="customer_ids">
附注:内置的快捷调用数据
格式:
class="picker-admin" data-types="department" data-type="1" data-map="{admin_id:'1'}"
名称 | 标识(types) | 单多选(type) | 搜索条件(map) |
---|---|---|---|
调用部门数据 | department | 1单选,2多选 | 一般不用操作 |
调用岗位数据 | position | 1单选,2多选 | 一般不用操作 |
调用服务类型 | services | 1单选,2多选 | 一般不用操作 |
调用固定资产 | property | 1单选,2多选 | 一般不用操作 |
调用调用客户 | customer | 1单选,2多选 | 一般不用操作 |
调用合同数据 | contract | 1单选,2多选 | 一般不用操作 |
调用项目数据 | project | 1单选,2多选 | 一般不用操作 |
调用任务数据 | task | 1单选,2多选 | 一般不用操作 |
3、传参形式自定义选择数据
<input type="text" name="customer_names" autocomplete="off" readonly placeholder="请选择" class="layui-input picker-diy">
<input type="hidden" name="customer_ids">
$('body').on('click','.picker-diy',function () {
let that = $(this),ids = [],titles=[],map = {};
let callback = function(data){
for ( var i = 0; i <data.length; i++){
ids.push(data[i].id);
titles.push(data[i].title);
}
that.val(titles.join(','));
that.next().val(ids.join(','));
}
let opts={
"title":"选择XXX",
"url": "",
"ids":"",
"titles":"",
"area": ['600px', '580px'],
"cols":[{field: 'id',width: 80,title:'序号',align:'center'},{field:'title',title:'名称'}]
}
obj.picker(opts,1,callback,map);//单选
obj.picker(opts,2,callback,map);//多选
});