Shr-前端匯總

本文轉載自查看原文 2018-01-10 15:46 1129 Kingdee

F7控件監聽

　　f7控件的監聽是指，在點擊F7控件時，對控件內的內容進行選中后出發該事件監聽；通過參數value可以獲取當前F7控件的一些值信息。

 1 //人力編制方案監聽 回寫計划期間 及分錄數據
 2     initalRecruitment :function() {
 3         var self = this;
 4         if(this.getHistoryOperateState() != "VIEW"){
 5             $("#hrPlaitProject").shrPromptBox("option", {
 6             onchange : function (e, value) {
 7                 if(value.current == null){
 8                     return;
 9                 }
10                 var currentId = value.current.id;
11                 self.remoteCall({
12                     method : 'getEntry',
13                     param : {
14                         plaitProjectId : currentId
15                     },
16                     success : function(data) {
17                         $("#planPeriod").val(data.planPeriod);
18                         self.initalEntry(data.entryData);
19                     }
20                 });
21             }
22         });
23         }
24     }

初始化F7控件值

　　將初始化方法寫入到initalizeDOM() 初始化頁面方法中。給F7賦值時，需要提供id,name 格式數據。

 1 /*初始化單位*/
 2     initAdminOrg: function(){
 3         var self = this;
 4         self.remoteCall({
 5             method : "getCurrentCompany",
 6             success : function(data) {
 7                 if(data != undefined && data != null) {
 8                     var adminOrg = {id:data.orgId,name:data.orgName};
 9                     $("#unitOrg").shrPromptBox("setValue", adminOrg);    
10                 }
11             }
12         });    
13     }

初始化F7時，添加過濾

　　組裝好filter后，給F7控件設置過濾條件Filter。此處的list 需要進行處理，因為不符合 ‘1’，‘2’，‘3’ 格式。

 1 /*初始化攜帶證件的 證件類型F7*/
 2     initCredentialType: function(data){
 3         var self = this;
 4         if(data != '' && data != null){
 5             var personId = data;
 6             self.remoteCall({
 7             method : 'getPersonCredentialTypeId',
 8             param : {
 9                 personId : personId
10             },
11             success : function(datas) {
12                 if(datas != '' && datas != null){
13                         var list = datas.types;
14                         var filter = "id in ('" +list + "')";
15                         $("#credential").shrPromptBox("setFilter",filter);
16                     }
17                 }
18             });
19         }
20         
21     }

　　此處為過濾條件的獲取Handler,着重對list進行處理。

 1  * 
 2      * <p>
 3      * Title: getPersonCredentialTypeIdAction
 4      * </p>
 5      * <p>
 6      * Description:
 7      * </p>
 8      * 獲取出境員工的 出入境證件信息 證件類型id
 9      * 
10      * @param request
11      * @param response
12      * @param modelMap
13      * @throws SHRWebException
14      */
15     public void getPersonCredentialTypeIdAction(HttpServletRequest request, HttpServletResponse response,
16             ModelMap modelMap) throws SHRWebException {
17         String personId = request.getParameter("personId");
18         StringBuilder sb = new StringBuilder();
19         if (StringUtils.isEmpty(personId)) {
20             throw new ShrWebBizException("初始化攜帶證件類型失敗！");
21         }
22         try {
23             // 出入境證件信息
24             String sql = "select cftypesid from CT_E_EntryAndExitCredential where cfpersonid = '" + personId
25                     + "'";
26             IRowSet rowSet = DbUtil.executeQuery(ctx, sql);
27             List<String> list = new ArrayList<String>();
28             while (rowSet.next()) {
29                 String typeId = rowSet.getString("cftypesid");
30                 list.add(typeId);
31             }
32 
33             for (int i = 0; i < list.size(); i++) {
34                 String str = list.get(i);
35                 sb.append(str);
36                 if (i < list.size() - 1) { 37 sb.append("','"); 38 } 39             }
40             modelMap.put("types", sb.toString());
41 
42             JSONUtils.writeJson(response, modelMap);
43         } catch (BOSException e) {
44             e.printStackTrace();
45             throw new ShrWebBizException("初始化證件類型中獲取出入境證件失敗！" + e);
46         } catch (SQLException e) {
47             e.printStackTrace();
48             logger.error("執行sql失敗！" + e);
49         }
50     }

對分錄進行賦值

　　首先是在視圖中定義好分錄及字段。如下：

......  //其余部分省略   
   <editGrid name="entrys" sorterItems="department asc" >
            <column name="familyMember"  required="true" readonly="true" editable="false"   width="185"/>
            <column name="name" required="true" readonly="true" editable="false"   width="200"/>
            <column name="sex" readonly="true" editable="false"  width="110"/> 
            <column name="nationality" readonly="true" editable="false" width="110"/>
            <column name="company" rreadonly="true" editable="false"  width="110"/>    
            <column name="telphone" readonly="true" editable="false"  width="110"/>    
    </editGrid>
......

　　分錄賦值：

//根據人力編制方案 初始化招聘計划明細waf
    initalEntry: function(datas){
        var rowdatas = datas;
        for(var i = 0, len = rowdatas.length; i < len; i++){
            var info = rowdatas[i];
            var datarow = {
                "adminOrg":info.adminOrg,
                "postion":info.postion,
                "plaitNum":info.plaitNum,
                "missNum":info.missNum };
            waf("#entrys").jqGrid('addRow',{data:datarow});
        }
    }

監聽分錄中的F7控件

　　視圖：

 1 <group name="detail" caption="八級工報名明細" >
 2         <editGrid name="entrys" sorterItems="department asc" >
 3             <column name="person"  required="true"  label="姓名" uipk="shr.custm.person.F7" width="80"/>
 4             <column name="gender"  readonly="true" editable="false" width="50" />
 5             <column name="birthDate" readonly="true" editable="false"  width="120"/> 
 6             <column name="education" readonly="true" editable="false" width="120"/>
 7             <column name="applyWorkType" width="110" required="true"/>    
 8             <column name="applyLeavel" width="110" required="true"/>    
 9             <column name="applyType" width="110" required="true"/>    
10             <column name="workYears" required="true"/>    
11             <column name="entryDate" readonly="true" editable="false"  width="120"/>    
12             <column name="mType" readonly="true" editable="false"  width="120"/>
13             <column name="remark" readonly="true" editable="false"  width="110"/>
14             <column name="turnInto" readonly="true" editable="false"  width="80"/>
15         </editGrid>
16     </group>

　　監聽值改變事件

 1 tableCellChange: function(){
 2         var self = this;
 3         var grid = waf("#entrys");
 4         grid.wafGrid("option", {
 5             afterSaveCell:function (rowid, cellname, value, iRow, iCol) {
 6                 if(cellname=="person") { // 只監聽person 列的值改變
 7                     self.assignData(rowid);
 8                 }
 9             }
10         });
11 
12     }

　　分錄grid當前行賦值

 1 assignData: function(rowid){
 2         var self = this;
 3         var person = $("#entrys").jqGrid('getCell',rowid,"person");
 4         if(person == null || person == ''){
 5             return;
 6         }
 7         var personId = person.id;
 8         self.remoteCall({
 9             method:'getPersonData',
10             param : {
11                 personId : personId
12             },
13             success:function(data){
14                 if(data != '' && data != null){
15                     var gender = data.gender;
16                     var birthday = data.birthday;
17                     var degree = data.degree;
18                     var entreDate = data.entreDate;
19                     var typeName = data.typeName;
20 
21                     $("#entrys").jqGrid('setCell',rowid,"gender",gender);
22                     $("#entrys").jqGrid('setCell',rowid,"birthDate",birthday);
23                     $("#entrys").jqGrid('setCell',rowid,"education",degree);
24                     $("#entrys").jqGrid('setCell',rowid,"entryDate",entreDate);
25                     $("#entrys").jqGrid('setCell',rowid,"mType",typeName);
26                     
27                 }
28             }
29         });
30     }

單選按鈕

　　視圖：視圖中只定義一個出境類型的div,然后使用js進行填充單選組內容。

 1 <group>
 2     <div id="exitType">
 3       <div class="col-lg-4">
 4         <div class="field_label" title="出境類型">出境類型</div>
 5       </div>
 6      <div class="field-ctrl">
 7             <div class="radiowrap">
 8                 <!-- 出境類型 -->
 9             </div>
10        </div>
11     </div>
12 </group>

 1 //初始化出境類型
 2     initRecruitmentTypeContent: function(){
 3         var self = this;
 4         if(this.getOperateState() != "VIEW"){
 5                 self.remoteCall({
 6                 method : "getExitTypeContent",
 7                 success : function(data){
 8                     if(data != undefined) {
 9                         var recTypeHTML = "";
10                         for(var i=0; i<data.length; i++) {
11                             var type = data[i];
12                             recTypeHTML += '<input name="exitType" type="radio" id="exitType'+type.number+'" class="radio" data-pk="'+type.id+'" data-name="'+type.name+'" /> <label for="exitType'+type.number+'" class="radio_label">'+type.name+'</label>';
13                         }
14                         $("#exitType").find(".radiowrap").html(recTypeHTML);
15                     }
16                 }
17             });
18         }
19     }

向服務端發送請求（常用）

　　method對應的參數名就是handler中的該參數名+Action方法

 1 self.remoteCall({
 2         method : 'getEntry',
 3         param : {
 4                 plaitProjectId : currentId
 5         },
 6         success : function(data) {
 7                 $("#planPeriod").val(data.planPeriod);
 8                 self.initalEntry(data.entryData);
 9         }
10     });

控件值改變時間（文本框日期控件等）

1 $('#endDate').change(function(){  
2                 self.countApplyDays();
3    });

頁面彈框提示

　　showInfo showWarning等。其中hideAfter指得的控件消失時間（s）。

1 shr.showWarning({
2       message:"截止日期不能小於起始日期",
3       hideAfter:5
4 });

頁面按鈕

　　提交生效

　　　　提交生效指得是當前業務單據直接保存並審核通過。

　　　　一般有兩種情況，在handler中需要進行區分：

　　　　　　1. 當前業務單據完成信息錄入操作后，直接點擊的提交生效按鈕。（即該業務單據尚未保存，此時傳遞到Handler的model中是不會有單據id的；此時業務單據如果有分錄信息的話，該model中也是可以獲取的）

　　　　　　2. 當前業務單據完成信息錄入后，點進行了保存操作，而后點擊提交生效。（則在Handler中就不需要對該單據信息進行保存了，只需要更新單據狀態為審批通過及其他業務邏輯處理即可；此時保存后的單據，在提交生效Handler中獲取model 時，獲取不到分錄信息的，需要根據單據id查詢分錄信息）

 1 /**
 2      * 單據提交生效
 3      * @param {} event
 4      */
 5     submitEffectAction : function (event) {
 6         var _self = this;
 7         _self.remoteCall({
 8             method:'canSubmitEffect',
 9             success:function(data){
10                 if("success" == data.state){
11                     if(_self.getOperateState() == 'VIEW' ){//&& _self.checkBillState()
12                         shr.showConfirm('您確認要提交生效嗎？', function() {        
13                             _self.prepareSubmitEffect(event, 'submitEffect');
14                         });
15                     }else{
16                         if (_self.validate() && _self.verify() ) {    //&& _self.checkBillState()
17                             shr.showConfirm('您確認要提交生效嗎？', function() {        
18                                 _self.prepareSubmitEffect(event, 'submitEffect');
19                             });
20                         }
21                     }
22                 }
23             }
24         });
25     },
26     prepareSubmitEffect : function (event, action){
27         var _self = this;
28         var data = _self.assembleSaveData(action);
29         
30         var target;
31         if (event && event.currentTarget) {
32             target = event.currentTarget;
33         }
34 
35         shr.doAction({
36             target: target,
37             url: _self.dynamicPage_url,
38             type: 'post', 
39             data: data,
40             success : function(response) {
41                 _self.back();
42             }
43         });    
44     },

　　保存

　　　　保存邏輯一般不需要重寫，但是如果單據上有一些單據處理的內容，比如單選組信息，次數就需要重寫saveAction，重新用

assembleSaveData()方法進行對傳遞到服務端的數據進行組裝。獲取到數據以后單獨對該選中的單選組信息進行保存。保存、提交、提交生效方法都會調用該方法。

assembleSaveData()方法一般情況下不需要重寫，該方法就是為了組裝傳遞至服務端數據model。比如此處的需要對單選組信息出境類型進行單獨保存。Handler中通過 String exitTypeId = request.getParameter("exitType"); 進行獲取 data.exitType = _self.getRecuritmentTypeDate() 的值。

 1 //組裝保存時傳至服務端的數據  （當需要傳輸單據上別的數據的時候 可以在這個方法中組裝數據傳遞到后端）
 2     assembleSaveData: function(action){
 3         var _self = this;
 4         var data =_self.prepareParam(action + 'Action');
 5         data.method = action;
 6         data.operateState = _self.getOperateState();
 7         data.model = shr.toJSON(_self.assembleModel()); 
 8 
 9         var model = data.model;
10         if(model != undefined && model != "") {
11             data.model = model.replace(/<pre\sclass=\\"textarea-format\\">/gi,"").replace(/<\/pre>/gi,""); //抹掉因為在view界面中對富文本調.html()方法而帶出的標簽
12         }
13 
14         data.exitType = _self.getRecuritmentTypeDate();
15 
16         // relatedFieldId
17         var relatedFieldId = this.getRelatedFieldId();
18         if (relatedFieldId) {
19             data.relatedFieldId = relatedFieldId;
20         }
21         
22         return data;
23     },
24 //獲取選中的出境類型 id
25     getRecuritmentTypeDate : function(){
26         var type = $("#exitType input[type='radio']:checked");
27         var recTypeId = $(type).attr("data-pk");
28         return recTypeId;
29     }

 1 /**
 2      * 單據保存  重寫
 3      * @param {} event
 4      */
 5 saveAction: function(event) {
 6         var _self = this;
 7         if (_self.validate() && _self.verify()) {
 8             //_self.refreshNowBillState();
 9 
10             _self.doSave(event, 'save');
11 
12         }else{
13             if(_self != top){// in iframe
14                 shr.setIframeHeight(window.name);
15             } 
16                 
17         }    
18     },
19     /**
20      * 保存真正執行方法
21      */
22     doSave: function(event, action) {
23         var _self = this;
24         var data = _self.assembleSaveData(action);
25         
26         var target;
27         if (event && event.currentTarget) {
28             target = event.currentTarget;
29         }
30         
31         shr.doAction({
32             target: target,
33             url: _self.dynamicPage_url,
34             type: 'post', 
35             data: data,
36             success : function(response) {
37                 if (_self.isFromF7()) {
38                     // 來自F7，關閉當前界面，並給F7設置
39                     var dataF7 = {
40                         id : response,
41                         name : $.parseJSON(data.model).name
42                     };
43                     dialogClose(dataF7);
44                 } else {
45                     // 普通保存，去除最后一個面包屑，防止修改名字造成面包屑重復
46                     shrDataManager.pageNavigationStore.pop();
47                     _self.viewAction(response);
48                 }
49             }
50         });    
51     }

　　　　套打

　　1. 配置視圖中的套打按鈕 templatePrint

　　 2. 繪制套打模板 js寫入套打模板路徑 /s-HR/Cadreadministrator/CadreadministratorJob

　　3. 綁定查詢數據源 com.kingdee.eas.custom.cadreadministrate.app.CadreAppointmentQuery

    /**
     * 套打模板名稱
     */
    getTemplateName: function() {
        return '/s-HR/Cadreadministrator/CadreadministratorJob';
    },
    /**
     * 套打dataProvider
     */
    getTemplateDataProvider: function() {
        return 'com.kingdee.bos.webframework.component.report.CommonDataProvider';
    }
    getTemplateQueryPK: function() {
        return 'com.kingdee.eas.custom.cadreadministrate.app.CadreAppointmentQuery';
    }

　　　加載css外部樣式表並優先加載

<style href="${appPath}/custom/web/css/evalPerson/evalPerson.css"/>


evalPerson.css
/**
    修改 #solutionPeriodname_down 下拉列表width 並提高優先級
*/
#solutionPeriodname_down {
    width:430px !important;
}


!important作用是提高指定CSS樣式規則的應用優先權

　　數據表格分頁設置

<grid multiselect="false"   rowList="[100,200]" rowNum="200" > 

rowList 為每次查詢條數

rowNum 為初始查詢條數（默認查詢50條）

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 前端性能優化匯總前端資料匯總前端Js框架匯總前端繼承方式匯總前端面試匯總前端框架匯總前端框架的匯總前端Js框架匯總 Python開發【前端】:匯總前端模板引擎匯總