add.html 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. <!DOCTYPE html>
  2. <html lang="zh" xmlns:th="http://www.thymeleaf.org" >
  3. <head>
  4. <th:block th:include="include :: header('新增消息')" />
  5. </head>
  6. <body class="white-bg">
  7. <div class="wrapper wrapper-content animated fadeInRight ibox-content">
  8. <form class="form-horizontal m" id="form-notice-add">
  9. <div class="form-group">
  10. <label class="col-sm-2 control-label">接收者:</label>
  11. <div class="col-sm-10">
  12. <select name="toObjType" id="toObjType" class="form-control m-b" th:with="type=${@dict.getType('receive_type')}">
  13. <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
  14. </select>
  15. </div>
  16. </div>
  17. <div class="form-group">
  18. <label class="col-sm-2 control-label">消息类型:</label>
  19. <div class="col-sm-10">
  20. <select name="msgType" id="msgType" class="form-control m-b" th:with="type=${@dict.getType('message_type')}">
  21. <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
  22. </select>
  23. </div>
  24. </div>
  25. <div class="form-group" id="chargeSkipType">
  26. <label class="col-sm-2 control-label">跳转类型:</label>
  27. <div class="col-sm-10">
  28. <select name="skipType" id="skipType" class="form-control m-b" th:with="type=${@dict.getType('skip_type')}">
  29. <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
  30. </select>
  31. <input id="skipContent" name="skipContent" class="form-control" type="text"/>
  32. </div>
  33. </div>
  34. <div class="form-group" id="chargeErBanNo">
  35. <label class="col-sm-2 control-label">卿卿号:<span style="color: red;">多个用英文逗号隔开</span></label>
  36. <div class="col-sm-10">
  37. <input id="erBanNos" name="erBanNos" class="form-control" type="text" placeholder="请输入卿卿号,多个卿卿号用英文隔开"/>
  38. </div>
  39. </div>
  40. <div class="form-group" id="chargeTitle">
  41. <label class="col-sm-2 control-label">标题:</label>
  42. <div class="col-sm-10">
  43. <input id="title" name="title" class="form-control" type="text" placeholder="请输入标题" required/>
  44. </div>
  45. </div>
  46. <div class="form-group" id="chargeDesc">
  47. <label class="col-sm-2 control-label">内容:</label>
  48. <div class="col-sm-10">
  49. <input id="desc" name="desc" class="form-control" type="text" placeholder="请输入内容" required/>
  50. </div>
  51. </div>
  52. <div class="form-group" id="chargePic">
  53. <label class="col-sm-2 control-label">图片:</label>
  54. <div class="col-sm-10">
  55. <img src="" id="imgUrl" style="width:250px;height:90px;" alt="">
  56. <input type="file" id="uploadFile" name="uploadFile" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
  57. <button class="btn btn-success" type="button" id="uploadBtn">上传</button>
  58. <span class="attention" style="color: red;">注意:图片尺寸请注意在750*250,选择图片后请点击上传按钮</span>
  59. <input type="hidden" id="pic" name="pic" class="form-control validate[required]"/>
  60. </div>
  61. </div>
  62. </form>
  63. </div>
  64. <th:block th:include="include :: footer" />
  65. <th:block th:include="include :: summernote-js" />
  66. <script type="text/javascript">
  67. var prefix = ctx + "users/message";
  68. $("#form-notice-add").validate({
  69. focusCleanup: true
  70. });
  71. $(function(){
  72. $("#chargeTitle").hide();
  73. $("#chargePic").hide();
  74. $("#chargeSkipType").hide();
  75. });
  76. $('#uploadBtn').on('click',function () {
  77. var formData = new FormData();
  78. formData.append("file", $('#uploadFile').get(0).files[0]);
  79. $.ajax({
  80. url: ctx + "file/upload",
  81. data: formData,
  82. type: "post",
  83. processData: false,
  84. contentType: false,
  85. success: function(result) {
  86. $('#imgUrl').attr('src',result.data);
  87. $("input[name='pic']").val(result.data);
  88. }
  89. })
  90. });
  91. $("#toObjType").on("change", function (){
  92. var val = $(this).val();
  93. if(val == 0){
  94. $("#chargeErBanNo").show();
  95. $('input[name="erBanNos"]').attr("required", "true");
  96. }else if(val == 1){
  97. $("#chargeErBanNo").hide();
  98. $('input[name="erBanNos"]').attr("required", "false");
  99. }
  100. });
  101. $("#msgType").on("change", function (){
  102. var val = $(this).val();
  103. // 0.文本 1.图片 100.图文
  104. if(val == 0){
  105. $("#chargeTitle").hide();
  106. $("#chargeDesc").show();
  107. $("#chargePic").hide();
  108. $("#chargeSkipType").hide();
  109. $('input[name="title"]').attr("required", "false");
  110. $('input[name="desc"]').attr("required", "false");
  111. }else if(val == 1){
  112. $("#chargeTitle").hide();
  113. $("#chargeDesc").hide();
  114. $("#chargePic").show();
  115. $("#chargeSkipType").hide();
  116. $('input[name="title"]').attr("required", "false");
  117. $('input[name="desc"]').attr("required", "false");
  118. }else if(val == 100){
  119. $("#chargeTitle").show();
  120. $("#chargeDesc").show();
  121. $("#chargePic").show();
  122. $("#chargeSkipType").show();
  123. $('input[name="title"]').attr("required", "true");
  124. $('input[name="desc"]').attr("required", "true");
  125. }
  126. });
  127. function submitHandler() {
  128. if ($.validate.form()) {
  129. $.operate.save(prefix + "/add", $('#form-notice-add').serialize());
  130. }
  131. }
  132. </script>
  133. </body>
  134. </html>