PasteForm最佳CRUD实践，实际案例PasteTemplate详解之管理前端的代码(二)

之前的文章说了，使用反射和ABPvNext的Dto实现用后端控制前端以实现最佳CRUD实践！
相信看过一的已经了解了这个PasteForm是如何实现的了，本文来看下具体如何实现的

表格页面的实现

打开pasteform/index.html页面之后，先会向API请求当前的path的数据模板

    _apiget(`/api/app/${_classPath}/readListModel`, true, (c, o) => {
        if (c == 200) {
            if (o.title) {
                $(".ppbody .st").find(".sn").html(o.title);
                this.document.title = o.title;
            }
            if (o.desc) {
                $(".ppbody .st").find(".idesc").html(o.desc);
            }
            //表头的模板内容
            var _template_head_html = null;

            _globadataProperties = o.properties;
            //模型处理，如何显示外表 比如cate.name 
            HandlerModelColumn(o.properties);
            //class模型的属性列表
            if (o.attributes) {
                _globadataAttributes = o.attributes;
                o.attributes.forEach(_attribute => {
                    if (_attribute.name == 'disable') {
                        if (_attribute.args1) {
                            _config.disable_add = true;
                            $(".btnadd").hide();
                        }
                        if (_attribute.args2) {
                            _config.disable_edit = true;
                        }
                        if (_attribute.args3) {
                            _config.disable_del = true;
                        }
                    }
                    if (_attribute.name == "template") {
                        if (_attribute.args1) {
                            _template_head_html = $(`#${_attribute.args1}`).html();
                        }
                        if (_attribute.args2) {
                            _template_body_html = $(`#${_attribute.args2}`).html();
                        }
                    }
                });
            }

            if (_template_head_html == null) {
                _template_head_html = $("#template_header").html();
            }
            var _modelhtml = template(_template_head_html, { list: o.properties, config: _config });
            //一级模型 转化成 二级模型
            if (_template_body_html == null) {
                var _template_body = $("#template_body").html();
                var _bodyhtml = template(_template_body, { list: o.properties, config: _config });
                _template_body_html = _bodyhtml.replace(/{{/g, '<%').replace(/}}/g, '%>');
            }
            $(".table").find("thead").html(_modelhtml);
            //处理查询项
            if (o.queryProperties) {
                _globdataQueryProperties = o.queryProperties;
                HandlerQueryItem(o.queryProperties);
            } else {
                _readpagedata(1);
            }
            //读取数据
        }
    });

看如上代码，就是先向后端获得这个页面的搜索区域的数据模型属性和下方表格的数据模型
然后

_readpagedata(1);

才是获取表格的数据，也就是说第二页之后的数据是只要请求一次的，只要首次打开才要获取数据模型的属性，如果你使用本地缓也是可以省略第一次的模型属性的数据的！
UI中再基于JS获取到的模型进行渲染

        <!-- 查询的信息模板 -->
        <script type="text/html" id="template_search">
            <% list.forEach(item=>{ %>
                <% if(item.dataType=="String" || item.dataType == 'Guid'){ %>
                    <label class="sitem" <%if(item.hidden){%>style="display:none;"<%}%>>
                        <span><%:=item.title%>:</span>
                        <input type="text" name="<%:=item.name%>" class="inputword" placeholder="<%:=item.placeholder || ''%>">
                        <span class="spanclean" onclick="handlerClean(this)">x</span>
                    </label>
                <% } %>
                <% if(item.dataType=="Int32" || item.dataType=='Int64'){ %>
                    <label class="sitem" <%if(item.hidden){%>style="display:none;"<%}%>>
                        <span><%:=item.title%>:</span>
                        <input type="number" name="<%:=item.name%>" class="inputword" placeholder="<%:=item.placeholder || ''%>">
                        <span class="spanclean" onclick="handlerClean(this)">x</span>
                    </label>
                <% } %>
                <% if(item.dataType=='outer'){ %>
                    <div class="outer sitem" <%if(item.hidden){%>style="display:none;"<%}%>>
                        <span><%:=item.title%>:</span>
                        <% if(item.dataFrom=='Int32' || item.dataFrom=='Int64'){ %>
                            <input type="number" class="outerid" style="display:none;" value="<%:=item.value%>" name="<%:=item.name%>">
                        <%}else{%>
                            <input type="text" class="outerid" style="display:none;"  value="<%:=item.value%>" name="<%:=item.name%>">
                        <%}%>
                        <input type="text" class="outerdisplay" dataname="<%:=item.name%>" value="<%:=item.display%>" onclick="handler_outer_value(this)" readonly placeholder="<%:=item.placeholder%>" >
                        <span class="spanclean" onclick="handlerCleanOuterInput(this)">x</span>
                    </div>
                <% } %>
                <% if(item.dataType=="select"){ %>
                    <label  class="sitem" <%if(item.hidden){%>style="display:none;"<%}%>>
                        <span><%:=item.title%>:</span>
                        <select name="<%:=item.name%>">
                            <% if(item.selects){ %>
                                <% item.selects.forEach(_select=>{ %>
                                    <option value="<%:=_select.value%>" <% if(_select.selected){ %>selected<% } %>><%:=_select.name%></option>
                                <% }) %>
                            <%}%>
                        </select>
                    </label>
                <% } %>
                <% if(item.dataType=="DateTime"){ %>
                    <label class="sitem" <%if(item.hidden){%>style="display:none;"<%}%>>
                        <span><%:=item.title%>:</span>
                        <input type="text" name="<%:=item.name%>" value="<%:=item.value || ''%>" class="inputword" onClick="WdatePicker({el:this,dateFmt:'<%:=item.format%>'})" placeholder="<%:=item.placeholder || ''%>">
                        <span class="spanclean" onclick="handlerClean(this)">x</span>
                    </label>
                <% } %>
                <% if(item.dataType=="datalist"){ %>
                    <label class="sitem" <%if(item.hidden){%>style="display:none;"<%}%>>
                        <span><%:=item.title%>:</span>
                        <input type="text" name="<%:=item.name%>" class="inputword" list="<%:=item.name%>" placeholder="<%:=item.placeholder || ''%>">
                            <% if(item.selects){ %>
                                <datalist id="<%:=item.datalistid%>">
                                    <% item.selects.forEach(_select=>{ %>
                                        <option value="<%:=_select.value%>" ><%:=_select.name%>(<%:=_select.value%>)</option>
                                    <% }) %>
                                </datalist>
                            <%}%>
                        <span class="spanclean" onclick="handlerClean(this)">x</span>
                    </label>
                <% } %>
                <% if(item.dataType=='daterange'){%>
                    <label class="sitem" <%if(item.hidden){%>style="display:none;"<%}%>>
                        <span><%:=item.title%>:</span>
                            <input type="text" class="inputword" name="<%:=item.name%>" readonly datas="" datae="" value="<%:=item.value || ''%>" id="<%:=item.name%>">
                    </label>
                <% } %>
            <% }) %>
        </script>

        <!-- 头部的信息模板 -->
        <script type="text/html" id="template_header">
                <tr>
                    <% list.forEach(item=>{ %>
                        <% if(!item.hidden){ %>
                            <td>
                            <%:=item.title%>
                              <% if(item.attributes!=null){ %>
                                <% item.attributes.forEach(_attribute=>{ %>
                                    <% if(_attribute.name=='orderby'){ %>
                                        <span class="orderby">
                                            <i class="Hui-iconfont ordersell icon-top" dataval="<%:=_attribute.args1%>"></i>
                                            <i class="Hui-iconfont ordersell icon-bottom" dataval="<%:=_attribute.args2%>"></i>
                                        </span>
                                    <% } %>
                                <% }) %>
                            <% } %>
                            </td>
                        <% } %>
                    <% }) %>
                    <td>操作</td>
                </tr>
        </script>

        <!-- 表格的信息模板 -->
        <script type="text/html" id="template_body">
            <!-- 注意花括号百分比的是当前的模板 2个花括号的是占位，下一个的模板代码 -->
            {{ list.forEach(item=>{ }}
                <tr>
                    <% list.forEach(item=>{ %>
                        <% if(!item.hidden){ %>
                            <td <%if(item.class){%>class="<%:=item.class%>"<%}%>>
                            <% if(item.dataType=='image' ){ %>
                                <img class="image" src="{{:=item.<%:=item.name%>}}">
                            <% }else if(item.dataType=='head' ){ %>
                                <img class="head" src="{{:=item.<%:=item.name%>}}">
                            <% }else if(item.dataType=='switch' ){ %>
                                <input type="checkbox" class="input-checkbox mui-switch mui-switch-anim" onchange="handlerSwitchChange(this)" dataid="{{:=item.id}}" dataname="<%:=item.name%>" {{ if(item.<%:=item.name%>){ }}checked{{ } }} >
                            <% }else{ %>                                
                                <%if(item.html){%>
                                    <%:=item.html%>
                                <%}else{%>
                                <span class="itd">
                                    {{:=item?.<%:=item.name%>}}
                                </span>
                                <%}%>
                            <% } %>
                            </td>
                        <% } %>
                    <% }) %>
                    <td class="fleft">
                        <!-- 这里填写编辑或者其他 -->
                        {{ if(config.model=='view'){ }}
                            <% if(config.menubox){%>
                                <a href="javascript:;" onclick="open_menu_box(this);" onmouseover="open_menu_box(this);" ><i class="Hui-iconfont Hui-iconfont-more"></i></a>
                                <div class="menubox" style="z-index: 100;" onmouseleave="$(this).fadeOut();">
                                    <% list.forEach(item=>{%>
                                        <% if(item.dataType=='menubox'){ %>
                                            <% if(item.attributes){ %>
                                                <% item.attributes.forEach(_attribute=>{ %>
                                                    <% if(_attribute.name=='menu'){ %>
                                                        <a onclick="<%:=_attribute.args2%>"><% if(_attribute.args3){%><i class="Hui-iconfont <%:=_attribute.args3%>"></i><%}%> <%:=_attribute.args1%></a>
                                                    <% } %>
                                                <% }) %>
                                            <% } %>
                                        <% } %>
                                        <% if(item.dataType=='ifmenubox'){ %>
                                            {{ if(<%:=item.ifmenu.expression%>){ }}
                                                <%:=item.ifmenu.value%>
                                            {{ } }}
                                        <% } %>
                                    <% }) %>
                                </div>
                            <% } %>

                            <% if(!config.disable_edit){ %>
                                <a href="javascript:;" onclick="tap_view_item(this)" dataid="{{:=item.id}}"><i class="Hui-iconfont Hui-iconfont-shuru"></i>编辑</a>
                            <% } %>

                            <!-- 处理自定义的类型，由于是表的性质，穿透到数据的className -->
                            <% list.forEach(item=>{%>
                                <% if(item.dataType=='menu'){ %>
                                    <% if(item.attributes){ %>
                                        <% item.attributes.forEach(_attribute=>{ %>
                                            <% if(_attribute.name=='menu'){ %>
                                                <a onclick="<%:=_attribute.args2%>"><% if(_attribute.args3){%><i class="Hui-iconfont <%:=_attribute.args3%>"></i><%}%> <%:=_attribute.args1%></a>
                                            <% } %>
                                        <% }) %>
                                    <% } %>
                                <% } %>
                                <% if(item.dataType=='ifmenu'){ %>
                                    {{ if(<%:=item.ifmenu.expression%>){ }}
                                        <%:=item.ifmenu.value%>
                                    {{ } }}
                                <% } %>
                            <% }) %>

                            <% if(!config.disable_del){ %>
                                <a href="javascript:;" onclick="handler_tap_del(this)" class="a-del" dataid="{{:=item.id}}"><i class="Hui-iconfont Hui-iconfont-del3"></i>删除</a>
                            <% } %>

                        <!-- 自定义处理操作列菜单完成 -->
                        {{ } }}

                        {{ if(config.model=='select'){ }}
                        <a href="javascript:;" class="mselect" onclick="tap_select_item(this)"
                            dataid="{{:=item.id}}"><i class="Hui-iconfont Hui-iconfont-fabu"></i>选择</a>
                        {{ } }}
                    </td>
                </tr>
            {{ }) }}
        </script>

注意表格中的模板进行了二次转化，也就是获取模型后先转化成数据模型获得模板，然后再结合实际的页数据再一次进行UI渲染

表单页面的实现

表单页面打开后会判断是否是编辑，其实整个思路是一样的，只是请求的接口不一样，一个是XXXAddDto一个是UpdateDto

/**
 * 读取模型和默认值，值等
 */
function FuncFilexModel() {
    // console.log(_id);
    if (_id && _id != '0' && _id != 0) {
        _apiget(`/api/app/${_classPath}/${_id}/readUpdateModel`, true, (c, o) => {
            if (c == 200) {
                loadHeader(o);
                if (o.properties) {
                    LoadModelProperity(o.properties);
                }
                if (o.title) {
                    this.document.title = "更新" + o.title;
                }
            }
        });
    } else {
        _apiget(`/api/app/${_classPath}/readAddModel`, true, (c, o) => {
            if (c == 200) {
                loadHeader(o);
                if (o.properties) {
                    LoadModelProperity(o.properties);
                }
                if (o.title) {
                    this.document.title = "新增" + o.title;
                }
            }
        });
    }
}

其实2个请求到最后都是到LoadModelProperity的函数中

/**
 * 读取数据的模型 处理数据的模型
 * @param {*} properties 
 */
function LoadModelProperity(properties) {
    _modelProperties = properties;
    handlerExchangeDataTypeToUIType(properties);

    var _template = $("#templatemodel").html();
    var _ahtml = template(_template, { list: properties, config: _config });
    $(".paste-form-body").html(_ahtml);
    setTimeout(function () {
        FormLoaded(properties);
        funcAppendInputLength();

        //计算高度，返回
        var _height = $(".newform").height() + 140;
        if (_has_outer) {
            //如果计算的高度小于600，表单中有outer则至少保证高度为600
            if (_height < 600) {
                _height = 600;
            }
        }
        var _index = parent.layer.getFrameIndex(window.name); //获取窗口索引
        if (window.parent.set_dialog_height) {
            window.parent.set_dialog_height(_height, _index);
        } else {
            console.log('没有在父级找到函数set_dialog_height');
        }

        $(".ulselects").on('click', 'li', function () {
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
            } else {
                $(this).addClass('selected');
            }
        });


    }, 100);
}

然后是前端HTML中，基于JS获取的数据进行UI渲染

        <script type="text/html" id="templatemodel">
            <% list.forEach(item=>{%>
                <div class="row cl <% if(item.singlerow){ %>singlerow<% } %>" <%if(item.hidden){%> style="display:none;" <%}%>>
                    <div class="itemrow">
                        <label class="form-label"><%:=item.title%><%if(item.mark){%><span class="tapmark" onclick="global_tap_mark('<%:=item.mark.model%>','<%:=item.mark.value%>')">?</span><%}%><%if(item.required){%><span class="form-required">*</span><%}%></label>
                        <div class="formControls">
                        <% if(item.dataType=="text" || item.dataType =='Guid'){ %>
                            <input name="<%:=item.name%>" class="input-text" <%if(item.required){%>required<%}%> type="text" value="<%:=item.value || ''%>" maxlength="<%:=item.maxlength%>" placeholder="<%:=item.placeholder%>" />
                            <span class="spanclean" onclick="handlerClean(this)">x</span>
                        <%}%>
                        <% if(item.dataType=="number"){ %>
                            <input name="<%:=item.name%>" class="input-number" placeholder-class="p-form-placeholder" type="number" value="<%:=item.value || ''%>" placeholder="<%:=item.placeholder%>" />
                            <%if(item.unit){%>
                                <span class="unit"><%:=item.unit%></span>
                            <%}%>
                        <%}%>
                        <% if(item.dataType=="fentoyuan"){ %>
                            <input name="<%:=item.name%>" class="input-number" step="0.01" min="0" max="99999999" placeholder-class="p-form-placeholder" type="number" value="<%:=item.value || ''%>" placeholder="<%:=item.placeholder%>" />
                            <span>元</span>
                        <%}%>
                        <% if(item.dataType=="Double" || item.dataType=='Decimal'){ %>
                            <input name="<%:=item.name%>" class="input-number" step="<%:=item.step%>" placeholder-class="p-form-placeholder" type="number" value="<%:=item.value || ''%>" placeholder="<%:=item.placeholder%>" />
                            <%if(item.unit){%>
                                <span class="unit"><%:=item.unit%></span>
                            <%}%>
                        <%}%>
                        <% if(item.dataType=="textarea"){ %>
                            <textarea name="<%:=item.name%>" class="input-textarea" <%if(item.style){%>style="<%:=item.style%>"<%}%> <%if(item.required){%>required<%}%> <%if(item.maxlength>0){%>maxlength="<%:=item.maxlength%>"<%}%> placeholder="<%:=item.placeholder%>" ><%:=item.value || ''%></textarea>
                            <span class="spanclean" onclick="handlerClean(this)">x</span>
                        <%}%>
                        <% if (item.dataType=="switch"){ %>
                            <input type="checkbox" class="input-checkbox mui-switch mui-switch-anim" <%if(item.value){%>checked<%}%> name="<%:=item.name%>">
                            <span class="placeholder"><%:=item?.placeholder || ''%></span>
                        <%}%>
                         <% if(item.dataType=="datetime"){ %>
                            <input type="text" value="<%:=item.value || ''%>" name="<%:=item.name%>" <%if(item.required){%>required<%}%> maxlength="20" placeholder="<%:=item.placeholder%>" onClick="WdatePicker({el:this,dateFmt:'<%:=item.format%>'})"
                            autocomplete="off" class="input-text input-form-date">
                        <%}%>
                        <% if(item.dataType=="daterange"){ %>
                            <input type="text" value="<%:=item.value || ''%>" id="<%:=item.name%>" name="<%:=item.name%>" datas="" datae="" <%if(item.required){%>required<%}%> placeholder="<%:=item.placeholder%>" 
                            autocomplete="off" class="input-text input-form-date">
                        <%}%>
                        <% if(item.dataType == "richtext"){ %>
                            <div class="editoryarea">
                                <div class="editor_toolbar" id="<%:=item.name%>editorbar"></div>
                                <div class="editor_body" id="<%:=item.name%>editor"></div>
                            </div>
                        <%}%>
                        <% if(item.dataType == "file"){ %>
                            <input type="file" id="<%:=item.name%>" datanum="<%:=item.num%>" onchange="handlerUploadOnlyFile(this)" <%if(item.url){%>dataurl=<%:=item.url%><%}%> datatype="<%:=item.type%>" datasize="<%:=item.size%>" style="display:none" />
                            <input type="text" name="<%:=item.name%>" value="<%:=item.value%>" placeholder="<%:=item.placeholder%>" onclick="$('[id=<%:=item.name%>]').trigger('click');">
                            <span class="spanclean" onclick="handlerClean(this)">x</span>
                        <%}%>

                        <% if(item.dataType == "image" || item.dataType=="images"){ %>
                            <input type="text" style="display:none" name="<%:=item.name%>" value="<%:=item.value%>">
                            <input type="file" multiple id="<%:=item.name%>" datanum="<%:=item.num%>" onchange="handlerUploadFile(this)" datatype="<%:=item.type%>" datasize="<%:=item.size%>" style="display:none;" />
                            <% if(item.num ==1){%>
                                <label for="<%:=item.name%>">
                                    <img class="form-image-head" <%if(item.value){%>src="<%:=item.value%>"<%}%> >
                                    <%if(!item.value){%>
                                        <span class="iconadd icon-add">
                                            <i class="Hui-iconfont Hui-iconfont-add2 icon"></i>
                                        </span>
                                    <%}%>
                                </label>
                                <span class="placeholder"><%:=item?.placeholder || ''%></span>
                            <% }else{ %>
                                <span class="placeholder"><%:=item?.placeholder || ''%></span>
                                <ul class="imageul">
                                    <li><label for="<%:=item.name%>"><span class="icon-add">
                                        <i class="icon Hui-iconfont Hui-iconfont-add2"></i>
                                    </span></label></li>
                                    <%if(item.images){%>
                                        <%item.images.forEach(_img=>{%>
                                            <li><img src="<%:=_img%>"><i class="Hui-iconfont Hui-iconfont-close2 icon-close"  onclick="handlerRemoveImageItem(this)"></i></li>
                                        <%})%>
                                    <%}%>
                                    <!-- <li>
                                        <img>
                                        <i class="iconfont icon-close" onclick="handlerRemoveImageItem(this)"></i>
                                    </li> -->
                                </ul>
                            <% } %>
                        <%}%>

                        <% if(item.dataType=='outer'){ %>
                            <div class="outer">
                                <% if(item.dataFrom=='Int32' || item.dataFrom=='Int64'){ %>
                                    <input type="number" class="outerid" style="display:none;" value="<%:=item.value%>" name="<%:=item.name%>">
                                <%}else{%>
                                    <input type="text" class="outerid" style="display:none;"  value="<%:=item.value%>" name="<%:=item.name%>">
                                <%}%>
                                <input type="text" class="outerdisplay" dataname="<%:=item.name%>" value="<%:=item.display%>" onclick="handler_outer_value(this)" readonly placeholder="<%:=item.placeholder%>" >
                                <span class="spanclean" onclick="handlerClean(this)">x</span>
                            </div>
                        <% } %>

                        <% if(item.dataType=='outers'){ %>
                            <div class="outers">
                                <input type="button" value="添加" class="btn btnaddouter" dataname="<%:=item.name%>" onclick="handler_outer_value(this)">
                                <ul class="ulouter outers<%:=item.name%>">
                                    <% if(item.display){%>
                                        <% item.display.forEach(_display=>{ %>
                                            <li dataid="<%:=_display[item.display_id]%>">
                                                <%:=_display[item.display_name]%>
                                                <span class="outer_close"  onclick="$(this).parents('li').remove();">x</span>
                                            </li>
                                        <% }) %>
                                    <% } %>
                                </ul>
                            </div>
                        <% } %>

                        <% if(item.dataType=="select"){ %>
                                <select name="<%:=item.name%>">
                                    <% if(item.selects){ %>
                                        <% item.selects.forEach(_select=>{ %>
                                            <option value="<%:=_select.value%>" <%if(_select.value==item.value){%>selected<%}%>><%:=_select.name%></option>
                                        <% }) %>
                                    <%}%>
                                </select>
                        <% } %>

                        <%if(item.dataType=="button"){%>
                            <input type="button" class="btn btnlink" value="<%:=item.value%>" onclick="global_form_button_click(this,`<%:=config.className%>`,`<%:=item.name%>`);">
                            <span class="placeholder"><%:=item?.placeholder || ''%></span>
                        <%}%>

                        <% if(item.dataType=="selects"){ %>
                            <ul class="ulselects" name="<%:=item.name%>">
                                <% if(item.selects){ %>
                                    <% item.selects.forEach(_select=>{ %>
                                        <li class="selectli <%if(_select.selected){%>selected<%}%>" value="<%:=_select.value%>"><%:=_select.name%></li>
                                    <% }) %>
                                <%}%>
                            </ul>
                        <% } %>

                        <% if(item.dataType=="datalist"){ %>
                                <input type="text" name="<%:=item.name%>" class="inputword" value="<%:=item.value%>" list="<%:=item.name%>" placeholder="<%:=item.placeholder || ''%>">
                                    <% if(item.selects){ %>
                                        <datalist id="<%:=item.datalistid%>">
                                            <% item.selects.forEach(_select=>{ %>
                                                <option value="<%:=_select.value%>" ><%:=_select.name%>(<%:=_select.value%>)</option>
                                            <% }) %>
                                        </datalist>
                                    <%}%>
                                <span class="spanclean" onclick="handlerClean(this)">x</span>
                        <% } %>
                        </div>
                    </div>
                </div>
            <%})%>
        </script>

所以说，针对不同项目的不同需求，或者说你们的个人习惯，可以对上面的代码进行修改以便适应自己的项目，比如我的项目一般不会用到date,一般用到的是datetime，所以我就没考虑date的情况了！

下一次将介绍在实际中遇到的问题，和PasteForm是如何处理问题的