form.html 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <div class="think-box-shadow">
  2. <form class="layui-form layui-card" action="{:request()->url()}" data-auto="true" method="post" autocomplete="off">
  3. <div class="layui-card-body">
  4. <div class="layui-form-item">
  5. <label class="layui-form-label label-required">标题</label>
  6. <div class="layui-input-block">
  7. <input name="title" maxlength="20" value='{$vo.title|default=""}' placeholder="请输入标题" class="layui-input">
  8. </div>
  9. </div>
  10. <div class="layui-form-item">
  11. <label class="layui-form-label label-required">分类</label>
  12. <div class="layui-input-inline">
  13. <select name="first_classify" lay-filter ="first_classify">
  14. <option value="0">请选择</option>
  15. {if !empty($cate_tree)}
  16. {foreach $cate_tree as $ck=>$cv}
  17. {if isset($vo.first_classify) && $vo.first_classify == $cv['id'] }
  18. <option selected data-cl_key="{$ck}" value="{$cv['id']}">{$cv['title']}</option>
  19. {else}
  20. <option data-cl_key="{$ck}" value="{$cv['id']}">{$cv['title']}</option>
  21. {/if}
  22. {/foreach}
  23. {/if}
  24. </select>
  25. </div>
  26. <div class="layui-input-inline">
  27. <select name="second_classify" lay-filter ="second_classify">
  28. <option value="0">请选择</option>
  29. {if !empty($cate_tree)}
  30. {foreach $cate_tree as $ck=>$cv}
  31. {if isset($vo.first_classify) && $vo.first_classify == $cv['id'] }
  32. {if isset($cv['children'])}
  33. {foreach $cv['children'] as $cln}
  34. {if isset($vo.second_classify) && $vo.second_classify == $cln['id'] }
  35. <option selected value="{$cln['id']}">{$cln['title']}</option>
  36. {else}
  37. <option value="{$cln['id']}">{$cln['title']}</option>
  38. {/if}
  39. {/foreach}
  40. {/if}
  41. {/if}
  42. {/foreach}
  43. {/if}
  44. </select>
  45. </div>
  46. </div>
  47. <div class="layui-form-item">
  48. <label class="layui-form-label label-required">封面</label>
  49. <div class="layui-input-block">
  50. <input name="cover" type="hidden" value="{$vo.cover|default=''}">
  51. </div>
  52. </div>
  53. <div class="layui-form-item video">
  54. <label class="layui-form-label label-required">视频</label>
  55. <div class="layui-input-block">
  56. <input name="video_url" type="hidden" value="{$vo.video_url|default=''}">
  57. </div>
  58. </div>
  59. <div class="layui-form-item">
  60. <label class="layui-form-label label-required">是否置顶</label>
  61. <div class="layui-input-inline">
  62. <select name="is_top" lay-filter ="is_top">
  63. {foreach ['不置顶','置顶'] as $ck=>$cv}
  64. {if !empty($vo.is_top) && $vo.is_top == $ck }
  65. <option selected data-cl_key="{$ck}" value="{$ck}">{$cv}</option>
  66. {else}
  67. <option data-cl_key="{$ck}" value="{$ck}">{$cv}</option>
  68. {/if}
  69. {/foreach}
  70. </select>
  71. </div>
  72. </div>
  73. <div class="layui-form-item">
  74. <label class="layui-form-label label-required">排序</label>
  75. <div class="layui-input-block">
  76. <input type="number" name="sort" value='{$vo.sort|default=""}' placeholder="请输入排序号" class="layui-input">
  77. </div>
  78. </div>
  79. {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}
  80. <div class="layui-form-item text-center">
  81. <button class="layui-btn" type='submit'>保 存</button>
  82. <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定取消编辑吗?" data-close>取消编辑</button>
  83. </div>
  84. </div>
  85. </form>
  86. <script>
  87. window.form.render();
  88. require(['ckeditor', 'angular'], function () {
  89. window.createEditor('[name="detail"]', {height: 500,width:1000});
  90. })
  91. $('[name="cover"]').uploadOneImage();
  92. $('[name="video_url"]').uploadOneVideo()
  93. // 类型选择监听
  94. form.on('select(type)', function(data){
  95. if(data.value == 1) {
  96. $(".video").hide();
  97. $(".detail").show();
  98. }else{
  99. $(".video").show();
  100. $(".detail").hide();
  101. }
  102. window.form.render();
  103. })
  104. function check_type() {
  105. console.log($("select[name='type']").val());
  106. if( $("select[name='type']").val() == 1) {
  107. $(".video").hide();
  108. $(".detail").show();
  109. }else{
  110. $(".video").show();
  111. $(".detail").hide();
  112. }
  113. window.form.render();
  114. }
  115. check_type()
  116. // 分类选择监听
  117. form.on('select(first_classify)', function(data){
  118. var cl_html = '<option value="0">请选择</option>';
  119. if(data.value == 0) {
  120. $("select[name='second_classify']").html(cl_html);
  121. }else{
  122. var cl_key = data.elem[data.elem.selectedIndex].dataset.cl_key;
  123. var goods_spec = {:json_encode($cate_tree)};
  124. $.each(goods_spec[cl_key]['children'],function (ck,cv) {
  125. cl_html +='<option value="'+cv.id+'">'+cv.title+'</option>';
  126. })
  127. $("select[name='second_classify']").html(cl_html);
  128. }
  129. window.form.render();
  130. })
  131. </script>
  132. </div>