personnel.html 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368
  1. {extend name="public/layout" /} {block name="title"}训练营人员列表{/block} {block name="body"}
  2. <style type="text/css">
  3. html,
  4. body {
  5. display: block;
  6. min-width: 1100px;
  7. }
  8. body::-webkit-scrollbar {
  9. /*滚动条整体样式*/
  10. width: 4px;
  11. /*高宽分别对应横竖滚动条的尺寸*/
  12. height: 1px;
  13. }
  14. body::-webkit-scrollbar-thumb {
  15. /*滚动条里面小方块*/
  16. border-radius: 10px;
  17. box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
  18. background: #78b4b4;
  19. }
  20. body::-webkit-scrollbar-track {
  21. /*滚动条里面轨道*/
  22. box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
  23. border-radius: 10px;
  24. background: #ededed;
  25. }
  26. .layui-table thead tr,
  27. .layui-table-header {
  28. background-color: #D8E6F1 !important;
  29. }
  30. .layui-fluid {
  31. display: block;
  32. box-shadow: 0 0 4px 0 #B6CADE;
  33. border-radius: 5px;
  34. margin: 15px;
  35. background-color: #ffffff;
  36. }
  37. .layui-form-label{
  38. width: auto;
  39. }
  40. .layui-tab-title .layui-this {
  41. background-color: #fff !important;
  42. color: #249EFB !important;
  43. }
  44. .layui-tab-title .layui-this:after {
  45. border: none;
  46. border-bottom: 4px solid #28A1FF !important;
  47. width: 60%;
  48. left: 50%;
  49. transform: translateX(-50%);
  50. }
  51. .layui-tab-title li {
  52. background-color: #FFF;
  53. margin: 0px 5px;
  54. }
  55. .layui-btn-xs,.layui-btn-xs:hover {
  56. border: 1px solid #249EFB;
  57. background-color: #fff;
  58. color: #249EFB;
  59. padding: 0px 10px;
  60. }
  61. .layui-btn-danger,.layui-btn-danger:hover{
  62. color: #FF5722;
  63. background-color: #fff;
  64. border: 1px solid #FF5722;
  65. padding: 0px 10px;
  66. }
  67. .flex-row {
  68. display: flex;
  69. justify-content: space-around;
  70. align-items: center;
  71. background-color: #fff;
  72. margin: 15px;
  73. height: 130px;
  74. box-shadow: 0 0 4px 0 #b6cade;
  75. }
  76. .flex-item {
  77. display: flex;
  78. flex-direction: column;
  79. justify-content: center;
  80. align-items: center;
  81. }
  82. .font-weight {
  83. font-weight: 600;
  84. }
  85. .font32 {
  86. font-size: 32px;
  87. }
  88. .mt10 {
  89. margin-top: 10px;
  90. }
  91. .layui-form-item .layui-inline {
  92. margin-bottom: 0px;
  93. margin-right: 0px !important;
  94. }
  95. .block {
  96. display: inline-block;
  97. width: 100%;
  98. height: 100%;
  99. }
  100. .layui-tab-title {
  101. border-bottom: 1px solid #f5f5f5;
  102. }
  103. </style>
  104. <body>
  105. <div class="flex-row">
  106. <div class="flex-item">
  107. <span class="font-weight font32">{$data.plan_count}</span>
  108. <span class="mt10">训练计划数</span>
  109. </div>
  110. <div class="flex-item">
  111. <span class="font-weight font32">{$data.person_time}</span>
  112. <span class="mt10">训练人次</span>
  113. </div>
  114. <div class="flex-item">
  115. <span class="font-weight font32">{$data.passed_count}</span>
  116. <span class="mt10">通过训练人数</span>
  117. </div>
  118. <div class="flex-item">
  119. <span class="font-weight font32">{$data.no_passed_count}</span>
  120. <span class="mt10">未通过训练人数</span>
  121. </div>
  122. <div class="flex-item">
  123. <span class="font-weight font32">{$data.reviewed}</span>
  124. <span class="mt10">待审核</span>
  125. </div>
  126. </div>
  127. <div class="layui-fluid">
  128. <div class="layui-card">
  129. <div class="layui-tab">
  130. <ul class="layui-tab-title">
  131. <li>
  132. <a href="{:url('camp/index')}" class="block">训练营管理</a>
  133. </li>
  134. <li class="layui-this">
  135. 训练人员管理
  136. </li>
  137. <li>
  138. <a href="{:url('camp/verify')}" class="block">转正审核</a>
  139. </li>
  140. </ul>
  141. </div>
  142. <div class="layui-form layui-card-header layuiadmin-card-header-auto">
  143. <div class="layui-form-item">
  144. <div style="float:left;" class="flexRow">
  145. <div class="layui-inline">
  146. <div class="layui-input-inline">
  147. <select name="org" id="org" lay-filter="org_select" class="org_id">
  148. <option value=0>请选择部门</option>
  149. {volist name="org" id="i" }
  150. <option value="{$i.id}">{$i.name}</option>
  151. {/volist}
  152. </select>
  153. </div>
  154. </div>
  155. <div class="layui-inline">
  156. <button class="layui-btn layuiadmin-btn-useradmin searchBtn" lay-submit lay-filter="search">
  157. <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
  158. </button>
  159. </div>
  160. </div>
  161. </div>
  162. </div>
  163. <div class="layui-card-body">
  164. <table lay-filter="personnel-table" id="personnel-table"></table>
  165. </div>
  166. </div>
  167. </div>
  168. </body>
  169. {/block} {block name="js"}
  170. <script type="text/html" id="table-personnel-action">
  171. <a class="layui-btn layui-btn-xs" lay-event="personnel-re-assign">重新指派</a>
  172. <a class="layui-btn layui-btn-xs" lay-event="personnel-turn">转正</a>
  173. <!-- <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="personnel-leave">离职</a> -->
  174. </script>
  175. <script type="text/html" id="comment">
  176. <a class="layui-table-link" lay-event="commentCount">{{d.commentCount}}</a>
  177. </script>
  178. <script type="text/html" id="imgs">
  179. {{# for(var j in d.imgs) { }}
  180. <img src="{{d.imgs[j]}}" style="text-align: center" width="30px" height="30px"/>
  181. {{# } }}
  182. </script>
  183. <script>
  184. layui.config({
  185. base: '__LAYUI__/',
  186. urlbase: '/sys'
  187. }).extend({
  188. index: 'lib/index'
  189. }).use(['index', 'table', 'layedit', 'element'], function() {
  190. var $ = layui.$,
  191. table = layui.table,
  192. element = layui.element,
  193. form = layui.form;
  194. var field = {};
  195. form.on('submit(search)', function (data) {
  196. var org_id = $('.org_id').val();
  197. field['org_id'] = org_id;
  198. //执行重载
  199. table.reload('personnel-table', {
  200. where: field
  201. ,page: {curr:1}
  202. });
  203. });
  204. //事件
  205. var active = {};
  206. //话术列表
  207. table.render({
  208. elem: '#personnel-table',
  209. autoSort: false,
  210. url: "{:url('camp/employee')}",
  211. cols: [
  212. [{
  213. type: 'numbers',
  214. field: 'id',
  215. width: 80,
  216. title: '编号',
  217. sort: true
  218. }, {
  219. field: 'name',
  220. title: '姓名'
  221. }, {
  222. field: 'org_name',
  223. title: '部门'
  224. }, {
  225. title: '所在训练营',
  226. field: 'title',
  227. }, {
  228. title: '当前进度',
  229. field: 'speed',
  230. }, {
  231. title: '状态',
  232. field: 'state',
  233. },{
  234. title: '加入训练营时间',
  235. field: 'addtime',
  236. },{
  237. title: '操作',
  238. width: 220,
  239. align: 'center',
  240. fixed: 'right',
  241. toolbar: '#table-personnel-action'
  242. }]
  243. ],
  244. page: true,
  245. limit: 30,
  246. height: 'full-350',
  247. text: '对不起,加载出现异常!'
  248. });
  249. function reSelectTrainPlan (id,camp_id) {
  250. $.ajax({
  251. url: "{:url('camp/assign')}",
  252. data: {
  253. id: id,
  254. camp_id: camp_id,
  255. },
  256. dataType: 'json',
  257. type: 'post',
  258. success: function (res) {
  259. if (res.code == 0) {
  260. layui.table.reload('personnel-table');
  261. layer.msg('重新指派成功', {
  262. time: 2000
  263. });
  264. } else {
  265. layer.msg(res.msg, {
  266. anim: 6
  267. , time: 2000
  268. });
  269. }
  270. }
  271. })
  272. }
  273. //监听列表
  274. table.on('tool(personnel-table)', function(obj) {
  275. var data = obj.data;
  276. if(obj.event === 'personnel-re-assign') {
  277. layer.open({
  278. type: 2,
  279. title:['重选训练计划', 'color:#333333;background-color:#D8E6F1;'],
  280. content: "{:url('camp/reselect_train_plan')}?camp_id=" + data.camp_id,
  281. resize: false,
  282. area: ['80%', '80%'],
  283. btn: ['确定', '取消'],
  284. yes: function(index, layero) {
  285. //点击确认触发 iframe 内容中的按钮提交
  286. var trainPlan = JSON.parse(layero.find('iframe').contents().find("#hiddentext").val()); //获取选中的课程
  287. if (trainPlan && trainPlan.length) {
  288. reSelectTrainPlan(data.id,trainPlan[0].id);
  289. }
  290. layer.close(index);
  291. if (trainPlan[0].pattern == 0) {
  292. setTimeout(() => {
  293. layer.alert('训练人员无法在规定训练周期内完成训练,请重新重新指派训练营',{ title: ['信息', 'color:#333333;background-color:#D8E6F1;'], }, function (index) {
  294. layer.close(index);
  295. });
  296. },2000)
  297. }
  298. }
  299. });
  300. }else if(obj.event === 'personnel-leave') {
  301. layer.confirm('确定离职吗?',{title:['信息', 'color:#333333;background-color:#D8E6F1;'],}, function(index) {
  302. $.ajax({
  303. url: "{:url('talkskill/talkskilldel')}?id=" + data.id,
  304. type: 'post',
  305. success: function (res) {
  306. if (res.code == 0) {
  307. layui.table.reload('personnel-table');
  308. layer.msg('删除成功', {
  309. time: 2000
  310. });
  311. } else {
  312. layer.msg(res.msg, {
  313. anim: 6
  314. , time: 2000
  315. });
  316. }
  317. }
  318. });
  319. obj.del();
  320. layer.close(index);
  321. });
  322. } else if (obj.event === 'personnel-turn') {
  323. layer.confirm('确定转正吗?',{title:['信息', 'color:#333333;background-color:#D8E6F1;'],}, function(index) {
  324. $.ajax({
  325. url: "{:url('camp/worker')}",
  326. type: 'post',
  327. data: {
  328. id: data.id,
  329. type: '0'
  330. },
  331. success: function (res) {
  332. if (res.code == 0) {
  333. layui.table.reload('personnel-table');
  334. layer.msg('转正成功', {
  335. time: 2000
  336. });
  337. } else {
  338. layer.msg(res.msg, {
  339. anim: 6
  340. , time: 2000
  341. });
  342. }
  343. }
  344. });
  345. obj.del();
  346. layer.close(index);
  347. });
  348. }
  349. });
  350. $('.layui-btn.layuiadmin-btn').on('click', function() {
  351. var type = $(this).data('type');
  352. active[type] ? active[type].call(this) : '';
  353. });
  354. });
  355. </script>
  356. {/block}