add.html 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. <!DOCTYPE html>
  2. <html lang="zh" xmlns:th="http://www.thymeleaf.org" >
  3. <head>
  4. <th:block th:include="include :: header('新增客户')" />
  5. <th:block th:include="include :: datetimepicker-css" />
  6. </head>
  7. <body class="white-bg">
  8. <div class="wrapper wrapper-content animated fadeInRight ibox-content">
  9. <form class="form-horizontal m" id="form-customer-add">
  10. <h4 class="form-header h4">客户信息</h4>
  11. <div class="form-group">
  12. <label class="col-sm-3 control-label is-required">客户id:</label>
  13. <div class="col-sm-8">
  14. <input name="customerId" class="form-control" type="text" required>
  15. </div>
  16. </div>
  17. <div class="form-group">
  18. <label class="col-sm-3 control-label">客户姓名:</label>
  19. <div class="col-sm-8">
  20. <input name="customerName" class="form-control" type="text">
  21. </div>
  22. </div>
  23. <div class="form-group">
  24. <label class="col-sm-3 control-label">手机号码:</label>
  25. <div class="col-sm-8">
  26. <input name="phonenumber" class="form-control" type="text">
  27. </div>
  28. </div>
  29. <div class="form-group">
  30. <label class="col-sm-3 control-label">客户性别:</label>
  31. <div class="col-sm-8">
  32. <select name="sex" class="form-control m-b" th:with="type=${@dict.getType('sys_user_sex')}">
  33. <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
  34. </select>
  35. </div>
  36. </div>
  37. <div class="form-group">
  38. <label class="col-sm-3 control-label">客户生日:</label>
  39. <div class="col-sm-8">
  40. <div class="input-group date">
  41. <input name="birthday" class="form-control" placeholder="yyyy-MM-dd" type="text">
  42. <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
  43. </div>
  44. </div>
  45. </div>
  46. <h4 class="form-header h4">商品信息</h4>
  47. <div class="row">
  48. <div class="col-sm-12">
  49. <button type="button" class="btn btn-white btn-sm" onclick="addColumn()"><i class="fa fa-plus"> 增加</i></button>
  50. <button type="button" class="btn btn-white btn-sm" onclick="sub.delColumn()"><i class="fa fa-minus"> 删除</i></button>
  51. <div class="col-sm-12 select-table table-striped">
  52. <table id="bootstrap-table"></table>
  53. </div>
  54. </div>
  55. </div>
  56. </form>
  57. </div>
  58. <th:block th:include="include :: footer" />
  59. <th:block th:include="include :: datetimepicker-js" />
  60. <script th:inline="javascript">
  61. var prefix = ctx + "system/customer"
  62. var typeDatas = [[${@dict.getType('sys_yes_no')}]];
  63. $("#form-customer-add").validate({
  64. focusCleanup: true
  65. });
  66. function submitHandler() {
  67. if ($.validate.form()) {
  68. $.operate.save(prefix + "/add", $('#form-customer-add').serialize());
  69. }
  70. }
  71. $("input[name='birthday']").datetimepicker({
  72. format: "yyyy-mm-dd",
  73. minView: "month",
  74. autoclose: true
  75. });
  76. $(function() {
  77. var options = {
  78. pagination: false,
  79. showSearch: false,
  80. showRefresh: false,
  81. showToggle: false,
  82. showColumns: false,
  83. columns: [{
  84. checkbox: true
  85. },
  86. {
  87. field: 'index',
  88. align: 'center',
  89. title: "序号"
  90. },
  91. {
  92. field: 'goodsId',
  93. align: 'center',
  94. title: '商品id',
  95. formatter: function(value, row, index) {
  96. var html = $.common.sprintf("<input class='form-control' type='text' name='sysGoodsList[%s].goodsId' value='%s'>", index, value);
  97. return html;
  98. }
  99. },
  100. {
  101. field: 'name',
  102. align: 'center',
  103. title: '商品名称',
  104. formatter: function(value, row, index) {
  105. var html = $.common.sprintf("<input class='form-control' type='text' name='sysGoodsList[%s].name' value='%s'>", index, value);
  106. return html;
  107. }
  108. },
  109. {
  110. field: 'weight',
  111. align: 'center',
  112. title: '商品重量',
  113. formatter: function(value, row, index) {
  114. var html = $.common.sprintf("<input class='form-control' type='text' name='sysGoodsList[%s].weight' value='%s'>", index, value);
  115. return html;
  116. }
  117. },
  118. {
  119. field: 'price',
  120. align: 'center',
  121. title: '商品价格',
  122. formatter: function(value, row, index) {
  123. var html = $.common.sprintf("<input class='form-control' type='text' name='sysGoodsList[%s].price' value='%s'>", index, value);
  124. return html;
  125. }
  126. },
  127. {
  128. field: 'type',
  129. align: 'center',
  130. title: '商品种类',
  131. formatter: function(value, row, index) {
  132. var name = $.common.sprintf("sysGoodsList[%s].type", index);
  133. return $.common.dictToSelect(typeDatas, value, name);
  134. }
  135. }]
  136. };
  137. $.table.init(options);
  138. });
  139. function addColumn() {
  140. var count = $("#" + table.options.id).bootstrapTable('getData').length;
  141. sub.editColumn();
  142. $("#" + table.options.id).bootstrapTable('insertRow', {
  143. index: count,
  144. row: {
  145. index: $.table.serialNumber(count),
  146. goodsId: "",
  147. name: "",
  148. weight: "",
  149. price: "",
  150. type: ""
  151. }
  152. });
  153. sub.resetIndex();
  154. }
  155. </script>
  156. </body>
  157. </html>