formOperation.ejs 9.7 KB
<!DOCTYPE html>
<script id="form-list" type="text/x-handlebars-template">
      <table>
        <thead>
          <tr>
              <th data-field="id">选择</th>
              <th data-field="id">UUID</th>
              <th data-field="name">DisplayName</th>
              <th data-field="price">Description</th>
          </tr>
        </thead>

        <tbody>
         {{#each items}}
          <tr>
            <td> 
                <input id="select-{{uuid}}" class="with-gap" name="select-uuid" type="radio" data-form-uuid="{{uuid}}" />
                <label for="select-{{uuid}}"></label>
            </td>
            <td>{{uuid}}</td>
            <td>{{DisplayName}}</td>
            <td>{{Description}}</td>
          </tr>
         {{/each}}
        </tbody>
      </table>  
</script>

<script id="section-list" type="text/x-handlebars-template">
      <table>
        <thead>
          <tr>
              <th data-field="id">选择</th>
              <th data-field="id">UUID</th>
              <th >Name</th>
              <th data-field="name">DisplayName</th>
              <th data-field="price">Description</th>
          </tr>
        </thead> 
        <tbody>
         {{#each sections}}
          <tr>
            <td> 
                <input id="select-{{uuid}}" class="with-gap" name="select-uuid" type="radio" data-form-uuid="{{uuid}}" />
                <label for="select-{{uuid}}"></label>
            </td>
            <td>{{uuid}}</td>
            <td>{{name}}</td>
            <td>{{DisplayName}}</td>
            <td>{{Description}}</td>
          </tr>
         {{/each}}
        </tbody>
      </table>  
</script>


<div class="section row">
    <div class="col s12">
        <h5>表单列表</h5> 
        <div class="layout-row row" id="form-list-target">

        </div>
    </div>
</div>
<a class="waves-effect waves-light btn delete-form-submit">删除</a>

<div class="section row">
    <form action="" class="" id="form-creat">
    <div class="col s12">
        <h5>创建表单</h5> 
        <div class="layout-row row">
            <div class="col s12 m6">
                <div class="row">
                    <div class="input-field col s12 required" id="id_flat_bulding_container">
                        <input type="text" id="id_flat_bulding" name="name">
                        <label for="id_flat_bulding" class="">表单名称</label>
                    </div>
                </div>
            </div>
            <div class="col s12 m6">
                <div class="row">
                    <div class="input-field col s12 required" id="id_road_no_container">
                        <input type="text" id="id_road_no" name="displayName">
                        <label for="id_road_no" class="">显示名称</label>
                    </div>
                </div>
            </div>
        </div> 
        <div class="layout-row row">
            <div class="col s12 m10">
                <div class="row">
                    <div class="input-field col s12 required" id="id_area_and_landmark_container">
                        <input type="text" id="id_area_and_landmark" name="discription">
                        <label for="id_area_and_landmark" class="">描述</label>
                    </div>
                </div>
            </div>
            <div class="col s12 m2">
                <div class="row">
                    <div class="input-field col s12 required" id="id_city_container">
                        <input  type="checkbox" id="id_city" name="isSystem"  >
                        <label for="id_city" class="">系统表单</label>
                    </div>
                </div>
            </div>
        </div> 
    </div>
    </form>
</div>
<a class="waves-effect waves-light btn field-modal-submit">提交</a>

<div class="section row">
    <form action="" class="" id="form-update">
    <div class="col s12">
        <h5>修改表单</h5> 
        <div class="layout-row row"> 
            <div class="col s12 m6">
                <div class="row">
                    <div class="input-field col s12 required" id="id_road_no_container">
                        <input type="hidden" name="form-id" id="update-form-uuid">
                        <input type="text" id="update-form-displayName" name="displayName">
                        <label for="update-form-displayName" class="">显示名称</label>
                    </div>
                </div>
            </div>
        </div> 
        <div class="layout-row row">
            <div class="col s12 m10">
                <div class="row">
                    <div class="input-field col s12 required" id="id_area_and_landmark_container">
                        <input type="text" id="update-form-discription" name="discription">
                        <label for="update-form-discription" class="">描述</label>
                    </div>
                </div>
            </div> 
        </div> 
    </div>
    </form>
</div>
<a class="waves-effect waves-light btn form-update-submit">提交</a>

<!-- section -->
<div class="section row">
    <div class="col s12">
        <h5>section列表</h5> 
        <div class="layout-row row" id="section-list-target">

        </div>
    </div>
</div>
<a class="waves-effect waves-light btn delete-section-submit">删除section</a>

<div class="section row">
    <form action="" class="" id="section-creat">
    <div class="col s12">
        <h5>创建section</h5> 
        <div class="layout-row row">
            <div class="col s12 m6">
                <div class="row">
                    <div class="input-field col s12 required" id="id_flat_bulding_container">
                        <input type="text" id="id_flat_bulding" name="name">
                        <label for="id_flat_bulding" class="">单元名称</label>
                    </div>
                </div>
            </div>
            <div class="col s12 m6">
                <div class="row">
                    <div class="input-field col s12 required" id="id_road_no_container">
                        <input type="text" id="id_road_no" name="displayName">
                        <label for="id_road_no" class="">单元显示名称</label>
                    </div>
                </div>
            </div>
        </div> 
        <div class="layout-row row">
            <div class="col s12 m10">
                <div class="row">
                    <div class="input-field col s12 required" id="id_area_and_landmark_container">
                        <input type="text" id="id_area_and_landmark" name="discription">
                        <label for="id_area_and_landmark" class="">描述</label>
                    </div>
                </div>
            </div>
            <div class="col s12 m2">
                <div class="row"> 
                    <div class="input-field col s12 required" id="id_person_title_container">
                        <select id="id_person_title" name="type" > 
                            <option value="tabular">表单</option>
                            <option value="non-tabular" selected>非表单</option>
                        </select>
                        <label for="id_person_title">单元类型</label> 
                    </div>
                </div>
            </div>
        </div> 
    </div>
    </form>
</div>
<a class="waves-effect waves-light btn section-form-submit">提交</a>

<!-- field -->




<script type="text/javascript">
    $(document).on("click",'.field-modal-submit',function(e){
        var  _form=$("#form-creat");
        $.post("/hr/creatForm", _form.serializeJSON(),function(data){
            console.log(data);
            $('#update-form-uuid').val(data.uuid);
            $('#update-form-displayName').val(data.displayName);
            $('#update-form-discription').val(data.description);
        }); 
    });

    $(document).on("click",'.with-gap',function(e){
        var id=$('input[name="select-uuid"]:checked').data('form-uuid');
        getForm(id);
        listSection();
    });


    $(".form-update-submit").click(function(e){
        var  _form=$("#form-update");
        $.post("/hr/updateForm", _form.serializeJSON(),function(data){
            console.log(data);
        }); 
    });

    function listForm(){
        $.post("/hr/listForm",{},function(data){
            $('#form-list-target').html(
                Handlebars.compile($('#form-list').html())(data)
            );
            console.log(data); 
        }); 
    }
    function getForm(id){
        $.post("/hr/getForm",{"id":id},function(data){
            $('#update-form-uuid').val(data.uuid);
            $('#update-form-displayName').val(data.DisplayName);
            $('#update-form-discription').val(data.Description);
            console.log(data); 
        });
    }

    listForm();

    $(".delete-form-submit").click(function(e){
        var id=$('input[name="select-uuid"]:checked').data('form-uuid');
        $.post("/hr/delForm",{"id":id},function(data){
            listForm();
        });
    })

    $(document).ready(function() {
        $('select').material_select();
    });

    //section
    $('.section-form-submit').click(function(e){
        var id=$('input[name="select-uuid"]:checked').data('form-uuid');
        var  _form = $("#section-creat");
        var parmas = _form.serializeJSON();
        parmas['id']= id;
        $.post("/hr/createSection", parmas , function(data){
            console.log(data);
        });
    });

    function listSection(){
        var id=$('input[name="select-uuid"]:checked').data('form-uuid');
        $.post("/hr/listSection",{'form-id':id},function(data){
            $('#section-list-target').html(
                Handlebars.compile($('#section-list').html())(data)
            );
            console.log(data); 
        }); 
    }

   

</script>