form-builder.php 5.0 KB

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