form-builder.php 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title><?=$form->getTitle()?></title>
  6. <script src="{__PLUG_PATH}vue/dist/vue.min.js"></script>
  7. <link href="{__PLUG_PATH}iview/dist/styles/iview.css" rel="stylesheet">
  8. <script src="{__PLUG_PATH}iview/dist/iview.min.js"></script>
  9. <script src="{__PLUG_PATH}jquery/jquery.min.js"></script>
  10. <script src="{__PLUG_PATH}form-create/province_city.js"></script>
  11. <script src="{__PLUG_PATH}form-create/form-create.min.js"></script>
  12. <style>
  13. /*弹框样式修改*/
  14. .ivu-modal{top: 20px;}
  15. .ivu-modal .ivu-modal-body{padding: 10px;}
  16. .ivu-modal .ivu-modal-body .ivu-modal-confirm-head{padding:0 0 10px 0;}
  17. .ivu-modal .ivu-modal-body .ivu-modal-confirm-footer{display: none;padding-bottom: 10px;}
  18. .ivu-date-picker {display: inline-block;line-height: normal;width: 280px;}
  19. .ivu-modal-footer{display: none;}
  20. body{padding: 20px;}
  21. </style>
  22. </head>
  23. <body>
  24. <script>
  25. formCreate.formSuccess = function(form,$r){
  26. <?=$form->getSuccessScript()?>
  27. //刷新父级页面
  28. // parent.$(".J_iframe:visible")[0].contentWindow.location.reload();
  29. //关闭当前窗口
  30. // var index = parent.layer.getFrameIndex(window.name);
  31. // parent.layer.close(index);
  32. //提交成功后按钮恢复
  33. $r.btn.loading(false);
  34. };
  35. (function () {
  36. var create = (function () {
  37. var getRule = function () {
  38. var rule = <?=json_encode($form->getRules())?>;
  39. rule.forEach(function (c) {
  40. if ((c.type == 'cascader' || c.type == 'tree') && Object.prototype.toString.call(c.props.data) == '[object String]') {
  41. if (c.props.data.indexOf('js.') === 0) {
  42. c.props.data = window[c.props.data.replace('js.', '')];
  43. }
  44. }
  45. });
  46. return rule;
  47. }, vm = new Vue,name = 'formBuilderExec<?= !$form->getId() ? '' : '_'.$form->getId() ?>';
  48. var _b = false;
  49. window[name] = function create(el, callback) {
  50. if(_b) return ;
  51. _b = true;
  52. if (!el) el = document.body;
  53. var $f = formCreate.create(getRule(), {
  54. el: el,
  55. form:<?=json_encode($form->getConfig('form'))?>,
  56. row:<?=json_encode($form->getConfig('row'))?>,
  57. submitBtn:<?=$form->isSubmitBtn() ? '{}' : 'false'?>,
  58. resetBtn:<?=$form->isResetBtn() ? 'true' : '{}'?>,
  59. iframeHelper:true,
  60. global:{
  61. upload: {
  62. props:{
  63. onExceededSize: function (file) {
  64. vm.$Message.error(file.name + '超出指定大小限制');
  65. },
  66. onFormatError: function () {
  67. vm.$Message.error(file.name + '格式验证失败');
  68. },
  69. onError: function (error) {
  70. vm.$Message.error(file.name + '上传失败,(' + error + ')');
  71. },
  72. onSuccess: function (res, file) {
  73. if (res.code == 200) {
  74. file.url = res.data.filePath;
  75. } else {
  76. vm.$Message.error(res.msg);
  77. }
  78. },
  79. },
  80. },
  81. },
  82. //表单提交事件
  83. onSubmit: function (formData) {
  84. $f.btn.loading(true);
  85. $.ajax({
  86. url: '<?=$form->getAction()?>',
  87. type: '<?=$form->getMethod()?>',
  88. dataType: 'json',
  89. data: formData,
  90. success: function (res) {
  91. if (res.code == 200) {
  92. vm.$Message.success(res.msg);
  93. $f.btn.loading(false);
  94. formCreate.formSuccess && formCreate.formSuccess(res, $f, formData);
  95. callback && callback(0, res, $f, formData);
  96. //TODO 表单提交成功!
  97. } else {
  98. vm.$Message.error(res.msg || '表单提交失败');
  99. $f.btn.loading(false);
  100. callback && callback(1, res, $f, formData);
  101. //TODO 表单提交失败
  102. }
  103. },
  104. error: function () {
  105. vm.$Message.error('表单提交失败');
  106. $f.btn.loading(false);
  107. }
  108. });
  109. }
  110. });
  111. return $f;
  112. };
  113. return window[name];
  114. }());
  115. window.$f = create();
  116. // create();
  117. })();
  118. </script>
  119. </body>
  120. </html>