oa/app/home/view/index/contacts_book.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:360px">
				<input type="text" name="keywords" placeholder="关键字，如：ID号/姓名/登录账号/手机号码/电子邮箱" class="layui-input" autocomplete="off" />
			</div>
			<div class="layui-input-inline" style="width:150px;">
				<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>
{/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');
						layui.pageTable.reload({
						   where: {did: obj.data.id}
						   ,page:{curr:1}
						});
						$('[name="keywords"]').val('');
						layui.form.render('select');
					}
				});	
			}
		})		
		
		layui.pageTable = table.render({
			elem: '#test',
			title: '通讯录',
			url: "/home/index/contacts_book", //数据接口				
			height: 'full-114',
			cols: [
				[{
						field: 'thumb',
						title: '头像',
						toolbar: '#thumb',
						align: 'center',
						width: 60
					}, {
						field: 'name',
						title: '用户姓名',
						align: 'center',
						width: 80
					},{
						field: 'mobile',
						title: '手机号码',
						align: 'center',
						width: 120
					},{
						field: 'email',
						title: '电子邮箱'
					},{
						field: 'sex',
						title: '性别',
						align: 'center',
						width: 60,
						templet: function (d) {
							var html = '未知';
							if(d.sex == 1){
								html = '男'
							}
							else if(d.sex == 2){
								html = '女'
							}
							return html;
						}
					},{
						field: 'department',
						title: '所在部门',
						width: 120
					},{
						field: 'departments',
						title: '次要部门',
						width: 200
					}, {
						field: 'position',
						title: '岗位职称',
						align: 'center',
						width: 100
					}, {
						field: 'entry_time',
						title: '入职日期',
						align: 'center',
						width: 100
					}
				]
			]
		});
	}	
</script>
{/block}
<!-- /脚本 -->