PasteForm最佳CRUD實踐,實際案例PasteTemplate詳解之管理前端的程式碼(二)

PasteSpider發表於2024-09-26

之前的文章說了,使用反射和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是如何處理問題的

相關文章