1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
| {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-112',
| 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}
| <!-- /脚本 -->
|
|
