edit.html 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  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-income-edit" th:object="${income}">
  10. <input name="incomeId" th:field="*{incomeId}" type="hidden">
  11. <div class="col-xs-12">
  12. <div class="form-group">
  13. <label class="col-sm-3 control-label">客户:</label>
  14. <div class="col-sm-8">
  15. <select class="form-control" name="customerId" th:with="commons=${@common.getCustomerList()}">
  16. <option value="">所有</option>
  17. <option th:each="common : ${commons}" th:text="${common.customerName}" th:value="${common.customerId}" th:field="*{customerId}" ></option>
  18. </select>
  19. </div>
  20. </div>
  21. </div>
  22. <div class="col-xs-12">
  23. <div class="form-group">
  24. <label class="col-sm-3 control-label">客户:</label>
  25. <div class="col-sm-8">
  26. <select class="form-control" name="userId" th:with="users=${@user.getUserList()}">
  27. <option value="">所有</option>
  28. <option th:each="user : ${users}" th:text="${user.userName}" th:value="${user.userId}" th:field="*{userId}" ></option>
  29. </select>
  30. </div>
  31. </div>
  32. </div>
  33. <div class="col-xs-12">
  34. <div class="form-group">
  35. <label class="col-sm-3 control-label">收入日期:</label>
  36. <div class="col-sm-8">
  37. <div class="input-group date">
  38. <input name="incomeDate" th:value="${#dates.format(income.incomeDate, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text">
  39. <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
  40. </div>
  41. </div>
  42. </div>
  43. </div>
  44. <div class="col-xs-12">
  45. <div class="form-group">
  46. <label class="col-sm-3 control-label">收入类目:</label>
  47. <div class="col-sm-8">
  48. <select name="incomeType" class="form-control" th:with="type=${@dict.getType('income_type')}">
  49. <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{incomeType}"></option>
  50. </select>
  51. </div>
  52. </div>
  53. </div>
  54. <div class="col-xs-12">
  55. <div class="form-group">
  56. <label class="col-sm-3 control-label">收入总金额:</label>
  57. <div class="col-sm-8">
  58. <input id="grossAmount" name="grossAmount" th:field="*{grossAmount}" class="form-control" type="text">
  59. </div>
  60. </div>
  61. </div>
  62. <div class="col-xs-12">
  63. <div class="form-group">
  64. <label class="col-sm-3 control-label">税率:</label>
  65. <div class="col-sm-8 form-inline">
  66. <input id="rate" name="rate" th:field="*{rate}" class="form-control" type="text">%
  67. </div>
  68. </div>
  69. </div>
  70. <div class="col-xs-12">
  71. <div class="form-group">
  72. <label class="col-sm-3 control-label">净收入:</label>
  73. <div class="col-sm-8">
  74. <input id="netAmount" name="netAmount" th:field="*{netAmount}" class="form-control" type="text">
  75. </div>
  76. </div>
  77. </div>
  78. <div class="col-xs-12">
  79. <div class="form-group">
  80. <label class="col-sm-3 control-label">税额:</label>
  81. <div class="col-sm-8">
  82. <input id="taxAmount" name="taxAmount" th:field="*{taxAmount}" class="form-control" type="text">
  83. </div>
  84. </div>
  85. </div>
  86. <div class="col-xs-12">
  87. <div class="form-group">
  88. <label class="col-sm-3 control-label">备注:</label>
  89. <div class="col-sm-8">
  90. <textarea name="remark" class="form-control">[[*{remark}]]</textarea>
  91. </div>
  92. </div>
  93. </div>
  94. </form>
  95. </div>
  96. <th:block th:include="include :: footer" />
  97. <th:block th:include="include :: datetimepicker-js" />
  98. <script th:inline="javascript">
  99. var prefix = ctx + "business/income";
  100. $("#form-income-edit").validate({
  101. focusCleanup: true
  102. });
  103. function submitHandler() {
  104. if ($.validate.form()) {
  105. $.operate.save(prefix + "/edit", $('#form-income-edit').serialize());
  106. }
  107. }
  108. $("input[name='incomeDate']").datetimepicker({
  109. format: "yyyy-mm-dd",
  110. minView: "month",
  111. autoclose: true
  112. });
  113. $("#grossAmount, #rate").blur(function(){
  114. let grossAmount = Number($("#grossAmount").val()) || 0;
  115. let rate = Number($("#rate").val()) || 0;
  116. let netAmount = grossAmount / (1 + rate / 100);
  117. let taxAmount = grossAmount - netAmount;
  118. $("#taxAmount").val(taxAmount.toFixed(2));
  119. $("#netAmount").val(netAmount.toFixed(2));
  120. });
  121. </script>
  122. </body>
  123. </html>