added 新增基础表单生成实现

application/admin/controller/Menu.php

@@ -121,9 +121,9 @@ class Menu extends Base {
             $form = [
                 'tempType' => 'add',
                 'formAttr' => [
-                    'target' => '',
+                    'target' => url('Menu/add'),
-                    'formId' => '',
+                    'formId' => 'add-menu-form',
-                    'backUrl' => '',
+                    'backUrl' => url('Menu/index'),
                 ],
                 'formList' => [
                     [
@@ -153,7 +153,10 @@ class Menu extends Base {
                         'attr' => [
                             'name' => 'level',
                             'value' => '',
-                            'options' => []
+                            'options' => [
+                                '普通认证',
+                                'Log记录'
+                            ]
                         ]
                     ],
                     [
@@ -163,7 +166,10 @@ class Menu extends Base {
                         'attr' => [
                             'name' => 'type',
                             'value' => '',
-                            'options' => []
+                            'options' => [
+                                '模块类功能',
+                                '方法类功能'
+                            ]
                         ]
                     ],
                     [
@@ -173,7 +179,10 @@ class Menu extends Base {
                         'attr' => [
                             'name' => 'hide',
                             'value' => '',
-                            'options' => []
+                            'options' => [
+                                '显示菜单',
+                                '隐藏菜单',
+                            ]
                         ]
                     ],
                     [
@@ -183,7 +192,10 @@ class Menu extends Base {
                         'attr' => [
                             'name' => 'recommend',
                             'value' => '',
-                            'options' => []
+                            'options' => [
+                                '普通模块',
+                                '推荐模块'
+                            ]
                         ]
                     ],
                     [

application/admin/view/index/index.html

@@ -1,32 +1,78 @@
 {extend name="public/base" /}
 {block name="content"}
-        <div class="box box-warning">
+<div class="box box-success">
-            <div class="box-header with-border">
+    <div class="box-header with-border">
-                <h3 class="box-title">General Elements</h3>
+        <h3 class="box-title">新增菜单</h3>
+    </div>
+    <form id="form-login">
+        <div class="box-body">
+            <div>
+                <div class="col-xs-8 form-group">
+                    <label for="exampleInputEmail1">Email address</label>
+                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
+                </div>
+                <div class="col-xs-4 form-group" style="margin-top: 30px">
+                    <span class="label label-info">Info</span>
+                </div>
             </div>
-            <div class="box-body">
+            <div>
-                <form role="form">
+                <div class="col-xs-8 form-group">
-                    <div class="form-group col-xs-8">
+                    <label for="exampleInputEmail1">Email address</label>
-                        <label>Text</label>
+                    <select class="form-control">
-                        <input type="text" class="form-control" placeholder="Enter ...">
+                        <option>option 1</option>
-                    </div>
+                        <option>option 2</option>
-                    <div class="form-group has-success col-xs-8">
+                        <option>option 3</option>
-                        <label>Text</label>
+                        <option>option 4</option>
-                        <input type="text" class="form-control" placeholder="Enter ...">
+                        <option>option 5</option>
-                    </div>
+                    </select>
-                    <!-- textarea -->
+                </div>
-                    <div class="form-group col-xs-8">
+                <div class="col-xs-4 form-group" style="margin-top: 30px">
-                        <label>Textarea</label>
+                    <span class="label label-info">Info</span>
-                        <textarea class="form-control" rows="3" placeholder="Enter ..."></textarea>
+                </div>
-                    </div>
+            </div>
-                    <div class="form-group col-xs-8">
+            <div>
-                        <label>Textarea Disabled</label>
+                <div class="col-xs-8 form-group">
-                        <textarea class="form-control" rows="3" placeholder="Enter ..." disabled></textarea>
+                    <label for="exampleInputEmail1">Email address</label>
-                    </div>
+                    <div class="input-group">
-                </form>
+                        <span class="input-group-addon"><i class="fa fa-dollar"></i></span>
+                        <input type="text" class="form-control">
+                        <span class="input-group-addon"><i class="fa fa-ambulance"></i></span>
+                    </div>
+                </div>
+                <div class="col-xs-4 form-group" style="margin-top: 30px">
+                    <span class="label label-info">Info</span>
+                </div>
+            </div>
+            <div>
+                <div class="form-group col-xs-8">
+                    <label for="exampleInputEmail1">Email address</label>
+                    <div class="input-group radio">
+                        <label>
+                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
+                            Option one is this and that—be sure to include why it's great　
+                        </label>
+                        <label>
+                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
+                            Option one is this and that—be sure to include why it's great　
+                        </label>
+                        <label>
+                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
+                            Option one is this and that—be sure to include why it's great　
+                        </label>
+                    </div>
+                </div>
+                <div class="col-xs-4 form-group" style="margin-top: 30px">
+                    <span class="label label-info">Info</span>
+                </div>
             </div>
-            <!-- /.box-body -->
         </div>
+        <div class="box-footer">
+            <button type="submit" target-form="form-login" class="btn btn-primary ajax-post">确认提交</button>
+            <a class="btn btn-default refe" url="{:url('Menu/index')}" >放弃返回</a>
+        </div>
+    </form>
+</div>
+
 {/block}
 {block name="myScript"}
 

public/admin/static/js/template.js

@@ -99,15 +99,15 @@
                         }
                     }
                     if( data.data.tempType == 'add' ){
-                        if( $.buildAddForm ){
+                        // if( $.buildAddForm ){
-                            $('#content').html($.buildAddForm(data.data));
+                        //     $('#content').html($.buildAddForm(data.data));
-                            $('#formBox').hide().fadeIn(800);
+                        //     $('#formBox').hide().fadeIn(800);
-                        }else{
+                        // }else{
                             $.getScript(JS_PATH + '/template/form.js', function (){
                                 $('#content').html($.buildAddForm(data.data));
                                 $('#formBox').hide().fadeIn(800);
                             });
-                        }
+                        // }
                     }
                     if( data.data.tempType == 'edit' ){
                         if( $.buildEditForm ){

public/admin/static/js/template/form.js

@@ -2,28 +2,132 @@
  * Created by 7d-vision on 2016/11/7.
  */
 (function ($) {
-
+    /**
-    $.buildForm = function ( formObj ) {
+     * 创建新增表单
-        var formHtml = '<div class="box" id="formBox"><div class="box-body">';
+     * @param formObj
-
+     * @returns {string}
-        formHtml += '</div></div>';
+     */
-        return formHtml;
+    $.buildAddForm = function ( formObj ) {
+        return buildForm(formObj, 'box-success');
     };
 
+    /**
+     * 创建编辑表单
+     * @param formObj
+     * @returns {string}
+     */
+    $.buildEditForm = function ( formObj ) {
+        return buildForm(formObj, 'box-warning');
+    };
+
+    /**
+     * 根据规则创建表单
+     * @param formObj 表单数据对象
+     * @param boxType box样式
+     * @returns {string}
+     */
+    function buildForm( formObj, boxType ) {
+        var formHtml = '<div class="box '+ boxType +'" id="formBox"><div class="box-body">';
+        formHtml += '<div class="box-header with-border"><h3 class="box-title">新增菜单</h3></div>';
+        formHtml += '<form id="'+ formObj.formAttr.formId +'" action="'+ formObj.formAttr.target +'"><div class="box-body">';
+        $.each(formObj.formList, function (index, value) {
+            switch (value.module){
+                case 'text':
+                    formHtml += buildInput(value);
+                    break;
+                case 'select':
+                    formHtml += buildSelect(value);
+                    break;
+                case 'radio':
+                    formHtml += buildRadio(value);
+                    break;
+            }
+        });
+        formHtml += '</div><div class="box-footer">';
+        formHtml += '<button type="submit" target-form="'+ formObj.formAttr.formId +'" class="btn btn-primary ajax-post">确认提交</button>';
+        formHtml += ' <a class="btn btn-default refresh" url="'+ formObj.formAttr.backUrl +'" >放弃返回</a></div></form></div></div>';
+        return formHtml;
+    }
+
+    /**
+     * 创建文本框
+     * @param inputObj
+     * @returns {string}
+     */
     function buildInput( inputObj ) {
+        var formHtml = '<div><div class="col-xs-8 form-group"><label>'+ inputObj.info +'</label>';
+        var placeholder = '', value = '';
+        if( inputObj.attr.placeholder && inputObj.attr.placeholder.length ){
+            placeholder = 'placeholder="'+ inputObj.attr.placeholder +'"';
+        }
+        if( inputObj.attr.value && inputObj.attr.value.length ){
+            value = 'value="'+ inputObj.attr.value +'"';
+        }
+        formHtml += '<input type="text" class="form-control" '+ placeholder +' '+ value +' name="'+ inputObj.attr.name +'"></div>';
+        if( inputObj.description && inputObj.description.length ){
+            formHtml += ' <div class="col-xs-4 form-group" style="margin-top: 30px"><span class="label label-info">'+ inputObj.description +'</span></div>';
+        }
+        formHtml += '</div>';
+        return formHtml;
+    }
+
+    /**
+     * 创建单选框
+     * @param radioObj
+     * @returns {string}
+     */
+    function buildRadio( radioObj ) {
+        var formHtml = '<div>';
+        formHtml += '<div class="col-xs-8 form-group"><label>'+ radioObj.info +'</label>';
+        formHtml += '<div class="input-group radio">';
+        if( radioObj.attr.options ){
+            $.each(radioObj.attr.options, function (index, value) {
+                if( index == radioObj.attr.value ){
+                    formHtml += '<label><input type="radio" checked name="'+ radioObj.attr.name +'" value="'+ index +'"> '+ value +'</label>　';
+                }else{
+                    formHtml += '<label><input type="radio" name="'+ radioObj.attr.name +'" value="'+ index +'"> '+ value +'</label>　';
+                }
+            });
+        }
+        formHtml += '</div>';
+        if( radioObj.description && radioObj.description.length ){
+            formHtml += ' <div class="col-xs-4 form-group" style="margin-top: 30px"><span class="label label-info">'+ radioObj.description +'</span></div>';
+        }
+        formHtml += '</div></div>';
+        return formHtml;
+    }
+    
+    function buildTextarea( textareaObj ) {
         
     }
 
-    function buildButton( buttonObj ) {
+    /**
-
+     * 创建下拉菜单
-    }
+     * @param selectObj
-    
+     * @returns {string}
-    function buildTextarea() {
+     */
-        
+    function buildSelect( selectObj ) {
-    }
+        var formHtml = '<div>';
-    
+        formHtml += '<div class="col-xs-8 form-group"><label>'+ selectObj.info +'</label>';
-    function buildSelect() {
+        if( selectObj.attr.options ){
-        
+            formHtml += '<select class="form-control" name="'+ selectObj.attr.name +'">';
+            formHtml += '<option>请选择</option>';
+            $.each(selectObj.attr.options, function (index, value) {
+                if( index == selectObj.attr.value ){
+                    formHtml += '<option value="'+ index +'" selected>'+ value +'</option>';
+                }else{
+                    formHtml += '<option value="'+ index +'">'+ value +'</option>';
+                }
+            });
+        }else{
+            formHtml += '<select class="form-control" name="'+ selectObj.attr.name +'" disabled>';
+        }
+        formHtml += '</select></div>';
+        if( selectObj.description && selectObj.description.length ){
+            formHtml += ' <div class="col-xs-4 form-group" style="margin-top: 30px"><span class="label label-info">'+ selectObj.description +'</span></div>';
+        }
+        formHtml += '</div>';
+        return formHtml;
     }
     
     function buildEditors() {