step_setting.html 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. {extend name="public/layout"/} {block name="title"}在施工地{/block} {block name="body"}
  2. <style>
  3. html{background:#fff;height: 100%;}
  4. .mdt30{margin-top:30px;}
  5. .mdt20{margin-top:20px;}
  6. .ids{display:inline-block;}
  7. .mdlr10{margin:0 10px;}
  8. .layui-input-block input,.layui-upload-drag,.sjsselect,.layui-input:hover, .layui-textarea:hover{border:1px solid #333 !important;}
  9. .layui-form-label,.input::placeholder,input::-webkit-input-placeholder{color:#333;}
  10. .layui-form-box{width:94%;margin:0 auto;display: block;}
  11. .layuiSubmit{margin-left:110px;padding:0 30px !important;display: block;}
  12. .layui-input:focus,.layui-textarea:focus{border:1px solid #333 !important;}
  13. .mdl10{margin-left: 10px;}
  14. .btnlist{float:left;margin-left:20px;}
  15. .btnlist a{line-height: 38px;margin:0 10px;cursor: pointer;}
  16. .wleft{float:left;}
  17. .btnlist_a01{color: #02A7F0;}
  18. .btnlist_a02{color: #D9001B;}
  19. body{padding-bottom: 40px;}
  20. </style>
  21. <body>
  22. <form class="layui-form layui-form-box">
  23. <div class="set_step_box">
  24. </div>
  25. <button class="layui-btn mdt20 layui-btn-normal layuiSubmit" lay-submit lay-filter="layuiadmin-anli-submit" id="layuiadmin-anli-submit">保存</button>
  26. </form>
  27. </body>
  28. {/block} {block name="js"}
  29. <script>
  30. layui.config({
  31. base: '__LAYUI__/',
  32. urlbase: '/sys'
  33. }).extend({
  34. index: 'lib/index' //主入口模块
  35. }).use(['index', 'form'], function() {
  36. var $ = layui.$,
  37. form = layui.form,
  38. set_List;
  39. $.ajax({
  40. url: '{:url("construction/step_list")}',
  41. type: 'get',
  42. dataType: 'json',
  43. success: function(res) {
  44. set_List = res.step_list ;
  45. set_step_Html(set_List);
  46. }
  47. });
  48. function switch_set(numbers){
  49. switch(numbers){
  50. case 1:
  51. return "一";
  52. case 2:
  53. return "二";
  54. case 3:
  55. return "三";
  56. case 4:
  57. return "四";
  58. case 5:
  59. return "五";
  60. case 6:
  61. return "六";
  62. case 7:
  63. return "七";
  64. }
  65. }
  66. function set_step_Html(set_List){
  67. $('.set_step_box')[0].innerHTML = $.map(set_List,(v, i) => {
  68. return `<div class="layui-form-item col-md5 mdt30 set_step_li">
  69. <label class="layui-form-label">第${switch_set(i+1)}步:</label>
  70. <div class="layui-input-block wleft" style="width:50%;margin-left: 0;">
  71. <input type="text" maxlength="5" data-type="name" required data-index="${i}" value="${v.name}" lay-verify="required" placeholder="请输入进度名" autocomplete="off" class="layui-input">
  72. </div>
  73. <div class="woverflow btnlist">
  74. <a class="btnlist_a01 add_step" data-index="${set_List.length+1}">
  75. 添加
  76. </a>
  77. <a class="btnlist_a02 delete" data-index="${i}">
  78. 删除
  79. </a>
  80. </div>
  81. </div>`
  82. }).join('');
  83. setTimeout(() => {
  84. $('.add_step').click((e) => {
  85. let index = parseInt(e.target.dataset.index);
  86. if(set_List.length<5){
  87. set_List.push({
  88. id:0,
  89. name: '',
  90. order:index
  91. });
  92. set_step_Html(set_List)
  93. }else{
  94. layer.msg('最多设置5步');
  95. }
  96. })
  97. $('.delete').click((e) => {
  98. if(set_List.length<=2){
  99. layer.msg('最少要设置2步');
  100. }else{
  101. let index = parseInt(e.target.dataset.index);
  102. set_List.splice(index, 1);
  103. set_step_Html(set_List)
  104. }
  105. })
  106. $('input').change((e) => {
  107. let type = e.target.dataset.type;
  108. let val = e.target.value;
  109. if (type && type != undefined) {
  110. let index = parseInt(e.target.dataset.index);
  111. set_List[index][type] = val;
  112. }
  113. })
  114. },500)
  115. }
  116. //添加保存
  117. form.on('submit(layuiadmin-anli-submit)', function(data) {
  118. var formData = new FormData(data.form);
  119. //单击之后提交按钮不可选,防止重复提交
  120. var DISABLED = 'layui-btn-disabled';
  121. var target = '#layuiadmin-anli-submit';
  122. $(target).addClass(DISABLED);
  123. $(target).attr('disabled', 'disabled');
  124. var arrstep = [];
  125. set_List.forEach(v => {
  126. arrstep.push({
  127. id:v.id,
  128. name: v.name,
  129. order:v.order
  130. })
  131. })
  132. formData.append('form',JSON.stringify(arrstep))
  133. $.ajax({
  134. url: '{:url("construction/step_setting")}',
  135. type: 'post',
  136. data: formData,
  137. dataType: 'json',
  138. processData: false,
  139. contentType: false,
  140. success: function(res) {
  141. $(target).removeClass(DISABLED);
  142. $(target).removeAttr('disabled');
  143. if(res.code === 0) {
  144. layer.msg(res.msg,{
  145. anim: 0,time: 1000,icon: 6,
  146. }, function() {
  147. var index = parent.layer.getFrameIndex(window.name);
  148. parent.layui.table.reload('company-activity'); //重载表格
  149. parent.layer.close(index); //再执行关闭
  150. });
  151. } else {
  152. layer.msg(res.msg, {anim: 0,time: 1000,icon: 5});
  153. }
  154. },
  155. error : function(e){
  156. $(target).removeClass(DISABLED);
  157. $(target).removeAttr('disabled');
  158. }
  159. });
  160. return false;
  161. });
  162. });
  163. </script>
  164. {/block}