index.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484
  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,
  56. .layui-btn-xs:hover {
  57. border: 1px solid #249EFB;
  58. background-color: #fff;
  59. color: #249EFB;
  60. padding: 0px 10px;
  61. }
  62. .layui-btn-danger,
  63. .layui-btn-danger:hover {
  64. color: #FF5722;
  65. background-color: #fff;
  66. border: 1px solid #FF5722;
  67. padding: 0px 10px;
  68. }
  69. .layui-btn-primary {
  70. color: #249EFB;
  71. border: 1px solid #249EFB;
  72. }
  73. .layui-btn-primary:hover {
  74. background-color: #E3F7FF;
  75. color: #249EFB;
  76. }
  77. .flex-row {
  78. display: flex;
  79. justify-content: space-around;
  80. align-items: center;
  81. background-color: #fff;
  82. margin: 15px;
  83. height: 130px;
  84. box-shadow: 0 0 4px 0 #b6cade;
  85. border-radius: 5px;
  86. }
  87. .flex-item {
  88. display: flex;
  89. flex-direction: column;
  90. justify-content: center;
  91. align-items: center;
  92. }
  93. .font-weight {
  94. font-weight: 600;
  95. }
  96. .font32 {
  97. font-size: 32px;
  98. }
  99. .mt10 {
  100. margin-top: 10px;
  101. }
  102. .layui-form-item .layui-inline {
  103. margin-bottom: 0px;
  104. margin-right: 0px !important;
  105. }
  106. .block {
  107. display: inline-block;
  108. width: 100%;
  109. height: 100%;
  110. }
  111. .layui-tab-title {
  112. border-bottom: 1px solid #f5f5f5;
  113. }
  114. .layui-layer-iframe .layui-layer-btn, .layui-layer-page .layui-layer-btn {
  115. display: flex !important;
  116. justify-content: center !important;
  117. }
  118. </style>
  119. <body>
  120. <div class="flex-row">
  121. <div class="flex-item">
  122. <span class="font-weight font32">{$data.plan_count}</span>
  123. <span class="mt10">训练计划数</span>
  124. </div>
  125. <div class="flex-item">
  126. <span class="font-weight font32">{$data.person_time}</span>
  127. <span class="mt10">训练人次</span>
  128. </div>
  129. <div class="flex-item">
  130. <span class="font-weight font32">{$data.passed_count}</span>
  131. <span class="mt10">通过训练人次</span>
  132. </div>
  133. <div class="flex-item">
  134. <span class="font-weight font32">{$data.no_passed_count}</span>
  135. <span class="mt10">未通过训练人次</span>
  136. </div>
  137. <div class="flex-item">
  138. <span class="font-weight font32">{$data.reviewed}</span>
  139. <span class="mt10">待审核</span>
  140. </div>
  141. </div>
  142. <div class="layui-fluid">
  143. <div class="layui-card">
  144. <div class="layui-tab">
  145. <ul class="layui-tab-title">
  146. <li class="layui-this">
  147. 训练营管理
  148. </li>
  149. <li>
  150. <a href="{:url('camp/personnel')}">训练人员管理</a>
  151. </li>
  152. <li>
  153. <a href="{:url('camp/verify')}">转正审核</a>
  154. </li>
  155. </ul>
  156. </div>
  157. <div class="layui-form layui-card-header layuiadmin-card-header-auto">
  158. <div class="layui-form-item">
  159. <div style="float: left;">
  160. <div class="layui-inline">
  161. <div class="layui-input-inline">
  162. <button class="layui-btn layui-btn-primary layuiadmin-btn-course"
  163. data-type="add">创建训练营</button>
  164. </div>
  165. </div>
  166. </div>
  167. <div style="float:right;" class="flexRow">
  168. <div class="layui-inline">
  169. <div class="layui-input-inline">
  170. <input type="text" name="keyword" id="" class="layui-input keyword"
  171. placeholder="请输入关键字" />
  172. </div>
  173. </div>
  174. <div class="layui-inline">
  175. <button class="layui-btn layuiadmin-btn-useradmin searchBtn submitbtn" lay-submit
  176. lay-filter="search">
  177. <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
  178. </button>
  179. </div>
  180. </div>
  181. </div>
  182. </div>
  183. <div class="layui-card-body">
  184. <table lay-filter="training-plan" id="training-plan"></table>
  185. </div>
  186. </div>
  187. </div>
  188. </body>
  189. {/block} {block name="js"}
  190. <script type="text/html" id="table-train-action">
  191. <a class="layui-btn layui-btn-xs" href="{:url('camp/settrainingcamp')}?id={{d.id}}" lay-event="train-setting">设置训练营</a>
  192. <a class="layui-btn layui-btn-xs" lay-event="train-obj">训练对象</a>
  193. <!-- <a class="layui-btn layui-btn-xs" lay-event="train-on">上架</a> -->
  194. <a class="layui-btn layui-btn-xs" lay-event="train-edit">编辑</a>
  195. <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="train-del">删除</a>
  196. </script>
  197. <script type="text/html" id="comment">
  198. <a class="layui-table-link" lay-event="commentCount">{{d.commentCount}}</a>
  199. </script>
  200. <script type="text/html" id="statistics">
  201. <a href="javascript:void(0)" lay-event="viewStatistics" style="color:blue;">查看</a>
  202. </script>
  203. <script type="text/html" id="complete">
  204. <a href="javascript:void(0)" lay-event="completePeople" style="color:blue;">500</a>
  205. </script>
  206. <script type="text/html" id="noPass">
  207. <a href="javascript:void(0)" lay-event="NOPassPeople" style="color:blue;">600</a>
  208. </script>
  209. <script type="text/html" id="addtimeTpl">
  210. {{d.start_date}}至{{d.end_date}}
  211. </script>
  212. <script>
  213. layui.config({
  214. base: '__LAYUI__/',
  215. urlbase: '/sys'
  216. }).extend({
  217. index: 'lib/index'
  218. }).use(['index', 'table', 'layedit', 'element'], function () {
  219. var $ = layui.$,
  220. table = layui.table,
  221. element = layui.element,
  222. form = layui.form,
  223. cancelIds = [],
  224. campIdNum = null;
  225. var field = {};
  226. form.on('submit(search)', function (data) {
  227. var keyword = $('.keyword').val();
  228. field['keyword'] = keyword;
  229. //执行重载
  230. table.reload('training-plan', {
  231. where: field
  232. , page: { curr: 1 }
  233. });
  234. });
  235. document.onkeydown = function (event) {
  236. var e = event || window.event || arguments.callee.caller.arguments[0];
  237. if (e && e.keyCode == 13) {
  238. $(".submitbtn").trigger("click");
  239. }
  240. };
  241. window.setCampFunc = function(ids, id) {
  242. cancelIds = JSON.parse(JSON.stringify(ids));
  243. campIdNum = JSON.parse(JSON.stringify(id));
  244. }
  245. //事件
  246. var active = {
  247. add: function () {
  248. layer.open({
  249. type: 2,
  250. title: ['创建训练营', 'color:#333333;background-color:#D8E6F1;'],
  251. content: '{:url("camp/createtrainingcamp")}',
  252. resize: false,
  253. area: ['80%', '80%'],
  254. // btn: ['确定', '取消'],
  255. yes: function (index, layero) {
  256. //点击确认触发 iframe 内容中的按钮提交
  257. // var submit = layero.find('iframe').contents().find("#activity-submit");
  258. // submit.click();
  259. }
  260. });
  261. }
  262. };
  263. //话术列表
  264. table.render({
  265. elem: '#training-plan',
  266. autoSort: false,
  267. url: "{:url('camp/list')}",
  268. cols: [
  269. [{
  270. type: 'numbers',
  271. field: 'id',
  272. width: '8%',
  273. title: '编号',
  274. sort: true
  275. }, {
  276. field: 'title',
  277. title: '训练名称',
  278. }, {
  279. title: '添加时间',
  280. field: 'addtime',
  281. }, {
  282. title: '训练时间',
  283. field: 'addtime',
  284. templet: '#addtimeTpl',
  285. }, {
  286. title: '数据统计',
  287. templet: '#statistics',
  288. }, {
  289. title: '操作',
  290. width: '30%',
  291. align: 'center',
  292. fixed: 'right',
  293. toolbar: '#table-train-action'
  294. }]
  295. ],
  296. page: true,
  297. limit: 30,
  298. height: 'full-350',
  299. text: '对不起,加载出现异常!'
  300. });
  301. showDialog();
  302. function showDialog() {
  303. setTimeout(() => {
  304. let msg = sessionStorage.getItem('Dialog');
  305. let data = sessionStorage.getItem('trainData') ? JSON.parse(sessionStorage.getItem('trainData')) : '';
  306. if (msg && (data && data.id)) {
  307. $.ajax({
  308. url: "{:url('camp/check')}",
  309. type: 'post',
  310. data: {
  311. id: data.id
  312. },
  313. success: function (res) {
  314. if (res.code == 0) {
  315. if (res.data == 0) {
  316. layer.alert('训练人员无法在规定训练周期内完成训练,请重新更改训练周期', { title: ['信息', 'color:#333333;background-color:#D8E6F1;'], }, function (index) {
  317. layer.close(index);
  318. });
  319. }
  320. }
  321. }
  322. });
  323. sessionStorage.removeItem('Dialog');
  324. sessionStorage.removeItem('trainData');
  325. }
  326. }, 1500)
  327. }
  328. //监听列表
  329. table.on('tool(training-plan)', function (obj) {
  330. switch (obj.event) {
  331. case 'NOPassPeople':
  332. layer.open({
  333. type: 2,
  334. title: ['未通过人员', 'color:#333333;background-color:#D8E6F1;'],
  335. content: '{:url("camp/nopass")}',
  336. resize: false,
  337. area: ['80%', '80%'],
  338. });
  339. break;
  340. case 'completePeople':
  341. layer.open({
  342. type: 2,
  343. title: ['已完成人员', 'color:#333333;background-color:#D8E6F1;'],
  344. content: '{:url("camp/complete")}',
  345. resize: false,
  346. area: ['80%', '80%'],
  347. });
  348. break;
  349. case 'viewStatistics':
  350. layer.open({
  351. type: 2,
  352. title: ['数据统计', 'color:#333333;background-color:#D8E6F1;'],
  353. content: '{:url("camp/datastatistics")}?id=' + obj.data.id,
  354. resize: false,
  355. area: ['80%', '80%'],
  356. });
  357. break;
  358. case 'train-setting':
  359. sessionStorage.setItem('trainData', JSON.stringify(obj.data));
  360. break;
  361. case 'train-obj':
  362. if (obj.data.campPlan && obj.data.campPlan.length) {
  363. sessionStorage.setItem('trainData', JSON.stringify(obj.data));
  364. layer.open({
  365. type: 2,
  366. title: ['训练对象', 'color:#333333;background-color:#D8E6F1;'],
  367. content: '{:url("camp/training_object")}?id=' + obj.data.id,
  368. area: ['80%', '80%'],
  369. btn: ['确定指派'],
  370. end: function (index, layero) {
  371. // layer.close(index);
  372. showDialog();
  373. },
  374. yes: function (index, layero) {
  375. cancelIds = [];
  376. campIdNum = null;
  377. //点击确认触发 iframe 内容中的按钮提交
  378. var submit = layero.find('iframe').contents().find("#activity-submit");
  379. submit.click();
  380. },
  381. cancel: function () {
  382. if (campIdNum && cancelIds.length) {
  383. $.ajax({
  384. url: '{:url("camp/training_object")}?id=' + campIdNum,
  385. data: {
  386. pid: cancelIds.join(','), type: 'per', res: '0'
  387. },
  388. type: 'get',
  389. success: function(res) {
  390. if (res.code==0) {
  391. cancelIds = [];
  392. campIdNum = null;
  393. console.log('取消当前所有选中的员工');
  394. }
  395. },
  396. });
  397. }
  398. }
  399. });
  400. } else {
  401. layer.msg('请先创建训练计划', {
  402. anim: 6
  403. , time: 2000
  404. });
  405. }
  406. break;
  407. case 'train-on':
  408. break;
  409. case 'train-edit':
  410. layer.open({
  411. type: 2,
  412. title: ['编辑', 'color:#333333;background-color:#D8E6F1;'],
  413. content: "{:url('camp/edittrainingcamp')}?id=" + obj.data.id,
  414. resize: false,
  415. area: ['80%', '80%'],
  416. // btn: ['确定', '取消'],
  417. end: function (index, layero) {
  418. //点击确认触发 iframe 内容中的按钮提交
  419. // var submit = layero.find('iframe').contents().find("#talkskill-submit");
  420. // submit.click();
  421. showDialog();
  422. }
  423. });
  424. break;
  425. case 'train-del':
  426. layer.confirm('确定删除?', { title: ['信息', 'color:#333333;background-color:#D8E6F1;'], }, function (index) {
  427. $.ajax({
  428. url: "{:url('camp/camp_del')}?id=" + obj.data.id,
  429. type: 'post',
  430. success: function (res) {
  431. if (res.code == 0) {
  432. table.reload('training-plan', {
  433. page: { curr: 1 }
  434. });
  435. layer.msg('删除成功', {
  436. anim: 6
  437. , time: 2000
  438. });
  439. } else {
  440. layer.msg(res.msg, {
  441. anim: 6
  442. , time: 2000
  443. });
  444. }
  445. }
  446. });
  447. layer.close(index);
  448. });
  449. break;
  450. }
  451. });
  452. $('.layui-btn.layuiadmin-btn-course').on('click', function () {
  453. var type = $(this).data('type');
  454. active[type] ? active[type].call(this) : '';
  455. });
  456. });
  457. </script>
  458. {/block}