1
0

construction.html 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293
  1. {extend name="public/layout"/} {block name="title"}在施工地{/block} {block name="body"}
  2. <link rel="stylesheet" href="__STATIC__/css/csspc.css">
  3. <link rel="stylesheet" href="__STATIC__/css/font.css">
  4. <style>
  5. html,body{height: 100%;min-width: 830px;}
  6. .bodys{height: 100%;overflow-y:auto;background: #F6F7FB;padding: 25px;}
  7. .huise333{color:#333;}
  8. .layui-input{height: 46px;}
  9. .layui-form-label{width:30%;padding: 0;}
  10. .layui-form-label input{width:100%;}
  11. .layui-input-block{width:68%;min-height: 46px;}
  12. .mjtext{width:100px;height: 46px;float:left;}
  13. .searchIco{right:5%;font-size:24px;color:#28A1FF;top:8%; text-align: center;line-height: 38px;cursor: pointer;}
  14. .bottom_btn{bottom:0;left:0;width:100%;background: #fff;padding: 10px 25px;}
  15. .checkallbox{top:0;left:0;width:100%;}
  16. .checkallbox .layui-form-checkbox[lay-skin=primary]{max-width:20px;max-height: 20px;margin-top:-4px;}
  17. .checkallbox .layui-form-checkbox[lay-skin=primary] i{width:20px;height: 20px;line-height: 20px;}
  18. .seach-box{height: 67vh;overflow-y: auto;padding-bottom: 20px;position: relative;}
  19. .seach-box li{overflow: hidden;}
  20. .seach-box .layui-form-checkbox{float:left;margin-top:16px;padding-right:20px;width:20px;height: 20px;}
  21. .seach-box .layui-form-checkbox i{width:20px;height: 20px;font-size: 16px;border: 1px solid rgb(210, 210, 210);line-height: 19px;}
  22. .chekboximg{width:20px;height: 20px;}
  23. .noneimgs{position: absolute;top:0;left:0;bottom:0;right:0;margin:auto;}
  24. </style>
  25. <body>
  26. <div class="bodys wpsr">
  27. <form class="layui-form layui-form-box woverflow width100_">
  28. <div class="">
  29. <div class="layui-input-kos wpsr wleft width40_">
  30. <input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input ss-title">
  31. <i class="fa fa-search searchIco wpsa ds" aria-hidden="true"></i>
  32. </div>
  33. <div class="layui-form-item wright width55_" style="clear: none;">
  34. <label class="layui-form-label lh46">施工阶段:</label>
  35. <div class="layui-input-block wleft mdl0">
  36. <select name="" id="steplist" style="width: 80%;">
  37. <option value="">请选择施工阶段</option>
  38. {volist name='step_list' id='vo'}
  39. <option value="{$vo.name}">{$vo.name}</option>
  40. {/volist}
  41. </select>
  42. </div>
  43. </div>
  44. <div style="clear: both;"></div>
  45. </div>
  46. <div class="wpsr">
  47. <div class="checkallbox mdb10">
  48. <input lay-skin="primary" type="checkbox" id="checkall" name="type" lay-filter="allChoose" value="checkall"/><span class="huise333">全选</span><span class="huise999 ids mdl20 font16">共<span class="count_case"></span>个在施工地</span>
  49. </div>
  50. <div class="seach-box">
  51. <ul id="case_ul"></ul>
  52. </div>
  53. </div>
  54. <div class="bottom_btn wpsa woverflow">
  55. <p class="wleft lanse lh38 font14">已选择在施工地(<span class="count">0</span>个)</p>
  56. <div class="wright">
  57. <button type="button" lay-submit class="layui-btn layui-btn-normal pdlr30" lay-filter="material_case_submit" id="material_case_submit">保存</button>
  58. <button type="button" class="layui-btn layui-btn-primary cancel_btn layui-border-blue pdlr30">取消</button>
  59. </div>
  60. </div>
  61. </form>
  62. </div>
  63. </body>
  64. {/block} {block name="js"}
  65. <script>
  66. layui.config({
  67. base: '__LAYUI__/',
  68. urlbase: '/sys'
  69. }).extend({
  70. index: 'lib/index' //主入口模块
  71. }).use(['index', 'form'], function() {
  72. var $ = layui.$,
  73. form = layui.form,
  74. arrlst = [],
  75. checkboxlist=[],
  76. checkboxlist1 = [],
  77. checkboxlist2 = [],
  78. steplist = [],
  79. count = 0,
  80. housetype_id = "{$housetype_id}",
  81. data = {
  82. name:'',
  83. step_name:''
  84. },
  85. listcount=0;
  86. $('.searchIco').click(function(){
  87. var sstitle = $('.ss-title').val();
  88. if(sstitle!==''){
  89. var ssarrlist = arrlst.filter((item) => item.name.includes(sstitle));
  90. set_step_Html(ssarrlist,0);
  91. }else{
  92. set_step_Html(arrlst,0);
  93. }
  94. })
  95. $('.layui-anim-upbit dd').click(function(){
  96. var steptxt = $('#steplist').val();
  97. if(steptxt!==''){
  98. var steptxtarrlist = arrlst.filter((item) => item.step_name.includes(steptxt));
  99. set_step_Html(steptxtarrlist,0);
  100. }else{
  101. set_step_Html(arrlst,0);
  102. }
  103. })
  104. ajax_api(data);
  105. function ajax_api(data){
  106. $.ajax({
  107. url: '{:url("building/construction",["housetype_id"=> $housetype_id])}',
  108. type: 'post',
  109. dataType: 'json',
  110. data:data,
  111. success: function (res) {
  112. console.log(res)
  113. if(res.code==0){
  114. listcount=res.count;
  115. $('.count_case').html(res.count);
  116. arrlst = res.data;
  117. console.log(arrlst);
  118. set_step_Html(arrlst,0);
  119. if(res.count==0){
  120. $('#case_ul').append('<img class="noneimgs" src="__STATIC__/img/nonedata.png"/>');
  121. }
  122. }
  123. }
  124. });
  125. }
  126. function set_step_Html(set_List,isarrs) {
  127. $('#case_ul')[0].innerHTML = $.map(set_List, (v, i) => {
  128. return `<li class="lh50 woverflow">
  129. <input class="ds mdt17 wleft" data-index="${i}" data-material_case_id="${v.id}" lay-filter="textCheck" ${v.selected?'checked':''} type="checkbox" name="" value="${v.id}" data-isoff="${v.selected}"/>
  130. <img class="wleft mdt15 chekboximg" src="__STATIC__/img/anliico.png"/>
  131. <p class="wleft width68_ mdl10 font18 textlh1">${v.name}</p>
  132. <p class="font18 wright width20_ huise999">施工阶段:${v.step_name?v.step_name:'未开工'}</p>
  133. </li>`
  134. }).join('');
  135. var child = $(".seach-box input[type='checkbox']");
  136. console.log(child)
  137. if(isarrs==0){
  138. checkboxlist=[];
  139. }else{
  140. checkboxlist1=[];
  141. }
  142. child.each(function (index, item) {
  143. if($(this).data('isoff')==1){
  144. $(this).prop('checked',true)
  145. if(isarrs==0){
  146. checkboxlist.push(item.value);
  147. }else{
  148. checkboxlist1.push(item.value);
  149. }
  150. }
  151. });
  152. if(checkboxlist.length==child.length&&checkboxlist.length!=0){
  153. $('#checkall').prop('checked', true);
  154. }else{
  155. $('#checkall').prop('checked', false);
  156. }
  157. form.render('checkbox');
  158. if(isarrs==0){
  159. count=checkboxlist.length
  160. }else{
  161. count=checkboxlist.length+checkboxlist1.length
  162. }
  163. $('.count').html(count);
  164. form.on('checkbox(allChoose)', function (data) {
  165. checkboxlist=[];
  166. child.each(function (index, item) {
  167. if(data.elem.checked){
  168. item.checked = data.elem.checked;
  169. if(isarrs==0){
  170. checkboxlist.push(item.value);
  171. }else{
  172. checkboxlist1.push(item.value);
  173. }
  174. }else{
  175. item.checked = false
  176. }
  177. });
  178. if(isarrs==0){
  179. count=checkboxlist.length
  180. }else{
  181. count=checkboxlist.length+checkboxlist1.length
  182. }
  183. $('.count').html(count);
  184. form.render('checkbox');
  185. });
  186. form.on('checkbox(textCheck)', function (data) {
  187. if(data.elem.checked){
  188. if(isarrs==0){
  189. checkboxlist.push(data.value);
  190. }else{
  191. checkboxlist1.push(data.value);
  192. }
  193. }else{
  194. $.each(checkboxlist, function(index,item) {
  195. if(item==data.value){
  196. checkboxlist.splice(index,1)
  197. }
  198. });
  199. $.each(checkboxlist1, function(index,item) {
  200. if(item==data.value){
  201. checkboxlist1.splice(index,1)
  202. }
  203. });
  204. }
  205. count=checkboxlist.length;
  206. $('.count').html(count);
  207. var parent = $(data.othis).closest('#case_ul');
  208. var inputlist = parent.find('li input');
  209. var listinput=[];
  210. for(var i=0;i<inputlist.length;i++){
  211. if(inputlist[i].checked){
  212. listinput.push(1);
  213. }
  214. }
  215. if(listinput.length==inputlist.length){
  216. $('#checkall').prop('checked', true);
  217. }else{
  218. $('#checkall').prop('checked', false);
  219. }
  220. form.render('checkbox');
  221. });
  222. form.render('checkbox');
  223. }
  224. form.on('submit(material_case_submit)', function(data) {
  225. if(checkboxlist.length!==0){
  226. $.ajax({
  227. url: '{:url("change_construction")}',
  228. type: 'post',
  229. data: {
  230. //building_id:building_id,
  231. housetype_id:housetype_id,
  232. construction_id:arrmerge(checkboxlist,checkboxlist1).join(',')
  233. },
  234. dataType: 'json',
  235. success: function(res) {
  236. console.log(res)
  237. if(res.code === 0) {
  238. layer.msg(res.msg,{
  239. anim: 0,time: 1000,icon: 6,
  240. }, function() {
  241. var index = parent.layer.getFrameIndex(window.name);
  242. parent.layui.table.reload('grant'); //重载表格
  243. parent.layer.close(index); //再执行关闭
  244. });
  245. } else {
  246. layer.msg(res.msg, {anim: 0,time: 1000,icon: 5});
  247. }
  248. }
  249. });
  250. return false;
  251. }else{
  252. layer.msg('最少选择一个在施工地!');
  253. }
  254. });
  255. $('.cancel_btn').click(function(){
  256. var index = parent.layer.getFrameIndex(window.name);
  257. parent.layer.close(index);
  258. })
  259. function arrmerge(arr1,arr2){
  260. $.map(arr1,(v,index)=>{
  261. if(v !==''){
  262. let idx = arr2.indexOf(v);
  263. if(idx > -1){
  264. arr2.splice(idx,1)
  265. }
  266. }
  267. })
  268. checkboxlist = arr1.concat(arr2);
  269. return checkboxlist;
  270. }
  271. function arrmergew(arrs){
  272. let temp = [];
  273. for(let i=0;i<arrs.length;i++){
  274. if(temp.indexOf(arrs[i])===-1){
  275. temp.push(arrs[i])
  276. }
  277. }
  278. return temp;
  279. }
  280. })
  281. </script>
  282. {/block}