create.php 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  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. <link href="{__PLUG_PATH}layui/css/layui.css" rel="stylesheet">
  13. <script src="{__PLUG_PATH}layui/layui.all.js"></script>
  14. <style>
  15. /*弹框样式修改*/
  16. .ivu-modal{top: 20px;}
  17. .ivu-modal .ivu-modal-body{padding: 10px;}
  18. .ivu-modal .ivu-modal-body .ivu-modal-confirm-head{padding:0 0 10px 0;}
  19. .ivu-modal .ivu-modal-body .ivu-modal-confirm-footer{display: none;padding-bottom: 10px;}
  20. .ivu-date-picker {display: inline-block;line-height: normal;width: 280px;}
  21. .ivu-modal-footer{display: none;}
  22. </style>
  23. </head>
  24. <body>
  25. <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
  26. <ul class="layui-tab-title">
  27. <li {if condition="$get['type'] eq 0"}class="layui-this"{/if}><a href="{:Url('create',array('tab_id'=>$Request.param.tab_id,'type'=>0))}">文本框</a> </li>
  28. <li {if condition="$get['type'] eq 1"}class="layui-this"{/if}><a href="{:Url('create',array('tab_id'=>$Request.param.tab_id,'type'=>1))}">多行文本框</a> </li>
  29. <li {if condition="$get['type'] eq 2"}class="layui-this"{/if}><a href="{:Url('create',array('tab_id'=>$Request.param.tab_id,'type'=>2))}">单选框</a></li>
  30. <li {if condition="$get['type'] eq 3"}class="layui-this"{/if}><a href="{:Url('create',array('tab_id'=>$Request.param.tab_id,'type'=>3))}">文件上传</a></li>
  31. <li {if condition="$get['type'] eq 4"}class="layui-this"{/if}><a href="{:Url('create',array('tab_id'=>$Request.param.tab_id,'type'=>4))}">多选框</a></li>
  32. <li {if condition="$get['type'] eq 5"}class="layui-this"{/if}><a href="{:Url('create',array('tab_id'=>$Request.param.tab_id,'type'=>5))}">下拉框</a></li>
  33. </ul>
  34. <div class="layui-tab-content" style="height: 100px;">
  35. <div class="layui-tab-item layui-show" id="formdiv">
  36. </div>
  37. </div>
  38. </div>
  39. <script>
  40. // formCreate.formSuccess = function(form,$r){
  41. // <?//=$form->getSuccessScript()?>
  42. // $f.btn.loading(false)();
  43. // };
  44. (function () {
  45. var create = (function () {
  46. var getRule = function () {
  47. var rule = <?=json_encode($form->getRules())?>;
  48. rule.forEach(function (c) {
  49. if ((c.type == 'cascader' || c.type == 'tree') && Object.prototype.toString.call(c.props.data) == '[object String]') {
  50. if (c.props.data.indexOf('js.') === 0) {
  51. c.props.data = window[c.props.data.replace('js.', '')];
  52. }
  53. }
  54. });
  55. return rule;
  56. }, vm = new Vue,name = 'formBuilderExec<?= !$form->getId() ? '' : '_'.$form->getId() ?>';
  57. var _b = false;
  58. window[name] = function create(el, callback) {
  59. if(_b) return ;
  60. _b = true;
  61. if (!el) el = document.getElementById('formdiv');
  62. var $f = formCreate.create(getRule(), {
  63. el: el,
  64. form:<?=json_encode($form->getConfig('form'))?>,
  65. row:<?=json_encode($form->getConfig('row'))?>,
  66. submitBtn:<?=$form->isSubmitBtn() ? '{}' : 'false'?>,
  67. resetBtn:<?=$form->isResetBtn() ? 'true' : '{}'?>,
  68. iframeHelper:true,
  69. global:{
  70. upload: {
  71. props:{
  72. onExceededSize: function (file) {
  73. vm.$Message.error(file.name + '超出指定大小限制');
  74. },
  75. onFormatError: function () {
  76. vm.$Message.error(file.name + '格式验证失败');
  77. },
  78. onError: function (error) {
  79. vm.$Message.error(file.name + '上传失败,(' + error + ')');
  80. },
  81. onSuccess: function (res, file) {
  82. if (res.code == 200) {
  83. file.url = res.data.filePath;
  84. } else {
  85. vm.$Message.error(res.msg);
  86. }
  87. },
  88. },
  89. },
  90. },
  91. //表单提交事件
  92. onSubmit: function (formData) {
  93. $f.btn.loading(true);
  94. $.ajax({
  95. url: '<?=$form->getAction()?>',
  96. type: '<?=$form->getMethod()?>',
  97. dataType: 'json',
  98. data: formData,
  99. success: function (res) {
  100. if (res.code == 200) {
  101. vm.$Message.success(res.msg);
  102. $f.btn.loading(false);
  103. formCreate.formSuccess && formCreate.formSuccess(res, $f, formData);
  104. callback && callback(0, res, $f, formData);
  105. //TODO 表单提交成功!
  106. } else {
  107. vm.$Message.error(res.msg || '表单提交失败');
  108. $f.btn.loading(false);
  109. callback && callback(1, res, $f, formData);
  110. //TODO 表单提交失败
  111. }
  112. },
  113. error: function () {
  114. vm.$Message.error('表单提交失败');
  115. $f.btn.loading(false);
  116. }
  117. });
  118. }
  119. });
  120. return $f;
  121. };
  122. return window[name];
  123. }());
  124. create();
  125. })();
  126. </script>
  127. </body>
  128. </html>