edit.html 6.9 KB

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