subdata.html 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. <!DOCTYPE html>
  2. <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
  3. <head>
  4. <th:block th:include="include :: header('主子表提交')" />
  5. <th:block th:include="include :: datetimepicker-css" />
  6. </head>
  7. <body class="gray-bg">
  8. <div class="main-content">
  9. <form id="form-add" class="form-horizontal">
  10. <input name="deptId" type="hidden" id="treeId"/>
  11. <h4 class="form-header h4">客户信息</h4>
  12. <div class="row">
  13. <div class="col-sm-6">
  14. <div class="form-group">
  15. <label class="col-sm-4 control-label is-required">客户名称:</label>
  16. <div class="col-sm-8">
  17. <input name="name" placeholder="请输入客户名称" class="form-control" type="text" maxlength="30">
  18. </div>
  19. </div>
  20. </div>
  21. <div class="col-sm-6">
  22. <div class="form-group">
  23. <label class="col-sm-4 control-label is-required">用户性别:</label>
  24. <div class="col-sm-8">
  25. <select name="sex" class="form-control" th:with="type=${@dict.getType('sys_user_sex')}">
  26. <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
  27. </select>
  28. </div>
  29. </div>
  30. </div>
  31. </div>
  32. <div class="row">
  33. <div class="col-sm-6">
  34. <div class="form-group">
  35. <label class="col-sm-4 control-label is-required">手机号码:</label>
  36. <div class="col-sm-8">
  37. <input id="phonenumber" name="phonenumber" placeholder="请输入手机号码" class="form-control" type="text" maxlength="11">
  38. </div>
  39. </div>
  40. </div>
  41. <div class="col-sm-6">
  42. <div class="form-group">
  43. <label class="col-sm-4 control-label is-required">生日:</label>
  44. <div class="col-sm-8">
  45. <div class="input-group date">
  46. <input name="birthday" class="form-control" placeholder="yyyy-MM-dd" type="text">
  47. <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
  48. </div>
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. <div class="row">
  54. <div class="col-sm-12">
  55. <div class="form-group">
  56. <label class="col-xs-2 control-label">备注:</label>
  57. <div class="col-xs-10">
  58. <textarea name="remark" maxlength="500" class="form-control" rows="3"></textarea>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. <h4 class="form-header h4">商品数据</h4>
  64. <div class="row">
  65. <div class="col-sm-12">
  66. <button type="button" class="btn btn-white btn-sm" onclick="addColumn()"><i class="fa fa-plus"> 增加</i></button>
  67. <button type="button" class="btn btn-white btn-sm" onclick="sub.delColumn()"><i class="fa fa-minus"> 删除</i></button>
  68. <div class="col-sm-12 select-table table-striped">
  69. <table id="bootstrap-table"></table>
  70. </div>
  71. </div>
  72. </div>
  73. </form>
  74. </div>
  75. <div class="row">
  76. <div class="col-sm-offset-5 col-sm-10">
  77. <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
  78. <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
  79. </div>
  80. </div>
  81. <th:block th:include="include :: footer" />
  82. <th:block th:include="include :: datetimepicker-js" />
  83. <script th:src="@{/js/jquery.tmpl.js}"></script>
  84. <script th:inline="javascript">
  85. $(function() {
  86. var options = {
  87. pagination: false,
  88. showSearch: false,
  89. showRefresh: false,
  90. showToggle: false,
  91. showColumns: false,
  92. sidePagination: "client",
  93. columns: [{
  94. checkbox: true
  95. },
  96. {
  97. field: 'index',
  98. align: 'center',
  99. title: "序号",
  100. formatter: function (value, row, index) {
  101. var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
  102. return columnIndex + $.table.serialNumber(index);
  103. }
  104. },
  105. {
  106. field: 'name',
  107. align: 'center',
  108. title: '商品名称',
  109. formatter: function(value, row, index) {
  110. var html = $.common.sprintf("<input class='form-control' type='text' name='goods[%s].name' value='%s'>", index, value);
  111. return html;
  112. }
  113. },
  114. {
  115. field: 'weight',
  116. align: 'center',
  117. title: '商品重量',
  118. formatter: function(value, row, index) {
  119. var html = $.common.sprintf("<input class='form-control' type='text' name='goods[%s].weight' value='%s'>", index, value);
  120. return html;
  121. }
  122. },
  123. {
  124. field: 'price',
  125. align: 'center',
  126. title: '商品价格',
  127. formatter: function(value, row, index) {
  128. var html = $.common.sprintf("<input class='form-control' type='text' name='goods[%s].price' value='%s'>", index, value);
  129. return html;
  130. }
  131. },
  132. {
  133. field: 'type',
  134. align: 'center',
  135. title: '商品种类',
  136. formatter: function(value, row, index) {
  137. var data = [{ index: index, type: value }];
  138. return $("#goodsTypeTpl").tmpl(data).html();
  139. }
  140. }]
  141. };
  142. $.table.init(options);
  143. });
  144. /* 主子表-提交 */
  145. function submitHandler(index, layero){
  146. var data = $("#form-add").serializeArray();
  147. $.operate.saveModal("/demo/operate/customer/add", data);
  148. }
  149. $("input[name='birthday']").datetimepicker({
  150. format: "yyyy-mm-dd",
  151. minView: "month",
  152. autoclose: true
  153. });
  154. function addColumn() {
  155. var count = $("#" + table.options.id).bootstrapTable('getData').length;
  156. sub.editColumn();
  157. $("#" + table.options.id).bootstrapTable('insertRow', {
  158. index: count,
  159. row: {
  160. index: $.table.serialNumber(count),
  161. name: "",
  162. weight: "",
  163. price: "",
  164. type: "",
  165. }
  166. });
  167. }
  168. </script>
  169. </body>
  170. </html>
  171. <!-- 商品类型 -->
  172. <script id="goodsTypeTpl" type="text/x-jquery-tmpl">
  173. <div>
  174. <select class='form-control' name='goods[${index}].type'>
  175. <option value="">所有</option>
  176. <option value="0" {{if type==="0"}}selected{{/if}}>寒性</option>
  177. <option value="1" {{if type==="1"}}selected{{/if}}>热性</option>
  178. </select>
  179. </div>
  180. </script>