Files
OA/public/static/assets/gougu/module/oaPicker.js
T
2026-07-23 09:40:36 +08:00

539 lines
18 KiB
JavaScript

layui.define(['tool'], function (exports) {
const layer = layui.layer, tool = layui.tool,form=layui.form, table=layui.table,tree = layui.tree;
const dataPicker ={
'department':{
title:'选择部门',
url:'/api/index/get_department',
area: ['400px', '524px'],
searchbar:'',
page:false,
cols:[{field:'id',width:90,title:'序号',align:'center'},{field:'title',title:'部门名称'}]
},
'position':{
title:'选择岗位',
url:'/api/index/get_position',
area: ['400px', '524px'],
searchbar:'',
page:false,
cols:[{field:'id',width:90,title:'序号',align:'center'},{field:'title',title:'岗位名称'}]
},
'services':{
title:'选择服务类型',
url:'/api/index/get_services',
area: ['400px', '524px'],
searchbar:'',
page:false,
cols:[{field:'id',width:90,title:'序号',align:'center'},{field:'title',title:'服务名称'},{field:'price',title:'服务单价'}]
},
'template':{
title:'选择消息模板',
url:'/api/index/get_template',
area: ['600px', '568px'],
cols:[{field:'id',width:90,title:'序号',align:'center'},{field:'title',title:'消息模板名称'}]
},
'workcate':{
title:'选择工作类型',
url:'/api/index/get_work_cate',
area: ['400px', '524px'],
searchbar:'',
page:false,
cols:[{field:'id',width:90,title:'序号',align:'center'},{field:'title',title:'工作类型名称'}]
},
'property':{
title:'选择固定资产',
url:'/adm/api/get_property',
cols:[{field:'id',width:90,title:'序号',align:'center'},{field:'title',title:'资产名称'}]
},
'car':{
title:'选择车辆信息',
url:'/adm/api/get_car',
cols:[{field:'id',width:90,title:'序号',align:'center'},{field:'title',title:'车辆名称'},{field:'name',width:100,title:'车牌号码',align:'center'}]
},
'room':{
title:'选择会议室',
url:'/adm/api/get_meeting_room',
cols:[{field:'id',width:90,title:'序号',align:'center'},{field:'title',title:'会议室名称'},{field:'num',width:100,title:'可容纳人数',align:'center'}]
},
'customer':{
title:'选择客户',
url:'/customer/api/get_customer',
add:'/customer/customer/add',
cols:[{field:'id',width:90,title:'序号',align:'center'},{field:'name',title:'客户名称'}]
},
'supplier':{
title:'选择供应商',
url:'/contract/api/get_supplier',
add:'/contract/supplier/add',
cols:[{field:'id',width:90,title:'序号',align:'center'},{field:'title',title:'供应商名称'}]
},
'contract':{
title:'选择销售合同',
url:'/contract/api/get_contract',
area: ['800px', '568px'],
cols:[{ field: 'code',width:160,title:'合同编号',align:'center'},{field:'name',title:'合同名称'},{ field:'customer',title:'关联客户',width: 240}]
},
'product':{
title:'选择产品',
url:'/contract/api/get_product',
cols:[{field:'id',width:90,title:'序号',align:'center'},{field:'title',title:'产品名称'},{field:'sale_price',title:'销售单价',width: 120,align:'center'}]
},
'purchase':{
title:'选择采购合同',
url:'/contract/api/get_purchase',
area: ['800px', '568px'],
cols:[{ field: 'code',width:160,title:'合同编号',align:'center'},{field:'name',title:'合同名称'},{ field:'supplier',title:'关联供应商',width: 240}]
},
'purchased':{
title:'选择采购物品',
url:'/contract/api/get_purchased',
cols:[{field:'id',width:90,title:'序号',align:'center'},{field:'title',title:'采购物品名称'},{field:'purchase_price',title:'采购单价',width: 120,align:'center'}]
},
'project':{
title:'选择项目',
url:'/project/api/get_project',
cols:[{field:'id',width:90,title:'序号',align:'center'},{field:'title',title:'项目名称'}]
},
'task':{
title:'选择任务',
url:'/project/api/get_task',
area: ['800px', '568px'],
cols:[{field:'id',width:90,title:'序号',align:'center'},{ field:'title',title:'任务主题'},{field:'project',width:240,title:'关联项目'}]
},
'loan':{
title:'选择借支冲抵',
url:'/finance/api/get_loan',
area: ['800px', '568px'],
cols:[{field: 'id',width: 80,title:'序号',align:'center'},{field:'cost',title:'借款金额(元)',width: 100},{field:'un_balance_cost',title:'未冲账金额(元)',width: 110},{field:'balance_cost',title:'已冲账金额(元)',width: 110},{field:'title',title:'借支主题',minWidth:200}]
}
}
let select_ids=[];select_names=[];select_array=[];
const obj = {
employeeRender:function(){
var me=this,letterTem='';
for(var i=0;i<26;i++){
letterTem+='<span class="layui-letter-span" data-code="'+String.fromCharCode(97+i)+'">'+String.fromCharCode(65+i)+'</span>';
}
var tpl='<div style="width:210px; height:388px; border-right:1px solid #eee; overflow-x: hidden; overflow-y: auto; float:left;">\
<div id="employeeDepament" style="padding:6px 0;"></div>\
</div>\
<div style="width:588px; height:388px; user-select:none; overflow-x: hidden; overflow-y: auto; float:left;">\
<div style="padding:12px 10px 0;"><div style="color:#999; text-align:center;">⇐ 点击左边部门筛选员工,或者点击下面字母筛选</div><div id="letterBar" style="color:#999; text-align:center;">'+letterTem+'</div></div>\
<div id="employee" style="padding:6px 12px"></div>\
<div style="padding:10px 15px; border-top:1px solid #eee;;"><strong>已选择</strong><span class="layui-tags-all">全选</span></div>\
<div id="selectTags" style="padding:10px 15px;">'+me.employeeSelect(0)+'</div>\
</div>';
return tpl;
},
employeeSelect:function(t){
var me=this,select_tags='';
if(me.settings.type == 0){
select_tags+='<span style="color:#1E9FFF">'+me.settings.names+'</span>';
}
else{
select_ids=[];
select_names=[];
for(var a=0;a<select_array.length;a++){
if(me.settings.fixedid==select_array[a].id && me.settings.fixedid!=0){
select_tags+='<span class="layui-tags-span">'+select_array[a].name+'</span>';
}
else{
select_tags+='<span class="layui-tags-span">'+select_array[a].name+'<i data-id="'+select_array[a].id+'" class="layui-icon layui-tags-close">ဆ</i></span>';
}
if(t==1){
$('#employee').find('[data-id="'+select_array[a].id+'"]').addClass('on');
}
select_ids.push(parseInt(select_array[a].id));
select_names.push(select_array[a].name);
}
}
//console.log(select_array);
return select_tags;
},
employeeInit: function (options) {
const opts={
"title":"选择员工",
"department_url": "/api/index/get_department_tree",
"employee_url": "/api/index/get_employee",
"type":1,//1单人,2多人
"fixedid":0,
"ids":"",
"names":"",
"ajax_data":[],
"callback": function(){}
};
this.settings = $.extend({}, opts, options);
var me=this;
select_ids=[];
select_names=[];
select_array=[];
if(me.settings.ids!='' && me.settings.names!=''){
select_ids=me.settings.ids.split(',');
select_names=me.settings.names.split(',');
//select_ids.sort((a, b) => a - b);
for(var m=0;m<select_ids.length;m++){
select_array.push({id:select_ids[m],name:select_names[m]});
}
}
$(parent.$('.express-close')).addClass('parent-colse');
layer.open({
type:1,
title:me.settings.title,
area:['800px','500px'],
resize:false,
content:me.employeeRender(),
end: function(){
$(parent.$('.express-close')).removeClass('parent-colse');
},
success:function(obj,idx){
var dataList=[],letterBar=$('#letterBar'),employee = $('#employee'),selectTags = $('#selectTags');
$.ajax({
url:me.settings.department_url,
type:'get',
success:function(res){
//仅节点左侧图标控制收缩
tree.render({
elem: '#employeeDepament',
data: res.trees,
onlyIconControl: true, //是否仅允许节点左侧图标控制展开收缩
click: function(obj){
var tagsItem='<div style="color:#999; text-align:center;">暂无员工</div>';
$("#employeeDepament").find('.layui-tree-main').removeClass('on');
$(obj.elem).find('.layui-tree-main').eq(0).addClass('on');
letterBar.find('span').removeClass('on');
$.ajax({
url:me.settings.employee_url,
type:'get',
data:{did:obj.data.id},
success:function(res){
me.ajax_data = res.data;
dataList=me.ajax_data;
if(dataList.length>1 && me.settings.type == 2){
$('.layui-tags-all').show();
}
else{
$('.layui-tags-all').hide();
}
if(dataList.length>0){
tagsItem='';
for(var i=0; i<dataList.length; i++){
if(select_ids.indexOf(dataList[i].id) == -1){
tagsItem+='<span class="layui-tags-span" data-idx="'+i+'" data-id="'+dataList[i].id+'">'+dataList[i].name+'</span>';
}
else{
tagsItem+='<span class="layui-tags-span on" data-idx="'+i+'" data-id="'+dataList[i].id+'">'+dataList[i].name+'</span>';
}
}
}
employee.html(tagsItem);
}
})
}
});
letterBar.on("click" ,'span',function(){
var code=$(this).data('code');
$(this).addClass('on').siblings().removeClass('on');
$.ajax({
url:me.settings.employee_url,
type:'get',
data:{id:1},
success:function(res){
me.ajax_data = res.data;
var letterData=[],tagsItem='<div style="color:#999; text-align:center;">暂无员工</div>';;
if(me.ajax_data.length>0){
var tagsItemCode='';
for(var i=0; i<me.ajax_data.length; i++){
if(me.ajax_data[i].username.slice(0,1)==code){
if(select_ids.indexOf(me.ajax_data[i].id) == -1){
tagsItemCode+='<span class="layui-tags-span" data-idx="'+i+'" data-id="'+me.ajax_data[i].id+'">'+me.ajax_data[i].name+'</span>';
}
else{
tagsItemCode+='<span class="layui-tags-span on" data-idx="'+i+'" data-id="'+me.ajax_data[i].id+'">'+me.ajax_data[i].name+'</span>';
}
letterData.push(me.ajax_data[i]);
}
}
dataList=letterData;
if(dataList.length>2 && me.settings.type == 2){
$('.layui-tags-all').show();
}
else{
$('.layui-tags-all').hide();
}
if(tagsItemCode!=''){
tagsItem = tagsItemCode;
}
}
employee.html(tagsItem);
}
})
});
}
})
if(me.settings.type == 2){
$('.layui-tags-all').on('click',function(){
for(var a=0; a<dataList.length;a++){
if(select_ids.indexOf(dataList[a]['id']) == -1){
select_array.push(dataList[a]);
}
}
selectTags.html(me.employeeSelect(1));
});
}
employee.on('click','.layui-tags-span',function(){
let item_idx=$(this).data('idx');
let select_item = me.ajax_data[item_idx];
if(me.settings.type == 1){
me.settings.callback([select_item]);
layer.close(idx);
}
else{
if(select_ids.indexOf(select_item['id']) == -1){
select_array.push(select_item);
selectTags.html(me.employeeSelect(1));
}
}
});
selectTags.on('click','.layui-tags-close',function(){
let id=$(this).data('id');
let new_slected=[];
$('#employee').find('[data-id="'+id+'"]').removeClass('on');
for(var i=0;i<select_array.length;i++){
if(select_array[i].id!=id){
new_slected.push(select_array[i]);
}
}
select_array=new_slected;
selectTags.html(me.employeeSelect(1));
});
if(me.settings.type == 1){
$('#layui-layer'+idx).find('.layui-layer-btn0').hide();
}
},
btn: ['确定添加', '清空已选'],
btnAlign:'c',
btn1: function(idx){
me.settings.callback(select_array);
layer.close(idx);
},
btn2: function(idx){
let canceldata= {department:"",did:0,id:0,mobile:0,name:"",nickname:"",position_id:0,sex:0,status:0,thumb:"",username:""};
me.settings.callback([canceldata]);
layer.close(idx);
}
})
},
picker:function(types,type,callback,map){
let pickerIndex = new Date().getTime();
let pickerTable,options;
const opts={
"title":"选择",
"url": "",
"ids":"",
"titles":"",
"where":map,
"area": ['600px', '568px'],
"cols":[{field: 'id',width: 80,title:'序号',align:'center'},{field:'title',title:'名称'}],
"searchbar":'<form class="layui-form pb-2"><div class="layui-input-inline" style="width:420px; margin-right:5px;"><input type="text" name="keywords" placeholder="请输入关键字" class="layui-input" autocomplete="off" /></div><button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="picker">提交搜索</button><button type="reset" class="layui-btn layui-btn-reset" lay-filter="picker-reset">清空</button></form>',
"page":true,
"type":type,//1单选择,2多选
"btnno":true,
"add": "",//新增url
"callback": callback
};
if(Object.prototype.toString.call(types) === '[object Object]'){
options = types;
}
else{
options = dataPicker[types];
}
let settings = $.extend({},opts,options);
//console.log(settings);
let btn = ['确定选择'];
if(settings.btnno==true){
btn = ['确定选择','清空已选'];
}
if(settings.add!=''){
btn = ['确定选择','清空已选','新增'];
}
$(parent.$('.express-close')).addClass('parent-colse');
layer.open({
title: settings.title,
area: settings.area,
type: 1,
skin: 'gougu-picker',
content: '<div class="picker-table" id="pickerBox'+pickerIndex+'">'+settings.searchbar+'<div id="pickerTable'+pickerIndex+'"></div></div>',
end: function(){
$(parent.$('.express-close')).removeClass('parent-colse');
},
success: function () {
let cols=[];
if(settings.type==1){
cols = [{type: 'radio', title: '选择'}, ...settings.cols];
}
if(settings.type==2){
cols = [{type: 'checkbox', title: '选择'}, ...settings.cols];
}
pickerTable = table.render({
elem: '#pickerTable'+pickerIndex,
url: settings.url,
where:settings.where,
page: settings.page, //开启分页
limit: 10,
height: '407',
cols: [cols]
});
//请求分类
if(settings.cate_url){
tool.get(settings.cate_url,{},function(res){
let cate='';
for(let b=0; b<res.data.length;b++){
cate+='<option value="'+res.data[b].id+'">'+res.data[b].title+'</option>';
}
$('#pickerBox'+pickerIndex).find('.table_cate_id').append(cate);
form.render('select');
})
}
form.render();
//搜索提交
form.on('submit(picker)', function (data) {
let maps = $.extend({}, settings.where, data.field);
pickerTable.reload({where:maps,page:{curr: 1}});
return false;
});
//重置搜索提交
$('#pickerBox'+pickerIndex).on('click', '[lay-filter="picker-reset"]', function () {
let prev = $(this).prev();
if (typeof(prev) != "undefined" ) {
setTimeout(function () {
prev.click();
}, 10)
}
});
},
btn: btn,
btnAlign: 'c',
btn1: function (idx) {
var checkStatus = table.checkStatus(pickerTable.config.id);
var data = checkStatus.data;
if (data.length > 0) {
callback(data);
layer.close(idx);
}
else {
layer.msg('请先选择内容');
return false;
}
},
btn2: function (idx) {
callback([{'id':0,'title':'','name':''}]);
layer.close(idx);
},
btn3: function (idx) {
tool.side(settings.add);
layer.close(idx);
}
})
}
}
//选择员工弹窗
$('body').on('click','.picker-admin',function () {
let that = $(this);
let type = that.data('type');
if (typeof(type) == "undefined" || type == '') {
type = 1;
}
let ids=that.next().val()+'',names = that.val()+'';
obj.employeeInit({
ids:ids,
names:names,
type:type,
callback:function(data){
let select_id=[],select_name=[],select_did=[];
for(var a=0; a<data.length;a++){
select_id.push(data[a].id);
select_name.push(data[a].name);
select_did.push(data[a].did);
}
console.log(select_name);
that.val(select_name.join(','));
that.next().val(select_id.join(','));
that.next().next().val(select_did.join(','));
}
});
});
//选择下属员工弹窗
$('body').on('click','.picker-sub',function () {
let that = $(this);
let type = that.data('type');
if (typeof(type) == "undefined" || type == '') {
type = 1;
}
let ids=that.next().val()+'',names = that.val()+'';
obj.employeeInit({
title:"选择下属",
department_url: "/api/index/get_department_tree_sub",
employee_url: "/api/index/get_employee_sub",
ids:ids,
names:names,
type:type,
callback:function(data){
let select_id=[],select_name=[],select_did=[];
for(var a=0; a<data.length;a++){
select_id.push(data[a].id);
select_name.push(data[a].name);
select_did.push(data[a].did);
}
console.log(select_name);
that.val(select_name.join(','));
that.next().val(select_id.join(','));
that.next().next().val(select_did.join(','));
}
});
});
//选择OA数据弹层
$('body').on('click','.picker-oa',function () {
let that = $(this),ids = [],titles=[],map = {};
let types = that.data('types');
let type = that.data('type');
let where = that.data('where');
if (typeof(types) == "undefined" || types == '') {
layer.msg('请设置【picker】的类型');
return false;
}
if (typeof(type) == "undefined" || type == '') {
type = 1;
}
if (typeof(where) == "undefined" || where == '') {
map = {};
}
else{
const jsonStr = where.replace(/(\w+):/g, '"$1":').replace(/'/g, '"');
map = JSON.parse(jsonStr);
}
let callback = function(data){
for ( var i = 0; i <data.length; i++){
ids.push(data[i].id);
if(!data[i].title){
titles.push(data[i].name);
}else{
titles.push(data[i].title);
}
}
that.val(titles.join(','));
that.next().val(ids.join(','));
}
obj.picker(types,type,callback,map);
});
//输出接口
exports('oaPicker', obj);
});