oa/app/user/view/files/datalist.html

{extend name="../../base/view/common/base" /}
{block name="style"}
  <style>
	.tree-left{width:200px; float:left; height:calc(100vh - 79px); overflow-y: auto; border:1px solid #eeeeee; border-right:0; background-color:#fbfbfb; padding:12px 12px 12px 5px;}
	.tree-left::-webkit-scrollbar {width: 0;}
	.tree-left h3{font-size:16px; height:30px; padding-left:10px; font-weight:800}
  </style>
{/block}
<!-- 主体 -->
{block name="body"}
<div class="p-page">
	<div class="tree-left">
		<h3>企业组织架构</h3>
		<div id="depament"></div>
	</div>
	<div class="body-table" style="margin-left:200px; overflow:hidden;">
		<form class="layui-form gg-form-bar border-t border-x" lay-filter="barsearchform">
			<div class="layui-input-inline" style="width:124px">
				<select name="status" lay-filter="status">
					<option value="1" selected>正常状态</option>
					<option value="2">离职状态</option>
					<option value="0">禁止登录</option>
				</select>
			</div>
			<div class="layui-input-inline" style="width:124px">
				<select name="political" lay-filter="political">
					<option value="">选择政治面貌</option>
					<option value="1">中共党员</option>
					<option value="2">团员</option>
					<option value="0">无</option>
				</select>
			</div>
			<div class="layui-input-inline" style="width:136px">
				<select name="position_name" lay-filter="position_name">
					<option value="">选择员工职务</option>
					{volist name=":get_base_type_data('basic_user',1)" id="v"}
					<option value="{$v.id}">{$v.title}</option>
					{/volist}
				</select>
			</div>
			<div class="layui-input-inline" style="width:136px">
				<select name="position_rank" lay-filter="position_rank">
					<option value="">选择员工职级</option>
					{volist name=":get_base_type_data('basic_user',2)" id="v"}
					<option value="{$v.id}">{$v.title}</option>
					{/volist}
				</select>
			</div>
			<div class="layui-input-inline" style="width:360px">
				<input type="text" name="keywords" placeholder="关键字，如：ID号/姓名/登录账号/手机号码/电子邮箱" class="layui-input" autocomplete="off" />
			</div>
			<div class="layui-input-inline" style="width:150px;">
				<input type="text" name="did" style="display:none;" value="0" />
				<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="table-search"><i class="layui-icon layui-icon-search mr-1"></i>搜索</button>
				<button type="reset" class="layui-btn layui-btn-reset" lay-filter="table-reset">重置</button>
			</div>
		</form>
		<table class="layui-hide" id="test" lay-filter="test"></table>
	</div>
</div>

<script type="text/html" id="thumb">
	<img src="{{d.thumb}}" width="30" height="30" />
</script>
<script type="text/html" id="toolbara">
	<h3>员工档案</h3>
</script>

{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
	const moduleInit = ['tool','tablePlus'];
	function gouguInit() {
		var table = layui.tablePlus,tool = layui.tool,tree = layui.tree,form = layui.form;			
		$.ajax({
			url: "/api/index/get_department_tree",
			type:'get',
			success:function(res){					
				//仅节点左侧图标控制收缩
				tree.render({
					elem: '#depament',
					data: res.trees,
					onlyIconControl: true,  //是否仅允许节点左侧图标控制展开收缩
					click: function(obj){
						//layer.msg(JSON.stringify(obj.data));
						$('#depament').find('.layui-tree-main').removeClass('on');
						$(obj.elem).find('.layui-tree-main').eq(0).addClass('on');
						$('[name="did"]').val(obj.data.id);
						layui.form.render('select');
						$('[lay-filter="table-search"]').click();
					}
				});	
			}
		});
		
		form.on('select(status)', function(data){
			$('[lay-filter="table-search"]').click();
		});
		form.on('select(political)', function(data){
			$('[lay-filter="table-search"]').click();
		});
		form.on('select(position_name)', function(data){
			$('[lay-filter="table-search"]').click();
		});
		form.on('select(position_rank)', function(data){
			$('[lay-filter="table-search"]').click();
		});
		
		
		layui.pageTable = table.render({
			elem: '#test',
			title: '员工档案',
			toolbar: '#toolbara',
			defaultToolbar: [],
			searchreset:function(){
				$('#depament').find('.layui-tree-main').removeClass('on');
			},
			is_excel:true,
			url: "/user/files/datalist", //数据接口	
			height: 'full-114',
			size:'lg',
			cols: [
				[
					{field: 'id',title: 'ID号',align: 'center',fixed:'left',width: 80},
					{field: 'type',title: '员工类型',align: 'center',width: 80,templet: function (d) {
							var html = '';
							if(d.type == 1){
								html = '<span style="color:#16b777">正式员工</span>'
							}
							if(d.type == 2){
								html = '<span style="color:#01AAED">试用员工</span>'
							}
							if(d.type == 3){
								html = '<span style="color:#ffb800">实 习 生</span>'
							}
							return html;
						}
					},
					{field: 'name',title: '员工姓名',width: 130,templet:function(d){
							return '<div><div style="float:left; width:36px; height:36px; margin-right:5px;"><img src="'+d.thumb+'" style="width:100%; height:100%; vertical-align:top;object-fit: cover; border-radius:3px;" /></div><span>'+d.name+'</span></div>';
						}
					},
					{field: 'mobile',title: '手机号码',align: 'center',width: 110},
					{field: 'email',title: '电子邮箱',width: 200},
					{field: 'sex',title: '性别',align: 'center',width: 50,templet: function (d) {
							var html = '';
							if(d.sex == 1){
								html = '男'
							}
							else if(d.sex == 2){
								html = '女'
							}
							return html;
						}
					},
					{field: 'department',title: '所在主部门',width: 100},
					{field: 'departments',title: '所在次部门',width: 160},
					{field: 'position',title: '岗位职称',align: 'center',width: 100},
					{field: 'entry_time',title: '入职日期',align: 'center',width: 100},
					{field: 'job_number',title: '工号',align: 'center',width: 120},
					{field: 'birthday_str',title: '出生日期',align: 'center',width: 100},
					{field: 'nation',title: '民族',align: 'center',minWidth: 60},
					{field: 'native_place',title: '籍贯',align: 'center',minWidth: 90},
					{field: 'political_str',title: '政治面貌',align: 'center',minWidth: 80},
					{field: 'right',fixed:'right',title: '操作',width:110,align: 'center',ignoreExport:true,templet: function (d) {
							var html = '';
							var btn1 = '<span class="layui-btn layui-btn-xs layui-btn-normal" lay-event="view">详情</span>';
							var btn2 = '<span class="layui-btn layui-btn-xs" lay-event="edit">编辑</span>';
							var btn3 = '<span class="layui-btn layui-bg-orange layui-btn-xs" lay-event="del">删除员工</span>';
							html = '<div class="layui-btn-group">'+btn1+btn2+'</div>';
							if(d.status==2){
								html = '<div class="layui-btn-group">'+btn1+btn3+'</div>';
							}
							return html;
						}						
					}
				]
			]
		});

		//监听行工具事件
		table.on('tool(test)', function (obj) {
			var data = obj.data;			
			if (obj.event === 'view') {
				tool.side('/user/files/view?id='+data.id);
				return;
			}
			if(obj.event === 'edit'){
				tool.side('/user/files/add?id='+data.id);
			}
		});
	}
</script>
{/block}
<!-- /脚本 -->