build_form.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. {extend name="layout/content"}
  2. {block name="content"}
  3. <style type="text/css">
  4. .layui-layer-btn .layui-layer-btn1 {
  5. border-color: #009688;
  6. background-color: #009688;
  7. color: #fff;
  8. }
  9. .base .form-check{float:left;margin:5px;}
  10. </style>
  11. <div class="row">
  12. <div class="col-sm-12">
  13. <div class="ibox float-e-margins">
  14. <div class="ibox-title">
  15. <h5>创建表单模板</h5>
  16. </div>
  17. <div class="ibox-content">
  18. <div class="row row-lg">
  19. <div class="col-sm-12">
  20. <div class="row">
  21. <div class="col-sm-3">
  22. <div class="input-group input-group-sm">
  23. <div class="input-group-btn">
  24. <button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button">
  25. 选择表单类型
  26. </button>
  27. </div>
  28. <select class="form-control" name="type">
  29. <option value="1">人才认定申请</option>
  30. </select>
  31. </div>
  32. </div>
  33. <div class="col-sm-3">
  34. <div class="input-group input-group-sm">
  35. <div class="input-group-btn">
  36. <button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button">
  37. 针对人才类型
  38. </button>
  39. </div>
  40. <select class="form-control" name="talentType">
  41. <option>全部人才</option>
  42. <option value="1">优秀人才</option>
  43. <option value="2">人才认定申请</option>
  44. </select>
  45. </div>
  46. </div>
  47. </div>
  48. <fieldset>
  49. <legend>个人信息</legend>
  50. <div class="row base">
  51. <div class="col-sm-12">
  52. <div class="form-check">
  53. <label class="form-check-label">
  54. <input type="checkbox" name="talentType" class="form-check-input" value="" checked="" autocomplete="off">单位标签
  55. </label>
  56. </div>
  57. <div class="form-check">
  58. <label class="form-check-label">
  59. <input type="checkbox" name="companyName" class="form-check-input" value="" checked="" autocomplete="off">单位名称
  60. </label>
  61. </div>
  62. <div class="form-check">
  63. <label class="form-check-label">
  64. <input type="checkbox" name="address" class="form-check-input" value="" checked="" autocomplete="off">所属镇街
  65. </label>
  66. </div>
  67. <div class="form-check">
  68. <label class="form-check-label">
  69. <input type="checkbox" name="industryField" class="form-check-input" value="" checked="" autocomplete="off">产业领域
  70. </label>
  71. </div>
  72. <div class="form-check">
  73. <label class="form-check-label">
  74. <input type="checkbox" name="name" class="form-check-input" value="" checked="" autocomplete="off">姓名
  75. </label>
  76. </div>
  77. <div class="form-check">
  78. <label class="form-check-label">
  79. <input type="checkbox" name="cardType" class="form-check-input" value="" checked="" autocomplete="off">证件类型
  80. </label>
  81. </div>
  82. <div class="form-check">
  83. <label class="form-check-label">
  84. <input type="checkbox" name="idCard" class="form-check-input" value="" checked="" autocomplete="off">证件号码
  85. </label>
  86. </div>
  87. <div class="form-check">
  88. <label class="form-check-label">
  89. <input type="checkbox" name="sex" class="form-check-input" value="" checked="" autocomplete="off">性别
  90. </label>
  91. </div>
  92. <div class="form-check">
  93. <label class="form-check-label">
  94. <input type="checkbox" name="politics" class="form-check-input" value="" checked="" autocomplete="off">政治面貌
  95. </label>
  96. </div>
  97. <div class="form-check">
  98. <label class="form-check-label">
  99. <input type="checkbox" name="birthday" class="form-check-input" value="" checked="" autocomplete="off">出生日期
  100. </label>
  101. </div>
  102. <div class="form-check">
  103. <label class="form-check-label">
  104. <input type="checkbox" name="birthday" class="form-check-input" value="" checked="" autocomplete="off">国籍/地区
  105. </label>
  106. </div>
  107. <div class="form-check">
  108. <label class="form-check-label">
  109. <input type="checkbox" name="birthday" class="form-check-input" value="" checked="" autocomplete="off">出生日期
  110. </label>
  111. </div>
  112. <div class="form-check">
  113. <label class="form-check-label">
  114. <input type="checkbox" name="photo" class="form-check-input" value="" checked="" autocomplete="off">头像
  115. </label>
  116. </div>
  117. </div>
  118. </div>
  119. </fieldset>
  120. <div class="hidden-xs" id="TalentInfoTableToolbar" role="group">
  121. <button type="button" class="btn btn-sm btn-primary " onclick="addField()" id="">
  122. <i class="fa fa-plus"></i>&nbsp;添加字典字段
  123. </button>
  124. </div>
  125. <table id="form" class="table-condensed table table-bordered table-hover table-sm table-striped">
  126. <thead>
  127. <tr>
  128. <th>字段</th>
  129. <th>是否必选</th>
  130. <th>选择附件</th>
  131. <th>排序</th>
  132. <th></th>
  133. </tr>
  134. </thead>
  135. <tbody>
  136. </tbody>
  137. </table>
  138. </div>
  139. </div>
  140. </div>
  141. </div>
  142. </div>
  143. </div>
  144. <!--<script src="${ctxPath}/static/modular/gate/talentInfo/talentInfo.js"></script>-->
  145. <script>
  146. var __initialize = function () {
  147. var count = $(".base input[type=checkbox]").length;
  148. for (var i = 0; i < count; i++) {
  149. var chk = $(".base input[type=checkbox]").eq(i);
  150. if (chk.is(":checked")) {
  151. var value = chk.attr("name");
  152. var text = chk.parent().text();
  153. addToTable(value, text);
  154. }
  155. }
  156. }();
  157. function addField() {
  158. layer.open({
  159. type: 2,
  160. title: "添加字段",
  161. fixed: false,
  162. content: "/admin/talent/add_field",
  163. area: ['50%', '50%'],
  164. maxmin: true,
  165. success: function (layero, index) {
  166. }
  167. });
  168. }
  169. function addToTable(value, text) {
  170. if ($("#form").find("input[name='field[]'][value='" + value + "']").length == 0) {
  171. var tr = '<tr><td>' + text + '<input type="hidden" name="field[]" value="' + value + '"></td><td><input type="checkbox" name="need[]" checked=""></td><td><button class="btn btn-sm btn-primary" onclick="chooseFile(this);">选择附件</button><input type="hidden" name="file[]"></td><td><input name="order[]" value="1"></td><td><button class="btn btn-sm btn-primary" onclick="remove(this);">删除</button></td></tr>';
  172. $("#form tbody").append(tr);
  173. }
  174. }
  175. function remove(obj) {
  176. var tr = $(obj).parents("tr");
  177. var name = tr.find("input[type=checkbox]").attr("name");
  178. $(obj).parents("tr").remove();
  179. $(".base input[type=checkbox][name='" + name + "']").prop("checked", false);
  180. }
  181. $(".base input[type=checkbox]").change(function () {
  182. if ($(this).is(":checked")) {
  183. var value = $(this).attr("name");
  184. var text = $(this).parent().text();
  185. addToTable(value, text);
  186. }
  187. })
  188. </script>
  189. <script type="text/javascript">
  190. document.write('<script src="/static/modular/gate/talentInfo/talentInfo.js?v=' + (new Date()).getTime() + '"><\/script>');
  191. document.write('<script src="/static/modular/common/config.js?v=' + (new Date()).getTime() + '"><\/script>');
  192. </script>
  193. {/block}