Home Explore Help
Sign In
githab
/
form-builder
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

1.1.0版本

xaboy 7 years ago
parent
2316e49274
commit
a7f312570e
3 changed files with 96 additions and 88 deletions
Unified View Show Diff Stats
  1. 17 2
      src/Form.php
  2. 2 86
      src/view/form.php
  3. 77 0
      src/view/formScript.php

+ 17 - 2
src/Form.php
View File 

@@ -98,7 +98,7 @@ class Form
 
             $this->append($component);
 
             $this->append($component);
 
         }
 
         }
 
         $this->action = $action;
 
         $this->action = $action;
 
-        $config = require_once '..'.DIRECTORY_SEPARATOR.'config' . DIRECTORY_SEPARATOR . 'config.php';
 
+        $config = require_once dirname(__FILE__).DIRECTORY_SEPARATOR.'..'.DIRECTORY_SEPARATOR.'config' . DIRECTORY_SEPARATOR . 'config.php';
 
         $this->setSuccessScript($config['formSuccessScript']);
 
         $this->setSuccessScript($config['formSuccessScript']);
 
         $this->config = $config['form'];
 
         $this->config = $config['form'];
 
         $this->script = $config['script'];
 
         $this->script = $config['script'];
 
@@ -291,11 +291,26 @@ class Form
 
      */
 
      */
 
     public static function script()
 
     public static function script()
 
     {
 
     {
 
-        $config = require_once '..'.DIRECTORY_SEPARATOR.'config' . DIRECTORY_SEPARATOR . 'config.php';
 
+        $config = require_once dirname(__FILE__).DIRECTORY_SEPARATOR.'..'.DIRECTORY_SEPARATOR.'config' . DIRECTORY_SEPARATOR . 'config.php';
 
         return implode("\r\n", $config['script']);
 
         return implode("\r\n", $config['script']);
 
     }
 
     }
 
 
 
     /**
 
     /**
 
+     * 获取生成表单的js代码
 
+     * @return string
 
+     */
 
+    public function formScript()
 
+    {
 
+        ob_start();
 
+        $form = $this;
 
+        $rule = $this->getRules();
 
+        require_once dirname(__FILE__) . DIRECTORY_SEPARATOR . 'view' . DIRECTORY_SEPARATOR . 'formScript.php';
 
+        $script = ob_get_clean();
 
+        return $script;
 
+
 
+    }
 
+
 
+    /**
 
      * 获取表单生成器全部js
 
      * 获取表单生成器全部js
 
      * @return string
 
      * @return string
 
      */
 
      */

+ 2 - 86
src/view/form.php
View File 

@@ -9,94 +9,10 @@
 
 	</script>
 
 	</script>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
-<div id="app">
 
-</div>
 
 <script>
 
 <script>
 
 	(function () {
 
 	(function () {
 
-
 
-	    var getRule = function () {
 
-            var rule = <?=json_encode($rule)?>;
 
-            rule.forEach(function (component) {
 
-	             if(component.type == 'cascader'){
 
-	                 if(component.props.type == 'city'){
 
-                         component.props.data = window.province;
 
-	                 }else if(component.props.type == 'city_area'){
 
-                         component.props.data = window.province;
 
-	                 }
 
-
 
-	             }
 
-            });
 
-            return rule;
 
-        };
 
-
 
-        var vm = new Vue({
 
-            el:'#app',
 
-            data:{
 
-            },
 
-            mounted:function(){
 
-                var root = document.getElementById('app'),that = this;
 
-                $f = this.$formCreate(
 
-                    //根据mock参数动态生成form表单
 
-                    getRule(),
 
-                    //form表单全局配置
 
-                    {
 
-                        el:root,
 
-                        form:{
 
-                            inline:<?=$form->getConfig('inline',false)?'true':'false'?>,
 
-                            //表单域标签的位置，可选值为 left、right、top
 
-                            labelPosition:'<?=$form->getConfig('labelPosition','right')?>',
 
-                            //表单域标签的宽度，所有的 FormItem 都会继承 Form 组件的 label-width 的值
 
-                            labelWidth:<?=(float)$form->getConfig('labelWidth',125)?>,
 
-                            //是否显示校验错误信息
 
-                            showMessage:<?=$form->getConfig('showMessage',true)?'true':'false'?>,
 
-                            //原生的 autocomplete 属性，可选值为 off 或 on
 
-                            autocomplete:'<?=$form->getConfig('showMessage','off')?>'
 
-                        },
 
-                        upload:{
 
-                            onExceededSize:function (file) {
 
-                                vm.$Message.error(file.name + '超出指定大小限制');
 
-                            },
 
-                            onFormatError:function () {
 
-                                vm.$Message.error(file.name + '格式验证失败');
 
-                            },
 
-                            onError:function (error) {
 
-                                vm.$Message.error(file.name + '上传失败,('+ error +')');
 
-                            },
 
-                            onSuccess:function (res) {
 
-                                if(res.code == 200){
 
-                                    return res.data.filePath;
 
-                                }else{
 
-                                    vm.$Message.error(res.msg);
 
-                                }
 
-                            }
 
-                        },
 
-                        //表单提交事件
 
-                        onSubmit: function (formData) {
 
-                            $f.submitStatus({loading: true});
 
-                            $.ajax({
 
-								url:'<?=$form->getAction()?>',
 
-	                            type:'<?=$form->getMethod()?>',
 
-	                            dataType:'json',
 
-	                            data:formData,
 
-	                            success:function (res) {
 
-									if(res.code == 200){
 
-                                        that.$Message.success(res.msg);
 
-                                        formCreate.formSuccess && formCreate.formSuccess(res,$f);
 
-                                        //TODO 表单提交成功!
 
-									}else{
 
-                                        that.$Message.error(res.msg);
 
-                                        $f.btn.finish();
 
-									}
 
-                                },
 
-	                            error:function () {
 
-		                            that.$Message.error('表单提交失败');
 
-		                            $f.btn.finish();
 
-                                }
 
-                            });
 
-                        }
 
-                    });
 
-            }
 
-        });
 
+		var create = <?=$form->formScript()?>
 
+        create();
 
     })();
 
     })();
 
 </script>
 
 </script>
 
 </body>
 
 </body>

+ 77 - 0
src/view/formScript.php
View File 

@@ -0,0 +1,77 @@
 
+(function () {
 
+    var getRule = function () {
 
+        var rule = <?=json_encode($rule)?>;
 
+        rule.forEach(function (component) {
 
+            if(component.type == 'cascader'){
 
+                if(component.props.type == 'city'){
 
+                    component.props.data = window.province_city;
 
+                }else if(component.props.type == 'city_area'){
 
+                    component.props.data = window.province_city_area;
 
+                }
 
+
 
+            }
 
+        });
 
+        return rule;
 
+    };
 
+    return function create(el) {
 
+        var formData = {};
 
+        if(!el) el = document.body;
 
+        formCreate.create(getRule(),{
 
+                el:el,
 
+                form:{
 
+                    inline:<?=$form->getConfig('inline',false)?'true':'false'?>,
 
+            //表单域标签的位置，可选值为 left、right、top
 
+            labelPosition:'<?=$form->getConfig('labelPosition','right')?>',
 
+            //表单域标签的宽度，所有的 FormItem 都会继承 Form 组件的 label-width 的值
 
+            labelWidth:<?=(float)$form->getConfig('labelWidth',125)?>,
 
+        //是否显示校验错误信息
 
+        showMessage:<?=$form->getConfig('showMessage',true)?'true':'false'?>,
 
+        //原生的 autocomplete 属性，可选值为 off 或 on
 
+        autocomplete:'<?=$form->getConfig('showMessage','off')?>'
 
+    },
 
+        upload:{
 
+            onExceededSize:function (file) {
 
+                vm.$Message.error(file.name + '超出指定大小限制');
 
+            },
 
+            onFormatError:function () {
 
+                vm.$Message.error(file.name + '格式验证失败');
 
+            },
 
+            onError:function (error) {
 
+                vm.$Message.error(file.name + '上传失败,('+ error +')');
 
+            },
 
+            onSuccess:function (res) {
 
+                if(res.code == 200){
 
+                    return res.data.filePath;
 
+                }else{
 
+                    vm.$Message.error(res.msg);
 
+                }
 
+            }
 
+        },
 
+        //表单提交事件
 
+        onSubmit: function (formData) {
 
+            $f.submitStatus({loading: true});
 
+            $.ajax({
 
+                url:'<?=$form->getAction()?>',
 
+                type:'<?=$form->getMethod()?>',
 
+                dataType:'json',
 
+                data:formData,
 
+                success:function (res) {
 
+                    if(res.code == 200){
 
+                        that.$Message.success(res.msg);
 
+                        formCreate.formSuccess && formCreate.formSuccess(res,$f);
 
+                        //TODO 表单提交成功!
 
+                    }else{
 
+                        that.$Message.error(res.msg);
 
+                        $f.btn.finish();
 
+                    }
 
+                },
 
+                error:function () {
 
+                    that.$Message.error('表单提交失败');
 
+                    $f.btn.finish();
 
+                }
 
+            });
 
+        }
 
+    });
 
+        return formData;
 
+    };
 
+}());