oa/public/static/assets/gougu/module/oaPicker.js

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